@novie/ui 0.1.13 → 0.1.15

package/dist/lib/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,UAAU,EAAQ,MAAM,MAAM,CAAA;AAG5C,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,UAAU,EAAQ,MAAM,MAAM,CAAA;AAyC5C,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@novie/ui",
-  "version": "0.1.13",
+  "version": "0.1.15",
   "description": "Novie design system component library built on shadcn/ui conventions",
   "repository": {
     "type": "git",
@@ -22,10 +22,12 @@
       }
     },
     "./styles.css": "./dist/index.css",
+    "./tailwind-preset": "./tailwind.preset.ts",
     "./tailwind.config": "./tailwind.config.ts"
   },
   "files": [
     "dist",
+    "tailwind.preset.ts",
     "tailwind.config.ts",
     "src/index.css"
   ],

package/src/index.css

@@ -82,6 +82,10 @@
   /* --- Borders --- */
   --border: 0 0% 78%;
   /* semantic: border/default/default    ← palette: neutral-200    hex: #c7c7c7 */
+  --border-strong: 0 0% 64%;
+  /* semantic: border/default/strong     ← palette: neutral-400    hex: #a3a3a3 */
+  --border-block: 0 0% 89.8%;
+  /* semantic: border/default/block      ← palette: gray-200       hex: #e5e5e5 */
   --input: 0 0% 85.1%;
   /* semantic: border/default/secondary   ← palette: neutral-100    hex: #d9d9d9 */
   --ring: 0 0% 0%;
@@ -106,8 +110,8 @@
   /* --- Warning (orange) --- */
   --warning: 30.2 100% 61.4%;
   /* semantic: bg/warning/default        ← palette: orange-500     hex: #ff9d3a */
-  --warning-foreground: 39 90% 97.3%;
-  /* semantic: text/primary/on-dark      ← palette: page-secondary  hex: #fcfaf6 */
+  --warning-foreground: 40 50% 97.6%;
+  /* semantic: text/primary/on-dark      ← palette: sand-300        hex: #fcfaf6 */
   --warning-secondary: 30 100% 74.5%;
   /* semantic: bg/warning/secondary     ← palette: orange-300     hex: #ffbe7d */
   --warning-tertiary: 30 100% 87.1%;
@@ -145,8 +149,8 @@
   /* semantic: bg/page/tertiary          ← palette: sand-500       hex: #eceae7 */
   --surface-inset: 36 11.6% 91.6%;
   /* semantic: bg/surface/inset          ← palette: sand-500       hex: #eceae7 */
-  --surface-elevated: 0 0% 100%;
-  /* semantic: bg/surface/elevated       ← palette: white          hex: #ffffff */
+  --surface-elevated: 210 16.7% 97.6%;
+  /* semantic: bg/surface/elevated       ← palette: gray-50        hex: #f8f9fa */
   --surface-overlay: 0 0% 0% / 50%;
   /* semantic: bg/surface/overlay        ← palette: black-50a      hex: #00000080 */
 
@@ -198,8 +202,8 @@
   /* semantic: border/error/default       ← palette: red-500        hex: #c8391a */
   --border-error-secondary: 12.8 76.2% 68.6%;
   /* semantic: border/error/secondary ← palette: red-300       hex: #ec8c72 */
-  --border-success: 148.1 23.2% 39.8%;
-  /* semantic: border/success/default     ← palette: fern-600       hex: #4e7d64 */
+  --border-success: 151.5 59.7% 26.3%;
+  /* semantic: border/success/default     ← palette: forrest-600    hex: #1b6b45 */
   --border-success-secondary: 143.1 28.9% 64.7%;
   /* semantic: border/success/secondary ← palette: fern-400 hex: #8bbf9f */
   --border-info: 210 12.6% 50.2%;
@@ -219,8 +223,8 @@
   /* semantic: text/primary/default       ← palette: neutral-900    hex: #333333 */
   --text-primary-secondary: 0 0% 39.6%;
   /* semantic: text/primary/secondary     ← palette: neutral-700    hex: #656565 */
-  --text-primary-tertiary: 0 0% 39.6%;
-  /* semantic: text/primary/tertiary      ← palette: neutral-700    hex: #656565 */
+  --text-primary-tertiary: 0 0% 63.9%;
+  /* semantic: text/primary/tertiary      ← palette: neutral-400    hex: #a3a3a3 */
   --text-primary-on-dark: 40 50% 97.6%;
   /* semantic: text/primary/on-dark       ← palette: sand-300       hex: #fcfaf6 */
   --text-disabled: 0 0% 63.9%;
