@equal-experts/kuat-react 0.4.2 → 0.5.0

package/README.md

@@ -1,24 +1,24 @@
 # @equal-experts/kuat-react
 
-Custom React components and blocks for the Kuat Design System.
+React components and blocks for the Kuat Design System: **localized primitives** (forms, actions, feedback) and **composed blocks** (header, carousel, logo lockup, etc.). Use **`@equal-experts/kuat-core`** for tokens and the **shadcn CLI** only for UI that Kuat does not ship (for example Dialog, DropdownMenu, Tabs).
+
+**When to import from here vs shadcn:** [Choosing components](https://github.com/equalexperts/kuat-mono/blob/master/kuat-docs/setup/choosing-components.md) · [Public API inventory](https://github.com/equalexperts/kuat-mono/blob/master/kuat-docs/setup/public-api-inventory.md)
 
 ---
 
 ## Architecture
 
-This package provides **custom components** and **blocks** that are unique to Kuat. It also provides a localized **Button** component. For other UI components (e.g. Dialog), install them via shadcn CLI with kuat-core theming.
-
 ```
 ┌─────────────────────────────────────────────────────┐
 │  Your Application                                   │
 ├─────────────────────────────────────────────────────┤
-│  Kuat Blocks (from this package)                    │
+│  Kuat blocks (KuatHeader, KuatCarousel, …)         │  ← This package
 ├─────────────────────────────────────────────────────┤
-│  Kuat Components (from this package)                │
+│  Kuat primitives (Button, Field, Select, …)        │  ← This package
 ├─────────────────────────────────────────────────────┤
-│  shadcn Components (installed directly)             │
+│  shadcn-only components (Dialog, DropdownMenu, …)     │  ← Installed in your app
 ├─────────────────────────────────────────────────────┤
-│  @equal-experts/kuat-core (design tokens)           │
+│  @equal-experts/kuat-core                            │
 └─────────────────────────────────────────────────────┘
 ```
 
@@ -27,66 +27,65 @@ This package provides **custom components** and **blocks** that are unique to Ku
 ## Installation
 
 ```bash
-# Using pnpm (recommended)
-pnpm add @equal-experts/kuat-react
+pnpm add @equal-experts/kuat-core @equal-experts/kuat-react
+```
 
-# Using npm
-npm install @equal-experts/kuat-react
+You need **both** packages: core supplies CSS variables and the Tailwind preset; this package supplies components.
 
-# Using yarn
-yarn add @equal-experts/kuat-react
-```
+### Peer dependencies
 
-### Peer Dependencies
+`react` and `react-dom` are required. Radix UI and other peers are listed in this package’s `package.json` under `peerDependencies`—install the primitives that match the components you use.
 
 ```bash
-pnpm add react react-dom @radix-ui/react-slot
+pnpm add react react-dom
+# Add @radix-ui/* and lucide-react as needed for your components — see peerDependencies
 ```
 
 ---
 
-## What's Included
-
-### Custom Components
+## What’s included
 
-Components unique to Kuat, not available in shadcn:
+### Utilities
 
-| Component | Description |
-|-----------|-------------|
-| `Button` | Primary actions with variant (primary, secondary, outline, ghost, ghost-muted, destructive) and color |
-| `ButtonGroup` | Groups buttons together with proper styling |
-| `ButtonGroupText` | Text element within a button group |
-| `ButtonGroupSeparator` | Separator between button group items |
+| Export | Description |
+|--------|-------------|
+| `cn` | `clsx` + `tailwind-merge` helper |
 
-### Blocks (Coming Soon)
+### Blocks and layout
 
-Pre-built compositions for common patterns:
+| Area | Examples |
+|------|----------|
+| Header / brand | `KuatHeader`, `EELogo`, `EELogoIcon` |
+| Carousel | `KuatCarousel`, `KuatCarouselContent`, `KuatCarouselItem`, `KuatCarouselPrevious`, `KuatCarouselNext`, `useKuatCarousel` |
+| Logo lockup | `KuatLogoLockup` |
+| Progress | `KuatRadialProgress` |
+| Cards | `ContentCard` |
 
-| Block | Description |
-|-------|-------------|
-| `KuatHeader` | Brand header with logo, navigation, actions |
-| `KuatFooter` | Brand footer with links and legal |
-| `KuatSearchPattern` | Search input with suggestions |
+### Form and actions
 
-### Utilities
+`Button`, `ButtonGroup`, `ButtonGroupText`, `ButtonGroupSeparator`, `Badge`, `Input`, `Textarea`, `Field` (+ subcomponents), `Select` / `KuatSelect` (+ Select primitives), `Checkbox` / `CheckboxField`, `RadioGroup` / `RadioField`, `Switch` / `SwitchField`, `Toggle`, `ToggleGroup`.
 
-| Utility | Description |
-|---------|-------------|
-| `cn()` | Class name merger using clsx + tailwind-merge |
+### Content and navigation
 
----
+`Accordion`, `AlertDialog` (+ primitives), `Breadcrumb`.
 
-## Recommended Setup
+Interactive API details live in **Storybook** in this repo (`apps/storybook-react`).
 
-For the best experience, combine this package with kuat-core and shadcn:
+### Tree-shakable subpath imports
 
-### Step 1: Install Dependencies
+`package.json` exposes subpaths such as `./button`, `./field`, `./switch`, `./kuat-radial-progress`, etc. Example:
 
-```bash
-pnpm add @equal-experts/kuat-core @equal-experts/kuat-react
+```tsx
+import { KuatRadialProgress } from '@equal-experts/kuat-react/kuat-radial-progress';
 ```
 
-### Step 2: Configure Tailwind
+See [public-api-inventory.md](https://github.com/equalexperts/kuat-mono/blob/master/kuat-docs/setup/public-api-inventory.md) for the full subpath list.
+
+---
+
+## Recommended setup
+
+### 1. Tailwind
 
 ```typescript
 // tailwind.config.ts
@@ -102,36 +101,33 @@ export default {
 } satisfies Config;
 ```
 
-### Step 3: Import Styles
+### 2. Design tokens (once per app)
 
 ```typescript
-// main.tsx – design tokens (required once per app)
+// main.tsx
 import '@equal-experts/kuat-core/variables.css';
 ```
 
-Each Kuat component (e.g. `KuatRadialProgress`) includes its own CSS when you import it. To load only a specific component and its CSS, use a subpath: `import { KuatRadialProgress } from '@equal-experts/kuat-react/kuat-radial-progress'`.
-
-### Step 4: Install shadcn Components
+### 3. shadcn for gaps only
 
 ```bash
 npx shadcn@latest init
-npx shadcn@latest add button dialog dropdown-menu
+npx shadcn@latest add dialog dropdown-menu   # examples — skip `button` if you use Kuat Button
 ```
 
-### Step 5: Use Components Together
+### 4. Use Kuat + shadcn together
 
 ```tsx
-// Kuat custom components from this package
-import { ButtonGroup, ButtonGroupText, Button } from '@equal-experts/kuat-react';
+import { Button, ButtonGroup, Field } from '@equal-experts/kuat-react';
+import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/dialog';
 
-// Other shadcn components from your local installation if needed
-
-function Example() {
+export function Example() {
   return (
     <ButtonGroup>
-      <Button variant="outline">Edit</Button>
-      <Button variant="outline">Save</Button>
-      <Button variant="destructive">Delete</Button>
+      <DialogTrigger asChild>
+        <Button variant="outline">Open</Button>
+      </DialogTrigger>
+      <Button>Save</Button>
     </ButtonGroup>
   );
 }
@@ -139,94 +135,61 @@ function Example() {
 
 ---
 
-## Component Examples
+## Component examples
 
 ### ButtonGroup
 
-Groups buttons together with seamless borders:
-
 ```tsx
-import { ButtonGroup, Button } from '@equal-experts/kuat-react';
+import { ButtonGroup, ButtonGroupText, Button } from '@equal-experts/kuat-react';
 
-// Horizontal (default)
 <ButtonGroup>
   <Button variant="outline">Left</Button>
-  <Button variant="outline">Center</Button>
   <Button variant="outline">Right</Button>
 </ButtonGroup>
 
-// Vertical
 <ButtonGroup orientation="vertical">
   <Button variant="outline">Top</Button>
-  <Button variant="outline">Middle</Button>
   <Button variant="outline">Bottom</Button>
 </ButtonGroup>
 
-// With text label
 <ButtonGroup>
   <ButtonGroupText>Filter:</ButtonGroupText>
   <Button variant="outline">All</Button>
-  <Button variant="outline">Active</Button>
-  <Button variant="outline">Completed</Button>
 </ButtonGroup>
 ```
 
-### cn() Utility
-
-Merge class names with Tailwind conflict resolution:
+### `cn()` utility
 
 ```tsx
 import { cn } from '@equal-experts/kuat-react';
 
-function MyComponent({ className, ...props }) {
-  return (
-    <div
-      className={cn(
-        'bg-background text-foreground p-4',
-        className
-      )}
-      {...props}
-    />
-  );
+export function Box({ className, ...props }: React.ComponentProps<'div'>) {
+  return <div className={cn('bg-background p-4', className)} {...props} />;
 }
 ```
 
 ---
 
-## Migration Guide
+## Migration (legacy projects)
 
-If you were importing standard components from this package, migrate to direct shadcn installation:
+Older docs suggested installing **all** primitives via shadcn. Kuat now ships many components from this package.
 
-### Before (Deprecated)
+**Prefer**
 
-```tsx
-import { Button, Dialog } from '@equal-experts/kuat-react';
-```
-
-### After (Recommended)
-
-```tsx
-// Standard components from your local shadcn installation
-import { Button } from '@/components/ui/button';
-import { Dialog } from '@/components/ui/dialog';
+- `import { Button, Badge, Field, … } from '@equal-experts/kuat-react'` for published primitives.
+- `import { … } from '@/components/ui/dialog'` (etc.) only for **shadcn-only** pieces.
 
-// Kuat-specific components from this package (including Badge)
-import { ButtonGroup, Badge } from '@equal-experts/kuat-react';
-```
+**Dialog** is a typical shadcn-only import; **Button** should come from Kuat when you adopt the design system.
 
-### Migration Steps
+Steps:
 
-1. Ensure `@equal-experts/kuat-core` is installed
-2. Initialize shadcn: `npx shadcn@latest init`
-3. Install needed components: `npx shadcn@latest add button dialog`
-4. Update imports to use local components
-5. Keep imports for Kuat-specific components (Button, ButtonGroup, Badge, etc.)
+1. Keep `@equal-experts/kuat-core` and add or update `@equal-experts/kuat-react`.
+2. Replace duplicate shadcn copies of Kuat primitives with imports from this package where possible.
+3. Reserve `components/ui/` for components Kuat does not publish.
 
 ---
 
-## TypeScript Support
-
-All components are fully typed:
+## TypeScript
 
 ```tsx
 import { ButtonGroup } from '@equal-experts/kuat-react';
@@ -237,25 +200,22 @@ type ButtonGroupProps = ComponentProps<typeof ButtonGroup>;
 
 ---
 
-## Dark Mode
+## Dark mode
 
-Dark mode is supported via the `.dark` class on your root element:
+Use the `.dark` class on the document root (or an ancestor). Tokens come from `kuat-core`.
 
 ```tsx
 <html className="dark">
-  <body>
-    <App />
-  </body>
+  <body>{/* … */}</body>
 </html>
 ```
 
-Components automatically adapt when using kuat-core design tokens.
-
 ---
 
-## Related Documentation
+## Related documentation
 
-- [Consumer Setup Guide](https://github.com/equalexperts/kuat-mono/blob/master/kuat-docs/setup/consumer-setup.md)
-- [kuat-core Integration](https://github.com/equalexperts/kuat-mono/blob/master/kuat-docs/setup/kuat-core-integration.md)
-- [Component Patterns](https://github.com/equalexperts/kuat-mono/blob/master/kuat-docs/rules/components/patterns.md)
-- [shadcn/ui Documentation](https://ui.shadcn.com)
+- [Consumer setup](https://github.com/equalexperts/kuat-mono/blob/master/kuat-docs/setup/consumer-setup.md)
+- [Choosing components](https://github.com/equalexperts/kuat-mono/blob/master/kuat-docs/setup/choosing-components.md)
+- [kuat-core integration](https://github.com/equalexperts/kuat-mono/blob/master/kuat-docs/setup/kuat-core-integration.md)
+- [Component patterns (contributors)](https://github.com/equalexperts/kuat-mono/blob/master/kuat-docs/rules/components/patterns.md)
+- [shadcn/ui](https://ui.shadcn.com)

package/dist/checkbox-field-Bslh9sHw.js

@@ -0,0 +1,65 @@
+import { jsx as e, jsxs as o } from "react/jsx-runtime";
+import * as d from "react";
+import { c as h } from "./utils-DLUjLwnh.js";
+import { F as C, e as F, a as u, i as y, b as E } from "./field-DRLopwY4.js";
+import * as s from "@radix-ui/react-checkbox";
+import { Check as I, Minus as R } from "lucide-react";
+const m = d.forwardRef(({ className: a, ...i }, c) => /* @__PURE__ */ e(
+  s.Root,
+  {
+    ref: c,
+    className: h("checkbox", a),
+    "data-slot": "checkbox",
+    ...i,
+    children: /* @__PURE__ */ o(s.Indicator, { className: "checkbox__indicator", children: [
+      /* @__PURE__ */ e(I, { className: "checkbox__icon checkbox__icon--check", "aria-hidden": !0 }),
+      /* @__PURE__ */ e(R, { className: "checkbox__icon checkbox__icon--indeterminate", "aria-hidden": !0 })
+    ] })
+  }
+));
+m.displayName = s.Root.displayName;
+const O = ["plain", "card"], S = ["inline", "block"], v = d.forwardRef(
+  ({
+    className: a,
+    label: i,
+    secondaryText: c,
+    appearance: b = "plain",
+    layout: k = "inline",
+    flipped: x = !1,
+    id: f,
+    disabled: n,
+    ...l
+  }, _) => {
+    const p = d.useId(), r = f ?? p, t = c != null, N = l["aria-invalid"] === !0 || l["aria-invalid"] === "true";
+    return /* @__PURE__ */ e(
+      C,
+      {
+        className: h(
+          "checkbox-field",
+          `checkbox-field--appearance-${b}`,
+          `checkbox-field--layout-${k}`,
+          t && "checkbox-field--has-secondary",
+          x && "checkbox-field--flipped",
+          n && "checkbox-field--disabled",
+          N && "checkbox-field--invalid",
+          a
+        ),
+        "data-slot": "checkbox-field",
+        children: /* @__PURE__ */ o(F, { className: "checkbox-field__label", htmlFor: r, children: [
+          /* @__PURE__ */ e("span", { className: "checkbox-field__checkbox-wrap", children: /* @__PURE__ */ e(m, { ref: _, id: r, disabled: n, ...l }) }),
+          /* @__PURE__ */ o(u, { className: "checkbox-field__text", children: [
+            /* @__PURE__ */ e(y, { className: "checkbox-field__primary", children: i }),
+            t ? /* @__PURE__ */ e(E, { className: "checkbox-field__secondary", children: c }) : null
+          ] })
+        ] })
+      }
+    );
+  }
+);
+v.displayName = "CheckboxField";
+export {
+  m as C,
+  v as a,
+  O as b,
+  S as c
+};

package/dist/checkbox-field.css

@@ -0,0 +1 @@
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-duration:initial;--tw-ease:initial}}}.checkbox{transition-property:border-color,box-shadow,opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4,0,.2,1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));--tw-duration:.15s;--tw-ease:var(--ease-in-out,cubic-bezier(.4,0,.2,1));transition-duration:.15s;transition-timing-function:var(--ease-in-out,cubic-bezier(.4,0,.2,1));--tw-outline-style:none;width:calc(var(--spacing,.25rem)*4);height:calc(var(--spacing,.25rem)*4);border-radius:calc(var(--radius) - 4px);border:1px solid var(--slate-300);background:var(--input);box-shadow:var(--shadow-xs);outline-style:none;flex-shrink:0;justify-content:center;align-items:center;display:flex}.checkbox:focus-visible{border-color:var(--slate-400);box-shadow:0 0 0 3px var(--ring)}.checkbox[data-state=checked],.checkbox[data-state=indeterminate]{border-color:var(--primary);background:var(--primary);color:var(--primary-foreground);box-shadow:var(--shadow-xs)}.checkbox[data-state=checked]:focus-visible,.checkbox[data-state=indeterminate]:focus-visible{border-color:var(--primary);box-shadow:0 0 0 3px var(--ring)}.checkbox[aria-invalid=true]{border-color:var(--destructive)}.checkbox[aria-invalid=true]:focus-visible{border-color:var(--destructive);box-shadow:0 0 0 3px var(--red-300)}.checkbox[data-state=checked][aria-invalid=true],.checkbox[data-state=indeterminate][aria-invalid=true]{border-color:var(--destructive);background:var(--destructive);color:var(--destructive-foreground)}.checkbox[data-state=checked][aria-invalid=true]:focus-visible,.checkbox[data-state=indeterminate][aria-invalid=true]:focus-visible{box-shadow:0 0 0 3px var(--red-300)}.checkbox:disabled{cursor:not-allowed;opacity:.3}.checkbox__indicator{color:currentColor;justify-content:center;align-items:center;display:flex}.checkbox__icon{width:calc(var(--spacing,.25rem)*3.5);height:calc(var(--spacing,.25rem)*3.5);stroke-width:3px}.checkbox:not([data-state=indeterminate]) .checkbox__icon--indeterminate,.checkbox[data-state=indeterminate] .checkbox__icon--check{display:none}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-leading:initial;--tw-tracking:initial}}}.checkbox-field{width:100%;min-width:calc(var(--spacing,.25rem)*0)}.checkbox-field__label{cursor:pointer;align-items:flex-start;gap:calc(var(--spacing,.25rem)*2);-webkit-user-select:none;user-select:none;display:flex}.checkbox-field--appearance-card .checkbox-field__label{border-style:var(--tw-border-style);--tw-border-style:solid;border-style:solid;border-width:1px;border-color:var(--border);background-color:var(--card);padding-inline:calc(var(--spacing,.25rem)*3);padding-block:calc(var(--spacing,.25rem)*2);border-radius:10px}.checkbox-field--disabled .checkbox-field__label{cursor:not-allowed;opacity:.3}.checkbox-field--invalid .checkbox-field__primary{color:var(--destructive)}.checkbox-field--appearance-card.checkbox-field--invalid .checkbox-field__label{border-color:var(--destructive)}.checkbox-field--flipped .checkbox-field__label{flex-direction:row-reverse}.checkbox-field__checkbox-wrap{padding-top:calc(var(--spacing,.25rem)*.5);flex-shrink:0;justify-content:center;align-items:center;display:flex}.checkbox-field__text{min-height:1px;min-width:calc(var(--spacing,.25rem)*0);align-items:flex-start;gap:calc(var(--spacing,.25rem)*0);text-align:left;flex-direction:column;flex:1;display:flex}.checkbox-field--layout-inline .checkbox-field__text{flex:none}.checkbox-field--layout-inline:not(.checkbox-field--has-secondary) .checkbox-field__primary{white-space:nowrap;flex-shrink:0}.checkbox-field__primary{width:100%;font-family:var(--font-sans,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25/.875)));--tw-leading:1.5;--tw-tracking:var(--tracking-normal);letter-spacing:var(--tracking-normal);color:var(--foreground);line-height:1.5}.checkbox-field__secondary{width:100%;font-family:var(--font-sans,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1/.75)));--tw-leading:calc(var(--spacing,.25rem)*4);line-height:calc(var(--spacing,.25rem)*4);--tw-tracking:calc(var(--tracking-normal) + .025em);letter-spacing:calc(var(--tracking-normal) + .025em);color:var(--muted-foreground)}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}

