entangle-ui 0.7.0 → 0.8.0

package/dist/types/theme/lightThemeValues.d.ts

@@ -0,0 +1,168 @@
+/**
+ * Light theme values — pure data, no `@vanilla-extract/css` calls.
+ *
+ * Mirrors `darkThemeValues` shape exactly so `createCustomTheme` and
+ * `createLightTheme` can share the merge helper and so `LightThemeValues`
+ * stays structurally compatible with `DarkThemeValues`.
+ *
+ * Lives in a plain `.ts` module so build-time tooling (token export,
+ * docs generation) can import the values without booting the Vanilla
+ * Extract runtime. `lightTheme.css.ts` re-exports this object and is
+ * the file that actually creates the scoped theme class.
+ *
+ * Note on `colors.surface.whiteOverlay`: the token name is kept for
+ * contract compatibility, but in light mode it flips polarity to a
+ * subtle dark overlay (`rgba(0, 0, 0, 0.06)`) so it still reads as a
+ * "subtle tint over the underlying surface".
+ */
+declare const lightThemeValues: {
+    readonly colors: {
+        readonly background: {
+            readonly primary: "#ffffff";
+            readonly secondary: "#f5f5f7";
+            readonly tertiary: "#ebebee";
+            readonly elevated: "#ffffff";
+            readonly inset: "#f8f8fa";
+        };
+        readonly surface: {
+            readonly default: "#ffffff";
+            readonly hover: "#f0f0f3";
+            readonly active: "#e6e6ea";
+            readonly disabled: "#f5f5f7";
+            readonly whiteOverlay: "rgba(0, 0, 0, 0.06)";
+            readonly row: "#ffffff";
+            readonly rowHover: "#f5f5f7";
+        };
+        readonly border: {
+            readonly default: "#e0e0e3";
+            readonly focus: "#0066cc";
+            readonly error: "#d32f2f";
+            readonly success: "#2e7d32";
+        };
+        readonly text: {
+            readonly primary: "#1a1a1a";
+            readonly secondary: "#4a4a4a";
+            readonly muted: "#6b6b6b";
+            readonly disabled: "#b0b0b0";
+        };
+        readonly accent: {
+            readonly primary: "#0066cc";
+            readonly secondary: "#004a99";
+            readonly success: "#2e7d32";
+            readonly warning: "#a64500";
+            readonly error: "#d32f2f";
+        };
+        readonly backdrop: "rgba(0, 0, 0, 0.4)";
+    };
+    readonly spacing: {
+        readonly xs: "2px";
+        readonly sm: "4px";
+        readonly md: "8px";
+        readonly lg: "12px";
+        readonly xl: "16px";
+        readonly xxl: "24px";
+        readonly xxxl: "32px";
+    };
+    readonly typography: {
+        readonly fontSize: {
+            readonly xxs: "9px";
+            readonly xs: "10px";
+            readonly sm: "11px";
+            readonly md: "12px";
+            readonly lg: "14px";
+            readonly xl: "16px";
+        };
+        readonly fontWeight: {
+            readonly normal: "400";
+            readonly medium: "500";
+            readonly semibold: "600";
+        };
+        readonly lineHeight: {
+            readonly tight: "1.2";
+            readonly normal: "1.4";
+            readonly relaxed: "1.6";
+        };
+        readonly fontFamily: {
+            readonly mono: "SF Mono, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace";
+            readonly sans: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+        };
+    };
+    readonly borderRadius: {
+        readonly none: "0px";
+        readonly sm: "2px";
+        readonly md: "4px";
+        readonly lg: "6px";
+    };
+    readonly shadows: {
+        readonly sm: "0 1px 2px rgba(0, 0, 0, 0.06)";
+        readonly md: "0 2px 4px rgba(0, 0, 0, 0.08)";
+        readonly lg: "0 4px 12px rgba(0, 0, 0, 0.10)";
+        readonly xl: "0 8px 24px rgba(0, 0, 0, 0.12)";
+        readonly focus: "0 0 0 2px rgba(0, 102, 204, 0.3)";
+        readonly separatorBottom: "0 1px 2px rgba(0, 0, 0, 0.04)";
+        readonly separatorRight: "1px 0 2px rgba(0, 0, 0, 0.04)";
+        readonly separatorLeft: "-1px 0 2px rgba(0, 0, 0, 0.04)";
+        readonly thumb: "0 0 2px rgba(0, 0, 0, 0.15)";
+    };
+    readonly transitions: {
+        readonly fast: "100ms ease-out";
+        readonly normal: "200ms ease-out";
+        readonly slow: "300ms ease-out";
+    };
+    readonly zIndex: {
+        readonly base: "1";
+        readonly dropdown: "1000";
+        readonly popover: "1000";
+        readonly tooltip: "1000";
+        readonly modal: "1100";
+    };
+    readonly shell: {
+        readonly menuBar: {
+            readonly height: "28px";
+            readonly bg: "#f5f5f7";
+            readonly hoverBg: "#ebebee";
+            readonly activeBg: "#0066cc";
+            readonly text: "#1a1a1a";
+            readonly shortcutText: "#6b6b6b";
+        };
+        readonly toolbar: {
+            readonly height: {
+                readonly sm: "32px";
+                readonly md: "40px";
+            };
+            readonly bg: "#f5f5f7";
+            readonly separator: "#e0e0e3";
+        };
+        readonly statusBar: {
+            readonly height: "22px";
+            readonly heightMd: "26px";
+            readonly bg: "#0066cc";
+            readonly text: "#ffffff";
+        };
+        readonly dock: {
+            readonly tabHeight: "28px";
+            readonly tabBg: "#f5f5f7";
+            readonly tabActiveBg: "#ffffff";
+            readonly tabHoverBg: "#ebebee";
+            readonly tabText: "#4a4a4a";
+            readonly tabActiveText: "#1a1a1a";
+            readonly splitterSize: "4px";
+            readonly splitterColor: "#e0e0e3";
+            readonly splitterHoverColor: "#0066cc";
+            readonly borderBarBg: "#f5f5f7";
+            readonly borderBarSize: "28px";
+            readonly dropOverlay: "rgba(0, 102, 204, 0.15)";
+        };
+    };
+    readonly storybook: {
+        readonly canvas: {
+            readonly gradientStart: "#fafafa";
+            readonly gradientMid: "#f0f0f3";
+            readonly gradientEnd: "#ebebee";
+        };
+    };
+};
+type LightThemeValues = typeof lightThemeValues;
+
+export { lightThemeValues };
+export type { LightThemeValues };