@@ -376,7 +380,7 @@
   /* semantic: icon/default/secondary             ← palette: neutral-500    hex: #808080 */
   --icon-button-disabled: 0 0% 70.6%;
   /* semantic: icon/default/disabled              ← palette: neutral-300    hex: #b4b4b4 */
-  --icon-button-danger-bg: 12.4 80.9% 36.5%;
+  --icon-button-danger-bg: 11.2 80.6% 36.5%;
   /* semantic: icon/error/default                 ← palette: red-600        hex: #a82e12 */
   --icon-button-danger-hover: 14.1 85.5% 79.6%;
   /* semantic: background/error/secondary         ← palette: red-200        hex: #f5b5a0 */

package/tailwind.config.ts

@@ -1,181 +1,14 @@
 import type { Config } from "tailwindcss"
+import noviePreset from "./tailwind.preset"
 
 const config: Config = {
-  darkMode: "class",
+  presets: [noviePreset],
   content: ["./src/**/*.{ts,tsx}"],
   safelist: [
     { pattern: /^bg-(success|warning|error|info|foreground|destructive)/ },
     { pattern: /^text-(success|warning|error|info)-foreground/ },
     { pattern: /^border-(success|warning|error|info)/ },
   ],
-  theme: {
-    extend: {
-      colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
-        },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
-        },
-        accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
-        },
-        popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
-        },
-        card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
-        },
-        success: {
-          DEFAULT: "hsl(var(--success))",
-          foreground: "hsl(var(--success-foreground))",
-          secondary: "hsl(var(--success-secondary))",
-          tertiary: "hsl(var(--success-tertiary))",
-        },
-        warning: {
-          DEFAULT: "hsl(var(--warning))",
-          foreground: "hsl(var(--warning-foreground))",
-          secondary: "hsl(var(--warning-secondary))",
-          tertiary: "hsl(var(--warning-tertiary))",
-        },
-        info: {
-          DEFAULT: "hsl(var(--info))",
-          foreground: "hsl(var(--info-foreground))",
-          secondary: "hsl(var(--info-secondary))",
-          tertiary: "hsl(var(--info-tertiary))",
-        },
-        error: {
-          DEFAULT: "hsl(var(--error))",
-          foreground: "hsl(var(--error-foreground))",
-          secondary: "hsl(var(--error-secondary))",
-          tertiary: "hsl(var(--error-tertiary))",
-        },
-        page: {
-          DEFAULT: "hsl(var(--page))",
-          secondary: "hsl(var(--page-secondary))",
-          tertiary: "hsl(var(--page-tertiary))",
-        },
-        "surface-inset": "hsl(var(--surface-inset))",
-        "surface-elevated": "hsl(var(--surface-elevated))",
-        interactive: {
-          DEFAULT: "hsl(var(--interactive))",
-          disabled: "hsl(var(--interactive-disabled))",
-          secondary: "hsl(var(--interactive-secondary))",
-          tertiary: "hsl(var(--interactive-tertiary))",
-          active: "hsl(var(--interactive-active))",
-        },
-        scenario: {
-          fern: "hsl(var(--scenario-fern))",
-          orange: "hsl(var(--scenario-orange))",
-          red: "hsl(var(--scenario-red))",
-          slate: "hsl(var(--scenario-slate))",
-        },
-      },
-      keyframes: {
-        "progress-indeterminate": {
-          "0%": { transform: "translateX(-100%)" },
-          "100%": { transform: "translateX(200%)" },
-        },
-      },
-      animation: {
-        "progress-indeterminate":
-          "progress-indeterminate 1.5s ease-in-out infinite",
-      },
-      spacing: {
-        "13": "3.25rem",  // 52px
-        "15": "3.75rem",  // 60px
-        "17": "4.25rem",  // 68px
-        "18": "4.5rem",   // 72px
-        "19": "4.75rem",  // 76px
-      },
-      fontFamily: {
-        sans: [
-          "var(--font-sans, 'Google Sans Flex Variable')",
-          "ui-sans-serif",
-          "system-ui",
-          "-apple-system",
-          "sans-serif",
-        ],
-      },
-      fontSize: {
-        /* Headings */
-        display: ["80px", { lineHeight: "100%", fontWeight: "700" }],
-        oversized: ["48px", { lineHeight: "100%", fontWeight: "700" }],
-        h1: ["36px", { lineHeight: "44px", fontWeight: "700", letterSpacing: "-0.5px" }],
-        h2: ["32px", { lineHeight: "36px", fontWeight: "600", letterSpacing: "-0.3px" }],
-        h3: ["28px", { lineHeight: "32px", fontWeight: "600" }],
-        h4: ["22px", { lineHeight: "26px", fontWeight: "600" }],
-        /* Body */
-        "body-lg": ["18px", { lineHeight: "28px", fontWeight: "400" }],
-        "body-lg-light": ["18px", { lineHeight: "28px", fontWeight: "300" }],
-        body: ["16px", { lineHeight: "24px", fontWeight: "400" }],
-        "body-sm": ["14px", { lineHeight: "20px", fontWeight: "400" }],
-        caption: ["12px", { lineHeight: "16px", fontWeight: "400" }],
-        overline: ["12px", { lineHeight: "16px", fontWeight: "500" }],
-        /* UI — Navigation & Links */
-        "main-nav": ["14px", { lineHeight: "100%", fontWeight: "700" }],
-        "link-paragraph": ["14px", { lineHeight: "100%", fontWeight: "400" }],
-        "link-sm": ["12px", { lineHeight: "100%", fontWeight: "400" }],
-        /* UI — Buttons */
-        "button-lg": ["16px", { lineHeight: "100%", fontWeight: "500" }],
-        button: ["14px", { lineHeight: "100%", fontWeight: "500" }],
-        "button-sm": ["12px", { lineHeight: "100%", fontWeight: "500" }],
-        /* UI — Form & Data */
-        "select-item": ["13px", { lineHeight: "100%", fontWeight: "400" }],
-        "search-filter-item": ["13px", { lineHeight: "100%", fontWeight: "600" }],
-        "notification-message": ["13px", { lineHeight: "100%", fontWeight: "500" }],
-        "report-code": ["11px", { lineHeight: "100%", fontWeight: "700" }],
-        label: ["16px", { lineHeight: "24px", fontWeight: "500" }],
-        "label-sm": ["14px", { lineHeight: "100%", fontWeight: "500" }],
-        "input-text-bold": ["14px", { lineHeight: "20px", fontWeight: "600" }],
-        "input-text": ["14px", { lineHeight: "20px", fontWeight: "400" }],
-        "help-text": ["10px", { lineHeight: "16px", fontWeight: "400" }],
-        tab: ["14px", { lineHeight: "100%", fontWeight: "600" }],
-        "table-header": ["14px", { lineHeight: "20px", fontWeight: "500" }],
-      },
-      borderRadius: {
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
-      },
-      width: {
-        "sidebar-mini": "var(--sidebar-width-mini)",
-        "sidebar-full": "var(--sidebar-width-full)",
-      },
-      maxWidth: {
-        "container-full": "1136px",
-        "container-chat": "800px",
-        "container-narrow": "640px",
-      },
-      gap: {
-        "panel": "var(--panel-gap)",
-        "card": "var(--card-gap)",
-      },
-      padding: {
-        "card": "var(--card-padding)",
-        "content-gutter": "var(--content-gutter)",
-      },
-    },
-  },
-  plugins: [],
 }
 
 export default config

