@dashforge/tw 1.0.0 → 1.1.1

package/src/components/RadioGroup/RadioGroup.tsx

@@ -1,283 +0,0 @@
-import { useContext, useEffect, useId, useRef } from 'react';
-import * as RadixRadioGroup from '@radix-ui/react-radio-group';
-import { DashFormContext, useEngineVisibility } from '@dashforge/ui-core';
-import type { DashFormBridge, FieldRegistration } from '@dashforge/ui-core';
-import { useDashFieldMeta } from '@dashforge/forms';
-import { cn } from '../../utils/cn.js';
-import { useAccessState } from '../../hooks/useAccessState.js';
-import { resolveValidationState } from '../_shared/resolveValidationState.js';
-import { radioGroupVariants } from './radioGroup.variants.js';
-import type { RadioGroupProps } from './radioGroup.types.js';
-
-/**
- * Dashforge TW RadioGroup — bridge-integrated single-choice group.
- *
- * Renders through Radix `RadioGroup.Root` + `Item` + `Indicator`, styled
- * with the `radioGroupVariants` TV recipe. Behaviour at the bridge level
- * is a 1:1 port of `@dashforge/ui/RadioGroup` (MUI):
- *
- *  - Inside `DashFormProvider`: registers with the bridge, reads
- *    `useDashFieldMeta` for the selected value (reactive snapshot),
- *    writes through `bridge.setValue` on change, fires
- *    `registration.onChange` / `onBlur` for RHF.
- *  - Outside: behaves as a plain Radix RadioGroup (controlled by `value`
- *    + `onValueChange`, or uncontrolled via `defaultValue`).
- *  - `visibleWhen` predicates the engine state.
- *  - `useAccessState(access)` resolves group-level RBAC; per-option RBAC
- *    is resolved by calling `useAccessState` for every entry of the
- *    `options` array (Rules of Hooks: stable as long as `options.length`
- *    is stable, which is the documented contract — mutating the array
- *    between renders breaks).
- *  - Group-level RBAC has precedence over option-level (hide-the-group
- *    wins even if some options would be visible).
- *  - Error gating: bridge error shows only after `touched` or after the
- *    form has been submitted at least once (Form Closure v1).
- *  - StrictMode-safe unregister-on-unmount, mirrors Checkbox/Switch.
- *
- * **A11y**:
- *   - The group root is a `<div role="radiogroup">` (Radix default).
- *   - A `<label id="...">` is associated with the group via `aria-labelledby`.
- *   - The helper/error text is linked via `aria-describedby`.
- *   - Each option is a Radix `<RadioGroup.Item>` (`<button role="radio">`)
- *     keyboard-accessible by default (arrow keys move selection).
- */
-export function RadioGroup(props: RadioGroupProps) {
-  const {
-    name,
-    options,
-    label,
-    rules,
-    helperText,
-    required,
-    error,
-    disabled,
-    size,
-    layout,
-    access,
-    visibleWhen,
-    sx,
-    slotProps,
-    value: explicitValue,
-    defaultValue,
-    onValueChange,
-  } = props;
-
-  // ───── Hooks (unconditional) ─────
-  const bridge = useContext(DashFormContext) as DashFormBridge | null;
-  const isVisible = useEngineVisibility(bridge?.engine, visibleWhen);
-  // Granular per-field subscription (side-effect: re-render this
-  // component when ITS own bridge state mutates). We DON'T read the
-  // value from this hook because it can return `undefined` on the
-  // first render before the subscription has primed — use
-  // `bridge.getValue(name)` for the actual value (mirrors MUI side).
-  useDashFieldMeta(name);
-  const groupAccessState = useAccessState(access);
-
-  // Per-option RBAC. Hooks-in-loop is safe as long as `options.length` is
-  // stable across renders — documented as the contract for this component.
-  const optionAccessStates = options.map((option) =>
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    useAccessState(option.access)
-  );
-
-  const labelId = useId();
-  const helperId = `${labelId}-help`;
-
-  // StrictMode-safe unregister-on-unmount
-  const unregisterRef = useRef({ bridge, name });
-  unregisterRef.current = { bridge, name };
-  const isMountedRef = useRef(false);
-   
-  useEffect(() => {
-    isMountedRef.current = true;
-    return () => {
-      isMountedRef.current = false;
-      const { bridge: cap, name: capName } = unregisterRef.current;
-      queueMicrotask(() => {
-        if (!isMountedRef.current) cap?.unregister?.(capName);
-      });
-    };
-  }, []);
-
-  // ───── Early returns ─────
-  if (!isVisible) return null;
-  if (!groupAccessState.visible) return null;
-
-  // ───── Effective group disabled (group-level OR explicit) ─────
-  const groupEffectiveDisabled =
-    Boolean(disabled) || groupAccessState.disabled || groupAccessState.readonly;
-
-  // ───── Form mode vs standalone ─────
-  const isFormMode = Boolean(bridge?.register);
-
-  let resolvedValue: string =
-    explicitValue ?? defaultValue ?? '';
-  let resolvedError = error;
-  let resolvedHelperText: typeof helperText = helperText;
-  let registration: FieldRegistration | null = null;
-
-  if (isFormMode && bridge) {
-    registration = bridge.register(name, rules);
-    const validation = resolveValidationState(name, bridge, error, helperText);
-    resolvedError = validation.error;
-    resolvedHelperText = validation.helperText;
-    if (explicitValue === undefined) {
-      const bv = bridge.getValue(name);
-      resolvedValue = bv == null ? '' : String(bv);
-    }
-  }
-
-  // ───── Process per-option visibility / disabled ─────
-  const processedOptions = options
-    .map((option, index) => {
-      const optAccess = optionAccessStates[index];
-      const isSelected = option.value === resolvedValue;
-      // Option is hidden ONLY if access says hide AND it's not the
-      // currently selected value (keep the selected option visible-but-
-      // disabled so the user can see what they picked even if perms changed).
-      const shouldHide = !optAccess.visible && !isSelected;
-      if (shouldHide) return null;
-
-      const optionEffectiveDisabled =
-        groupEffectiveDisabled ||
-        Boolean(option.disabled) ||
-        optAccess.disabled ||
-        optAccess.readonly ||
-        (!optAccess.visible && isSelected);
-
-      return { ...option, effectiveDisabled: optionEffectiveDisabled };
-    })
-    .filter((opt): opt is NonNullable<typeof opt> => opt !== null);
-
-  // ───── Handlers ─────
-  const handleValueChange = (next: string) => {
-    if (isFormMode && bridge) {
-      bridge.setValue?.(name, next);
-      void registration?.onChange?.({
-        target: { name, value: next },
-        type: 'change',
-      });
-    }
-    onValueChange?.(next);
-  };
-
-  const handleBlur = () => {
-    if (!isFormMode || !bridge) return;
-    const current = bridge.getValue(name) as string | undefined;
-    registration?.onBlur?.({
-      target: { name, value: current ?? '' },
-      type: 'blur',
-    });
-  };
-
-  // ───── Render ─────
-  const v = radioGroupVariants({
-    size,
-    layout,
-    error: resolvedError,
-    disabled: groupEffectiveDisabled,
-  });
-
-  return (
-    <div
-      className={cn(v.root(), sx, slotProps?.root?.className)}
-      aria-describedby={resolvedHelperText ? helperId : undefined}
-    >
-      {label && (
-        <div
-          id={labelId}
-          className={cn(v.label(), slotProps?.label?.className)}
-        >
-          {label}
-          {required && (
-            <span
-              aria-hidden="true"
-              className={cn(v.requiredMark(), slotProps?.requiredMark?.className)}
-            >
-              *
-            </span>
-          )}
-        </div>
-      )}
-
-      {/*
-       * Radix RadioGroup mode discrimination — mirrors the same fix
-       * applied to <Checkbox>:
-       *
-       *   - Form mode (bridge.register present): controlled — `value`
-       *     comes from the reactive bridge snapshot, `handleValueChange`
-       *     writes back through bridge.setValue.
-       *   - Standalone controlled (consumer passes `value`): controlled —
-       *     consumer owns state, `handleValueChange` forwards via
-       *     `onValueChange`.
-       *   - Standalone uncontrolled (only `defaultValue`): UNCONTROLLED —
-       *     Radix owns the state. Previously this code passed
-       *     `value={resolvedValue}` in this branch too, putting Radix
-       *     in controlled mode with a stale snapshot that never updated,
-       *     so user clicks fired Radix's onValueChange but the controlled
-       *     prop never changed and the selection snapped right back.
-       *
-       * Picking exactly one of `{ value, ... }` or `{ defaultValue, ... }`
-       * lets Radix track its own state correctly when nobody else can.
-       */}
-      <RadixRadioGroup.Root
-        name={name}
-        {...(isFormMode || explicitValue !== undefined
-          ? { value: resolvedValue }
-          : { defaultValue: defaultValue ?? undefined })}
-        onValueChange={handleValueChange}
-        onBlur={handleBlur}
-        disabled={groupEffectiveDisabled}
-        required={required}
-        aria-labelledby={label ? labelId : undefined}
-        aria-invalid={resolvedError || undefined}
-        className={cn(v.optionList(), slotProps?.optionList?.className)}
-      >
-        {processedOptions.map((option) => {
-          const optionLabelId = `${labelId}-opt-${option.value}`;
-          return (
-            <div
-              key={option.value}
-              className={cn(v.option(), slotProps?.option?.className)}
-            >
-              <RadixRadioGroup.Item
-                value={option.value}
-                id={optionLabelId}
-                disabled={option.effectiveDisabled}
-                className={cn(v.control(), slotProps?.control?.className)}
-              >
-                <RadixRadioGroup.Indicator
-                  className={cn(v.indicator(), slotProps?.indicator?.className)}
-                />
-              </RadixRadioGroup.Item>
-              <label
-                htmlFor={optionLabelId}
-                className={cn(
-                  v.optionLabel(),
-                  option.effectiveDisabled && 'cursor-not-allowed opacity-60',
-                  slotProps?.optionLabel?.className
-                )}
-              >
-                {option.label}
-              </label>
-            </div>
-          );
-        })}
-      </RadixRadioGroup.Root>
-
-      {resolvedHelperText && (
-        <p
-          id={helperId}
-          className={cn(
-            resolvedError ? v.errorText() : v.helperText(),
-            resolvedError
-              ? slotProps?.errorText?.className
-              : slotProps?.helperText?.className
-          )}
-        >
-          {resolvedHelperText}
-        </p>
-      )}
-    </div>
-  );
-}

