@xemahq/ui-kernel 0.9.0 → 0.9.2

package/src/ui/capture/schema-field-input.tsx

@@ -6,8 +6,14 @@
 // items) composites. `reference` is source-agnostic here: it defaults to a text
 // input, but a caller can inject a picker via `renderReference` (that is the
 // seam app-forge uses to plug its record-backed `ReferenceSelect`).
+//
+// This is the ONE schema→input renderer in the tree. The connector-specific
+// `CredentialFormRenderer` was folded in here: a DECLARED-secret field
+// (`spec.isSecret`) renders the write-only masked input, and `email`/`url`/
+// `json` are ordinary capture field types. Secrecy is never inferred from the
+// field type.
 // ═══════════════════════════════════════════════════════════════════════════
-import { Plus, Trash2 } from 'lucide-react';
+import { Eye, EyeOff, Plus, Trash2 } from 'lucide-react';
 import { useCallback, useRef, useState, type ReactNode } from 'react';
 
 import { cn } from '../cn';
@@ -17,7 +23,7 @@ import { Input } from '../primitives/input';
 import { Label } from '../primitives/label';
 import { Textarea } from '../primitives/textarea';
 
-import { CaptureFieldType, type CaptureFieldSpec, type CaptureValues } from './field-spec';
+import { applyCaptureTransform, CaptureFieldType, type CaptureFieldSpec, type CaptureValues } from './field-spec';
 import { asString } from './value-format';
 
 const SELECT_CLASS =
@@ -44,42 +50,78 @@ export interface SchemaFieldInputProps {
   readonly renderReference?: RenderReference;
 }
 
