sdaia-ui 1.0.1 → 1.0.2

package/src/components/DgaIcon/index.ts

@@ -1,12 +0,0 @@
-export { DgaIcon } from './DgaIcon';
-export { DgaIconByName } from './DgaIconByName';
-export type {
-  DgaIconProps,
-  DgaIconByNameProps,
-  DgaIconName,
-  DgaIconVariant,
-} from './DgaIcon.types';
-export {
-  DGA_ICON_NAMES,
-  DGA_ICON_VARIANTS,
-} from './generated/icon-names';

package/src/components/DgaIcon/lib/decodeDataUrl.ts

@@ -1,46 +0,0 @@
-/**
- * Given a data URL of the shape `data:image/svg+xml;utf8,<svg …>…</svg>`
- * (the format emitted by `@platformscode/icons`), return:
- *   - `viewBox`   — the source viewBox (falls back to "0 0 24 24" if missing)
- *   - `innerHtml` — the markup *between* the outer `<svg>` tags, ready to
- *                   inject via `dangerouslySetInnerHTML` into a wrapper `<svg>`.
- *
- * This is a small, dependency-free parser tuned for the exact shape the
- * upstream package produces. It does not attempt to be a general SVG parser.
- *
- * Safety note: the input is always a typed named export from an npm package,
- * never user input. `dangerouslySetInnerHTML` is therefore safe at call sites.
- */
-export interface DecodedIcon {
-  viewBox: string;
-  innerHtml: string;
-}
-
-const DATA_URL_PREFIX = 'data:image/svg+xml;utf8,';
-const DEFAULT_VIEWBOX = '0 0 24 24';
-
-export function decodeDataUrl(dataUrl: string): DecodedIcon {
-  if (typeof dataUrl !== 'string' || !dataUrl.startsWith(DATA_URL_PREFIX)) {
-    return { viewBox: DEFAULT_VIEWBOX, innerHtml: '' };
-  }
-
-  const markup = dataUrl.slice(DATA_URL_PREFIX.length);
-
-  // Extract the viewBox attribute of the outer <svg …>. Both single and double
-  // quotes exist in the wild; @platformscode/icons uses double quotes, but
-  // we stay defensive.
-  const viewBoxMatch = markup.match(/<svg\b[^>]*\bviewBox=(?:"([^"]*)"|'([^']*)')/i);
-  const viewBox = viewBoxMatch?.[1] ?? viewBoxMatch?.[2] ?? DEFAULT_VIEWBOX;
-
-  // Slice between the first ">" after the opening <svg tag and the final </svg>.
-  const openTagEnd = markup.indexOf('>');
-  const closeTagStart = markup.lastIndexOf('</svg>');
-  if (openTagEnd < 0 || closeTagStart < 0 || closeTagStart <= openTagEnd) {
-    return { viewBox, innerHtml: '' };
-  }
-
-  return {
-    viewBox,
-    innerHtml: markup.slice(openTagEnd + 1, closeTagStart),
-  };
-}

package/src/components/DigitalStamp/DigitalStamp.tsx

