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/Dialog/Dialog.tsx DELETED Viewed

@@ -1,102 +0,0 @@
-import * as RadixDialog from '@radix-ui/react-dialog';
-import { cn } from '../../utils/cn.js';
-import { dialogVariants } from './dialog.variants.js';
-import type { DialogProps } from './dialog.types.js';
-/**
- * Dashforge TW `<Dialog>` — declarative modal dialog.
- *
- * Built on `@radix-ui/react-dialog`:
- *  - APG dialog pattern out of the box (focus trap, restore focus on
- *    close, Esc-to-close, `aria-modal`, `aria-labelledby`).
- *  - Renders into a portal (no z-index hell).
- *  - Scroll lock on `<body>` while open.
- *
- * Use the imperative `useDialog()` (export from this same module) if
- * you want a `confirm()`-style return value pattern (similar to
- * `useConfirm()` from `ConfirmDialog`). Use `<Dialog>` when you want
- * the control flow living in your component tree.
- */
-export function Dialog(props: DialogProps) {
-  const {
-    open,
-    onOpenChange,
-    children,
-    title,
-    description,
-    showCloseButton = true,
-    disableBackdropClose = false,
-    disableEscapeClose = false,
-    size = 'md',
-    sx,
-    slotProps,
-  } = props;
-  const v = dialogVariants({ size });
-  return (
-    <RadixDialog.Root open={open} onOpenChange={onOpenChange}>
-      <RadixDialog.Portal>
-        <RadixDialog.Overlay
-          className={cn(v.overlay(), slotProps?.overlay?.className)}
-        />
-        <RadixDialog.Content
-          className={cn(v.content(), sx, slotProps?.content?.className)}
-          // When no `description` is supplied we render no
-          // `<RadixDialog.Description>`. Radix then logs a dev warning
-          // unless the Content explicitly opts out via
-          // `aria-describedby={undefined}` — the documented escape
-          // hatch for description-less dialogs. Spread it ONLY in that
-          // case so a present description still auto-links its id.
-          {...(description == null
-            ? { 'aria-describedby': undefined }
-            : {})}
-          onPointerDownOutside={(event) => {
-            if (disableBackdropClose) event.preventDefault();
-          }}
-          onEscapeKeyDown={(event) => {
-            if (disableEscapeClose) event.preventDefault();
-          }}
-        >
-          {title != null && (
-            <RadixDialog.Title
-              className={cn(v.title(), slotProps?.title?.className)}
-            >
-              {title}
-            </RadixDialog.Title>
-          )}
-          {description != null && (
-            <RadixDialog.Description
-              className={cn(v.description(), slotProps?.description?.className)}
-            >
-              {description}
-            </RadixDialog.Description>
-          )}
-          <div className={cn(v.body(), slotProps?.body?.className)}>
-            {children}
-          </div>
-          {showCloseButton && (
-            <RadixDialog.Close
-              aria-label="Close"
-              className={cn(v.closeButton(), slotProps?.closeButton?.className)}
-            >
-              <svg
-                width="1em"
-                height="1em"
-                viewBox="0 0 16 16"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="1.5"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                aria-hidden="true"
-              >
-                <path d="M4 4l8 8M12 4l-8 8" />
-              </svg>
-            </RadixDialog.Close>
-          )}
-        </RadixDialog.Content>
-      </RadixDialog.Portal>
-    </RadixDialog.Root>
-  );
-}

package/src/components/Dialog/dialog.types.ts DELETED Viewed