package/dist/checkbox.d.ts

@@ -0,0 +1,3 @@
+export { cn } from './lib/utils';
+export { Checkbox, CheckboxField, CHECKBOX_FIELD_APPEARANCES, CHECKBOX_FIELD_LAYOUTS, } from './components/ui/checkbox';
+export type { CheckboxProps, CheckboxFieldAppearance, CheckboxFieldLayout, CheckboxFieldProps, } from './components/ui/checkbox';

package/dist/checkbox.js

@@ -0,0 +1,10 @@
+import { c as E } from "./utils-DLUjLwnh.js";
+/* empty css                */
+import { b as e, c as r, C as s, a as x } from "./checkbox-field-Bslh9sHw.js";
+export {
+  e as CHECKBOX_FIELD_APPEARANCES,
+  r as CHECKBOX_FIELD_LAYOUTS,
+  s as Checkbox,
+  x as CheckboxField,
+  E as cn
+};

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

@@ -0,0 +1,23 @@
+import { Checkbox } from './checkbox';
+import * as React from "react";
+export declare const CHECKBOX_FIELD_APPEARANCES: readonly ["plain", "card"];
+export type CheckboxFieldAppearance = (typeof CHECKBOX_FIELD_APPEARANCES)[number];
+export declare const CHECKBOX_FIELD_LAYOUTS: readonly ["inline", "block"];
+export type CheckboxFieldLayout = (typeof CHECKBOX_FIELD_LAYOUTS)[number];
+/** @deprecated Prefer composing `Field` + `Checkbox` for new form layouts. */
+export interface CheckboxFieldProps extends Omit<React.ComponentPropsWithoutRef<typeof Checkbox>, "id" | "children"> {
+    /** Primary label (always shown). */
+    label: React.ReactNode;
+    /** Optional secondary line (12px muted); works for both plain and card. */
+    secondaryText?: React.ReactNode;
+    /** `plain` — no border/padding; `card` — bordered padded container (Figma Rich). */
+    appearance?: CheckboxFieldAppearance;
+    /** `inline` — compact label; `block` — label row can grow (Figma Checkbox Group). */
+    layout?: CheckboxFieldLayout;
+    /** Place checkbox on the right of the text block. */
+    flipped?: boolean;
+    id?: string;
+}
+/** @deprecated Prefer composing `Field` + `Checkbox` for new form layouts. */
+declare const CheckboxField: React.ForwardRefExoticComponent<CheckboxFieldProps & React.RefAttributes<HTMLButtonElement>>;
+export { CheckboxField };

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