package/src/components/RadioGroup/radioGroup.types.ts

@@ -1,85 +0,0 @@
-import type { ReactNode } from 'react';
-import type { Engine } from '@dashforge/ui-core';
-import type { AccessRequirement } from '@dashforge/rbac';
-import type { RadioGroupVariants } from './radioGroup.variants.js';
-
-/**
- * A single selectable option in a `<RadioGroup>`.
- */
-export interface RadioGroupOption {
-  /** The string value persisted on the form for this option. */
-  value: string;
-  /** Display label (string or any React node — e.g. with an icon). */
-  label: ReactNode;
-  /** Per-option explicit disable. ORed with group-level disable + RBAC. */
-  disabled?: boolean;
-  /**
-   * RBAC access requirement for this specific option:
-   *  - `onUnauthorized: 'hide'`     → option not rendered (unless it's the currently selected value, kept disabled to expose the choice)
-   *  - `onUnauthorized: 'disable'`  → option visible but not selectable
-   *  - `onUnauthorized: 'readonly'` → falls back to disabled (radios have no true readonly semantics)
-   *
-   * Group-level access has **precedence** over option-level access — if the
-   * whole group is hidden/disabled, that wins for all options regardless of
-   * their own access.
-   */
-  access?: AccessRequirement;
-}
-
-/**
- * Optional className override for each slot. Use to extend specific parts
- * of the recipe without losing the default classes. Override semantics
- * follow the `tailwind-merge` last-wins rule.
- */
-export interface RadioGroupSlotProps {
-  root?: { className?: string };
-  label?: { className?: string };
-  requiredMark?: { className?: string };
-  optionList?: { className?: string };
-  option?: { className?: string };
-  control?: { className?: string };
-  indicator?: { className?: string };
-  optionLabel?: { className?: string };
-  helperText?: { className?: string };
-  errorText?: { className?: string };
-}
-
-/**
- * Props for `<RadioGroup>`.
- *
- * Mirrors the MUI-side `@dashforge/ui/RadioGroup` at the bridge level —
- * same `name` / `rules` / `visibleWhen` / `access` semantics, same
- * Form Closure v1 error gating, same option-level RBAC.
- */
-export interface RadioGroupProps extends RadioGroupVariants {
-  /** Field name registered with the bridge. */
-  name: string;
-  /** Array of selectable options. Order is render order. */
-  options: RadioGroupOption[];
-  /** Group-level label (rendered above the option list). */
-  label?: ReactNode;
-  /** React Hook Form validation rules — forwarded to `bridge.register`. */
-  rules?: unknown;
-  /** Helper text shown below the option list when not in error state. */
-  helperText?: ReactNode;
-  /** Marks the group as required (renders red `*` after the label). */
-  required?: boolean;
-  /** Explicit error override (otherwise resolved from bridge). */
-  error?: boolean;
-  /** Explicit disable override (ORed with RBAC). */
-  disabled?: boolean;
-  /** Engine predicate — group not rendered when it returns `false`. */
-  visibleWhen?: (engine: Engine) => boolean;
-  /** Group-level RBAC requirement (precedes option-level access). */
-  access?: AccessRequirement;
-  /** Root className shortcut (`cn`'d with the variant root class). */
-  sx?: string;
-  /** Per-slot className overrides. */
-  slotProps?: RadioGroupSlotProps;
-  /** Controlled value (for standalone mode without a form bridge). */
-  value?: string;
-  /** Default value for uncontrolled mode (no-op in form mode — bridge wins). */
-  defaultValue?: string;
-  /** Change handler (called *after* bridge update in form mode). */
-  onValueChange?: (value: string) => void;
-}