@@ -1,62 +0,0 @@
-import type { ReactNode } from 'react';
-import type { DialogVariants } from './dialog.variants.js';
-/**
- * Per-slot className overrides for `<Dialog>`. Mirrors the
- * canonical TW slotProps shape: `{ slot?: { className?: string } }`.
- */
-export interface DialogSlotProps {
-  overlay?: { className?: string };
-  content?: { className?: string };
-  title?: { className?: string };
-  description?: { className?: string };
-  closeButton?: { className?: string };
-  body?: { className?: string };
-  actions?: { className?: string };
-}
-/**
- * Props for the declarative `<Dialog>` component.
- *
- * Built on `@radix-ui/react-dialog`. Use this when:
- *  - You want full control over the dialog's open state (controlled
- *    from a parent component).
- *  - You want to mount a custom-styled dialog body / trigger that
- *    composes with the rest of your component tree.
- *  - You don't need an imperative `confirm()`-style return value
- *    (use `useDialog()` or `useConfirm()` for those).
- *
- * Three size variants (`sm` / `md` / `lg`) with sensible defaults.
- * Backdrop + content animations respect `prefers-reduced-motion`.
- */
-export interface DialogProps extends Pick<DialogVariants, 'size'> {
-  /** Controlled open state. */
-  open: boolean;
-  /** Called when the dialog requests to change open state. */
-  onOpenChange: (open: boolean) => void;
-  /** Dialog body — usually a `<DialogContent>` subtree. */
-  children: ReactNode;
-  /** Dialog title (screen-reader announced via `aria-labelledby`). */
-  title?: ReactNode;
-  /** Dialog description (announced via `aria-describedby`). */
-  description?: ReactNode;
-  /**
-   * Show the `×` close button in the top-right corner.
-   * @default true
-   */
-  showCloseButton?: boolean;
-  /**
-   * Disable closing on backdrop click.
-   * @default false
-   */
-  disableBackdropClose?: boolean;
-  /**
-   * Disable closing on Escape key.
-   * @default false
-   */
-  disableEscapeClose?: boolean;
-  /** Root className shortcut on the content element. */
-  sx?: string;
-  /** Per-slot overrides. */
-  slotProps?: DialogSlotProps;
-}

package/src/components/Dialog/dialog.variants.ts DELETED Viewed

@@ -1,66 +0,0 @@
-import { tv, type VariantProps } from 'tailwind-variants';
-/**
- * `<Dialog>` variant recipe.
- *
- * Slots:
- *  - `overlay`  — backdrop (Radix's `DialogOverlay`)
- *  - `content`  — the dialog box itself
- *  - `title`    — heading at the top
- *  - `description` — secondary text under the title
- *  - `closeButton` — top-right `×` button
- *  - `body`     — main scrollable area
- *  - `actions`  — footer action bar
- *
- * Three sizes (`sm` / `md` / `lg`) drive the content max-width.
- * Motion is gated by `prefers-reduced-motion` so the slide-in
- * animation collapses to an instant appear on users that opt out.
- */
-export const dialogVariants = tv({
-  slots: {
-    overlay: [
-      'fixed inset-0 z-50 bg-neutral-950/60 backdrop-blur-sm',
-      'data-[state=open]:animate-in data-[state=open]:fade-in-0',
-      'data-[state=closed]:animate-out data-[state=closed]:fade-out-0',
-      'motion-reduce:transition-none motion-reduce:duration-0',
-    ],
-    content: [
-      'fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2',
-      // bg-white hardcoded (doesn't auto-invert) so `dark:` is needed.
-      // Target `dark:bg-neutral-100` = #171717 in dark mode (one
-      // elevation tier above page surface).
-      'w-full bg-white dark:bg-neutral-100 rounded-lg shadow-xl',
-      // border-neutral-200 auto-inverts — no `dark:` needed.
-      'border border-neutral-200',
-      'p-6 flex flex-col gap-4 max-h-[90vh]',
-      'focus:outline-none',
-      'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
-      'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
-      'motion-reduce:transition-none motion-reduce:duration-0',
-    ],
-    // All neutral text classes auto-invert via CSS-var swap.
-    title: 'text-lg font-semibold leading-tight text-neutral-900',
-    description: 'text-sm text-neutral-600',
-    closeButton: [
-      'absolute top-4 right-4 inline-flex items-center justify-center',
-      'h-8 w-8 rounded-md text-neutral-500 hover:text-neutral-900',
-      'hover:bg-neutral-100',
-      'focus:outline-none focus:ring-2 focus:ring-primary-500',
-      'transition-colors',
-    ],
-    body: 'flex-1 overflow-y-auto',
-    actions: 'flex justify-end gap-2 pt-2',
-  },
-  variants: {
-    size: {
-      sm: { content: 'max-w-sm' },
-      md: { content: 'max-w-md' },
-      lg: { content: 'max-w-2xl' },
-    },
-  },
-  defaultVariants: {
-    size: 'md',
-  },
-});
-export type DialogVariants = VariantProps<typeof dialogVariants>;

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

