sdaia-ui 1.0.1

package/src/components/DgaIcon/index.ts

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,46 @@
+/**
+ * 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

@@ -0,0 +1,236 @@
+'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

@@ -0,0 +1,38 @@
+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

@@ -0,0 +1,185 @@
+/**
+ * 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

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

package/src/components/Divider/Divider.tsx

@@ -0,0 +1,83 @@
+'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

@@ -0,0 +1,49 @@
+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;
+}