package/dist/types/theme/themeContractData.d.ts

@@ -0,0 +1,160 @@
+/**
+ * The structural input passed to `createGlobalThemeContract` to build the
+ * Vanilla Extract `vars` object. Lives in a plain `.ts` module (no
+ * `@vanilla-extract/css` calls) so build-time tooling — token export,
+ * docs generation, etc. — can import it without the Vanilla Extract
+ * runtime, which only works inside a `.css.ts` file scope.
+ *
+ * Each leaf is the CSS custom property name (without the leading `--`).
+ * The names are part of the PUBLIC API; renaming requires a major version
+ * bump.
+ */
+declare const themeContractData: {
+    readonly colors: {
+        readonly background: {
+            readonly primary: "etui-color-bg-primary";
+            readonly secondary: "etui-color-bg-secondary";
+            readonly tertiary: "etui-color-bg-tertiary";
+            readonly elevated: "etui-color-bg-elevated";
+            readonly inset: "etui-color-bg-inset";
+        };
+        readonly surface: {
+            readonly default: "etui-color-surface-default";
+            readonly hover: "etui-color-surface-hover";
+            readonly active: "etui-color-surface-active";
+            readonly disabled: "etui-color-surface-disabled";
+            readonly whiteOverlay: "etui-color-surface-white-overlay";
+            readonly row: "etui-color-surface-row";
+            readonly rowHover: "etui-color-surface-row-hover";
+        };
+        readonly border: {
+            readonly default: "etui-color-border-default";
+            readonly focus: "etui-color-border-focus";
+            readonly error: "etui-color-border-error";
+            readonly success: "etui-color-border-success";
+        };
+        readonly text: {
+            readonly primary: "etui-color-text-primary";
+            readonly secondary: "etui-color-text-secondary";
+            readonly muted: "etui-color-text-muted";
+            readonly disabled: "etui-color-text-disabled";
+        };
+        readonly accent: {
+            readonly primary: "etui-color-accent-primary";
+            readonly secondary: "etui-color-accent-secondary";
+            readonly success: "etui-color-accent-success";
+            readonly warning: "etui-color-accent-warning";
+            readonly error: "etui-color-accent-error";
+        };
+        readonly backdrop: "etui-color-backdrop";
+    };
+    readonly spacing: {
+        readonly xs: "etui-spacing-xs";
+        readonly sm: "etui-spacing-sm";
+        readonly md: "etui-spacing-md";
+        readonly lg: "etui-spacing-lg";
+        readonly xl: "etui-spacing-xl";
+        readonly xxl: "etui-spacing-xxl";
+        readonly xxxl: "etui-spacing-xxxl";
+    };
+    readonly typography: {
+        readonly fontSize: {
+            readonly xxs: "etui-font-size-xxs";
+            readonly xs: "etui-font-size-xs";
+            readonly sm: "etui-font-size-sm";
+            readonly md: "etui-font-size-md";
+            readonly lg: "etui-font-size-lg";
+            readonly xl: "etui-font-size-xl";
+        };
+        readonly fontWeight: {
+            readonly normal: "etui-font-weight-normal";
+            readonly medium: "etui-font-weight-medium";
+            readonly semibold: "etui-font-weight-semibold";
+        };
+        readonly lineHeight: {
+            readonly tight: "etui-line-height-tight";
+            readonly normal: "etui-line-height-normal";
+            readonly relaxed: "etui-line-height-relaxed";
+        };
+        readonly fontFamily: {
+            readonly mono: "etui-font-family-mono";
+            readonly sans: "etui-font-family-sans";
+        };
+    };
+    readonly borderRadius: {
+        readonly none: "etui-radius-none";
+        readonly sm: "etui-radius-sm";
+        readonly md: "etui-radius-md";
+        readonly lg: "etui-radius-lg";
+    };
+    readonly shadows: {
+        readonly sm: "etui-shadow-sm";
+        readonly md: "etui-shadow-md";
+        readonly lg: "etui-shadow-lg";
+        readonly xl: "etui-shadow-xl";
+        readonly focus: "etui-shadow-focus";
+        readonly separatorBottom: "etui-shadow-separator-bottom";
+        readonly separatorRight: "etui-shadow-separator-right";
+        readonly separatorLeft: "etui-shadow-separator-left";
+        readonly thumb: "etui-shadow-thumb";
+    };
+    readonly transitions: {
+        readonly fast: "etui-transition-fast";
+        readonly normal: "etui-transition-normal";
+        readonly slow: "etui-transition-slow";
+    };
+    readonly zIndex: {
+        readonly base: "etui-z-base";
+        readonly dropdown: "etui-z-dropdown";
+        readonly popover: "etui-z-popover";
+        readonly tooltip: "etui-z-tooltip";
+        readonly modal: "etui-z-modal";
+    };
+    readonly shell: {
+        readonly menuBar: {
+            readonly height: "etui-shell-menubar-height";
+            readonly bg: "etui-shell-menubar-bg";
+            readonly hoverBg: "etui-shell-menubar-hover-bg";
+            readonly activeBg: "etui-shell-menubar-active-bg";
+            readonly text: "etui-shell-menubar-text";
+            readonly shortcutText: "etui-shell-menubar-shortcut-text";
+        };
+        readonly toolbar: {
+            readonly height: {
+                readonly sm: "etui-shell-toolbar-height-sm";
+                readonly md: "etui-shell-toolbar-height-md";
+            };
+            readonly bg: "etui-shell-toolbar-bg";
+            readonly separator: "etui-shell-toolbar-separator";
+        };
+        readonly statusBar: {
+            readonly height: "etui-shell-statusbar-height";
+            readonly heightMd: "etui-shell-statusbar-height-md";
+            readonly bg: "etui-shell-statusbar-bg";
+            readonly text: "etui-shell-statusbar-text";
+        };
+        readonly dock: {
+            readonly tabHeight: "etui-shell-dock-tab-height";
+            readonly tabBg: "etui-shell-dock-tab-bg";
+            readonly tabActiveBg: "etui-shell-dock-tab-active-bg";
+            readonly tabHoverBg: "etui-shell-dock-tab-hover-bg";
+            readonly tabText: "etui-shell-dock-tab-text";
+            readonly tabActiveText: "etui-shell-dock-tab-active-text";
+            readonly splitterSize: "etui-shell-dock-splitter-size";
+            readonly splitterColor: "etui-shell-dock-splitter-color";
+            readonly splitterHoverColor: "etui-shell-dock-splitter-hover-color";
+            readonly borderBarBg: "etui-shell-dock-border-bar-bg";
+            readonly borderBarSize: "etui-shell-dock-border-bar-size";
+            readonly dropOverlay: "etui-shell-dock-drop-overlay";
+        };
+    };
+    readonly storybook: {
+        readonly canvas: {
+            readonly gradientStart: "etui-storybook-gradient-start";
+            readonly gradientMid: "etui-storybook-gradient-mid";
+            readonly gradientEnd: "etui-storybook-gradient-end";
+        };
+    };
+};
+
+export { themeContractData };