@@ -1,243 +0,0 @@
-// @vitest-environment jsdom
-import { describe, it, expect } from 'vitest';
-import { render } from '@testing-library/react';
-import { Divider } from './Divider.js';
-describe('<Divider>', () => {
-  // ─── Line-only mode ─────────────────────────────────────────────────
-  describe('line-only (no children)', () => {
-    it('renders <hr> for horizontal', () => {
-      const { container } = render(<Divider />);
-      expect(container.firstElementChild?.tagName).toBe('HR');
-    });
-    it('renders <div role="separator"> for vertical', () => {
-      const { container } = render(<Divider orientation="vertical" />);
-      const el = container.firstElementChild;
-      expect(el?.tagName).toBe('DIV');
-      expect(el?.getAttribute('role')).toBe('separator');
-    });
-    it('sets aria-orientation correctly', () => {
-      const { container: ch } = render(<Divider />);
-      expect(ch.firstElementChild?.getAttribute('aria-orientation')).toBe('horizontal');
-      const { container: cv } = render(<Divider orientation="vertical" />);
-      expect(cv.firstElementChild?.getAttribute('aria-orientation')).toBe('vertical');
-    });
-    it('horizontal applies border-t (line carrier)', () => {
-      const { container } = render(<Divider />);
-      const cls = container.firstElementChild?.className ?? '';
-      expect(cls).toContain('border-t');
-    });
-    it('vertical applies border-l', () => {
-      const { container } = render(<Divider orientation="vertical" />);
-      expect(container.firstElementChild?.className).toContain('border-l');
-    });
-    it('strips <hr> UA default via border-0', () => {
-      const { container } = render(<Divider />);
-      expect(container.firstElementChild?.className).toContain('border-0');
-    });
-  });
-  // ─── Variants — line style ──────────────────────────────────────────
-  describe('variant', () => {
-    it('default solid', () => {
-      const { container } = render(<Divider />);
-      expect(container.firstElementChild?.className).toContain('border-solid');
-    });
-    it('dashed', () => {
-      const { container } = render(<Divider variant="dashed" />);
-      expect(container.firstElementChild?.className).toContain('border-dashed');
-    });
-    it('dotted', () => {
-      const { container } = render(<Divider variant="dotted" />);
-      expect(container.firstElementChild?.className).toContain('border-dotted');
-    });
-  });
-  // ─── Color intent ───────────────────────────────────────────────────
-  describe('color', () => {
-    it('default neutral', () => {
-      const { container } = render(<Divider />);
-      const cls = container.firstElementChild?.className ?? '';
-      // Sprint 4.3 identity sweep: neutral palette auto-inverts via
-      // the dashforgePreset() CSS-var swap — no `dark:` needed.
-      expect(cls).toContain('border-neutral-200');
-      expect(cls).not.toContain('dark:border-neutral-');
-    });
-    it('color="primary"', () => {
-      const { container } = render(<Divider color="primary" />);
-      expect(container.firstElementChild?.className).toContain('border-primary-300');
-    });
-    it('color="danger"', () => {
-      const { container } = render(<Divider color="danger" />);
-      expect(container.firstElementChild?.className).toContain('border-danger-300');
-    });
-  });
-  // ─── Labeled mode ───────────────────────────────────────────────────
-  describe('labeled (with children)', () => {
-    it('renders 3 children: line, label, line', () => {
-      const { container } = render(<Divider>OR</Divider>);
-      const root = container.firstElementChild;
-      expect(root?.children.length).toBe(3);
-    });
-    it('label text is preserved', () => {
-      const { container } = render(<Divider>OR</Divider>);
-      expect(container.firstElementChild?.textContent).toBe('OR');
-    });
-    it('root has role="separator" + aria-orientation', () => {
-      const { container } = render(<Divider>OR</Divider>);
-      const root = container.firstElementChild;
-      expect(root?.getAttribute('role')).toBe('separator');
-      expect(root?.getAttribute('aria-orientation')).toBe('horizontal');
-    });
-    it('line segments are aria-hidden (separator role is on the root)', () => {
-      const { container } = render(<Divider>OR</Divider>);
-      const lines = container.firstElementChild?.querySelectorAll('span[aria-hidden]');
-      expect(lines?.length).toBe(2);
-    });
-    it('center alignment: both segments flex-1', () => {
-      const { container } = render(<Divider align="center">OR</Divider>);
-      const lines = container.firstElementChild?.querySelectorAll('span[aria-hidden]');
-      lines?.forEach((line) => {
-        expect(line.className).toContain('flex-1');
-      });
-    });
-    it('start alignment: left segment is short stub', () => {
-      const { container } = render(<Divider align="start">OR</Divider>);
-      const lines = container.firstElementChild?.querySelectorAll('span[aria-hidden]');
-      expect(lines?.[0].className).toContain('basis-8');
-      expect(lines?.[1].className).toContain('flex-1');
-    });
-    it('end alignment: right segment is short stub', () => {
-      const { container } = render(<Divider align="end">OR</Divider>);
-      const lines = container.firstElementChild?.querySelectorAll('span[aria-hidden]');
-      expect(lines?.[0].className).toContain('flex-1');
-      expect(lines?.[1].className).toContain('basis-8');
-    });
-    it('label gets shrink-0 + padding so it does not collapse', () => {
-      const { container } = render(<Divider>Hello</Divider>);
-      const label = container.firstElementChild?.children[1] as HTMLElement;
-      expect(label.className).toContain('shrink-0');
-      expect(label.className).toContain('px-3');
-    });
-    it('color applies to both segments in labeled mode', () => {
-      const { container } = render(<Divider color="primary">OR</Divider>);
-      const lines = container.firstElementChild?.querySelectorAll('span[aria-hidden]');
-      lines?.forEach((line) => {
-        expect(line.className).toContain('border-primary-300');
-      });
-    });
-    it('renders complex children (JSX)', () => {
-      const { container } = render(
-        <Divider>
-          <strong>Section title</strong>
-        </Divider>,
-      );
-      const label = container.firstElementChild?.children[1];
-      expect(label?.querySelector('strong')?.textContent).toBe('Section title');
-    });
-  });
-  // ─── Override ───────────────────────────────────────────────────────
-  describe('override', () => {
-    it('sx wins over variant defaults', () => {
-      const { container } = render(<Divider sx="border-t-4" />);
-      const cls = container.firstElementChild?.className ?? '';
-      expect(cls).toContain('border-t-4');
-      // tailwind-merge collapses border-t → border-t-4
-      expect(cls).not.toMatch(/border-t (?!-)/);
-    });
-    it('sx applies on root in labeled mode', () => {
-      const { container } = render(<Divider sx="my-8">OR</Divider>);
-      expect(container.firstElementChild?.className).toContain('my-8');
-    });
-  });
-  // ─── Pass-through ───────────────────────────────────────────────────
-  describe('pass-through', () => {
-    it('forwards data-* on root', () => {
-      const { container } = render(<Divider data-testid="d" />);
-      expect(container.firstElementChild?.getAttribute('data-testid')).toBe('d');
-    });
-    it('forwards data-* in labeled mode too', () => {
-      const { container } = render(<Divider data-testid="d">OR</Divider>);
-      expect(container.firstElementChild?.getAttribute('data-testid')).toBe('d');
-    });
-  });
-  // ─── F11-bis edge cases ─────────────────────────────────────────────
-  describe('color — every intent', () => {
-    const INTENTS = ['secondary', 'success', 'warning', 'danger', 'info'] as const;
-    it.each(INTENTS)('color="%s" emits border-%s-300 with dark pair', (color) => {
-      const { container } = render(<Divider color={color} />);
-      const cls = container.firstElementChild?.className ?? '';
-      expect(cls).toContain(`border-${color}-300`);
-      expect(cls).toContain(`dark:border-${color}-700`);
-    });
-  });
-  describe('vertical labeled mode', () => {
-    it('vertical + label renders all 3 children with vertical layout', () => {
-      const { container } = render(
-        <Divider orientation="vertical">section</Divider>,
-      );
-      const root = container.firstElementChild;
-      expect(root?.tagName).toBe('DIV');
-      expect(root?.getAttribute('aria-orientation')).toBe('vertical');
-      expect(root?.className).toContain('flex-col');
-      expect(root?.children.length).toBe(3);
-    });
-  });
-  describe('label edge values', () => {
-    it('numeric label (0) renders correctly', () => {
-      const { container } = render(<Divider>{0}</Divider>);
-      // 0 is a valid React child, should render as "0"
-      expect(container.firstElementChild?.textContent).toBe('0');
-    });
-    it('JSX with multiple elements as label', () => {
-      const { container } = render(
-        <Divider>
-          <strong>bold</strong>
-          <em> italic</em>
-        </Divider>,
-      );
-      const root = container.firstElementChild;
-      // root has 3 children (line + label-span + line); label-span has 2 nested
-      expect(root?.children.length).toBe(3);
-      expect(root?.querySelector('strong')?.textContent).toBe('bold');
-      expect(root?.querySelector('em')?.textContent).toBe(' italic');
-    });
-  });
-  describe('flexItem (no-op forward-compat hook)', () => {
-    it('flexItem prop does not crash or leak as attribute', () => {
-      const { container } = render(<Divider flexItem />);
-      const el = container.firstElementChild as HTMLElement;
-      expect(el.hasAttribute('flexitem')).toBe(false);
-      expect(el.hasAttribute('flexItem')).toBe(false);
-    });
-  });
-});

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