package/src/components/RadioGroup/radioGroup.variants.ts

@@ -1,87 +0,0 @@
-import { tv, type VariantProps } from 'tailwind-variants';
-
-/**
- * Tailwind-variants recipe for `<RadioGroup>` with slots.
- *
- * Slots:
- *   - `root`         — outer wrapper (label + option list + helper/error)
- *   - `label`        — group-level label (rendered above the option list)
- *   - `requiredMark` — red asterisk for required groups
- *   - `optionList`   — container for the radio options (flex direction
- *                      decided by the `layout` variant)
- *   - `option`       — wrapper for a single option (control + label)
- *   - `control`      — visible circle (Radix `RadioGroup.Item`)
- *   - `indicator`    — inner dot (Radix `RadioGroup.Indicator`)
- *   - `optionLabel`  — text label associated with the control
- *   - `helperText`   — descriptive line below the option list
- *   - `errorText`    — semantic counterpart of helperText for error mode
- *
- * Variants:
- *   - `size`   : sm / md / lg — drives control circle + label text size
- *   - `layout` : stacked (vertical, default) / row (horizontal)
- *   - `error`  : bool — swaps borders + helperText color to danger tones
- */
-export const radioGroupVariants = tv({
-  slots: {
-    root: 'flex flex-col gap-1.5',
-    label: 'block text-sm font-medium text-neutral-900',
-    requiredMark: 'text-danger-500 ml-0.5',
-    optionList: 'flex gap-3',
-    option: 'inline-flex items-center gap-2',
-    control: [
-      'inline-flex items-center justify-center shrink-0',
-      // bg-neutral-50 inverts — dark-mode aware via the dashforge preset.
-      'rounded-full border bg-neutral-50',
-      'border-neutral-300',
-      'transition-colors',
-      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-primary-500',
-      'data-[state=checked]:border-primary-500',
-      'data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed',
-    ],
-    indicator: 'block rounded-full bg-primary-500',
-    optionLabel: 'select-none cursor-pointer text-neutral-900',
-    helperText: 'text-sm text-neutral-600',
-    errorText: 'text-sm text-danger-600',
-  },
-  variants: {
-    size: {
-      sm: {
-        control: 'h-4 w-4',
-        indicator: 'h-2 w-2',
-        optionLabel: 'text-sm',
-      },
-      md: {
-        control: 'h-5 w-5',
-        indicator: 'h-2.5 w-2.5',
-        optionLabel: 'text-base',
-      },
-      lg: {
-        control: 'h-6 w-6',
-        indicator: 'h-3 w-3',
-        optionLabel: 'text-lg',
-      },
-    },
-    layout: {
-      stacked: { optionList: 'flex-col' },
-      row: { optionList: 'flex-row flex-wrap' },
-    },
-    error: {
-      true: {
-        control: 'border-danger-500 focus-visible:ring-danger-500',
-      },
-    },
-    disabled: {
-      true: {
-        control: 'opacity-50 cursor-not-allowed',
-      },
-    },
-  },
-  defaultVariants: {
-    size: 'md',
-    layout: 'stacked',
-    error: false,
-    disabled: false,
-  },
-});
-
-export type RadioGroupVariants = VariantProps<typeof radioGroupVariants>;

