npm - @dashforge/tw - Versions diffs - 1.0.0 → 1.1.1 - Mend

@dashforge/tw 1.0.0 → 1.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (692) hide show

package/src/components/AppShell/AppShell.tsx DELETED Viewed

@@ -1,239 +0,0 @@
-import { useEffect, useRef } from 'react';
-import { cn } from '../../utils/cn.js';
-import { appShellVariants } from './appShell.variants.js';
-import type { AppShellProps } from './appShell.types.js';
-/**
- * Query selector for natively-focusable elements + anything with an
- * explicit positive (or implicit `0`) tabindex. Used by the focus
- * trap to enumerate the drawer's interactive content.
- *
- * Notes:
- *  - Excludes `[tabindex="-1"]` (intentionally non-tabbable).
- *  - Excludes `:disabled` — the browser already skips them in tab
- *    order; including them here would route focus to dead elements.
- *  - `details > summary` is the standard way to get a focusable
- *    `<details>` toggle.
- *
- * @internal
- */
-const FOCUSABLE_SELECTOR = [
-  'a[href]',
-  'button:not(:disabled)',
-  'input:not(:disabled):not([type="hidden"])',
-  'select:not(:disabled)',
-  'textarea:not(:disabled)',
-  '[tabindex]:not([tabindex="-1"]):not(:disabled)',
-  'details > summary:first-of-type',
-].join(',');
-/**
- * Dashforge TW AppShell — top-level layout orchestrator.
- *
- *   ┌──────────────────────────────────────────┐
- *   │              header                      │  ← `header` slot
- *   ├────────┬─────────────────────────────────┤
- *   │        │                                 │
- *   │  nav   │           main                  │  ← `nav` + `children`
- *   │        │                                 │
- *   ├────────┴─────────────────────────────────┤
- *   │              footer                      │  ← `footer` slot
- *   └──────────────────────────────────────────┘
- *
- * **Responsive**:
- *   - `≥ md`: nav stays in the inline slot at the left.
- *   - `< md`: nav becomes a slide-in drawer toggled by `navOpen`.
- *     A backdrop closes the drawer on click (mirrors `<Dialog>` UX).
- *
- * **Body scroll lock**: when the mobile drawer is open we add
- * `overflow-hidden` to `<body>` to prevent dual-scroll wobble. The
- * effect cleans up on close + on unmount.
- *
- * **A11y**:
- *   - `<main>` landmark wraps the content area.
- *   - `<header>` / `<footer>` come for free from their HTML tags.
- *   - The mobile drawer + backdrop participate in the standard
- *     "click outside to close" pattern — `Escape` closes the drawer
- *     too (added via global keydown).
- *   - **Focus trap** (WCAG 2.4.3) — when the mobile drawer opens:
- *       1. The previously-focused element is captured.
- *       2. Focus moves to the first focusable element inside the drawer.
- *       3. Tab / Shift+Tab wrap inside the drawer (cycle from
- *          last → first and first → last) — Tab can never escape
- *          to the page underneath while the drawer is open.
- *       4. On close, focus returns to the captured element (typically
- *          the hamburger toggle the user pressed to open the drawer).
- *     This pattern matches WAI-ARIA APG's modal dialog guidance even
- *     though the drawer isn't strictly a dialog — same focus
- *     management makes keyboard users' experience predictable.
- *   - **`role="dialog"` + `aria-modal="true"`** are applied to the
- *     drawer when open so screen readers announce it as a modal
- *     overlay rather than just an aside.
- */
-export function AppShell(props: AppShellProps) {
-  const {
-    header,
-    nav,
-    footer,
-    children,
-    navOpen = false,
-    onNavOpenChange,
-    sx,
-    slotProps,
-  } = props;
-  const v = appShellVariants({ navOpen });
-  // Lock body scroll while the mobile drawer is open.
-  useEffect(() => {
-    if (!navOpen) return;
-    const prev = document.body.style.overflow;
-    document.body.style.overflow = 'hidden';
-    return () => {
-      document.body.style.overflow = prev;
-    };
-  }, [navOpen]);
-  // Esc closes the drawer.
-  useEffect(() => {
-    if (!navOpen || !onNavOpenChange) return;
-    const handler = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') onNavOpenChange(false);
-    };
-    document.addEventListener('keydown', handler);
-    return () => document.removeEventListener('keydown', handler);
-  }, [navOpen, onNavOpenChange]);
-  /*
-   * Focus trap for the mobile drawer.
-   *
-   * Implementation:
-   *  - On open: capture the currently-focused element (`document.activeElement`)
-   *    so we can restore it on close. Then move focus to the first
-   *    focusable element inside the drawer.
-   *  - While open: a Tab/Shift+Tab keydown listener wraps focus inside
-   *    the drawer subtree (last → first on Tab from end, first → last
-   *    on Shift+Tab from start).
-   *  - On close: restore focus to the captured element.
-   *
-   * Hand-rolled (no `focus-trap-react` dep) — the logic is ~20 LOC and
-   * scoped to a single drawer; adding a runtime dep felt like overkill.
-   * If we ever need more sophisticated trap semantics (nested traps,
-   * sentinel nodes, etc.) the dep is the right call.
-   */
-  const drawerRef = useRef<HTMLDivElement | null>(null);
-  const restoreFocusRef = useRef<HTMLElement | null>(null);
-  useEffect(() => {
-    if (!navOpen) return;
-    // 1) Capture the element that had focus before the drawer opened.
-    restoreFocusRef.current = document.activeElement as HTMLElement | null;
-    // 2) Move focus to the first focusable element inside the drawer.
-    //    Defer via rAF so the drawer DOM (slide-in animation start) has
-    //    settled and the elements are actually visible/focusable.
-    const raf = requestAnimationFrame(() => {
-      const drawer = drawerRef.current;
-      if (!drawer) return;
-      const first = drawer.querySelector<HTMLElement>(FOCUSABLE_SELECTOR);
-      first?.focus();
-    });
-    // 3) Trap Tab / Shift+Tab inside the drawer.
-    const onKeyDown = (event: KeyboardEvent) => {
-      if (event.key !== 'Tab') return;
-      const drawer = drawerRef.current;
-      if (!drawer) return;
-      const focusables = Array.from(
-        drawer.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)
-      );
-      if (focusables.length === 0) {
-        event.preventDefault();
-        return;
-      }
-      const first = focusables[0];
-      const last = focusables[focusables.length - 1];
-      const active = document.activeElement as HTMLElement | null;
-      if (event.shiftKey) {
-        // Shift+Tab on first → wrap to last.
-        if (active === first || !drawer.contains(active)) {
-          event.preventDefault();
-          last.focus();
-        }
-      } else {
-        // Tab on last → wrap to first.
-        if (active === last || !drawer.contains(active)) {
-          event.preventDefault();
-          first.focus();
-        }
-      }
-    };
-    document.addEventListener('keydown', onKeyDown);
-    return () => {
-      cancelAnimationFrame(raf);
-      document.removeEventListener('keydown', onKeyDown);
-      // 4) Restore focus to the previously-focused element on close.
-      //    Guard against the element being removed from the DOM (rare
-      //    but possible if the consumer re-renders the page while the
-      //    drawer is open).
-      const restore = restoreFocusRef.current;
-      if (restore && document.body.contains(restore)) {
-        restore.focus();
-      }
-    };
-  }, [navOpen]);
-  return (
-    <div className={cn(v.root(), sx, slotProps?.root?.className)}>
-      {header && (
-        <div className={cn(v.header(), slotProps?.header?.className)}>
-          {header}
-        </div>
-      )}
-      <div className={v.body()}>
-        {nav && (
-          <>
-            <aside className={cn(v.nav(), slotProps?.nav?.className)}>
-              {nav}
-            </aside>
-            <aside
-              ref={drawerRef}
-              className={cn(v.navMobile(), slotProps?.navMobile?.className)}
-              aria-hidden={!navOpen}
-              // When open, the drawer is a modal overlay — `dialog` +
-              // `aria-modal="true"` so screen readers announce it as
-              // such. When closed, drop both attributes (the aria-
-              // hidden=true above already removes it from the AT tree).
-              role={navOpen ? 'dialog' : undefined}
-              aria-modal={navOpen ? true : undefined}
-              // The drawer is the SAME nav content rendered twice — once
-              // inline (desktop) and once as a slide-in (mobile). We
-              // mark the inactive copy hidden from AT to avoid double
-              // announcements.
-            >
-              {nav}
-            </aside>
-            <div
-              className={cn(v.backdrop(), slotProps?.backdrop?.className)}
-              role="presentation"
-              onClick={() => onNavOpenChange?.(false)}
-              data-testid="appshell-backdrop"
-            />
-          </>
-        )}
-        <main className={cn(v.main(), slotProps?.main?.className)}>
-          {children}
-        </main>
-      </div>
-      {footer && (
-        <div className={cn(v.footer(), slotProps?.footer?.className)}>
-          {footer}
-        </div>
-      )}
-    </div>
-  );
-}