@@ -0,0 +1,5 @@
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export type CheckboxProps = React.ComponentPropsWithoutRef<typeof Checkbox>;
+export { Checkbox };

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

@@ -0,0 +1,4 @@
+export { Checkbox } from './checkbox';
+export type { CheckboxProps } from './checkbox';
+export { CheckboxField, CHECKBOX_FIELD_APPEARANCES, CHECKBOX_FIELD_LAYOUTS, } from './checkbox-field';
+export type { CheckboxFieldAppearance, CheckboxFieldLayout, CheckboxFieldProps, } from './checkbox-field';

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

@@ -0,0 +1,28 @@
+import * as React from "react";
+export declare const FIELD_ORIENTATIONS: readonly ["responsive", "vertical", "horizontal"];
+export type FieldOrientation = (typeof FIELD_ORIENTATIONS)[number];
+export interface FieldProps extends React.HTMLAttributes<HTMLDivElement> {
+    orientation?: FieldOrientation;
+}
+declare const Field: React.ForwardRefExoticComponent<FieldProps & React.RefAttributes<HTMLDivElement>>;
+declare const FieldSet: React.ForwardRefExoticComponent<React.FieldsetHTMLAttributes<HTMLFieldSetElement> & React.RefAttributes<HTMLFieldSetElement>>;
+export type FieldLegendVariant = "legend" | "label";
+export interface FieldLegendProps extends React.HTMLAttributes<HTMLLegendElement> {
+    variant?: FieldLegendVariant;
+}
+declare const FieldLegend: React.ForwardRefExoticComponent<FieldLegendProps & React.RefAttributes<HTMLLegendElement>>;
+declare const FieldGroup: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const FieldLabel: React.ForwardRefExoticComponent<React.LabelHTMLAttributes<HTMLLabelElement> & React.RefAttributes<HTMLLabelElement>>;
+declare const FieldContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const FieldTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const FieldDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const FieldSeparator: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+type FieldIssue = {
+    message?: string;
+};
+export interface FieldErrorProps extends React.HTMLAttributes<HTMLDivElement> {
+    errors?: Array<FieldIssue | undefined> | FieldIssue;
+    issues?: Array<FieldIssue | undefined>;
+}
+declare const FieldError: React.ForwardRefExoticComponent<FieldErrorProps & React.RefAttributes<HTMLDivElement>>;
+export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, };

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

