@nphuonha/ui-kit 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,6 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../../lib/utils.js";
+export const Input = React.forwardRef(({ className, type = "text", error, ...props }, ref) => (_jsx("input", { ref: ref, type: type, "aria-invalid": error || undefined, className: cn("surface-inset flex h-10 w-full rounded-field bg-field px-3.5 py-2 text-sm text-field-foreground transition-[background-color,box-shadow] duration-[var(--duration-ui)] ease-[var(--ease-out-ui)] placeholder:text-muted-foreground/70 hover:bg-field-hover focus-visible:bg-field focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/35 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-45", error && "bg-destructive/10 focus-visible:ring-destructive/30", className), ...props })));
+Input.displayName = "Input";

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

@@ -0,0 +1 @@
+export { Label, type LabelProps } from "./label.js";

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

@@ -0,0 +1 @@
+export { Label } from "./label.js";

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

@@ -0,0 +1,5 @@
+import * as React from "react";
+export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+    requiredMark?: boolean;
+}
+export declare const Label: React.ForwardRefExoticComponent<LabelProps & React.RefAttributes<HTMLLabelElement>>;

package/dist/components/ui/label/label.js

@@ -0,0 +1,6 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../../lib/utils.js";
+export const Label = React.forwardRef(({ className, requiredMark, children, ...props }, ref) => (_jsxs("label", { ref: ref, className: cn("text-sm font-medium leading-none text-foreground", className), ...props, children: [children, requiredMark ? (_jsx("span", { "aria-hidden": "true", className: "ml-0.5 text-destructive", children: "*" })) : null] })));
+Label.displayName = "Label";

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

@@ -0,0 +1 @@
+export { Popover, type PopoverProps } from "./popover.js";

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

@@ -0,0 +1 @@
+export { Popover } from "./popover.js";

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

@@ -0,0 +1,14 @@
+import * as React from "react";
+export interface PopoverProps {
+    trigger: React.ReactElement;
+    children: React.ReactNode;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    side?: "top" | "bottom" | "left" | "right";
+    align?: "start" | "center" | "end";
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    className?: string;
+}
+export declare function Popover({ trigger, children, title, description, side, align, open, defaultOpen, onOpenChange, className, }: PopoverProps): React.JSX.Element;

package/dist/components/ui/popover/popover.js

@@ -0,0 +1,7 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
+import { cn } from "../../../lib/utils.js";
+export function Popover({ trigger, children, title, description, side = "bottom", align = "center", open, defaultOpen, onOpenChange, className, }) {
+    return (_jsxs(PopoverPrimitive.Root, { open: open, defaultOpen: defaultOpen, onOpenChange: onOpenChange, children: [_jsx(PopoverPrimitive.Trigger, { render: trigger }), _jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Positioner, { side: side, align: align, sideOffset: 8, children: _jsxs(PopoverPrimitive.Popup, { className: cn("surface-curved relative z-50 w-72 rounded-overlay bg-popover p-4 text-popover-foreground shadow-[var(--shadow-overlay)] outline-none", "origin-[var(--transform-origin)] transition-[opacity,transform] duration-[var(--duration-ui)] ease-[var(--ease-out-ui)]", "data-[starting-style]:opacity-0 data-[starting-style]:scale-[0.97] data-[ending-style]:opacity-0 data-[ending-style]:scale-[0.97]", className), children: [title ? _jsx(PopoverPrimitive.Title, { className: "text-sm font-semibold leading-none", children: title }) : null, description ? _jsx(PopoverPrimitive.Description, { className: "mt-1 text-sm text-muted-foreground", children: description }) : null, _jsx("div", { className: cn((title || description) && "mt-3"), children: children })] }) }) })] }));
+}

package/dist/components/ui/radio-group/index.d.ts

@@ -0,0 +1 @@
+export { RadioGroup, type RadioGroupProps, type RadioOption } from "./radio-group.js";