package/src/components/AppShell/appShell.types.ts DELETED Viewed

@@ -1,49 +0,0 @@
-import type { ReactNode } from 'react';
-import type { AppShellVariants } from './appShell.variants.js';
-export interface AppShellSlotProps {
-  root?: { className?: string };
-  header?: { className?: string };
-  nav?: { className?: string };
-  navMobile?: { className?: string };
-  main?: { className?: string };
-  footer?: { className?: string };
-  backdrop?: { className?: string };
-}
-/**
- * Props for `<AppShell>`.
- *
- * Top-level layout orchestrator with 4 named slots:
- *
- *   - `header` (top, sticky)
- *   - `nav`    (left side, fixed-width on desktop, drawer on mobile)
- *   - `footer` (bottom, non-sticky)
- *   - `children` (main content, scrolls independently)
- *
- * Responsive behavior:
- *   - **≥ md (768px)**: nav is rendered inline at the left.
- *   - **< md**:        nav slides in as an overlay drawer when
- *                      `navOpen={true}` (controlled).
- *
- * The shell is router-agnostic — pass any nav/header content. Typical
- * pairing is `<LeftNav>` + `<TopBar>` (with a hamburger button in
- * `TopBar.start` that flips `navOpen`).
- */
-export interface AppShellProps extends AppShellVariants {
-  header?: ReactNode;
-  nav?: ReactNode;
-  footer?: ReactNode;
-  children?: ReactNode;
-  /**
-   * Mobile drawer open state. Controlled — provide
-   * `onNavOpenChange` to update. When `undefined`, the mobile drawer
-   * is always closed (consumer hasn't wired up the toggle yet).
-   */
-  navOpen?: boolean;
-  onNavOpenChange?: (open: boolean) => void;
-  /** Root className shortcut. */
-  sx?: string;
-  /** Per-slot className overrides. */
-  slotProps?: AppShellSlotProps;
-}