+/** Native `type` for the single-line text-ish capture types. */
+function nativeInputType(type: CaptureFieldSpec['type']): 'text' | 'email' | 'url' {
+  switch (type) {
+    case CaptureFieldType.Email:
+      return 'email';
+    case CaptureFieldType.Url:
+      return 'url';
+    default:
+      return 'text';
+  }
+}
+
 export function SchemaFieldInput(props: SchemaFieldInputProps) {
   const { field, value, onChange, disabled, path, renderReference } = props;
   const inputId = `field-${path}`;
 
+  // The ONE place a captured string is normalized. Composites (object/list)
+  // emit records/arrays and pass through untouched.
+  const emit = (next: unknown): void =>
+    onChange(typeof next === 'string' ? applyCaptureTransform(next, field.transform) : next);
+
+  // DECLARED secrecy wins over the field type: a secret is always write-only
+  // and masked, whatever shape it has. Never inferred from `type`.
+  if (field.isSecret === true) {
+    return <SecretFieldInput field={field} value={value} onChange={emit} disabled={disabled} inputId={inputId} />;
+  }
+
   switch (field.type) {
     case CaptureFieldType.Text:
-      return <Textarea id={inputId} value={asString(value)} onChange={(e) => onChange(e.target.value)} disabled={disabled} rows={4} placeholder={field.placeholder} />;
+      return <Textarea id={inputId} value={asString(value)} onChange={(e) => emit(e.target.value)} disabled={disabled} rows={4} placeholder={field.placeholder} />;
+    case CaptureFieldType.Json:
+      return (
+        <Textarea
+          id={inputId}
+          value={asString(value)}
+          onChange={(e) => emit(e.target.value)}
+          disabled={disabled}
+          rows={6}
+          spellCheck={false}
+          className="min-h-[120px] font-mono"
+          placeholder={field.placeholder}
+        />
+      );
     case CaptureFieldType.Number:
       return (
         <Input
           id={inputId}
           type="number"
           value={asString(value)}
-          onChange={(e) => onChange(e.target.value === '' ? '' : Number(e.target.value))}
+          onChange={(e) => emit(e.target.value === '' ? '' : Number(e.target.value))}
           disabled={disabled}
           placeholder={field.placeholder}
         />
       );
     case CaptureFieldType.Decimal:
       // NUMERIC carried verbatim as text — never Number()-coerced (precision).
-      return <Input id={inputId} type="text" inputMode="decimal" value={asString(value)} onChange={(e) => onChange(e.target.value)} disabled={disabled} placeholder={field.placeholder ?? '0.00'} />;
+      return <Input id={inputId} type="text" inputMode="decimal" value={asString(value)} onChange={(e) => emit(e.target.value)} disabled={disabled} placeholder={field.placeholder ?? '0.00'} />;
     case CaptureFieldType.User:
-      return <Input id={inputId} value={asString(value)} onChange={(e) => onChange(e.target.value)} disabled={disabled} placeholder={field.placeholder ?? 'subject id'} />;
+      return <Input id={inputId} value={asString(value)} onChange={(e) => emit(e.target.value)} disabled={disabled} placeholder={field.placeholder ?? 'subject id'} />;
     case CaptureFieldType.Boolean:
       return (
         <div className="mt-1">
-          <Checkbox id={inputId} checked={value === true} onCheckedChange={(checked) => onChange(checked === true)} disabled={disabled} />
+          <Checkbox id={inputId} checked={value === true} onCheckedChange={(checked) => emit(checked === true)} disabled={disabled} />
         </div>
       );
     case CaptureFieldType.Date:
-      return <Input id={inputId} type="date" value={asString(value)} onChange={(e) => onChange(e.target.value)} disabled={disabled} />;
+      return <Input id={inputId} type="date" value={asString(value)} onChange={(e) => emit(e.target.value)} disabled={disabled} />;
     case CaptureFieldType.Datetime:
-      return <Input id={inputId} type="datetime-local" value={asString(value)} onChange={(e) => onChange(e.target.value)} disabled={disabled} />;
+      return <Input id={inputId} type="datetime-local" value={asString(value)} onChange={(e) => emit(e.target.value)} disabled={disabled} />;
     case CaptureFieldType.Enum:
       return (
-        <select id={inputId} className={SELECT_CLASS} value={asString(value)} onChange={(e) => onChange(e.target.value)} disabled={disabled}>
+        <select id={inputId} className={SELECT_CLASS} value={asString(value)} onChange={(e) => emit(e.target.value)} disabled={disabled}>
           <option value="">— select —</option>
           {(field.enumValues ?? []).map((v) => (
             <option key={v} value={v}>
@@ -90,9 +132,9 @@ export function SchemaFieldInput(props: SchemaFieldInputProps) {
       );
     case CaptureFieldType.Reference:
       return renderReference ? (
-        <>{renderReference({ field, value, onChange, disabled, inputId })}</>
+        <>{renderReference({ field, value, onChange: emit, disabled, inputId })}</>
       ) : (
-        <Input id={inputId} value={asString(value)} onChange={(e) => onChange(e.target.value)} disabled={disabled} placeholder={field.placeholder ?? 'reference id'} />
+        <Input id={inputId} value={asString(value)} onChange={(e) => emit(e.target.value)} disabled={disabled} placeholder={field.placeholder ?? 'reference id'} />
       );
     case CaptureFieldType.Object:
       return <ObjectInput {...props} />;
@@ -103,12 +145,90 @@ export function SchemaFieldInput(props: SchemaFieldInputProps) {
       return <MediaFieldInput {...props} />;
     case CaptureFieldType.Audio:
       return <AudioFieldInput {...props} />;
-    // string (and any unknown) — plain single-line input.
+    // string / email / url (and any unknown) — single-line input.
     default:
-      return <Input id={inputId} value={asString(value)} onChange={(e) => onChange(e.target.value)} disabled={disabled} placeholder={field.placeholder} />;
+      return <Input id={inputId} type={nativeInputType(field.type)} value={asString(value)} onChange={(e) => emit(e.target.value)} disabled={disabled} placeholder={field.placeholder} />;
   }
 }
 
+/**
+ * Write-only input for a DECLARED-secret field.
+ *
+ * `autoComplete="off"` + `data-lpignore` keep password managers and the browser
+ * credential store from persisting the value; the reveal toggle is local and
+ * transient. The component holds no cache: it renders exactly the value the
+ * caller passes and nothing else, so a read path that returns no secret
+ * material (the only kind this kit is used with) can never repopulate it.
+ */
+function SecretFieldInput({
+  field,
+  value,
+  onChange,
+  disabled,
+  inputId,
+}: Readonly<{
+  field: CaptureFieldSpec;
+  value: unknown;
+  onChange: (next: unknown) => void;
+  disabled?: boolean;
+  inputId: string;
+}>) {
+  const [reveal, setReveal] = useState(false);
+  const multiline = field.type === CaptureFieldType.Json || field.type === CaptureFieldType.Text;
+
+  if (multiline && reveal) {
+    return (
+      <div className="relative">
+        <Textarea
+          id={inputId}
+          value={asString(value)}
+          onChange={(e) => onChange(e.target.value)}
+          disabled={disabled}
+          rows={6}
+          spellCheck={false}
+          autoComplete="off"
+          className="min-h-[120px] pr-9 font-mono"
+          placeholder={field.placeholder}
+        />
+        <RevealToggle reveal={reveal} onToggle={() => setReveal((v) => !v)} />
+      </div>
+    );
+  }
+
+  return (
+    <div className="relative">
+      <Input
+        id={inputId}
+        type={reveal ? 'text' : 'password'}
+        value={asString(value)}
+        onChange={(e) => onChange(e.target.value)}
+        disabled={disabled}
+        autoComplete="off"
+        spellCheck={false}
+        data-lpignore="true"
+        className="pr-9 font-mono"
+        placeholder={field.placeholder}
+      />
+      <RevealToggle reveal={reveal} onToggle={() => setReveal((v) => !v)} />
+    </div>
+  );
+}
+
+function RevealToggle({ reveal, onToggle }: Readonly<{ reveal: boolean; onToggle: () => void }>) {
+  return (
+    <Button
+      type="button"
+      size="sm"
+      variant="ghost"
+      className="absolute right-0 top-0 h-9 w-9 p-0"
+      onClick={onToggle}
+      aria-label={reveal ? 'Hide value' : 'Show value'}
+    >
+      {reveal ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+    </Button>
+  );
+}
+
 const FILE_INPUT_CLASS =
   'block w-full text-body-2 text-foreground file:mr-3 file:rounded-md file:border-0 file:bg-secondary file:px-3 file:py-1.5 file:text-body-2 file:text-secondary-foreground hover:file:bg-secondary/80 disabled:cursor-not-allowed disabled:opacity-50';
 
@@ -227,7 +347,13 @@ function AudioFieldInput({ value, onChange, disabled, path }: SchemaFieldInputPr
         ) : null}
       </div>
       {error ? <p className="text-body-2 text-destructive">{error}</p> : null}
-      {current && !recording ? <audio id={inputId} controls src={current} className="w-full" /> : null}
+      {current && !recording ? (
+        <Button asChild variant="outline" size="sm">
+          <a id={inputId} href={current} target="_blank" rel="noreferrer">
+            Open recorded audio
+          </a>
+        </Button>
+      ) : null}
     </div>
   );
 }

package/src/ui/capture/submit-values.test.ts

@@ -0,0 +1,70 @@
+// Pure-logic proofs for the ONE values→wire projection and the declared
+// transform. Runs under the host-web vitest runner (this package carries no
+// vitest dep — see tsconfig exclude).
+import { describe, expect, it } from 'vitest';
+
+import { applyCaptureTransform, CaptureFieldTransform, CaptureFieldType, type CaptureFieldSpec } from './field-spec';
+import { fieldSpecToZod } from './field-spec-to-zod';
+import { captureValuesToStringMap, captureValuesToSubmitPayload } from './submit-values';
+
+const fields: CaptureFieldSpec[] = [
+  { key: 'apiKey', label: 'API key', type: CaptureFieldType.String, required: true, isSecret: true },
+  { key: 'baseUrl', label: 'Base URL', type: CaptureFieldType.Url, required: true },
+  { key: 'serviceAccount', label: 'Service account', type: CaptureFieldType.Json, required: false },
+];
+
+describe('applyCaptureTransform', () => {
+  it('applies only the DECLARED transform', () => {
+    expect(applyCaptureTransform(' a ', CaptureFieldTransform.Trim)).toBe('a');
+    expect(applyCaptureTransform('a', CaptureFieldTransform.Uppercase)).toBe('A');
+    expect(applyCaptureTransform('A', CaptureFieldTransform.Lowercase)).toBe('a');
+    expect(applyCaptureTransform(' a ', CaptureFieldTransform.None)).toBe(' a ');
+    // Absent = no normalization. There is no implicit blanket trim.
+    expect(applyCaptureTransform(' a ', undefined)).toBe(' a ');
+  });
+});
+
+describe('captureValuesToStringMap', () => {
+  it('projects ONLY declared keys, as strings', () => {
+    expect(
+      captureValuesToStringMap(fields, {
+        apiKey: 'sk-1',
+        baseUrl: 'https://acme.test',
+        rogue: 'should not travel',
+      }),
+    ).toEqual({ apiKey: 'sk-1', baseUrl: 'https://acme.test', serviceAccount: '' });
+  });
+});
+
+describe('captureValuesToSubmitPayload', () => {
+  it('parses a json field and leaves the rest untouched', () => {
+    expect(
+      captureValuesToSubmitPayload(fields, {
+        apiKey: 'sk-1',
+        baseUrl: 'https://acme.test',
+        serviceAccount: '{"a":1}',
+      }),
+    ).toEqual({ apiKey: 'sk-1', baseUrl: 'https://acme.test', serviceAccount: { a: 1 } });
+  });
+
+  it('does not drop an unparseable json value — validation is the gate', () => {
+    expect(captureValuesToSubmitPayload(fields, { serviceAccount: '{' }).serviceAccount).toBe('{');
+  });
+});
+
+describe('json field validation', () => {
+  const schema = fieldSpecToZod(fields);
+
+  it('rejects an unparseable json blob', () => {
+    expect(schema.safeParse({ apiKey: 'k', baseUrl: 'u', serviceAccount: '{' }).success).toBe(false);
+  });
+
+  it('accepts a parseable json blob and an omitted optional one', () => {
+    expect(schema.safeParse({ apiKey: 'k', baseUrl: 'u', serviceAccount: '{"a":1}' }).success).toBe(true);
+    expect(schema.safeParse({ apiKey: 'k', baseUrl: 'u' }).success).toBe(true);
+  });
+
+  it('requires a non-empty url/email field when required', () => {
+    expect(schema.safeParse({ apiKey: 'k', baseUrl: '' }).success).toBe(false);
+  });
+});

package/src/ui/capture/submit-values.ts

@@ -0,0 +1,63 @@
+// ═══════════════════════════════════════════════════════════════════════════
+// Capture values → submit payload
+//
+// The ONE projection from the form's in-memory `CaptureValues` to what goes on
+// the wire. Two faces, because two wire contracts exist and neither should grow
+// its own inline projection:
+//
+//   • `captureValuesToStringMap` — every field as a STRING (the shape a
+//     credential submit takes: `fields: Record<string, string>`).
+//   • `captureValuesToSubmitPayload` — same, except a `json` field is PARSED
+//     into its structured value (the shape the connection credential write
+//     takes: `credentials: Record<string, unknown>`).
+//
+// Both are field-driven: only DECLARED keys are projected, so a stray key in
+// the values record can never reach the wire. Neither performs an undeclared
+// normalization — trimming/casing is `CaptureFieldTransform`, applied once at
+// the input boundary. A blanket trim here would silently override a field that
+// declared `transform: none`.
+// ═══════════════════════════════════════════════════════════════════════════
+import { CaptureFieldType, toFieldList, type CaptureFieldSpec, type CaptureSchema, type CaptureSection, type CaptureValues } from './field-spec';
+import { asString } from './value-format';
+
+type Schema = CaptureSchema | readonly CaptureFieldSpec[] | readonly CaptureSection[];
+
+/** Project the declared fields to a flat `string` map (fields-only wire). */
+export function captureValuesToStringMap(
+  schema: Schema,
+  values: CaptureValues,
+): Record<string, string> {
+  const payload: Record<string, string> = {};
+  for (const field of toFieldList(schema)) {
+    payload[field.key] = asString(values[field.key]);
+  }
+  return payload;
+}
+
+/**
+ * Project the declared fields, parsing `json` fields into structured values.
+ *
+ * A `json` field that does not parse is left as its raw string — validation is
+ * `useSchemaValidation`'s job and it must run first; this projection does not
+ * silently drop a value it cannot parse.
+ */
+export function captureValuesToSubmitPayload(
+  schema: Schema,
+  values: CaptureValues,
+): CaptureValues {
+  const payload: CaptureValues = {};
+  for (const field of toFieldList(schema)) {
+    const raw = values[field.key];
+    if (field.type !== CaptureFieldType.Json) {
+      payload[field.key] = raw;
+      continue;
+    }
+    const text = asString(raw);
+    try {
+      payload[field.key] = JSON.parse(text);
+    } catch {
+      payload[field.key] = text;
+    }
+  }
+  return payload;
+}

package/src/ui/capture/use-prefill.ts

@@ -81,7 +81,10 @@ export function usePrefill<T extends CaptureValues = CaptureValues>(
 
   const setValues = useCallback((updater: Partial<T> | ((prev: T) => T)) => {
     setValuesState((prev) => {
-      const next = typeof updater === 'function' ? (updater as (p: T) => T)(prev) : { ...prev, ...updater };
+      const next =
+        typeof updater === 'function'
+          ? updater(prev)
+          : { ...prev, ...updater };
       const changed = new Set<string>();
       for (const k of Object.keys(next)) {
         if (next[k] !== prev[k]) {

package/src/ui/capture/use-wizard.ts

@@ -8,7 +8,7 @@
 // ═══════════════════════════════════════════════════════════════════════════
 import { useCallback, useMemo, useState } from 'react';
 
-import { FormStepStatus } from '../primitives/form-stepper';
+import { FormStepStatus } from '../primitives/form-stepper.types';
 
 export interface WizardStepDef {
   readonly key: string;
@@ -68,7 +68,7 @@ export function useWizard(options: UseWizardOptions): WizardApi {
 
   const isControlled = step !== undefined;
   const [internal, setInternal] = useState(() => clamp(initialStep));
-  const activeIndex = clamp(isControlled ? (step as number) : internal);
+  const activeIndex = clamp(isControlled ? step : internal);
 
   const gate = useCallback((i: number) => (canAdvance ? canAdvance(i) : true), [canAdvance]);
 

package/src/ui/capture/wizard.tsx

@@ -10,7 +10,8 @@ import { Children, isValidElement, type ReactElement, type ReactNode } from 'rea
 
 import { cn } from '../cn';
 import { Button } from '../primitives/button';
-import { FormStepper, type FormStep } from '../primitives/form-stepper';
+import { FormStepper } from '../primitives/form-stepper';
+import type { FormStep } from '../primitives/form-stepper.types';
 
 import type { WizardApi } from './use-wizard';
 

package/src/ui/index.ts

@@ -24,7 +24,9 @@ export { useIsMobile } from './hooks/use-is-mobile';
 
 // ── shadcn primitives ──
 export * from './primitives/button';
+export * from './primitives/button-variants';
 export * from './primitives/badge';
+export * from './primitives/badge-variants';
 export * from './primitives/input';
 export * from './primitives/label';
 export * from './primitives/select';
@@ -49,11 +51,16 @@ export * from './primitives/overflow-tabs';
 export * from './primitives/tag-multi-select';
 export * from './primitives/sheet';
 export * from './primitives/form-stepper';
+export * from './primitives/form-stepper.types';
 export * from './primitives/async-combobox';
 export {
   PreviewDeviceFrame,
   type PreviewDevice,
 } from './primitives/preview-device-frame';
+export {
+  UrlPreviewChrome,
+  type UrlPreviewChromeProps,
+} from './primitives/url-preview-chrome';
 
 // ── chart primitives (Wave 9.2 — pure SVG, no external chart lib) ──
 export * from './charts';
@@ -61,11 +68,13 @@ export * from './charts';
 // ── runtime branding applier (Wave 8.4) ──
 export {
   AppBrandingProvider,
-  useAppBranding,
   APP_PRIMARY_COLOR_VAR,
   type AppBrandingProviderProps,
-  type AppBrandingContextValue,
 } from './branding/app-branding-provider';
+export {
+  useAppBranding,
+  type AppBrandingContextValue,
+} from './branding/app-branding-context';
 
 // ── Xema chrome ──
 export { default as ErrorCard, type ErrorMessageFormatter } from './chrome/ErrorCard';

package/src/ui/primitives/alert-dialog.tsx

@@ -1,7 +1,7 @@
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
 import * as React from "react";
 
-import { buttonVariants } from './button';
+import { buttonVariants } from './button-variants';
 import { cn } from '../cn';
 
 const AlertDialog = AlertDialogPrimitive.Root;

package/src/ui/primitives/badge-variants.ts

@@ -0,0 +1,21 @@
+import { cva } from 'class-variance-authority';
+
+export const badgeVariants = cva(
+  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-body-1 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default:
+          'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
+        secondary:
+          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        destructive:
+          'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
+        outline: 'border-rule bg-paper text-ink',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);

package/src/ui/primitives/badge.tsx

@@ -1,24 +1,8 @@
-import { cva, type VariantProps } from "class-variance-authority";
+import type { VariantProps } from "class-variance-authority";
 import * as React from "react";
 
 import { cn } from '../cn';
-
-const badgeVariants = cva(
-  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-body-1 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-  {
-    variants: {
-      variant: {
-        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
-        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
-        outline: "border-rule bg-paper text-ink",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  },
-);
+import { badgeVariants } from './badge-variants';
 
 export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {}
 
@@ -29,4 +13,4 @@ const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
 );
 Badge.displayName = "Badge";
 
-export { Badge, badgeVariants };
+export { Badge };

package/src/ui/primitives/button-variants.ts

@@ -0,0 +1,31 @@
+import { cva } from 'class-variance-authority';
+
+export const buttonVariants = cva(
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-body-1 font-medium ring-offset-background transition-[background-color,color,border-color,box-shadow] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default:
+          'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline:
+          'border border-input bg-background text-foreground hover:bg-accent hover:text-accent-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'text-ink-2 hover:bg-paper-elev hover:text-ink',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);

package/src/ui/primitives/button.tsx

@@ -1,34 +1,9 @@
 import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
+import type { VariantProps } from "class-variance-authority";
 import * as React from "react";
 
 import { cn } from '../cn';
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-body-1 font-medium ring-offset-background transition-[background-color,color,border-color,box-shadow] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        outline: "border border-input bg-background text-foreground hover:bg-accent hover:text-accent-foreground",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "text-ink-2 hover:bg-paper-elev hover:text-ink",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-10 px-4 py-2",
-        sm: "h-9 rounded-md px-3",
-        lg: "h-11 rounded-md px-8",
-        icon: "h-10 w-10",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  },
-);
+import { buttonVariants } from './button-variants';
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
@@ -44,4 +19,4 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 );
 Button.displayName = "Button";
 
-export { Button, buttonVariants };
+export { Button };

package/src/ui/primitives/form-stepper.tsx

@@ -1,22 +1,7 @@
 import { Check } from 'lucide-react';
 
-import type { ReactNode } from 'react';
-
 import { cn } from '../cn';
-
-export enum FormStepStatus {
-  PENDING = 'pending',
-  ACTIVE = 'active',
-  DONE = 'done',
-}
-
-export interface FormStep {
-  readonly key: string;
-  readonly label: string;
-  readonly hint?: string;
-  readonly status: FormStepStatus;
-  readonly children: ReactNode;
-}
+import { FormStepStatus, type FormStep } from './form-stepper.types';
 
 interface FormStepperProps {
   readonly steps: readonly FormStep[];

package/src/ui/primitives/form-stepper.types.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+
+export enum FormStepStatus {
+  PENDING = 'pending',
+  ACTIVE = 'active',
+  DONE = 'done',
+}
+
+export interface FormStep {
+  readonly key: string;
+  readonly label: string;
+  readonly hint?: string;
+  readonly status: FormStepStatus;
+  readonly children: ReactNode;
+}