@@ -0,0 +1,2 @@
+export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, FIELD_ORIENTATIONS, } from './field';
+export type { FieldErrorProps, FieldLegendProps, FieldLegendVariant, FieldOrientation, FieldProps, } from './field';

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

@@ -0,0 +1,2 @@
+export { Input, INPUT_SIZES } from './input';
+export type { InputProps, InputSize } from './input';

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

@@ -0,0 +1,20 @@
+import * as React from "react";
+export declare const INPUT_SIZES: readonly ["regular", "large", "small", "mini"];
+export type InputSize = (typeof INPUT_SIZES)[number];
+/**
+ * Shared props for the Kuat `Input` wrapper + native field.
+ *
+ * For `type="file"`, avoid treating the control like a text field: browsers restrict the
+ * `value`, and React controlled file inputs are unusual—prefer an uncontrolled input with
+ * `ref` and `onChange` (see [shadcn file example](https://ui.shadcn.com/docs/components/radix/input#file)).
+ */
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
+    /** Visual size; maps to `input--size-*` (not the HTML `size` attribute). */
+    size?: InputSize;
+    /** Optional content before the field (icon, text, checkbox, etc.). */
+    leftDecoration?: React.ReactNode;
+    /** Optional content after the field (suffix text, button, icon, etc.). */
+    rightDecoration?: React.ReactNode;
+}
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export { Input };

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