package/src/components/Skeleton/Skeleton.test.tsx

@@ -1,127 +0,0 @@
-// @vitest-environment jsdom
-import * as React from 'react';
-import { describe, it, expect, afterEach } from 'vitest';
-import { render, cleanup } from '@testing-library/react';
-import { Skeleton } from './Skeleton.js';
-
-void React;
-afterEach(() => cleanup());
-
-describe('Skeleton — rendering', () => {
-  it('renders a span with aria-hidden', () => {
-    const { container } = render(<Skeleton />);
-    const el = container.querySelector('span');
-    expect(el).not.toBeNull();
-    expect(el?.getAttribute('aria-hidden')).toBe('true');
-    expect(el?.getAttribute('role')).toBe('presentation');
-  });
-
-  it('defaults to variant=text + animation=pulse', () => {
-    const { container } = render(<Skeleton />);
-    const cls = container.querySelector('span')!.className;
-    expect(cls).toContain('animate-pulse');
-    // text variant has a height of 1em
-    expect(cls).toContain('h-[1em]');
-  });
-});
-
-describe('Skeleton — variants', () => {
-  it.each(['text', 'rectangle', 'circle'] as const)(
-    'renders variant=%s without crashing',
-    (variant) => {
-      const { container } = render(<Skeleton variant={variant} />);
-      expect(container.querySelector('span')).not.toBeNull();
-    },
-  );
-
-  it('rectangle has rounded-md class', () => {
-    const { container } = render(<Skeleton variant="rectangle" />);
-    expect(container.querySelector('span')!.className).toContain('rounded-md');
-  });
-
-  it('circle has rounded-full class', () => {
-    const { container } = render(<Skeleton variant="circle" />);
-    expect(container.querySelector('span')!.className).toContain('rounded-full');
-  });
-});
-
-describe('Skeleton — animations', () => {
-  it('animation=pulse adds animate-pulse', () => {
-    const { container } = render(<Skeleton animation="pulse" />);
-    expect(container.querySelector('span')!.className).toContain('animate-pulse');
-  });
-
-  it('animation=none does NOT add animate-pulse', () => {
-    const { container } = render(<Skeleton animation="none" />);
-    expect(container.querySelector('span')!.className).not.toContain('animate-pulse');
-  });
-
-  it('animation=wave adds overflow-hidden + after gradient', () => {
-    const { container } = render(<Skeleton animation="wave" />);
-    const cls = container.querySelector('span')!.className;
-    expect(cls).toContain('overflow-hidden');
-    expect(cls).toContain('relative');
-  });
-
-  it('always carries motion-reduce safety regardless of animation', () => {
-    const { container } = render(<Skeleton animation="pulse" />);
-    expect(container.querySelector('span')!.className).toContain('motion-reduce:animate-none');
-  });
-});
-
-describe('Skeleton — dimensions', () => {
-  it('passes width as inline style', () => {
-    const { container } = render(<Skeleton width="200px" />);
-    expect((container.querySelector('span') as HTMLElement).style.width).toBe('200px');
-  });
-
-  it('passes height as inline style', () => {
-    const { container } = render(<Skeleton variant="rectangle" height="120px" />);
-    expect((container.querySelector('span') as HTMLElement).style.height).toBe('120px');
-  });
-
-  it('for circle, height defaults to width', () => {
-    const { container } = render(<Skeleton variant="circle" width="48px" />);
-    const el = container.querySelector('span') as HTMLElement;
-    expect(el.style.width).toBe('48px');
-    expect(el.style.height).toBe('48px');
-  });
-
-  it('for circle, explicit height wins over width-default', () => {
-    const { container } = render(<Skeleton variant="circle" width="48px" height="64px" />);
-    const el = container.querySelector('span') as HTMLElement;
-    expect(el.style.width).toBe('48px');
-    expect(el.style.height).toBe('64px');
-  });
-});
-
-describe('Skeleton — sx + slotProps', () => {
-  it('appends sx to root className', () => {
-    const { container } = render(<Skeleton sx="my-custom-sx" />);
-    expect(container.querySelector('span')!.className).toContain('my-custom-sx');
-  });
-
-  it('applies slotProps.root.className', () => {
-    const { container } = render(
-      <Skeleton slotProps={{ root: { className: 'slot-class' } }} />,
-    );
-    expect(container.querySelector('span')!.className).toContain('slot-class');
-  });
-
-  it('sx wins over variant default on conflict via tailwind-merge', () => {
-    // variant=text emits `bg-neutral-200`; sx forces `bg-red-500`.
-    const { container } = render(<Skeleton sx="bg-red-500" />);
-    const cls = container.querySelector('span')!.className;
-    expect(cls).toContain('bg-red-500');
-    expect(cls).not.toContain('bg-neutral-200');
-  });
-});
-
-describe('Skeleton — accessibility', () => {
-  it('does not appear in role-based queries (aria-hidden + role=presentation)', () => {
-    const { container } = render(<Skeleton />);
-    const el = container.querySelector('span')!;
-    expect(el.getAttribute('aria-hidden')).toBe('true');
-    expect(el.getAttribute('role')).toBe('presentation');
-  });
-});

