@nphuonha/ui-kit 0.0.0-stage → 0.3.0

package/dist/lib/color.d.ts

@@ -0,0 +1,16 @@
+export type ThemeMode = "light" | "dark";
+export interface AccentVars {
+    "--primary": string;
+    "--primary-foreground": string;
+    "--primary-hover": string;
+    "--primary-active": string;
+    "--primary-soft": string;
+    "--primary-soft-foreground": string;
+    "--ring": string;
+}
+/**
+ * Generate accent/primary CSS variables from a single color.
+ * Apply the returned vars on `[data-ui="kit"]` (or a wrapper) to change accent.
+ */
+export declare function generateAccentVars(accent: string, mode?: ThemeMode): AccentVars;
+export declare function accentStyle(accent: string, mode?: ThemeMode): React.CSSProperties;

package/dist/lib/color.js

@@ -0,0 +1,118 @@
+function clamp(n, min = 0, max = 1) {
+    return Math.min(max, Math.max(min, n));
+}
+function hexToRgb(hex) {
+    const h = hex.replace("#", "").trim();
+    const v = h.length === 3 ? h.split("").map((c) => c + c).join("") : h;
+    if (!/^[0-9a-fA-F]{6}$/.test(v))
+        throw new Error(`Invalid hex color: ${hex}`);
+    const n = parseInt(v, 16);
+    return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 };
+}
+function rgbToHex(r, g, b) {
+    const to = (x) => Math.round(x).toString(16).padStart(2, "0");
+    return `#${to(r)}${to(g)}${to(b)}`;
+}
+function rgbToHsl(r, g, b) {
+    r /= 255;
+    g /= 255;
+    b /= 255;
+    const max = Math.max(r, g, b), min = Math.min(r, g, b);
+    let h = 0, s = 0;
+    const l = (max + min) / 2;
+    if (max !== min) {
+        const d = max - min;
+        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+        switch (max) {
+            case r:
+                h = (g - b) / d + (g < b ? 6 : 0);
+                break;
+            case g:
+                h = (b - r) / d + 2;
+                break;
+            case b:
+                h = (r - g) / d + 4;
+                break;
+        }
+        h /= 6;
+    }
+    return { h: h * 360, s, l };
+}
+function hslToRgb(h, s, l) {
+    h = ((h % 360) + 360) % 360;
+    h /= 360;
+    let r, g, b;
+    if (s === 0) {
+        r = g = b = l;
+    }
+    else {
+        const hue2rgb = (p, q, t) => {
+            if (t < 0)
+                t += 1;
+            if (t > 1)
+                t -= 1;
+            if (t < 1 / 6)
+                return p + (q - p) * 6 * t;
+            if (t < 1 / 2)
+                return q;
+            if (t < 2 / 3)
+                return p + (q - p) * (2 / 3 - t) * 6;
+            return p;
+        };
+        const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+        const p = 2 * l - q;
+        r = hue2rgb(p, q, h + 1 / 3);
+        g = hue2rgb(p, q, h);
+        b = hue2rgb(p, q, h - 1 / 3);
+    }
+    return { r: Math.round(r * 255), g: Math.round(g * 255), b: Math.round(b * 255) };
+}
+function hslToHex(h, s, l) {
+    const { r, g, b } = hslToRgb(h, s, l);
+    return rgbToHex(r, g, b);
+}
+function relativeLuminance(hex) {
+    const { r, g, b } = hexToRgb(hex);
+    const f = (c) => {
+        const s = c / 255;
+        return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
+    };
+    return 0.2126 * f(r) + 0.7152 * f(g) + 0.0722 * f(b);
+}
+function contrastText(bg) {
+    return relativeLuminance(bg) > 0.45 ? "#111827" : "#ffffff";
+}
+/**
+ * Generate accent/primary CSS variables from a single color.
+ * Apply the returned vars on `[data-ui="kit"]` (or a wrapper) to change accent.
+ */
+export function generateAccentVars(accent, mode = "light") {
+    const { r, g, b } = hexToRgb(accent);
+    const { h, s } = rgbToHsl(r, g, b);
+    const sat = clamp(s, 0.35, 1);
+    if (mode === "dark") {
+        const primary = hslToHex(h, sat, 0.62);
+        return {
+            "--primary": primary,
+            "--primary-foreground": contrastText(primary),
+            "--primary-hover": hslToHex(h, sat, 0.68),
+            "--primary-active": hslToHex(h, sat, 0.56),
+            "--primary-soft": hslToHex(h, clamp(sat - 0.15, 0.2, 1), 0.22),
+            "--primary-soft-foreground": hslToHex(h, clamp(sat - 0.05, 0.2, 1), 0.82),
+            "--ring": hslToHex(h, sat, 0.62),
+        };
+    }
+    const primary = hslToHex(h, sat, 0.48);
+    return {
+        "--primary": primary,
+        "--primary-foreground": contrastText(primary),
+        "--primary-hover": hslToHex(h, sat, 0.42),
+        "--primary-active": hslToHex(h, sat, 0.38),
+        "--primary-soft": hslToHex(h, clamp(sat - 0.1, 0.15, 1), 0.94),
+        "--primary-soft-foreground": hslToHex(h, sat, 0.3),
+        "--ring": hslToHex(h, sat, 0.48),
+    };
+}
+export function accentStyle(accent, mode = "light") {
+    return generateAccentVars(accent, mode);
+}