package/src/components/AppShell/appShell.variants.ts DELETED Viewed

@@ -1,54 +0,0 @@
-import { tv, type VariantProps } from 'tailwind-variants';
-/**
- * Tailwind-variants recipe for `<AppShell>`.
- *
- * Slots:
- *   - `root`      — outer flex column (full viewport)
- *   - `header`    — top region
- *   - `body`      — flex row holding nav + main
- *   - `nav`       — desktop nav rail (md+)
- *   - `navMobile` — mobile drawer (slide-in)
- *   - `main`      — scrollable content area
- *   - `footer`    — bottom region
- *   - `backdrop`  — semi-opaque overlay behind the mobile drawer
- */
-export const appShellVariants = tv({
-  slots: {
-    root: 'flex flex-col min-h-screen bg-neutral-100',
-    header: 'shrink-0',
-    body: 'flex flex-1 min-h-0',
-    nav: 'hidden md:flex shrink-0',
-    navMobile: [
-      'flex md:hidden fixed inset-y-0 left-0 z-40',
-      // Drawer slide-in is the most prominent motion in AppShell and
-      // a clear WCAG 2.3.3 candidate. Gate the transition on
-      // `prefers-reduced-motion: no-preference`; the data-driven
-      // `-translate-x-full` / `translate-x-0` still applies, just
-      // without the smooth slide.
-      'transition-transform duration-200 ease-out motion-reduce:transition-none motion-reduce:duration-0',
-      '-translate-x-full',
-    ],
-    main: 'flex-1 min-w-0 overflow-y-auto',
-    footer: 'shrink-0',
-    backdrop: [
-      'md:hidden fixed inset-0 z-30 bg-black/40',
-      // Backdrop opacity fade — micro motion, gated for consistency.
-      'transition-opacity duration-200 motion-reduce:transition-none motion-reduce:duration-0',
-      'opacity-0 pointer-events-none',
-    ],
-  },
-  variants: {
-    navOpen: {
-      true: {
-        navMobile: 'translate-x-0',
-        backdrop: 'opacity-100 pointer-events-auto',
-      },
-    },
-  },
-  defaultVariants: {
-    navOpen: false,
-  },
-});
-export type AppShellVariants = VariantProps<typeof appShellVariants>;

