@astrake/lumora-ui 0.2.1 → 0.7.2

package/dist/utils.d.ts

@@ -8,14 +8,3 @@ export declare function cn(...inputs: ClassValue[]): string;
  * Extends a base skin with a user skin, intelligently merging Tailwind classes
  */
 export declare function extendSkin(baseSkin: SkinMap, userSkin: SkinMap): SkinMap;
-/**
- * Resolves standard layout props to Tailwind classes statically.
- */
-export declare function resolveLayoutProps(props: {
-    gap?: string | number;
-    padding?: string | number;
-    align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
-    justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
-    width?: string;
-    height?: string;
-}): string;

package/package.json

@@ -1,94 +1,95 @@
-{
-  "name": "@astrake/lumora-ui",
-  "version": "0.2.1",
-  "description": "Headless Vue 3 component framework for three surface targets — Mobile, Desktop, and Embedded — with a unified --lu-* design token system.",
-  "author": "Anuvab Chakraborty (https://github.com/madlybong)",
-  "license": "MIT",
-  "type": "module",
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
-    },
-    "./style": "./src/lumora.css",
-    "./tailwind": {
-      "types": "./dist/tailwind.d.ts",
-      "import": "./dist/tailwind.js"
-    },
-    "./layout": {
-      "types": "./dist/layout/index.d.ts",
-      "import": "./dist/layout/index.js"
-    },
-    "./shell": {
-      "types": "./dist/shell/index.d.ts",
-      "import": "./dist/shell/index.js"
-    },
-    "./components": {
-      "types": "./dist/components/index.d.ts",
-      "import": "./dist/components/index.js"
-    },
-    "./composables": {
-      "types": "./dist/composables/index.d.ts",
-      "import": "./dist/composables/index.js"
-    },
-    "./skins": {
-      "types": "./dist/skins/index.d.ts",
-      "import": "./dist/skins/index.js"
-    }
-  },
-  "keywords": [
-    "vue",
-    "vue3",
-    "ui",
-    "components",
-    "mobile",
-    "desktop",
-    "embedded",
-    "headless",
-    "design-tokens",
-    "lumora",
-    "astrake",
-    "typescript"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/madlybong/LumoraUI.git"
-  },
-  "homepage": "https://ui.lumora.astrake.com",
-  "bugs": {
-    "url": "https://github.com/madlybong/LumoraUI/issues"
-  },
-  "funding": {
-    "type": "github",
-    "url": "https://github.com/sponsors/madlybong"
-  },
-  "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org/"
-  },
-  "files": [
-    "dist",
-    "src/lumora.css",
-    "README.md",
-    "CHANGELOG.md"
-  ],
-  "scripts": {
-    "prepack": "bun run build && bun -e \"await Bun.write('README.md', await Bun.file('../../README.md').text()); await Bun.write('CHANGELOG.md', await Bun.file('../../CHANGELOG.md').text())\"",
-    "postpack": "bun -e \"import { unlinkSync } from 'fs'; try { unlinkSync('README.md') } catch(e){} try { unlinkSync('CHANGELOG.md') } catch(e){}\"",
-    "build:types": "bun -e \"import { rmSync } from 'node:fs'; rmSync('dist', { recursive: true, force: true })\" && bun run vue-tsc -p tsconfig.build.json",
-    "build": "bun -e \"import { rmSync } from 'node:fs'; rmSync('dist', { recursive: true, force: true })\" && bun run vue-tsc -p tsconfig.build.json && bun run ../../node_modules/vite/bin/vite.js build -c vite.config.ts",
-    "check": "vue-tsc -p ./tsconfig.json"
-  },
-  "peerDependencies": {
-    "tailwindcss": "^4.0.0",
-    "vue": "^3.5.0"
-  },
-  "dependencies": {
-    "clsx": "^2.1.1",
-    "shiki": "^4.0.2",
-    "tailwind-merge": "^3.5.0"
-  }
-}
+{
+  "name": "@astrake/lumora-ui",
+  "version": "0.7.2",
+  "description": "Headless Vue 3 component framework for three surface targets — Mobile, Desktop, and Embedded — with a unified --lu-* design token system.",
+  "author": "Anuvab Chakraborty (https://github.com/madlybong)",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./style": "./src/lumora.css",
+    "./tailwind": {
+      "types": "./dist/tailwind.d.ts",
+      "import": "./dist/tailwind.js"
+    },
+    "./layout": {
+      "types": "./dist/layout/index.d.ts",
+      "import": "./dist/layout/index.js"
+    },
+    "./shell": {
+      "types": "./dist/shell/index.d.ts",
+      "import": "./dist/shell/index.js"
+    },
+    "./components": {
+      "types": "./dist/components/index.d.ts",
+      "import": "./dist/components/index.js"
+    },
+    "./composables": {
+      "types": "./dist/composables/index.d.ts",
+      "import": "./dist/composables/index.js"
+    },
+    "./skins": {
+      "types": "./dist/skins/index.d.ts",
+      "import": "./dist/skins/index.js"
+    }
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "ui",
+    "components",
+    "mobile",
+    "desktop",
+    "embedded",
+    "headless",
+    "design-tokens",
+    "lumora",
+    "astrake",
+    "typescript"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/madlybong/LumoraUI.git"
+  },
+  "homepage": "https://ui.lumora.astrake.com",
+  "bugs": {
+    "url": "https://github.com/madlybong/LumoraUI/issues"
+  },
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/madlybong"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "files": [
+    "dist",
+    "src/lumora.css",
+    "README.md",
+    "CHANGELOG.md"
+  ],
+  "scripts": {
+    "prepack": "bun run build && bun -e \"await Bun.write('README.md', await Bun.file('../../README.md').text()); await Bun.write('CHANGELOG.md', await Bun.file('../../CHANGELOG.md').text())\"",
+    "postpack": "bun -e \"import { unlinkSync } from 'fs'; try { unlinkSync('README.md') } catch(e){} try { unlinkSync('CHANGELOG.md') } catch(e){}\"",
+    "build:types": "bun -e \"import { rmSync } from 'node:fs'; rmSync('dist', { recursive: true, force: true })\" && bun run vue-tsc -p tsconfig.build.json",
+    "build": "bun -e \"import { rmSync } from 'node:fs'; rmSync('dist', { recursive: true, force: true })\" && bun run vue-tsc -p tsconfig.build.json && bun run ../../node_modules/vite/bin/vite.js build -c vite.config.ts",
+    "check": "vue-tsc -p ./tsconfig.json"
+  },
+  "peerDependencies": {
+    "tailwindcss": "^4.0.0",
+    "vue": "^3.5.0"
+  },
+  "dependencies": {
+    "@floating-ui/dom": "^1.7.6",
+    "clsx": "^2.1.1",
+    "shiki": "^4.0.2",
+    "tailwind-merge": "^3.5.0"
+  }
+}