package/dist/lib/utils.d.ts

@@ -0,0 +1,7 @@
+import type * as React from "react";
+import { type ClassValue } from "clsx";
+export declare function cn(...inputs: ClassValue[]): string;
+export type IconComponent = React.ComponentType<{
+    size?: number;
+    className?: string;
+}>;

package/dist/lib/utils.js

@@ -0,0 +1,5 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}

package/dist/styles/base.css

@@ -0,0 +1,212 @@
+/*
+ * Shared structural layer — solid, clean, flat, modern.
+ * Tokens are defined in theme.css.
+ */
+
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
+  /* Directional light: bright top edge, soft bottom shade. */
+  --light-top: color-mix(in srgb, #ffffff 75%, transparent);
+  --light-top-soft: color-mix(in srgb, #ffffff 40%, transparent);
+  --light-bottom: color-mix(in srgb, #000000 8%, transparent);
+  --light-sheen: color-mix(in srgb, #ffffff 55%, transparent);
+  --light-sheen-soft: color-mix(in srgb, #ffffff 22%, transparent);
+  --light-side: color-mix(in srgb, #ffffff 26%, transparent);
+  --light-rim: color-mix(in srgb, #ffffff 60%, transparent);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary-hover: var(--primary-hover);
+  --color-primary-active: var(--primary-active);
+  --color-primary-soft: var(--primary-soft);
+  --color-primary-soft-foreground: var(--primary-soft-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-surface: var(--surface);
+  --color-surface-hover: var(--surface-hover);
+  --color-field: var(--field);
+  --color-field-hover: var(--field-hover);
+  --color-field-foreground: var(--field-foreground);
+  --color-overlay: var(--overlay);
+
+  --radius-sm: calc(var(--radius-control) - 2px);
+  --radius-md: var(--radius-control);
+  --radius-lg: var(--radius-card);
+  --radius-xl: calc(var(--radius-card) + 4px);
+  --radius-control: 0.75rem;
+  --radius-card: 1.25rem;
+  --radius-overlay: 1.25rem;
+  --radius-field: 0.75rem;
+  --radius-pill: 9999px;
+
+  --font-sans: var(--font-body);
+  --font-mono: var(--font-mono-family);
+
+  --ease-out-ui: cubic-bezier(0.2, 0.8, 0.2, 1);
+  --duration-ui: 160ms;
+  --duration-ui-slow: 220ms;
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+
+  html {
+    -webkit-text-size-adjust: 100%;
+  }
+
+  body {
+    @apply bg-background text-foreground antialiased;
+    margin: 0;
+    font-family: var(--font-body);
+    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
+  }
+
+  ::selection {
+    background: color-mix(in srgb, var(--primary) 24%, transparent);
+    color: var(--foreground);
+  }
+
+  a,
+  button {
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  :focus-visible {
+    outline: 2px solid var(--ring);
+    outline-offset: 2px;
+  }
+}
+
+@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;
+  }
+}
+
+@utility scrollbar-none {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+/* Solid surface with a curved, top-lit look.
+ * The rim is strongest on the top edge (as if light grazes it), with a faint
+ * glass edge all around and a barely-there vertical gradient for convexity.
+ * Uses a pseudo-element so it never fights the element's outer shadow. */
+@utility surface-curved {
+  background-image:
+    linear-gradient(
+      to bottom,
+      var(--light-sheen-soft) 0%,
+      transparent 28%,
+      transparent 72%,
+      var(--light-bottom) 100%
+    );
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    pointer-events: none;
+    box-shadow:
+      inset 0 1px 0 0 var(--light-top),
+      inset 0 0 0 1px color-mix(in srgb, #ffffff 8%, transparent),
+      inset 0 -1px 0 0 color-mix(in srgb, #000000 6%, transparent);
+  }
+}
+
+/* Softer variant for tonal fills (secondary buttons, tabs, alerts, tracks). */
+@utility surface-curved-soft {
+  background-image: linear-gradient(
+    to bottom,
+    var(--light-sheen-soft) 0%,
+    transparent 36%,
+    transparent 100%
+  );
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    pointer-events: none;
+    box-shadow:
+      inset 0 1px 0 0 var(--light-top-soft),
+      inset 0 0 0 1px color-mix(in srgb, #ffffff 5%, transparent),
+      inset 0 -1px 0 0 color-mix(in srgb, #000000 4%, transparent);
+  }
+}
+
+/* Glassy pill edge highlight (switch thumb, segmented pills). */
+@utility surface-curved-pill {
+  background-image: linear-gradient(
+    to bottom,
+    var(--light-sheen) 0%,
+    transparent 58%
+  );
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    pointer-events: none;
+    box-shadow:
+      inset 0 1px 0 0 var(--light-rim),
+      inset 0 0 0 1px color-mix(in srgb, #ffffff 12%, transparent),
+      inset 0 -1px 0 0 color-mix(in srgb, #000000 10%, transparent);
+  }
+}
+
+/* Inset version for native form controls (cannot use ::before). */
+@utility surface-inset {
+  background-image: linear-gradient(
+    to bottom,
+    var(--light-sheen-soft) 0%,
+    transparent 38%,
+    transparent 100%
+  );
+  box-shadow:
+    inset 0 1px 0 0 var(--light-top-soft),
+    inset 0 0 0 1px color-mix(in srgb, #ffffff 5%, transparent),
+    inset 0 -1px 0 0 color-mix(in srgb, #000000 4%, transparent);
+}
+
+@utility surface-flat {
+  background-image: none;
+  box-shadow: none;
+}

package/dist/styles/theme.css

@@ -0,0 +1,121 @@
+/* Modern, borderless, solid-surface theme.
+ * Depth comes from tonal surface steps + soft shadows, not outlined boxes.
+ * Accent is customizable: override --primary* / --ring (see generateAccentVars in lib/color).
+ */
+
+:root,
+[data-ui="kit"] {
+  color-scheme: light;
+
+  /* Tonal surface ladder (solid fills) */
+  --background: #f3f4f8;
+  --foreground: #16181d;
+  --card: #ffffff;
+  --card-foreground: #16181d;
+  --popover: #ffffff;
+  --popover-foreground: #16181d;
+  --surface: #eceef4;
+  --surface-hover: #e2e5ee;
+  --field: #eceef4;            /* borderless input/control fill */
+  --field-hover: #e5e8f0;
+  --field-foreground: #16181d;
+  --secondary: #eceef4;
+  --secondary-foreground: #16181d;
+  --muted: #eceef4;
+  --muted-foreground: #63697a;
+  --accent: #e8eaf6;
+  --accent-foreground: #1e2230;
+
+  /* Vibrant default accent (indigo). Override via generateAccentVars / --primary*. */
+  --primary: #4f46e5;
+  --primary-foreground: #ffffff;
+  --primary-hover: #4338ca;
+  --primary-active: #3730a3;
+  --primary-soft: #e8e9ff;
+  --primary-soft-foreground: #3730a3;
+  --ring: #4f46e5;
+
+  --destructive: #dc2626;
+  --destructive-foreground: #ffffff;
+  --success: #16a34a;
+  --success-foreground: #ffffff;
+  --warning: #d97706;
+  --warning-foreground: #ffffff;
+  --info: #0284c7;
+  --info-foreground: #ffffff;
+
+  /* Hairline only where a border is still necessary (rare) */
+  --border: #171a2110;
+  --input: #171a2110;
+  --overlay: rgb(12 14 20 / 0.5);
+
+  --radius-control: 0.75rem;   /* 12px */
+  --radius-card: 1.25rem;      /* 20px */
+  --radius-overlay: 1.25rem;
+  --radius-field: 0.75rem;
+
+  --shadow-overlay: 0 16px 48px -12px rgb(16 18 26 / 0.22), 0 4px 14px -4px rgb(16 18 26 / 0.1);
+  --shadow-raised: 0 2px 6px -2px rgb(16 18 26 / 0.12), 0 8px 24px -12px rgb(16 18 26 / 0.16);
+  --shadow-soft: 0 1px 2px rgb(16 18 26 / 0.04), 0 6px 20px -10px rgb(16 18 26 / 0.14);
+
+  --font-body: "Work Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  --font-mono-family: "Google Sans Code", ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+
+[data-ui="kit"].dark,
+.dark [data-ui="kit"],
+.dark:where([data-ui="kit"]) {
+  color-scheme: dark;
+
+  /* Light behaves differently on dark solids: cool rim, no milky wash. */
+  --light-top: color-mix(in srgb, #c7d2fe 26%, transparent);
+  --light-top-soft: color-mix(in srgb, #e2e8f0 16%, transparent);
+  --light-bottom: color-mix(in srgb, #000000 34%, transparent);
+  --light-sheen: color-mix(in srgb, #ffffff 9%, transparent);
+  --light-sheen-soft: color-mix(in srgb, #ffffff 4%, transparent);
+  --light-side: color-mix(in srgb, #ffffff 8%, transparent);
+  --light-rim: color-mix(in srgb, #ffffff 20%, transparent);
+
+  --background: #0d0f15;
+  --foreground: #f1f3f8;
+  --card: #171a22;
+  --card-foreground: #f1f3f8;
+  --popover: #1b1f29;
+  --popover-foreground: #f1f3f8;
+  --surface: #1c2029;
+  --surface-hover: #252a35;
+  --field: #1c2029;
+  --field-hover: #252a35;
+  --field-foreground: #f1f3f8;
+  --secondary: #1c2029;
+  --secondary-foreground: #f1f3f8;
+  --muted: #1c2029;
+  --muted-foreground: #9ba3b4;
+  --accent: #232840;
+  --accent-foreground: #f1f3f8;
+
+  --primary: #818cf8;
+  --primary-foreground: #111322;
+  --primary-hover: #a5b4fc;
+  --primary-active: #6366f1;
+  --primary-soft: #24244a;
+  --primary-soft-foreground: #c7d2fe;
+  --ring: #818cf8;
+
+  --destructive: #f87171;
+  --destructive-foreground: #160b0b;
+  --success: #4ade80;
+  --success-foreground: #06140b;
+  --warning: #fbbf24;
+  --warning-foreground: #171004;
+  --info: #38bdf8;
+  --info-foreground: #04141d;
+
+  --border: #ffffff14;
+  --input: #ffffff14;
+  --overlay: rgb(0 0 0 / 0.64);
+
+  --shadow-overlay: 0 20px 60px -12px rgb(0 0 0 / 0.6), 0 6px 20px -6px rgb(0 0 0 / 0.4);
+  --shadow-raised: 0 2px 8px -2px rgb(0 0 0 / 0.4), 0 10px 30px -12px rgb(0 0 0 / 0.5);
+  --shadow-soft: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 24px -14px rgb(0 0 0 / 0.5);
+}

package/dist/styles.css

@@ -0,0 +1,5 @@
+@import "./styles/base.css";
+@import "./styles/theme.css";
+
+/* Scan the kit's own components when the published stylesheet is imported. */
+@source "./components";