Fixed table styles and panel variants

.gitignore

@@ -141,7 +141,7 @@ out
 
 # Nuxt.js build / generate output
 .nuxt
-dist
+dist/*
 
 # Gatsby files
 .cache/

.stylelintrc.json

@@ -6,6 +6,11 @@
     "stylelint-scss",
     "stylelint-order"
   ],
+  "ignoreFiles": [
+    "**/node_modules/**",
+    "dist/**",
+    "src/vendor/**"
+  ],
   "customSyntax": "postcss-scss",
   "rules": {
     "at-rule-no-unknown": null,

package.json

@@ -1,7 +1,7 @@
 {
   "name": "cyberduck",
-  "private": false,
-  "version": "1.1.0",
+  "private": true,
+  "version": "1.1.1",
   "repository": {
     "type": "git",
     "url": "git+https://git.maze.io/maze/cyberduck.git"
@@ -12,7 +12,7 @@
   "homepage": "https://git.maze.io/maze/cyberduck#readme",
   "type": "module",
   "main": "dist/cyberduck.cjs.js",
-  "module": "dist/cyberduck.es.js",
+  "module": "dist/esm.js",
   "types": "dist/types/index.d.ts",
   "style": "dist/cyberduck.css",
   "sideEffects": [
@@ -26,19 +26,19 @@
   ],
   "exports": {
     ".": {
-      "import": "./dist/cyberduck.es.js",
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/index.js",
       "require": "./dist/cyberduck.cjs.js",
-      "default": "./dist/cyberduck.es.js",
-      "types": "./dist/types/index.d.ts"
+      "default": "./dist/index.js"
     },
     "./package.json": "./package.json",
     "./styles": "./src/styles/cyberduck.scss",
     "./styles/*": "./src/styles/*",
     "./css": "./dist/cyberduck.css",
     "./*": {
-      "import": "./dist/cyberduck.es.js",
-      "require": "./dist/cyberduck.cjs.js",
-      "types": "./dist/*.d.ts"
+      "types": "./dist/*.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/cyberduck.cjs.js"
     }
   },
   "scripts": {
@@ -49,9 +49,9 @@
     "lint": "eslint .",
     "lint:css": "stylelint \"src/**/*.{scss,css,sass}\"",
     "format:css": "prettier --write \"src/**/*.{scss,css,sass}\"",