package/dist/types/theme-values.d.ts

@@ -0,0 +1,10 @@
+import { DarkThemeValues } from './theme/darkThemeValues.js';
+export { darkThemeValues } from './theme/darkThemeValues.js';
+import { themeContractData } from './theme/themeContractData.js';
+export { LightThemeValues, lightThemeValues } from './theme/lightThemeValues.js';
+
+type ThemeValues = DarkThemeValues;
+type ThemeContractData = typeof themeContractData;
+
+export { DarkThemeValues, themeContractData };
+export type { ThemeContractData, ThemeValues };

package/dist/types/utils/animations.css.d.ts

@@ -10,9 +10,11 @@ declare const spinKeyframe: string;
 declare const pulseKeyframe: string;
 declare const blinkKeyframe: string;
 declare const fadeInKeyframe: string;
+declare const waveKeyframe: string;
 declare const animSpin: string;
 declare const animPulse: string;
 declare const animBlink: string;
 declare const animFadeIn: string;
+declare const animWave: string;
 
-export { animBlink, animFadeIn, animPulse, animSpin, blinkKeyframe, fadeInKeyframe, pulseKeyframe, spinKeyframe };
+export { animBlink, animFadeIn, animPulse, animSpin, animWave, blinkKeyframe, fadeInKeyframe, pulseKeyframe, spinKeyframe, waveKeyframe };