package/src/components/AspectRatio/AspectRatio.test.tsx DELETED Viewed

@@ -1,173 +0,0 @@
-// @vitest-environment jsdom
-import { describe, it, expect } from 'vitest';
-import { render } from '@testing-library/react';
-import { AspectRatio } from './AspectRatio.js';
-describe('<AspectRatio>', () => {
-  // ─── Default rendering ──────────────────────────────────────────────
-  describe('default rendering', () => {
-    it('renders a <div> by default', () => {
-      const { container } = render(<AspectRatio>x</AspectRatio>);
-      expect(container.firstElementChild?.tagName).toBe('DIV');
-    });
-    it('default ratio is 1 (square)', () => {
-      const { container } = render(<AspectRatio>x</AspectRatio>);
-      const el = container.firstElementChild as HTMLElement;
-      expect(el.style.aspectRatio).toBe('1 / 1');
-    });
-    it('always has w-full baseline', () => {
-      const { container } = render(<AspectRatio>x</AspectRatio>);
-      expect(container.firstElementChild?.className).toContain('w-full');
-    });
-  });
-  // ─── ratio prop ─────────────────────────────────────────────────────
-  describe('ratio', () => {
-    it('numeric ratio 16/9 → "1.7777… / 1"', () => {
-      const { container } = render(<AspectRatio ratio={16 / 9}>x</AspectRatio>);
-      const el = container.firstElementChild as HTMLElement;
-      // 16/9 ≈ 1.7777, formatted as "<number> / 1"
-      expect(el.style.aspectRatio).toMatch(/^1\.\d+ \/ 1$/);
-    });
-    it('numeric ratio 4/3', () => {
-      const { container } = render(<AspectRatio ratio={4 / 3}>x</AspectRatio>);
-      const el = container.firstElementChild as HTMLElement;
-      expect(el.style.aspectRatio).toMatch(/^1\.\d+ \/ 1$/);
-    });
-    it('string ratio "16 / 9" passes through', () => {
-      const { container } = render(<AspectRatio ratio="16 / 9">x</AspectRatio>);
-      const el = container.firstElementChild as HTMLElement;
-      expect(el.style.aspectRatio).toBe('16 / 9');
-    });
-    it('string ratio "21/9" passes through (ultrawide)', () => {
-      const { container } = render(<AspectRatio ratio="21/9">x</AspectRatio>);
-      const el = container.firstElementChild as HTMLElement;
-      expect(el.style.aspectRatio).toBe('21/9');
-    });
-  });
-  // ─── Override ───────────────────────────────────────────────────────
-  describe('override', () => {
-    it('sx adds utility classes', () => {
-      const { container } = render(
-        <AspectRatio ratio={16 / 9} sx="rounded-xl overflow-hidden">
-          x
-        </AspectRatio>,
-      );
-      const cls = container.firstElementChild?.className ?? '';
-      expect(cls).toContain('rounded-xl');
-      expect(cls).toContain('overflow-hidden');
-    });
-    it('user style merges with aspect-ratio', () => {
-      const { container } = render(
-        <AspectRatio ratio={1} style={{ backgroundColor: 'red' }}>x</AspectRatio>,
-      );
-      const el = container.firstElementChild as HTMLElement;
-      expect(el.style.backgroundColor).toBe('red');
-      expect(el.style.aspectRatio).toBe('1 / 1');
-    });
-    it('user style aspect-ratio overrides the prop (last wins)', () => {
-      const { container } = render(
-        <AspectRatio ratio={1} style={{ aspectRatio: '2 / 1' }}>x</AspectRatio>,
-      );
-      const el = container.firstElementChild as HTMLElement;
-      // Inline style merge — user's later spread wins
-      expect(el.style.aspectRatio).toBe('2 / 1');
-    });
-  });
-  // ─── Polymorphism ───────────────────────────────────────────────────
-  describe('polymorphism', () => {
-    it('as="figure" renders <figure>', () => {
-      const { container } = render(
-        <AspectRatio as="figure" ratio={1}>x</AspectRatio>,
-      );
-      expect(container.firstElementChild?.tagName).toBe('FIGURE');
-    });
-    it('as="picture" works for responsive image markup', () => {
-      const { container } = render(
-        <AspectRatio as="picture" ratio={16 / 9}>
-          <img src="x.jpg" alt="" />
-        </AspectRatio>,
-      );
-      expect(container.firstElementChild?.tagName).toBe('PICTURE');
-    });
-  });
-  // ─── Child rendering ────────────────────────────────────────────────
-  describe('child rendering', () => {
-    it('renders an <img> child', () => {
-      const { container } = render(
-        <AspectRatio ratio={16 / 9}>
-          <img src="hero.jpg" alt="hero" className="w-full h-full object-cover" />
-        </AspectRatio>,
-      );
-      const img = container.querySelector('img');
-      expect(img?.getAttribute('src')).toBe('hero.jpg');
-    });
-    it('renders multiple children (e.g. overlay pattern)', () => {
-      const { container } = render(
-        <AspectRatio ratio={16 / 9}>
-          <img src="hero.jpg" alt="hero" />
-          <div className="absolute inset-0 bg-black/40" />
-        </AspectRatio>,
-      );
-      expect(container.firstElementChild?.children.length).toBe(2);
-    });
-  });
-  // ─── Pass-through ───────────────────────────────────────────────────
-  it('forwards data-* + aria-*', () => {
-    const { container } = render(
-      <AspectRatio data-testid="ar" aria-label="hero">x</AspectRatio>,
-    );
-    const el = container.firstElementChild;
-    expect(el?.getAttribute('data-testid')).toBe('ar');
-    expect(el?.getAttribute('aria-label')).toBe('hero');
-  });
-  // ─── F11-bis edge cases ─────────────────────────────────────────────
-  describe('extreme ratio values', () => {
-    it('ratio="21 / 9" (ultrawide cinema) passes through verbatim', () => {
-      const { container } = render(<AspectRatio ratio="21 / 9">x</AspectRatio>);
-      expect((container.firstElementChild as HTMLElement).style.aspectRatio).toBe('21 / 9');
-    });
-    it('ratio="9 / 16" (portrait video) passes through verbatim', () => {
-      const { container } = render(<AspectRatio ratio="9 / 16">x</AspectRatio>);
-      expect((container.firstElementChild as HTMLElement).style.aspectRatio).toBe('9 / 16');
-    });
-    it('numeric tiny ratio (0.5) formats as "0.5 / 1"', () => {
-      const { container } = render(<AspectRatio ratio={0.5}>x</AspectRatio>);
-      expect((container.firstElementChild as HTMLElement).style.aspectRatio).toBe('0.5 / 1');
-    });
-    it('numeric large ratio (3) formats as "3 / 1"', () => {
-      const { container } = render(<AspectRatio ratio={3}>x</AspectRatio>);
-      expect((container.firstElementChild as HTMLElement).style.aspectRatio).toBe('3 / 1');
-    });
-  });
-  describe('rounded clipped media pattern (the #1 doc gotcha)', () => {
-    it('rounded + overflow-hidden both end up on the className', () => {
-      const { container } = render(
-        <AspectRatio ratio={16 / 9} sx="rounded-2xl overflow-hidden">
-          <img src="x.jpg" alt="" className="w-full h-full object-cover" />
-        </AspectRatio>,
-      );
-      const cls = container.firstElementChild?.className ?? '';
-      expect(cls).toContain('rounded-2xl');
-      expect(cls).toContain('overflow-hidden');
-    });
-  });
-});

