ember-design-system 0.2.3

package/dist/src/lib/utils/useFloating.d.ts

@@ -0,0 +1,59 @@
+import { RefObject } from 'react';
+export type Side = 'top' | 'right' | 'bottom' | 'left';
+export type Align = 'start' | 'center' | 'end';
+export type Placement = Side | `${Side}-${Align}`;
+export interface FloatingOptions {
+    /** Preferred placement of the floating element relative to the anchor. */
+    placement?: Placement;
+    /** Gap in px between anchor and floating element along the main axis. */
+    offset?: number;
+    /** Flip to the opposite side when there is not enough room. */
+    flip?: boolean;
+    /** Shift along the cross axis to stay within the viewport. */
+    shift?: boolean;
+    /** Min distance in px from the viewport edge when flipping/shifting. */
+    padding?: number;
+    /** Match the floating element's width to the anchor width. */
+    matchWidth?: boolean;
+    /** Whether positioning is active (skip work when closed). */
+    open?: boolean;
+    /** Use an externally-owned anchor ref instead of the internal one. */
+    anchorRef?: RefObject<HTMLElement | null>;
+}
+export interface FloatingState {
+    x: number;
+    y: number;
+    placement: Placement;
+    side: Side;
+    align: Align;
+    /** Inline style to spread onto the floating element. */
+    style: {
+        position: 'fixed';
+        top: number;
+        left: number;
+        minWidth?: number;
+    };
+}
+/**
+ * Lightweight floating-element positioner. Computes a fixed-position offset for
+ * a floating element relative to an anchor, with optional flip and shift to
+ * keep it inside the viewport. Recomputes on scroll, resize, and content size
+ * changes. No external dependency — kept deliberately small to match the
+ * system's "no heavy deps" stance.
+ */
+export declare function useFloating(options?: FloatingOptions): {
+    update: () => void;
+    x?: number | undefined;
+    y?: number | undefined;
+    placement?: Placement | undefined;
+    side?: Side | undefined;
+    align?: Align | undefined;
+    style?: {
+        position: "fixed";
+        top: number;
+        left: number;
+        minWidth?: number;
+    } | undefined;
+    anchorRef: RefObject<HTMLElement | null>;
+    floatingRef: RefObject<HTMLElement | null>;
+};

package/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "ember-design-system",
+  "private": false,
+  "version": "0.2.3",
+  "type": "module",
+  "description": "A tight, opinionated design system — warm neutrals, ember accent, dual-mode.",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/src/lib/index.d.ts",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/src/lib/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./dist/ember-design-system.css",
+    "./tokens.css": "./src/styles/tokens.css"
+  },
+  "files": [
+    "dist",
+    "src/styles/tokens.css"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "build:app": "tsc -b && vite build --config vite.config.app.ts",
+    "build:vercel": "npm run build:app && storybook build --output-dir dist-app/storybook",
+    "lint": "eslint .",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "prepare": "npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.469.0",
+    "react-icons": "^5.6.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@storybook/addon-a11y": "^10.3.6",
+    "@storybook/addon-docs": "^10.3.6",
+    "@storybook/addon-themes": "^10.3.6",
+    "@storybook/react-vite": "^10.3.6",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/node": "^24.12.3",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "eslint": "^10.3.0",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.6.0",
+    "jsdom": "^29.1.1",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
+    "react-router-dom": "^7.1.1",
+    "storybook": "^10.3.6",
+    "typescript": "~6.0.2",
+    "typescript-eslint": "^8.59.2",
+    "vite": "^8.0.12",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.1.7"
+  }
+}

package/src/styles/tokens.css

