{"version":3,"sources":["../src/components/alert/alert.tsx","../src/components/alert/views/alert-screen-reader-text.tsx","../src/components/alert/views/alert-icon.tsx","../src/components/alert/views/alert-title.tsx","../src/components/alert/views/alert-content.tsx","../src/components/alert/views/alert-actions.tsx","../src/components/alert/views/alert-view.tsx","../src/components/alert/elements/dismiss-button.tsx","../src/components/form/checkbox.tsx","../src/components/images/img.tsx","../src/components/dialog/dialog-modal.tsx","../src/components/layout/landmarks.tsx","../src/components/box/box.tsx","../src/components/stack/stack.tsx","../src/components/cluster/cluster.tsx","../src/components/grid/grid.tsx","../src/components/row/row.tsx","../src/components/col/col.tsx","../src/components/flexbox/flex.tsx","../src/components/badge/badge.tsx","../src/components/tag/tag.tsx","../src/components/details/details.tsx","../src/components/theme/theme-provider.tsx","../src/components/theme/theme-toggle.tsx","../src/components/theme/fouc-script.ts"],"names":["React","SEVERITY_SCREEN_READER_TEXT","AlertScreenReaderText","severity","text","getSeverityIcon","iconProps","icon_default","AlertIcon","hideIcon","icon","ui_default","AlertTitle","title","titleLevel","TitleElement","AlertContent","children","contentType","AlertActions","actions","DismissButton","onDismiss","iconSize","button_default","dismiss_button_default","SEVERITY_ARIA_LIVE","AlertView","variant","isVisible","dismissible","onInteractionStart","onInteractionEnd","autoFocus","props","ref","useAlertBehavior","open","autoHideDuration","pauseOnHover","alertRef","setIsVisible","shouldRender","setShouldRender","isPaused","setIsPaused","handleDismiss","timer","handleKeyDown","e","pause","resume","Alert","handleInteractionStart","handleInteractionEnd","mergedIconProps","Checkbox","id","label","checked","defaultChecked","value","onChange","classes","inputClasses","styles","size","name","disabled","required","validationState","errorMessage","hintText","onBlur","onFocus","handleChange","isControlled","checkedProp","defaultCheckedProp","wasControlledRef","Input","useMemo","Img","src","alt","width","height","loading","placeholder","fetchpriority","decoding","srcSet","sizes","onError","onLoad","defaultPlaceholder","w","h","svg","fallbackPlaceholder","useState","useRef","useCallback","useEffect","DialogModal","isAlertDialog","onClose","dialogTitle","dialogLabel","btnLabel","btnSize","btnOnClick","onConfirm","confirmLabel","cancelLabel","className","hideFooter","btnProps","position","closeIconSize","isOpen","setIsOpen","lastFocusedElement","handleOpenChange","handleButtonClick","timeoutId","sharedTriggerProps","IconButton","dialog_default","Landmarks","Header","headerBackground","Main","Footer","Aside","Section","Article","Fieldset","legend","description","descriptionId","descId","Box","padding","paddingInline","paddingBlock","margin","marginInline","marginBlock","maxWidth","radius","as","utilityClasses","allClasses","Stack","gap","direction","align","justify","wrap","Cluster","Grid","columns","auto","minColumnWidth","gapX","gapY","justifyItems","alignItems","style","inlineStyles","GridItem","span","rowSpan","GridWithItem","grid_default","Row","alwaysProportional","Col","offset","order","generateFlexClasses","prefix","dirMap","wrapMap","justifyMap","alignMap","alignContentMap","FlexBase","inline","sm","md","lg","xl","rowGap","colGap","alignContent","rest","variantMap","FlexItem","grow","shrink","basis","flex","alignSelf","flexMap","basisMap","alignSelfMap","orderMap","FlexSpacer","Flex","flex_default","Badge","Tag","elm","role","Details","summary","ariaLabel","onPointerDown","onToggle","handlePointerDown","handleToggle","THEME_STORAGE_KEY","THEME_ATTRIBUTE","DARK_MEDIA","ThemeContext","readStoredPreference","storageKey","stored","systemPrefersDark","resolvePreference","pref","ThemeProvider","defaultPreference","preference","setPreferenceState","theme","setTheme","resolved","mql","handler","setPreference","next","toggleTheme","useTheme","ctx","LABELS","ICONS","ThemeToggle","display","srLabel","aria","getThemeFoucScript"],"mappings":"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","sourcesContent":["import React from \"react\";\nimport { IconProps } from \"#components/icons/types\";\nimport { AlertView } from \"./views\";\n\n// ============================================================================\n// TYPES & CONFIGURATION\n// ============================================================================\n\n/**\n * Valid severity levels for alerts.\n * Each severity has associated colors, icons, and ARIA attributes.\n */\ntype Severity = \"default\" | \"info\" | \"success\" | \"warning\" | \"error\";\n\n/**\n * Props for the Alert component.\n */\nexport type AlertProps = {\n  /**\n   * Whether the alert is open.\n   */\n  open: boolean;\n  /**\n   * The severity level of the alert.\n   * @default \"default\"\n   */\n  severity?: Severity;\n  /**\n   * The main message content.\n   */\n  children: React.ReactNode;\n  /**\n   * Optional title for the alert.\n   */\n  title?: string;\n  /**\n   * Whether the alert can be dismissed.\n   * @default false\n   */\n  dismissible?: boolean;\n  /**\n   * Callback when alert is dismissed.\n   */\n  onDismiss?: () => void;\n\n  /**\n   * Size of the severity icon in pixels.\n   * Allows customization of icon size for different contexts.\n   * @default 24\n   * @example\n   * ```tsx\n   * <Alert iconSize={32} severity=\"error\">Larger icon</Alert>\n   * <Alert iconSize={16} severity=\"info\">Smaller icon</Alert>\n   * ```\n   */\n  iconSize?: number;\n\n  /**\n   * Whether to hide the severity icon.\n   * When true, only text content is displayed.\n   * @default false\n   */\n  hideIcon?: boolean;\n\n  /**\n   * Additional props to pass to the Icon component.\n   * Allows fine-grained control over icon appearance.\n   * @example\n   * ```tsx\n   * <Alert iconProps={{ className: 'custom-icon', 'aria-label': 'Custom' }}>\n   *   Alert with custom icon props\n   * </Alert>\n   * ```\n   */\n  iconProps?: IconProps;\n\n  /**\n   * Duration in milliseconds before the alert automatically dismisses.\n   * Set to 0 or undefined to disable auto-dismiss.\n   * @default undefined\n   * @example\n   * ```tsx\n   * <Alert autoHideDuration={5000}>Success message</Alert>\n   * ```\n   */\n  autoHideDuration?: number;\n\n  /**\n   * Whether to pause auto-dismiss when the alert is hovered or focused.\n   * Complies with WCAG 2.2.1 (Timing Adjustable).\n   * @default true\n   */\n  pauseOnHover?: boolean;\n\n  /**\n   * Semantic heading level for the title (2-6).\n   * When undefined, uses <strong> element instead of heading.\n   * Use this to maintain proper heading hierarchy on the page.\n   * @default undefined\n   * @example\n   * ```tsx\n   * <Alert titleLevel={2} title=\"Section Alert\">...</Alert>\n   * <Alert titleLevel={3} title=\"Subsection Alert\">...</Alert>\n   * ```\n   */\n  titleLevel?: 2 | 3 | 4 | 5 | 6;\n\n  /**\n   * Custom action buttons to display in the alert.\n   * @example\n   * ```tsx\n   * <Alert actions={<><Button>Undo</Button><Button>Dismiss</Button></>}>\n   *   File deleted\n   * </Alert>\n   * ```\n   */\n  actions?: React.ReactNode;\n\n  /**\n   * Whether to automatically focus the alert when it becomes visible.\n   * Useful for critical alerts that require immediate attention.\n   * @default false\n   */\n  autoFocus?: boolean;\n\n  /**\n   * Visual variant of the alert.\n   * - outlined: Border with lighter background (default)\n   * - filled: Solid colored background\n   * - soft: No border, subtle background\n   * @default \"outlined\"\n   */\n  variant?: \"outlined\" | \"filled\" | \"soft\";\n\n  /**\n   * Content rendering mode for alert children.\n   * Determines how the children content is wrapped in the alert message area.\n   * - \"text\": Wraps children in a paragraph tag (default, for simple text content)\n   * - \"node\": Renders children directly without wrapper (for complex layouts, lists, or custom components)\n   * @default \"text\"\n   * @example Simple text content (uses default \"text\" mode)\n   * ```tsx\n   * <Alert severity=\"info\">\n   *   This is a simple text message that will be wrapped in a paragraph.\n   * </Alert>\n   * ```\n   * @example Complex content with list\n   * ```tsx\n   * <Alert severity=\"warning\" contentType=\"node\">\n   *   <p>Please review the following items:</p>\n   *   <ul>\n   *     <li>Check your email settings</li>\n   *     <li>Update your password</li>\n   *     <li>Enable two-factor authentication</li>\n   *   </ul>\n   * </Alert>\n   * ```\n   * @example Custom component layout\n   * ```tsx\n   * <Alert severity=\"success\" contentType=\"node\">\n   *   <div className=\"custom-layout\">\n   *     <p>Operation completed successfully!</p>\n   *     <div className=\"stats\">\n   *       <span>Items processed: 150</span>\n   *       <span>Time elapsed: 2.5s</span>\n   *     </div>\n   *   </div>\n   * </Alert>\n   * ```\n   */\n  contentType?: \"text\" | \"node\";\n} & Omit<React.HTMLAttributes<HTMLDivElement>, \"title\" | \"children\">;\n\n/**\n * Alert is a fully accessible component for displaying status messages with different severity levels.\n * It supports multiple severity types (default, info, success, warning, error) and can include\n * optional titles and dismissal functionality.\n *\n * Features:\n * - Multiple severity levels with matching visual indicators\n * - Three variants: outlined (default), filled, and soft\n * - Auto-dismiss with configurable duration and pause on hover/focus\n * - Optional title with configurable heading levels (h2-h6) for proper document structure\n * - Action buttons support for interactive alerts\n * - Accessible by default with appropriate ARIA attributes\n * - Screen reader announcements for severity levels\n * - Keyboard support (ESC to dismiss)\n * - WCAG 2.1 Level AA compliant\n *\n * Accessibility Features:\n * - Visually hidden severity text for screen readers (WCAG 1.1.1, 1.4.1)\n * - Configurable heading levels to maintain document hierarchy (WCAG 1.3.1)\n * - Visible focus indicators for keyboard navigation (WCAG 2.4.7)\n * - Adequate color contrast for all variants (WCAG 1.4.3)\n * - 44×44px minimum touch target size for dismiss button (WCAG 2.5.5)\n * - Pause auto-dismiss on hover/focus (WCAG 2.2.1)\n *\n * @example Basic Usage\n * ```tsx\n * <Alert\n *   open={true}\n *   severity=\"info\"\n *   title=\"Optional Title\"\n *   dismissible={true}\n *   onDismiss={() => console.log('Alert dismissed')}\n * >\n *   Alert message content\n * </Alert>\n * ```\n *\n * @example With Heading Level (for proper document structure)\n * ```tsx\n * <Alert\n *   open={true}\n *   severity=\"error\"\n *   title=\"Error Title\"\n *   titleLevel={2}\n *   dismissible={true}\n * >\n *   Error message\n * </Alert>\n * ```\n *\n * @example Auto-dismiss with Pause on Hover\n * ```tsx\n * <Alert\n *   open={true}\n *   severity=\"success\"\n *   autoHideDuration={5000}\n *   pauseOnHover={true}\n * >\n *   This will auto-dismiss in 5 seconds, but pauses when hovered\n * </Alert>\n * ```\n *\n * @see {@link AlertProps} for available configuration options\n */\n\n// ============================================================================\n// CUSTOM HOOK (Behavior Management)\n// ============================================================================\n\n/**\n * Custom hook that manages all Alert component behavior in one cohesive unit.\n * Consolidates visibility, auto-dismiss, keyboard, and focus management.\n *\n * @param open - Whether the alert should be open\n * @param onDismiss - Callback when alert is dismissed\n * @param dismissible - Whether the alert can be dismissed\n * @param autoHideDuration - Duration before auto-dismiss (ms)\n * @param pauseOnHover - Whether to pause auto-dismiss on hover/focus\n * @param autoFocus - Whether to auto-focus the alert\n * @param alertRef - Ref to the alert DOM element\n * @returns Object with visibility state, handlers, and event callbacks\n */\nconst useAlertBehavior = ({\n  open,\n  onDismiss,\n  dismissible,\n  autoHideDuration,\n  pauseOnHover,\n  autoFocus,\n  alertRef,\n}: {\n  open: boolean;\n  onDismiss?: () => void;\n  dismissible: boolean;\n  autoHideDuration?: number;\n  pauseOnHover: boolean;\n  autoFocus: boolean;\n  alertRef: React.RefObject<HTMLDivElement>;\n}) => {\n  const [isVisible, setIsVisible] = React.useState(open);\n  const [shouldRender, setShouldRender] = React.useState(open);\n  const [isPaused, setIsPaused] = React.useState(false);\n\n  // Dismiss handler with animation timing\n  const handleDismiss = React.useCallback((): void => {\n    setIsVisible(false);\n    // Wait for animation to complete before unmounting\n    setTimeout(() => {\n      setShouldRender(false);\n      onDismiss?.();\n    }, 300); // Match CSS transition duration\n  }, [onDismiss]);\n\n  // Visibility management - sync with open prop\n  React.useEffect(() => {\n    if (open) {\n      setShouldRender(true);\n      setIsVisible(true);\n    } else {\n      setIsVisible(false);\n    }\n  }, [open]);\n\n  // Auto-dismiss timer with pause support\n  React.useEffect(() => {\n    if (!autoHideDuration || !isVisible || isPaused) return;\n\n    const timer = setTimeout(() => {\n      handleDismiss();\n    }, autoHideDuration);\n\n    return () => clearTimeout(timer);\n  }, [autoHideDuration, isVisible, isPaused, handleDismiss]);\n\n  // ESC key support for dismissible alerts\n  React.useEffect(() => {\n    if (!dismissible || !isVisible) return;\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") {\n        handleDismiss();\n      }\n    };\n\n    document.addEventListener(\"keydown\", handleKeyDown);\n    return () => document.removeEventListener(\"keydown\", handleKeyDown);\n  }, [dismissible, isVisible, handleDismiss]);\n\n  // Auto-focus for critical alerts\n  React.useEffect(() => {\n    if (autoFocus && isVisible && alertRef.current) {\n      alertRef.current.focus();\n    }\n  }, [autoFocus, isVisible, alertRef]);\n\n  // Pause/resume handlers (memoized for stable references)\n  const pause = React.useCallback(() => {\n    if (pauseOnHover && autoHideDuration) {\n      setIsPaused(true);\n    }\n  }, [pauseOnHover, autoHideDuration]);\n\n  const resume = React.useCallback(() => {\n    if (pauseOnHover && autoHideDuration) {\n      setIsPaused(false);\n    }\n  }, [pauseOnHover, autoHideDuration]);\n\n  return {\n    isVisible,\n    shouldRender,\n    handleDismiss,\n    handleInteractionStart: pause,\n    handleInteractionEnd: resume,\n  };\n};\n\n// ============================================================================\n// MAIN COMPONENT\n// ============================================================================\n\nexport const Alert: React.FC<AlertProps> = ({\n  open,\n  severity = \"default\",\n  children,\n  title,\n  dismissible = false,\n  onDismiss,\n  iconSize,\n  iconProps,\n  hideIcon,\n  autoHideDuration,\n  pauseOnHover = true,\n  titleLevel = 3,\n  actions,\n  autoFocus = false,\n  variant = \"outlined\",\n  contentType = \"text\",\n  ...props\n}) => {\n  const alertRef = React.useRef<HTMLDivElement>(null);\n\n  // Use consolidated behavior hook\n  const {\n    isVisible,\n    shouldRender,\n    handleDismiss,\n    handleInteractionStart,\n    handleInteractionEnd,\n  } = useAlertBehavior({\n    open,\n    onDismiss,\n    dismissible,\n    autoHideDuration,\n    pauseOnHover,\n    autoFocus,\n    alertRef,\n  });\n\n  // Early return if component shouldn't render\n  if (!shouldRender) return null;\n\n  // Merge icon props with defaults\n  const mergedIconProps: IconProps = {\n    size: iconSize || 16,\n    ...iconProps,\n  };\n\n  return (\n    <AlertView\n      ref={alertRef}\n      severity={severity}\n      variant={variant}\n      isVisible={isVisible}\n      dismissible={dismissible}\n      onDismiss={handleDismiss}\n      onInteractionStart={handleInteractionStart}\n      onInteractionEnd={handleInteractionEnd}\n      autoFocus={autoFocus}\n      title={title}\n      titleLevel={titleLevel}\n      contentType={contentType}\n      actions={actions}\n      hideIcon={hideIcon}\n      iconProps={mergedIconProps}\n      {...props}\n    >\n      {children}\n    </AlertView>\n  );\n};\nexport default Alert;\nAlert.displayName = \"Alert\";\n","import React from \"react\";\n\n/**\n * Valid severity levels for alerts.\n */\ntype Severity = \"default\" | \"info\" | \"success\" | \"warning\" | \"error\";\n\n/**\n * Screen reader announcement text for each severity level.\n */\nconst SEVERITY_SCREEN_READER_TEXT: Record<Severity, string> = {\n  default: \"\",\n  info: \"Information: \",\n  success: \"Success: \",\n  warning: \"Warning: \",\n  error: \"Error: \",\n} as const;\n\n/**\n * Renders visually hidden severity text for screen readers.\n * Provides context about the alert type without visual clutter.\n *\n * @param severity - The alert severity level\n * @returns Hidden text for screen readers, or null if no text needed\n */\nexport const AlertScreenReaderText: React.FC<{ severity: Severity }> = ({ severity }) => {\n  const text = SEVERITY_SCREEN_READER_TEXT[severity];\n  if (!text) return null;\n  return <span className=\"sr-only\">{text}</span>;\n};\n","import React from \"react\";\nimport UI from \"#components/ui\";\nimport Icon from \"#components/icons/icon\";\nimport { IconProps } from \"#components/icons/types\";\n\n/**\n * Valid severity levels for alerts.\n */\ntype Severity = \"default\" | \"info\" | \"success\" | \"warning\" | \"error\";\n\n/**\n * Pure function to get the appropriate icon for a severity level.\n *\n * @param severity - The alert severity level\n * @param iconProps - Props to pass to the Icon component\n * @returns The icon element for the severity\n */\nconst getSeverityIcon = (\n  severity: Severity,\n  iconProps: IconProps\n): JSX.Element => {\n  const severityIcons: Record<Severity, JSX.Element> = {\n    info: <Icon.InfoSolid {...iconProps} />,\n    success: <Icon.SuccessSolid {...iconProps} />,\n    warning: <Icon.WarnSolid {...iconProps} />,\n    error: <Icon.AlertSolid {...iconProps} />,\n    default: <Icon.AlertSquareSolid {...iconProps} />,\n  };\n  return severityIcons[severity];\n};\n\n/**\n * Renders the severity icon with proper ARIA attributes.\n * Icon is hidden from screen readers as the text provides context.\n *\n * @param severity - The alert severity level\n * @param iconProps - Props to pass to the Icon component\n * @param hideIcon - Whether to hide the icon\n * @returns Icon element, or null if hidden\n */\nexport const AlertIcon: React.FC<{\n  severity: Severity;\n  iconProps: IconProps;\n  hideIcon?: boolean;\n}> = ({ severity, iconProps, hideIcon }) => {\n  if (hideIcon) return null;\n  const icon = getSeverityIcon(severity, iconProps);\n  return (\n    <UI aria-hidden=\"true\" className=\"alert-icon\">\n      {icon}\n    </UI>\n  );\n};\n","import React from \"react\";\nimport UI from \"#components/ui\";\n\n/**\n * Renders the alert title with configurable heading level.\n * Uses semantic heading (h2-h6) or strong element based on titleLevel prop.\n *\n * @param title - The title text to display\n * @param titleLevel - Semantic heading level (2-6)\n * @returns Title element, or null if no title provided\n */\nexport const AlertTitle: React.FC<{\n  title?: string;\n  titleLevel: 2 | 3 | 4 | 5 | 6;\n}> = ({ title, titleLevel }) => {\n  if (!title) return null;\n  const TitleElement = titleLevel ? (`h${titleLevel}` as const) : \"strong\";\n  return (\n    <UI as={TitleElement} className=\"alert-title\">\n      {title}\n    </UI>\n  );\n};\n","import React from \"react\";\nimport UI from \"#components/ui\";\n\n/**\n * Renders the alert message content.\n * Supports both simple text (wrapped in <p>) and complex node structures.\n *\n * @param children - The content to render\n * @param contentType - How to wrap the content (\"text\" or \"node\")\n * @returns Wrapped content\n */\nexport const AlertContent: React.FC<{\n  children: React.ReactNode;\n  contentType: \"text\" | \"node\";\n}> = ({ children, contentType }) => {\n  return contentType === \"node\" ? <>{children}</> : <UI as=\"p\">{children}</UI>;\n};\n","import React from \"react\";\nimport UI from \"#components/ui\";\n\n/**\n * Renders optional action buttons within the alert.\n *\n * @param actions - Action button elements to display\n * @returns Actions container, or null if no actions provided\n */\nexport const AlertActions: React.FC<{ actions?: React.ReactNode }> = ({ actions }) => {\n  if (!actions) return null;\n  return <UI as=\"div\" className=\"alert-actions\">{actions}</UI>;\n};\n","import React from \"react\";\nimport UI from \"#components/ui\";\nimport { IconProps } from \"#components/icons/types\";\nimport DismissButton from \"../elements/dismiss-button\";\nimport {\n  AlertScreenReaderText,\n  AlertIcon,\n  AlertTitle,\n  AlertContent,\n  AlertActions,\n} from \".\";\n\n/**\n * Valid severity levels for alerts.\n */\ntype Severity = \"default\" | \"info\" | \"success\" | \"warning\" | \"error\";\n\n/**\n * Maps severity levels to ARIA live region types.\n */\nconst SEVERITY_ARIA_LIVE: Record<Severity, \"polite\" | \"assertive\"> = {\n  default: \"polite\",\n  info: \"polite\",\n  success: \"polite\",\n  warning: \"polite\",\n  error: \"assertive\",\n} as const;\n\n/**\n * Props for the AlertView presentation component.\n */\nexport type AlertViewProps = {\n  /**\n   * The severity level of the alert.\n   */\n  severity: Severity;\n  /**\n   * Visual variant of the alert.\n   */\n  variant: \"outlined\" | \"filled\" | \"soft\";\n  /**\n   * Whether the alert is currently visible (for animations).\n   */\n  isVisible: boolean;\n  /**\n   * Whether the alert can be dismissed.\n   */\n  dismissible: boolean;\n  /**\n   * Callback when dismiss button is clicked.\n   */\n  onDismiss: () => void;\n  /**\n   * Handler for interaction start (hover/focus).\n   */\n  onInteractionStart: () => void;\n  /**\n   * Handler for interaction end (leave/blur).\n   */\n  onInteractionEnd: () => void;\n  /**\n   * Whether to automatically focus the alert.\n   */\n  autoFocus: boolean;\n  /**\n   * Optional title for the alert.\n   */\n  title?: string;\n  /**\n   * Semantic heading level for the title (2-6).\n   */\n  titleLevel: 2 | 3 | 4 | 5 | 6;\n  /**\n   * The main message content.\n   */\n  children: React.ReactNode;\n  /**\n   * Content rendering mode for alert children.\n   */\n  contentType: \"text\" | \"node\";\n  /**\n   * Custom action buttons to display in the alert.\n   */\n  actions?: React.ReactNode;\n  /**\n   * Whether to hide the severity icon.\n   */\n  hideIcon?: boolean;\n  /**\n   * Merged props for the Icon component.\n   */\n  iconProps: IconProps;\n} & React.ComponentProps<typeof UI>;\n\n/**\n * AlertView is a pure presentation component that renders the Alert UI structure.\n * It receives all presentation props and behavior handlers from the parent Alert component.\n *\n * This component is focused solely on rendering the visual structure and does not contain\n * any business logic or state management. All behavior is delegated to the parent.\n *\n * @param props - AlertView props including severity, variant, handlers, and content\n * @returns The rendered alert UI structure\n */\nexport const AlertView = React.forwardRef<HTMLDivElement, AlertViewProps>(\n  (\n    {\n      severity,\n      variant,\n      isVisible,\n      dismissible,\n      onDismiss,\n      onInteractionStart,\n      onInteractionEnd,\n      autoFocus,\n      title,\n      titleLevel,\n      children,\n      contentType,\n      actions,\n      hideIcon,\n      iconProps,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <UI\n        as=\"div\"\n        ref={ref}\n        role=\"alert\"\n        aria-live={SEVERITY_ARIA_LIVE[severity]}\n        aria-atomic=\"true\"\n        className={`alert alert-${severity}`}\n        data-alert={severity}\n        data-visible={isVisible}\n        data-variant={variant}\n        tabIndex={autoFocus ? -1 : undefined}\n        onMouseEnter={onInteractionStart}\n        onMouseLeave={onInteractionEnd}\n        onFocus={onInteractionStart}\n        onBlur={onInteractionEnd}\n        {...props}\n      >\n        <AlertScreenReaderText severity={severity} />\n        <AlertIcon\n          severity={severity}\n          iconProps={iconProps}\n          hideIcon={hideIcon}\n        />\n        <UI as=\"div\" classes=\"alert-message\">\n          <AlertTitle title={title} titleLevel={titleLevel} />\n          <AlertContent contentType={contentType}>{children}</AlertContent>\n          <AlertActions actions={actions} />\n        </UI>\n        {dismissible && <DismissButton onDismiss={onDismiss} />}\n      </UI>\n    );\n  }\n);\n\nAlertView.displayName = \"AlertView\";\n","import React from \"react\";\nimport Button from \"#components/buttons/button\";\nimport Icon from \"#components/icons/icon\";\n/** Props for the DismissButton component */\ntype DismissButtonProps = {\n  /** Callback function when dismiss button is clicked */\n  onDismiss: () => void;\n  /** Size of the close icon in pixels. Defaults to 16 */\n  iconSize?: number;\n};\nexport const DismissButton = React.memo(\n  ({ onDismiss, iconSize = 16 }: DismissButtonProps) => (\n    <Button\n      type=\"button\"\n      onClick={onDismiss}\n      aria-label=\"Close alert\"\n      className=\"alert-dismiss\"\n      data-btn=\"icon sm\"\n    >\n      <Icon>\n        <Icon.Close size={iconSize} />\n      </Icon>\n    </Button>\n  )\n);\n\nexport default DismissButton;\nDismissButton.displayName = \"DismissButton\";\n","import React from \"react\";\nimport { Input, type InputProps } from \"./inputs\";\n\n/**\n * Props for the Checkbox component\n *\n * A simplified, checkbox-specific interface that wraps the Input component.\n * Provides a boolean onChange API and automatic label association.\n *\n * @example\n * ```tsx\n * // Controlled mode\n * <Checkbox\n *   id=\"terms\"\n *   label=\"I accept the terms\"\n *   checked={accepted}\n *   onChange={setAccepted}\n *   required\n * />\n * ```\n *\n * @example\n * ```tsx\n * // Uncontrolled mode with default\n * <Checkbox\n *   id=\"newsletter\"\n *   label=\"Subscribe to newsletter\"\n *   defaultChecked={true}\n * />\n * ```\n */\nexport interface CheckboxProps extends Omit<\n  InputProps,\n  'type' | 'value' | 'onChange' | 'defaultValue' | 'placeholder' | 'size'\n> {\n  /**\n   * Unique identifier for the checkbox input.\n   * Required for proper label association via htmlFor attribute.\n   *\n   * @required\n   * @see {@link https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html|WCAG 4.1.2 Name, Role, Value}\n   */\n  id: string;\n\n  /**\n   * Label text or React node displayed next to the checkbox.\n   * Automatically associated with the checkbox via htmlFor.\n   *\n   * @required\n   * @see {@link https://www.w3.org/WAI/WCAG21/Understanding/labels-or-instructions.html|WCAG 3.3.2 Labels or Instructions}\n   */\n  label: React.ReactNode;\n\n  /**\n   * Predefined size variant for the checkbox.\n   * Maps to standardized size tokens for consistent sizing across the design system.\n   *\n   * Available sizes:\n   * - `xs`: Extra small (0.875rem / 14px) - Compact forms, tight spaces\n   * - `sm`: Small (1rem / 16px) - Dense layouts\n   * - `md`: Medium (1.25rem / 20px) - Default, optimal for most use cases\n   * - `lg`: Large (1.5rem / 24px) - Touch-friendly, prominent CTAs\n   *\n   * For custom sizes beyond these presets, use the `styles` prop:\n   * ```tsx\n   * styles={{ '--checkbox-size': '2rem' }}\n   * ```\n   *\n   * @default 'md'\n   * @example\n   * ```tsx\n   * <Checkbox id=\"small\" label=\"Small checkbox\" size=\"sm\" />\n   * <Checkbox id=\"large\" label=\"Large checkbox\" size=\"lg\" />\n   * ```\n   */\n  size?: 'xs' | 'sm' | 'md' | 'lg';\n\n  /**\n   * Controlled mode: Current checked state.\n   * When provided, component becomes controlled and requires onChange handler.\n   *\n   * @example\n   * ```tsx\n   * const [checked, setChecked] = useState(false);\n   * <Checkbox id=\"opt\" label=\"Option\" checked={checked} onChange={setChecked} />\n   * ```\n   */\n  checked?: boolean;\n\n  /**\n   * Uncontrolled mode: Initial checked state.\n   * Use this for forms where React doesn't need to track the checkbox state.\n   *\n   * @default false\n   * @example\n   * ```tsx\n   * <Checkbox id=\"opt\" label=\"Option\" defaultChecked={true} />\n   * ```\n   */\n  defaultChecked?: boolean;\n\n  /**\n   * Form submission value when checkbox is checked.\n   * This is the value submitted with the form when the checkbox is checked.\n   *\n   * @default \"on\"\n   */\n  value?: string;\n\n  /**\n   * Change handler with simplified boolean API.\n   * Receives true when checked, false when unchecked.\n   *\n   * @param checked - The new checked state\n   * @example\n   * ```tsx\n   * <Checkbox\n   *   id=\"opt\"\n   *   label=\"Option\"\n   *   onChange={(checked) => console.log('Checked:', checked)}\n   * />\n   * ```\n   */\n  onChange?: (checked: boolean) => void;\n\n  /**\n   * Optional custom CSS classes for the wrapper div.\n   * Applied alongside automatic checkbox wrapper styling.\n   */\n  classes?: string;\n\n  /**\n   * Optional custom CSS classes for the input element.\n   *\n   * @default \"checkbox-input\"\n   */\n  inputClasses?: string;\n\n  /**\n   * CSS custom properties for theming and custom sizing.\n   *\n   * Common variables:\n   * - `--checkbox-size`: Custom checkbox dimensions (for sizes beyond xs/sm/md/lg presets)\n   * - `--checkbox-gap`: Space between checkbox and label (default: 0.5rem)\n   * - `--checkbox-border-color`: Border color (default: var(--color-neutral-600))\n   * - `--checkbox-checked-bg`: Background color when checked (default: var(--color-success))\n   * - `--checkbox-radius`: Border radius (default: 0.25rem)\n   * - `--checkbox-focus-ring-color`: Focus ring color (default: var(--color-focus-ring))\n   * - `--checkbox-disabled-opacity`: Opacity for disabled state (default: 0.6)\n   * - `--checkbox-label-fs`: Label font size (default: 1rem)\n   *\n   * For custom sizes beyond the preset variants (xs/sm/md/lg), use `--checkbox-size`:\n   *\n   * @example\n   * ```tsx\n   * // Custom size beyond presets\n   * <Checkbox\n   *   id=\"custom\"\n   *   label=\"Custom sized (2rem)\"\n   *   styles={{\n   *     '--checkbox-size': '2rem',\n   *     '--checkbox-gap': '1rem'\n   *   }}\n   * />\n   *\n   * // Brand theming\n   * <Checkbox\n   *   id=\"branded\"\n   *   label=\"Brand checkbox\"\n   *   size=\"lg\"\n   *   styles={{\n   *     '--checkbox-checked-bg': '#0066cc',\n   *     '--checkbox-focus-ring-color': '#0066cc'\n   *   }}\n   * />\n   * ```\n   *\n   * @see {@link ./CHECKBOX-STYLES.mdx|CHECKBOX-STYLES.mdx} - Complete CSS variable reference\n   * @see {@link ./CHECKBOX.mdx|CHECKBOX.mdx} - Component documentation with examples\n   */\n  styles?: React.CSSProperties;\n}\n\n/**\n * Checkbox - Accessible checkbox input with automatic label association\n *\n * A thin wrapper around the Input component that provides a checkbox-specific API\n * with simplified boolean onChange and automatic label rendering. Leverages all\n * validation, disabled state, and ARIA logic from the base Input component.\n *\n * **Key Features:**\n * - ✅ Semantic size variants (xs, sm, md, lg) via `size` prop\n * - ✅ Boolean onChange API (`onChange={(checked) => ...}`)\n * - ✅ Automatic label association via htmlFor\n * - ✅ WCAG 2.1 AA compliant (uses aria-disabled pattern)\n * - ✅ Supports both controlled and uncontrolled modes\n * - ✅ Required indicator with asterisk\n * - ✅ Validation states (invalid, valid, none)\n * - ✅ Error messages and hint text via Input component\n * - ✅ Customizable via CSS custom properties\n * - ✅ Keyboard accessible (Space to toggle)\n * - ✅ Focus-visible indicators\n * - ✅ High contrast mode support\n *\n * @component\n * @example\n * ```tsx\n * // Basic checkbox\n * <Checkbox id=\"terms\" label=\"I accept the terms and conditions\" />\n * ```\n *\n * @example\n * ```tsx\n * // Controlled checkbox with validation\n * const [agreed, setAgreed] = useState(false);\n * <Checkbox\n *   id=\"terms\"\n *   label=\"I accept the terms\"\n *   checked={agreed}\n *   onChange={setAgreed}\n *   required\n *   validationState={agreed ? \"valid\" : \"invalid\"}\n *   errorMessage={!agreed ? \"You must accept the terms\" : undefined}\n * />\n * ```\n *\n * @example\n * ```tsx\n * // Disabled checkbox\n * <Checkbox\n *   id=\"disabled\"\n *   label=\"Disabled option\"\n *   disabled\n *   defaultChecked\n * />\n * ```\n *\n * @example\n * ```tsx\n * // Size variants\n * <Checkbox id=\"small\" label=\"Small\" size=\"sm\" />\n * <Checkbox id=\"large\" label=\"Large\" size=\"lg\" />\n * ```\n *\n * @example\n * ```tsx\n * // Custom styling\n * <Checkbox\n *   id=\"custom\"\n *   label=\"Custom sized\"\n *   styles={{\n *     '--checkbox-size': '2rem',\n *     '--checkbox-gap': '1rem'\n *   }}\n * />\n * ```\n *\n * @param {CheckboxProps} props - Component props\n * @param {React.Ref<HTMLInputElement>} ref - Forwarded ref to the input element\n * @returns {JSX.Element} Checkbox wrapper with input and label\n *\n * @see {@link ./CHECKBOX.mdx|CHECKBOX.mdx} - Complete component documentation\n * @see {@link ./CHECKBOX-STYLES.mdx|CHECKBOX-STYLES.mdx} - CSS customization guide\n * @see {@link https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html|WCAG 4.1.2 Name, Role, Value}\n * @see {@link https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html|WCAG 2.4.7 Focus Visible}\n * @see {@link https://www.w3.org/WAI/WCAG21/Understanding/error-identification.html|WCAG 3.3.1 Error Identification}\n */\nexport const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(\n  ({\n    id, label, checked, defaultChecked, value = \"on\",\n    onChange, classes, inputClasses, styles, size,\n    name, disabled, required, validationState,\n    errorMessage, hintText, onBlur, onFocus, autoFocus,\n    ...props\n  }, ref) => {\n\n    // Convert boolean onChange to native event handler\n    // Memoized to prevent unnecessary re-renders of child components\n    const handleChange = React.useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        onChange?.(e.target.checked);\n      },\n      [onChange]\n    );\n\n    // Controlled vs uncontrolled mode\n    const isControlled = checked !== undefined;\n    const checkedProp = isControlled ? { checked } : {};\n    const defaultCheckedProp = !isControlled && defaultChecked !== undefined\n      ? { defaultChecked }\n      : {};\n\n    // Dev-only validation: Warn if switching between controlled/uncontrolled\n    // This helps catch common React bugs where state management changes mid-lifecycle\n    const wasControlledRef = React.useRef(isControlled);\n\n    React.useEffect(() => {\n      if (process.env.NODE_ENV === 'development') {\n        if (wasControlledRef.current !== isControlled) {\n          // eslint-disable-next-line no-console\n          console.warn(\n            `Checkbox with id=\"${id}\" is changing from ${\n              wasControlledRef.current ? 'controlled' : 'uncontrolled'\n            } to ${\n              isControlled ? 'controlled' : 'uncontrolled'\n            }. This is likely a bug. ` +\n            `Decide between using \"checked\" (controlled) or \"defaultChecked\" (uncontrolled) and stick with it.`\n          );\n        }\n        wasControlledRef.current = isControlled;\n      }\n    }, [isControlled, id]);\n\n    // Note: No need to manage disabled class - CSS uses :has() selector with aria-disabled\n    // The Input component handles aria-disabled automatically via useDisabledState hook\n    return (\n      <div className={classes} style={styles} data-checkbox-size={size}>\n        <Input\n          ref={ref}\n          type=\"checkbox\"\n          id={id}\n          name={name}\n          value={value}\n          {...checkedProp}\n          {...defaultCheckedProp}\n          classes={inputClasses || \"checkbox-input\"}\n          disabled={disabled}\n          required={required}\n          validationState={validationState}\n          errorMessage={errorMessage}\n          hintText={hintText}\n          onChange={handleChange}\n          onBlur={onBlur}\n          onFocus={onFocus}\n          autoFocus={autoFocus}\n          {...props}\n        />\n        <label htmlFor={id} className=\"checkbox-label\">\n          {label}\n          {required && (\n            <span className=\"checkbox-required\" aria-label=\"required\">\n              {\" *\"}\n            </span>\n          )}\n        </label>\n      </div>\n    );\n  }\n);\n\nCheckbox.displayName = \"Checkbox\";\nexport default Checkbox;\n","import UI from \"../ui\";\nimport React, { useMemo } from \"react\";\nimport type { ImgProps } from \"./img.types\";\n\n/**\n * Img - A semantic image component with accessibility and performance best practices.\n *\n * This component wraps the native `<img>` element with enhanced features:\n * - **Responsive images** via optional srcset/sizes\n * - **Lazy loading** by default for performance\n * - **Error handling** with configurable fallback placeholders\n * - **Type safety** with full TypeScript support\n *\n * ## Accessibility Patterns (WCAG 2.1 AA)\n *\n * ### Decorative Images\n * Images that are purely visual decoration should use an empty alt attribute.\n * These images are typically borders, patterns, or visual separators.\n *\n * @example\n * ```tsx\n * // ✅ GOOD: Decorative border image\n * <Img src=\"/decorative-border.png\" alt=\"\" />\n *\n * // ✅ GOOD: Background pattern\n * <Img src=\"/pattern.svg\" alt=\"\" loading=\"eager\" />\n * ```\n *\n * ### Semantic Images\n * Images that convey information must have descriptive alt text that explains\n * the content and purpose of the image.\n *\n * @example\n * ```tsx\n * // ✅ GOOD: Informative image with descriptive alt\n * <Img\n *   src=\"/sales-chart.png\"\n *   alt=\"Sales chart showing 30% revenue growth in Q4 2024\"\n * />\n *\n * // ✅ GOOD: Product photo with context\n * <Img\n *   src=\"/laptop.jpg\"\n *   alt=\"Silver MacBook Pro 14-inch on wooden desk\"\n * />\n * ```\n *\n * ## Performance Optimization\n *\n * ### Lazy Loading\n * By default, images use lazy loading to improve page load performance.\n * Only use `loading=\"eager\"` for above-the-fold images.\n *\n * @example\n * ```tsx\n * // ✅ GOOD: Lazy load below-the-fold image\n * <Img src=\"/photo.jpg\" alt=\"Photo\" />\n *\n * // ✅ GOOD: Eager load hero image\n * <Img\n *   src=\"/hero.jpg\"\n *   alt=\"Hero banner\"\n *   loading=\"eager\"\n *   fetchpriority=\"high\"\n * />\n * ```\n *\n * ### Responsive Images\n * Use srcset and sizes for responsive images to serve appropriate image sizes\n * based on viewport width, improving performance and bandwidth usage.\n *\n * @example\n * ```tsx\n * // ✅ GOOD: Responsive image with multiple sizes\n * <Img\n *   src=\"/photo.jpg\"\n *   srcSet=\"/photo-320w.jpg 320w, /photo-640w.jpg 640w, /photo-1024w.jpg 1024w\"\n *   sizes=\"(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 800px\"\n *   alt=\"Responsive image adapts to viewport\"\n * />\n * ```\n *\n * ## Error Handling\n *\n * @example\n * ```tsx\n * // ✅ GOOD: Custom placeholder on error\n * <Img\n *   src=\"/photo.jpg\"\n *   placeholder=\"/fallback.png\"\n *   alt=\"User profile photo\"\n * />\n *\n * // ✅ GOOD: Custom error handler\n * <Img\n *   src=\"/photo.jpg\"\n *   onError={(e) => {\n *     console.error('Image failed to load')\n *     logToAnalytics('image_error', { src: e.currentTarget.src })\n *   }}\n *   alt=\"Photo\"\n * />\n * ```\n *\n * @param {ImgProps} props - Component props extending native img attributes\n * @returns {React.ReactElement} Image element with enhanced functionality\n *\n * @see {@link ImgProps} for complete prop documentation\n * @see https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html\n */\nexport const Img = ({\n  src = \"//\",\n  alt,\n  width = 480,\n  height,\n  styles,\n  loading = \"lazy\",\n  placeholder,\n  fetchpriority = \"low\",\n  decoding = \"auto\",\n  srcSet,\n  sizes,\n  onError,\n  onLoad,\n  ...props\n}: ImgProps) => {\n  /**\n   * Generates a performant, responsive SVG gradient placeholder.\n   * Uses data URI to avoid network requests and memoizes based on dimensions.\n   * The SVG uses viewBox for perfect scaling at any size.\n   *\n   * Features:\n   * - Zero network requests (works offline)\n   * - ~900 bytes vs. 5-10KB external image\n   * - Responsive with viewBox\n   * - Attractive gradient (indigo → purple → pink)\n   * - Dimension text for debugging\n   */\n  const defaultPlaceholder = useMemo(() => {\n    const w = typeof width === \"number\" ? width : 480;\n    const h = typeof height === \"number\" ? height : Math.round(w * 0.75);\n\n    // Responsive SVG with attractive gradient and dimension text\n    const svg = `<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 ${w} ${h}\">\n      <defs>\n        <linearGradient id=\"grad-${w}-${h}\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\n          <stop offset=\"0%\" style=\"stop-color:#6366f1;stop-opacity:1\" />\n          <stop offset=\"50%\" style=\"stop-color:#8b5cf6;stop-opacity:1\" />\n          <stop offset=\"100%\" style=\"stop-color:#ec4899;stop-opacity:1\" />\n        </linearGradient>\n      </defs>\n      <rect width=\"${w}\" height=\"${h}\" fill=\"url(#grad-${w}-${h})\"/>\n      <circle cx=\"${w * 0.15}\" cy=\"${h * 0.2}\" r=\"${Math.min(w, h) * 0.08}\" fill=\"rgba(255,255,255,0.2)\"/>\n      <path d=\"M0,${h * 0.75} Q${w * 0.25},${h * 0.65} ${w * 0.5},${h * 0.75} T${w},${h * 0.75} L${w},${h} L0,${h} Z\" fill=\"rgba(0,0,0,0.15)\"/>\n      <text x=\"50%\" y=\"50%\" dominant-baseline=\"middle\" text-anchor=\"middle\" font-family=\"system-ui,-apple-system,sans-serif\" font-size=\"${Math.max(16, Math.min(w, h) * 0.05)}\" font-weight=\"500\" fill=\"rgba(255,255,255,0.9)\">${w}×${h}</text>\n    </svg>`;\n\n    return `data:image/svg+xml,${encodeURIComponent(svg)}`;\n  }, [width, height]);\n\n  const fallbackPlaceholder = placeholder ?? defaultPlaceholder;\n\n  /**\n   * Handles image load errors.\n   * Calls custom error handler if provided, then applies fallback placeholder.\n   * The custom handler can prevent the default fallback by calling e.preventDefault().\n   */\n  const handleImgError = (\n    e: React.SyntheticEvent<HTMLImageElement, Event>\n  ): void => {\n    // Call custom error handler first (for logging, analytics, etc.)\n    if (onError) {\n      onError(e);\n    }\n\n    // Apply fallback unless preventDefault() was called\n    if (!e.defaultPrevented) {\n      // Avoid infinite error loop by checking if already showing placeholder\n      if (e.currentTarget.src !== fallbackPlaceholder) {\n        e.currentTarget.src = fallbackPlaceholder;\n      }\n    }\n  };\n\n  /**\n   * Handles successful image load.\n   * Calls custom load handler if provided.\n   */\n  const handleImgLoad = (\n    e: React.SyntheticEvent<HTMLImageElement, Event>\n  ): void => {\n    onLoad?.(e);\n  };\n\n  return (\n    <UI\n      as=\"img\"\n      src={src}\n      alt={alt}\n      width={width}\n      height={height || \"auto\"}\n      loading={loading}\n      style={styles}\n      srcSet={srcSet}\n      sizes={sizes}\n      onError={handleImgError}\n      onLoad={handleImgLoad}\n      decoding={decoding}\n      {...props}\n      {...(fetchpriority && { fetchpriority })}\n    />\n  );\n};\n\nexport default Img;\nImg.displayName = \"Img\";\n","import React, { useState, useRef, useCallback, useEffect } from \"react\";\nimport Dialog from \"./dialog\";\nimport Button from \"#components/buttons/button.jsx\";\nimport { IconButton } from \"#components/buttons/icon-button.jsx\";\nimport type { DialogModalProps } from \"./dialog.types\";\n\n/**\n * DialogModal - A wrapper component that manages dialog state and provides a trigger button.\n *\n * This is an **uncontrolled** component wrapper around the controlled Dialog component.\n * It manages the dialog's open/closed state internally and provides a button to trigger it.\n *\n * **Use this when:**\n * - You want a simple dialog with a trigger button\n * - You don't need to control the dialog state externally\n * - You want automatic focus restoration to the trigger button\n *\n * **Use the base Dialog component instead when:**\n * - You need to control dialog state from parent component\n * - You have a custom trigger mechanism\n * - You need to open dialog programmatically from multiple places\n *\n * @component\n * @param {DialogModalProps} props - Component props\n * @param {string} props.dialogTitle - Title displayed in dialog header\n * @param {ReactNode} props.children - Content to display inside the dialog\n * @param {string} [props.btnLabel=\"Open Dialog\"] - Text label for the trigger button\n * @param {\"sm\" | \"md\" | \"lg\"} [props.btnSize=\"sm\"] - Size variant for the trigger button\n * @param {() => void} [props.btnOnClick] - Callback fired when trigger button is clicked (before opening)\n * @param {boolean} [props.isAlertDialog=false] - If true, renders as non-modal inline alert\n * @param {() => void} [props.onClose] - Callback fired when dialog is closed\n * @param {() => void | Promise<void>} [props.onConfirm] - Callback when confirm button is clicked\n * @param {string} [props.confirmLabel=\"Confirm\"] - Text label for confirm button\n * @param {string} [props.cancelLabel=\"Cancel\"] - Text label for cancel button\n * @param {boolean} [props.hideFooter=false] - If true, hides the footer with action buttons\n * @param {string} [props.className] - Additional CSS classes for the dialog\n * @param {string} [props.dialogLabel] - Optional aria-label for the dialog\n * @param {ReactElement} [props.icon] - Optional icon element. When provided, renders IconButton as trigger.\n * @returns {JSX.Element} A dialog with trigger button and automatic state management\n *\n * @example\n * ```tsx\n * <DialogModal\n *   dialogTitle=\"Confirm Delete\"\n *   btnLabel=\"Delete Item\"\n *   btnSize=\"md\"\n *   onConfirm={async () => await deleteItem()}\n *   confirmLabel=\"Delete\"\n *   cancelLabel=\"Cancel\"\n * >\n *   Are you sure you want to delete this item? This action cannot be undone.\n * </DialogModal>\n * ```\n *\n * @example\n * ```tsx\n * // Icon trigger — renders IconButton with visible label at desktop widths\n * <DialogModal\n *   dialogTitle=\"Settings\"\n *   btnLabel=\"Settings\"\n *   icon={<SettingsIcon />}\n *   btnProps={{ variant: \"outline\" }}\n * >\n *   Settings content here.\n * </DialogModal>\n * ```\n */\nexport const DialogModal: React.FC<DialogModalProps> = ({\n  isAlertDialog = false,\n  onClose,\n  dialogTitle,\n  dialogLabel,\n  btnLabel = \"Open Dialog\",\n  btnSize = \"sm\",\n  btnOnClick,\n  children,\n  onConfirm,\n  confirmLabel = \"Confirm\",\n  cancelLabel = \"Cancel\",\n  className,\n  hideFooter = false,\n  btnProps,\n  icon,\n  size,\n  position,\n  closeIconSize,\n}) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const lastFocusedElement = useRef<HTMLElement | null>(null);\n\n  // Handle dialog state changes\n  const handleOpenChange = useCallback(\n    (open: boolean) => {\n      setIsOpen(open);\n      // If closing, call the onClose callback\n      if (!open && onClose) {\n        onClose();\n      }\n    },\n    [onClose]\n  );\n\n  // Handle trigger button click\n  const handleButtonClick = useCallback(() => {\n    // Store the currently focused element (should be the trigger button)\n    lastFocusedElement.current = document.activeElement as HTMLElement;\n    setIsOpen(true);\n    // Call optional pre-open callback\n    if (btnOnClick) {\n      btnOnClick();\n    }\n  }, [btnOnClick]);\n\n  // Restore focus to trigger button when dialog closes\n  useEffect(() => {\n    if (!isOpen && lastFocusedElement.current) {\n      // Small delay to ensure dialog has fully closed\n      const timeoutId = setTimeout(() => {\n        lastFocusedElement.current?.focus();\n      }, 100);\n      return () => clearTimeout(timeoutId);\n    }\n  }, [isOpen]);\n\n  const sharedTriggerProps = {\n    type: \"button\" as const,\n    onClick: handleButtonClick,\n    \"aria-haspopup\": \"dialog\" as const,\n    ...btnProps,\n  };\n\n  return (\n    <>\n      {icon ? (\n        <IconButton\n          icon={icon}\n          aria-label={btnLabel}\n          label={btnLabel}\n          size={btnSize}\n          {...sharedTriggerProps}\n        />\n      ) : (\n        <Button data-btn={btnSize} {...sharedTriggerProps}>{btnLabel}</Button>\n      )}\n      <Dialog\n        isOpen={isOpen}\n        onOpenChange={handleOpenChange}\n        dialogTitle={dialogTitle}\n        dialogLabel={dialogLabel}\n        className={className}\n        isAlertDialog={isAlertDialog}\n        onConfirm={onConfirm}\n        confirmLabel={confirmLabel}\n        cancelLabel={cancelLabel}\n        hideFooter={hideFooter}\n        size={size}\n        position={position}\n        closeIconSize={closeIconSize}\n      >\n        {children}\n      </Dialog>\n    </>\n  );\n};\nexport default DialogModal;\nDialogModal.displayName = \"DialogModal\";\n","import UI from \"../ui\";\nimport React, { ReactNode } from \"react\";\n\ntype ComponentProps = React.ComponentProps<typeof UI>;\n\n/**\n * Renders children elements without any wrapping component.\n * Can be used as a placeholder when no semantic landmark is needed.\n */\nexport const Landmarks = (children?: React.FC) => <>{children}</>;\n\ntype HeaderProps = {\n  headerBackground?: ReactNode;\n} & ComponentProps;\n/**\n * Header component.\n *\n * Renders a header landmark with a section child.\n *\n * @param children - The content to render inside the header.\n * @param styles - Optional styles object.\n * @param props - Other props.\n */\nexport const Header = ({\n  id,\n  children,\n  headerBackground,\n  styles,\n  classes,\n  ...props\n}: HeaderProps) => {\n  return (\n    <UI as=\"header\" id={id} styles={styles} className={classes} {...props}>\n      {headerBackground}\n      <UI as=\"section\">{children}</UI>\n    </UI>\n  );\n};\n\n/**\n * Main component.\n *\n * Renders a main landmark.\n *\n * @param children - The content to render inside the main element.\n * @param styles - Optional styles object.\n * @param props - Other props.\n */\nexport const Main = ({\n  id,\n  children,\n  styles,\n  classes,\n  ...props\n}: ComponentProps) => {\n  return (\n    <UI as=\"main\" id={id} styles={styles} {...props} className={classes}>\n      {children}\n    </UI>\n  );\n};\n\n/**\n * Footer component that renders a footer element with a section element inside.\n * @param {ReactNode} children - Child elements to render inside the section element.\n * @param styles - CSS styles to apply to the footer element.\n * @param props - Additional props to pass to the footer element.\n * @returns A React component that renders a footer element with a section element inside.\n */\nexport const Footer = ({\n  id,\n  classes,\n  children,\n  styles = {},\n  ...props\n}: ComponentProps) => {\n  return (\n    <UI as=\"footer\" id={id} className={classes} styles={styles} {...props}>\n      <UI as=\"section\">{children || \"Copyright © 2022\"}</UI>\n    </UI>\n  );\n};\n\nexport const Aside = ({\n  id,\n  children,\n  styles = {},\n  classes,\n  ...props\n}: ComponentProps) => {\n  return (\n    <UI as=\"aside\" id={id} styles={styles} className={classes} {...props}>\n      <UI as=\"section\">{children}</UI>\n    </UI>\n  );\n};\n\n/**\n * Section component that renders a section element.\n *\n * @param children - Child elements to render inside the section.\n * @param styles - CSS styles to apply to the section.\n * @param props - Other props.\n */\nexport const Section = ({\n  id,\n  children,\n  styles,\n  classes,\n  ...props\n}: ComponentProps) => {\n  return (\n    <UI as=\"section\" id={id} styles={styles} className={classes} {...props}>\n      {children}\n    </UI>\n  );\n};\n\n/**\n * Article component renders an HTML <article> element.\n *\n * @param children - Child elements to render inside the article.\n * @param styles - CSS styles to apply to the article.\n * @param props - Additional props to pass to the article element.\n */\nexport const Article = ({\n  id,\n  children,\n\n  styles,\n  classes,\n  ...props\n}: ComponentProps) => {\n  return (\n    <UI as=\"article\" id={id} styles={styles} className={classes} {...props}>\n      {children}\n    </UI>\n  );\n};\n\ntype FieldsetProps = {\n  /**\n   * Optional legend content displayed as the fieldset's accessible name\n   */\n  legend?: ReactNode;\n  /**\n   * Additional description text for complex fieldsets\n   * Enhances accessibility via aria-describedby\n   */\n  description?: string;\n  /**\n   * Custom ID for the description element\n   * Auto-generated if description is provided without custom ID\n   */\n  descriptionId?: string;\n} & ComponentProps;\n\n/**\n * Fieldset landmark for semantic content grouping.\n * Provides WCAG 2.1 Level AA compliant form grouping with optional descriptions.\n *\n * @param legend - Optional legend content (accessible name)\n * @param description - Optional description for additional context\n * @param descriptionId - Custom ID for description element\n * @param children - Content inside fieldset section\n *\n * @example\n * ```tsx\n * <Fieldset\n *   legend=\"Shipping Address\"\n *   description=\"This address will be used for delivery\"\n * >\n *   {/* form controls *\\/}\n * </Fieldset>\n * ```\n */\nexport const Fieldset = ({\n  id,\n  children,\n  legend,\n  description,\n  descriptionId,\n  styles,\n  classes,\n  ...props\n}: FieldsetProps) => {\n  const descId = descriptionId || (description ? `${id}-desc` : undefined);\n\n  return (\n    <UI\n      as=\"fieldset\"\n      id={id}\n      styles={styles}\n      className={classes}\n      aria-describedby={descId}\n      {...props}\n    >\n      {legend && <UI as=\"legend\">{legend}</UI>}\n      {description && (\n        <p id={descId} className=\"fieldset-description\">\n          {description}\n        </p>\n      )}\n      {children}\n    </UI>\n  );\n};\n\nexport default Landmarks;\n\nLandmarks.displayName = \"Landmarks\";\nLandmarks.Header = Header;\nLandmarks.Main = Main;\nLandmarks.Footer = Footer;\nLandmarks.Aside = Aside;\nLandmarks.Section = Section;\nLandmarks.Article = Article;\nLandmarks.Fieldset = Fieldset;\n","import React from \"react\";\nimport UI from \"../ui\";\nimport type { BoxProps } from \"./box.types\";\n\n// Re-export types for convenience\nexport type { BoxProps } from \"./box.types\";\n\n/**\n * Box - A fundamental container primitive for spacing and sizing control.\n *\n * The Box component is the foundational layout primitive in fpkit, providing a flexible,\n * semantic container with comprehensive control over spacing (padding/margin), sizing,\n * and visual appearance. It uses utility classes generated from props, ensuring consistent\n * styling across the application.\n *\n * ## Key Features\n * - **Unified Spacing Scale**: Fluid responsive spacing using CSS clamp()\n * - **Logical Properties**: `padding-inline`/`padding-block` for i18n support\n * - **Polymorphic Rendering**: Render as any semantic HTML element via `as` prop\n * - **CSS Custom Properties**: All values customizable for theming\n * - **Type-Safe**: Full TypeScript support with IntelliSense\n *\n * ## Accessibility\n * - Uses semantic HTML elements by default\n * - Supports ARIA attributes via spread props\n * - Encourages semantic elements via `as` prop\n * - All props forwarded to underlying element\n *\n * ## Use Cases\n * - Container with padding/margin\n * - Centered layouts with max-width\n * - Card-like components\n * - Spacing between sections\n * - Semantic landmarks\n *\n * @example\n * // Basic container with padding\n * <Box padding=\"md\">\n *   <h1>Content</h1>\n * </Box>\n *\n * @example\n * // Centered container with max width\n * <Box\n *   padding=\"lg\"\n *   maxWidth=\"container\"\n *   style={{ marginInline: 'auto' }}\n * >\n *   <article>Centered content</article>\n * </Box>\n *\n * @example\n * // Card-like box with radius\n * <Box\n *   padding=\"lg\"\n *   radius=\"md\"\n *   as=\"article\"\n *   styles={{\n *     backgroundColor: '#fff',\n *     boxShadow: '0 1px 3px rgba(0,0,0,0.1)'\n *   }}\n * >\n *   <h2>Card Title</h2>\n *   <p>Card content</p>\n * </Box>\n *\n * @example\n * // Asymmetric spacing with logical properties\n * <Box\n *   paddingInline=\"xl\"\n *   paddingBlock=\"md\"\n *   as=\"section\"\n * >\n *   <p>Wide horizontal padding, narrow vertical</p>\n * </Box>\n *\n * @example\n * // Semantic section with spacing\n * <Box as=\"section\" padding=\"xl\" margin=\"lg\">\n *   <h2>Section Title</h2>\n *   <p>Section content...</p>\n * </Box>\n *\n * @see {@link BoxProps} for complete props documentation\n */\nexport const Box = React.forwardRef<HTMLElement, BoxProps>(\n  (\n    {\n      padding,\n      paddingInline,\n      paddingBlock,\n      margin,\n      marginInline,\n      marginBlock,\n      width,\n      maxWidth,\n      radius,\n      as = \"div\",\n      className,\n      classes,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    // Build utility classes array based on props\n    const utilityClasses: string[] = [];\n\n    // Padding utilities\n    if (padding) {\n      utilityClasses.push(`box-padding-${padding}`);\n    }\n    if (paddingInline) {\n      utilityClasses.push(`box-padding-inline-${paddingInline}`);\n    }\n    if (paddingBlock) {\n      utilityClasses.push(`box-padding-block-${paddingBlock}`);\n    }\n\n    // Margin utilities\n    if (margin) {\n      utilityClasses.push(`box-margin-${margin}`);\n    }\n    if (marginInline) {\n      utilityClasses.push(`box-margin-inline-${marginInline}`);\n    }\n    if (marginBlock) {\n      utilityClasses.push(`box-margin-block-${marginBlock}`);\n    }\n\n    // Width utilities\n    if (width) {\n      utilityClasses.push(`box-width-${width}`);\n    }\n\n    // Max-width utilities\n    if (maxWidth) {\n      utilityClasses.push(`box-max-width-${maxWidth}`);\n    }\n\n    // Border radius utilities\n    if (radius) {\n      utilityClasses.push(`box-radius-${radius}`);\n    }\n\n    // Merge all classes: utility classes, className prop, and classes prop\n    const allClasses = [\n      ...utilityClasses,\n      className,\n      classes,\n    ]\n      .filter(Boolean)\n      .join(\" \");\n\n    return (\n      <UI\n        as={as}\n        ref={ref}\n        classes={allClasses || undefined}\n        {...props}\n      >\n        {children}\n      </UI>\n    );\n  }\n);\n\nBox.displayName = \"Box\";\n\nexport default Box;\n","import React from \"react\";\nimport UI from \"../ui\";\nimport type { StackProps } from \"./stack.types\";\n\n// Re-export types for convenience\nexport type { StackProps } from \"./stack.types\";\n\n/**\n * Stack - A simplified layout primitive for vertical or horizontal spacing between children.\n *\n * The Stack component provides an easy-to-use flexbox-based layout for creating vertical or\n * horizontal arrangements with consistent gap spacing. It's designed to be simpler than the\n * full Flex component, focusing on the most common stacking patterns.\n *\n * ## Key Features\n * - **Simple API**: Fewer props than Flex for common use cases\n * - **Fluid Spacing**: Responsive gap using CSS clamp()\n * - **Flexbox-Based**: Reliable cross-browser layout\n * - **Polymorphic**: Render as any semantic HTML element\n * - **Type-Safe**: Full TypeScript support\n *\n * ## Accessibility\n * - Uses semantic HTML elements when appropriate via `as` prop\n * - Supports all ARIA attributes via spread props\n * - Proper focus order maintained (visual order matches DOM order)\n *\n * ## Use Cases\n * - Vertical spacing between content sections\n * - Horizontal button groups\n * - Navigation menus\n * - Form layouts\n * - Centered content (vertical/horizontal)\n *\n * @example\n * // Vertical stack with medium gap (default)\n * <Stack gap=\"md\">\n *   <h1>Title</h1>\n *   <p>Paragraph 1</p>\n *   <p>Paragraph 2</p>\n * </Stack>\n *\n * @example\n * // Horizontal button group\n * <Stack direction=\"horizontal\" gap=\"sm\">\n *   <Button>Cancel</Button>\n *   <Button variant=\"primary\">Submit</Button>\n * </Stack>\n *\n * @example\n * // Centered vertical stack\n * <Stack\n *   gap=\"lg\"\n *   align=\"center\"\n *   justify=\"center\"\n *   style={{ minHeight: '100vh' }}\n * >\n *   <Logo />\n *   <h1>Welcome</h1>\n *   <Button>Get Started</Button>\n * </Stack>\n *\n * @example\n * // Navigation with horizontal layout\n * <Stack\n *   as=\"nav\"\n *   direction=\"horizontal\"\n *   gap=\"md\"\n *   justify=\"between\"\n *   align=\"center\"\n * >\n *   <Logo />\n *   <Stack direction=\"horizontal\" gap=\"sm\">\n *     <a href=\"/about\">About</a>\n *     <a href=\"/contact\">Contact</a>\n *   </Stack>\n * </Stack>\n *\n * @see {@link StackProps} for complete props documentation\n */\nexport const Stack = React.forwardRef<HTMLElement, StackProps>(\n  (\n    {\n      gap,\n      direction = \"vertical\",\n      align,\n      justify,\n      wrap,\n      as = \"div\",\n      className,\n      classes,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    // Build utility classes array based on props\n    const utilityClasses: string[] = [\"stack\"];\n\n    // Direction utilities (default is vertical/column)\n    if (direction === \"horizontal\") {\n      utilityClasses.push(\"stack-horizontal\");\n    } else {\n      utilityClasses.push(\"stack-vertical\");\n    }\n\n    // Gap utilities\n    if (gap) {\n      utilityClasses.push(`stack-gap-${gap}`);\n    }\n\n    // Align utilities (cross-axis)\n    if (align) {\n      utilityClasses.push(`stack-align-${align}`);\n    }\n\n    // Justify utilities (main-axis)\n    if (justify) {\n      utilityClasses.push(`stack-justify-${justify}`);\n    }\n\n    // Wrap utilities\n    if (wrap) {\n      utilityClasses.push(`stack-${wrap}`);\n    }\n\n    // Merge all classes: utility classes, className prop, and classes prop\n    const allClasses = [...utilityClasses, className, classes]\n      .filter(Boolean)\n      .join(\" \");\n\n    return (\n      <UI as={as} ref={ref} classes={allClasses} {...props}>\n        {children}\n      </UI>\n    );\n  }\n);\n\nStack.displayName = \"Stack\";\n\nexport default Stack;\n","import React from \"react\";\nimport UI from \"../ui\";\nimport type { ClusterProps } from \"./cluster.types\";\n\n// Re-export types for convenience\nexport type { ClusterProps } from \"./cluster.types\";\n\n/**\n * Cluster - A wrapping flex layout primitive for inline groups.\n *\n * Cluster provides a flexible layout for inline content that wraps naturally,\n * perfect for tags, badges, button groups, navigation links, or any inline\n * content that needs to flow and wrap responsively.\n *\n * ## Key Features\n * - **Auto-Wrapping**: Items wrap to next line when container is full\n * - **Fluid Spacing**: Responsive gap using CSS clamp()\n * - **Semantic Naming**: Clear intent for inline grouped content\n * - **Polymorphic**: Render as any semantic HTML element\n * - **Type-Safe**: Full TypeScript support\n *\n * ## Use Cases\n * - Tag clouds and keyword lists\n * - Button groups with wrapping\n * - Navigation breadcrumbs\n * - Badge clusters\n * - Inline action groups\n *\n * @example\n * // Tag cloud\n * <Cluster gap=\"sm\" justify=\"center\">\n *   <Tag>React</Tag>\n *   <Tag>TypeScript</Tag>\n *   <Tag>CSS</Tag>\n * </Cluster>\n *\n * @example\n * // Button group\n * <Cluster gap=\"md\">\n *   <Button>Action 1</Button>\n *   <Button>Action 2</Button>\n *   <Button>Action 3</Button>\n * </Cluster>\n *\n * @see {@link ClusterProps} for complete props documentation\n */\nexport const Cluster = React.forwardRef<HTMLElement, ClusterProps>(\n  (\n    {\n      gap,\n      justify,\n      align,\n      as = \"div\",\n      className,\n      classes,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    // Build utility classes array based on props\n    const utilityClasses: string[] = [\"cluster\"];\n\n    // Gap utilities\n    if (gap) {\n      utilityClasses.push(`cluster-gap-${gap}`);\n    }\n\n    // Justify utilities\n    if (justify) {\n      utilityClasses.push(`cluster-justify-${justify}`);\n    }\n\n    // Align utilities\n    if (align) {\n      utilityClasses.push(`cluster-align-${align}`);\n    }\n\n    // Merge all classes\n    const allClasses = [...utilityClasses, className, classes]\n      .filter(Boolean)\n      .join(\" \");\n\n    return (\n      <UI as={as} ref={ref} classes={allClasses} {...props}>\n        {children}\n      </UI>\n    );\n  }\n);\n\nCluster.displayName = \"Cluster\";\n\nexport default Cluster;\n","import React from \"react\";\nimport UI from \"../ui\";\nimport type { GridProps, GridItemProps } from \"./grid.types\";\n\n// Re-export types for convenience\nexport type { GridProps, GridItemProps } from \"./grid.types\";\n\n/**\n * Grid - A CSS Grid-based layout primitive for responsive multi-column layouts.\n *\n * Grid provides a flexible, declarative way to create responsive grid layouts\n * with explicit column control, auto-fit/auto-fill behavior, gap spacing, and\n * alignment options. Pair with Grid.Item for column span control.\n *\n * ## Key Features\n * - **CSS Grid**: Native CSS Grid for true 2D layouts\n * - **Responsive Columns**: 1-12 column layouts or auto-fit/auto-fill\n * - **Grid.Item**: Sub-component for column and row span control\n * - **Fluid Spacing**: Responsive gap using CSS clamp()\n * - **Polymorphic**: Render as any semantic HTML element\n * - **Type-Safe**: Full TypeScript support\n *\n * ## Use Cases\n * - Multi-column card grids\n * - Responsive layouts (main content + sidebar)\n * - Image galleries\n * - Dashboard layouts\n * - Form layouts with label/input pairs\n *\n * @example\n * // 3-column grid\n * <Grid columns={3} gap=\"md\">\n *   <Grid.Item>Card 1</Grid.Item>\n *   <Grid.Item>Card 2</Grid.Item>\n *   <Grid.Item>Card 3</Grid.Item>\n * </Grid>\n *\n * @example\n * // Auto-fit grid\n * <Grid auto=\"fit\" minColumnWidth=\"15rem\" gap=\"lg\">\n *   <Grid.Item>Card 1</Grid.Item>\n *   <Grid.Item>Card 2</Grid.Item>\n * </Grid>\n *\n * @example\n * // 12-column layout with custom spans\n * <Grid columns={12} gap=\"md\">\n *   <Grid.Item span={8}>Main content</Grid.Item>\n *   <Grid.Item span={4}>Sidebar</Grid.Item>\n * </Grid>\n *\n * @see {@link GridProps} for complete props documentation\n */\nexport const Grid = React.forwardRef<HTMLElement, GridProps>(\n  (\n    {\n      columns,\n      auto,\n      minColumnWidth,\n      gap,\n      gapX,\n      gapY,\n      justifyItems,\n      alignItems,\n      as = \"div\",\n      className,\n      classes,\n      children,\n      style,\n      styles,\n      ...props\n    },\n    ref\n  ) => {\n    // Build utility classes array based on props\n    const utilityClasses: string[] = [\"grid\"];\n\n    // Column layout (explicit columns)\n    if (columns) {\n      utilityClasses.push(`grid-cols-${columns}`);\n    }\n\n    // Auto-fit/auto-fill layout\n    if (auto) {\n      utilityClasses.push(`grid-auto-${auto}`);\n    }\n\n    // Gap utilities\n    if (gap) {\n      utilityClasses.push(`grid-gap-${gap}`);\n    }\n\n    // Gap X (column gap)\n    if (gapX) {\n      utilityClasses.push(`grid-gap-x-${gapX}`);\n    }\n\n    // Gap Y (row gap)\n    if (gapY) {\n      utilityClasses.push(`grid-gap-y-${gapY}`);\n    }\n\n    // Justify items\n    if (justifyItems) {\n      utilityClasses.push(`grid-justify-items-${justifyItems}`);\n    }\n\n    // Align items\n    if (alignItems) {\n      utilityClasses.push(`grid-align-items-${alignItems}`);\n    }\n\n    // Merge all classes\n    const allClasses = [...utilityClasses, className, classes]\n      .filter(Boolean)\n      .join(\" \");\n\n    // Build inline styles\n    const inlineStyles: React.CSSProperties = {\n      ...(style || {}),\n      ...(styles || {}),\n    };\n\n    // Add custom grid-template-columns for auto layouts\n    if (auto && minColumnWidth) {\n      inlineStyles.gridTemplateColumns = `repeat(auto-${auto}, minmax(${minColumnWidth}, 1fr))`;\n    }\n\n    return (\n      <UI\n        as={as}\n        ref={ref}\n        classes={allClasses}\n        style={Object.keys(inlineStyles).length > 0 ? inlineStyles : undefined}\n        {...props}\n      >\n        {children}\n      </UI>\n    );\n  }\n);\n\nGrid.displayName = \"Grid\";\n\n/**\n * Grid.Item - A grid item component with column and row span control.\n *\n * Grid.Item represents a single item within a Grid layout. It supports\n * column spanning (1-12 columns) and row spanning for flexible grid layouts.\n *\n * ## Key Features\n * - **Column Span**: Span 1-12 columns\n * - **Row Span**: Span multiple rows\n * - **Polymorphic**: Render as any semantic HTML element\n * - **Type-Safe**: Full TypeScript support\n *\n * @example\n * // Span 2 columns\n * <Grid.Item span={2}>Wide item</Grid.Item>\n *\n * @example\n * // Span 2 rows\n * <Grid.Item rowSpan={2}>Tall item</Grid.Item>\n *\n * @example\n * // Main content + sidebar layout\n * <Grid columns={12} gap=\"md\">\n *   <Grid.Item span={8}>Main content</Grid.Item>\n *   <Grid.Item span={4}>Sidebar</Grid.Item>\n * </Grid>\n *\n * @see {@link GridItemProps} for complete props documentation\n */\nexport const GridItem = React.forwardRef<HTMLElement, GridItemProps>(\n  (\n    {\n      span,\n      rowSpan,\n      as = \"div\",\n      className,\n      classes,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    // Build utility classes array based on props\n    const utilityClasses: string[] = [];\n\n    // Column span\n    if (span) {\n      utilityClasses.push(`grid-col-span-${span}`);\n    }\n\n    // Row span\n    if (rowSpan) {\n      utilityClasses.push(`grid-row-span-${rowSpan}`);\n    }\n\n    // Merge all classes\n    const allClasses = [...utilityClasses, className, classes]\n      .filter(Boolean)\n      .join(\" \");\n\n    return (\n      <UI as={as} ref={ref} classes={allClasses} {...props}>\n        {children}\n      </UI>\n    );\n  }\n);\n\nGridItem.displayName = \"GridItem\";\n\n// Attach Grid.Item as a sub-component\nconst GridWithItem = Grid as typeof Grid & {\n  Item: typeof GridItem;\n};\n\nGridWithItem.Item = GridItem;\n\nexport default GridWithItem;\n","import React from \"react\";\nimport UI from \"../ui\";\nimport type { RowProps } from \"./row.types\";\n\n// Re-export types for convenience\nexport type { RowProps } from \"./row.types\";\n\n/**\n * Row - A flex container component for 12-column layouts.\n *\n * Row provides a type-safe React wrapper around the .col-row utility class,\n * allowing developers to create responsive column layouts with customizable\n * gap, alignment, and wrapping behavior. Always includes the .col-row base\n * class and adds variant utilities based on props.\n *\n * ## Key Features\n * - **Flex Container**: Display flex with wrap enabled by default\n * - **Customizable Gap**: Control spacing between columns with gap prop\n * - **Alignment Control**: Justify and align props for layout control\n * - **Polymorphic**: Render as any semantic HTML element\n * - **Type-Safe**: Full TypeScript support with literal types\n *\n * ## Use Cases\n * - Multi-column layouts\n * - Responsive grid systems\n * - Card grids\n * - Dashboard layouts\n * - Form layouts\n *\n * @example\n * // Basic two-column layout\n * <Row>\n *   <Col span={6}>Left column</Col>\n *   <Col span={6}>Right column</Col>\n * </Row>\n *\n * @example\n * // Custom gap and centered alignment\n * <Row gap=\"lg\" justify=\"center\" align=\"center\">\n *   <Col span={4}>Column 1</Col>\n *   <Col span={4}>Column 2</Col>\n *   <Col span={4}>Column 3</Col>\n * </Row>\n *\n * @example\n * // Semantic HTML with list elements\n * <Row as=\"ul\" gap=\"md\">\n *   <Col as=\"li\" span={4}>Item 1</Col>\n *   <Col as=\"li\" span={4}>Item 2</Col>\n *   <Col as=\"li\" span={4}>Item 3</Col>\n * </Row>\n *\n * @example\n * // Proportional layout - maintains columns on tablets and larger\n * <Row alwaysProportional gap=\"lg\">\n *   <Col span={6}>Column 1 (50% on tablets+)</Col>\n *   <Col span={6}>Column 2 (50% on tablets+)</Col>\n * </Row>\n *\n * @see {@link RowProps} for complete props documentation\n */\nexport const Row = React.forwardRef<HTMLElement, RowProps>(\n  (\n    {\n      gap,\n      justify,\n      align,\n      wrap,\n      alwaysProportional = false,\n      as = \"div\",\n      className,\n      classes,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    // Deprecation warning in development\n    if (process.env.NODE_ENV === \"development\" && alwaysProportional) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        \"[fpkit] Row: alwaysProportional is deprecated and will be removed in v5.0.0. \" +\n          'Use responsive column utilities instead: className=\"col-sm-6 col-md-4\"'\n      );\n    }\n\n    // Build utility classes array - ALWAYS include base class\n    const utilityClasses: string[] = [\"col-row\"];\n\n    // Gap utilities - override default gap\n    if (gap) {\n      utilityClasses.push(`col-row-gap-${gap}`);\n    }\n\n    // Justify content utilities\n    if (justify) {\n      utilityClasses.push(`col-row-justify-${justify}`);\n    }\n\n    // Align items utilities\n    if (align) {\n      utilityClasses.push(`col-row-align-${align}`);\n    }\n\n    // Wrap utilities - only add if not default \"wrap\"\n    if (wrap && wrap !== \"wrap\") {\n      utilityClasses.push(`col-row-${wrap}`);\n    }\n\n    // Proportional layout mode - prevents stacking on tablets and larger\n    if (alwaysProportional) {\n      utilityClasses.push(\"col-row-proportional\");\n    }\n\n    // Merge all classes: utilities + className + classes\n    const allClasses = [...utilityClasses, className, classes]\n      .filter(Boolean)\n      .join(\" \");\n\n    return (\n      <UI as={as} ref={ref} classes={allClasses} {...props}>\n        {children}\n      </UI>\n    );\n  }\n);\n\nRow.displayName = \"Row\";\n\nexport default Row;\n","import React from \"react\";\nimport UI from \"../ui\";\nimport type { ColProps } from \"./col.types\";\n\n// Re-export types for convenience\nexport type { ColProps } from \"./col.types\";\n\n/**\n * Col - A column component for 12-column layouts.\n *\n * Col provides a type-safe React wrapper around column utility classes,\n * allowing developers to create responsive columns with span, offset, order,\n * and auto-width options. Unlike Row, Col has no base class - it's pure\n * utility class composition.\n *\n * ## Key Features\n * - **No base class**: Pure utility class mapping (follows Grid.Item pattern)\n * - **Span control**: 1-12 column widths via span prop\n * - **Offset positioning**: Push columns right with offset prop\n * - **Visual reordering**: Change order with order prop\n * - **Auto-width**: Content-based width with auto prop\n * - **Polymorphic**: Render as any semantic HTML element\n * - **Type-Safe**: Full TypeScript support with literal types\n *\n * ## Use Cases\n * - Responsive column layouts\n * - Grid-based designs\n * - Content positioning\n * - Visual reordering\n *\n * @example\n * // Basic 50% column\n * <Col span={6}>Half width column</Col>\n *\n * @example\n * // Centered column with offset\n * <Col span={6} offset={3}>Centered column</Col>\n *\n * @example\n * // Auto-width column\n * <Col auto>Content-based width</Col>\n *\n * @example\n * // Reordered column\n * <Col span={6} order=\"first\">Appears first visually</Col>\n *\n * @example\n * // Semantic HTML\n * <Row as=\"ul\">\n *   <Col as=\"li\" span={4}>List item</Col>\n * </Row>\n *\n * @see {@link ColProps} for complete props documentation\n */\nexport const Col = React.forwardRef<HTMLElement, ColProps>(\n  (\n    {\n      span,\n      offset,\n      order,\n      auto = false,\n      as = \"div\",\n      className,\n      classes,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    // Build utility classes array - NO base class\n    const utilityClasses: string[] = [];\n\n    // Auto takes precedence over span (including \"flex\")\n    if (auto) {\n      utilityClasses.push(\"col-auto\");\n    } else if (span === \"flex\") {\n      utilityClasses.push(\"col-flex\");\n    } else if (span) {\n      utilityClasses.push(`col-${span}`);\n    }\n\n    // Offset utilities\n    if (offset !== undefined) {\n      utilityClasses.push(`col-offset-${offset}`);\n    }\n\n    // Order utilities\n    if (order !== undefined) {\n      utilityClasses.push(`col-order-${order}`);\n    }\n\n    // Merge all classes: utilities + className + classes\n    const allClasses = [...utilityClasses, className, classes]\n      .filter(Boolean)\n      .join(\" \");\n\n    return (\n      <UI as={as} ref={ref} classes={allClasses} {...props}>\n        {children}\n      </UI>\n    );\n  }\n);\n\nCol.displayName = \"Col\";\n\nexport default Col;\n","import React from \"react\";\nimport UI from \"../ui\";\nimport type {\n  FlexProps,\n  FlexItemProps,\n  FlexSpacerProps,\n  FlexComponent,\n  ResponsiveFlexProps,\n  FlexContainerElement,\n  FlexItemElement,\n} from \"./flex.types\";\n\n/**\n * Generates CSS class names from flex props\n * Converts prop values to corresponding utility class names\n *\n * @param props - Flex properties to convert\n * @param prefix - Optional breakpoint prefix (e.g., 'sm:', 'md:')\n * @returns Array of CSS class names\n */\nconst generateFlexClasses = (props: ResponsiveFlexProps, prefix = \"\"): string[] => {\n  const classes: string[] = [];\n\n  if (props.direction) {\n    const dirMap = {\n      row: \"flex-row\",\n      \"row-reverse\": \"flex-row-reverse\",\n      column: \"flex-col\",\n      \"column-reverse\": \"flex-col-reverse\",\n    };\n    classes.push(`${prefix}${dirMap[props.direction]}`);\n  }\n\n  if (props.wrap) {\n    const wrapMap = {\n      wrap: \"flex-wrap\",\n      nowrap: \"flex-nowrap\",\n      \"wrap-reverse\": \"flex-wrap-reverse\",\n    };\n    classes.push(`${prefix}${wrapMap[props.wrap]}`);\n  }\n\n  if (props.gap) {\n    classes.push(`${prefix}gap-${props.gap}`);\n  }\n\n  if (props.rowGap) {\n    classes.push(`${prefix}row-gap-${props.rowGap}`);\n  }\n\n  if (props.colGap) {\n    classes.push(`${prefix}col-gap-${props.colGap}`);\n  }\n\n  if (props.justify) {\n    const justifyMap = {\n      start: \"justify-start\",\n      end: \"justify-end\",\n      center: \"justify-center\",\n      between: \"justify-between\",\n      around: \"justify-around\",\n      evenly: \"justify-evenly\",\n    };\n    classes.push(`${prefix}${justifyMap[props.justify]}`);\n  }\n\n  if (props.align) {\n    const alignMap = {\n      start: \"items-start\",\n      end: \"items-end\",\n      center: \"items-center\",\n      baseline: \"items-baseline\",\n      stretch: \"items-stretch\",\n    };\n    classes.push(`${prefix}${alignMap[props.align]}`);\n  }\n\n  if (props.alignContent) {\n    const alignContentMap = {\n      start: \"content-start\",\n      end: \"content-end\",\n      center: \"content-center\",\n      between: \"content-between\",\n      around: \"content-around\",\n      evenly: \"content-evenly\",\n      stretch: \"content-stretch\",\n    };\n    classes.push(`${prefix}${alignContentMap[props.alignContent]}`);\n  }\n\n  return classes;\n};\n\n/**\n * Flex - A flexible container component for creating flexbox layouts\n *\n * Provides a declarative React API for flexbox layouts with responsive props,\n * preset variants, and full TypeScript support. Built on top of the fpkit\n * flexbox utility system, converting props to utility classes for optimal performance.\n *\n * ## Features\n * - **Compound Pattern**: Use Flex.Item and Flex.Spacer sub-components\n * - **Responsive Props**: Different layouts at sm/md/lg/xl breakpoints\n * - **Preset Variants**: Common patterns like 'center', 'between', 'stack'\n * - **CSS Custom Properties**: Runtime theming via styles prop\n * - **Polymorphic**: Render as semantic container elements via 'as' prop\n * - **Type-Safe**: Full TypeScript support with autocomplete\n *\n * ## Semantic Elements Only\n * The `as` prop is restricted to semantic container elements:\n * - **Block containers**: div (default), section, article, aside, main, header, footer\n * - **List containers**: ul, ol, dl, nav\n * - **Form containers**: form, fieldset\n *\n * This restriction ensures proper HTML structure and prevents misuse as inline\n * or interactive elements (e.g., span, a, button).\n *\n * ## Accessibility\n * - Uses semantic HTML by default (div, but customizable via 'as' prop)\n * - Forwards all ARIA attributes to the rendered element\n * - No interactive behavior by default (purely layout)\n *\n * ## Breakpoints\n * - **sm**: 30rem (480px)\n * - **md**: 48rem (768px)\n * - **lg**: 62rem (992px)\n * - **xl**: 80rem (1280px)\n *\n * @example\n * // Basic flex container\n * <Flex direction=\"row\" gap=\"md\" justify=\"between\" align=\"center\">\n *   <div>Item 1</div>\n *   <div>Item 2</div>\n * </Flex>\n *\n * @example\n * // Responsive layout - column on mobile, row on medium+\n * <Flex direction=\"column\" md={{ direction: \"row\", gap: \"lg\" }}>\n *   <Flex.Item flex=\"1\">Content 1</Flex.Item>\n *   <Flex.Item flex=\"1\">Content 2</Flex.Item>\n * </Flex>\n *\n * @example\n * // Preset variant\n * <Flex variant=\"center\">\n *   <div>Centered content</div>\n * </Flex>\n *\n * @example\n * // Using Flex.Spacer to push items apart\n * <Flex>\n *   <div>Left</div>\n *   <Flex.Spacer />\n *   <div>Right</div>\n * </Flex>\n *\n * @example\n * // Custom CSS properties\n * <Flex styles={{ '--flex-gap': '2rem' }}>\n *   <div>Item</div>\n * </Flex>\n *\n * @example\n * // Semantic HTML with 'as' prop\n * <Flex as=\"nav\" role=\"navigation\" aria-label=\"Main navigation\">\n *   <a href=\"/\">Home</a>\n *   <a href=\"/about\">About</a>\n * </Flex>\n *\n * @example\n * // Semantic list structure\n * <Flex as=\"ul\" gap=\"md\">\n *   <Flex.Item as=\"li\">Item 1</Flex.Item>\n *   <Flex.Item as=\"li\">Item 2</Flex.Item>\n * </Flex>\n */\nconst FlexBase = React.forwardRef<HTMLElement, FlexProps>((props, ref) => {\n  const {\n    variant,\n    inline = false,\n    as = \"div\",\n    className = \"\",\n    styles,\n    children,\n    sm,\n    md,\n    lg,\n    xl,\n    direction,\n    wrap,\n    gap,\n    rowGap,\n    colGap,\n    justify,\n    align,\n    alignContent,\n    ...rest\n  } = props;\n\n  const classes: string[] = [];\n\n  // Base flex class\n  classes.push(inline ? \"flex-inline\" : \"flex\");\n\n  // Apply variant preset if specified\n  if (variant) {\n    const variantMap = {\n      center: \"flex-center\",\n      between: \"flex-between\",\n      around: \"flex-around\",\n      stack: \"flex-stack\",\n      spread: \"flex-spread\",\n    };\n    classes.push(variantMap[variant]);\n  }\n\n  // Base responsive props\n  classes.push(\n    ...generateFlexClasses({\n      direction,\n      wrap,\n      gap,\n      rowGap,\n      colGap,\n      justify,\n      align,\n      alignContent,\n    })\n  );\n\n  // Responsive breakpoint classes\n  if (sm) {\n    classes.push(...generateFlexClasses(sm, \"sm:\"));\n  }\n  if (md) {\n    classes.push(...generateFlexClasses(md, \"md:\"));\n  }\n  if (lg) {\n    classes.push(...generateFlexClasses(lg, \"lg:\"));\n  }\n  if (xl) {\n    classes.push(...generateFlexClasses(xl, \"xl:\"));\n  }\n\n  // Merge custom className\n  const allClasses = [...classes, className].filter(Boolean).join(\" \");\n\n  return (\n    <UI as={as} ref={ref} classes={allClasses} styles={styles} {...rest}>\n      {children}\n    </UI>\n  );\n});\n\nFlexBase.displayName = \"Flex\";\n\n/**\n * Flex.Item - Individual flex item component with sizing controls\n *\n * Provides fine-grained control over flex item behavior including grow,\n * shrink, basis, alignment, and order. Supports responsive flex sizing\n * at different breakpoints.\n *\n * ## Semantic Elements\n * The `as` prop accepts container elements plus list item elements:\n * - **Block containers**: div (default), section, article, aside, main, header, footer\n * - **List containers**: ul, ol, dl, nav\n * - **Form containers**: form, fieldset\n * - **List items**: li, dt, dd\n *\n * List item elements (li, dt, dd) are included to support semantic list\n * structures within flex containers.\n *\n * ## Props\n * - **grow**: Flex grow factor (0 | 1)\n * - **shrink**: Flex shrink factor (0 | 1)\n * - **basis**: Flex basis ('auto' | '0' | 'full')\n * - **flex**: Flex shorthand ('1' | 'auto' | 'initial' | 'none')\n * - **alignSelf**: Override parent align-items\n * - **order**: Visual order ('first' | 'last' | 'none')\n *\n * @example\n * // Flex item that grows to fill available space\n * <Flex.Item flex=\"1\">\n *   Flexible content\n * </Flex.Item>\n *\n * @example\n * // Fixed-width item that doesn't grow or shrink\n * <Flex.Item flex=\"none\" styles={{ width: '200px' }}>\n *   Fixed width\n * </Flex.Item>\n *\n * @example\n * // Responsive flex - no grow on mobile, grow on medium+\n * <Flex.Item flex=\"none\" md={{ flex: \"1\" }}>\n *   Responsive item\n * </Flex.Item>\n *\n * @example\n * // Custom alignment for individual item\n * <Flex.Item alignSelf=\"end\">\n *   Aligned to end\n * </Flex.Item>\n *\n * @example\n * // Change visual order\n * <Flex.Item order=\"last\">\n *   Shows last visually\n * </Flex.Item>\n *\n * @example\n * // Semantic list item\n * <Flex as=\"ul\" gap=\"md\">\n *   <Flex.Item as=\"li\">List item 1</Flex.Item>\n *   <Flex.Item as=\"li\">List item 2</Flex.Item>\n * </Flex>\n */\nconst FlexItem = React.forwardRef<HTMLElement, FlexItemProps>((props, ref) => {\n  const {\n    grow,\n    shrink,\n    basis,\n    flex,\n    alignSelf,\n    order,\n    as = \"div\",\n    className = \"\",\n    styles,\n    children,\n    sm,\n    md,\n    lg,\n    xl,\n    ...rest\n  } = props;\n\n  const classes: string[] = [];\n\n  // Apply flex sizing\n  if (flex) {\n    const flexMap = {\n      \"1\": \"flex-1\",\n      auto: \"flex-auto\",\n      initial: \"flex-initial\",\n      none: \"flex-none\",\n    };\n    classes.push(flexMap[flex]);\n  }\n\n  // Individual flex properties\n  if (grow !== undefined) {\n    classes.push(`flex-grow-${grow}`);\n  }\n  if (shrink !== undefined) {\n    classes.push(`flex-shrink-${shrink}`);\n  }\n  if (basis) {\n    const basisMap = {\n      auto: \"flex-basis-auto\",\n      \"0\": \"flex-basis-0\",\n      full: \"flex-basis-full\",\n    };\n    classes.push(basisMap[basis]);\n  }\n\n  // Align self\n  if (alignSelf) {\n    const alignSelfMap = {\n      auto: \"self-auto\",\n      start: \"self-start\",\n      end: \"self-end\",\n      center: \"self-center\",\n      baseline: \"self-baseline\",\n      stretch: \"self-stretch\",\n    };\n    classes.push(alignSelfMap[alignSelf]);\n  }\n\n  // Order\n  if (order) {\n    const orderMap = {\n      first: \"order-first\",\n      last: \"order-last\",\n      none: \"order-none\",\n    };\n    classes.push(orderMap[order]);\n  }\n\n  // Responsive flex sizing\n  if (sm?.flex) {\n    const flexMap = { \"1\": \"flex-1\", auto: \"flex-auto\", none: \"flex-none\" };\n    classes.push(`sm:${flexMap[sm.flex]}`);\n  }\n  if (md?.flex) {\n    const flexMap = { \"1\": \"flex-1\", auto: \"flex-auto\", none: \"flex-none\" };\n    classes.push(`md:${flexMap[md.flex]}`);\n  }\n  if (lg?.flex) {\n    const flexMap = { \"1\": \"flex-1\", auto: \"flex-auto\", none: \"flex-none\" };\n    classes.push(`lg:${flexMap[lg.flex]}`);\n  }\n  if (xl?.flex) {\n    const flexMap = { \"1\": \"flex-1\", auto: \"flex-auto\", none: \"flex-none\" };\n    classes.push(`xl:${flexMap[xl.flex]}`);\n  }\n\n  // Merge custom className\n  const allClasses = [...classes, className].filter(Boolean).join(\" \");\n\n  return (\n    <UI as={as} ref={ref} classes={allClasses} styles={styles} {...rest}>\n      {children}\n    </UI>\n  );\n});\n\nFlexItem.displayName = \"Flex.Item\";\n\n/**\n * Flex.Spacer - Auto-expanding spacer element for pushing items apart\n *\n * Creates a flex item with `flex: 1 1 0%` that automatically expands\n * to fill available space, pushing adjacent items to the edges.\n * Commonly used to separate groups of items in a flex container.\n *\n * ## Semantic Elements Only\n * The `as` prop is restricted to container elements:\n * - **Block containers**: div (default), section, article, aside, main, header, footer\n * - **List containers**: ul, ol, dl, nav\n * - **Form containers**: form, fieldset\n *\n * Spacers are purely presentational and should typically use non-semantic\n * containers like div.\n *\n * ## Accessibility\n * - Renders as `<div>` by default (purely presentational)\n * - Use `aria-hidden=\"true\"` if purely decorative\n * - Consider semantic alternatives for critical spacing\n *\n * @example\n * // Push items to opposite edges\n * <Flex>\n *   <div>Left side</div>\n *   <Flex.Spacer />\n *   <div>Right side</div>\n * </Flex>\n *\n * @example\n * // Multiple items with spacers\n * <Flex>\n *   <div>Start</div>\n *   <Flex.Spacer />\n *   <div>Middle</div>\n *   <Flex.Spacer />\n *   <div>End</div>\n * </Flex>\n */\nconst FlexSpacer = React.forwardRef<HTMLElement, FlexSpacerProps>((props, ref) => {\n  const { as = \"div\", className = \"\", styles, ...rest } = props;\n\n  const classes = [\"flex-1\", className].filter(Boolean).join(\" \");\n\n  return <UI as={as} ref={ref} classes={classes} styles={styles} {...rest} />;\n});\n\nFlexSpacer.displayName = \"Flex.Spacer\";\n\n/**\n * Attach sub-components to Flex using compound component pattern\n */\nconst Flex = FlexBase as FlexComponent;\nFlex.Item = FlexItem;\nFlex.Spacer = FlexSpacer;\n\nexport default Flex;\nexport { FlexItem, FlexSpacer };\nexport type {\n  FlexProps,\n  FlexItemProps,\n  FlexSpacerProps,\n  FlexContainerElement,\n  FlexItemElement,\n};\n","import UI from '#components/ui'\nimport React from 'react'\n\n/**\n * Props for the Badge component\n *\n * @property {React.ReactNode} children - Content to display inside the badge (typically numbers or short text)\n * @property {string} [id] - Optional HTML id attribute for the badge element\n * @property {React.CSSProperties} [styles] - Inline styles to apply to the badge\n * @property {string} [classes] - CSS class names to apply to the badge\n * @property {'rounded'} [variant] - Visual variant of the badge. Use 'rounded' for circular badges (fixed size with ellipsis for overflow)\n * @property {string} [aria-label] - Accessible label for screen readers. Required for icon-only or number-only badges\n * @property {'status' | 'note'} [role] - ARIA role for the badge. Defaults to 'status' for dynamic content\n */\nexport type BadgeProps = {\n  /**\n   * Content to display inside the badge (typically numbers or short text)\n   */\n  children?: React.ReactNode\n  /**\n   * Visual variant of the badge\n   * - 'rounded': Circular badge style\n   */\n  variant?: 'rounded'\n} & React.ComponentProps<typeof UI>\n\n/**\n * Badge - A small label component for displaying status, counts, or notifications\n *\n * The Badge component is used to display supplementary information alongside other content,\n * such as notification counts, status indicators, or labels. It renders as a semantic `<sup>`\n * element with a nested `<span>` required for the component's styling architecture.\n *\n * ## Styling Architecture\n *\n * The Badge uses a nested structure (`<sup><span>content</span></sup>`) which is required\n * for the SCSS styling system. The outer `<sup>` element provides positioning context,\n * while the inner `<span>` receives the visual styling (background, padding, border-radius).\n *\n * ## Rounded Variant Behavior\n *\n * The `rounded` variant creates a perfect circular badge with fixed dimensions (1.5625rem).\n * Content that exceeds the available space will be truncated with an ellipsis (...).\n * **Best practice**: Format large numbers yourself (e.g., pass \"99+\" instead of \"999\").\n *\n * ## Accessibility Considerations\n *\n * - **Semantic HTML**: Uses `<sup>` (superscript) element for proper positioning context\n * - **ARIA Role**: Defaults to `role=\"status\"` for dynamic badges (e.g., unread counts)\n * - **Accessible Names**: For icon-only or number-only badges, provide an `aria-label`\n *   to give context (e.g., \"3 unread messages\" instead of just \"3\")\n * - **Live Regions**: The `role=\"status\"` makes badges announce updates to screen readers\n *\n * @param {BadgeProps} props - Component props\n * @returns {React.ReactElement} A Badge component\n *\n * @example\n * // Basic badge with notification count\n * <p>\n *   Messages\n *   <Badge aria-label=\"3 unread messages\">3</Badge>\n * </p>\n *\n * @example\n * // Rounded badge variant (perfect circle)\n * <p>\n *   Notifications\n *   <Badge variant=\"rounded\" aria-label=\"99 or more notifications\">99+</Badge>\n * </p>\n *\n * @example\n * // Status badge with custom styling\n * <p>\n *   Active Users\n *   <Badge styles={{ backgroundColor: 'green', color: 'white' }}>21</Badge>\n * </p>\n *\n * @example\n * // ✅ GOOD: Accessible badge with descriptive label and formatted content\n * <Badge variant=\"rounded\" aria-label=\"12 items in cart\">12</Badge>\n *\n * @example\n * // ✅ GOOD: Large numbers formatted by developer\n * <Badge variant=\"rounded\" aria-label=\"More than 99 notifications\">99+</Badge>\n *\n * @example\n * // ❌ BAD: Number-only badge without context for screen readers\n * <Badge>12</Badge>\n */\nexport const Badge = ({ id, styles, classes, children, variant, ...props }: BadgeProps) => {\n  // Build data-badge attribute for variant styling\n  const dataBadge = variant ? variant : undefined\n\n  return (\n    <UI\n      as=\"sup\"\n      id={id}\n      styles={styles}\n      className={classes}\n      data-badge={dataBadge}\n      role=\"status\"\n      {...props}\n    >\n      <UI as=\"span\">{children}</UI>\n    </UI>\n  )\n}\n\nBadge.displayName = 'Badge'\nexport default Badge\n","import React from 'react'\nimport UI from '#components/ui'\nimport type { TagProps, TagVariant } from './tag.types'\n\n/**\n * Tag - A small inline label component for displaying status, versions, or environment indicators\n *\n * The Tag component is used to highlight supplementary information such as release stages\n * (alpha, beta, stable), environment indicators (production), or version labels. It renders\n * as either a `<span>` (inline) or `<p>` (block) element with semantic ARIA roles.\n *\n * ## Design Philosophy\n *\n * Tags serve as visual and semantic indicators that:\n * - Communicate the state or stage of features, releases, or environments\n * - Provide quick visual scanning through color-coded variants\n * - Maintain accessibility through proper ARIA roles and labels\n *\n * ## Styling Architecture\n *\n * The Tag component uses CSS custom properties (CSS variables) for theming and styling,\n * allowing for easy customization through the `data-tag` attribute. Each variant\n * (alpha, beta, stable, production) applies predefined color schemes defined in SCSS.\n *\n * ## Accessibility Considerations (WCAG 2.1 AA Compliance)\n *\n * - **Semantic Roles**: Uses `role=\"note\"` for static tags or `role=\"status\"` for dynamic content\n *   - `role=\"note\"`: Read once by screen readers, suitable for static labels (default)\n *   - `role=\"status\"`: Announces updates to screen readers, use for changing status indicators\n * - **Color Independence**: Don't rely solely on color to convey meaning - include text labels\n * - **Text Alternatives**: For icon-only tags, provide `aria-label` for screen reader context\n * - **Contrast Ratios**: All variants meet WCAG AA contrast requirements (4.5:1 for normal text)\n * - **Live Regions**: When using `role=\"status\"`, tag becomes a live region for accessibility\n *\n * ## When to Use Each Role\n *\n * **Use `role=\"note\"` (default) when:**\n * - Displaying static version numbers (e.g., \"v2.1.0\")\n * - Showing fixed environment indicators (e.g., \"Beta Feature\")\n * - Labeling unchanging content categories\n *\n * **Use `role=\"status\"` when:**\n * - Indicating real-time status that may change (e.g., \"Processing\" → \"Complete\")\n * - Displaying live build/deployment states\n * - Showing dynamic feature flags that toggle\n *\n * @param {TagProps} props - Component props\n * @returns {React.ReactElement} A Tag component\n *\n * @example\n * // Basic tag with beta variant (default inline span)\n * <Tag variant=\"beta\">Beta</Tag>\n *\n * @example\n * // Production environment indicator as block element\n * <Tag elm=\"p\" variant=\"production\">Production Environment</Tag>\n *\n * @example\n * // Dynamic status tag with live updates\n * <Tag role=\"status\" variant=\"stable\">\n *   {isDeployed ? 'Deployed' : 'Deploying...'}\n * </Tag>\n *\n * @example\n * // Tag with custom styling and accessibility label\n * <Tag\n *   variant=\"alpha\"\n *   aria-label=\"Alpha version - may contain bugs\"\n *   styles={{ fontSize: '0.75rem' }}\n * >\n *   Alpha\n * </Tag>\n *\n * @example\n * // ✅ GOOD: Clear text content with variant for visual enhancement\n * <Tag variant=\"stable\">v2.0 Stable</Tag>\n *\n * @example\n * // ✅ GOOD: Dynamic status with proper role\n * <Tag role=\"status\" variant=\"production\">{deploymentStatus}</Tag>\n *\n * @example\n * // ✅ GOOD: Accessible tag with descriptive label\n * <Tag variant=\"beta\" aria-label=\"Beta feature - feedback welcome\">\n *   Beta\n * </Tag>\n *\n * @example\n * // ❌ BAD: Relying only on color without text\n * <Tag variant=\"production\" aria-label=\"Production\" />\n *\n * @example\n * // ❌ BAD: Using status role for static content\n * <Tag role=\"status\" variant=\"stable\">v1.0</Tag>\n */\nexport const Tag = ({\n  elm = 'span',\n  role = 'note',\n  variant,\n  children,\n  styles,\n  ...props\n}: TagProps) => {\n  // Map variant to data-tag attribute for SCSS styling\n  const dataTag = variant ? variant : undefined\n\n  return (\n    <UI\n      as={elm}\n      role={role}\n      data-tag={dataTag}\n      styles={styles}\n      {...props}\n    >\n      {children}\n    </UI>\n  )\n}\n\nTag.displayName = 'Tag'\nexport default Tag\nexport type { TagProps, TagVariant }\n","import UI from \"#components/ui\";\nimport React, { useCallback } from \"react\";\nimport type { DetailsProps } from \"./details.types\";\n\n/**\n * Details - A progressive disclosure component using native HTML `<details>` element.\n *\n * This component wraps the native `<details>` and `<summary>` elements to provide\n * an accessible, semantic way to show and hide content. It supports accordion behavior\n * through the `name` attribute and includes proper keyboard navigation out of the box.\n *\n * ## Key Features:\n * - **Semantic HTML**: Uses native `<details>` for built-in accessibility\n * - **Keyboard Support**: Space/Enter to toggle, fully accessible by default\n * - **Accordion Mode**: Group multiple details with `name` for exclusive expansion\n * - **Customizable**: Supports icons, custom styles, and event handlers\n *\n * ## Accessibility:\n * - ✅ WCAG 2.1 AA compliant using semantic HTML\n * - ✅ Native keyboard support (Space, Enter)\n * - ✅ Screen reader compatible (announced as \"disclosure\" or \"expandable\")\n * - ✅ Focus indicators automatically applied via CSS\n * - ✅ `aria-expanded` managed automatically by browser\n *\n * @example\n * ```tsx\n * // Basic usage\n * <Details summary=\"Click to expand\">\n *   <p>Hidden content here</p>\n * </Details>\n * ```\n *\n * @example\n * ```tsx\n * // With icon and custom styling\n * <Details\n *   summary=\"Shipping Information\"\n *   icon={<ChevronDownIcon />}\n *   classes=\"custom-details\"\n *   onToggle={(e) => console.log('Open:', e.currentTarget.open)}\n * >\n *   <p>Ships within 2-3 business days</p>\n * </Details>\n * ```\n *\n * @example\n * ```tsx\n * // Accordion mode - only one open at a time\n * <Details name=\"faq\" summary=\"Question 1\">Answer 1</Details>\n * <Details name=\"faq\" summary=\"Question 2\">Answer 2</Details>\n * <Details name=\"faq\" summary=\"Question 3\">Answer 3</Details>\n * ```\n */\nexport const Details = React.forwardRef<HTMLDetailsElement, DetailsProps>(\n  (\n    {\n      summary,\n      icon,\n      styles,\n      classes,\n      ariaLabel,\n      name,\n      open,\n      onPointerDown,\n      onToggle,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    // Memoize callbacks to prevent unnecessary re-renders of child components\n    const handlePointerDown = useCallback(\n      (e: React.PointerEvent<HTMLElement>) => {\n        onPointerDown?.(e as React.PointerEvent<HTMLDetailsElement>);\n      },\n      [onPointerDown]\n    );\n\n    const handleToggle = useCallback(\n      (e: React.SyntheticEvent<HTMLDetailsElement>) => {\n        onToggle?.(e);\n      },\n      [onToggle]\n    );\n\n    return (\n      <UI\n        as=\"details\"\n        styles={styles}\n        classes={classes}\n        onToggle={handleToggle}\n        ref={ref}\n        open={open}\n        aria-label={ariaLabel}\n        name={name}\n        {...props}\n      >\n        <UI as=\"summary\" onPointerDown={handlePointerDown}>\n          {icon}\n          {summary}\n        </UI>\n        <UI as=\"section\">{children}</UI>\n      </UI>\n    );\n  }\n);\n\nDetails.displayName = \"Details\";\n\nexport default Details;\n","import React from 'react';\n\n/**\n * The three user-expressible theme choices. `\"system\"` defers to the OS\n * `prefers-color-scheme` media query. The actual applied theme is always\n * either `\"light\"` or `\"dark\"` — `\"system\"` is the *preference*, not a value.\n */\nexport type ThemePreference = 'light' | 'dark' | 'system';\n\n/** The theme value actually written to `document.documentElement`. */\nexport type ResolvedTheme = 'light' | 'dark';\n\nexport interface ThemeContextValue {\n  /** User's stored preference, including \"system\". */\n  preference: ThemePreference;\n  /** The theme currently applied to the document (never \"system\"). */\n  theme: ResolvedTheme;\n  /** Update the user's preference; persists to localStorage and applies to DOM. */\n  setPreference: (next: ThemePreference) => void;\n  /** Convenience cycler: light → dark → system → light. */\n  toggleTheme: () => void;\n}\n\nexport const THEME_STORAGE_KEY = 'fpkit-theme-preference';\nconst THEME_ATTRIBUTE = 'data-theme';\nconst DARK_MEDIA = '(prefers-color-scheme: dark)';\n\nconst ThemeContext = React.createContext<ThemeContextValue | null>(null);\n\nfunction readStoredPreference(storageKey: string): ThemePreference {\n  if (typeof window === 'undefined') return 'system';\n  try {\n    const stored = window.localStorage.getItem(storageKey);\n    if (stored === 'light' || stored === 'dark' || stored === 'system') return stored;\n  } catch {\n    // localStorage may be unavailable (SSR, private mode) — fall through to default\n  }\n  return 'system';\n}\n\nfunction systemPrefersDark(): boolean {\n  if (typeof window === 'undefined' || !window.matchMedia) return false;\n  return window.matchMedia(DARK_MEDIA).matches;\n}\n\nfunction resolvePreference(pref: ThemePreference): ResolvedTheme {\n  if (pref === 'system') return systemPrefersDark() ? 'dark' : 'light';\n  return pref;\n}\n\nexport interface ThemeProviderProps {\n  children: React.ReactNode;\n  /**\n   * Override the initial preference. Useful for SSR where the server renders\n   * a fixed theme and the FOUC script sets the correct one before hydration.\n   * @default \"system\"\n   */\n  defaultPreference?: ThemePreference;\n  /**\n   * LocalStorage key. Exported for advanced use (e.g. namespacing per app).\n   * @default \"fpkit-theme-preference\"\n   */\n  storageKey?: string;\n}\n\n/**\n * Theme provider that owns the user's preference and the resolved theme.\n *\n * Responsibilities:\n * - Reads the stored preference from localStorage on mount.\n * - Writes `data-theme=\"light|dark\"` to `document.documentElement` on every change.\n * - Subscribes to `prefers-color-scheme` so `\"system\"` preference stays in sync.\n * - Persists preference changes to localStorage.\n *\n * For SSR, pair with `getThemeFoucScript()` in the document head to avoid\n * a flash of the wrong theme before React hydrates.\n */\nexport function ThemeProvider({\n  children,\n  defaultPreference = 'system',\n  storageKey = THEME_STORAGE_KEY,\n}: ThemeProviderProps) {\n  // Initialize lazily so SSR renders with the default and the client can hydrate\n  // to the stored value on mount without a DOM flicker (the FOUC script handles\n  // the pre-hydration visual).\n  const [preference, setPreferenceState] = React.useState<ThemePreference>(\n    () => defaultPreference,\n  );\n  const [theme, setTheme] = React.useState<ResolvedTheme>(() => resolvePreference(defaultPreference));\n\n  // On mount, read the stored preference and re-sync state.\n  React.useEffect(() => {\n    const stored = readStoredPreference(storageKey);\n    setPreferenceState(stored);\n    setTheme(resolvePreference(stored));\n  }, [storageKey]);\n\n  // When preference changes, re-resolve and push to the DOM.\n  React.useEffect(() => {\n    if (typeof document === 'undefined') return;\n    const resolved = resolvePreference(preference);\n    setTheme(resolved);\n    document.documentElement.setAttribute(THEME_ATTRIBUTE, resolved);\n  }, [preference]);\n\n  // Watch `prefers-color-scheme` only while preference is \"system\".\n  React.useEffect(() => {\n    if (preference !== 'system' || typeof window === 'undefined' || !window.matchMedia) return;\n    const mql = window.matchMedia(DARK_MEDIA);\n    const handler = () => {\n      const resolved: ResolvedTheme = mql.matches ? 'dark' : 'light';\n      setTheme(resolved);\n      document.documentElement.setAttribute(THEME_ATTRIBUTE, resolved);\n    };\n    // Some browsers (older Safari) fire change on the MediaQueryList; all fire on it.\n    mql.addEventListener('change', handler);\n    return () => mql.removeEventListener('change', handler);\n  }, [preference]);\n\n  const setPreference = React.useCallback(\n    (next: ThemePreference) => {\n      setPreferenceState(next);\n      try {\n        window.localStorage.setItem(storageKey, next);\n      } catch {\n        // Persisting is best-effort.\n      }\n    },\n    [storageKey],\n  );\n\n  const toggleTheme = React.useCallback(() => {\n    setPreference(preference === 'light' ? 'dark' : preference === 'dark' ? 'system' : 'light');\n  }, [preference, setPreference]);\n\n  const value = React.useMemo<ThemeContextValue>(\n    () => ({ preference, theme, setPreference, toggleTheme }),\n    [preference, theme, setPreference, toggleTheme],\n  );\n\n  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;\n}\n\n/**\n * Access the current theme state. Throws if called outside <ThemeProvider>.\n * The explicit error is friendlier than silently returning a default that\n * could desync from the DOM.\n */\nexport function useTheme(): ThemeContextValue {\n  const ctx = React.useContext(ThemeContext);\n  if (!ctx) {\n    throw new Error('useTheme must be used within a <ThemeProvider>');\n  }\n  return ctx;\n}\n","import React from 'react';\nimport Button from '../buttons/button';\nimport { useTheme, type ThemePreference } from './theme-provider';\n\nconst LABELS: Record<ThemePreference, string> = {\n  light: 'Light',\n  dark: 'Dark',\n  system: 'System',\n};\n\nconst ICONS: Record<ThemePreference, string> = {\n  light: '☀',\n  dark: '☾',\n  system: '⚙',\n};\n\nexport interface ThemeToggleProps {\n  /**\n   * How to render the toggle.\n   * - `\"icon\"` — shows just the current-preference icon (accessible label hidden visually)\n   * - `\"text\"` — shows the preference name\n   * - `\"both\"` — icon + text (default)\n   * @default \"both\"\n   */\n  display?: 'icon' | 'text' | 'both';\n  /** Override the default visually-hidden prefix in the accessible label. */\n  srLabel?: string;\n  /** Additional classes forwarded to the underlying Button. */\n  className?: string;\n}\n\n/**\n * A one-click cycler across light → dark → system preferences.\n *\n * Uses `useTheme().toggleTheme()` from ThemeProvider. Rendered as a Button\n * (composition over a new interactive primitive) so it inherits focus\n * handling, keyboard support, and theming automatically.\n *\n * For a picker UI (separate buttons for each mode), compose your own\n * component using `useTheme()` directly — this one is optimized for the\n * common header-bar use case.\n */\nexport function ThemeToggle({\n  display = 'both',\n  srLabel = 'Current theme:',\n  className,\n}: ThemeToggleProps) {\n  const { preference, toggleTheme } = useTheme();\n  const icon = ICONS[preference];\n  const label = LABELS[preference];\n\n  const aria = `${srLabel} ${label}. Click to cycle.`;\n\n  return (\n    <Button\n      type=\"button\"\n      variant=\"text\"\n      onClick={toggleTheme}\n      aria-label={aria}\n      title={aria}\n      className={className}\n      data-theme-toggle={preference}\n    >\n      {display !== 'text' && <span aria-hidden=\"true\">{icon}</span>}\n      {display !== 'icon' && <span>{label}</span>}\n    </Button>\n  );\n}\n\nexport default ThemeToggle;\n","import { THEME_STORAGE_KEY } from './theme-provider';\n\n/**\n * Returns a string containing an IIFE to inject in the document `<head>`\n * before any styles or React code loads. It reads the stored theme\n * preference (or falls back to prefers-color-scheme) and sets\n * `data-theme` on `<html>` synchronously, so consumers never see a\n * flash of the wrong theme before ThemeProvider hydrates.\n *\n * Usage (Next.js, Astro, Remix, or hand-rolled SSR):\n *\n *   <head>\n *     <script\n *       dangerouslySetInnerHTML={{ __html: getThemeFoucScript() }}\n *     />\n *   </head>\n *\n * The script is intentionally small (<500 bytes) so it doesn't hurt LCP.\n */\nexport function getThemeFoucScript(storageKey: string = THEME_STORAGE_KEY): string {\n  // The script body is a single expression so a minifier can inline it verbatim.\n  // It deliberately avoids optional chaining and nullish coalescing to stay\n  // compatible with older SSR targets that don't transpile inline <script> blocks.\n  return `\n(function(){\n  try {\n    var k = ${JSON.stringify(storageKey)};\n    var s = window.localStorage.getItem(k);\n    var t = (s === 'light' || s === 'dark')\n      ? s\n      : (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');\n    document.documentElement.setAttribute('data-theme', t);\n  } catch (_) {}\n})();\n`.trim();\n}\n"]}