package/src/components/AspectRatio/AspectRatio.tsx DELETED Viewed

@@ -1,73 +0,0 @@
-import { forwardRef, type CSSProperties, type ElementType } from 'react';
-import { cn } from '../../utils/cn.js';
-import type { AspectRatioProps } from './aspectRatio.types.js';
-/**
- * `<AspectRatio>` — locks the aspect ratio of its child container,
- * regardless of width. The classic use is responsive images and
- * embedded media: an `<img>` that takes 100% of the available width
- * but always renders at 16:9 (or 1:1, or whatever the source ratio is)
- * — no jumping layouts during image load, no whitespace below the
- * media, no JS measurement.
- *
- * Implementation: native CSS `aspect-ratio` property. Supported in
- * every browser shipped from 2021 onward (Chrome 88, Firefox 89,
- * Safari 15, Edge 88). No padding-bottom hack — that workaround
- * predates the native property and brings ugly absolute-positioning
- * requirements on the child.
- *
- * Why a component if it's "just one CSS property"?
- *   Two reasons:
- *     1. Discoverability — `<AspectRatio ratio={16/9}>` documents the
- *        intent at the call site. `style={{ aspectRatio: '16/9' }}` is
- *        the same thing functionally, but harder to spot in a 200-line
- *        component file.
- *     2. Composition — pairs naturally with `sx="rounded-xl overflow-hidden"`
- *        for the canonical "rounded clipped media" pattern. Forgetting
- *        the `overflow-hidden` is the #1 mistake we want to prevent
- *        through documentation (it's in this component's MDX, at the
- *        top of the Notes).
- *
- * Child contract:
- *   The single child is expected to fill the container — typically
- *   `<img>` / `<video>` with `className="w-full h-full object-cover"`.
- *   We don't force this via CSS (the consumer might want a centered
- *   icon instead of a filling image) — but it's the 99% case, and the
- *   docs show it first.
- */
-export const AspectRatio = forwardRef<HTMLElement, AspectRatioProps>(
-  function AspectRatio(props, ref) {
-    const {
-      ratio = 1,
-      as,
-      sx,
-      style,
-      children,
-      ...rest
-    } = props;
-    /*
-     * Normalise to a CSS `aspect-ratio` string. The CSS property
-     * accepts both `16/9` and `16 / 9` (with spaces), but for safety
-     * we convert numbers to the canonical `N / 1` form — `aspectRatio: 1.7777`
-     * works too, but produces an arbitrary-looking value in DevTools.
-     */
-    const aspectRatioValue = typeof ratio === 'number' ? `${ratio} / 1` : ratio;
-    const mergedStyle: CSSProperties = {
-      aspectRatio: aspectRatioValue,
-      ...style,
-    };
-    const classes = cn('w-full', sx);
-    const Tag = (as ?? 'div') as ElementType;
-    return (
-      <Tag ref={ref as never} className={classes} style={mergedStyle} {...rest}>
-        {children}
-      </Tag>
-    );
-  },
-);
-AspectRatio.displayName = 'AspectRatio';