@@ -0,0 +1,4 @@
+export { RadioGroup, RadioGroupItem } from './radio';
+export type { RadioGroupProps, RadioGroupItemProps } from './radio';
+export { RadioField, RADIO_FIELD_APPEARANCES, RADIO_FIELD_LAYOUTS, } from './radio-field';
+export type { RadioFieldAppearance, RadioFieldLayout, RadioFieldProps, } from './radio-field';

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

@@ -0,0 +1,25 @@
+import { RadioGroupItem } from './radio';
+import * as React from "react";
+export declare const RADIO_FIELD_APPEARANCES: readonly ["plain", "card"];
+export type RadioFieldAppearance = (typeof RADIO_FIELD_APPEARANCES)[number];
+export declare const RADIO_FIELD_LAYOUTS: readonly ["inline", "block"];
+export type RadioFieldLayout = (typeof RADIO_FIELD_LAYOUTS)[number];
+/** @deprecated Prefer composing `Field` + `RadioGroupItem` for new form layouts. */
+export interface RadioFieldProps extends Omit<React.ComponentPropsWithoutRef<typeof RadioGroupItem>, "id" | "children"> {
+    /** Primary label (always shown). */
+    label: React.ReactNode;
+    /** Optional secondary line (12px muted); works for both plain and card. */
+    secondaryText?: React.ReactNode;
+    /** `plain` — no border/padding; `card` — bordered padded container (Figma Rich). */
+    appearance?: RadioFieldAppearance;
+    /** `inline` — compact label; `block` — label row can grow (Figma Radio Group). */
+    layout?: RadioFieldLayout;
+    /** Place radio on the right of the text block. */
+    flipped?: boolean;
+    id?: string;
+    /** Required — must match a unique option in the parent `RadioGroup`. */
+    value: string;
+}
+/** @deprecated Prefer composing `Field` + `RadioGroupItem` for new form layouts. */
+declare const RadioField: React.ForwardRefExoticComponent<RadioFieldProps & React.RefAttributes<HTMLButtonElement>>;
+export { RadioField };

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

