@nphuonha/ui-kit 0.0.0-stage → 0.3.0

package/CONVENTIONS.md

@@ -0,0 +1,38 @@
+# UI Kit Conventions (Solid / Clean / Flat / Modern)
+
+Single-suite, not-shadcn component kit: **Base UI** for behavior/a11y + owned tokens, styles, and a consistent **prop-driven** API. Visual direction: solid surfaces, clean hierarchy, flat-first depth, modern rounded shapes, vibrant-but-customizable accent (inspired by M3 Expressive, not M3 Expressive).
+
+## Foundations
+- **Semantic tokens only** in components (no app-specific variables, no hardcoded brand paints). Core contract lives in `src/styles/theme.css` and is mapped in `src/styles/base.css`.
+- **Accent is customizable** via CSS vars (`--primary`, `--primary-foreground`, `--primary-hover/active`, `--primary-soft*`, `--ring`). Use `generateAccentVars`/`accentStyle` from `@nphuonha/ui-kit` to derive a palette from one color (light/dark).
+- **Scope**: wrap with `data-ui="kit"` (put on `<html>`/portal root so overlay portals inherit tokens). Dark mode via `.dark`.
+
+## Visual
+- **Flat-first, softly curved**: separate surfaces with tonal solid fills; use a **top-lit rim + micro vertical gradient** for convexity instead of full outlines.
+  - `surface-curved` — cards, dialogs, popovers, primary/danger buttons.
+  - `surface-curved-soft` — secondary buttons, tabs, alerts, badges, switch tracks.
+  - `surface-curved-pill` — switch thumbs and pill controls.
+  - `surface-inset` — native fields (input/textarea/select), where `::before` is unavailable.
+  - Lighting tokens: `--light-top`, `--light-sheen`, `--light-bottom`, `--light-rim` (defined per light/dark theme).
+- **Shadows only lift, never outline**: keep subtle outer shadows for overlays (`--shadow-overlay`) and raised cards/buttons (`--shadow-soft`/`--shadow-raised`); the curved utilities only add inset edge light.
+- **Shape** via tokens: `--radius-control` (~12px), `--radius-card` (~20px), `--radius-overlay`, `--radius-field`; pill (`rounded-pill`) for actions and switch thumbs.
+- **Typography**: tokenized (`--font-body`), clear hierarchy.
+- **Motion**: restrained 150–220ms, `--ease-out-ui`, CSS transitions for feedback/enter-exit; **no bouncy springs** by default. Honor `prefers-reduced-motion` (global guard in `base.css`).
+
+## Component API
+- **Prop-driven & consistent**: prefer clear props over compound anatomy for core controls.
+- **Controls**: comfortable `h-10` default; shared focus/disabled/error states.
+- **Forms**: `label`, `description`, `error` (with `aria-invalid`/`aria-describedby`/`role="alert"` where relevant), `required` mark.
+- **Icons**: default internal affordances use **Phosphor**. `startIcon`/`endIcon`, `Alert.icon` and `IconButton` children accept any icon component (`IconComponent { size?, className? }`), so user-facing icons are pack-agnostic. The internal set (`check`, `minus`, `chevron`, `close`, `spinner`) is replaceable via `IconProvider`; `Toaster` exposes its own `icons` prop.
+- **Loading**: preserve layout (spinner + label), set `disabled`/`aria-busy`.
+
+## Structure & exports
+- One folder per component: `src/components/ui/<name>/<name>.tsx`, `<name>-variants.ts`, `<name>.test.tsx`, `index.ts`.
+- Extract `cva` into `<name>-variants.ts` **without** `"use client"`, so variants can be used in server components.
+- The folder `index.ts` exports the component and its variants explicitly. The main `src/index.ts` barrel re-exports folders, and `package.json` exposes subpaths (`@nphuonha/ui-kit/<name>`) for smaller client bundles.
+- Keep tests colocated with the component. Prefer a11y smoke tests plus token/scale regressions for components with meaningful state.
+
+## Stack notes
+- Overlays/behavior: `@base-ui/react`. Toast: `sonner` (restyled via tokens).
+- Prefer CSS transitions; avoid adding animation libraries for core MVP unless necessary.
+- When adding components, follow the token contract + these conventions and add/extend colocated tests.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 nphuonha
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,115 @@
-# Temporary Holding Version
+# @nphuonha/ui-kit
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Solid, clean, flat, modern React UI kit. **Base UI** for behavior/a11y + owned tokens/styles + a consistent prop-driven API. Accent is vibrant by default and customizable by color generation.
+
+> **v0.3.0** adds `BottomNav`, `DesktopNav` and `activeIcon` support for selected navigation items.
+
+- **Docs:** https://ui.nphuonha.id.vn
+- **Agent guide:** https://ui.nphuonha.id.vn/docs/agents
+- **llms.txt:** https://ui.nphuonha.id.vn/llms.txt
+
+## Install
+
+```bash
+npm install @nphuonha/ui-kit
+```
+
+Peer dependencies: React 19, React DOM 19, Tailwind CSS 4.
+
+The published package ships compiled ESM + `.d.ts`, so it works with Next.js, Vite, Remix and other bundlers. No `transpilePackages` step is required.
+
+## Usage
+
+```tsx
+import "@nphuonha/ui-kit/styles.css";
+import { Button, Card, CardContent, Input, Toaster } from "@nphuonha/ui-kit";
+
+export function App() {
+  return (
+    <div data-ui="kit">
+      <Toaster />
+      <Card>
+        <CardContent className="flex gap-2 pt-5">
+          <Input placeholder="Email" />
+          <Button>Continue</Button>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+```
+
+- Scope tokens/overlays with `data-ui="kit"` (add to `<html>` for portalled overlays).
+- Dark mode: add the `dark` class to the same element.
+- Change the accent at runtime:
+
+```tsx
+import { accentStyle } from "@nphuonha/ui-kit";
+
+<div data-ui="kit" style={accentStyle("#0d9488", "light")}>
+  <App />
+</div>
+```
+
+Or generate variables directly:
+
+```ts
+import { generateAccentVars } from "@nphuonha/ui-kit";
+
+const vars = generateAccentVars("#0d9488", "dark");
+```
+
+Tailwind v4: the package stylesheet imports Tailwind. If your setup ignores `@source` from dependencies, add:
+
+```css
+@source "../node_modules/@nphuonha/ui-kit/dist/components";
+```
+
+## Granular imports
+
+The main barrel is convenient. For smaller client bundles, import from a component subpath:
+
+```tsx
+import { Button, buttonVariants } from "@nphuonha/ui-kit/button";
+import { Field } from "@nphuonha/ui-kit/field";
+import { Input } from "@nphuonha/ui-kit/input";
+```
+
+Variants live in server-safe `*-variants.ts` files and can be used from server components.
+
+## Icons
+
+The kit uses **Phosphor** for its internal affordances (check, minus, chevron, close, spinner). User-facing icons are pack-agnostic — pass any component that accepts `size` and `className`:
+
+```tsx
+<Button startIcon={Plus}>New item</Button>
+<IconButton aria-label="Search"><Search /></IconButton>
+<Alert icon={Info} title="Heads up">...</Alert>
+```
+
+Swap the internal set with `IconProvider`:
+
+```tsx
+import { IconProvider } from "@nphuonha/ui-kit";
+import { Check, ChevronUpDown, Loader, Minus, X } from "your-icon-pack";
+
+<IconProvider
+  icons={{ check: Check, minus: Minus, chevron: ChevronUpDown, close: X, spinner: Loader }}
+>
+  <App />
+</IconProvider>
+```
+
+`Toaster` also accepts an `icons` prop for `success`, `info`, `warning`, `error`, `loading` and `close`.
+
+## Components
+
+`Button`, `IconButton`, `Input`, `Textarea`, `Field`/`Label`, `Checkbox`, `RadioGroup`, `Switch`, `Select`, `Dialog`, `Sheet`, `Popover`, `Tooltip`, `Tabs`, `BottomNav`, `DesktopNav`, `Card` (+Header/Title/Description/Content/Footer), `Badge`, `Alert`, `Separator`, `Spinner`, `Toaster`/`toast`.
+
+`BottomNav` and `DesktopNav` items accept an optional `activeIcon` to swap to a filled or alternate icon when selected.
+
+Live previews, code and API reference: https://ui.nphuonha.id.vn
+
+## License
+
+MIT