@@ -0,0 +1,162 @@
+/* Design tokens — single source of truth. Mode-aware via [data-theme]. */
+
+:root,
+[data-theme='light'] {
+  /* Surfaces */
+  --bg-canvas: #faf9f6;
+  --bg-surface: #ffffff;
+  --bg-subtle: #f3f1ec;
+  --bg-muted: #e8e5de;
+
+  /* Borders */
+  --border-subtle: #e8e5de;
+  --border-default: #d4cfc4;
+  --border-strong: #9c968a;
+
+  /* Text */
+  --text-primary: #161513;
+  --text-secondary: #5c5853;
+  --text-tertiary: #8b867d;
+  --text-disabled: #bab3a6;
+  --text-inverse: #faf9f6;
+
+  /* Accent — Ember */
+  --accent-ember-50: #fff4ec;
+  --accent-ember-100: #ffe3cc;
+  --accent-ember-500: #d9541a;
+  --accent-ember-600: #b8410d;
+  --accent-ember-700: #8f3309;
+
+  /* Semantic */
+  --status-success: #2f7d4f;
+  --status-warning: #b5811a;
+  --status-danger: #b53a2c;
+  --status-info: #2d6bae;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px rgba(20, 18, 14, 0.06);
+  --shadow-md: 0 6px 24px -4px rgba(20, 18, 14, 0.1);
+
+  /* Focus ring */
+  --focus-ring: 0 0 0 2px var(--bg-canvas), 0 0 0 4px var(--accent-ember-500);
+
+  color-scheme: light;
+}
+
+[data-theme='dark'] {
+  --bg-canvas: #0f0f0e;
+  --bg-surface: #181816;
+  --bg-subtle: #1f1f1d;
+  --bg-muted: #2a2a27;
+
+  --border-subtle: #2a2a27;
+  --border-default: #3a3a36;
+  --border-strong: #5c5c57;
+
+  --text-primary: #f2efe8;
+  --text-secondary: #a8a39a;
+  --text-tertiary: #7a756d;
+  --text-disabled: #4a4742;
+  --text-inverse: #0f0f0e;
+
+  --accent-ember-50: #2a1810;
+  --accent-ember-100: #3d2418;
+  --accent-ember-500: #e86b2e;
+  --accent-ember-600: #f58247;
+  --accent-ember-700: #ff9663;
+
+  --status-success: #52c77e;
+  --status-warning: #e5b547;
+  --status-danger: #e56657;
+  --status-info: #5599dd;
+
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
+  --shadow-md: 0 8px 32px -4px rgba(0, 0, 0, 0.5);
+
+  --focus-ring: 0 0 0 2px var(--bg-canvas), 0 0 0 4px var(--accent-ember-500);
+
+  color-scheme: dark;
+}
+
+:root {
+  /* Spacing */
+  --space-0: 0;
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 24px;
+  --space-6: 32px;
+  --space-8: 48px;
+  --space-10: 64px;
+  --space-12: 96px;
+  --space-16: 144px;
+
+  /* Radius */
+  --radius-none: 0;
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 10px;
+  --radius-pill: 999px;
+
+  /* Type scale (modular, base 16, ratio 1.250) */
+  --text-2xs: 11px;
+  --text-xs: 12px;
+  --text-sm: 14px;
+  --text-base: 16px;
+  --text-md: 18px;
+  --text-lg: 20px;
+  --text-xl: 24px;
+  --text-2xl: 30px;
+  --text-3xl: 38px;
+  --text-4xl: 48px;
+  --text-5xl: 60px;
+  --text-6xl: 76px;
+
+  /* Line heights */
+  --leading-tight: 1.05;
+  --leading-snug: 1.15;
+  --leading-base: 1.5;
+  --leading-relaxed: 1.65;
+
+  /* Font weights */
+  --font-regular: 400;
+  --font-medium: 500;
+  --font-semibold: 600;
+  --font-bold: 700;
+
+  /* Font families */
+  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+  --font-serif: 'Source Serif 4', ui-serif, Georgia, 'Times New Roman', serif;
+  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
+  --font-display: 'Inter', var(--font-sans);
+
+  /* Motion */
+  --duration-fast: 120ms;
+  --duration-base: 200ms;
+  --duration-slow: 320ms;
+  --easing-standard: cubic-bezier(0.2, 0, 0, 1);
+  --easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
+  --easing-accelerate: cubic-bezier(0.4, 0, 1, 1);
+  --easing-spring: cubic-bezier(0.34, 1.4, 0.55, 1);
+  --easing-silk: cubic-bezier(0.16, 1, 0.3, 1);
+
+  /* Motion durations (added) */
+  --duration-xs: 80ms;
+  --duration-xl: 480ms;
+
+  /* Layout */
+  --content-max: 680px;
+  --content-wide: 880px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}