@aoctech/ui 0.1.0

package/README.md

@@ -0,0 +1,123 @@
+# @aoctech/ui
+
+The CTech component vocabulary, in one place. Base UI provides accessible behaviour; this package
+owns the semantic token contract and ships official themes for Account, DFE, Wallet, Poker and
+Billing. Each product keeps its identity without forking interactions or accessibility.
+
+```sh
+npm i @aoctech/ui
+```
+
+## The consumer supplies two things
+
+### 1. The official theme contract
+
+Import the shared tokens once and scope an official theme at the product root. The application may
+extend a theme, but it must not redefine semantic status meaning.
+
+```css
+@import "tailwindcss";
+@import "@aoctech/ui/styles.css";
+
+@theme inline {
+  --color-background: var(--background);
+  --color-surface: var(--surface);
+  --color-foreground: var(--foreground);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-border: var(--border);
+  --color-ring: var(--ring);
+  --color-brand-50: var(--brand-50);
+  --color-brand-600: var(--brand-600);
+  --color-brand-700: var(--brand-700);
+  --color-success: var(--success);
+  --color-warning: var(--warning);
+  --color-danger: var(--danger);
+  --color-danger-strong: var(--danger-strong);
+  --shadow-modal: var(--shadow-modal);
+}
+```
+
+```tsx
+import {ThemeProvider} from "@aoctech/ui"
+
+export function App() {
+  return <ThemeProvider theme="billing"><BillingApp /></ThemeProvider>
+}
+```
+
+### 2. The `@source` line
+
+Tailwind v4 only emits classes it can see. It does not scan `node_modules` by default, so without
+this the components ship with no styles at all — the single most likely thing to go wrong on first
+install.
+
+```css
+@source "../node_modules/@aoctech/ui/dist";
+```
+
+## Theme and status are separate contracts
+
+`account`, `dfe`, `wallet`, `poker` and `billing` change action, focus, surfaces and brand hue.
+The `success`, `warning` and `danger` roles remain consistent. A new product theme is added only
+after its palette and contrast states are documented in Storybook.
+
+## Density is a property of the surface
+
+Controls are touch-sized by default (44px). A dense surface opts down by setting one attribute on
+its root, and every control inside follows:
+
+```tsx
+<div data-density="compact">…</div>   {/* 32px controls */}
+```
+
+That is why `Button` has no `size="console"`: height is decided by where a button is, not by each
+call site remembering which screen it is on.
+
+## Brand colour and status colour never meet
+
+`Button variant="brand"` is the only place brand colour appears. `Badge` carries the four status
+tones — `neutral`, `positive`, `attention`, `urgent` — and they are **fixed**: never recoloured to
+match a surface's accent.
+
+The reason is legibility across the family. An operator who learns that a green badge means settled
+has to be able to read that on every screen of every CTech app; a tone that shifts with the surface
+is a tone that has to be relearned per app. It also keeps warm-brand apps honest — billing's
+terracotta sits near its own danger red, and the rule is what stops the two ever rendering on one
+component. (Separating them by role was necessary and not sufficient: billing also had to pull its
+brand chroma down until `danger` was the only saturated colour on a screen.)
+
+The four tones are the same closed set the CTech APIs emit alongside a human-readable state string,
+so a badge renders what the server said rather than a client-side mapping of an internal enum.
+
+## What's here
+
+| Component | Notes |
+|---|---|
+| `Button` | Variants `brand` · `outline` · `ghost` · `danger` · `link`. Density-aware. |
+| `Input` + `Field` | Visible labels, hint/error copy and invalid state vocabulary. |
+| `Alert` | Info, success, warning and danger feedback. |
+| `Badge` | The four status tones. Pair with a glyph — never colour alone. |
+| `Modal` | Base UI `Dialog`: real focus trap, scroll lock, restore focus, Escape. |
+| `PageHeader` | One h1, one optional line, one optional action. |
+| `EmptyState` | Title, description, optional action. |
+| `Skeleton` | Honours `prefers-reduced-motion`. |
+| `Separator` | Horizontal and vertical. |
+
+Deliberately small. Components arrive when a second app needs one, not in anticipation — the whole
+point of extracting this was to stop maintaining four copies, and a component with one consumer is
+still one copy.
+
+The extraction queue and non-domain boundaries live in [docs/component-inventory.md](docs/component-inventory.md). The source palette references and the rules for adding a product live in [docs/theme-registry.md](docs/theme-registry.md).
+
+## Storybook
+
+```sh
+npm run storybook
+```
+
+The catalogue includes a theme registry and a state-coverage page. Its toolbar switches all five
+themes and density modes, which makes visual drift visible before a component release.
+
+## Peers
+
+`react >=18`, `react-dom >=18`, `@base-ui/react >=1.7`, and Tailwind v4 in the consuming app.