package/src/components/AspectRatio/aspectRatio.types.ts DELETED Viewed

@@ -1,54 +0,0 @@
-import type { ElementType, HTMLAttributes, ReactNode } from 'react';
-/**
- * Props for `<AspectRatio>` — content-shape primitive that locks the
- * aspect ratio of its child regardless of width.
- *
- * Implementation: uses the native CSS `aspect-ratio` property
- * (supported in all current browsers since 2021 — Chrome 88+, Firefox 89+,
- * Safari 15+, Edge 88+). No padding-bottom hack, no JS measurement.
- *
- * `ratio` accepts:
- *   • A number — width / height. `16/9` is 1.7777…, `1` is square,
- *     `4/3` is 1.333…, `21/9` is ultrawide cinema.
- *   • A string with the CSS `aspect-ratio` syntax, e.g. `'16 / 9'`,
- *     `'4 / 3'`. Useful when you want the source ratio to read clearly
- *     in the JSX (`ratio="16 / 9"` is more legible than `ratio={16/9}`).
- *
- * The component renders a single element with `aspect-ratio: X` and
- * `width: 100%`. The child is expected to fill it — typically an
- * `<img>` or `<video>` with `className="w-full h-full object-cover"`.
- *
- * Why not a TV recipe?
- *   The ratio is arbitrary (`16/9`, `1`, `2.35`, anything). Tailwind
- *   has `aspect-square` / `aspect-video` / `aspect-[16/9]` arbitrary
- *   values, but enumerating every conceivable ratio in TV would be
- *   pointless. We set `style={{ aspectRatio }}` directly — pure CSS
- *   property, no class purge concerns.
- */
-export interface AspectRatioProps
-  extends Omit<HTMLAttributes<HTMLDivElement>, 'className'> {
-  /**
-   * Aspect ratio as width/height. Number (`16/9`) or CSS string
-   * (`'16 / 9'`). Default `1` (square).
-   */
-  ratio?: number | string;
-  /**
-   * The child that fills the locked-ratio container. Typically an
-   * `<img>` or `<video>` with `className="w-full h-full object-cover"`.
-   */
-  children?: ReactNode;
-  /**
-   * Override the rendered HTML tag. Defaults to `'div'`.
-   */
-  as?: ElementType;
-  /**
-   * Utility classes appended to the base. Resolved via `tailwind-merge`.
-   * Common overrides: `sx="rounded-xl overflow-hidden"` to clip the
-   * child's overflow (image bleeds otherwise).
-   */
-  sx?: string;
-}