package/dist/components/ui/radio-group/index.js

@@ -0,0 +1 @@
+export { RadioGroup } from "./radio-group.js";

package/dist/components/ui/radio-group/radio-group.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group";
+export interface RadioOption {
+    value: string;
+    label: React.ReactNode;
+    description?: React.ReactNode;
+    disabled?: boolean;
+}
+export interface RadioGroupProps extends Omit<React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive>, "children"> {
+    options?: RadioOption[];
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    error?: React.ReactNode;
+    orientation?: "vertical" | "horizontal";
+    children?: React.ReactNode;
+}
+export declare function RadioGroup({ className, options, label, description, error, orientation, children, ...props }: RadioGroupProps): React.JSX.Element;

package/dist/components/ui/radio-group/radio-group.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group";
+import { Radio } from "@base-ui/react/radio";
+import { cn } from "../../../lib/utils.js";
+export function RadioGroup({ className, options, label, description, error, orientation = "vertical", children, ...props }) {
+    const groupId = React.useId();
+    const labelId = `${groupId}-label`;
+    const descriptionId = `${groupId}-description`;
+    return (_jsxs("div", { className: cn("flex flex-col gap-2", className), children: [label ? (_jsx("div", { id: labelId, className: "text-sm font-medium text-foreground", children: label })) : null, _jsx(RadioGroupPrimitive, { "aria-labelledby": label ? labelId : undefined, "aria-describedby": description ? descriptionId : undefined, className: cn("flex gap-3", orientation === "vertical" ? "flex-col" : "flex-row flex-wrap"), ...props, children: options
+                    ? options.map((opt, index) => {
+                        const optionId = `${groupId}-option-${index}`;
+                        return (_jsxs("label", { className: cn("flex items-start gap-2.5 text-sm", opt.disabled && "opacity-45"), children: [_jsx(Radio.Root, { value: opt.value, disabled: opt.disabled, "aria-labelledby": `${optionId}-label`, "aria-describedby": opt.description ? `${optionId}-description` : undefined, className: "surface-inset mt-0.5 inline-flex size-5 shrink-0 items-center justify-center rounded-full bg-field outline-none transition-[background-color,box-shadow] duration-[var(--duration-ui)] focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:ring-offset-2 focus-visible:ring-offset-background data-[checked]:bg-primary", children: _jsx(Radio.Indicator, { className: "size-2 rounded-full bg-primary-foreground data-[unchecked]:hidden" }) }), _jsxs("span", { className: "grid gap-0.5", children: [_jsx("span", { id: `${optionId}-label`, className: "font-medium leading-none text-foreground", children: opt.label }), opt.description ? (_jsx("span", { id: `${optionId}-description`, className: "text-xs text-muted-foreground", children: opt.description })) : null] })] }, opt.value));
+                    })
+                    : children }), description ? (_jsx("p", { id: descriptionId, className: "text-xs text-muted-foreground", children: description })) : null, error ? _jsx("p", { role: "alert", className: "text-xs font-medium text-destructive", children: error }) : null] }));
+}

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

@@ -0,0 +1 @@
+export { Select, type SelectProps, type SelectOption } from "./select.js";

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

@@ -0,0 +1 @@
+export { Select } from "./select.js";

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

@@ -0,0 +1,21 @@
+import * as React from "react";
+export interface SelectOption {
+    value: string;
+    label: React.ReactNode;
+    disabled?: boolean;
+}
+export interface SelectProps {
+    options: SelectOption[];
+    value?: string | null;
+    defaultValue?: string | null;
+    onValueChange?: (value: string | null) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    error?: boolean;
+    className?: string;
+    name?: string;
+    id?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+}
+export declare function Select({ options, value, defaultValue, onValueChange, placeholder, disabled, error, className, name, id, ...aria }: SelectProps): React.JSX.Element;