@@ -0,0 +1,7 @@
+import * as React from "react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+declare const RadioGroup: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const RadioGroupItem: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export type RadioGroupProps = React.ComponentPropsWithoutRef<typeof RadioGroup>;
+export type RadioGroupItemProps = React.ComponentPropsWithoutRef<typeof RadioGroupItem>;
+export { RadioGroup, RadioGroupItem };

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

@@ -0,0 +1,19 @@
+import type * as React from "react";
+export declare const SELECT_SIZES: readonly ["regular", "large", "small", "mini"];
+export type SelectSize = (typeof SELECT_SIZES)[number];
+export declare const SELECT_LINES: readonly ["single", "double"];
+export type SelectLines = (typeof SELECT_LINES)[number];
+export interface SelectItemOption {
+    value: string;
+    label: React.ReactNode;
+    description?: React.ReactNode;
+    disabled?: boolean;
+    prepend?: React.ReactNode;
+    decoration?: React.ReactNode;
+}
+export interface SelectItemGroup {
+    label: React.ReactNode;
+    items: SelectItemOption[];
+}
+export type SelectItems = Array<SelectItemOption | SelectItemGroup>;
+export declare function isSelectItemGroup(item: SelectItemOption | SelectItemGroup): item is SelectItemGroup;

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

@@ -0,0 +1,3 @@
+export { KuatSelect, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SELECT_LINES, SELECT_SIZES, } from './select';
+export type { KuatSelectProps, SelectContentProps, SelectItemProps, SelectLabelProps, SelectProps, SelectSeparatorProps, SelectTriggerProps, SelectValueProps, } from './select';
+export type { SelectItemGroup, SelectItemOption, SelectItems, SelectLines, SelectSize, } from './constants';