package/src/components/Skeleton/Skeleton.tsx

@@ -1,49 +0,0 @@
-import type { CSSProperties } from 'react';
-import { cn } from '../../utils/cn.js';
-import { skeletonVariants } from './skeleton.variants.js';
-import type { SkeletonProps } from './skeleton.types.js';
-
-/**
- * Dashforge TW `<Skeleton>` — loading placeholder primitive.
- *
- * Renders as a non-interactive `<span aria-hidden="true">` so screen
- * readers skip it. The surrounding component is responsible for
- * announcing loading state via `aria-busy` or `aria-live` if needed.
- *
- * Variants:
- *   - `variant` — `text` (default, line shape) / `rectangle` / `circle`
- *   - `animation` — `pulse` (default) / `wave` / `none`
- *
- * Both animations are gated by `prefers-reduced-motion` (WCAG 2.3.3).
- *
- * @example
- * ```tsx
- * <Skeleton variant="text" width="200px" />
- * <Skeleton variant="rectangle" width="100%" height="120px" />
- * <Skeleton variant="circle" width="40px" />
- * ```
- */
-export function Skeleton(props: SkeletonProps) {
-  const { variant = 'text', animation = 'pulse', width, height, sx, slotProps } = props;
-  const v = skeletonVariants({ variant, animation });
-
-  // Width / height come through as inline style — Tailwind doesn't
-  // know about arbitrary user-supplied lengths. We default `circle`'s
-  // height to `width` so consumers don't have to repeat themselves.
-  const style: CSSProperties = {};
-  if (width != null) style.width = width;
-  if (height != null) {
-    style.height = height;
-  } else if (variant === 'circle' && width != null) {
-    style.height = width;
-  }
-
-  return (
-    <span
-      aria-hidden="true"
-      role="presentation"
-      className={cn(v.root(), sx, slotProps?.root?.className)}
-      style={style}
-    />
-  );
-}