-    "styles:build": "sass --no-source-map --style=compressed --load-path=node_modules src:dist",
-    "styles:check": "sass --no-source-map --update --load-path=node_modules src:dist",
-    "styles:dev": "sass --watch --no-source-map --load-path=node_modules src:dist",
+    "styles:build": "sass --no-source-map --style=compressed --load-path=node_modules --quiet-deps src:dist",
+    "styles:check": "sass --no-source-map --update --load-path=node_modules --quiet-deps src:dist",
+    "styles:dev": "sass --watch --no-source-map --load-path=node_modules --quiet-deps src:dist",
     "preview": "vite preview"
   },
   "peerDependencies": {

scripts/build-if-needed.cjs

@@ -29,7 +29,7 @@ if (fs.existsSync(tsconfig)) {
 // 2) Sass build (styles)
 runIfAvailable(
   'npx --no-install sass --version',
-  'npx --no-install sass --no-source-map --style=compressed --load-path=node_modules src:dist',
+  'npx --no-install sass --no-source-map --style=compressed --load-path=node_modules --quiet-deps --silence-deprecation=if-function,global-builtin,color-functions src:dist',
   'Sass styles build',
 )
 
@@ -68,3 +68,49 @@ try {
 } catch (e) {
   console.warn('Failed to generate per-subpath wrappers:', e && e.message)
 }
+
+// Ensure a minimal `dist/types/index.d.ts` exists so consumers installing
+// from the packed tarball won't see a "could not find declaration file" error.
+try {
+  const indexDts = path.join(cwd, 'dist', 'types', 'index.d.ts')
+  if (!fs.existsSync(indexDts)) {
+    const dir = path.dirname(indexDts)
+    if (!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true })
+    const fallback = `/// <reference types="react" />
+  export const Navbar: import('react').FC<any>;
+  export const Footer: import('react').FC<any>;
+  export const Layout: import('react').FC<any>;
+  export const Split: import('react').FC<any> & { Panel: import('react').FC<any> };
+  export default { Navbar, Footer, Layout, Split };
+  `
+    fs.writeFileSync(indexDts, fallback)
+    console.log('Wrote fallback dist/types/index.d.ts')
+  }
+} catch (e) {
+  console.warn('Failed to write fallback index.d.ts:', e && e.message)
+}
+
+// Write a small ESM wrapper that re-exports everything from the generated
+// `cyberduck.es.js` bundle. Some browser toolchains import the package
+// entry directly; having a tiny wrapper helps ensure named exports are
+// preserved and visible to native ESM loaders.
+try {
+  const esmWrapperPath = path.join(cwd, 'dist', 'esm.js')
+  // Re-export named bindings and build a local default object so we don't
+  // need to import the bundle's default (some tools choke on that).
+  const esmContent = `import { Navbar, Footer, Layout, Split } from './cyberduck.es.js';\nexport { Navbar, Footer, Layout, Split };\nconst __default = { Navbar, Footer, Layout, Split };\nexport default __default;\n`;
+  fs.writeFileSync(esmWrapperPath, esmContent)
+  console.log('Wrote dist/esm.js wrapper')
+} catch (e) {
+  console.warn('Failed to write dist/esm.js wrapper:', e && e.message)
+}
+try {
+  const indexPath = path.join(cwd, 'dist', 'index.js')
+  // index.js mirrors esm.js to help environments that resolve package root
+  // to an index file instead of reading package.json fields.
+  const indexContent = `import { Navbar, Footer, Layout, Split } from './cyberduck.es.js';\nexport { Navbar, Footer, Layout, Split };\nconst __default = { Navbar, Footer, Layout, Split };\nexport default __default;\n`;
+  fs.writeFileSync(indexPath, indexContent)
+  console.log('Wrote dist/index.js wrapper')
+} catch (e) {
+  console.warn('Failed to write dist/index.js wrapper:', e && e.message)
+}

src/components/Footer.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-const Footer: React.FC = () => {
+export const Footer: React.FC = () => {
   return (
     <footer className="footer mt-auto py-3 bg-dark text-light">
       <div className="container text-center">© CyberDuck</div>

src/components/Layout.tsx

@@ -2,11 +2,11 @@ import React from 'react'
 import Navbar from './Navbar'
 import Footer from './Footer'
 
-interface LayoutProps {
+export interface LayoutProps {
   children: React.ReactNode
 }
 
-const Layout: React.FC<LayoutProps> = ({ children }) => {
+export const Layout: React.FC<LayoutProps> = ({ children }) => {
   return (
     <div className="app-layout d-flex flex-column">
       <Navbar />

src/components/Navbar.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-const Navbar: React.FC = () => {
+export const Navbar: React.FC = () => {
   return (
     <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
       <div className="container-fluid">

src/components/Split.tsx

@@ -15,7 +15,7 @@ export type AccentKey =
 
 export interface PanelProps extends React.HTMLAttributes<HTMLDivElement> {
   size?: number
-  variant?: 'border' | 'solid'
+  variant?: '' | 'border' | 'solid'
   accent?: AccentKey
   children?: React.ReactNode
 }
@@ -23,13 +23,13 @@ export interface PanelProps extends React.HTMLAttributes<HTMLDivElement> {
 const Panel: React.FC<PanelProps> = ({ children }) => <>{children}</>
 Panel.displayName = 'SplitPanel'
 
-interface SplitProps {
+export interface SplitProps {
   direction?: 'horizontal' | 'vertical'
   gutter?: string | number
   className?: string
   // allow any children but we will look for Panel elements
   children?: React.ReactNode
-  variant?: 'border' | 'solid'
+  variant?: '' | 'border' | 'solid'
   accent?: AccentKey
 }
 
@@ -123,16 +123,13 @@ const Split: React.FC<SplitProps> & { Panel: React.FC<PanelProps> } = ({
             accentBR = true
           }
         }
-        let variantClass = ''
-        if (variant === 'border') variantClass = 'pane--border'
-        else if (variant === 'solid') variantClass = 'pane--solid'
-
+        let variantClass = variant === '' ? '' : `pane--${variant}`
         const paneClass = `pane ${variantClass} ${extraClass} ${accentTL ? 'pane--accent--tl' : ''} ${accentBR ? 'pane--accent--br' : ''}`.trim()
 
         // attach accent color as CSS var for the mixin to pick up
-        const finalStyle = { ...mergedStyle }
+        const finalStyle: React.CSSProperties = { ...mergedStyle }
         if (accent) {
-          ;(finalStyle as any)['--pane-accent-color'] = `var(--color-variant-${accent})`
+          (finalStyle as any)['--pane-accent-color'] = `var(--color-variant-${accent})`
         }
 
         return (

src/index.ts

@@ -1,16 +1,10 @@
-import Navbar from './components/Navbar'
-import Footer from './components/Footer'
-import Layout from './components/Layout'
-import Split from './components/Split'
+import Navbar from './components/Navbar.tsx'
+import Footer from './components/Footer.tsx'
+import Layout from './components/Layout.tsx'
+import Split from './components/Split.tsx'
 
-export const CyberDuck = {
-	Navbar,
-	Layout,
-	Split,
-	Footer
-}
-
-export default CyberDuck
+// also export named components so consumers can import { Split } from 'cyberduck'
+export { Navbar, Footer, Layout, Split }
 
 // Styles are optional — consumers can import the CSS or SCSS themselves:
 // import 'cyberduck/css'

src/styles/components/_table.scss

@@ -27,7 +27,7 @@ table {
     th *,
     td,
     td * {
-      color: var(--color-variant-green) !important;
+      color: var(--color-variant-green);
     }
   }
 

vite.config.ts

@@ -28,6 +28,7 @@ export default defineConfig(({ command }) => ({
         'react-bootstrap',
       ],
       output: {
+        exports: 'named',
         globals: {
           react: 'React',
           'react-dom': 'ReactDOM',
@@ -35,4 +36,11 @@ export default defineConfig(({ command }) => ({
       },
     },
   },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        quietDeps: true,
+      },
+    },
+  },
 }))