package/src/lumora.css

@@ -1,16 +1,259 @@
-/* LumoraUI structural baseline — Tailwind v4 Escape Hatch, v0.1.7+ */
-/* Consumers MUST import this: import '@astrake/lumora-ui/style' */
-
-/* 
-  With the transition to Tailwind v4 as the native design engine, 
-  all structural layout classes (e.g., .lu-button, .lu-stack) have been removed.
-  Layout structure is now provided by the defaultSkin (`default.ts`) out of the box.
-
-  This file serves as an escape hatch for:
-  1. Complex [data-state="..."] selector combinations.
-  2. Webkit scrollbar pseudoclasses.
-  3. Keyframe animations that Tailwind v4 cannot natively express.
-*/
-
-/* Example: Webkit Scrollbar overrides can go here */
-
+/* LumoraUI structural baseline — Tailwind v4 Escape Hatch, v0.3.0+ */
+/* Consumers MUST import this: import '@astrake/lumora-ui/style' */
+
+/*
+  With the transition to Tailwind v4 as the native design engine,
+  all structural layout classes (e.g., .lu-button, .lu-stack) have been removed.
+  Layout structure is now provided by the defaultSkin (`default.ts`) out of the box.
+
+  This file serves as an escape hatch for:
+  1. Complex [data-state="..."] selector combinations.
+  2. Webkit scrollbar pseudoclasses.
+  3. Keyframe animations that Tailwind v4 cannot natively express.
+  4. CSS custom property token definitions for semantic pipeline colours.
+*/
+
+/* ─── Collapsible transition ───────────────────────────────────────────────── */
+.lu-collapsible-enter-active,
+.lu-collapsible-leave-active {
+  display: grid;
+  transition: grid-template-rows 200ms ease;
+}
+.lu-collapsible-enter-from,
+.lu-collapsible-leave-to {
+  grid-template-rows: 0fr;
+}
+.lu-collapsible-enter-to,
+.lu-collapsible-leave-from {
+  grid-template-rows: 1fr;
+}
+
+/* ─── Easing tokens ────────────────────────────────────────────────────────── */
+:root {
+  --lu-ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+/* ─── Keyframe animations ──────────────────────────────────────────────────── */
+@keyframes lu-fade-in {
+  from {
+    opacity: 0;
+    transform: scale(0.97) translateY(-3px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+.lu-fade-in {
+  animation: lu-fade-in 130ms var(--lu-ease-spring) forwards;
+}
+
+@keyframes lu-slide-down {
+  from { opacity: 0; transform: translateY(-6px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+.lu-slide-down {
+  animation: lu-slide-down 160ms var(--lu-ease-spring) forwards;
+}
+
+@keyframes lu-slide-up {
+  from { opacity: 0; transform: translateY(6px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+.lu-slide-up {
+  animation: lu-slide-up 160ms var(--lu-ease-spring) forwards;
+}
+
+/* ─── Semantic pipeline colour tokens (Skin v2) ────────────────────────────── */
+:root {
+  --lu-pipeline-success: #10b981;  /* emerald-500 */
+  --lu-pipeline-warning: #f59e0b;  /* amber-500   */
+  --lu-pipeline-danger:  #f43f5e;  /* rose-500    */
+  --lu-pipeline-info:    #3b82f6;  /* blue-500    */
+}
+
+.dark, [data-theme="dark"] {
+  --lu-pipeline-success: #34d399;  /* emerald-400 */
+  --lu-pipeline-warning: #fbbf24;  /* amber-400   */
+  --lu-pipeline-danger:  #fb7185;  /* rose-400    */
+  --lu-pipeline-info:    #60a5fa;  /* blue-400    */
+}
+
+/* ─── Timeline connector line ──────────────────────────────────────────────── */
+.lu-timeline-item:not(:last-child) > .lu-timeline-connector {
+  position: absolute;
+  left: 50%;
+  top: 100%;
+  transform: translateX(-50%);
+  width: 2px;
+  height: 100%;
+}
+
+/* ─── DataGrid: column freeze (sticky) support ────────────────────────────── */
+.lu-data-grid-cell--frozen,
+.lu-data-grid-header-cell--frozen {
+  position: sticky;
+  z-index: 2;
+}
+
+/* ─── DataGrid: horizontal scroll wrapper ──────────────────────────────────── */
+.lu-data-grid-scroll {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* ─── DataGrid: mobile card collapse (container query) ─────────────────────── */
+@container lu-data-grid (max-width: 600px) {
+  .lu-data-grid-table { display: none; }
+  .lu-data-grid-cards { display: flex; flex-direction: column; gap: 0.75rem; }
+}
+@container lu-data-grid (min-width: 601px) {
+  .lu-data-grid-table { display: table; }
+  .lu-data-grid-cards { display: none; }
+}
+.lu-data-grid-container {
+  container-type: inline-size;
+  container-name: lu-data-grid;
+}
+
+/* ─── FormWizard step connector line ───────────────────────────────────────── */
+.lu-form-wizard-step-connector {
+  position: absolute;
+  top: 50%;
+  left: calc(50% + 1rem);
+  right: calc(-50% + 1rem);
+  height: 2px;
+  transform: translateY(-50%);
+}
+
+/* ─── Tree indent guide lines ──────────────────────────────────────────────── */
+.lu-tree-node--guide::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  background: currentColor;
+  opacity: 0.15;
+}
+
+/* ─── Command palette backdrop ─────────────────────────────────────────────── */
+.lu-command-palette-overlay {
+  animation: lu-fade-in 120ms ease forwards;
+}
+
+/* ─── Notification center panel transition ─────────────────────────────────── */
+.lu-notification-panel-enter-active { animation: lu-slide-down 180ms var(--lu-ease-spring) forwards; }
+.lu-notification-panel-leave-active { animation: lu-slide-down 140ms ease reverse forwards; }
+
+/* ─── Kanban mobile scroll snap ────────────────────────────────────────────── */
+.lu-kanban-mobile-scroll {
+  display: flex;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  -webkit-overflow-scrolling: touch;
+}
+.lu-kanban-mobile-col {
+  scroll-snap-align: start;
+  flex: 0 0 100%;
+}
+
+/* ─── POS layout: full-screen kiosk ───────────────────────────────────────── */
+.lu-embedded-pos-layout {
+  display: grid;
+  height: 100dvh;
+  width: 100%;
+  overflow: hidden;
+}
+
+/* ─── POS item list: touch scroll ─────────────────────────────────────────── */
+.lu-embedded-pos-item-list {
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* ─── Dashboard grid ───────────────────────────────────────────────────────── */
+.lu-dashboard-grid {
+  display: grid;
+  gap: 1rem;
+}
+
+/* ─── Scrollbar styling (optional, webkit only) ────────────────────────────── */
+.lu-scrollbar-thin::-webkit-scrollbar { width: 4px; height: 4px; }
+.lu-scrollbar-thin::-webkit-scrollbar-track { background: transparent; }
+.lu-scrollbar-thin::-webkit-scrollbar-thumb { border-radius: 9999px; background: rgba(0,0,0,0.15); }
+
+/* ─── Drawer Transitions ─────────────────────────────────────────────────── */
+.lu-drawer-fade-enter-active,
+.lu-drawer-fade-leave-active {
+  transition: opacity 300ms ease;
+}
+.lu-drawer-fade-enter-from,
+.lu-drawer-fade-leave-to {
+  opacity: 0;
+}
+
+.lu-drawer-slide-left-enter-active,
+.lu-drawer-slide-left-leave-active,
+.lu-drawer-slide-right-enter-active,
+.lu-drawer-slide-right-leave-active,
+.lu-drawer-slide-top-enter-active,
+.lu-drawer-slide-top-leave-active,
+.lu-drawer-slide-bottom-enter-active,
+.lu-drawer-slide-bottom-leave-active {
+  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.lu-drawer-slide-left-enter-from,
+.lu-drawer-slide-left-leave-to {
+  transform: translateX(-100%);
+}
+.lu-drawer-slide-right-enter-from,
+.lu-drawer-slide-right-leave-to {
+  transform: translateX(100%);
+}
+.lu-drawer-slide-top-enter-from,
+.lu-drawer-slide-top-leave-to {
+  transform: translateY(-100%);
+}
+.lu-drawer-slide-bottom-enter-from,
+.lu-drawer-slide-bottom-leave-to {
+  transform: translateY(100%);
+}
+
+/* ─── Bottom Sheet Transitions ───────────────────────────────────────────── */
+.lu-bottom-sheet-fade-enter-active,
+.lu-bottom-sheet-fade-leave-active {
+  transition: opacity 300ms ease;
+}
+.lu-bottom-sheet-fade-enter-from,
+.lu-bottom-sheet-fade-leave-to {
+  opacity: 0;
+}
+
+.lu-bottom-sheet-slide-enter-active,
+.lu-bottom-sheet-slide-leave-active {
+  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.lu-bottom-sheet-slide-enter-from,
+.lu-bottom-sheet-slide-leave-to {
+  transform: translateY(100%);
+}
+
+/* ─── Toast Transitions ─────────────────────────────────────────────────── */
+.lu-toast-fade-enter-active,
+.lu-toast-fade-leave-active {
+  transition: all 300ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.lu-toast-fade-enter-from {
+  opacity: 0;
+  transform: translateY(12px) scale(0.95);
+}
+.lu-toast-fade-leave-to {
+  opacity: 0;
+  transform: scale(0.95);
+}
+
+