package/src/components/Skeleton/skeleton.types.ts

@@ -1,59 +0,0 @@
-import type { SkeletonVariants } from './skeleton.variants.js';
-
-export interface SkeletonSlotProps {
-  /** Root element override. */
-  root?: { className?: string };
-}
-
-/**
- * Props for `<Skeleton>`.
- *
- * Visual loading placeholder shown while data / images / components
- * are being prepared. Three shapes (`variant`), three animations
- * (`animation`), and free-form `width` / `height` for arbitrary
- * dimensions.
- *
- * Rendered as a non-interactive `<span aria-hidden="true">` so screen
- * readers skip it entirely.
- *
- * Compose by nesting: e.g. avatar + two text lines for a card
- * placeholder.
- *
- * @example
- * ```tsx
- * <Skeleton variant="text"      width="200px" />
- * <Skeleton variant="rectangle" width="100%" height="120px" />
- * <Skeleton variant="circle"    width="40px" />
- *
- * // Compose to mimic a card shape
- * <div className="flex gap-3">
- *   <Skeleton variant="circle" width="48px" />
- *   <div className="flex flex-col gap-2 flex-1">
- *     <Skeleton variant="text" width="60%" />
- *     <Skeleton variant="text" width="40%" />
- *   </div>
- * </div>
- * ```
- */
-export interface SkeletonProps
-  extends Pick<SkeletonVariants, 'variant' | 'animation'> {
-  /**
-   * CSS width (e.g. `"200px"`, `"100%"`, `"60%"`).
-   *
-   * Defaults: `text` → `100%`, `rectangle` → `100%`, `circle` → `40px`.
-   */
-  width?: string;
-
-  /**
-   * CSS height (e.g. `"1em"`, `"120px"`).
-   *
-   * Defaults: `text` → `1em`, `rectangle` → `100px`, `circle` → matches `width`.
-   */
-  height?: string;
-
-  /** Root-level Tailwind override (wins via `tailwind-merge`). */
-  sx?: string;
-
-  /** Per-slot overrides. */
-  slotProps?: SkeletonSlotProps;
-}