package/dist/components/ui/_shared/icon-provider.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+export type KitIconName = "check" | "minus" | "chevron" | "close" | "spinner";
+export type KitIcon = React.ComponentType<{
+    size?: number;
+} & React.SVGProps<SVGSVGElement>>;
+export interface IconProviderProps {
+    icons?: Partial<Record<KitIconName, KitIcon>>;
+    children: React.ReactNode;
+}
+/**
+ * Default internal icons come from Phosphor. Swap any of them for another pack:
+ *
+ *   <IconProvider icons={{ check: LucideCheck, close: LucideX }}>
+ *     <App />
+ *   </IconProvider>
+ */
+export declare function IconProvider({ icons, children }: IconProviderProps): React.JSX.Element;
+export declare function useKitIcon(name: KitIconName): KitIcon;

package/dist/components/ui/_shared/icon-provider.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { CaretUpDownIcon, CheckIcon, MinusIcon, SpinnerIcon, XIcon, } from "@phosphor-icons/react";
+const defaultIcons = {
+    check: (props) => _jsx(CheckIcon, { ...props, weight: "bold" }),
+    minus: (props) => _jsx(MinusIcon, { ...props, weight: "bold" }),
+    chevron: (props) => _jsx(CaretUpDownIcon, { ...props, weight: "bold" }),
+    close: (props) => _jsx(XIcon, { ...props, weight: "bold" }),
+    spinner: SpinnerIcon,
+};
+const IconContext = React.createContext({});
+/**
+ * Default internal icons come from Phosphor. Swap any of them for another pack:
+ *
+ *   <IconProvider icons={{ check: LucideCheck, close: LucideX }}>
+ *     <App />
+ *   </IconProvider>
+ */
+export function IconProvider({ icons, children }) {
+    return _jsx(IconContext.Provider, { value: icons ?? {}, children: children });
+}
+export function useKitIcon(name) {
+    const icons = React.useContext(IconContext);
+    return icons[name] ?? defaultIcons[name];
+}