package/dist/types/utils/platform.d.ts

@@ -0,0 +1,16 @@
+type Platform = 'mac' | 'windows' | 'linux';
+/**
+ * Detect the current platform from navigator. Falls back to 'windows' in SSR.
+ */
+declare function getPlatform(): Platform;
+/**
+ * Map a logical key name to its display representation for the given platform.
+ */
+declare function getKeyGlyph(key: string, platform: Platform): string;
+/**
+ * Parse a shortcut string into individual keys.
+ */
+declare function parseShortcut(shortcut: string): string[];
+
+export { getKeyGlyph, getPlatform, parseShortcut };
+export type { Platform };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "entangle-ui",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "type": "module",
   "sideEffects": [
     "*.css",
@@ -21,9 +21,16 @@
       "default": "./dist/esm/palettes.js"
     },
     "./theme": {
-      "types": "./dist/types/theme/darkTheme.css.d.ts",
-      "default": "./dist/esm/theme/darkTheme.css.js"
+      "types": "./dist/types/theme/index.d.ts",
+      "default": "./dist/esm/theme/index.js"
     },
+    "./theme-values": {
+      "types": "./dist/types/theme-values.d.ts",
+      "default": "./dist/esm/theme-values.js"
+    },
+    "./tokens.json": "./dist/tokens/tokens.json",
+    "./tokens.dark.css": "./dist/tokens/tokens.dark.css",
+    "./tokens.light.css": "./dist/tokens/tokens.light.css",
     "./package.json": "./package.json"
   },
   "files": [
@@ -34,7 +41,8 @@
   ],
   "scripts": {
     "dev": "storybook dev -p 6006",
-    "build": "rollup -c",
+    "build": "rollup -c && npm run build:tokens",
+    "build:tokens": "tsx scripts/export-tokens.ts",
     "build-storybook": "storybook build",
     "test": "vitest run",
     "test:ui": "vitest --ui",
@@ -127,6 +135,7 @@
     "rollup-plugin-preserve-directives": "^0.4.0",
     "size-limit": "^12.0.0",
     "storybook": "^10.2.8",
+    "tsx": "^4.21.0",
     "typescript": "^5.9.3",
     "vite": "^6.3.5",
     "vitest": "^3.2.4"

package/dist/esm/components/feedback/Dialog/useFocusTrap.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useFocusTrap.js","sources":["../../../../../../src/components/feedback/Dialog/useFocusTrap.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAIA;;;;;;;AAOC;AAOD;;;;;;;;;;;;;AAaG;AACG;AAIJ;AAEI;;AAEA;AACA;;AAEA;AAIA;;;;AAKA;;AAKA;AACE;;;;;;AAKA;;;;;AAKJ;AAGJ;;"}