package/tailwind.preset.ts

@@ -0,0 +1,190 @@
+import type { Config } from "tailwindcss"
+
+const noviePreset: Config = {
+  darkMode: "class",
+  content: [],
+  theme: {
+    extend: {
+      colors: {
+        border: {
+          DEFAULT: "hsl(var(--border))",
+          strong: "hsl(var(--border-strong))",
+          block: "hsl(var(--border-block))",
+        },
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+        success: {
+          DEFAULT: "hsl(var(--success))",
+          foreground: "hsl(var(--success-foreground))",
+          secondary: "hsl(var(--success-secondary))",
+          tertiary: "hsl(var(--success-tertiary))",
+        },
+        warning: {
+          DEFAULT: "hsl(var(--warning))",
+          foreground: "hsl(var(--warning-foreground))",
+          secondary: "hsl(var(--warning-secondary))",
+          tertiary: "hsl(var(--warning-tertiary))",
+        },
+        info: {
+          DEFAULT: "hsl(var(--info))",
+          foreground: "hsl(var(--info-foreground))",
+          secondary: "hsl(var(--info-secondary))",
+          tertiary: "hsl(var(--info-tertiary))",
+        },
+        error: {
+          DEFAULT: "hsl(var(--error))",
+          foreground: "hsl(var(--error-foreground))",
+          secondary: "hsl(var(--error-secondary))",
+          tertiary: "hsl(var(--error-tertiary))",
+        },
+        page: {
+          DEFAULT: "hsl(var(--page))",
+          secondary: "hsl(var(--page-secondary))",
+          tertiary: "hsl(var(--page-tertiary))",
+        },
+        "surface-inset": "hsl(var(--surface-inset))",
+        "surface-elevated": "hsl(var(--surface-elevated))",
+        interactive: {
+          DEFAULT: "hsl(var(--interactive))",
+          disabled: "hsl(var(--interactive-disabled))",
+          secondary: "hsl(var(--interactive-secondary))",
+          tertiary: "hsl(var(--interactive-tertiary))",
+          active: "hsl(var(--interactive-active))",
+        },
+        scenario: {
+          fern: "hsl(var(--scenario-fern))",
+          orange: "hsl(var(--scenario-orange))",
+          red: "hsl(var(--scenario-red))",
+          slate: "hsl(var(--scenario-slate))",
+        },
+      },
+      spacing: {
+        "13": "3.25rem",
+        "15": "3.75rem",
+        "17": "4.25rem",
+        "18": "4.5rem",
+        "19": "4.75rem",
+      },
+      fontFamily: {
+        sans: [
+          "var(--font-sans, 'Google Sans Flex Variable')",
+          "ui-sans-serif",
+          "system-ui",
+          "-apple-system",
+          "sans-serif",
+        ],
+      },
+      fontSize: {
+        /* Headings */
+        display: ["80px", { lineHeight: "100%", fontWeight: "700" }],
+        oversized: ["48px", { lineHeight: "100%", fontWeight: "700" }],
+        h1: ["36px", { lineHeight: "44px", fontWeight: "700", letterSpacing: "-0.5px" }],
+        h2: ["32px", { lineHeight: "36px", fontWeight: "600", letterSpacing: "-0.3px" }],
+        h3: ["28px", { lineHeight: "32px", fontWeight: "600" }],
+        h4: ["22px", { lineHeight: "26px", fontWeight: "600" }],
+        /* Body */
+        "body-lg": ["18px", { lineHeight: "28px", fontWeight: "400" }],
+        "body-lg-light": ["18px", { lineHeight: "28px", fontWeight: "300" }],
+        body: ["16px", { lineHeight: "24px", fontWeight: "400" }],
+        "body-sm": ["14px", { lineHeight: "20px", fontWeight: "400" }],
+        caption: ["12px", { lineHeight: "16px", fontWeight: "400" }],
+        overline: ["12px", { lineHeight: "16px", fontWeight: "500" }],
+        /* UI — Navigation & Links */
+        "main-nav": ["14px", { lineHeight: "100%", fontWeight: "700" }],
+        "link-paragraph": ["14px", { lineHeight: "100%", fontWeight: "400" }],
+        "link-sm": ["12px", { lineHeight: "100%", fontWeight: "400" }],
+        /* UI — Buttons */
+        "button-lg": ["16px", { lineHeight: "100%", fontWeight: "500" }],
+        button: ["14px", { lineHeight: "100%", fontWeight: "500" }],
+        "button-sm": ["12px", { lineHeight: "100%", fontWeight: "500" }],
+        /* UI — Form & Data */
+        "select-item": ["13px", { lineHeight: "100%", fontWeight: "400" }],
+        "search-filter-item": ["13px", { lineHeight: "100%", fontWeight: "600" }],
+        "notification-message": ["13px", { lineHeight: "100%", fontWeight: "500" }],
+        "report-code": ["11px", { lineHeight: "100%", fontWeight: "700" }],
+        label: ["16px", { lineHeight: "24px", fontWeight: "500" }],
+        "label-sm": ["14px", { lineHeight: "100%", fontWeight: "500" }],
+        "input-text-bold": ["14px", { lineHeight: "20px", fontWeight: "600" }],
+        "input-text": ["14px", { lineHeight: "20px", fontWeight: "400" }],
+        "help-text": ["10px", { lineHeight: "16px", fontWeight: "400" }],
+        tab: ["14px", { lineHeight: "100%", fontWeight: "600" }],
+        "table-header": ["14px", { lineHeight: "20px", fontWeight: "500" }],
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      width: {
+        "sidebar-mini": "var(--sidebar-width-mini)",
+        "sidebar-full": "var(--sidebar-width-full)",
+      },
+      maxWidth: {
+        "container-full": "1136px",
+        "container-chat": "800px",
+        "container-narrow": "640px",
+      },
+      gap: {
+        "panel": "var(--panel-gap)",
+        "card": "var(--card-gap)",
+      },
+      padding: {
+        "card": "var(--card-padding)",
+        "content-gutter": "var(--content-gutter)",
+      },
+      keyframes: {
+        "progress-indeterminate": {
+          "0%": { transform: "translateX(-100%)" },
+          "100%": { transform: "translateX(200%)" },
+        },
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" },
+        },
+      },
+      animation: {
+        "progress-indeterminate":
+          "progress-indeterminate 1.5s ease-in-out infinite",
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+    },
+  },
+  plugins: [],
+}
+
+export default noviePreset