@@ -1,140 +0,0 @@
-import { forwardRef } from 'react';
-import { cn } from '../../utils/cn.js';
-import { dividerVariants, dividerLineVariants } from './divider.variants.js';
-import type { DividerProps } from './divider.types.js';
-/**
- * `<Divider>` — visual separator. Two modes:
- *
- *   1. Line-only (no children):
- *
- *        <Divider />
- *      →  <hr role="separator" aria-orientation="horizontal" />
- *
- *      Renders a single horizontal line via `border-t-*` on an `<hr>`
- *      (which by default has no `display`, no margin in our reset, just
- *      acts as the border carrier).
- *
- *   2. Labeled (with children):
- *
- *        <Divider><Typography variant="overline">OR</Typography></Divider>
- *      →  <div role="separator" aria-orientation="horizontal">
- *           <span aria-hidden className="flex-1 border-t" />
- *           <span className="px-3">OR</span>
- *           <span aria-hidden className="flex-1 border-t" />
- *         </div>
- *
- *      Two line segments share the available space; the label sits
- *      between them with horizontal padding for breathing room. Each
- *      line segment is `aria-hidden` (the role="separator" on the root
- *      conveys the separator semantics — duplicating it would confuse
- *      screen readers).
- *
- * Alignment:
- *   • align="start"  → label hugs the left, right segment grows
- *   • align="center" (default) → both segments equal
- *   • align="end"    → label hugs the right, left segment grows
- *
- *   Implemented by setting `flex-basis: 0` to either segment to keep
- *   it minimal. We use `basis-[2rem]` (32px short stub) rather than
- *   `basis-0` so a tiny line still hints at the divider on the squashed
- *   side — pure flex-1 vs basis-0 would collapse it invisibly.
- *
- * Vertical orientation:
- *   The line orientation flips (border-l instead of border-t). Vertical
- *   labeled dividers are RARE in practice — supported for parity but
- *   the typical use is line-only between flex row items.
- *
- * a11y:
- *   • Root element gets `role="separator"` (or implicit via `<hr>`)
- *   • `aria-orientation` is set explicitly so AT knows the axis
- *   • Labeled mode: label has no extra role; the visual layout speaks
- */
-export const Divider = forwardRef<HTMLElement, DividerProps>(
-  function Divider(props, ref) {
-    const {
-      orientation = 'horizontal',
-      align = 'center',
-      variant = 'solid',
-      color = 'neutral',
-      children,
-      flexItem,  // currently a no-op (see types) — `self-stretch` is in TV base
-      sx,
-      ...rest
-    } = props;
-    // Reference flexItem to silence unused-var lint while keeping it in the
-    // public API for parity with MUI Divider. Forward-compat hook.
-    void flexItem;
-    // ─── Mode 1: line-only (no children) ─────────────────────────────
-    if (children == null) {
-      const lineClasses = cn(
-        dividerLineVariants({ orientation, variant, color, segment: 'full' }),
-        sx,
-      );
-      // Horizontal → <hr>: zero default styling once we strip the UA
-      // default `<hr>` border via `border-0` (in `dividerLineVariants`
-      // base) and apply our own `border-t-*`. Vertical → <div> because
-      // <hr> can't be vertical cross-browser-consistently.
-      if (orientation === 'horizontal') {
-        return (
-          <hr
-            ref={ref as never}
-            role="separator"
-            aria-orientation="horizontal"
-            className={cn('border-0', lineClasses)}
-            {...rest}
-          />
-        );
-      }
-      return (
-        <div
-          ref={ref as never}
-          role="separator"
-          aria-orientation="vertical"
-          className={lineClasses}
-          {...rest}
-        />
-      );
-    }
-    // ─── Mode 2: labeled (with children) ─────────────────────────────
-    const rootClasses = cn(dividerVariants({ orientation, align }), sx);
-    /*
-     * Segment widths per `align`:
-     *   • center → both flex-1 (equal share)
-     *   • start  → left short stub, right grows
-     *   • end    → left grows, right short stub
-     *
-     * "Short stub" = 2rem so the divider visually exists on the squashed
-     * side without dominating the label.
-     */
-    const isHorizontal = orientation === 'horizontal';
-    const leftStubClass  = align === 'start' ? (isHorizontal ? 'basis-8 grow-0' : 'basis-8 grow-0') : 'flex-1';
-    const rightStubClass = align === 'end'   ? (isHorizontal ? 'basis-8 grow-0' : 'basis-8 grow-0') : 'flex-1';
-    const lineCommon = dividerLineVariants({ orientation, variant, color, segment: 'grow' });
-    const labelPadding = isHorizontal ? 'px-3' : 'py-3';
-    return (
-      <div
-        ref={ref as never}
-        role="separator"
-        aria-orientation={orientation}
-        className={rootClasses}
-        {...rest}
-      >
-        <span aria-hidden="true" className={cn(lineCommon, leftStubClass)} />
-        <span className={cn('shrink-0 text-sm text-neutral-500', labelPadding)}>
-          {children}
-        </span>
-        <span aria-hidden="true" className={cn(lineCommon, rightStubClass)} />
-      </div>
-    );
-  },
-);
-Divider.displayName = 'Divider';