package/dist/components/ui/select/select.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Select as SelectPrimitive } from "@base-ui/react/select";
+import { cn } from "../../../lib/utils.js";
+import { useKitIcon } from "../_shared/icon-provider.js";
+export function Select({ options, value, defaultValue, onValueChange, placeholder = "Select…", disabled, error, className, name, id, ...aria }) {
+    const ChevronIcon = useKitIcon("chevron");
+    const CheckIcon = useKitIcon("check");
+    return (_jsxs(SelectPrimitive.Root, { value: value, defaultValue: defaultValue, onValueChange: onValueChange, disabled: disabled, name: name, children: [_jsxs(SelectPrimitive.Trigger, { id: id, "aria-invalid": error || undefined, className: cn("surface-inset inline-flex h-10 w-full items-center justify-between gap-2 rounded-field bg-field px-3.5 text-sm text-field-foreground outline-none transition-[background-color,box-shadow] duration-[var(--duration-ui)] hover:bg-field-hover focus-visible:bg-field focus-visible:ring-2 focus-visible:ring-ring/35 focus-visible:ring-offset-2 focus-visible:ring-offset-background data-[disabled]:cursor-not-allowed data-[disabled]:opacity-45", error && "bg-destructive/10 focus-visible:ring-destructive/30", className), ...aria, children: [_jsx(SelectPrimitive.Value, { children: (val) => options.find((o) => o.value === val)?.label ?? _jsx("span", { className: "text-muted-foreground/70", children: placeholder }) }), _jsx(SelectPrimitive.Icon, { className: "shrink-0 text-muted-foreground", children: _jsx(ChevronIcon, { size: 14 }) })] }), _jsx(SelectPrimitive.Portal, { children: _jsx(SelectPrimitive.Positioner, { sideOffset: 6, className: "z-50 outline-none", children: _jsx(SelectPrimitive.Popup, { className: cn("surface-curved relative min-w-[var(--anchor-width)] rounded-overlay bg-popover p-1.5 text-popover-foreground shadow-[var(--shadow-overlay)] outline-none", "origin-[var(--transform-origin)] transition-[opacity,transform] duration-[var(--duration-ui)] data-[starting-style]:opacity-0 data-[starting-style]:scale-[0.97] data-[ending-style]:opacity-0 data-[ending-style]:scale-[0.97]"), children: _jsx(SelectPrimitive.List, { children: options.map((opt) => (_jsxs(SelectPrimitive.Item, { value: opt.value, disabled: opt.disabled, className: "flex cursor-default select-none items-center gap-2 rounded-control px-2.5 py-2 text-sm outline-none data-[highlighted]:bg-surface data-[selected]:bg-primary-soft data-[selected]:font-medium data-[selected]:text-primary-soft-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-45", children: [_jsx(SelectPrimitive.ItemIndicator, { className: "inline-flex w-4 shrink-0 items-center justify-center text-primary", children: _jsx(CheckIcon, { size: 14 }) }), _jsx(SelectPrimitive.ItemText, { children: opt.label })] }, opt.value))) }) }) }) })] }));
+}

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

@@ -0,0 +1 @@
+export { Separator, type SeparatorProps } from "./separator.js";

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

@@ -0,0 +1 @@
+export { Separator } from "./separator.js";

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

@@ -0,0 +1,6 @@
+import * as React from "react";
+export interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+    orientation?: "horizontal" | "vertical";
+    decorative?: boolean;
+}
+export declare function Separator({ className, orientation, decorative, ...props }: SeparatorProps): React.JSX.Element;

package/dist/components/ui/separator/separator.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../../lib/utils.js";
+export function Separator({ className, orientation = "horizontal", decorative = true, ...props }) {
+    return (_jsx("div", { role: decorative ? "none" : "separator", "aria-orientation": decorative ? undefined : orientation, className: cn("shrink-0 bg-border", orientation === "horizontal" ? "h-px w-full" : "h-full w-px", className), ...props }));
+}

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