package/dist/components/ui/alert/alert-variants.d.ts

@@ -0,0 +1,5 @@
+import { type VariantProps } from "class-variance-authority";
+export declare const alertVariants: (props?: ({
+    variant?: "neutral" | "info" | "success" | "warning" | "danger" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type AlertVariants = VariantProps<typeof alertVariants>;

package/dist/components/ui/alert/alert-variants.js

@@ -0,0 +1,13 @@
+import { cva } from "class-variance-authority";
+export const alertVariants = cva("surface-curved-soft relative flex w-full items-start gap-3 rounded-card px-4 py-3.5 text-sm", {
+    variants: {
+        variant: {
+            neutral: "bg-surface text-foreground",
+            info: "bg-info/10 text-foreground",
+            success: "bg-success/10 text-foreground",
+            warning: "bg-warning/12 text-foreground",
+            danger: "bg-destructive/10 text-foreground",
+        },
+    },
+    defaultVariants: { variant: "neutral" },
+});

package/dist/components/ui/alert/alert.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+import type { VariantProps } from "class-variance-authority";
+import { type IconComponent } from "../../../lib/utils.js";
+import { alertVariants } from "./alert-variants.js";
+export interface AlertProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof alertVariants> {
+    title?: string;
+    icon?: IconComponent;
+}
+export declare function Alert({ className, variant, title, icon: Icon, children, ...props }: AlertProps): React.JSX.Element;

package/dist/components/ui/alert/alert.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../lib/utils.js";
+import { alertVariants } from "./alert-variants.js";
+const iconTone = {
+    neutral: "text-muted-foreground",
+    info: "text-info",
+    success: "text-success",
+    warning: "text-warning",
+    danger: "text-destructive",
+};
+export function Alert({ className, variant = "neutral", title, icon: Icon, children, ...props }) {
+    return (_jsxs("div", { role: "status", className: cn(alertVariants({ variant }), className), ...props, children: [Icon ? _jsx(Icon, { size: 18, className: cn("mt-0.5 shrink-0", iconTone[variant ?? "neutral"]) }) : null, _jsxs("div", { className: "min-w-0 flex-1", children: [title ? _jsx("div", { className: "font-semibold leading-5 tracking-[-0.01em]", children: title }) : null, children ? _jsx("div", { className: cn("text-muted-foreground", title && "mt-0.5"), children: children }) : null] })] }));
+}

package/dist/components/ui/alert/index.d.ts

@@ -0,0 +1,2 @@
+export { Alert, type AlertProps } from "./alert.js";
+export { alertVariants, type AlertVariants } from "./alert-variants.js";

package/dist/components/ui/alert/index.js

@@ -0,0 +1,2 @@
+export { Alert } from "./alert.js";
+export { alertVariants } from "./alert-variants.js";

package/dist/components/ui/badge/badge-variants.d.ts

@@ -0,0 +1,5 @@
+import { type VariantProps } from "class-variance-authority";
+export declare const badgeVariants: (props?: ({
+    variant?: "neutral" | "info" | "success" | "warning" | "danger" | "primary" | "solid" | "outline" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type BadgeVariants = VariantProps<typeof badgeVariants>;

package/dist/components/ui/badge/badge-variants.js

@@ -0,0 +1,16 @@
+import { cva } from "class-variance-authority";
+export const badgeVariants = cva("surface-curved-soft relative inline-flex items-center gap-1 whitespace-nowrap rounded-pill px-2.5 py-0.5 text-xs font-semibold tracking-[-0.01em] transition-colors", {
+    variants: {
+        variant: {
+            neutral: "bg-surface text-foreground",
+            primary: "bg-primary-soft text-primary-soft-foreground",
+            success: "bg-success/12 text-success",
+            warning: "bg-warning/14 text-warning",
+            danger: "bg-destructive/12 text-destructive",
+            info: "bg-info/12 text-info",
+            solid: "bg-primary text-primary-foreground",
+            outline: "bg-transparent text-foreground shadow-[inset_0_0_0_1px_var(--border)]",
+        },
+    },
+    defaultVariants: { variant: "neutral" },
+});

package/dist/components/ui/badge/badge.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+import type { VariantProps } from "class-variance-authority";
+import { badgeVariants } from "./badge-variants.js";
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {
+}
+export declare function Badge({ className, variant, ...props }: BadgeProps): React.JSX.Element;

package/dist/components/ui/badge/badge.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../../lib/utils.js";
+import { badgeVariants } from "./badge-variants.js";
+export function Badge({ className, variant, ...props }) {
+    return _jsx("span", { className: cn(badgeVariants({ variant }), className), ...props });
+}

package/dist/components/ui/badge/index.d.ts

@@ -0,0 +1,2 @@
+export { Badge, type BadgeProps } from "./badge.js";
+export { badgeVariants, type BadgeVariants } from "./badge-variants.js";

package/dist/components/ui/badge/index.js

@@ -0,0 +1,2 @@
+export { Badge } from "./badge.js";
+export { badgeVariants } from "./badge-variants.js";

package/dist/components/ui/bottom-nav/bottom-nav.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { type IconComponent } from "../../../lib/utils.js";
+export interface BottomNavItem {
+    value: string;
+    label: React.ReactNode;
+    icon: IconComponent;
+    activeIcon?: IconComponent;
+    href?: string;
+    badge?: React.ReactNode;
+    disabled?: boolean;
+}
+export interface BottomNavProps extends Omit<React.ComponentPropsWithoutRef<"nav">, "onChange"> {
+    items: BottomNavItem[];
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /** Pin the bar to the bottom of the viewport. */
+    fixed?: boolean;
+}
+export declare const BottomNav: React.ForwardRefExoticComponent<BottomNavProps & React.RefAttributes<HTMLElement>>;

package/dist/components/ui/bottom-nav/bottom-nav.js

@@ -0,0 +1,36 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../../lib/utils.js";
+export const BottomNav = React.forwardRef(({ items, value, defaultValue, onValueChange, fixed = false, className, "aria-label": ariaLabel = "Bottom navigation", ...props }, ref) => {
+    const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
+    const activeValue = value ?? uncontrolledValue;
+    const select = (next) => {
+        if (value === undefined)
+            setUncontrolledValue(next);
+        onValueChange?.(next);
+    };
+    return (_jsx("nav", { ref: ref, "aria-label": ariaLabel, className: cn("surface-curved relative rounded-[24px] bg-card p-1.5 shadow-[var(--shadow-raised)]", fixed
+            ? "fixed inset-x-3 bottom-[calc(env(safe-area-inset-bottom)+0.75rem)] z-40 mx-auto max-w-md"
+            : "w-full", className), ...props, children: _jsx("div", { className: "flex items-stretch gap-1", children: items.map((item) => {
+                const active = item.value === activeValue;
+                const Icon = (active && item.activeIcon) || item.icon;
+                const content = (_jsxs(_Fragment, { children: [_jsxs("span", { className: cn("relative flex h-7 min-w-12 items-center justify-center rounded-pill px-2.5 transition-[background-color,color,box-shadow] duration-[var(--duration-ui)] ease-[var(--ease-out-ui)]", active
+                                ? "bg-primary text-primary-foreground shadow-[var(--shadow-raised)]"
+                                : "text-muted-foreground group-hover:bg-surface group-hover:text-foreground"), children: [_jsx(Icon, { size: 18 }), item.badge != null ? (_jsx("span", { className: cn("absolute -right-1 -top-1 inline-flex min-w-4 items-center justify-center rounded-pill px-1 text-[9px] font-semibold leading-4", active
+                                        ? "bg-card text-foreground shadow-sm"
+                                        : "bg-primary text-primary-foreground"), children: item.badge })) : null] }), _jsx("span", { className: cn("max-w-full truncate text-[10px] font-medium leading-none tracking-[-0.01em]", active ? "font-semibold text-foreground" : "text-muted-foreground"), children: item.label })] }));
+                const itemClassName = cn("group relative flex min-w-0 flex-1 flex-col items-center justify-center gap-1 rounded-[18px] px-1 py-1.5 outline-none transition-colors duration-[var(--duration-ui)]", "focus-visible:ring-2 focus-visible:ring-ring/40", item.disabled && "pointer-events-none opacity-45");
+                if (item.href) {
+                    return (_jsx("a", { href: item.href, "aria-current": active ? "page" : undefined, "aria-disabled": item.disabled || undefined, tabIndex: item.disabled ? -1 : undefined, className: itemClassName, onClick: (event) => {
+                            if (item.disabled) {
+                                event.preventDefault();
+                                return;
+                            }
+                            select(item.value);
+                        }, children: content }, item.value));
+                }
+                return (_jsx("button", { type: "button", disabled: item.disabled, "aria-current": active ? "page" : undefined, className: itemClassName, onClick: () => select(item.value), children: content }, item.value));
+            }) }) }));
+});
+BottomNav.displayName = "BottomNav";

package/dist/components/ui/bottom-nav/index.d.ts

@@ -0,0 +1 @@
+export { BottomNav, type BottomNavItem, type BottomNavProps } from "./bottom-nav.js";

package/dist/components/ui/bottom-nav/index.js

@@ -0,0 +1 @@
+export { BottomNav } from "./bottom-nav.js";

package/dist/components/ui/button/button-variants.d.ts

@@ -0,0 +1,7 @@
+import { type VariantProps } from "class-variance-authority";
+export declare const buttonVariants: (props?: ({
+    variant?: "danger" | "primary" | "outline" | "secondary" | "ghost" | "soft" | null | undefined;
+    size?: "icon" | "sm" | "default" | "lg" | "icon-sm" | null | undefined;
+    shape?: "rounded" | "pill" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type ButtonVariants = VariantProps<typeof buttonVariants>;

package/dist/components/ui/button/button-variants.js

@@ -0,0 +1,29 @@
+import { cva } from "class-variance-authority";
+export const buttonVariants = cva("relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 whitespace-nowrap text-sm font-semibold tracking-[-0.01em] transition-[background-color,color,box-shadow,transform] duration-[var(--duration-ui)] ease-[var(--ease-out-ui)] outline-none select-none focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-45 data-[loading]:opacity-80 motion-safe:active:scale-[0.97]", {
+    variants: {
+        variant: {
+            primary: "surface-curved bg-primary text-primary-foreground shadow-[var(--shadow-raised)] hover:bg-primary-hover active:bg-primary-active",
+            secondary: "surface-curved-soft bg-field text-field-foreground hover:bg-field-hover",
+            outline: "bg-transparent text-foreground shadow-[inset_0_0_0_1.5px_var(--border)] hover:bg-surface",
+            ghost: "bg-transparent text-foreground hover:bg-surface active:bg-surface-hover",
+            danger: "surface-curved bg-destructive text-destructive-foreground shadow-[var(--shadow-raised)] hover:bg-destructive/90",
+            soft: "surface-curved-soft bg-primary-soft text-primary-soft-foreground hover:bg-primary-soft/75",
+        },
+        size: {
+            sm: "h-9 px-3.5 text-[13px]",
+            default: "h-10 px-4",
+            lg: "h-11 px-5 text-[15px]",
+            icon: "size-10 p-0",
+            "icon-sm": "size-9 p-0",
+        },
+        shape: {
+            rounded: "rounded-control",
+            pill: "rounded-pill",
+        },
+    },
+    defaultVariants: {
+        variant: "primary",
+        size: "default",
+        shape: "rounded",
+    },
+});

package/dist/components/ui/button/button.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import { type ButtonVariants } from "./button-variants.js";
+import { type IconComponent } from "../../../lib/utils.js";
+export interface ButtonProps extends ButtonPrimitive.Props, ButtonVariants {
+    loading?: boolean;
+    startIcon?: IconComponent;
+    endIcon?: IconComponent;
+}
+export declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/ui/button/button.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import { Spinner } from "../spinner/index.js";
+import { buttonVariants } from "./button-variants.js";
+import { cn } from "../../../lib/utils.js";
+export const Button = React.forwardRef(({ className, variant, size, shape, loading, startIcon: StartIcon, endIcon: EndIcon, children, disabled, ...props }, ref) => {
+    const iconOnly = size === "icon" || size === "icon-sm";
+    return (_jsxs(ButtonPrimitive, { ref: ref, disabled: loading || disabled, "aria-busy": loading || undefined, "data-loading": loading || undefined, className: cn(buttonVariants({ variant, size, shape }), className), ...props, children: [loading ? _jsx(Spinner, { size: 16, className: "shrink-0" }) : null, !loading && StartIcon ? _jsx(StartIcon, { size: 16, className: "shrink-0" }) : null, children != null && children !== "" && !(loading && iconOnly) ? (iconOnly ? (_jsx("span", { "aria-hidden": "true", className: "inline-flex items-center justify-center", children: children })) : (_jsx("span", { className: "truncate", children: children }))) : null, !loading && EndIcon ? _jsx(EndIcon, { size: 16, className: "shrink-0" }) : null] }));
+});
+Button.displayName = "Button";

package/dist/components/ui/button/index.d.ts

@@ -0,0 +1,2 @@
+export { Button, type ButtonProps } from "./button.js";
+export { buttonVariants, type ButtonVariants } from "./button-variants.js";

package/dist/components/ui/button/index.js

@@ -0,0 +1,2 @@
+export { Button } from "./button.js";
+export { buttonVariants } from "./button-variants.js";

package/dist/components/ui/card/card.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+export declare function Card({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+export declare function CardHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+export declare function CardTitle({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>): React.JSX.Element;
+export declare function CardDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>): React.JSX.Element;
+export declare function CardContent({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+export declare function CardFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;

package/dist/components/ui/card/card.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../../lib/utils.js";
+export function Card({ className, ...props }) {
+    return (_jsx("div", { className: cn("surface-curved relative rounded-card bg-card text-card-foreground shadow-[var(--shadow-soft)]", className), ...props }));
+}
+export function CardHeader({ className, ...props }) {
+    return _jsx("div", { className: cn("flex flex-col gap-1.5 p-6 pb-0", className), ...props });
+}
+export function CardTitle({ className, ...props }) {
+    return _jsx("h3", { className: cn("text-base font-semibold tracking-[-0.015em] leading-tight", className), ...props });
+}
+export function CardDescription({ className, ...props }) {
+    return _jsx("p", { className: cn("text-sm leading-relaxed text-muted-foreground", className), ...props });
+}
+export function CardContent({ className, ...props }) {
+    return _jsx("div", { className: cn("p-6", className), ...props });
+}
+export function CardFooter({ className, ...props }) {
+    return _jsx("div", { className: cn("flex items-center gap-2 p-6 pt-0", className), ...props });
+}

package/dist/components/ui/card/index.d.ts

@@ -0,0 +1 @@
+export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "./card.js";

package/dist/components/ui/card/index.js

@@ -0,0 +1 @@
+export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "./card.js";

package/dist/components/ui/checkbox/checkbox.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
+export interface CheckboxProps extends Omit<React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, "children"> {
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    error?: boolean;
+}
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/ui/checkbox/checkbox.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
+import { cn } from "../../../lib/utils.js";
+import { useKitIcon } from "../_shared/icon-provider.js";
+export const Checkbox = React.forwardRef(({ className, label, description, error, id, ...props }, ref) => {
+    const CheckIcon = useKitIcon("check");
+    const MinusIcon = useKitIcon("minus");
+    const autoId = React.useId();
+    const controlId = id ?? autoId;
+    const descriptionId = description ? `${controlId}-description` : undefined;
+    const control = (_jsx(CheckboxPrimitive.Root, { ref: ref, id: controlId, "aria-invalid": error || undefined, "aria-describedby": descriptionId, className: cn("surface-inset peer inline-flex size-5 shrink-0 items-center justify-center rounded-[7px] bg-field text-primary-foreground transition-[background-color,box-shadow] duration-[var(--duration-ui)] ease-[var(--ease-out-ui)] outline-none focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:ring-offset-2 focus-visible:ring-offset-background data-[checked]:bg-primary data-[indeterminate]:bg-primary disabled:cursor-not-allowed disabled:opacity-45", error && "bg-destructive/15 data-[checked]:bg-destructive", className), ...props, children: _jsxs(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center text-current data-[unchecked]:hidden", children: [_jsx(CheckIcon, { size: 13, className: "in-data-[indeterminate]:hidden" }), _jsx(MinusIcon, { size: 13, className: "hidden in-data-[indeterminate]:block" })] }) }));
+    if (!label && !description)
+        return control;
+    return (_jsxs("div", { className: "flex items-start gap-2.5", children: [control, _jsxs("div", { className: "grid gap-0.5 pt-0.5", children: [label ? (_jsx("label", { htmlFor: controlId, className: "cursor-pointer text-sm font-medium leading-none text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-45", children: label })) : null, description ? _jsx("p", { id: descriptionId, className: "text-xs text-muted-foreground", children: description }) : null] })] }));
+});
+Checkbox.displayName = "Checkbox";

package/dist/components/ui/checkbox/index.d.ts

@@ -0,0 +1 @@
+export { Checkbox, type CheckboxProps } from "./checkbox.js";

package/dist/components/ui/checkbox/index.js

@@ -0,0 +1 @@
+export { Checkbox } from "./checkbox.js";

package/dist/components/ui/desktop-nav/desktop-nav.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { type IconComponent } from "../../../lib/utils.js";
+export interface DesktopNavItem {
+    value: string;
+    label: React.ReactNode;
+    icon?: IconComponent;
+    activeIcon?: IconComponent;
+    href?: string;
+    badge?: React.ReactNode;
+    disabled?: boolean;
+}
+export interface DesktopNavProps extends Omit<React.ComponentPropsWithoutRef<"nav">, "onChange"> {
+    items: DesktopNavItem[];
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+}
+export declare const DesktopNav: React.ForwardRefExoticComponent<DesktopNavProps & React.RefAttributes<HTMLElement>>;

package/dist/components/ui/desktop-nav/desktop-nav.js

@@ -0,0 +1,37 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../../lib/utils.js";
+export const DesktopNav = React.forwardRef(({ items, value, defaultValue, onValueChange, className, "aria-label": ariaLabel = "Desktop navigation", ...props }, ref) => {
+    const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
+    const activeValue = value ?? uncontrolledValue;
+    const select = (next) => {
+        if (value === undefined)
+            setUncontrolledValue(next);
+        onValueChange?.(next);
+    };
+    return (_jsx("nav", { ref: ref, "aria-label": ariaLabel, className: cn(
+        // Keep `relative`: surface-curved-soft paints an absolute ::before rim,
+        // which otherwise anchors to the nearest positioned ancestor.
+        "surface-curved-soft relative scrollbar-none inline-flex max-w-full items-center gap-0.5 overflow-x-auto rounded-pill bg-surface p-1", className), ...props, children: items.map((item) => {
+            const active = item.value === activeValue;
+            const Icon = (active && item.activeIcon) || item.icon;
+            const content = (_jsxs(_Fragment, { children: [Icon ? _jsx(Icon, { size: 15, className: "shrink-0" }) : null, _jsx("span", { className: "whitespace-nowrap", children: item.label }), item.badge != null ? (_jsx("span", { className: cn("ml-0.5 inline-flex min-w-4 items-center justify-center rounded-pill px-1 text-[10px] font-semibold leading-4", active
+                            ? "bg-primary-soft text-primary-soft-foreground"
+                            : "bg-surface-hover text-muted-foreground"), children: item.badge })) : null] }));
+            const itemClassName = cn("relative inline-flex h-9 shrink-0 items-center justify-center gap-2 rounded-pill px-3.5 text-sm font-medium outline-none transition-[background-color,color,box-shadow] duration-[var(--duration-ui)]", "focus-visible:ring-2 focus-visible:ring-ring/40", active
+                ? "surface-curved bg-card text-foreground shadow-sm"
+                : "text-muted-foreground hover:bg-card/60 hover:text-foreground", item.disabled && "pointer-events-none opacity-45");
+            if (item.href) {
+                return (_jsx("a", { href: item.href, "aria-current": active ? "page" : undefined, "aria-disabled": item.disabled || undefined, tabIndex: item.disabled ? -1 : undefined, className: itemClassName, onClick: (event) => {
+                        if (item.disabled) {
+                            event.preventDefault();
+                            return;
+                        }
+                        select(item.value);
+                    }, children: content }, item.value));
+            }
+            return (_jsx("button", { type: "button", disabled: item.disabled, "aria-current": active ? "page" : undefined, className: itemClassName, onClick: () => select(item.value), children: content }, item.value));
+        }) }));
+});
+DesktopNav.displayName = "DesktopNav";

package/dist/components/ui/desktop-nav/index.d.ts

@@ -0,0 +1 @@
+export { DesktopNav, type DesktopNavItem, type DesktopNavProps } from "./desktop-nav.js";

package/dist/components/ui/desktop-nav/index.js

@@ -0,0 +1 @@
+export { DesktopNav } from "./desktop-nav.js";