@nphuonha/ui-kit 0.0.0-stage → 0.2.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,137 @@
-# 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** (M3 Expressive-inspired, not M3 Expressive).
+
+> Status: MVP rewrite (single suite). Breaking changes from previous `warm-editorial`/`celebration` suites.
+
+## Install / use (workspace or package)
+
+```tsx
+import "@nphuonha/ui-kit/styles.css";
+import { Button, Card, CardContent, Input, Toaster, accentStyle } 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 `class="dark"` (and/or `data-ui="kit"` dark variant as supported by your setup).
+- Change accent at runtime: `style={accentStyle("#0d9488", "light")}` or `generateAccentVars(color, mode)` to override `--primary*`/`--ring`.
+
+### Framework setup
+
+The published package ships compiled ESM + `.d.ts`, so it works with Next.js, Vite, Remix and other bundlers. **No `transpilePackages` is required for the published package.**
+
+If you are consuming the TypeScript source from this monorepo instead, add:
+
+```ts
+// next.config.ts
+const nextConfig = {
+  transpilePackages: ["@nphuonha/ui-kit"],
+};
+
+export default nextConfig;
+```
+
+The published stylesheet scans its own components with `@source "./components"` inside `dist`. If your Tailwind setup ignores `@source` directives from dependencies, add this to your app CSS as a fallback:
+
+```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.
+
+## Structure
+
+```
+src/components/ui/button/
+  button.tsx           # "use client" behavior/render
+  button-variants.ts   # cva, server-safe
+  button.test.tsx      # colocated test
+  index.ts             # explicit exports
+```
+
+## Icons
+
+The kit uses **Phosphor** as its default internal icon set (check, minus, chevron, close, spinner). User-facing icons stay icon-agnostic — pass any icon 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 at any time 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`.
+
+The docs site uses Phosphor too. Swapping to another pack only affects the kit's internal affordances; icons you pass to `Button`, `IconButton` and `Alert` are always yours.
+
+## MVP components
+
+`Button`, `IconButton`, `Input`, `Textarea`, `Field`/`Label`, `Checkbox`, `RadioGroup`, `Switch`, `Select`, `Dialog`, `Sheet`, `Popover`, `Tooltip`, `Tabs`, `Card` (+Header/Title/Description/Content/Footer), `Badge`, `Alert`, `Separator`, `Spinner`, `Toaster`/`toast`.
+
+## Scripts
+
+```bash
+npm run build -w @nphuonha/ui-kit      # emit dist (ESM + .d.ts + CSS)
+npm run typecheck -w @nphuonha/ui-kit
+npm run test -w @nphuonha/ui-kit
+```
+
+## Publishing
+
+The package builds to `dist` as ESM + `.d.ts` with `npm run build`. `prepack` builds automatically before `npm pack`/`npm publish`; `prepublishOnly` runs typecheck + tests.
+
+```bash
+npm login
+npm publish -w @nphuonha/ui-kit
+```
+
+Or from the repo root:
+
+```bash
+npm run publish:kit
+```
+
+Bump the version with:
+
+```bash
+npm version patch -w @nphuonha/ui-kit
+```
+
+The published package is compiled and works with Vite, Remix, Next.js and plain bundler-based JS apps. The repository's docs app consumes the TypeScript source via a local path alias for fast iteration.
+
+See `CONVENTIONS.md` for design/API rules.

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/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/dialog/dialog.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+export interface DialogProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    trigger?: React.ReactElement;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    children: React.ReactNode;
+    footer?: React.ReactNode;
+    className?: string;
+    showClose?: boolean;
+    "aria-label"?: string;
+}
+export declare function Dialog({ open, defaultOpen, onOpenChange, trigger, title, description, children, footer, className, showClose, "aria-label": ariaLabel, }: DialogProps): React.JSX.Element;

package/dist/components/ui/dialog/dialog.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
+import { cn } from "../../../lib/utils.js";
+import { IconButton } from "../icon-button/index.js";
+import { useKitIcon } from "../_shared/icon-provider.js";
+export function Dialog({ open, defaultOpen, onOpenChange, trigger, title, description, children, footer, className, showClose = true, "aria-label": ariaLabel, }) {
+    const CloseIcon = useKitIcon("close");
+    return (_jsxs(DialogPrimitive.Root, { open: open, defaultOpen: defaultOpen, onOpenChange: onOpenChange, children: [trigger ? _jsx(DialogPrimitive.Trigger, { render: trigger }) : null, _jsxs(DialogPrimitive.Portal, { children: [_jsx(DialogPrimitive.Backdrop, { className: "fixed inset-0 z-50 bg-overlay backdrop-blur-[2px] transition-opacity duration-[var(--duration-ui-slow)] data-[starting-style]:opacity-0 data-[ending-style]:opacity-0" }), _jsxs(DialogPrimitive.Popup, { "aria-label": ariaLabel, className: cn("surface-curved fixed left-1/2 top-1/2 z-50 grid w-[calc(100%-2rem)] max-w-lg -translate-x-1/2 -translate-y-1/2 grid-cols-1 gap-5 rounded-overlay bg-popover p-6 text-popover-foreground shadow-[var(--shadow-overlay)] outline-none", "transition-[opacity,transform] duration-[var(--duration-ui-slow)] ease-[var(--ease-out-ui)]", "data-[starting-style]:opacity-0 data-[starting-style]:-translate-x-1/2 data-[starting-style]:-translate-y-[47%] data-[starting-style]:scale-[0.97]", "data-[ending-style]:opacity-0 data-[ending-style]:-translate-x-1/2 data-[ending-style]:-translate-y-[47%] data-[ending-style]:scale-[0.97]", className), children: [(title || description || showClose) && (_jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsxs("div", { className: "grid gap-1", children: [title ? _jsx(DialogPrimitive.Title, { className: "text-lg font-semibold tracking-[-0.02em] leading-tight", children: title }) : null, description ? _jsx(DialogPrimitive.Description, { className: "text-sm leading-relaxed text-muted-foreground", children: description }) : null] }), showClose ? (_jsx(DialogPrimitive.Close, { render: _jsx(IconButton, { "aria-label": "Close", variant: "ghost", size: "icon-sm", className: "-mr-2 -mt-2 shrink-0", children: _jsx(CloseIcon, { size: 16 }) }) })) : null] })), _jsx("div", { className: "min-w-0", children: children }), footer ? _jsx("div", { className: "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", children: footer }) : null] })] })] }));
+}

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

@@ -0,0 +1 @@
+export { Dialog, type DialogProps } from "./dialog.js";

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

@@ -0,0 +1 @@
+export { Dialog } from "./dialog.js";

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

@@ -0,0 +1,11 @@
+import * as React from "react";
+export interface FieldProps {
+    id?: string;
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    error?: React.ReactNode;
+    required?: boolean;
+    className?: string;
+    children: React.ReactNode;
+}
+export declare function Field({ id, label, description, error, required, className, children }: FieldProps): React.JSX.Element;

package/dist/components/ui/field/field.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../../lib/utils.js";
+import { Label } from "../label/index.js";
+export function Field({ id, label, description, error, required, className, children }) {
+    const autoId = React.useId();
+    const controlId = id ?? autoId;
+    const descriptionId = description ? `${controlId}-description` : undefined;
+    const errorId = error ? `${controlId}-error` : undefined;
+    const describedBy = [descriptionId, errorId].filter(Boolean).join(" ") || undefined;
+    const child = React.isValidElement(children)
+        ? React.cloneElement(children, {
+            id: children.props.id ?? controlId,
+            "aria-describedby": [children.props["aria-describedby"], describedBy]
+                .filter(Boolean)
+                .join(" ") || undefined,
+            "aria-invalid": error ? true : children.props["aria-invalid"],
+        })
+        : children;
+    return (_jsxs("div", { className: cn("flex flex-col gap-1.5", className), children: [label ? (_jsx(Label, { htmlFor: controlId, requiredMark: required, children: label })) : null, child, description ? (_jsx("p", { id: descriptionId, className: "text-xs text-muted-foreground", children: description })) : null, error ? (_jsx("p", { id: errorId, role: "alert", className: "text-xs font-medium text-destructive", children: error })) : null] }));
+}

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

@@ -0,0 +1 @@
+export { Field, type FieldProps } from "./field.js";

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

@@ -0,0 +1 @@
+export { Field } from "./field.js";

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

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { type ButtonProps } from "../button/index.js";
+export interface IconButtonProps extends Omit<ButtonProps, "startIcon" | "endIcon" | "children"> {
+    "aria-label": string;
+    children: React.ReactNode;
+}
+export declare const IconButton: React.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,7 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Button } from "../button/index.js";
+import { cn } from "../../../lib/utils.js";
+export const IconButton = React.forwardRef(({ className, size = "icon", shape = "rounded", children, ...props }, ref) => (_jsx(Button, { ref: ref, size: size, shape: shape, className: cn(className), ...props, children: children })));
+IconButton.displayName = "IconButton";

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

@@ -0,0 +1 @@
+export { IconButton, type IconButtonProps } from "./icon-button.js";

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

@@ -0,0 +1 @@
+export { IconButton } from "./icon-button.js";

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

@@ -0,0 +1 @@
+export { Input, type InputProps } from "./input.js";

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

@@ -0,0 +1 @@
+export { Input } from "./input.js";

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

@@ -0,0 +1,5 @@
+import * as React from "react";
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
+    error?: boolean;
+}
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;