@nphuonha/ui-kit 0.0.0-stage → 0.2.0

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";

package/package.json

@@ -1,6 +1,186 @@
 {
   "name": "@nphuonha/ui-kit",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.2.0",
+  "description": "Solid, clean, flat, modern React UI kit (Base UI + Tailwind v4).",
+  "license": "MIT",
+  "author": "nphuonha",
+  "type": "module",
+  "keywords": [
+    "react",
+    "ui",
+    "components",
+    "design-system",
+    "base-ui",
+    "tailwindcss"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./alert": {
+      "types": "./dist/components/ui/alert/index.d.ts",
+      "import": "./dist/components/ui/alert/index.js",
+      "default": "./dist/components/ui/alert/index.js"
+    },
+    "./badge": {
+      "types": "./dist/components/ui/badge/index.d.ts",
+      "import": "./dist/components/ui/badge/index.js",
+      "default": "./dist/components/ui/badge/index.js"
+    },
+    "./button": {
+      "types": "./dist/components/ui/button/index.d.ts",
+      "import": "./dist/components/ui/button/index.js",
+      "default": "./dist/components/ui/button/index.js"
+    },
+    "./card": {
+      "types": "./dist/components/ui/card/index.d.ts",
+      "import": "./dist/components/ui/card/index.js",
+      "default": "./dist/components/ui/card/index.js"
+    },
+    "./checkbox": {
+      "types": "./dist/components/ui/checkbox/index.d.ts",
+      "import": "./dist/components/ui/checkbox/index.js",
+      "default": "./dist/components/ui/checkbox/index.js"
+    },
+    "./dialog": {
+      "types": "./dist/components/ui/dialog/index.d.ts",
+      "import": "./dist/components/ui/dialog/index.js",
+      "default": "./dist/components/ui/dialog/index.js"
+    },
+    "./field": {
+      "types": "./dist/components/ui/field/index.d.ts",
+      "import": "./dist/components/ui/field/index.js",
+      "default": "./dist/components/ui/field/index.js"
+    },
+    "./icon-button": {
+      "types": "./dist/components/ui/icon-button/index.d.ts",
+      "import": "./dist/components/ui/icon-button/index.js",
+      "default": "./dist/components/ui/icon-button/index.js"
+    },
+    "./icons": {
+      "types": "./dist/components/ui/_shared/icon-provider.d.ts",
+      "import": "./dist/components/ui/_shared/icon-provider.js",
+      "default": "./dist/components/ui/_shared/icon-provider.js"
+    },
+    "./input": {
+      "types": "./dist/components/ui/input/index.d.ts",
+      "import": "./dist/components/ui/input/index.js",
+      "default": "./dist/components/ui/input/index.js"
+    },
+    "./label": {
+      "types": "./dist/components/ui/label/index.d.ts",
+      "import": "./dist/components/ui/label/index.js",
+      "default": "./dist/components/ui/label/index.js"
+    },
+    "./popover": {
+      "types": "./dist/components/ui/popover/index.d.ts",
+      "import": "./dist/components/ui/popover/index.js",
+      "default": "./dist/components/ui/popover/index.js"
+    },
+    "./radio-group": {
+      "types": "./dist/components/ui/radio-group/index.d.ts",
+      "import": "./dist/components/ui/radio-group/index.js",
+      "default": "./dist/components/ui/radio-group/index.js"
+    },
+    "./select": {
+      "types": "./dist/components/ui/select/index.d.ts",
+      "import": "./dist/components/ui/select/index.js",
+      "default": "./dist/components/ui/select/index.js"
+    },
+    "./separator": {
+      "types": "./dist/components/ui/separator/index.d.ts",
+      "import": "./dist/components/ui/separator/index.js",
+      "default": "./dist/components/ui/separator/index.js"
+    },
+    "./sheet": {
+      "types": "./dist/components/ui/sheet/index.d.ts",
+      "import": "./dist/components/ui/sheet/index.js",
+      "default": "./dist/components/ui/sheet/index.js"
+    },
+    "./spinner": {
+      "types": "./dist/components/ui/spinner/index.d.ts",
+      "import": "./dist/components/ui/spinner/index.js",
+      "default": "./dist/components/ui/spinner/index.js"
+    },
+    "./switch": {
+      "types": "./dist/components/ui/switch/index.d.ts",
+      "import": "./dist/components/ui/switch/index.js",
+      "default": "./dist/components/ui/switch/index.js"
+    },
+    "./tabs": {
+      "types": "./dist/components/ui/tabs/index.d.ts",
+      "import": "./dist/components/ui/tabs/index.js",
+      "default": "./dist/components/ui/tabs/index.js"
+    },
+    "./textarea": {
+      "types": "./dist/components/ui/textarea/index.d.ts",
+      "import": "./dist/components/ui/textarea/index.js",
+      "default": "./dist/components/ui/textarea/index.js"
+    },
+    "./toast": {
+      "types": "./dist/components/ui/toast/index.d.ts",
+      "import": "./dist/components/ui/toast/index.js",
+      "default": "./dist/components/ui/toast/index.js"
+    },
+    "./tooltip": {
+      "types": "./dist/components/ui/tooltip/index.d.ts",
+      "import": "./dist/components/ui/tooltip/index.js",
+      "default": "./dist/components/ui/tooltip/index.js"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./base.css": "./dist/styles/base.css",
+    "./theme.css": "./dist/styles/theme.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "CONVENTIONS.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "node scripts/build.mjs",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "prepack": "npm run build",
+    "prepublishOnly": "npm run typecheck && npm run test"
+  },
+  "peerDependencies": {
+    "react": ">=19",
+    "react-dom": ">=19",
+    "tailwindcss": ">=4"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.9.0",
+    "@phosphor-icons/react": "^2.1.10",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.5.0",
+    "tw-animate-css": "^1.4.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.3",
+    "@testing-library/user-event": "^14.6.8",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "@vitejs/plugin-react": "^6.2.1",
+    "jsdom": "^31.0.0",
+    "typescript": "^5",
+    "vitest": "^5.1.0"
+  }
+}