@@ -0,0 +1 @@
+export { Sheet, type SheetProps } from "./sheet.js";

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

@@ -0,0 +1 @@
+export { Sheet } from "./sheet.js";

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

@@ -0,0 +1,15 @@
+import * as React from "react";
+export interface SheetProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    trigger?: React.ReactElement;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    children: React.ReactNode;
+    footer?: React.ReactNode;
+    side?: "right" | "left" | "bottom";
+    className?: string;
+    showClose?: boolean;
+}
+export declare function Sheet({ open, defaultOpen, onOpenChange, trigger, title, description, children, footer, side, className, showClose, }: SheetProps): React.JSX.Element;

package/dist/components/ui/sheet/sheet.js

@@ -0,0 +1,15 @@
+"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";
+const sideStyles = {
+    right: "inset-y-2 right-2 h-[calc(100%-1rem)] w-[calc(100%-1rem)] max-w-md rounded-overlay data-[starting-style]:translate-x-[calc(100%+0.5rem)] data-[ending-style]:translate-x-[calc(100%+0.5rem)]",
+    left: "inset-y-2 left-2 h-[calc(100%-1rem)] w-[calc(100%-1rem)] max-w-md rounded-overlay data-[starting-style]:-translate-x-[calc(100%+0.5rem)] data-[ending-style]:-translate-x-[calc(100%+0.5rem)]",
+    bottom: "inset-x-2 bottom-2 max-h-[85vh] w-[calc(100%-1rem)] rounded-overlay data-[starting-style]:translate-y-[calc(100%+0.5rem)] data-[ending-style]:translate-y-[calc(100%+0.5rem)]",
+};
+export function Sheet({ open, defaultOpen, onOpenChange, trigger, title, description, children, footer, side = "right", className, showClose = true, }) {
+    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, { className: cn("surface-curved fixed z-50 flex flex-col gap-5 bg-popover p-6 text-popover-foreground shadow-[var(--shadow-overlay)] outline-none", "transition-transform duration-[var(--duration-ui-slow)] ease-[var(--ease-out-ui)]", sideStyles[side], 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-h-0 flex-1 overflow-auto", 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/spinner/index.d.ts

@@ -0,0 +1 @@
+export { Spinner, type SpinnerProps } from "./spinner.js";

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

@@ -0,0 +1 @@
+export { Spinner } from "./spinner.js";

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

@@ -0,0 +1,5 @@
+import * as React from "react";
+export interface SpinnerProps extends React.HTMLAttributes<SVGSVGElement> {
+    size?: number;
+}
+export declare function Spinner({ size, className, ...props }: SpinnerProps): React.JSX.Element;

package/dist/components/ui/spinner/spinner.js

@@ -0,0 +1,8 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../../lib/utils.js";
+import { useKitIcon } from "../_shared/icon-provider.js";
+export function Spinner({ size = 18, className, ...props }) {
+    const Icon = useKitIcon("spinner");
+    return (_jsx(Icon, { size: size, className: cn("animate-spin text-current", className), "aria-hidden": "true", ...props }));
+}

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

@@ -0,0 +1 @@
+export { Switch, type SwitchProps } from "./switch.js";

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

@@ -0,0 +1 @@
+export { Switch } from "./switch.js";

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

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
+export interface SwitchProps extends Omit<React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>, "children"> {
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+}
+export declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/ui/switch/switch.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
+import { cn } from "../../../lib/utils.js";
+export const Switch = React.forwardRef(({ className, label, description, id, ...props }, ref) => {
+    const autoId = React.useId();
+    const controlId = id ?? autoId;
+    const descriptionId = description ? `${controlId}-description` : undefined;
+    const control = (_jsx(SwitchPrimitive.Root, { ref: ref, id: controlId, "aria-describedby": descriptionId, className: cn("surface-curved-soft relative peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-pill bg-muted-foreground/30 p-0.5 transition-[background-color] 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 disabled:cursor-not-allowed disabled:opacity-45", className), ...props, children: _jsx(SwitchPrimitive.Thumb, { className: "surface-curved-pill relative pointer-events-none block h-5 w-7 rounded-pill bg-white shadow-[0_1px_3px_rgb(0_0_0_/_0.2)] transition-[transform,width] duration-[var(--duration-ui)] ease-[var(--ease-out-ui)] data-[checked]:translate-x-3 data-[unchecked]:translate-x-0 motion-safe:active:w-8 data-[checked]:motion-safe:active:translate-x-2" }) }));
+    if (!label && !description)
+        return control;
+    return (_jsxs("div", { className: "flex items-start gap-3", 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", children: label }) : null, description ? _jsx("p", { id: descriptionId, className: "text-xs text-muted-foreground", children: description }) : null] })] }));
+});
+Switch.displayName = "Switch";

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

@@ -0,0 +1 @@
+export { Tabs, type TabsProps, type TabItem } from "./tabs.js";

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

@@ -0,0 +1 @@
+export { Tabs } from "./tabs.js";

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

@@ -0,0 +1,14 @@
+import * as React from "react";
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
+export interface TabItem {
+    value: string;
+    label: React.ReactNode;
+    content: React.ReactNode;
+    disabled?: boolean;
+}
+export interface TabsProps extends Omit<React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>, "children"> {
+    items: TabItem[];
+    listClassName?: string;
+    panelClassName?: string;
+}
+export declare function Tabs({ items, className, listClassName, panelClassName, ...props }: TabsProps): React.JSX.Element;

package/dist/components/ui/tabs/tabs.js

@@ -0,0 +1,7 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
+import { cn } from "../../../lib/utils.js";
+export function Tabs({ items, className, listClassName, panelClassName, ...props }) {
+    return (_jsxs(TabsPrimitive.Root, { className: cn("w-full", className), ...props, children: [_jsxs(TabsPrimitive.List, { className: cn("surface-curved-soft relative inline-flex h-10 items-center gap-0.5 rounded-pill bg-surface p-1", listClassName), children: [_jsx(TabsPrimitive.Indicator, { className: "surface-curved pointer-events-none absolute left-0 top-0 z-0 h-[var(--active-tab-height)] w-[var(--active-tab-width)] translate-x-[var(--active-tab-left)] translate-y-[var(--active-tab-top)] rounded-pill bg-card shadow-sm transition-[translate,width] duration-[var(--duration-ui-slow)] ease-[var(--ease-out-ui)]" }), items.map((item) => (_jsx(TabsPrimitive.Tab, { value: item.value, disabled: item.disabled, className: "relative z-10 inline-flex h-8 items-center justify-center whitespace-nowrap rounded-pill px-3.5 text-sm font-medium text-muted-foreground transition-[color] duration-[var(--duration-ui)] outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/35 disabled:pointer-events-none disabled:opacity-45 data-[active]:font-semibold data-[active]:text-foreground", children: item.label }, item.value)))] }), items.map((item) => (_jsx(TabsPrimitive.Panel, { value: item.value, className: cn("mt-4 rounded-control outline-none transition-opacity duration-[var(--duration-ui)] focus-visible:ring-2 focus-visible:ring-ring/20 data-[hidden]:hidden", panelClassName), children: item.content }, item.value)))] }));
+}

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

@@ -0,0 +1 @@
+export { Textarea, type TextareaProps } from "./textarea.js";

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

@@ -0,0 +1 @@
+export { Textarea } from "./textarea.js";

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

@@ -0,0 +1,5 @@
+import * as React from "react";
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    error?: boolean;
+}
+export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;

package/dist/components/ui/textarea/textarea.js

@@ -0,0 +1,6 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../../lib/utils.js";
+export const Textarea = React.forwardRef(({ className, error, ...props }, ref) => (_jsx("textarea", { ref: ref, "aria-invalid": error || undefined, className: cn("surface-inset flex min-h-[96px] w-full resize-y rounded-field bg-field px-3.5 py-2.5 text-sm text-field-foreground transition-[background-color,box-shadow] duration-[var(--duration-ui)] ease-[var(--ease-out-ui)] placeholder:text-muted-foreground/70 hover:bg-field-hover focus-visible:bg-field focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/35 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-45", error && "bg-destructive/10 focus-visible:ring-destructive/30", className), ...props })));
+Textarea.displayName = "Textarea";

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

@@ -0,0 +1 @@
+export { Toaster, type ToasterIcons, type ToasterProps, toast } from "./toast.js";

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

@@ -0,0 +1 @@
+export { Toaster, toast } from "./toast.js";

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

@@ -0,0 +1,19 @@
+import type * as React from "react";
+import { toast } from "sonner";
+export interface ToasterIcons {
+    success?: React.ReactNode;
+    info?: React.ReactNode;
+    warning?: React.ReactNode;
+    error?: React.ReactNode;
+    loading?: React.ReactNode;
+    close?: React.ReactNode;
+}
+export interface ToasterProps {
+    position?: "top-left" | "top-right" | "bottom-left" | "bottom-right" | "top-center" | "bottom-center";
+    theme?: "light" | "dark" | "system";
+    richColors?: boolean;
+    closeButton?: boolean;
+    icons?: ToasterIcons;
+}
+export declare function Toaster({ position, theme, richColors, closeButton, icons, }: ToasterProps): React.JSX.Element;
+export { toast };

package/dist/components/ui/toast/toast.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Toaster as SonnerToaster, toast } from "sonner";
+export function Toaster({ position = "bottom-right", theme = "light", richColors = false, closeButton = true, icons, }) {
+    return (_jsx(SonnerToaster, { position: position, theme: theme, richColors: richColors, closeButton: closeButton, icons: icons, toastOptions: {
+            classNames: {
+                toast: "surface-curved relative group rounded-overlay bg-popover text-popover-foreground shadow-[var(--shadow-overlay)]",
+                title: "text-sm font-medium",
+                description: "text-sm text-muted-foreground",
+                actionButton: "rounded-control bg-primary text-primary-foreground text-xs font-medium",
+                cancelButton: "rounded-control bg-surface text-foreground text-xs font-medium",
+                closeButton: "border-border bg-card text-muted-foreground hover:text-foreground",
+                success: "!border-success/25",
+                error: "!border-destructive/25",
+                warning: "!border-warning/25",
+                info: "!border-info/25",
+            },
+        } }));
+}
+export { toast };

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

@@ -0,0 +1 @@
+export { Tooltip, type TooltipProps } from "./tooltip.js";

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

@@ -0,0 +1 @@
+export { Tooltip } from "./tooltip.js";

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

@@ -0,0 +1,12 @@
+import * as React from "react";
+export interface TooltipProps {
+    content: React.ReactNode;
+    children: React.ReactElement;
+    side?: "top" | "bottom" | "left" | "right";
+    align?: "start" | "center" | "end";
+    delay?: number;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+export declare function Tooltip({ content, children, side, align, delay, open, defaultOpen, onOpenChange, }: TooltipProps): React.JSX.Element;

package/dist/components/ui/tooltip/tooltip.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
+import { cn } from "../../../lib/utils.js";
+export function Tooltip({ content, children, side = "top", align = "center", delay = 300, open, defaultOpen, onOpenChange, }) {
+    if (content == null || content === "")
+        return children;
+    return (_jsx(TooltipPrimitive.Provider, { delay: delay, children: _jsxs(TooltipPrimitive.Root, { open: open, defaultOpen: defaultOpen, onOpenChange: onOpenChange, children: [_jsx(TooltipPrimitive.Trigger, { render: children }), _jsx(TooltipPrimitive.Portal, { children: _jsx(TooltipPrimitive.Positioner, { side: side, align: align, sideOffset: 6, children: _jsx(TooltipPrimitive.Popup, { role: "tooltip", className: cn("z-50 max-w-xs rounded-[10px] bg-foreground px-2.5 py-1.5 text-xs font-medium text-background shadow-[var(--shadow-overlay)]", "origin-[var(--transform-origin)] transition-[opacity,transform] duration-[var(--duration-ui)] ease-[var(--ease-out-ui)]", "data-[starting-style]:opacity-0 data-[starting-style]:scale-95 data-[ending-style]:opacity-0 data-[ending-style]:scale-95"), children: content }) }) })] }) }));
+}

package/dist/index.d.ts

@@ -0,0 +1,27 @@
+export { cn } from "./lib/utils.js";
+export type { IconComponent } from "./lib/utils.js";
+export { generateAccentVars, accentStyle } from "./lib/color.js";
+export type { AccentVars, ThemeMode } from "./lib/color.js";
+export { IconProvider, useKitIcon } from "./components/ui/_shared/icon-provider.js";
+export type { IconProviderProps, KitIcon, KitIconName, } from "./components/ui/_shared/icon-provider.js";
+export * from "./components/ui/alert/index.js";
+export * from "./components/ui/badge/index.js";
+export * from "./components/ui/button/index.js";
+export * from "./components/ui/card/index.js";
+export * from "./components/ui/checkbox/index.js";
+export * from "./components/ui/dialog/index.js";
+export * from "./components/ui/field/index.js";
+export * from "./components/ui/icon-button/index.js";
+export * from "./components/ui/input/index.js";
+export * from "./components/ui/label/index.js";
+export * from "./components/ui/popover/index.js";
+export * from "./components/ui/radio-group/index.js";
+export * from "./components/ui/select/index.js";
+export * from "./components/ui/separator/index.js";
+export * from "./components/ui/sheet/index.js";
+export * from "./components/ui/spinner/index.js";
+export * from "./components/ui/switch/index.js";
+export * from "./components/ui/tabs/index.js";
+export * from "./components/ui/textarea/index.js";
+export * from "./components/ui/toast/index.js";
+export * from "./components/ui/tooltip/index.js";

package/dist/index.js

@@ -0,0 +1,29 @@
+// @nphuonha/ui-kit — solid, clean, flat, modern.
+// Usage:
+//   import "@nphuonha/ui-kit/styles.css";
+//   import { Button } from "@nphuonha/ui-kit";
+// Scope with <div data-ui="kit"> (put on <html> for portalled overlays).
+export { cn } from "./lib/utils.js";
+export { generateAccentVars, accentStyle } from "./lib/color.js";
+export { IconProvider, useKitIcon } from "./components/ui/_shared/icon-provider.js";
+export * from "./components/ui/alert/index.js";
+export * from "./components/ui/badge/index.js";
+export * from "./components/ui/button/index.js";
+export * from "./components/ui/card/index.js";
+export * from "./components/ui/checkbox/index.js";
+export * from "./components/ui/dialog/index.js";
+export * from "./components/ui/field/index.js";
+export * from "./components/ui/icon-button/index.js";
+export * from "./components/ui/input/index.js";
+export * from "./components/ui/label/index.js";
+export * from "./components/ui/popover/index.js";
+export * from "./components/ui/radio-group/index.js";
+export * from "./components/ui/select/index.js";
+export * from "./components/ui/separator/index.js";
+export * from "./components/ui/sheet/index.js";
+export * from "./components/ui/spinner/index.js";
+export * from "./components/ui/switch/index.js";
+export * from "./components/ui/tabs/index.js";
+export * from "./components/ui/textarea/index.js";
+export * from "./components/ui/toast/index.js";
+export * from "./components/ui/tooltip/index.js";

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;
+}>;