package/dist/components/alert.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const alertVariants: (props?: ({
+    tone?: "danger" | "info" | "success" | "warning" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface AlertProps extends VariantProps<typeof alertVariants> {
+    title: string;
+    children?: ReactNode;
+    className?: string;
+}
+declare function Alert({ title, children, tone, className }: AlertProps): import("react").JSX.Element;
+export { Alert, alertVariants, type AlertProps };

package/dist/components/alert.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/cn";
+const alertVariants = cva("flex gap-3 rounded-lg border px-4 py-3 text-sm", {
+    variants: {
+        tone: {
+            info: "border-border bg-surface text-foreground",
+            success: "border-success/25 bg-success/10 text-success",
+            warning: "border-warning/25 bg-warning/10 text-warning",
+            danger: "border-danger/25 bg-danger/10 text-danger",
+        },
+    },
+    defaultVariants: { tone: "info" },
+});
+function Alert({ title, children, tone, className }) {
+    return (_jsx("div", { "data-slot": "alert", role: tone === "danger" ? "alert" : "status", className: cn(alertVariants({ tone }), className), children: _jsxs("div", { className: "grid gap-1", children: [_jsx("p", { className: "font-medium", children: title }), children && _jsx("div", { children: children })] }) }));
+}
+export { Alert, alertVariants };

package/dist/components/badge.d.ts

@@ -0,0 +1,19 @@
+import { useRender } from "@base-ui/react/use-render";
+import { type VariantProps } from "class-variance-authority";
+/**
+ * Status vocabulary. The four tones are the closed set every CTech API that
+ * describes a state emits, so a badge renders a server-supplied tone rather
+ * than a client-side mapping of an internal enum.
+ *
+ * These are fixed. They are never recoloured to match a surface's brand
+ * accent: an operator has to read "paid" the same way on every screen of
+ * every app, and a tone that shifts with the surface is a tone that has to be
+ * relearned. Brand lives on the button; status lives here; they never meet on
+ * one component.
+ */
+declare const badgeVariants: (props?: ({
+    tone?: "neutral" | "positive" | "attention" | "urgent" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type BadgeTone = NonNullable<VariantProps<typeof badgeVariants>["tone"]>;
+declare function Badge({ className, tone, render, ...props }: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export { Badge, badgeVariants, type BadgeTone };

package/dist/components/badge.js

@@ -0,0 +1,43 @@
+"use client";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/cn";
+/**
+ * Status vocabulary. The four tones are the closed set every CTech API that
+ * describes a state emits, so a badge renders a server-supplied tone rather
+ * than a client-side mapping of an internal enum.
+ *
+ * These are fixed. They are never recoloured to match a surface's brand
+ * accent: an operator has to read "paid" the same way on every screen of
+ * every app, and a tone that shifts with the surface is a tone that has to be
+ * relearned. Brand lives on the button; status lives here; they never meet on
+ * one component.
+ */
+const badgeVariants = cva([
+    "inline-flex w-fit shrink-0 items-center justify-center gap-1.5",
+    "rounded-full border px-2.5 py-0.5",
+    "text-xs font-medium whitespace-nowrap",
+    "[&>svg]:pointer-events-none [&>svg]:size-3",
+], {
+    variants: {
+        tone: {
+            neutral: "border-border bg-surface text-muted-foreground",
+            positive: "border-success/20 bg-success/10 text-success",
+            attention: "border-warning/20 bg-warning/10 text-warning",
+            urgent: "border-danger/20 bg-danger/10 text-danger",
+        },
+    },
+    defaultVariants: {
+        tone: "neutral",
+    },
+});
+function Badge({ className, tone, render, ...props }) {
+    return useRender({
+        defaultTagName: "span",
+        props: mergeProps({ className: cn(badgeVariants({ tone }), className) }, props),
+        render,
+        state: { slot: "badge", tone },
+    });
+}
+export { Badge, badgeVariants };

package/dist/components/button.d.ts

@@ -0,0 +1,9 @@
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import { type VariantProps } from "class-variance-authority";
+declare const buttonVariants: (props?: ({
+    variant?: "link" | "brand" | "outline" | "ghost" | "danger" | null | undefined;
+    size?: "default" | "sm" | "icon" | null | undefined;
+    block?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Button({ className, variant, size, block, nativeButton, ...props }: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>): import("react").JSX.Element;
+export { Button, buttonVariants };

package/dist/components/button.js

@@ -0,0 +1,51 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/cn";
+const buttonVariants = cva([
+    "group/button inline-flex shrink-0 items-center justify-center gap-1.5",
+    "rounded-lg border border-transparent bg-clip-padding",
+    "text-sm font-medium whitespace-nowrap",
+    "transition-colors duration-150 outline-none select-none",
+    "focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:border-ring",
+    "disabled:pointer-events-none disabled:opacity-50",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+], {
+    variants: {
+        variant: {
+            // The brand fill. This is the only place brand colour appears on a
+            // button, and status colour never appears here at all — see the
+            // package README on why the two vocabularies stay separated.
+            brand: "bg-brand-600 text-white hover:bg-brand-700",
+            outline: "border-border bg-background text-foreground hover:bg-surface",
+            ghost: "text-foreground hover:bg-surface",
+            danger: "bg-danger text-white hover:bg-danger-strong",
+            link: "text-brand-600 underline-offset-4 hover:underline",
+        },
+        size: {
+            // Height is a property of the surface, not of the call site. The shell
+            // sets `data-density` on its root and every button follows; a portal
+            // button is touch-sized and the same component in the console is not.
+            default: "h-11 px-3.5 in-data-[density=compact]:h-8 in-data-[density=compact]:px-2.5",
+            sm: "h-9 px-3 text-xs in-data-[density=compact]:h-7 in-data-[density=compact]:px-2.5",
+            icon: "size-11 in-data-[density=compact]:size-8",
+        },
+        block: {
+            true: "w-full",
+            false: "",
+        },
+    },
+    defaultVariants: {
+        variant: "brand",
+        size: "default",
+        block: false,
+    },
+});
+function Button({ className, variant, size, block, nativeButton, ...props }) {
+    return (_jsx(ButtonPrimitive, { "data-slot": "button", 
+        // A custom `render` element (a Link, say) is never a native <button>, so
+        // default nativeButton to false there instead of warning on every usage.
+        nativeButton: nativeButton ?? !props.render, className: cn(buttonVariants({ variant, size, block, className })), ...props }));
+}
+export { Button, buttonVariants };

package/dist/components/checkbox.d.ts

@@ -0,0 +1,3 @@
+import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
+declare function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props): import("react").JSX.Element;
+export { Checkbox };

package/dist/components/checkbox.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
+import { cn } from "../lib/cn";
+function Checkbox({ className, ...props }) {
+    return (_jsx(CheckboxPrimitive.Root, { "data-slot": "checkbox", className: cn("grid size-5 shrink-0 place-items-center rounded-md border border-border bg-background text-white outline-none", "transition-[background-color,border-color,box-shadow] duration-150", "data-[checked]:border-brand-600 data-[checked]:bg-brand-600", "data-[indeterminate]:border-brand-600 data-[indeterminate]:bg-brand-600", "focus-visible:ring-3 focus-visible:ring-ring/35 disabled:cursor-not-allowed disabled:opacity-50", className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { className: "grid place-items-center data-[unchecked]:hidden", keepMounted: true, children: _jsx(CheckGlyph, {}) }) }));
+}
+function CheckGlyph() {
+    return _jsx("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 2.25, "aria-hidden": true, className: "size-3.5", children: _jsx("path", { d: "m3.25 8.25 2.9 2.9 6.6-6.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+}
+export { Checkbox };

package/dist/components/date-picker.d.ts

@@ -0,0 +1,29 @@
+import type { Matcher } from "react-day-picker";
+interface CalendarProps {
+    selected?: Date;
+    onSelect?: (date: Date | undefined) => void;
+    disabled?: Matcher | Matcher[];
+    className?: string;
+}
+/** An inline, keyboard-operable calendar. Use DatePicker for a field trigger. */
+declare function Calendar({ selected, onSelect, disabled, className }: CalendarProps): import("react").JSX.Element;
+interface DatePickerProps {
+    value?: Date;
+    defaultValue?: Date;
+    onValueChange?: (date: Date | undefined) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    id?: string;
+    name?: string;
+    className?: string;
+    min?: Date;
+    max?: Date;
+    defaultOpen?: boolean;
+}
+/**
+ * A single-date field backed by an accessible Popover + Calendar. Dates remain
+ * Date objects at the API boundary so products can apply their own timezone
+ * and serialization policies explicitly.
+ */
+declare function DatePicker({ value, defaultValue, onValueChange, placeholder, disabled, id, name, className, min, max, defaultOpen, }: DatePickerProps): import("react").JSX.Element;
+export { Calendar, DatePicker, type CalendarProps, type DatePickerProps };

package/dist/components/date-picker.js

@@ -0,0 +1,56 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Popover } from "@base-ui/react/popover";
+import { ptBR } from "date-fns/locale/pt-BR";
+import { useState } from "react";
+import { DayPicker } from "react-day-picker";
+import { cn } from "../lib/cn";
+import { useThemeScope } from "./theme-provider";
+/** An inline, keyboard-operable calendar. Use DatePicker for a field trigger. */
+function Calendar({ selected, onSelect, disabled, className }) {
+    return (_jsx(DayPicker, { mode: "single", selected: selected, onSelect: onSelect, disabled: disabled, locale: ptBR, classNames: {
+            month_caption: "calendar-month-caption",
+            caption_label: "calendar-caption-label",
+            nav: "calendar-nav",
+            button_next: "calendar-button-next",
+            button_previous: "calendar-button-previous",
+            chevron: "calendar-chevron",
+            month_grid: "calendar-month-grid",
+            weekday: "calendar-weekday",
+            day: "calendar-day",
+            day_button: "calendar-day-button",
+        }, className: cn("relative min-w-[17.5rem] p-3 text-sm text-foreground", "[&_.calendar-month-caption]:flex [&_.calendar-month-caption]:h-9 [&_.calendar-month-caption]:w-full [&_.calendar-month-caption]:items-center [&_.calendar-month-caption]:justify-center [&_.calendar-month-caption]:px-10 [&_.calendar-caption-label]:truncate [&_.calendar-caption-label]:font-semibold", "[&_.calendar-nav]:pointer-events-none [&_.calendar-nav]:absolute [&_.calendar-nav]:inset-x-3 [&_.calendar-nav]:top-3 [&_.calendar-nav]:flex [&_.calendar-nav]:justify-between", "[&_.calendar-button-next]:pointer-events-auto [&_.calendar-button-next]:grid [&_.calendar-button-next]:size-9 [&_.calendar-button-next]:place-items-center [&_.calendar-button-next]:rounded-md [&_.calendar-button-next]:hover:bg-surface", "[&_.calendar-button-previous]:pointer-events-auto [&_.calendar-button-previous]:grid [&_.calendar-button-previous]:size-9 [&_.calendar-button-previous]:place-items-center [&_.calendar-button-previous]:rounded-md [&_.calendar-button-previous]:hover:bg-surface", "[&_.calendar-chevron]:size-4 [&_.calendar-chevron]:fill-none [&_.calendar-chevron]:stroke-current", "[&_.calendar-month-grid]:w-full [&_.calendar-month-grid]:border-collapse [&_.calendar-weekday]:h-9 [&_.calendar-weekday]:text-xs [&_.calendar-weekday]:font-medium [&_.calendar-weekday]:text-muted-foreground", "[&_.calendar-day]:size-9 [&_.calendar-day-button]:grid [&_.calendar-day-button]:size-9 [&_.calendar-day-button]:place-items-center [&_.calendar-day-button]:rounded-md [&_.calendar-day-button]:outline-none [&_.calendar-day-button]:hover:bg-surface [&_.calendar-day-button]:focus-visible:ring-3 [&_.calendar-day-button]:focus-visible:ring-ring/35", "[&_.calendar-day[data-selected]_button]:bg-brand-600 [&_.calendar-day[data-selected]_button]:text-white [&_.calendar-day[data-today]:not([data-selected])_button]:font-semibold [&_.calendar-day[data-today]:not([data-selected])_button]:text-brand-600", "[&_.calendar-day[data-outside]_button]:text-muted-foreground/60 [&_.calendar-day[data-disabled]_button]:cursor-not-allowed [&_.calendar-day[data-disabled]_button]:opacity-40", className) }));
+}
+/**
+ * A single-date field backed by an accessible Popover + Calendar. Dates remain
+ * Date objects at the API boundary so products can apply their own timezone
+ * and serialization policies explicitly.
+ */
+function DatePicker({ value, defaultValue, onValueChange, placeholder = "Selecionar data", disabled = false, id, name, className, min, max, defaultOpen = false, }) {
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+    const [open, setOpen] = useState(defaultOpen);
+    const { theme, density } = useThemeScope();
+    const selected = value ?? uncontrolledValue;
+    const disabledDays = [
+        ...(min ? [{ before: min }] : []),
+        ...(max ? [{ after: max }] : []),
+    ];
+    const label = selected
+        ? new Intl.DateTimeFormat("pt-BR", { day: "2-digit", month: "long", year: "numeric" }).format(selected)
+        : placeholder;
+    function selectDate(date) {
+        if (value === undefined)
+            setUncontrolledValue(date);
+        onValueChange?.(date);
+        if (date)
+            setOpen(false);
+    }
+    return (_jsxs(Popover.Root, { open: open, onOpenChange: setOpen, children: [_jsxs(Popover.Trigger, { id: id, disabled: disabled, className: cn("flex h-11 w-full items-center justify-between rounded-lg border border-border bg-background px-3 text-left text-sm outline-none", "text-foreground transition-[border-color,box-shadow] duration-150 hover:bg-surface focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/35", "disabled:cursor-not-allowed disabled:opacity-50 in-data-[density=compact]:h-8 in-data-[density=compact]:px-2.5", !selected && "text-muted-foreground", className), children: [_jsx("span", { className: "truncate", children: label }), _jsx(CalendarGlyph, {})] }), name && _jsx("input", { type: "hidden", name: name, value: selected ? formatDateValue(selected) : "" }), _jsx(Popover.Portal, { "data-ctech-theme": theme, "data-density": density, children: _jsx(Popover.Positioner, { side: "bottom", align: "start", sideOffset: 8, className: "z-50", children: _jsx(Popover.Popup, { className: "rounded-xl border border-border bg-background shadow-modal outline-none transition-[opacity,scale] duration-150 data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 motion-reduce:transition-none", children: _jsx(Calendar, { selected: selected, onSelect: selectDate, disabled: disabled || disabledDays.length > 0 ? (disabled ? true : disabledDays) : undefined }) }) }) })] }));
+}
+function formatDateValue(value) {
+    return `${value.getFullYear()}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
+}
+function CalendarGlyph() {
+    return _jsxs("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.5, "aria-hidden": true, className: "size-4 shrink-0", children: [_jsx("rect", { x: "2.5", y: "3.5", width: "11", height: "10", rx: "1.5" }), _jsx("path", { d: "M5 2v3M11 2v3M2.5 6.5h11", strokeLinecap: "round" })] });
+}
+export { Calendar, DatePicker };

package/dist/components/empty-state.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+/**
+ * An empty state is a first-run screen, not an error. `title` says what is
+ * absent, `description` says what will fill it, and `action` is the way to
+ * make that happen when there is one. A screen whose emptiness the reader
+ * cannot act on gets no action, rather than a disabled button.
+ */
+interface EmptyStateProps {
+    title: string;
+    description?: string;
+    icon?: ReactNode;
+    action?: ReactNode;
+    className?: string;
+}
+declare function EmptyState({ title, description, icon, action, className }: EmptyStateProps): import("react").JSX.Element;
+export { EmptyState, type EmptyStateProps };

package/dist/components/empty-state.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn";
+function EmptyState({ title, description, icon, action, className }) {
+    return (_jsxs("div", { "data-slot": "empty-state", className: cn("flex flex-col items-center justify-center gap-3 rounded-xl border border-dashed border-border px-6 py-14 text-center", className), children: [icon && (_jsx("div", { className: "text-muted-foreground [&_svg]:size-6", "aria-hidden": true, children: icon })), _jsx("p", { className: "text-base font-medium text-foreground", children: title }), description && (_jsx("p", { className: "max-w-[46ch] text-pretty text-sm text-muted-foreground", children: description })), action && _jsx("div", { className: "mt-2", children: action })] }));
+}
+export { EmptyState };

package/dist/components/field.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from "react";
+interface FieldProps {
+    label: string;
+    htmlFor: string;
+    hint?: string;
+    error?: string;
+    required?: boolean;
+    children: ReactNode;
+    className?: string;
+}
+declare function Field({ label, htmlFor, hint, error, required, children, className }: FieldProps): import("react").JSX.Element;
+export { Field, type FieldProps };

package/dist/components/field.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn";
+function Field({ label, htmlFor, hint, error, required, children, className }) {
+    const descriptionId = error ? `${htmlFor}-error` : hint ? `${htmlFor}-hint` : undefined;
+    return (_jsxs("div", { "data-slot": "field", className: cn("grid gap-1.5", className), children: [_jsxs("label", { htmlFor: htmlFor, className: "text-sm font-medium text-foreground", children: [label, required && _jsx("span", { className: "ml-1 text-danger", "aria-hidden": true, children: " *" })] }), children, hint && !error && _jsx("p", { id: descriptionId, className: "text-sm text-muted-foreground", children: hint }), error && _jsx("p", { id: descriptionId, className: "text-sm text-danger", role: "alert", children: error })] }));
+}
+export { Field };

package/dist/components/input.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentProps } from "react";
+declare function Input({ className, ...props }: ComponentProps<"input">): import("react").JSX.Element;
+export { Input };

package/dist/components/input.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../lib/cn";
+function Input({ className, ...props }) {
+    return (_jsx("input", { "data-slot": "input", className: cn("h-11 w-full rounded-lg border border-border bg-background px-3 text-sm text-foreground outline-none", "placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/35", "disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-danger aria-invalid:ring-3 aria-invalid:ring-danger/20", "in-data-[density=compact]:h-8 in-data-[density=compact]:px-2.5", className), ...props }));
+}
+export { Input };

package/dist/components/modal.d.ts

@@ -0,0 +1,31 @@
+import type { ReactNode } from "react";
+/**
+ * Built on Base UI's Dialog rather than a hand-rolled portal. The focus trap,
+ * the scroll lock, the Escape handling, the restore-focus-on-close and the
+ * inert-background are all behaviours it already gets right, and every one of
+ * them is a thing a bespoke implementation gets subtly wrong — most commonly
+ * a hardcoded `aria-labelledby` id that collides the moment two dialogs are
+ * mounted at once.
+ */
+declare const SIZE: {
+    readonly md: "max-w-lg";
+    readonly lg: "max-w-2xl";
+    readonly xl: "max-w-4xl";
+};
+interface ModalProps {
+    open: boolean;
+    onClose: () => void;
+    title: string;
+    /** Optional one-line framing, announced with the title by screen readers. */
+    description?: string;
+    children?: ReactNode;
+    onSubmit?: () => void;
+    submitLabel?: string;
+    cancelLabel?: string;
+    loading?: boolean;
+    danger?: boolean;
+    submitDisabled?: boolean;
+    size?: keyof typeof SIZE;
+}
+declare function Modal({ open, onClose, title, description, children, onSubmit, submitLabel, cancelLabel, loading, danger, submitDisabled, size, }: ModalProps): import("react").JSX.Element;
+export { Modal, type ModalProps };

package/dist/components/modal.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dialog } from "@base-ui/react/dialog";
+import { cn } from "../lib/cn";
+import { Button } from "./button";
+import { useThemeScope } from "./theme-provider";
+/**
+ * Built on Base UI's Dialog rather than a hand-rolled portal. The focus trap,
+ * the scroll lock, the Escape handling, the restore-focus-on-close and the
+ * inert-background are all behaviours it already gets right, and every one of
+ * them is a thing a bespoke implementation gets subtly wrong — most commonly
+ * a hardcoded `aria-labelledby` id that collides the moment two dialogs are
+ * mounted at once.
+ */
+const SIZE = {
+    md: "max-w-lg",
+    lg: "max-w-2xl",
+    xl: "max-w-4xl",
+};
+function Modal({ open, onClose, title, description, children, onSubmit, submitLabel = "Salvar", cancelLabel = "Cancelar", loading = false, danger = false, submitDisabled = false, size = "md", }) {
+    const { theme, density } = useThemeScope();
+    return (_jsx(Dialog.Root, { open: open, onOpenChange: next => !next && onClose(), children: _jsxs(Dialog.Portal, { "data-ctech-theme": theme, "data-density": density, children: [_jsx(Dialog.Backdrop, { className: cn("fixed inset-0 z-40 bg-black/40 backdrop-blur-[1px]", "transition-opacity duration-200 ease-out", "data-[ending-style]:opacity-0 data-[starting-style]:opacity-0", "motion-reduce:transition-none") }), _jsxs(Dialog.Popup, { className: cn("fixed top-1/2 left-1/2 z-50 -translate-x-1/2 -translate-y-1/2", "w-[calc(100vw-2rem)] max-h-[85vh] overflow-y-auto", "rounded-xl border border-border bg-background text-foreground shadow-modal outline-none", "transition-[opacity,translate,scale] duration-200 ease-out", "data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0", "data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0", "motion-reduce:transition-opacity motion-reduce:data-[ending-style]:scale-100 motion-reduce:data-[starting-style]:scale-100", SIZE[size]), children: [_jsxs("header", { className: "sticky top-0 z-10 flex items-start justify-between gap-4 border-b border-border bg-background px-6 py-4", children: [_jsxs("div", { className: "space-y-1", children: [_jsx(Dialog.Title, { className: "text-base font-semibold text-foreground", children: title }), description && (_jsx(Dialog.Description, { className: "text-sm text-muted-foreground", children: description }))] }), _jsx(Dialog.Close, { render: _jsx(Button, { variant: "ghost", size: "icon", "aria-label": "Fechar", className: "-mr-2 shrink-0 text-muted-foreground" }), children: _jsx(CloseGlyph, {}) })] }), children && _jsx("div", { className: "px-6 py-5", children: children }), _jsxs("footer", { className: "sticky bottom-0 flex justify-end gap-3 border-t border-border bg-surface px-6 py-4", children: [_jsx(Button, { type: "button", variant: "outline", onClick: onClose, disabled: loading, children: cancelLabel }), onSubmit && (_jsx(Button, { type: "button", variant: danger ? "danger" : "brand", onClick: onSubmit, disabled: loading || submitDisabled, children: loading ? "Aguarde…" : submitLabel }))] })] })] }) }));
+}
+function CloseGlyph() {
+    return (_jsx("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.5, "aria-hidden": true, children: _jsx("path", { d: "m4 4 8 8M12 4l-8 8", strokeLinecap: "round" }) }));
+}
+export { Modal };

package/dist/components/page-header.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from "react";
+/**
+ * One h1 per screen, optionally with a single supporting line and the screen's
+ * primary action. `eyebrow` deliberately does not exist here: a small tracked
+ * all-caps label above every heading is scaffolding, not hierarchy.
+ */
+interface PageHeaderProps {
+    title: string;
+    description?: string;
+    /** The screen's primary action. One, not a toolbar. */
+    action?: ReactNode;
+    /** Rendered above the title — a back link or breadcrumb, not a label. */
+    lead?: ReactNode;
+    className?: string;
+}
+declare function PageHeader({ title, description, action, lead, className }: PageHeaderProps): import("react").JSX.Element;
+export { PageHeader, type PageHeaderProps };

package/dist/components/page-header.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn";
+function PageHeader({ title, description, action, lead, className }) {
+    return (_jsxs("header", { "data-slot": "page-header", className: cn("space-y-2", className), children: [lead, _jsxs("div", { className: "flex flex-wrap items-start justify-between gap-x-6 gap-y-3", children: [_jsxs("div", { className: "space-y-1", children: [_jsx("h1", { className: "text-balance text-xl font-semibold tracking-[-0.01em] text-foreground in-data-[density=compact]:text-lg", children: title }), description && (_jsx("p", { className: "max-w-[65ch] text-pretty text-sm text-muted-foreground", children: description }))] }), action && _jsx("div", { className: "shrink-0", children: action })] })] }));
+}
+export { PageHeader };

package/dist/components/radio.d.ts

@@ -0,0 +1,5 @@
+import { Radio as RadioPrimitive } from "@base-ui/react/radio";
+import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group";
+declare function RadioGroup<Value>({ className, ...props }: RadioGroupPrimitive.Props<Value>): import("react").JSX.Element;
+declare function Radio<Value>({ className, ...props }: RadioPrimitive.Root.Props<Value>): import("react").JSX.Element;
+export { Radio, RadioGroup };

package/dist/components/radio.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Radio as RadioPrimitive } from "@base-ui/react/radio";
+import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group";
+import { cn } from "../lib/cn";
+function RadioGroup({ className, ...props }) {
+    return _jsx(RadioGroupPrimitive, { className: cn("grid gap-3", className), ...props });
+}
+function Radio({ className, ...props }) {
+    return (_jsx(RadioPrimitive.Root, { "data-slot": "radio", className: cn("grid size-5 shrink-0 place-items-center rounded-full border border-border bg-background outline-none", "transition-[background-color,border-color,box-shadow] duration-150", "data-[checked]:border-brand-600 focus-visible:ring-3 focus-visible:ring-ring/35", "disabled:cursor-not-allowed disabled:opacity-50", className), ...props, children: _jsx(RadioPrimitive.Indicator, { className: "size-2.5 rounded-full bg-brand-600" }) }));
+}
+export { Radio, RadioGroup };

package/dist/components/separator.d.ts

@@ -0,0 +1,3 @@
+import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
+declare function Separator({ className, orientation, ...props }: SeparatorPrimitive.Props): import("react").JSX.Element;
+export { Separator };

package/dist/components/separator.js

@@ -0,0 +1,8 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
+import { cn } from "../lib/cn";
+function Separator({ className, orientation = "horizontal", ...props }) {
+    return (_jsx(SeparatorPrimitive, { "data-slot": "separator", orientation: orientation, className: cn("shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch", className), ...props }));
+}
+export { Separator };

package/dist/components/skeleton.d.ts

@@ -0,0 +1,11 @@
+import type { ComponentProps } from "react";
+/**
+ * A skeleton, not a spinner. A spinner says "something is happening"; a
+ * skeleton says "this much is coming, and it will land here", which stops the
+ * layout jumping when it does.
+ *
+ * `motion-reduce:animate-none` is not optional: a pulsing block is exactly the
+ * kind of ambient motion prefers-reduced-motion exists to switch off.
+ */
+declare function Skeleton({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+export { Skeleton };

package/dist/components/skeleton.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../lib/cn";
+/**
+ * A skeleton, not a spinner. A spinner says "something is happening"; a
+ * skeleton says "this much is coming, and it will land here", which stops the
+ * layout jumping when it does.
+ *
+ * `motion-reduce:animate-none` is not optional: a pulsing block is exactly the
+ * kind of ambient motion prefers-reduced-motion exists to switch off.
+ */
+function Skeleton({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "skeleton", "aria-hidden": true, className: cn("animate-pulse rounded-md bg-border/60 motion-reduce:animate-none", className), ...props }));
+}
+export { Skeleton };

package/dist/components/switch.d.ts

@@ -0,0 +1,3 @@
+import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
+declare function Switch({ className, ...props }: SwitchPrimitive.Root.Props): import("react").JSX.Element;
+export { Switch };

package/dist/components/switch.js

@@ -0,0 +1,8 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
+import { cn } from "../lib/cn";
+function Switch({ className, ...props }) {
+    return (_jsx(SwitchPrimitive.Root, { "data-slot": "switch", className: cn("flex h-6 w-11 shrink-0 items-center rounded-full border border-border bg-surface p-0.5 outline-none", "transition-[background-color,border-color,box-shadow] duration-150", "data-[checked]:border-brand-600 data-[checked]:bg-brand-600", "focus-visible:ring-3 focus-visible:ring-ring/35 disabled:cursor-not-allowed disabled:opacity-50", className), ...props, children: _jsx(SwitchPrimitive.Thumb, { className: "size-5 rounded-full bg-background shadow-sm transition-transform duration-150 data-[checked]:translate-x-5 motion-reduce:transition-none" }) }));
+}
+export { Switch };

package/dist/components/theme-provider.d.ts

@@ -0,0 +1,20 @@
+import type { ComponentProps } from "react";
+type CTechTheme = "account" | "dfe" | "wallet" | "poker" | "billing";
+type Density = "comfortable" | "compact";
+interface ThemeProviderProps extends ComponentProps<"div"> {
+    theme: CTechTheme;
+    density?: Density;
+}
+interface ThemeScope {
+    theme: CTechTheme;
+    density: Density;
+}
+/** Scopes a product identity without leaking it through component props. */
+declare function ThemeProvider({ theme, density, children, ...props }: ThemeProviderProps): import("react").JSX.Element;
+/**
+ * Portalled primitives need this because CSS variables do not cross a portal
+ * boundary. Consumers normally receive it through ThemeProvider; the fallback
+ * makes an isolated primitive render with the default CTech theme as well.
+ */
+declare function useThemeScope(): ThemeScope;
+export { ThemeProvider, useThemeScope, type CTechTheme, type ThemeProviderProps, type Density };

package/dist/components/theme-provider.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+const ThemeContext = createContext(null);
+/** Scopes a product identity without leaking it through component props. */
+function ThemeProvider({ theme, density = "comfortable", children, ...props }) {
+    return (_jsx(ThemeContext.Provider, { value: { theme, density }, children: _jsx("div", { "data-ctech-theme": theme, "data-density": density, ...props, children: children }) }));
+}
+/**
+ * Portalled primitives need this because CSS variables do not cross a portal
+ * boundary. Consumers normally receive it through ThemeProvider; the fallback
+ * makes an isolated primitive render with the default CTech theme as well.
+ */
+function useThemeScope() {
+    return useContext(ThemeContext) ?? { theme: "account", density: "comfortable" };
+}
+export { ThemeProvider, useThemeScope };

package/dist/index.d.ts

@@ -0,0 +1,16 @@
+export { cn } from "./lib/cn";
+export { Badge, badgeVariants, type BadgeTone } from "./components/badge";
+export { Button, buttonVariants } from "./components/button";
+export { Alert, alertVariants, type AlertProps } from "./components/alert";
+export { Calendar, DatePicker, type CalendarProps, type DatePickerProps } from "./components/date-picker";
+export { Checkbox } from "./components/checkbox";
+export { EmptyState, type EmptyStateProps } from "./components/empty-state";
+export { Field, type FieldProps } from "./components/field";
+export { Input } from "./components/input";
+export { Modal, type ModalProps } from "./components/modal";
+export { PageHeader, type PageHeaderProps } from "./components/page-header";
+export { Separator } from "./components/separator";
+export { Skeleton } from "./components/skeleton";
+export { Radio, RadioGroup } from "./components/radio";
+export { Switch } from "./components/switch";
+export { ThemeProvider, type CTechTheme, type Density, type ThemeProviderProps } from "./components/theme-provider";

package/dist/index.js

@@ -0,0 +1,16 @@
+export { cn } from "./lib/cn";
+export { Badge, badgeVariants } from "./components/badge";
+export { Button, buttonVariants } from "./components/button";
+export { Alert, alertVariants } from "./components/alert";
+export { Calendar, DatePicker } from "./components/date-picker";
+export { Checkbox } from "./components/checkbox";
+export { EmptyState } from "./components/empty-state";
+export { Field } from "./components/field";
+export { Input } from "./components/input";
+export { Modal } from "./components/modal";
+export { PageHeader } from "./components/page-header";
+export { Separator } from "./components/separator";
+export { Skeleton } from "./components/skeleton";
+export { Radio, RadioGroup } from "./components/radio";
+export { Switch } from "./components/switch";
+export { ThemeProvider } from "./components/theme-provider";

package/dist/lib/cn.d.ts

@@ -0,0 +1,7 @@
+import { type ClassValue } from "clsx";
+/**
+ * The one class merger. Every component in this package takes a `className`
+ * and merges it here, so a consumer's override always wins over the default
+ * rather than depending on stylesheet order.
+ */
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/lib/cn.js

@@ -0,0 +1,10 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+/**
+ * The one class merger. Every component in this package takes a `className`
+ * and merges it here, so a consumer's override always wins over the default
+ * rather than depending on stylesheet order.
+ */
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}

package/dist/styles.css

@@ -0,0 +1,2 @@
+@import "./tokens.css";
+@import "./themes.css";

package/dist/themes.css

@@ -0,0 +1,65 @@
+/* Product themes. Only aliases change per product; success, warning and
+   danger deliberately remain stable across the CTech ecosystem. */
+:where([data-ctech-theme]) {
+  --color-background: oklch(1 0 0);
+  --color-surface: oklch(0.97 0.008 255);
+  --color-foreground: oklch(0.18 0.02 255);
+  --color-muted-foreground: oklch(0.38 0.025 255);
+  --color-border: oklch(0.9 0.012 255);
+  --color-success: oklch(0.5 0.13 150);
+  /* This is text as well as a fill. At this lightness it clears AA on white
+     and on its own 10% tint, unlike a decorative amber. */
+  --color-warning: oklch(0.46 0.12 70);
+  --color-danger: oklch(0.55 0.19 22);
+  --color-danger-strong: oklch(0.47 0.175 22);
+  --shadow-modal: 0 12px 36px oklch(0.18 0.02 255 / 0.22);
+}
+
+:where([data-ctech-theme="account"]) {
+  --brand-50: oklch(0.96 0.035 258);
+  --brand-600: oklch(0.55 0.22 258);
+  --brand-700: oklch(0.48 0.2 258);
+  --color-ring: var(--brand-600);
+}
+
+:where([data-ctech-theme="dfe"]) {
+  --brand-50: oklch(0.96 0.035 165);
+  --brand-600: oklch(0.44 0.1 165);
+  --brand-700: oklch(0.37 0.09 165);
+  --color-ring: var(--brand-600);
+}
+
+:where([data-ctech-theme="wallet"]) {
+  --brand-50: oklch(0.96 0.03 296);
+  --brand-600: oklch(0.54 0.2 296);
+  --brand-700: oklch(0.46 0.18 296);
+  --color-ring: var(--brand-600);
+}
+
+:where([data-ctech-theme="poker"]) {
+  --color-background: oklch(0.15 0.014 20);
+  --color-surface: oklch(0.21 0.02 20);
+  --color-foreground: oklch(0.95 0.015 20);
+  --color-muted-foreground: oklch(0.78 0.025 20);
+  --color-border: oklch(0.32 0.025 20);
+  --brand-50: oklch(0.9 0.06 27);
+  --brand-600: oklch(0.48 0.16 27);
+  --brand-700: oklch(0.4 0.14 27);
+  --color-ring: oklch(0.72 0.14 27);
+  --color-success: oklch(0.76 0.13 150);
+  --color-warning: oklch(0.79 0.12 82);
+  --color-danger: oklch(0.74 0.16 22);
+  --shadow-modal: 0 16px 40px oklch(0.04 0.01 20 / 0.56);
+}
+
+:where([data-ctech-theme="billing"]) {
+  --brand-50: oklch(0.965 0.014 45);
+  --brand-600: oklch(0.44 0.095 45);
+  --brand-700: oklch(0.38 0.085 45);
+  --color-foreground: oklch(0.22 0.014 45);
+  --color-muted-foreground: oklch(0.49 0.018 45);
+  --color-border: oklch(0.91 0.006 45);
+  --color-surface: oklch(0.976 0.004 45);
+  --color-ring: var(--brand-600);
+  --shadow-modal: 0 16px 48px -12px oklch(0.22 0.014 45 / 0.28);
+}

package/dist/tokens.css

@@ -0,0 +1,42 @@
+/* Core primitives never encode a product identity. Product themes map these
+   semantic roles to their own palettes in themes.css. */
+:where([data-ctech-theme]) {
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.5rem;
+  --space-6: 2rem;
+  --space-7: 3rem;
+  --radius-sm: 0.375rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --duration-fast: 150ms;
+  --duration-standard: 200ms;
+  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+  --type-caption: 0.75rem/1rem var(--font-sans);
+  --type-label: 0.875rem/1.25rem var(--font-sans);
+  --type-body: 1rem/1.5rem var(--font-sans);
+  --type-page-title: 1.25rem/1.5rem var(--font-sans);
+  --z-dropdown: 20;
+  --z-sticky: 30;
+  --z-backdrop: 40;
+  --z-modal: 50;
+  --z-toast: 60;
+}
+
+/* Tailwind v4 consumers map these raw variables in `@theme inline`. Keeping
+   aliases here also lets non-Tailwind surfaces consume the same contract. */
+:where([data-ctech-theme]) {
+  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --background: var(--color-background);
+  --surface: var(--color-surface);
+  --foreground: var(--color-foreground);
+  --muted-foreground: var(--color-muted-foreground);
+  --border: var(--color-border);
+  --ring: var(--color-ring);
+  --success: var(--color-success);
+  --warning: var(--color-warning);
+  --danger: var(--color-danger);
+  --danger-strong: var(--color-danger-strong);
+}

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@aoctech/ui",
+  "version": "0.1.0",
+  "description": "Shared CTech UI primitives: Base UI behaviour, Tailwind classes, no colours of its own. Themed entirely by the consuming app's CSS variables.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/artur-oliveira/ctech-ui"
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./themes.css": "./dist/themes.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@base-ui/react": ">=1.7.0",
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "dependencies": {
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "react-day-picker": "^9.14.0",
+    "tailwind-merge": "^3.6.0"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json && node scripts/copy-styles.mjs",
+    "test": "npm run build",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "keywords": [
+    "react",
+    "tailwind",
+    "design-system",
+    "ctech"
+  ],
+  "author": "Artur Oliveira",
+  "license": "MIT",
+  "devDependencies": {
+    "@base-ui/react": "^1.7.0",
+    "@storybook/react-vite": "^10.5.8",
+    "@tailwindcss/vite": "^4.3.3",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "typescript": "^6.0.3",
+    "vite": "^8.2.1"
+  },
+  "engines": {
+    "node": ">=24"
+  }
+}