@@ -1,236 +0,0 @@
-'use client';
-
-import { forwardRef, useCallback, useId, useState } from 'react';
-import { cn } from '../../lib/cn';
-import { Link } from '../Link';
-import {
-  SaudiFlagSVG,
-  LinkIcon,
-  LockIcon,
-  DGALogoSVG,
-  ChevronDownIcon,
-} from '../../icons/IconFactory';
-import type { DigitalStampProps, DigitalStampFeature } from './DigitalStamp.types';
-import {
-  ROOT,
-  TRIGGER_ROW,
-  TRIGGER_ROW_LEAD,
-  MESSAGE_TEXT,
-  TRIGGER,
-  TRIGGER_ICON,
-  FLAG_WRAP,
-  PANEL,
-  PANEL_INNER,
-  PANEL_CONTENT,
-  EXTENSION,
-  FEATURE_ROW,
-  FEATURE_ICON,
-  FEATURE_ICON_INNER,
-  FEATURE_TEXT_WRAP,
-  FEATURE_TITLE,
-  FEATURE_TITLE_HIGHLIGHT,
-  FEATURE_DESC,
-  REGISTRATION_CARD,
-  DGA_LOGO_WRAP,
-  REGISTRATION_TEXT_WRAP,
-  REGISTRATION_TITLE,
-  REGISTRATION_DESC,
-} from './DigitalStamp.variants';
-
-/**
- * DigitalStamp — verification banner indicating a government website is
- * registered with the Digital Government Authority. Collapsed by default;
- * expanding reveals feature highlights (domain, HTTPS) and the DGA
- * registration details.
- *
- * Micro-interactions
- * ──────────────────
- *   • Chevron rotates 180° on open (`transition-transform`).
- *   • Panel height animates via CSS grid row interpolation
- *     (`grid-rows-[0fr] → grid-rows-[1fr]`), respecting content height
- *     and `prefers-reduced-motion`.
- *   • Trigger has a visible focus ring and `aria-controls` → panel id.
- *
- * Fresh-project compatibility
- * ───────────────────────────
- *   All icons are inlined in `./icons` so the component has no project-
- *   level path alias dependencies. All colors either use tokens from
- *   `globals.css` or are hardcoded rgba with the Figma variable name in
- *   a comment in the variants file.
- */
-export const DigitalStamp = forwardRef<HTMLDivElement, DigitalStampProps>(
-  function DigitalStamp(
-    {
-      message,
-      howYouKnowLabel = 'How you know?',
-      features,
-      registrationTitle,
-      registrationDescription = 'Registered on Digital Government Authority:',
-      registrationNumber,
-      registrationHref,
-      authorityLogo,
-      flag,
-      defaultOpen = false,
-      open: openProp,
-      onOpenChange,
-      className,
-      id,
-      ...rest
-    },
-    ref,
-  ) {
-    const [internalOpen, setInternalOpen] = useState(defaultOpen);
-    const isControlled = openProp !== undefined;
-    const isOpen = isControlled ? !!openProp : internalOpen;
-
-    const reactId = useId();
-    const rootId = id ?? `digital-stamp-${reactId}`;
-    const panelId = `${rootId}-panel`;
-    const state = isOpen ? 'open' : 'closed';
-
-    const toggle = useCallback(() => {
-      const next = !isOpen;
-      if (!isControlled) setInternalOpen(next);
-      onOpenChange?.(next);
-    }, [isOpen, isControlled, onOpenChange]);
-
-    const resolvedFeatures: DigitalStampFeature[] =
-      features ?? [
-        {
-          icon: <LinkIcon />,
-          title: (
-            <>
-              Official Saudi Government websites URL ends with{' '}
-              <span className={FEATURE_TITLE_HIGHLIGHT}>.gov.sa</span>
-            </>
-          ),
-          description:
-            'Website belongs to an official government organization in the Kingdom of Saudi Arabia always ends with .gov.sa .',
-        },
-        {
-          icon: <LockIcon />,
-          title: (
-            <>
-              Official Reliable websites use{' '}
-              <span className={FEATURE_TITLE_HIGHLIGHT}>HTTPS</span>
-            </>
-          ),
-          description: 'Ensure the website is using the HTTPS protocol.',
-        },
-      ];
-
-    return (
-      <div
-        ref={ref}
-        id={rootId}
-        data-slot="digital-stamp"
-        data-state={state}
-        className={cn('group/stamp', ROOT, className)}
-        {...rest}
-      >
-        {/* Trigger row — always visible */}
-        <div className={TRIGGER_ROW} data-slot="digital-stamp-trigger-row">
-          <div className={TRIGGER_ROW_LEAD}>
-            <span className={FLAG_WRAP} data-slot="digital-stamp-flag">
-              {flag ?? <SaudiFlagSVG aria-hidden="true" />}
-            </span>
-            <span className={MESSAGE_TEXT} data-slot="digital-stamp-message">
-              {message}
-            </span>
-          </div>
-          <button
-            type="button"
-            onClick={toggle}
-            aria-expanded={isOpen}
-            aria-controls={panelId}
-            data-slot="digital-stamp-trigger"
-            className={TRIGGER}
-          >
-            <span>{howYouKnowLabel}</span>
-            <ChevronDownIcon aria-hidden="true" className={TRIGGER_ICON} />
-          </button>
-        </div>
-
-        {/* Animated panel — always rendered, height interpolated by grid */}
-        <div
-          id={panelId}
-          role="region"
-          aria-label={
-            typeof howYouKnowLabel === 'string'
-              ? howYouKnowLabel
-              : 'Digital stamp details'
-          }
-          data-slot="digital-stamp-panel"
-          data-state={state}
-          aria-hidden={!isOpen}
-          className={PANEL}
-        >
-          <div className={PANEL_INNER}>
-            <div className={PANEL_CONTENT}>
-              <div className={EXTENSION} data-slot="digital-stamp-extension">
-                {resolvedFeatures.map((f, i) => (
-                  <div
-                    key={i}
-                    className={FEATURE_ROW}
-                    data-slot="digital-stamp-feature"
-                  >
-                    <span className={FEATURE_ICON} data-slot="digital-stamp-feature-icon">
-                      <span className={FEATURE_ICON_INNER}>{f.icon}</span>
-                    </span>
-                    <div className={FEATURE_TEXT_WRAP}>
-                      <p className={FEATURE_TITLE} data-slot="digital-stamp-feature-title">
-                        {f.title}
-                      </p>
-                      <p className={FEATURE_DESC} data-slot="digital-stamp-feature-desc">
-                        {f.description}
-                      </p>
-                    </div>
-                  </div>
-                ))}
-              </div>
-
-              {(registrationNumber || registrationDescription || registrationTitle) && (
-                <div className={REGISTRATION_CARD} data-slot="digital-stamp-registration">
-                  <span
-                    className={DGA_LOGO_WRAP}
-                    data-slot="digital-stamp-authority-logo"
-                  >
-                    {authorityLogo ?? <DGALogoSVG aria-hidden="true" />}
-                  </span>
-                  <div className={REGISTRATION_TEXT_WRAP}>
-                    {registrationTitle && (
-                      <span
-                        className={REGISTRATION_TITLE}
-                        data-slot="digital-stamp-registration-title"
-                      >
-                        {registrationTitle}
-                      </span>
-                    )}
-                    {registrationDescription && (
-                      <span className={REGISTRATION_DESC}>
-                        {registrationDescription}
-                      </span>
-                    )}
-                    {registrationNumber && (
-                      <Link
-                        size="lg"
-                        variant="primary"
-                        inline
-                        href={registrationHref}
-                        data-slot="digital-stamp-registration-number"
-                      >
-                        {registrationNumber}
-                      </Link>
-                    )}
-                  </div>
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  },
-);
-
-DigitalStamp.displayName = 'DigitalStamp';

package/src/components/DigitalStamp/DigitalStamp.types.ts

@@ -1,38 +0,0 @@
-import type { HTMLAttributes, ReactNode } from 'react';
-
-export interface DigitalStampFeature {
-  /** Custom icon node. Defaults to globe / lock based on index. */
-  icon?: ReactNode;
-  /** Heading text. Supports ReactNode so parts (like `.gov.sa`) can be highlighted. */
-  title: ReactNode;
-  /** Descriptive paragraph below the title. */
-  description: ReactNode;
-}
-
-export interface DigitalStampProps
-  extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
-  /** Short verification message shown in the collapsed bar. */
-  message: ReactNode;
-  /** Label for the disclosure trigger (e.g. "How you know?"). */
-  howYouKnowLabel?: ReactNode;
-  /** Feature rows shown inside the opened panel. Defaults to domain + HTTPS. */
-  features?: DigitalStampFeature[];
-  /** Optional heading shown above the registration description (e.g. "Registered with DGA"). */
-  registrationTitle?: ReactNode;
-  /** Descriptive text before the registration number link. */
-  registrationDescription?: ReactNode;
-  /** Registration number displayed as a link. */
-  registrationNumber?: ReactNode;
-  /** href for the registration number link. */
-  registrationHref?: string;
-  /** Optional DGA (authority) logo node. A default monogram is used when omitted. */
-  authorityLogo?: ReactNode;
-  /** Optional flag node rendered on the leading side (defaults to the Saudi flag). */
-  flag?: ReactNode;
-  /** Uncontrolled initial open state. */
-  defaultOpen?: boolean;
-  /** Controlled open state. */
-  open?: boolean;
-  /** Fires when the disclosure toggles. */
-  onOpenChange?: (open: boolean) => void;
-}

package/src/components/DigitalStamp/DigitalStamp.variants.ts

@@ -1,185 +0,0 @@
-/**
- * DigitalStamp.variants.ts
- *
- * Token mapping from Figma node 4553:39693 (Digital Stamp).
- *
- * Colors that exist as tokens in globals.css are used by name.
- * Colors without a semantic token are kept as raw rgba() with the
- * original Figma variable name referenced in a comment.
- *
- *   Background/background-neutral-100      #f3f4f6   (no token)
- *   Text/text-default                      #161616   (no token)
- *   Text/text-primary-paragraph            #384250   (no token)
- *   Link/link-primary / Text/text-primary  #1b8354   (no token — used via <Link>)
- *   Border/border-success                  #067647   (no token)
- *   Shadows/shadow-xs                      0 1px 2px rgba(16,24,40,0.05)
- */
-
-/* ── Root ─────────────────────────────────────────────────────────────────
- * Full width; neutral-100 light bg, near-black dark bg (hardcoded because
- * no dark-mode token exists for neutral-100). `overflow-hidden` keeps the
- * animated panel from leaking before it reaches its final height.
- */
-export const ROOT = [
-  'w-full',
-  'bg-[rgba(243,244,246,1)] dark:bg-[rgba(22,22,22,1)]',
-  'overflow-hidden',
-].join(' ');
-
-/* ── Trigger row (always visible) ────────────────────────────────────────
- * Mobile:  px-xl, py-sm
- * Desktop: px-4xl, py-0 with min-h-[32px] so a collapsed row keeps 32px
- *          height without stretching when opened.
- */
-export const TRIGGER_ROW = [
-  'flex flex-wrap items-center gap-spacing-md',
-  'px-spacing-xl md:px-spacing-4xl',
-  'py-spacing-sm md:py-0 md:min-h-[32px]',
-].join(' ');
-
-/* Inner group holding [flag] [message] — grows to push the trigger to end */
-export const TRIGGER_ROW_LEAD = [
-  'flex flex-1 flex-wrap items-center gap-spacing-md min-w-0',
-].join(' ');
-
-/* Collapsed-row message text — Figma Text sm/Medium on Text/text-default. */
-export const MESSAGE_TEXT = [
-  'text-text-sm font-[500]',
-  'text-[rgba(22,22,22,1)] dark:text-white',
-].join(' ');
-
-/* Disclosure trigger ("How you know?") — brand green, transparent ring
- * offset so it looks right against any parent background. */
-export const TRIGGER = [
-  'ms-auto inline-flex items-center gap-spacing-xs',
-  'rounded-[4px]',
-  'text-text-sm font-[400]',
-  'text-[rgba(27,131,84,1)] dark:text-white',
-  'hover:underline',
-  'focus-visible:outline-none focus-visible:ring-2',
-  'focus-visible:ring-[rgba(27,131,84,0.7)] focus-visible:ring-offset-2',
-  'focus-visible:ring-offset-transparent',
-  'motion-feedback cursor-pointer',
-].join(' ');
-
-/* Chevron in the trigger — 16 px (icon-md), rotates 180° when opened.
- * Uses transition-transform so the rotation is smooth. */
-export const TRIGGER_ICON = [
-  'size-icon-md shrink-0',
-  'transition-transform duration-200 ease-out',
-  'group-data-[state=open]/stamp:rotate-180',
-].join(' ');
-
-/* Flag wrapper — keeps intrinsic 20×14. */
-export const FLAG_WRAP = [
-  'inline-flex shrink-0 w-[20px] h-[14px]',
-  '[&>svg]:w-full [&>svg]:h-full',
-].join(' ');
-
-/* ── Animated panel ──────────────────────────────────────────────────────
- * Uses CSS Grid row-size interpolation for a height transition that
- * respects the content's intrinsic height (no max-height guess-work).
- */
-export const PANEL = [
-  'grid grid-rows-[0fr] data-[state=open]:grid-rows-[1fr]',
-  'transition-[grid-template-rows] duration-300 ease-out',
-  'motion-reduce:transition-none',
-].join(' ');
-
-export const PANEL_INNER = [
-  'overflow-hidden min-h-0',
-].join(' ');
-
-/* Panel content — gets the padding and gap only when the panel opens.
- * pt-5xl replaces the original gap-5xl between trigger and features. */
-export const PANEL_CONTENT = [
-  'flex flex-col gap-spacing-5xl',
-  'px-spacing-xl md:px-spacing-4xl',
-  'pt-spacing-5xl',
-  'pb-spacing-xl md:pb-spacing-4xl',
-].join(' ');
-
-/* ── Extension (features row) ─────────────────────────────────────────── */
-export const EXTENSION = [
-  'flex flex-col md:flex-row flex-wrap items-start gap-spacing-xl w-full',
-].join(' ');
-
-/* Single feature row (icon + text). gap grows from 12 → 24 px on desktop. */
-export const FEATURE_ROW = [
-  'flex flex-1 items-start gap-spacing-lg md:gap-spacing-3xl min-w-0',
-].join(' ');
-
-/* Featured icon wrapper — bordered circle with drop shadow.
- * Mobile 32 px / desktop 48 px. Border-success hardcoded (no token).
- * `text-[#067647]` sets `currentColor` so the inner glyph inherits
- * the green fill without further configuration. */
-export const FEATURE_ICON = [
-  'shrink-0 inline-flex items-center justify-center',
-  'w-[32px] h-[32px] md:w-[48px] md:h-[48px]',
-  'rounded-full',
-  'border border-[rgba(6,118,71,1)]',
-  'shadow-[0px_1px_2px_0px_rgba(16,24,40,0.05)]',
-  'text-[rgba(6,118,71,1)] dark:text-[rgba(6,118,71,1)]',
-  'bg-white dark:bg-transparent',
-].join(' ');
-
-/* Inner glyph — 16 px mobile / 24 px desktop (half the outer circle). */
-export const FEATURE_ICON_INNER = [
-  'w-[16px] h-[16px] md:w-[24px] md:h-[24px]',
-  '[&>svg]:w-full [&>svg]:h-full',
-].join(' ');
-
-export const FEATURE_TEXT_WRAP = [
-  'flex flex-1 flex-col gap-spacing-lg min-w-0',
-].join(' ');
-
-/* Feature title — Text lg/Semibold (18 px desktop). */
-export const FEATURE_TITLE = [
-  'text-text-lg font-[600]',
-  'text-[rgba(22,22,22,1)] dark:text-white',
-].join(' ');
-
-/* Highlighted segment (`.gov.sa`, `HTTPS`) — brand green, same size/weight. */
-export const FEATURE_TITLE_HIGHLIGHT = [
-  'font-[600]',
-  'text-[rgba(27,131,84,1)]',
-].join(' ');
-
-/* Feature description — Text md/Regular, primary-paragraph color. */
-export const FEATURE_DESC = [
-  'text-text-md font-[400]',
-  'text-[rgba(56,66,80,1)] dark:text-[rgba(209,213,219,1)]',
-].join(' ');
-
-/* ── DGA registration card ──────────────────────────────────────────────
- * White card on the neutral background, radius 8 px, padding 24 × 8.
- */
-export const REGISTRATION_CARD = [
-  'flex flex-wrap items-center gap-spacing-3xl',
-  'w-full',
-  'rounded-[8px]',
-  'bg-white dark:bg-[rgba(31,41,55,1)]',
-  'px-spacing-3xl py-spacing-md',
-].join(' ');
-
-/* DGA logo wrapper — intrinsic 21 × 31. */
-export const DGA_LOGO_WRAP = [
-  'inline-flex shrink-0 w-[21px] h-[31px]',
-  '[&>svg]:w-full [&>svg]:h-full',
-].join(' ');
-
-export const REGISTRATION_TEXT_WRAP = [
-  'flex flex-1 flex-wrap items-center gap-spacing-sm min-w-0',
-].join(' ');
-
-/* Registration title — text-md semibold on default text color. */
-export const REGISTRATION_TITLE = [
-  'text-text-md font-[600]',
-  'text-[rgba(22,22,22,1)] dark:text-white',
-].join(' ');
-
-/* Registration description — text-md regular on default text color. */
-export const REGISTRATION_DESC = [
-  'text-text-md font-[400]',
-  'text-[rgba(22,22,22,1)] dark:text-white',
-].join(' ');

package/src/components/DigitalStamp/index.ts

@@ -1,2 +0,0 @@
-export { DigitalStamp } from './DigitalStamp';
-export type { DigitalStampProps, DigitalStampFeature } from './DigitalStamp.types';

package/src/components/Divider/Divider.tsx

@@ -1,83 +0,0 @@
-'use client';
-
-import { forwardRef } from 'react';
-import { cn } from '../../lib/cn';
-import type { DividerProps } from './Divider.types';
-import {
-  COLOR,
-  THICKNESS_H,
-  THICKNESS_V,
-  LENGTH_PADDING,
-  CONTAINER_H,
-  CONTAINER_V,
-  LINE_H,
-  LINE_V,
-} from './Divider.variants';
-
-/**
- * Divider — a semantic horizontal or vertical separator line.
- *
- * Props:
- *   lineType   'horizontal' | 'vertical'                     default: 'horizontal'
- *   color      'neutral' | 'primary'                         default: 'neutral'
- *   thickness  'hairline' | 'thin' | 'regular' | 'thick'    default: 'hairline'
- *   length     'full' | 'inset' | 'inset-start' | 'inset-end'  default: 'full'
- *              (horizontal only — vertical always fills container height)
- *
- * Layout contract:
- *   horizontal → stretches to 100 % of its flex/block parent width.
- *   vertical   → stretches to the cross-axis height of its flex-row parent
- *                via `align-self: stretch` on the outer wrapper.
- *
- * RTL:
- *   `length="inset-start"` / `"inset-end"` use logical padding properties
- *   (ps-* / pe-*) so the inset mirrors correctly when `dir="rtl"` is set
- *   on any ancestor — no extra code needed.
- *
- * Dark mode:
- *   neutral → #374151   primary → #1b8354 (unchanged)
- */
-export const Divider = forwardRef<HTMLDivElement, DividerProps>(function Divider(
-  {
-    lineType = 'horizontal',
-    color = 'neutral',
-    thickness = 'hairline',
-    length = 'full',
-    rtl = false,
-    className,
-    ...rest
-  },
-  ref,
-) {
-  const isVertical = lineType === 'vertical';
-
-  return (
-    <div
-      ref={ref}
-      role="separator"
-      aria-orientation={isVertical ? 'vertical' : 'horizontal'}
-      data-slot="divider"
-      data-line-type={lineType}
-      data-color={color}
-      data-thickness={thickness}
-      data-length={isVertical ? 'full' : length}
-      dir={rtl ? 'rtl' : undefined}
-      className={cn(
-        isVertical
-          ? CONTAINER_V
-          : cn(CONTAINER_H, LENGTH_PADDING[length]),
-        className,
-      )}
-      {...rest}
-    >
-      <div
-        data-slot="divider-line"
-        className={cn(
-          isVertical ? LINE_V : LINE_H,
-          isVertical ? THICKNESS_V[thickness] : THICKNESS_H[thickness],
-          COLOR[color],
-        )}
-      />
-    </div>
-  );
-});

package/src/components/Divider/Divider.types.ts

@@ -1,49 +0,0 @@
-import type { HTMLAttributes } from 'react';
-
-/** Orientation of the divider line. */
-export type DividerLineType = 'horizontal' | 'vertical';
-
-/**
- * Color palette.
- *   neutral → Border/border-neutral-primary (#d2d6db / dark: #374151)
- *   primary → Border/border-primary (#1b8354)
- */
-export type DividerColor = 'neutral' | 'primary';
-
-/**
- * Visual weight of the line.
- *   hairline → 1 px
- *   thin     → 2 px
- *   regular  → 3 px
- *   thick    → 4 px
- */
-export type DividerThickness = 'hairline' | 'thin' | 'regular' | 'thick';
-
-/**
- * Inset padding applied to horizontal dividers.
- * Uses logical CSS properties so RTL is handled automatically:
- *   full        → no inset (full container width)
- *   inset       → spacing-3xl on both sides
- *   inset-start → spacing-3xl on inline-start (left in LTR, right in RTL)
- *   inset-end   → spacing-3xl on inline-end   (right in LTR, left in RTL)
- *
- * Note: vertical dividers always fill the container height; `length`
- * has no effect when lineType="vertical".
- */
-export type DividerLength = 'full' | 'inset' | 'inset-start' | 'inset-end';
-
-export interface DividerProps extends HTMLAttributes<HTMLDivElement> {
-  /** Orientation of the divider. Default: `'horizontal'`. */
-  lineType?: DividerLineType;
-  /** Color scheme. Default: `'neutral'`. */
-  color?: DividerColor;
-  /** Line weight. Default: `'hairline'`. */
-  thickness?: DividerThickness;
-  /**
-   * Inset variant — horizontal only.
-   * Default: `'full'`.
-   */
-  length?: DividerLength;
-  /** Mirror layout for RTL languages. */
-  rtl?: boolean;
-}