package/src/components/Divider/divider.types.ts DELETED Viewed

@@ -1,52 +0,0 @@
-import type { HTMLAttributes, ReactNode } from 'react';
-import type { DividerVariants, DividerLineVariants } from './divider.variants.js';
-/**
- * Props for `<Divider>` — visual separator with optional inline label.
- *
- * Two rendering modes:
- *   • Line-only (no `children`)   — renders an `<hr>` (horizontal) or
- *                                   `<div role="separator">` (vertical).
- *   • Labeled    (with `children`) — renders a flex row: two line
- *                                    segments around the centered label.
- *                                    Canonical "OR" separator pattern.
- *
- * The user passes ONE consistent prop set; the implementation chooses
- * the mode based on whether `children` is provided.
- */
-export interface DividerProps
-  extends Omit<HTMLAttributes<HTMLElement>, 'className' | 'color' | 'children'>,
-          Pick<DividerVariants, 'orientation' | 'align'>,
-          Pick<DividerLineVariants, 'variant' | 'color'> {
-  /**
-   * Optional inline label. When present, the divider switches from
-   * "single line" to "two segments + label" layout — the canonical
-   * "OR" separator pattern between sign-in methods, section titled
-   * separators, etc.
-   *
-   * Accepts any node (string, Typography element, Stack with icon,
-   * etc.). Recommended: `<Typography variant="overline">OR</Typography>`
-   * for short uppercase labels.
-   */
-  children?: ReactNode;
-  /**
-   * In a flex Stack `direction="row"`, a `<Divider orientation="vertical">`
-   * with `flexItem` stretches to the row's cross-axis height (via
-   * `self-stretch`). Without it, vertical dividers may collapse to
-   * 0 height because there's nothing to anchor them.
-   *
-   * Implementation note: `self-stretch` is already applied on the
-   * vertical line segment by default in the TV — this prop is a
-   * no-op for now, kept for API parity with MUI's same flag (and as
-   * a forward-compatibility hook if we ever change the default).
-   */
-  flexItem?: boolean;
-  /**
-   * Utility classes appended to the variant chain. Resolved via
-   * `tailwind-merge`. Useful for one-off margin (`sx="my-8"`) or
-   * a custom border weight (`sx="border-t-2"`).
-   */
-  sx?: string;
-}