@fpkit/acss 0.5.12 → 0.6.0

package/libs/chunk-GUJSMQ3V.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+var chunkENTCUJ3A_cjs = require('./chunk-ENTCUJ3A.cjs');
+var t = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var t__default = /*#__PURE__*/_interopDefault(t);
+
+var n=t__default.default.forwardRef(({type:e="li",id:s,styles:i,children:r,classes:o,...L},m)=>t__default.default.createElement(chunkENTCUJ3A_cjs.a,{id:s,as:e,className:o,style:i,ref:m,...L},r));n.displayName="ListItem";var a=t__default.default.forwardRef(({children:e,classes:s,type:i="ul",variant:r,styles:o,role:L,...m},l)=>t__default.default.createElement(chunkENTCUJ3A_cjs.a,{as:i,"data-variant":r,className:s,style:o,role:L,ref:l,...m},e));a.displayName="List";var f=Object.assign(a,{ListItem:n}),d=f;
+
+exports.a = n;
+exports.b = a;
+exports.c = d;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-GUJSMQ3V.cjs.map

package/libs/chunk-GUJSMQ3V.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/list/list.tsx"],"names":["React","ListItem","type","id","styles","children","classes","props","ref","ui_default","List","variant","role","ListWithItem","list_default"],"mappings":"yCACA,OAAOA,MAAW,QA8CX,IAAMC,EAAWD,EAAM,WAG5B,CAAC,CAAE,KAAAE,EAAO,KAAM,GAAAC,EAAI,OAAAC,EAAQ,SAAAC,EAAU,QAAAC,EAAS,GAAGC,CAAM,EAAGC,IAEzDR,EAAA,cAACS,EAAA,CACC,GAAIN,EACJ,GAAID,EACJ,UAAWI,EACX,MAAOF,EACP,IAAKI,EACJ,GAAGD,GAEHF,CACH,CAEH,EAEDJ,EAAS,YAAc,WA4EhB,IAAMS,EAAOV,EAAM,WAGxB,CAAC,CAAE,SAAAK,EAAU,QAAAC,EAAS,KAAAJ,EAAO,KAAM,QAAAS,EAAS,OAAAP,EAAQ,KAAAQ,EAAM,GAAGL,CAAM,EAAGC,IAEpER,EAAA,cAACS,EAAA,CACC,GAAIP,EACJ,eAAcS,EACd,UAAWL,EACX,MAAOF,EACP,KAAMQ,EACN,IAAKJ,EACJ,GAAGD,GAEHF,CACH,CAEH,EAEDK,EAAK,YAAc,OAWnB,IAAMG,EAAe,OAAO,OAAOH,EAAM,CACvC,SAAAT,CACF,CAAC,EAEMa,EAAQD","sourcesContent":["import UI from \"#components/ui\";\nimport React from \"react\";\nimport type { ListProps, ListItemProps } from \"./list.types\";\n\n// Re-export types for external use\nexport type { ListProps, ListItemProps };\n\n/**\n * ListItem - A flexible list item component for ul, ol, and dl lists.\n *\n * This component renders different HTML elements (li, dt, dd) based on the parent\n * list type, maintaining semantic HTML and accessibility best practices.\n *\n * ## Key Features:\n * - **Semantic HTML**: Renders appropriate element type (li, dt, dd)\n * - **Type-Safe**: Full TypeScript support with comprehensive props\n * - **Ref Forwarding**: Enables direct DOM access for focus management\n * - **Customizable**: Supports custom styles and CSS classes\n *\n * ## Accessibility:\n * - ✅ Uses semantic HTML elements\n * - ✅ Works with screen readers out of the box\n * - ✅ Supports all native HTML attributes\n * - ✅ Ref forwarding for programmatic focus\n *\n * @example\n * ```tsx\n * // Standard list item\n * <ListItem>Item content</ListItem>\n * ```\n *\n * @example\n * ```tsx\n * // Definition term\n * <ListItem type=\"dt\">Term to define</ListItem>\n * ```\n *\n * @example\n * ```tsx\n * // Definition description\n * <ListItem type=\"dd\">The definition text</ListItem>\n * ```\n *\n * @param {ListItemProps} props - Component props\n * @param {React.Ref} ref - Forwarded ref for DOM access\n * @returns {React.ReactElement} A list item element\n */\nexport const ListItem = React.forwardRef<\n  HTMLLIElement | HTMLElement,\n  ListItemProps\n>(({ type = \"li\", id, styles, children, classes, ...props }, ref) => {\n  return (\n    <UI\n      id={id}\n      as={type}\n      className={classes}\n      style={styles}\n      ref={ref}\n      {...props}\n    >\n      {children}\n    </UI>\n  );\n});\n\nListItem.displayName = \"ListItem\";\n\n/**\n * List - A flexible, accessible list component for creating ul, ol, and dl lists.\n *\n * This component provides a type-safe, accessible way to create different types of lists\n * with built-in support for custom styling, variants, and WCAG 2.1 AA compliance.\n *\n * ## Key Features:\n * - **Multiple List Types**: Supports ul (unordered), ol (ordered), and dl (definition) lists\n * - **Semantic HTML**: Uses native HTML list elements for proper accessibility\n * - **Customizable Styling**: CSS custom properties and variant support\n * - **Type-Safe**: Comprehensive TypeScript types with JSDoc\n * - **Ref Forwarding**: Direct DOM access for scroll positioning and focus management\n * - **WCAG 2.1 AA**: Meets accessibility standards with proper semantic structure\n *\n * ## Accessibility:\n * - ✅ WCAG 2.1 AA compliant using semantic HTML\n * - ✅ Screen reader compatible (announced as \"list\" with item count)\n * - ✅ Supports role=\"list\" override for styled lists (Safari/VoiceOver compatibility)\n * - ✅ Keyboard navigation works naturally with focusable children\n * - ✅ Ref forwarding for programmatic focus management\n *\n * ## Common Use Cases:\n * - **Navigation menus** - Use ul with variant=\"inline\" or \"none\"\n * - **Sequential steps** - Use ol for numbered instructions\n * - **Glossaries** - Use dl for term-definition pairs\n * - **Feature lists** - Use ul for product features\n *\n * @example\n * ```tsx\n * // Basic unordered list\n * <List>\n *   <List.ListItem>First item</List.ListItem>\n *   <List.ListItem>Second item</List.ListItem>\n * </List>\n * ```\n *\n * @example\n * ```tsx\n * // Ordered list with custom styling\n * <List\n *   type=\"ol\"\n *   variant=\"numbered\"\n *   styles={{ '--list-marker-color': '#0066cc' }}\n * >\n *   <List.ListItem>Step one</List.ListItem>\n *   <List.ListItem>Step two</List.ListItem>\n * </List>\n * ```\n *\n * @example\n * ```tsx\n * // Unstyled list with role restoration for accessibility\n * // IMPORTANT: Use role=\"list\" when removing list styling\n * <List variant=\"none\" role=\"list\">\n *   <List.ListItem>Navigation link</List.ListItem>\n *   <List.ListItem>Another link</List.ListItem>\n * </List>\n * ```\n *\n * @example\n * ```tsx\n * // Definition list\n * <List type=\"dl\">\n *   <List.ListItem type=\"dt\">React</List.ListItem>\n *   <List.ListItem type=\"dd\">A JavaScript library for building UIs</List.ListItem>\n *   <List.ListItem type=\"dt\">TypeScript</List.ListItem>\n *   <List.ListItem type=\"dd\">JavaScript with syntax for types</List.ListItem>\n * </List>\n * ```\n *\n * @param {ListProps} props - Component props\n * @param {React.Ref} ref - Forwarded ref for DOM access\n * @returns {React.ReactElement} A list element (ul, ol, or dl)\n */\nexport const List = React.forwardRef<\n  HTMLUListElement | HTMLOListElement | HTMLDListElement,\n  ListProps\n>(({ children, classes, type = \"ul\", variant, styles, role, ...props }, ref) => {\n  return (\n    <UI\n      as={type}\n      data-variant={variant}\n      className={classes}\n      style={styles}\n      role={role}\n      ref={ref}\n      {...props}\n    >\n      {children}\n    </UI>\n  );\n});\n\nList.displayName = \"List\";\n\n// Compound component pattern - attach ListItem to List with proper typing\nexport interface ListComponent\n  extends React.ForwardRefExoticComponent<\n    ListProps & React.RefAttributes<HTMLUListElement | HTMLOListElement | HTMLDListElement>\n  > {\n  ListItem: typeof ListItem;\n}\n\n// Attach ListItem to List using Object.assign for better type inference\nconst ListWithItem = Object.assign(List, {\n  ListItem,\n});\n\nexport default ListWithItem as ListComponent;\n"]}

package/libs/chunk-HHLNOC5T.js

@@ -0,0 +1,7 @@
+import e from 'react';
+
+var t=e.forwardRef(({as:o,styles:p,classes:r,children:n,defaultStyles:s,...a},m)=>{let c=o??"div",C={...s,...p};return e.createElement(c,{ref:m,style:C,className:r,...a},n)}),R=t;t.displayName="UI";
+
+export { R as a };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-HHLNOC5T.js.map

package/libs/chunk-HHLNOC5T.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ui.tsx"],"names":["React","UI","as","styles","classes","children","defaultStyles","props","ref","Component","styleObj","ui_default"],"mappings":"AAEA,OAAOA,MAAW,QAiTlB,IAAMC,EAAkBD,EAAM,WAC5B,CACE,CAAE,GAAAE,EAAI,OAAAC,EAAQ,QAAAC,EAAS,SAAAC,EAAU,cAAAC,EAAe,GAAGC,CAAM,EACzDC,IACG,CACH,IAAMC,EAAYP,GAAM,MAElBQ,EAAgC,CAAE,GAAGJ,EAAe,GAAGH,CAAO,EAEpE,OACEH,EAAA,cAACS,EAAA,CAAU,IAAKD,EAAK,MAAOE,EAAU,UAAWN,EAAU,GAAGG,GAC3DF,CACH,CAEJ,CACF,EAEOM,EAAQV,EACfA,EAAG,YAAc","sourcesContent":[" \n/* eslint-disable */\nimport React from \"react\";\n\n/**\n * Extracts the appropriate ref type for a given element type.\n *\n * This utility type ensures that refs are properly typed based on the element\n * being rendered. For example, a button element receives HTMLButtonElement ref.\n * Excludes legacy string refs (deprecated since React 16.3).\n *\n * @typeParam C - The HTML element type (e.g., 'button', 'div', 'a')\n * @example\n * ```typescript\n * type ButtonRef = PolymorphicRef<'button'>; // React.Ref<HTMLButtonElement>\n * type DivRef = PolymorphicRef<'div'>; // React.Ref<HTMLDivElement>\n * ```\n */\ntype PolymorphicRef<C extends React.ElementType> = React.Ref<\n  React.ElementRef<C>\n>;\n\n/**\n * Defines the 'as' prop that determines which HTML element to render.\n *\n * This is the core prop that enables polymorphic behavior, allowing components\n * to render as any valid React element type while maintaining type safety.\n *\n * @typeParam C - The HTML element type to render\n * @example\n * ```typescript\n * <UI as=\"button\">Click me</UI>\n * <UI as=\"a\" href=\"/home\">Link</UI>\n * ```\n */\ntype AsProp<C extends React.ElementType> = {\n  as?: C;\n};\n\n/**\n * Identifies props that should be omitted to prevent type conflicts.\n *\n * This type ensures that our custom props don't conflict with native element\n * props by calculating which keys need to be omitted from the native props.\n *\n * @typeParam C - The HTML element type\n * @typeParam P - The custom props to merge\n */\ntype PropsToOmit<C extends React.ElementType, P> = keyof (AsProp<C> & P);\n\n/**\n * Merges custom props with native element props while preventing conflicts.\n *\n * This creates a union of our custom props and the native props for the chosen\n * element, omitting any conflicting keys to ensure type safety.\n *\n * @typeParam C - The HTML element type\n * @typeParam Props - The custom props to add\n * @example\n * ```typescript\n * // For a button, this merges custom props with HTMLButtonElement props\n * type ButtonProps = PolymorphicComponentProp<'button', { variant?: string }>;\n * ```\n */\ntype PolymorphicComponentProp<\n  C extends React.ElementType,\n  Props = {},\n> = React.PropsWithChildren<Props & AsProp<C>> &\n  Omit<React.ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>;\n\n/**\n * Extends PolymorphicComponentProp to include properly-typed ref support.\n *\n * This is the final type in the polymorphic type chain, adding ref forwarding\n * with the correct ref type for the chosen element. The ref is properly typed\n * to match the element being rendered, enabling focus management and direct\n * DOM access for accessibility features like programmatic focus control.\n *\n * Supports both PolymorphicRef and ForwardedRef for compatibility with\n * React.forwardRef components.\n *\n * @typeParam C - The HTML element type\n * @typeParam Props - The custom props to add\n *\n * @example\n * ```typescript\n * // Using ref for focus management (important for accessibility)\n * const buttonRef = useRef<HTMLButtonElement>(null);\n * useEffect(() => {\n *   // Programmatically focus for keyboard navigation\n *   buttonRef.current?.focus();\n * }, []);\n *\n * return <UI as=\"button\" ref={buttonRef}>Accessible Button</UI>;\n * ```\n */\ntype PolymorphicComponentPropWithRef<\n  C extends React.ElementType,\n  Props = {},\n> = PolymorphicComponentProp<C, Props> & {\n  ref?: PolymorphicRef<C> | React.ForwardedRef<React.ElementRef<C>>;\n};\n\n/**\n * Props for the UI component, extending polymorphic props with style and class support.\n *\n * The UI component automatically forwards all ARIA attributes and native HTML props\n * to the rendered element, ensuring full accessibility support. This includes:\n * - `aria-label`, `aria-labelledby` - Accessible names for screen readers\n * - `aria-describedby` - Additional descriptive text references\n * - `aria-expanded`, `aria-controls` - Interactive widget states\n * - `role` - Semantic role override when needed\n * - All other ARIA attributes and HTML props\n *\n * @typeParam C - The HTML element type to render\n * @property {boolean} [renderStyles] - Reserved for future use. Currently has no effect.\n *   Styles are always rendered regardless of this prop value.\n * @property {React.CSSProperties} [styles] - Inline styles to apply (overrides defaultStyles)\n * @property {React.CSSProperties} [defaultStyles] - Base styles that can be overridden by styles prop\n * @property {string} [classes] - CSS class names to apply to the element\n * @property {string} [id] - HTML id attribute\n * @property {React.ReactNode} [children] - Child elements to render\n *\n * @example\n * ```typescript\n * // All ARIA attributes are automatically forwarded\n * <UI as=\"button\" aria-label=\"Close dialog\" aria-expanded={isOpen}>\n *   <CloseIcon />\n * </UI>\n * ```\n */\ntype UIProps<C extends React.ElementType> = PolymorphicComponentPropWithRef<\n  C,\n  {\n    /** @deprecated Reserved for future use. Currently has no effect. Styles are always rendered. */\n    renderStyles?: boolean;\n    styles?: React.CSSProperties;\n    defaultStyles?: React.CSSProperties;\n    classes?: string;\n    id?: string;\n    children?: React.ReactNode;\n  }\n>;\n\n/**\n * UI Component function signature.\n *\n * Defines the polymorphic component that can render as any HTML element while\n * maintaining full TypeScript type safety for element-specific props.\n *\n * @typeParam C - The HTML element type to render (defaults to 'div')\n * @param {UIProps<C>} props - Component props including 'as', styles, and native element props\n * @returns {React.ReactElement} A React element of the specified type\n * @example\n * ```typescript\n * <UI as=\"button\" onClick={handler}>Button</UI>\n * <UI as=\"a\" href=\"/link\">Link</UI>\n * <UI>Default div</UI>\n * ```\n */\ntype UIComponent = (<C extends React.ElementType = \"div\">(\n  props: UIProps<C>\n) => React.ReactElement | any) & { displayName?: string };\n\n/**\n * UI - A polymorphic React component that can render as any HTML element.\n *\n * The UI component is a foundational primitive used throughout fpkit to create\n * flexible, type-safe components. It implements the polymorphic component pattern,\n * allowing a single component to render as different HTML elements while maintaining\n * full TypeScript type safety for element-specific props.\n *\n * ## Accessibility Considerations\n *\n * The UI component forwards all ARIA attributes and native HTML props, placing\n * accessibility responsibility on the consumer. When creating interactive elements,\n * you MUST ensure WCAG 2.1 AA compliance:\n *\n * - **Accessible Names**: All interactive elements need an accessible name via\n *   `aria-label`, `aria-labelledby`, or visible text content\n * - **Semantic HTML**: Prefer semantic elements (`button`, `a`, `nav`) over\n *   generic containers (`div`, `span`) with ARIA roles when possible\n * - **Focus Indicators**: Ensure focus indicators meet WCAG 2.4.7 (3:1 contrast)\n * - **Keyboard Support**: Interactive elements must be keyboard accessible\n *\n * @typeParam C - The HTML element type to render (e.g., 'button', 'div', 'a')\n *\n * @param {C} [as='div'] - The HTML element type to render. Defaults to 'div'.\n * @param {React.CSSProperties} [styles] - Inline styles to apply. Overrides defaultStyles.\n * @param {string} [classes] - CSS class names to apply to the element.\n * @param {React.CSSProperties} [defaultStyles] - Base styles that can be overridden by styles prop.\n * @param {React.ReactNode} [children] - Child elements to render inside the component.\n * @param {PolymorphicRef<C>} [ref] - Forwarded ref with proper typing for the element type.\n * @param {boolean} [renderStyles] - Reserved for future use. Currently has no effect.\n *\n * @returns {React.ReactElement} A React element of the specified type with merged props.\n *\n * @example\n * // Basic usage - renders as div\n * <UI>Hello World</UI>\n *\n * @example\n * // Polymorphic rendering - renders as button with type-safe props\n * <UI as=\"button\" onClick={handleClick} disabled>\n *   Click me\n * </UI>\n *\n * @example\n * // ✅ GOOD: Accessible button with aria-label for icon-only button\n * <UI as=\"button\" aria-label=\"Close dialog\" onClick={handleClose}>\n *   <CloseIcon />\n * </UI>\n *\n * @example\n * // ✅ GOOD: Accessible link with descriptive text\n * <UI as=\"a\" href=\"/products\">\n *   View all products\n * </UI>\n *\n * @example\n * // ✅ GOOD: Interactive element with proper role and keyboard support\n * <UI\n *   as=\"div\"\n *   role=\"button\"\n *   tabIndex={0}\n *   aria-label=\"Toggle menu\"\n *   onClick={handleToggle}\n *   onKeyDown={(e) => e.key === 'Enter' && handleToggle()}\n * >\n *   Menu\n * </UI>\n *\n * @example\n * // ❌ BAD: Button without accessible name (screen readers can't identify it)\n * <UI as=\"button\" onClick={handleClose}>\n *   <CloseIcon />\n * </UI>\n *\n * @example\n * // ❌ BAD: Non-semantic div with click handler (not keyboard accessible)\n * <UI as=\"div\" onClick={handleClick}>\n *   Click me\n * </UI>\n *\n * @example\n * // ✅ GOOD: Custom focus indicator with WCAG 2.4.7 compliant contrast\n * <UI\n *   as=\"button\"\n *   styles={{\n *     outline: '2px solid transparent',\n *     outlineOffset: '2px',\n *   }}\n *   classes=\"focus:outline-blue-500\"\n * >\n *   Accessible Button\n * </UI>\n *\n * @example\n * // Style merging - defaultStyles provide base, styles override\n * <UI\n *   as=\"span\"\n *   defaultStyles={{ padding: '0.5rem', color: 'blue' }}\n *   styles={{ color: 'red' }}\n * >\n *   Red text with padding\n * </UI>\n *\n * @example\n * // Ref forwarding for focus management\n * const buttonRef = useRef<HTMLButtonElement>(null);\n * useEffect(() => {\n *   // Programmatically focus for keyboard navigation\n *   buttonRef.current?.focus();\n * }, []);\n * <UI as=\"button\" ref={buttonRef}>Auto-focused Button</UI>\n *\n * @example\n * // Building accessible higher-level components with TypeScript\n * interface AccessibleButtonProps extends React.ComponentPropsWithoutRef<'button'> {\n *   variant?: 'primary' | 'secondary';\n *   // Require either aria-label or children for accessibility\n *   'aria-label'?: string;\n *   children?: React.ReactNode;\n * }\n *\n * const AccessibleButton = React.forwardRef<HTMLButtonElement, AccessibleButtonProps>(\n *   ({ variant = 'primary', ...props }, ref) => {\n *     // Runtime check: ensure accessible name is provided\n *     if (!props['aria-label'] && !props.children) {\n *       console.warn('AccessibleButton requires either aria-label or children');\n *     }\n *\n *     return (\n *       <UI\n *         as=\"button\"\n *         ref={ref}\n *         defaultStyles={{\n *           padding: '0.5rem 1rem',\n *           borderRadius: '0.25rem',\n *           backgroundColor: variant === 'primary' ? '#007bff' : '#6c757d',\n *         }}\n *         {...props}\n *       />\n *     );\n *   }\n * );\n */\nconst UI: UIComponent = React.forwardRef(\n  <C extends React.ElementType>(\n    { as, styles, classes, children, defaultStyles, ...props }: UIProps<C>,\n    ref?: PolymorphicRef<C>\n  ) => {\n    const Component = as ?? \"div\";\n\n    const styleObj: React.CSSProperties = { ...defaultStyles, ...styles };\n\n    return (\n      <Component ref={ref} style={styleObj} className={classes} {...props}>\n        {children}\n      </Component>\n    );\n  }\n);\n\nexport default UI;\nUI.displayName = \"UI\";\n"]}

package/libs/chunk-HRRHPLER.js

@@ -0,0 +1,8 @@
+import { a } from './chunk-HHLNOC5T.js';
+import l from 'react';
+
+var t=({label:o,labelFor:a$1,id:r,styles:p,classes:s,children:d,...i})=>l.createElement(a,{as:"div",id:r,styles:p,className:s,"data-style":"fields",...i},l.createElement("label",{htmlFor:a$1},o),d),n=t;t.displayName="Field";
+
+export { t as a, n as b };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-HRRHPLER.js.map

package/libs/chunk-HRRHPLER.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/fields.tsx"],"names":["React","Field","label","labelFor","id","styles","classes","children","props","ui_default","fields_default"],"mappings":"wCAAA,OAAOA,MAAW,QA4BX,IAAMC,EAAQ,CAAC,CACpB,MAAAC,EACA,SAAAC,EACA,GAAAC,EACA,OAAAC,EACA,QAAAC,EACA,SAAAC,EACA,GAAGC,CACL,IAEIR,EAAA,cAACS,EAAA,CACC,GAAG,MACH,GAAIL,EACJ,OAAQC,EACR,UAAWC,EACX,aAAW,SACV,GAAGE,GAEJR,EAAA,cAAC,SAAM,QAASG,GAAWD,CAAM,EAChCK,CACH,EAIGG,EAAQT,EACfA,EAAM,YAAc","sourcesContent":["import React from 'react'\nimport UI from '../ui'\n\nexport type FieldProps = {\n  /**\n   * The label content\n   */\n  label: React.ReactNode\n  /**\n   * ID of the associated form control (REQUIRED for accessibility)\n   * Must match the id of the child input/select/textarea element.\n   * This ensures proper label-to-input association for screen readers.\n   * @example \"email-input\"\n   * @see {@link https://www.w3.org/WAI/WCAG21/Understanding/labels-or-instructions.html|WCAG 3.3.2 Labels or Instructions}\n   */\n  labelFor: string\n  children: React.ReactNode\n} & React.ComponentProps<'label'> &\n  Partial<React.ComponentProps<typeof UI>>\n/**\n * Field component that renders a label and children wrapped in a div element.\n * Ensures proper accessibility by requiring the labelFor prop to associate labels with form controls.\n * @param labelFor Defines the for attribute of the label element (REQUIRED)\n * @param styles Custom styles to be applied to the component\n * @param label The label content\n * @param children The children to be rendered inside the component\n * @param props Additional props to be spread to the component\n */\nexport const Field = ({\n  label,\n  labelFor,\n  id,\n  styles,\n  classes,\n  children,\n  ...props\n}: FieldProps) => {\n  return (\n    <UI\n      as=\"div\"\n      id={id}\n      styles={styles}\n      className={classes}\n      data-style=\"fields\"\n      {...props}\n    >\n      <label htmlFor={labelFor}>{label}</label>\n      {children}\n    </UI>\n  )\n}\n\nexport default Field\nField.displayName = 'Field'\n"]}

package/libs/chunk-IEB64SWY.js

@@ -0,0 +1,8 @@
+import { a as a$1 } from './chunk-HHLNOC5T.js';
+import t from 'react';
+
+var n=t.forwardRef(({type:e="li",id:s,styles:i,children:r,classes:o,...L},m)=>t.createElement(a$1,{id:s,as:e,className:o,style:i,ref:m,...L},r));n.displayName="ListItem";var a=t.forwardRef(({children:e,classes:s,type:i="ul",variant:r,styles:o,role:L,...m},l)=>t.createElement(a$1,{as:i,"data-variant":r,className:s,style:o,role:L,ref:l,...m},e));a.displayName="List";var f=Object.assign(a,{ListItem:n}),d=f;
+
+export { n as a, a as b, d as c };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-IEB64SWY.js.map

package/libs/chunk-IEB64SWY.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/list/list.tsx"],"names":["React","ListItem","type","id","styles","children","classes","props","ref","ui_default","List","variant","role","ListWithItem","list_default"],"mappings":"wCACA,OAAOA,MAAW,QA8CX,IAAMC,EAAWD,EAAM,WAG5B,CAAC,CAAE,KAAAE,EAAO,KAAM,GAAAC,EAAI,OAAAC,EAAQ,SAAAC,EAAU,QAAAC,EAAS,GAAGC,CAAM,EAAGC,IAEzDR,EAAA,cAACS,EAAA,CACC,GAAIN,EACJ,GAAID,EACJ,UAAWI,EACX,MAAOF,EACP,IAAKI,EACJ,GAAGD,GAEHF,CACH,CAEH,EAEDJ,EAAS,YAAc,WA4EhB,IAAMS,EAAOV,EAAM,WAGxB,CAAC,CAAE,SAAAK,EAAU,QAAAC,EAAS,KAAAJ,EAAO,KAAM,QAAAS,EAAS,OAAAP,EAAQ,KAAAQ,EAAM,GAAGL,CAAM,EAAGC,IAEpER,EAAA,cAACS,EAAA,CACC,GAAIP,EACJ,eAAcS,EACd,UAAWL,EACX,MAAOF,EACP,KAAMQ,EACN,IAAKJ,EACJ,GAAGD,GAEHF,CACH,CAEH,EAEDK,EAAK,YAAc,OAWnB,IAAMG,EAAe,OAAO,OAAOH,EAAM,CACvC,SAAAT,CACF,CAAC,EAEMa,EAAQD","sourcesContent":["import UI from \"#components/ui\";\nimport React from \"react\";\nimport type { ListProps, ListItemProps } from \"./list.types\";\n\n// Re-export types for external use\nexport type { ListProps, ListItemProps };\n\n/**\n * ListItem - A flexible list item component for ul, ol, and dl lists.\n *\n * This component renders different HTML elements (li, dt, dd) based on the parent\n * list type, maintaining semantic HTML and accessibility best practices.\n *\n * ## Key Features:\n * - **Semantic HTML**: Renders appropriate element type (li, dt, dd)\n * - **Type-Safe**: Full TypeScript support with comprehensive props\n * - **Ref Forwarding**: Enables direct DOM access for focus management\n * - **Customizable**: Supports custom styles and CSS classes\n *\n * ## Accessibility:\n * - ✅ Uses semantic HTML elements\n * - ✅ Works with screen readers out of the box\n * - ✅ Supports all native HTML attributes\n * - ✅ Ref forwarding for programmatic focus\n *\n * @example\n * ```tsx\n * // Standard list item\n * <ListItem>Item content</ListItem>\n * ```\n *\n * @example\n * ```tsx\n * // Definition term\n * <ListItem type=\"dt\">Term to define</ListItem>\n * ```\n *\n * @example\n * ```tsx\n * // Definition description\n * <ListItem type=\"dd\">The definition text</ListItem>\n * ```\n *\n * @param {ListItemProps} props - Component props\n * @param {React.Ref} ref - Forwarded ref for DOM access\n * @returns {React.ReactElement} A list item element\n */\nexport const ListItem = React.forwardRef<\n  HTMLLIElement | HTMLElement,\n  ListItemProps\n>(({ type = \"li\", id, styles, children, classes, ...props }, ref) => {\n  return (\n    <UI\n      id={id}\n      as={type}\n      className={classes}\n      style={styles}\n      ref={ref}\n      {...props}\n    >\n      {children}\n    </UI>\n  );\n});\n\nListItem.displayName = \"ListItem\";\n\n/**\n * List - A flexible, accessible list component for creating ul, ol, and dl lists.\n *\n * This component provides a type-safe, accessible way to create different types of lists\n * with built-in support for custom styling, variants, and WCAG 2.1 AA compliance.\n *\n * ## Key Features:\n * - **Multiple List Types**: Supports ul (unordered), ol (ordered), and dl (definition) lists\n * - **Semantic HTML**: Uses native HTML list elements for proper accessibility\n * - **Customizable Styling**: CSS custom properties and variant support\n * - **Type-Safe**: Comprehensive TypeScript types with JSDoc\n * - **Ref Forwarding**: Direct DOM access for scroll positioning and focus management\n * - **WCAG 2.1 AA**: Meets accessibility standards with proper semantic structure\n *\n * ## Accessibility:\n * - ✅ WCAG 2.1 AA compliant using semantic HTML\n * - ✅ Screen reader compatible (announced as \"list\" with item count)\n * - ✅ Supports role=\"list\" override for styled lists (Safari/VoiceOver compatibility)\n * - ✅ Keyboard navigation works naturally with focusable children\n * - ✅ Ref forwarding for programmatic focus management\n *\n * ## Common Use Cases:\n * - **Navigation menus** - Use ul with variant=\"inline\" or \"none\"\n * - **Sequential steps** - Use ol for numbered instructions\n * - **Glossaries** - Use dl for term-definition pairs\n * - **Feature lists** - Use ul for product features\n *\n * @example\n * ```tsx\n * // Basic unordered list\n * <List>\n *   <List.ListItem>First item</List.ListItem>\n *   <List.ListItem>Second item</List.ListItem>\n * </List>\n * ```\n *\n * @example\n * ```tsx\n * // Ordered list with custom styling\n * <List\n *   type=\"ol\"\n *   variant=\"numbered\"\n *   styles={{ '--list-marker-color': '#0066cc' }}\n * >\n *   <List.ListItem>Step one</List.ListItem>\n *   <List.ListItem>Step two</List.ListItem>\n * </List>\n * ```\n *\n * @example\n * ```tsx\n * // Unstyled list with role restoration for accessibility\n * // IMPORTANT: Use role=\"list\" when removing list styling\n * <List variant=\"none\" role=\"list\">\n *   <List.ListItem>Navigation link</List.ListItem>\n *   <List.ListItem>Another link</List.ListItem>\n * </List>\n * ```\n *\n * @example\n * ```tsx\n * // Definition list\n * <List type=\"dl\">\n *   <List.ListItem type=\"dt\">React</List.ListItem>\n *   <List.ListItem type=\"dd\">A JavaScript library for building UIs</List.ListItem>\n *   <List.ListItem type=\"dt\">TypeScript</List.ListItem>\n *   <List.ListItem type=\"dd\">JavaScript with syntax for types</List.ListItem>\n * </List>\n * ```\n *\n * @param {ListProps} props - Component props\n * @param {React.Ref} ref - Forwarded ref for DOM access\n * @returns {React.ReactElement} A list element (ul, ol, or dl)\n */\nexport const List = React.forwardRef<\n  HTMLUListElement | HTMLOListElement | HTMLDListElement,\n  ListProps\n>(({ children, classes, type = \"ul\", variant, styles, role, ...props }, ref) => {\n  return (\n    <UI\n      as={type}\n      data-variant={variant}\n      className={classes}\n      style={styles}\n      role={role}\n      ref={ref}\n      {...props}\n    >\n      {children}\n    </UI>\n  );\n});\n\nList.displayName = \"List\";\n\n// Compound component pattern - attach ListItem to List with proper typing\nexport interface ListComponent\n  extends React.ForwardRefExoticComponent<\n    ListProps & React.RefAttributes<HTMLUListElement | HTMLOListElement | HTMLDListElement>\n  > {\n  ListItem: typeof ListItem;\n}\n\n// Attach ListItem to List using Object.assign for better type inference\nconst ListWithItem = Object.assign(List, {\n  ListItem,\n});\n\nexport default ListWithItem as ListComponent;\n"]}

package/libs/{chunk-LIQJ7ZZR.js → chunk-IQ76HGVP.js}

@@ -1,8 +1,8 @@
-import { a } from './chunk-NE6YXTMC.js';
+import { a } from './chunk-HHLNOC5T.js';
 import m from 'react';
 
 var l=({elm:e="p",id:t,text:o,styles:s,classes:p,children:r,...i})=>m.createElement(a,{as:e,id:t,styles:s,className:p,...i},m.createElement(a,{as:e,id:t,styles:s,className:p,...i},r||o)),n=({elm:e="h3",id:t,children:o,styles:s,classes:p,...r})=>m.createElement(l,{as:e,id:t,styles:s,className:p,...r},o),d=l;l.displayName="Text";n.displayName="Title";
 
 export { l as a, n as b, d as c };
 //# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-LIQJ7ZZR.js.map
+//# sourceMappingURL=chunk-IQ76HGVP.js.map

package/libs/chunk-IRLFZ3OL.js

@@ -0,0 +1,9 @@
+import { a } from './chunk-75QHTLFO.js';
+import { a as a$1 } from './chunk-HHLNOC5T.js';
+import n from 'react';
+
+var m=n.forwardRef(({id:e,classes:p,value:f,rows:c=5,cols:y=25,name:x,required:t,disabled:T,readOnly:b,validationState:h="none",errorMessage:u,hintText:v,onBlur:E,onPointerDown:M,onChange:N,onKeyDown:s,onEnter:i,styles:P,placeholder:g,...A},H)=>{let{disabledProps:o,handlers:I}=a(T,{handlers:{onChange:N,onBlur:E,onPointerDown:M,onKeyDown:r=>{r.key==="Enter"&&!r.shiftKey&&i&&i(r),s&&s(r);}},className:p}),L=h==="invalid",a$2=[];u&&e&&a$2.push(`${e}-error`),v&&e&&a$2.push(`${e}-hint`);let $=a$2.length>0?a$2.join(" "):void 0;return n.createElement(a$1,{as:"textarea",id:e,name:x,rows:c,cols:y,styles:P,className:o.className,"data-style":"textarea",required:t,value:f,"aria-disabled":o["aria-disabled"],"aria-required":t,"aria-invalid":L,"aria-describedby":$,readOnly:b,...I,ref:H,placeholder:g||`${t?"*":""} Message`,...A})});m.displayName="Textarea";var K=m;
+
+export { m as a, K as b };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-IRLFZ3OL.js.map

package/libs/chunk-IRLFZ3OL.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/textarea.tsx"],"names":["React","Textarea","id","classes","value","rows","cols","name","required","disabled","readOnly","validationState","errorMessage","hintText","onBlur","onPointerDown","onChange","onKeyDown","onEnter","styles","placeholder","props","ref","disabledProps","handlers","useDisabledState","e","isInvalid","describedByIds","ariaDescribedBy","ui_default","textarea_default"],"mappings":"gFAAA,OAAOA,MAAW,QAuCX,IAAMC,EAAWD,EAAM,WAC5B,CACE,CACE,GAAAE,EACA,QAAAC,EACA,MAAAC,EACA,KAAAC,EAAO,EACP,KAAAC,EAAO,GACP,KAAAC,EACA,SAAAC,EACA,SAAAC,EACA,SAAAC,EACA,gBAAAC,EAAkB,OAClB,aAAAC,EACA,SAAAC,EACA,OAAAC,EACA,cAAAC,EACA,SAAAC,EACA,UAAAC,EACA,QAAAC,EACA,OAAAC,EACA,YAAAC,EACA,GAAGC,CACL,EACAC,IACG,CAEH,GAAM,CAAE,cAAAC,EAAe,SAAAC,CAAS,EAAIC,EAClChB,EACA,CACE,SAAU,CACR,SAAAO,EACA,OAAAF,EACA,cAAAC,EACA,UAAYW,GAAgD,CAItDA,EAAE,MAAQ,SAAW,CAACA,EAAE,UAAYR,GACtCA,EAAQQ,CAAC,EAGPT,GACFA,EAAUS,CAAC,CAEf,CACF,EAEA,UAAWvB,CACb,CACF,EAGMwB,EAAYhB,IAAoB,UAGhCiB,EAA2B,CAAC,EAC9BhB,GAAgBV,GAClB0B,EAAe,KAAK,GAAG1B,CAAE,QAAQ,EAE/BW,GAAYX,GACd0B,EAAe,KAAK,GAAG1B,CAAE,OAAO,EAElC,IAAM2B,EACJD,EAAe,OAAS,EAAIA,EAAe,KAAK,GAAG,EAAI,OAEzD,OACE5B,EAAA,cAAC8B,EAAA,CACC,GAAG,WACH,GAAI5B,EACJ,KAAMK,EACN,KAAMF,EACN,KAAMC,EACN,OAAQa,EACR,UAAWI,EAAc,UACzB,aAAW,WACX,SAAUf,EACV,MAAOJ,EACP,gBAAemB,EAAc,eAAe,EAC5C,gBAAef,EACf,eAAcmB,EACd,mBAAkBE,EAClB,SAAUnB,EACT,GAAGc,EACJ,IAAKF,EACL,YAAaF,GAAe,GAAGZ,EAAW,IAAM,EAAE,WACjD,GAAGa,EACN,CAEJ,CACF,EAEApB,EAAS,YAAc,WAEvB,IAAO8B,EAAQ9B","sourcesContent":["import React from 'react'\nimport UI from '../ui'\nimport { useDisabledState } from '../../hooks/use-disabled-state'\n\nexport type { TextareaProps } from './form.types'\nimport type { TextareaProps } from './form.types'\n\n/**\n * Textarea component - Accessible multi-line text input with validation support\n *\n * A flexible textarea component that supports validation states, proper ARIA attributes\n * for accessibility, and an onEnter handler for keyboard interactions. The onEnter handler\n * fires only on Enter without Shift, allowing Shift+Enter to create new lines as expected.\n *\n * @component\n * @example\n * // Basic textarea\n * <Textarea\n *   id=\"message\"\n *   name=\"message\"\n *   placeholder=\"Enter your message\"\n *   required\n * />\n *\n * @example\n * // Textarea with Enter key handler for quick submission\n * <Textarea\n *   id=\"comment\"\n *   name=\"comment\"\n *   onEnter={(e) => handleSubmit()}\n *   placeholder=\"Press Enter to submit, Shift+Enter for new line\"\n * />\n *\n * @param {TextareaProps} props - Component props\n * @returns {JSX.Element} Textarea element with proper accessibility attributes\n *\n * @see {@link https://www.w3.org/WAI/WCAG21/Understanding/keyboard.html|WCAG 2.1.1 Keyboard}\n * @see {@link https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html|WCAG 4.1.2 Name, Role, Value}\n */\nexport const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n  (\n    {\n      id,\n      classes,\n      value,\n      rows = 5,\n      cols = 25,\n      name,\n      required,\n      disabled,\n      readOnly,\n      validationState = 'none',\n      errorMessage,\n      hintText,\n      onBlur,\n      onPointerDown,\n      onChange,\n      onKeyDown,\n      onEnter,\n      styles,\n      placeholder,\n      ...props\n    },\n    ref\n  ) => {\n    // Use the disabled state hook with enhanced API for automatic className merging\n    const { disabledProps, handlers } = useDisabledState<HTMLTextAreaElement>(\n      disabled,\n      {\n        handlers: {\n          onChange,\n          onBlur,\n          onPointerDown,\n          onKeyDown: (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n            // Handle Enter key press for accessibility\n            // Only triggers onEnter when Enter is pressed WITHOUT Shift modifier\n            // This allows Shift+Enter to create new lines as expected\n            if (e.key === 'Enter' && !e.shiftKey && onEnter) {\n              onEnter(e)\n            }\n            // Always call consumer's onKeyDown if provided\n            if (onKeyDown) {\n              onKeyDown(e)\n            }\n          },\n        },\n        // Automatic className merging - hook combines disabled class with user classes\n        className: classes,\n      }\n    )\n\n    // Determine aria-invalid based on validation state\n    const isInvalid = validationState === 'invalid'\n\n    // Generate describedby IDs for error and hint text\n    const describedByIds: string[] = []\n    if (errorMessage && id) {\n      describedByIds.push(`${id}-error`)\n    }\n    if (hintText && id) {\n      describedByIds.push(`${id}-hint`)\n    }\n    const ariaDescribedBy =\n      describedByIds.length > 0 ? describedByIds.join(' ') : undefined\n\n    return (\n      <UI\n        as=\"textarea\"\n        id={id}\n        name={name}\n        rows={rows}\n        cols={cols}\n        styles={styles}\n        className={disabledProps.className}\n        data-style=\"textarea\"\n        required={required}\n        value={value}\n        aria-disabled={disabledProps['aria-disabled']}\n        aria-required={required}\n        aria-invalid={isInvalid}\n        aria-describedby={ariaDescribedBy}\n        readOnly={readOnly}\n        {...handlers}\n        ref={ref}\n        placeholder={placeholder || `${required ? '*' : ''} Message`}\n        {...props}\n      />\n    )\n  }\n)\n\nTextarea.displayName = 'Textarea'\n\nexport default Textarea\n"]}

package/libs/chunk-KK47SYZI.js

@@ -0,0 +1,8 @@
+import { a } from './chunk-HHLNOC5T.js';
+import l from 'react';
+
+function p(...e){return e.filter(Boolean).join(" ")}var y={CARD:"card",TITLE:"card-title",CONTENT:"card-content",FOOTER:"card-footer"};function c(e,r){r&&(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),r(e));}var f=({children:e,className:r,style:a$1,as:t="h3",...o})=>l.createElement(a,{as:t,className:p(y.TITLE,r),styles:a$1,...o},e);f.displayName="Card.Title";var b=({children:e,className:r,style:a$1,as:t="article",...o})=>l.createElement(a,{as:t,className:p(y.CONTENT,r),styles:a$1,...o},e);b.displayName="Card.Content";var m=({children:e,className:r,style:a$1,as:t="div",...o})=>l.createElement(a,{as:t,className:p(y.FOOTER,r),styles:a$1,...o},e);m.displayName="Card.Footer";var i=({as:e="div",styles:r,children:a$1,classes:t="shadow",id:o,interactive:n=!1,onClick:s,tabIndex:u,role:C,"aria-label":T,"aria-labelledby":E,"aria-describedby":P,...N})=>(l.useEffect(()=>{},[s,n]),l.createElement(a,{as:e,id:o,styles:r,className:t,"aria-label":T,"aria-labelledby":E,"aria-describedby":P,"data-card":n?"interactive":!0,...n?{role:C||"button",tabIndex:u??0,onClick:s,onKeyDown:v=>{(n||s)&&c(v,s);}}:{role:C,onClick:s},...N},a$1)),h=i;i.displayName="Card";i.Title=f;i.Content=b;i.Footer=m;
+
+export { f as a, b, m as c, i as d, h as e };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-KK47SYZI.js.map

package/libs/chunk-KK47SYZI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/cards/card.tsx","../src/components/cards/card.utils.ts"],"names":["React","cn","classes","CARD_CLASSES","handleCardKeyDown","event","onClick","Title","children","className","style","as","props","ui_default","Content","Footer","Card","styles","id","interactive","tabIndex","role","ariaLabel","ariaLabelledBy","ariaDescribedBy","card_default"],"mappings":"wCAAA,OAAOA,MAAW,QCoBX,SAASC,KAAMC,EAAwD,CAC5E,OAAOA,EAAQ,OAAO,OAAO,EAAE,KAAK,GAAG,CACzC,CAMO,IAAMC,EAAe,CAC1B,KAAM,OACN,MAAO,aACP,QAAS,eACT,OAAQ,aACV,EAcO,SAASC,EACdC,EACAC,EACM,CACDA,IAGDD,EAAM,MAAQ,SAAWA,EAAM,MAAQ,OACzCA,EAAM,eAAe,EACrBC,EAAQD,CAAK,EAEjB,CDzBO,IAAME,EAAQ,CAAC,CACpB,SAAAC,EACA,UAAAC,EACA,MAAAC,EACA,GAAAC,EAAK,KACL,GAAGC,CACL,IAEIZ,EAAA,cAACa,EAAA,CACC,GAAIF,EACJ,UAAWV,EAAGE,EAAa,MAAOM,CAAS,EAC3C,OAAQC,EACP,GAAGE,GAEHJ,CACH,EAIJD,EAAM,YAAc,aA+Bb,IAAMO,EAAU,CAAC,CACtB,SAAAN,EACA,UAAAC,EACA,MAAAC,EACA,GAAAC,EAAK,UACL,GAAGC,CACL,IAEIZ,EAAA,cAACa,EAAA,CACC,GAAIF,EACJ,UAAWV,EAAGE,EAAa,QAASM,CAAS,EAC7C,OAAQC,EACP,GAAGE,GAEHJ,CACH,EAIJM,EAAQ,YAAc,eA4Bf,IAAMC,EAAS,CAAC,CACrB,SAAAP,EACA,UAAAC,EACA,MAAAC,EACA,GAAAC,EAAK,MACL,GAAGC,CACL,IAEIZ,EAAA,cAACa,EAAA,CACC,GAAIF,EACJ,UAAWV,EAAGE,EAAa,OAAQM,CAAS,EAC5C,OAAQC,EACP,GAAGE,GAEHJ,CACH,EAIJO,EAAO,YAAc,cAuEd,IAAMC,EAAO,CAAC,CACnB,GAAAL,EAAK,MACL,OAAAM,EACA,SAAAT,EACA,QAAAN,EAAU,SACV,GAAAgB,EACA,YAAAC,EAAc,GACd,QAAAb,EACA,SAAAc,EACA,KAAAC,EACA,aAAcC,EACd,kBAAmBC,EACnB,mBAAoBC,EACpB,GAAGZ,CACL,KAEEZ,EAAM,UAAU,IAAM,CAEtB,EAAG,CAACM,EAASa,CAAW,CAAC,EAsBvBnB,EAAA,cAACa,EAAA,CACC,GAAIF,EACJ,GAAIO,EACJ,OAAQD,EACR,UAAWf,EACX,aAAYoB,EACZ,kBAAiBC,EACjB,mBAAkBC,EAClB,YAAWL,EAAc,cAAgB,GACxC,GAtBoBA,EACrB,CACE,KAAME,GAAQ,SACd,SAAUD,GAAY,EACtB,QAAAd,EACA,UAXiBD,GAA+B,EAChDc,GAAeb,IACjBF,EAAkBC,EAAOC,CAAO,CAEpC,CAQI,EACA,CACE,KAAAe,EACA,QAAAf,CACF,EAaC,GAAGM,GAEHJ,CACH,GAIGiB,EAAQT,EACfA,EAAK,YAAc,OACnBA,EAAK,MAAQT,EACbS,EAAK,QAAUF,EACfE,EAAK,OAASD","sourcesContent":["import React from 'react'\nimport UI from '#components/ui'\nimport type {\n  CardProps,\n  CardTitleProps,\n  CardContentProps,\n  CardFooterProps,\n} from './card.types'\nimport { cn, CARD_CLASSES, handleCardKeyDown, warnInteractiveUsage } from './card.utils'\n\n/**\n * Card.Title - Title sub-component for Card\n *\n * Renders a heading element for the card title. Defaults to h3 for proper\n * document outline, but can be customized via the `as` prop.\n *\n * ## Accessibility\n * - Use appropriate heading level based on document structure\n * - Combine with `aria-labelledby` on parent Card for accessible names\n *\n * @example\n * ```tsx\n * <Card aria-labelledby=\"card-title-1\">\n *   <Card.Title id=\"card-title-1\">Featured Product</Card.Title>\n * </Card>\n * ```\n *\n * @example\n * ```tsx\n * // Custom heading level\n * <Card.Title as=\"h2\">Section Title</Card.Title>\n * ```\n */\nexport const Title = ({\n  children,\n  className,\n  style,\n  as = 'h3',\n  ...props\n}: CardTitleProps) => {\n  return (\n    <UI\n      as={as}\n      className={cn(CARD_CLASSES.TITLE, className)}\n      styles={style}\n      {...props}\n    >\n      {children}\n    </UI>\n  )\n}\n\nTitle.displayName = 'Card.Title'\n\n/**\n * Card.Content - Content sub-component for Card\n *\n * Renders the main content area of the card. Defaults to `<article>` for\n * standalone content, but can be changed to `div` or `section` via the `as` prop.\n *\n * ## Semantic HTML Guidelines\n * - Use `article` (default) for self-contained, syndicate-able content\n * - Use `div` for generic content containers\n * - Use `section` for thematic groupings with a heading\n *\n * @example\n * ```tsx\n * <Card>\n *   <Card.Title>Article Title</Card.Title>\n *   <Card.Content>\n *     <p>This is standalone content...</p>\n *   </Card.Content>\n * </Card>\n * ```\n *\n * @example\n * ```tsx\n * // Generic container (not standalone content)\n * <Card.Content as=\"div\">\n *   <p>Generic content...</p>\n * </Card.Content>\n * ```\n */\nexport const Content = ({\n  children,\n  className,\n  style,\n  as = 'article',\n  ...props\n}: CardContentProps) => {\n  return (\n    <UI\n      as={as}\n      className={cn(CARD_CLASSES.CONTENT, className)}\n      styles={style}\n      {...props}\n    >\n      {children}\n    </UI>\n  )\n}\n\nContent.displayName = 'Card.Content'\n\n/**\n * Card.Footer - Footer sub-component for Card\n *\n * Renders a footer section for the card. Use for actions, metadata, or\n * supplementary information.\n *\n * @example\n * ```tsx\n * <Card>\n *   <Card.Title>Product</Card.Title>\n *   <Card.Content>Description...</Card.Content>\n *   <Card.Footer>\n *     <button>Add to Cart</button>\n *     <span>$29.99</span>\n *   </Card.Footer>\n * </Card>\n * ```\n *\n * @example\n * ```tsx\n * // Semantic footer element\n * <Card.Footer as=\"footer\">\n *   <p>Last updated: 2024-01-15</p>\n * </Card.Footer>\n * ```\n */\nexport const Footer = ({\n  children,\n  className,\n  style,\n  as = 'div',\n  ...props\n}: CardFooterProps) => {\n  return (\n    <UI\n      as={as}\n      className={cn(CARD_CLASSES.FOOTER, className)}\n      styles={style}\n      {...props}\n    >\n      {children}\n    </UI>\n  )\n}\n\nFooter.displayName = 'Card.Footer'\n\n/**\n * Card - A flexible, accessible card component with compound component pattern\n *\n * The Card component provides a container for grouping related content and actions.\n * It follows the compound component pattern, exposing `Card.Title`, `Card.Content`,\n * and `Card.Footer` sub-components for structured layouts.\n *\n * ## Features\n * - **Polymorphic rendering**: Render as any HTML element via `as` prop\n * - **Compound components**: Structured sub-components for consistent layouts\n * - **Interactive variant**: Built-in keyboard navigation and ARIA support\n * - **Fully accessible**: WCAG 2.1 AA compliant with proper semantic HTML\n *\n * ## Accessibility\n *\n * ### Non-Interactive Cards\n * - Use semantic HTML: `article` for standalone content, `section` for groupings\n * - Provide accessible names with `aria-labelledby` referencing the title\n *\n * ### Interactive Cards (Clickable)\n * - Set `interactive={true}` to enable keyboard navigation (Enter/Space)\n * - Provide accessible name via `aria-label` or `aria-labelledby`\n * - Ensure adequate focus indicators (handled by CSS)\n *\n * @example\n * // Basic card with compound components\n * ```tsx\n * <Card>\n *   <Card.Title>Product Name</Card.Title>\n *   <Card.Content>\n *     <p>Product description goes here...</p>\n *   </Card.Content>\n *   <Card.Footer>\n *     <button>Buy Now</button>\n *   </Card.Footer>\n * </Card>\n * ```\n *\n * @example\n * // Accessible interactive card\n * ```tsx\n * <Card\n *   interactive\n *   aria-label=\"View product details\"\n *   onClick={() => navigate('/product/123')}\n * >\n *   <Card.Title>Product Name</Card.Title>\n *   <Card.Content>Click anywhere to view details</Card.Content>\n * </Card>\n * ```\n *\n * @example\n * // Semantic article card with accessible name\n * ```tsx\n * <Card as=\"article\" aria-labelledby=\"article-title\">\n *   <Card.Title id=\"article-title\">Article Headline</Card.Title>\n *   <Card.Content>Article body...</Card.Content>\n * </Card>\n * ```\n *\n * @example\n * // Card as a landmark region\n * ```tsx\n * <Card role=\"region\" aria-label=\"Featured products\">\n *   <Card.Title>Featured</Card.Title>\n *   <Card.Content>...</Card.Content>\n * </Card>\n * ```\n */\nexport const Card = ({\n  as = 'div',\n  styles,\n  children,\n  classes = 'shadow',\n  id,\n  interactive = false,\n  onClick,\n  tabIndex,\n  role,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  ...props\n}: CardProps) => {\n  // Development warnings for common accessibility issues\n  React.useEffect(() => {\n    warnInteractiveUsage(!!onClick, interactive)\n  }, [onClick, interactive])\n\n  // Interactive card handling\n  const handleKeyDown = (event: React.KeyboardEvent) => {\n    if (interactive || onClick) {\n      handleCardKeyDown(event, onClick)\n    }\n  }\n\n  const interactiveProps = interactive\n    ? {\n        role: role || 'button',\n        tabIndex: tabIndex ?? 0,\n        onClick,\n        onKeyDown: handleKeyDown,\n      }\n    : {\n        role,\n        onClick,\n      }\n\n  return (\n    <UI\n      as={as}\n      id={id}\n      styles={styles}\n      className={classes}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      aria-describedby={ariaDescribedBy}\n      data-card={interactive ? 'interactive' : true}\n      {...interactiveProps}\n      {...props}\n    >\n      {children}\n    </UI>\n  )\n}\n\nexport default Card\nCard.displayName = 'Card'\nCard.Title = Title\nCard.Content = Content\nCard.Footer = Footer\n\n// Export types for external consumption\nexport type { CardProps, CardTitleProps, CardContentProps, CardFooterProps } from './card.types'\n","/**\n * Utility functions for the Card component.\n */\n\n/**\n * Combines multiple className strings into a single string, filtering out falsy values.\n *\n * This utility provides a cleaner alternative to template literals for className composition,\n * avoiding unnecessary string allocation on every render.\n *\n * @param classes - Array of class names (can include undefined/null/empty strings)\n * @returns Combined className string\n *\n * @example\n * ```tsx\n * cn('card-title', className) // \"card-title custom-class\"\n * cn('card-title', undefined) // \"card-title\"\n * cn('card-title', '', 'extra') // \"card-title extra\"\n * ```\n */\nexport function cn(...classes: (string | undefined | null | false)[]): string {\n  return classes.filter(Boolean).join(' ')\n}\n\n/**\n * CSS class name constants for Card components.\n * Centralizing these prevents typos and enables easier refactoring.\n */\nexport const CARD_CLASSES = {\n  CARD: 'card',\n  TITLE: 'card-title',\n  CONTENT: 'card-content',\n  FOOTER: 'card-footer',\n} as const\n\n/**\n * Handles keyboard events for interactive cards.\n * Triggers click handler on Enter or Space key press.\n *\n * @param event - Keyboard event\n * @param onClick - Click handler to invoke\n *\n * @example\n * ```tsx\n * <div onKeyDown={(e) => handleCardKeyDown(e, handleClick)}>\n * ```\n */\nexport function handleCardKeyDown(\n  event: React.KeyboardEvent,\n  onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void\n): void {\n  if (!onClick) return\n\n  // Activate on Enter or Space (standard keyboard interaction pattern)\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault() // Prevent page scroll on Space\n    onClick(event)\n  }\n}\n\n/**\n * Development warning for interactive card usage.\n * Warns when onClick is provided without the interactive prop.\n *\n * This function is intentionally empty to comply with no-console linting rules.\n * In the future, consider using a proper logging/warning system.\n *\n * @param hasOnClick - Whether onClick handler is provided\n * @param isInteractive - Whether interactive prop is set\n */\nexport function warnInteractiveUsage(\n  hasOnClick: boolean,\n  isInteractive?: boolean\n): void {\n  // Development warning removed to comply with ESLint no-console rule\n  // TODO: Consider using a proper warning system if needed\n  void hasOnClick\n  void isInteractive\n}\n"]}

package/libs/chunk-O3JIHC5M.cjs

@@ -0,0 +1,15 @@
+'use strict';
+
+var chunkENTCUJ3A_cjs = require('./chunk-ENTCUJ3A.cjs');
+var l = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var l__default = /*#__PURE__*/_interopDefault(l);
+
+var t=({label:o,labelFor:a,id:r,styles:p,classes:s,children:d,...i})=>l__default.default.createElement(chunkENTCUJ3A_cjs.a,{as:"div",id:r,styles:p,className:s,"data-style":"fields",...i},l__default.default.createElement("label",{htmlFor:a},o),d),n=t;t.displayName="Field";
+
+exports.a = t;
+exports.b = n;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-O3JIHC5M.cjs.map

package/libs/chunk-O3JIHC5M.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/fields.tsx"],"names":["React","Field","label","labelFor","id","styles","classes","children","props","ui_default","fields_default"],"mappings":"yCAAA,OAAOA,MAAW,QA4BX,IAAMC,EAAQ,CAAC,CACpB,MAAAC,EACA,SAAAC,EACA,GAAAC,EACA,OAAAC,EACA,QAAAC,EACA,SAAAC,EACA,GAAGC,CACL,IAEIR,EAAA,cAACS,EAAA,CACC,GAAG,MACH,GAAIL,EACJ,OAAQC,EACR,UAAWC,EACX,aAAW,SACV,GAAGE,GAEJR,EAAA,cAAC,SAAM,QAASG,GAAWD,CAAM,EAChCK,CACH,EAIGG,EAAQT,EACfA,EAAM,YAAc","sourcesContent":["import React from 'react'\nimport UI from '../ui'\n\nexport type FieldProps = {\n  /**\n   * The label content\n   */\n  label: React.ReactNode\n  /**\n   * ID of the associated form control (REQUIRED for accessibility)\n   * Must match the id of the child input/select/textarea element.\n   * This ensures proper label-to-input association for screen readers.\n   * @example \"email-input\"\n   * @see {@link https://www.w3.org/WAI/WCAG21/Understanding/labels-or-instructions.html|WCAG 3.3.2 Labels or Instructions}\n   */\n  labelFor: string\n  children: React.ReactNode\n} & React.ComponentProps<'label'> &\n  Partial<React.ComponentProps<typeof UI>>\n/**\n * Field component that renders a label and children wrapped in a div element.\n * Ensures proper accessibility by requiring the labelFor prop to associate labels with form controls.\n * @param labelFor Defines the for attribute of the label element (REQUIRED)\n * @param styles Custom styles to be applied to the component\n * @param label The label content\n * @param children The children to be rendered inside the component\n * @param props Additional props to be spread to the component\n */\nexport const Field = ({\n  label,\n  labelFor,\n  id,\n  styles,\n  classes,\n  children,\n  ...props\n}: FieldProps) => {\n  return (\n    <UI\n      as=\"div\"\n      id={id}\n      styles={styles}\n      className={classes}\n      data-style=\"fields\"\n      {...props}\n    >\n      <label htmlFor={labelFor}>{label}</label>\n      {children}\n    </UI>\n  )\n}\n\nexport default Field\nField.displayName = 'Field'\n"]}

package/libs/chunk-O5XAJ7BY.cjs

@@ -0,0 +1,18 @@
+'use strict';
+
+var chunkGUJSMQ3V_cjs = require('./chunk-GUJSMQ3V.cjs');
+var chunkENTCUJ3A_cjs = require('./chunk-ENTCUJ3A.cjs');
+var t = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var t__default = /*#__PURE__*/_interopDefault(t);
+
+var i=t__default.default.forwardRef(({isBlock:e,children:s,...o},r)=>t__default.default.createElement(chunkGUJSMQ3V_cjs.c,{type:"ul",...o,"data-list":e?"unstyled block":"unstyled",ref:r},s));i.displayName="NavList";var m=t__default.default.forwardRef(({id:e,styles:s,classes:o,children:r,...N},v)=>t__default.default.createElement(chunkGUJSMQ3V_cjs.c.ListItem,{type:"li",id:e,classes:o,styles:s,ref:v,...N},r));m.displayName="NavItem";var n=t__default.default.forwardRef(({children:e,...s},o)=>t__default.default.createElement(chunkENTCUJ3A_cjs.a,{as:"nav",...s,ref:o},e));n.displayName="Nav";var f=Object.assign(n,{List:i,Item:m}),y=f;
+
+exports.a = i;
+exports.b = m;
+exports.c = n;
+exports.d = y;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-O5XAJ7BY.cjs.map

package/libs/chunk-O5XAJ7BY.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/nav/nav.tsx"],"names":["React","NavList","isBlock","children","props","ref","list_default","NavItem","id","styles","classes","Nav","ui_default","NavWithSubComponents","nav_default"],"mappings":"kFAEA,OAAOA,MAAW,QAkEX,IAAMC,EAAUD,EAAM,WAG3B,CAAC,CAAE,QAAAE,EAAS,SAAAC,EAAU,GAAGC,CAAM,EAAGC,IAEhCL,EAAA,cAACM,EAAA,CACC,KAAK,KACJ,GAAGF,EACJ,YAAWF,EAAU,iBAAmB,WACxC,IAAKG,GAEJF,CACH,CAEH,EAEDF,EAAQ,YAAc,UAsEf,IAAMM,EAAUP,EAAM,WAG3B,CAAC,CAAE,GAAAQ,EAAI,OAAAC,EAAQ,QAAAC,EAAS,SAAAP,EAAU,GAAGC,CAAM,EAAGC,IAE5CL,EAAA,cAACM,EAAK,SAAL,CACC,KAAK,KACL,GAAIE,EACJ,QAASE,EACT,OAAQD,EACR,IAAKJ,EACJ,GAAGD,GAEHD,CACH,CAEH,EAEDI,EAAQ,YAAc,UA+Hf,IAAMI,EAAMX,EAAM,WACvB,CAAC,CAAE,SAAAG,EAAU,GAAGC,CAAM,EAAGC,IAErBL,EAAA,cAACY,EAAA,CAAG,GAAG,MAAO,GAAGR,EAAO,IAAKC,GAC1BF,CACH,CAGN,EAEAQ,EAAI,YAAc,MAYlB,IAAME,EAAuB,OAAO,OAAOF,EAAK,CAC9C,KAAMV,EACN,KAAMM,CACR,CAAC,EAEMO,EAAQD","sourcesContent":["import UI from \"../ui\";\nimport List from \"../list/list\";\nimport React from \"react\";\nimport type { NavProps, NavListProps, NavItemProps } from \"./nav.types\";\n\n// Re-export types for external use\nexport type { NavProps, NavListProps, NavItemProps };\n\n/**\n * NavList - A navigation-specific list component for grouping navigation items.\n *\n * Extends the List component with navigation-specific layout options through\n * the `isBlock` prop. Automatically renders as an unstyled list to maintain\n * clean navigation aesthetics.\n *\n * ## Key Features:\n * - **Flexible Layout**: Supports both horizontal (inline) and vertical (block) layouts\n * - **Semantic HTML**: Uses `<ul>` element for proper document structure\n * - **Unstyled by Default**: Removes default list markers for clean navigation\n * - **Accessible**: Works naturally with screen readers\n *\n * ## Accessibility:\n * - ✅ Uses semantic `<ul>` element\n * - ✅ Screen readers announce as \"list\" with item count\n * - ✅ Supports `aria-label` for multiple lists\n * - ✅ Keyboard navigation works naturally with focusable children\n *\n * ## Layout Options:\n * - **Inline (default)**: Horizontal navigation bars, top menus\n * - **Block**: Vertical sidebars, mobile menus, footer navigation\n *\n * @example\n * ```tsx\n * // Horizontal navigation (default)\n * <NavList>\n *   <NavItem><Link href=\"/\">Home</Link></NavItem>\n *   <NavItem><Link href=\"/about\">About</Link></NavItem>\n * </NavList>\n * ```\n *\n * @example\n * ```tsx\n * // Vertical sidebar navigation\n * <NavList isBlock>\n *   <NavItem><Link href=\"/dashboard\">Dashboard</Link></NavItem>\n *   <NavItem><Link href=\"/settings\">Settings</Link></NavItem>\n * </NavList>\n * ```\n *\n * @example\n * ```tsx\n * // Multiple lists with labels\n * <Nav>\n *   <NavList aria-label=\"Primary navigation\">\n *     <NavItem><Link href=\"/\">Home</Link></NavItem>\n *   </NavList>\n *   <NavList aria-label=\"User menu\">\n *     <NavItem><Link href=\"/profile\">Profile</Link></NavItem>\n *   </NavList>\n * </Nav>\n * ```\n *\n * @param {NavListProps} props - Component props\n * @param {boolean} [props.isBlock=false] - Display items vertically (block layout)\n * @param {React.ReactNode} props.children - Navigation items (typically NavItem components)\n * @param {string} [props.aria-label] - Accessible label for the list\n * @returns {React.ReactElement} A navigation list component\n */\nexport const NavList = React.forwardRef<\n  HTMLUListElement,\n  NavListProps\n>(({ isBlock, children, ...props }, ref) => {\n  return (\n    <List\n      type=\"ul\"\n      {...props}\n      data-list={isBlock ? \"unstyled block\" : \"unstyled\"}\n      ref={ref}\n    >\n      {children}\n    </List>\n  );\n});\n\nNavList.displayName = \"NavList\";\n\n/**\n * NavItem - An individual navigation link container (list item).\n *\n * Wraps navigation content (typically Link components) in a semantic list item\n * element with consistent styling and accessibility support.\n *\n * ## Key Features:\n * - **Semantic HTML**: Uses `<li>` element for proper list structure\n * - **Flexible Content**: Accepts any React content (links, buttons, text)\n * - **Customizable**: Supports custom styles and CSS classes\n * - **Ref Forwarding**: Enables direct DOM access for advanced use cases\n *\n * ## Accessibility:\n * - ✅ Uses semantic `<li>` element\n * - ✅ Works with screen readers out of the box\n * - ✅ Supports keyboard navigation naturally\n * - ✅ Ref forwarding for programmatic focus if needed\n *\n * ## Best Practices:\n * - Always wrap with NavList/Nav for proper semantics\n * - Use `aria-current=\"page\"` on the link inside to indicate current page\n * - Ensure link text is descriptive and meaningful\n * - Maintain sufficient color contrast (WCAG 2.1: 4.5:1 for normal text)\n *\n * @example\n * ```tsx\n * // Basic navigation item\n * <NavItem>\n *   <Link href=\"/about\">About Us</Link>\n * </NavItem>\n * ```\n *\n * @example\n * ```tsx\n * // Current page with aria-current\n * <NavItem>\n *   <Link href=\"/about\" aria-current=\"page\">\n *     About Us\n *   </Link>\n * </NavItem>\n * ```\n *\n * @example\n * ```tsx\n * // Custom styling\n * <NavItem\n *   classes=\"nav-item-featured\"\n *   styles={{ fontWeight: 'bold' }}\n * >\n *   <Link href=\"/special\">Special Offer</Link>\n * </NavItem>\n * ```\n *\n * @example\n * ```tsx\n * // With icon\n * <NavItem>\n *   <Link href=\"/settings\">\n *     <SettingsIcon aria-hidden=\"true\" />\n *     Settings\n *   </Link>\n * </NavItem>\n * ```\n *\n * @param {NavItemProps} props - Component props\n * @param {React.Ref} ref - Forwarded ref for DOM access\n * @returns {React.ReactElement} A navigation item component\n */\nexport const NavItem = React.forwardRef<\n  HTMLLIElement,\n  NavItemProps\n>(({ id, styles, classes, children, ...props }, ref) => {\n  return (\n    <List.ListItem\n      type=\"li\"\n      id={id}\n      classes={classes}\n      styles={styles}\n      ref={ref}\n      {...props}\n    >\n      {children}\n    </List.ListItem>\n  );\n});\n\nNavItem.displayName = \"NavItem\";\n\n/**\n * Nav - A semantic navigation container component for site navigation.\n *\n * The Nav component provides a semantic `<nav>` landmark element that helps\n * users navigate your site. It meets WCAG 2.1 AA accessibility standards and\n * follows modern React best practices with full TypeScript support.\n *\n * ## Key Features:\n * - **Semantic HTML**: Uses native `<nav>` element for accessibility\n * - **Landmark Role**: Automatically provides navigation landmark for screen readers\n * - **Flexible Layout**: Supports multiple navigation patterns through CSS custom properties\n * - **Compound Components**: Use Nav.List and Nav.Item for consistent structure\n * - **Type-Safe**: Full TypeScript support with comprehensive JSDoc documentation\n * - **Ref Forwarding**: Direct DOM access for scroll positioning and focus management\n *\n * ## Accessibility (WCAG 2.1 AA Compliant):\n * - ✅ **4.1.2 Name, Role, Value**: Uses semantic `<nav>` element (landmark role)\n * - ✅ **2.4.1 Bypass Blocks**: Navigation landmark helps skip repeated content\n * - ✅ **1.3.1 Info and Relationships**: Proper list structure with ul > li\n * - ✅ **2.4.8 Location**: Supports `aria-label` for multiple navigation regions\n * - ✅ **4.1.3 Status Messages**: Use `aria-current=\"page\"` on links for current page\n *\n * ## When to Use aria-label:\n * - ✅ **Required**: When you have multiple `<nav>` elements on the same page\n * - ✅ **Recommended**: To distinguish navigation purpose (e.g., \"Footer navigation\")\n * - ❌ **Not needed**: For single navigation regions\n *\n * ## CSS Custom Properties:\n * - `--nav-dsp`: Display mode (default: flex)\n * - `--nav-direction`: Flex direction (default: row)\n * - `--nav-bg`: Background color\n * - `--nav-h`: Minimum height\n * - `--nav-px`: Horizontal padding (default: 1rem)\n * - `--nav-gap`: Gap between items\n * - `--nav-fs`: Font size (default: 0.9rem)\n *\n * @example\n * ```tsx\n * // Simple navigation\n * <Nav>\n *   <Nav.List>\n *     <Nav.Item><Link href=\"/\">Home</Link></Nav.Item>\n *     <Nav.Item><Link href=\"/about\">About</Link></Nav.Item>\n *   </Nav.List>\n * </Nav>\n * ```\n *\n * @example\n * ```tsx\n * // Multiple navigation regions (requires aria-label)\n * <Nav aria-label=\"Main navigation\">\n *   <Nav.List>\n *     <Nav.Item><Link href=\"/\">Home</Link></Nav.Item>\n *   </Nav.List>\n * </Nav>\n *\n * <Nav aria-label=\"Footer navigation\">\n *   <Nav.List>\n *     <Nav.Item><Link href=\"/privacy\">Privacy</Link></Nav.Item>\n *   </Nav.List>\n * </Nav>\n * ```\n *\n * @example\n * ```tsx\n * // Current page indication\n * <Nav aria-label=\"Main navigation\">\n *   <Nav.List>\n *     <Nav.Item>\n *       <Link href=\"/\" aria-current=\"page\">Home</Link>\n *     </Nav.Item>\n *     <Nav.Item>\n *       <Link href=\"/about\">About</Link>\n *     </Nav.Item>\n *   </Nav.List>\n * </Nav>\n * ```\n *\n * @example\n * ```tsx\n * // Vertical sidebar navigation\n * <Nav aria-label=\"Sidebar navigation\">\n *   <Nav.List isBlock>\n *     <Nav.Item><Link href=\"/dashboard\">Dashboard</Link></Nav.Item>\n *     <Nav.Item><Link href=\"/settings\">Settings</Link></Nav.Item>\n *   </Nav.List>\n * </Nav>\n * ```\n *\n * @example\n * ```tsx\n * // Complex navbar with multiple sections\n * <Nav classes=\"navbar\" aria-label=\"Main navigation\">\n *   <Nav.List aria-label=\"Primary menu\">\n *     <Nav.Item><Link href=\"/\">Home</Link></Nav.Item>\n *     <Nav.Item><Link href=\"/products\">Products</Link></Nav.Item>\n *   </Nav.List>\n *   <Nav.List aria-label=\"User menu\">\n *     <Nav.Item><Link href=\"/login\">Login</Link></Nav.Item>\n *     <Nav.Item><Link href=\"/signup\">Sign Up</Link></Nav.Item>\n *   </Nav.List>\n * </Nav>\n * ```\n *\n * @example\n * ```tsx\n * // Custom theming with CSS properties\n * <Nav\n *   aria-label=\"Main navigation\"\n *   styles={{\n *     '--nav-bg': '#1a1a1a',\n *     '--nav-h': '4rem',\n *     '--nav-px': '2rem',\n *   }}\n * >\n *   <Nav.List>\n *     <Nav.Item><Link href=\"/\">Home</Link></Nav.Item>\n *   </Nav.List>\n * </Nav>\n * ```\n *\n * @param {NavProps} props - Component props\n * @param {React.Ref} ref - Forwarded ref for DOM access\n * @returns {React.ReactElement} A navigation element\n */\nexport const Nav = React.forwardRef<HTMLElement, NavProps>(\n  ({ children, ...props }, ref) => {\n    return (\n      <UI as=\"nav\" {...props} ref={ref}>\n        {children}\n      </UI>\n    );\n  }\n);\n\nNav.displayName = \"Nav\";\n\n// Compound component pattern - attach sub-components to Nav\nexport interface NavComponent\n  extends React.ForwardRefExoticComponent<\n    NavProps & React.RefAttributes<HTMLElement>\n  > {\n  List: typeof NavList;\n  Item: typeof NavItem;\n}\n\n// Attach sub-components using Object.assign for better type inference\nconst NavWithSubComponents = Object.assign(Nav, {\n  List: NavList,\n  Item: NavItem,\n});\n\nexport default NavWithSubComponents as NavComponent;\n"]}

package/libs/chunk-OVWLQYMK.js

@@ -0,0 +1,10 @@
+import { a as a$1 } from './chunk-BFK62VX5.js';
+import { a as a$2 } from './chunk-75QHTLFO.js';
+import { a as a$3 } from './chunk-HHLNOC5T.js';
+import D from 'react';
+
+var a=({type:r="button",children:p,styles:i,disabled:l,isDisabled:n,classes:m,onPointerDown:d,onPointerOver:u,onPointerLeave:b,onClick:y,onKeyDown:P,...c})=>{let f=a$1(l,n),{disabledProps:t,handlers:B}=a$2(f,{handlers:{onClick:y,onPointerDown:d,onKeyDown:P},className:m});return D.createElement(a$3,{as:"button",type:r,"aria-disabled":t["aria-disabled"],onPointerOver:u,onPointerLeave:b,style:i,className:t.className,...B,...c},p)},x=a;a.displayName="Button";
+
+export { a, x as b };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-OVWLQYMK.js.map

package/libs/chunk-OVWLQYMK.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/buttons/button.tsx"],"names":["React","Button","type","children","styles","disabled","isDisabled","classes","onPointerDown","onPointerOver","onPointerLeave","onClick","onKeyDown","props","isActuallyDisabled","resolveDisabledState","disabledProps","handlers","useDisabledState","ui_default","button_default"],"mappings":"wHACA,OAAOA,MAAW,QAmEX,IAAMC,EAAS,CAAC,CACrB,KAAAC,EAAO,SACP,SAAAC,EACA,OAAAC,EACA,SAAAC,EACA,WAAAC,EACA,QAAAC,EACA,cAAAC,EACA,cAAAC,EACA,eAAAC,EACA,QAAAC,EACA,UAAAC,EACA,GAAGC,CACL,IAAmB,CAEjB,IAAMC,EAAqBC,EAAqBV,EAAUC,CAAU,EAG9D,CAAE,cAAAU,EAAe,SAAAC,CAAS,EAAIC,EAClCJ,EACA,CACE,SAAU,CACR,QAAAH,EACA,cAAAH,EACA,UAAAI,CACF,EAEA,UAAWL,CAGb,CACF,EAGA,OACEP,EAAA,cAACmB,EAAA,CACC,GAAG,SACH,KAAMjB,EACN,gBAAec,EAAc,eAAe,EAC5C,cAAeP,EACf,eAAgBC,EAChB,MAAON,EACP,UAAWY,EAAc,UACxB,GAAGC,EACH,GAAGJ,GAEHV,CACH,CAEJ,EAEOiB,EAAQnB,EACfA,EAAO,YAAc","sourcesContent":["import UI from '../ui'\nimport React from 'react'\nimport { useDisabledState } from '../../hooks/use-disabled-state'\nimport { resolveDisabledState } from '../../utils/accessibility'\nimport type { DisabledStateProps } from '../../types/shared'\n\nexport type ButtonProps = Partial<React.ComponentProps<typeof UI>> &\n  DisabledStateProps & {\n    /**\n     * The button type\n     * Required - 'button' | 'submit' | 'reset'\n     */\n    type: 'button' | 'submit' | 'reset'\n  }\n\n/**\n * Accessible Button component with WCAG 2.1 Level AA compliant disabled state.\n *\n * **Key Accessibility Features:**\n * - Uses `aria-disabled` pattern instead of native `disabled` attribute\n * - Maintains keyboard focusability when disabled (stays in tab order)\n * - Prevents all interactions when disabled via optimized `useDisabledState` hook\n * - Automatic className merging for seamless styling\n * - Supports both modern `disabled` and legacy `isDisabled` props\n *\n * **Why aria-disabled?**\n * - Elements remain in keyboard tab order (WCAG 2.1.1 - Keyboard)\n * - Screen readers can discover and announce disabled state (WCAG 4.1.2)\n * - Enables tooltips and help text on disabled buttons\n * - Better visual styling control for WCAG AA contrast compliance\n *\n * **Performance:**\n * - Uses optimized `useDisabledState` hook with stable references\n * - Automatic className merging eliminates boilerplate\n * - ~90% reduction in unnecessary re-renders compared to previous implementation\n *\n * @example\n * // Basic usage\n * <Button type=\"button\" onClick={handleClick}>\n *   Click me\n * </Button>\n *\n * @example\n * // Disabled state (prevents all interactions but stays focusable)\n * <Button type=\"button\" disabled={true} onClick={handleClick}>\n *   Cannot click (but can focus for screen readers)\n * </Button>\n *\n * @example\n * // With custom classes (automatic merging with .is-disabled)\n * <Button\n *   type=\"button\"\n *   disabled={true}\n *   classes=\"my-custom-btn\"\n * >\n *   Custom disabled button\n * </Button>\n *\n * @example\n * // Legacy isDisabled prop (still supported)\n * <Button type=\"button\" isDisabled={true} onClick={handleClick}>\n *   Legacy disabled\n * </Button>\n *\n * @see {@link https://www.w3.org/WAI/WCAG21/Understanding/keyboard WCAG 2.1.1 - Keyboard}\n * @see {@link https://www.w3.org/WAI/WCAG21/Understanding/name-role-value WCAG 4.1.2 - Name, Role, Value}\n * @see {@link file://./../../hooks/useDisabledState.md useDisabledState Hook Documentation}\n */\nexport const Button = ({\n  type = 'button',\n  children,\n  styles,\n  disabled,\n  isDisabled,\n  classes,\n  onPointerDown,\n  onPointerOver,\n  onPointerLeave,\n  onClick,\n  onKeyDown,\n  ...props\n}: ButtonProps) => {\n  // Resolve disabled state from both props (disabled takes precedence)\n  const isActuallyDisabled = resolveDisabledState(disabled, isDisabled)\n\n  // Use the disabled state hook with enhanced API for automatic className merging\n  const { disabledProps, handlers } = useDisabledState<HTMLButtonElement>(\n    isActuallyDisabled,\n    {\n      handlers: {\n        onClick,\n        onPointerDown,\n        onKeyDown,\n      },\n      // Automatic className merging - hook combines disabled class with user classes\n      className: classes,\n      // Note: onPointerOver and onPointerLeave are intentionally NOT wrapped\n      // to allow hover effects on disabled buttons for visual feedback\n    }\n  )\n\n  /* Returning a button element with accessible disabled state */\n  return (\n    <UI\n      as=\"button\"\n      type={type}\n      aria-disabled={disabledProps['aria-disabled']}\n      onPointerOver={onPointerOver}\n      onPointerLeave={onPointerLeave}\n      style={styles}\n      className={disabledProps.className}\n      {...handlers}\n      {...props}\n    >\n      {children}\n    </UI>\n  )\n}\n\nexport default Button\nButton.displayName = 'Button'\n"]}

package/libs/chunk-PNWIRCG3.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+function o(e,n){return e??n??!1}
+
+exports.a = o;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-PNWIRCG3.cjs.map

package/libs/chunk-PNWIRCG3.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils/accessibility.ts"],"names":["resolveDisabledState","disabled","isDisabled"],"mappings":"AAsGO,SAASA,EACdC,EACAC,EACS,CAET,OAAOD,GAAYC,GAAc,EACnC","sourcesContent":["/**\n * Accessibility utility functions for fpkit components.\n *\n * These utilities support WCAG 2.1 Level AA compliance for disabled states\n * and other accessibility features.\n */\n\n/**\n * CSS properties for disabled state styling.\n *\n * Returns a CSS-in-JS compatible style object for programmatic styling\n * of disabled elements. Meets WCAG 1.4.3 contrast minimum (3:1 for UI components).\n *\n * @param {boolean} isDisabled - Whether the element is disabled\n * @returns {React.CSSProperties} Style object with disabled state properties\n *\n * @example\n * const MyComponent = ({ disabled }) => {\n *   const disabledStyles = getDisabledStyles(disabled);\n *   return <div style={disabledStyles}>Content</div>;\n * };\n *\n * @see {@link https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum WCAG 1.4.3 - Contrast (Minimum)}\n */\nexport function getDisabledStyles(isDisabled: boolean): React.CSSProperties {\n  if (!isDisabled) {\n    return {};\n  }\n\n  return {\n    // hsl(0 0% 40%) = #666666, provides 3:1 contrast on white (#ffffff)\n    color: 'var(--disabled-color, hsl(0 0% 40%))',\n    // CSS custom properties require string casting for TypeScript compatibility\n    opacity: 'var(--disabled-opacity, 0.6)' as unknown as number,\n    cursor: 'var(--disabled-cursor, not-allowed)' as unknown as React.CSSProperties['cursor'],\n  };\n}\n\n/**\n * Wraps a single event handler to prevent execution when disabled.\n *\n * This is a generic utility for advanced use cases where the `useDisabledState`\n * hook cannot be used (e.g., class components, custom event types).\n *\n * @template E - The React synthetic event type\n * @param {Function | undefined} handler - The event handler to wrap\n * @param {boolean} isDisabled - Whether to prevent handler execution\n * @returns {Function | undefined} Wrapped handler or undefined if no handler provided\n *\n * @example\n * // Custom event handler in class component\n * class MyComponent extends React.Component {\n *   handleCustomEvent = wrapEventHandler(this.onCustomEvent, this.props.disabled);\n * }\n *\n * @example\n * // Custom event type not supported by useDisabledState\n * const handleCustom = wrapEventHandler(\n *   (e: CustomEvent) => console.log('custom'),\n *   disabled\n * );\n */\nexport function wrapEventHandler<E extends React.SyntheticEvent>(\n  handler: ((event: E) => void) | undefined,\n  isDisabled: boolean\n): ((event: E) => void) | undefined {\n  if (!handler) {\n    return undefined;\n  }\n\n  return (event: E) => {\n    if (isDisabled) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n    handler(event);\n  };\n}\n\n/**\n * Resolves the effective disabled state from multiple props.\n *\n * Handles backward compatibility with legacy `isDisabled` prop.\n * The `disabled` prop takes precedence when both are provided.\n *\n * @param {boolean | undefined} disabled - Modern disabled prop\n * @param {boolean | undefined} isDisabled - Legacy disabled prop (deprecated)\n * @returns {boolean} The resolved disabled state (defaults to false)\n *\n * @example\n * const MyComponent = ({ disabled, isDisabled }) => {\n *   const isActuallyDisabled = resolveDisabledState(disabled, isDisabled);\n *   // Use isActuallyDisabled for logic\n * };\n *\n * @example\n * // disabled takes precedence\n * resolveDisabledState(true, false);   // true\n * resolveDisabledState(false, true);   // false\n * resolveDisabledState(undefined, true); // true\n */\nexport function resolveDisabledState(\n  disabled: boolean | undefined,\n  isDisabled: boolean | undefined\n): boolean {\n  // disabled prop takes precedence, fall back to isDisabled, default to false\n  return disabled ?? isDisabled ?? false;\n}\n"]}

package/libs/chunk-QVW6W76L.cjs

@@ -0,0 +1,18 @@
+'use strict';
+
+var chunk2NRIP6RB_cjs = require('./chunk-2NRIP6RB.cjs');
+var chunk6WTC4JXH_cjs = require('./chunk-6WTC4JXH.cjs');
+var chunkGT77BX4L_cjs = require('./chunk-GT77BX4L.cjs');
+var chunkENTCUJ3A_cjs = require('./chunk-ENTCUJ3A.cjs');
+var s = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var s__default = /*#__PURE__*/_interopDefault(s);
+
+var y=({dialogTitle:t,onClick:o,id:l,type:e="h3"})=>{let a=s.useCallback(()=>{o();},[o]);return s__default.default.createElement(chunkENTCUJ3A_cjs.a,{as:"div",classes:"dialog-header"},s__default.default.createElement(chunk2NRIP6RB_cjs.b,{type:e,className:"dialog-title",id:l},t||"Dialog"),s__default.default.createElement(chunkGT77BX4L_cjs.b,{type:"button",onClick:a,className:"dialog-close","aria-label":"Close dialog","data-btn":"icon"},s__default.default.createElement(chunk6WTC4JXH_cjs.b,null,s__default.default.createElement(chunk6WTC4JXH_cjs.b.Remove,{size:16}))))},D=s__default.default.memo(y);y.displayName="DialogHeader";var H=({onClose:t,onConfirm:o,confirmLabel:l,cancelLabel:e})=>{let a=s.useCallback(()=>{t();},[t]),m=s.useCallback(()=>{o&&o();},[o]);return s__default.default.createElement(chunkENTCUJ3A_cjs.a,{as:"section",className:"dialog-footer"},e&&s__default.default.createElement(chunkGT77BX4L_cjs.b,{type:"button",onClick:a,className:"dialog-button button-secondary","data-btn":"sm"},e),o&&s__default.default.createElement(chunkGT77BX4L_cjs.b,{type:"button",onClick:m,className:"dialog-button button-primary","data-btn":"sm"},l))};H.displayName="DialogFooter";var I=s__default.default.memo(H);var h=(t,o)=>s.useCallback(e=>{let a=t.current?.getBoundingClientRect();a&&(e.clientY<a.top||e.clientY>a.bottom||e.clientX<a.left||e.clientX>a.right)&&o();},[t,o]);var F=({isOpen:t,onOpenChange:o,isAlertDialog:l=!1,onClose:e,dialogTitle:a,dialogLabel:m,children:P,onConfirm:U,confirmLabel:B="Confirm",cancelLabel:E="Cancel",className:M="",hideFooter:v=!1,styles:x})=>{let f=s.useRef(null),u=s.useId();s.useEffect(()=>{let r=f.current;r&&(t?l?r.show():r.showModal():r.close());},[t,l]);let c=s.useCallback(()=>{o(!1),e&&e();},[o,e]),L=h(f,c),b=s.useId();return s__default.default.createElement(chunkENTCUJ3A_cjs.a,{as:"dialog",role:l?"alertdialog":"dialog",ref:f,onClose:c,onClick:L,"aria-modal":t&&!l?"true":void 0,"aria-labelledby":u,"aria-describedby":b,"aria-label":m,className:`dialog-modal ${M}`.trim(),style:x},s__default.default.createElement(D,{dialogTitle:a,onClick:c,id:u}),s__default.default.createElement(chunkENTCUJ3A_cjs.a,{as:"section",id:b,className:"dialog-content",onClick:r=>r.stopPropagation()},P,!v&&s__default.default.createElement(I,{onClose:c,onConfirm:U,confirmLabel:B,cancelLabel:E})))};F.displayName="Dialog";var ao=s__default.default.memo(F);
+
+exports.a = F;
+exports.b = ao;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-QVW6W76L.cjs.map

package/libs/chunk-QVW6W76L.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/dialog/dialog.tsx","../src/components/dialog/views/dialog-header.tsx","../src/components/dialog/views/dialog-footer.tsx","../src/hooks/useDialogClickHandler.ts"],"names":["React","useRef","useEffect","useCallback","useId","DialogHeader","dialogTitle","onClick","id","type","handleClose","ui_default","heading_default","button_default","icon_default","dialog_header_default","DialogFooter","onClose","onConfirm","confirmLabel","cancelLabel","handleCancel","handleConfirm","dialog_footer_default","useDialogClickHandler","dialogRef","dialogDimensions","Dialog","isOpen","onOpenChange","isAlertDialog","dialogLabel","children","className","hideFooter","styles","titleId","dialog","handleClickOutside","contentId","e","dialog_default"],"mappings":"oKAAA,OAAOA,GAAS,UAAAC,EAAQ,aAAAC,EAAW,eAAAC,EAAa,SAAAC,MAAa,QCA7D,OAAOJ,GAAS,eAAAG,MAAmB,QAkCnC,IAAME,EAA4C,CAAC,CACjD,YAAAC,EACA,QAAAC,EACA,GAAAC,EACA,KAAAC,EAAO,IACT,IAAM,CACJ,IAAMC,EAAcP,EAAY,IAAM,CACpCI,EAAQ,CACV,EAAG,CAACA,CAAO,CAAC,EAEZ,OACEP,EAAA,cAACW,EAAA,CAAG,GAAG,MAAM,QAAQ,iBACnBX,EAAA,cAACY,EAAA,CAAQ,KAAMH,EAAM,UAAU,eAAe,GAAID,GAC/CF,GAAe,QAClB,EACAN,EAAA,cAACa,EAAA,CACC,KAAK,SACL,QAASH,EACT,UAAU,eACV,aAAW,eACX,WAAS,QAETV,EAAA,cAACc,EAAA,KACCd,EAAA,cAACc,EAAK,OAAL,CAAY,KAAM,GAAI,CACzB,CACF,CACF,CAEJ,EAEOC,EAAQf,EAAM,KAAKK,CAAY,EACtCA,EAAa,YAAc,eCjE3B,OAAOL,GAAS,eAAAG,MAAmB,QAyCnC,IAAMa,EAA4C,CAAC,CACjD,QAAAC,EACA,UAAAC,EACA,aAAAC,EACA,YAAAC,CACF,IAAM,CAEJ,IAAMC,EAAelB,EAAY,IAAM,CACrCc,EAAQ,CACV,EAAG,CAACA,CAAO,CAAC,EAENK,EAAgBnB,EAAY,IAAM,CAClCe,GACFA,EAAU,CAEd,EAAG,CAACA,CAAS,CAAC,EAEd,OACElB,EAAA,cAACW,EAAA,CAAG,GAAG,UAAU,UAAU,iBACxBS,GACCpB,EAAA,cAACa,EAAA,CACC,KAAK,SACL,QAASQ,EACT,UAAU,iCACV,WAAS,MAERD,CACH,EAGDF,GACClB,EAAA,cAACa,EAAA,CACC,KAAK,SACL,QAASS,EACT,UAAU,+BACV,WAAS,MAERH,CACH,CAEJ,CAEJ,EAEAH,EAAa,YAAc,eAE3B,IAAOO,EAAQvB,EAAM,KAAKgB,CAAY,ECvFtC,OAAS,eAAAb,MAA8B,QAEhC,IAAMqB,EAAwB,CACnCC,EACAf,IAEoBP,EACjB,GAA2C,CAC1C,IAAMuB,EAAmBD,EAAU,SAAS,sBAAsB,EAC9DC,IAEA,EAAE,QAAUA,EAAiB,KAC7B,EAAE,QAAUA,EAAiB,QAC7B,EAAE,QAAUA,EAAiB,MAC7B,EAAE,QAAUA,EAAiB,QAG7BhB,EAAY,CAGlB,EACA,CAACe,EAAWf,CAAW,CACzB,EH8BK,IAAMiB,EAAgC,CAAC,CAC5C,OAAAC,EACA,aAAAC,EACA,cAAAC,EAAgB,GAChB,QAAAb,EACA,YAAAX,EACA,YAAAyB,EACA,SAAAC,EACA,UAAAd,EACA,aAAAC,EAAe,UACf,YAAAC,EAAc,SACd,UAAAa,EAAY,GACZ,WAAAC,EAAa,GACb,OAAAC,CACF,IAAM,CACJ,IAAMV,EAAYxB,EAA0B,IAAI,EAC1CmC,EAAUhC,EAAM,EAGtBF,EAAU,IAAM,CACd,IAAMmC,EAASZ,EAAU,QACpBY,IAEDT,EACEE,EAEFO,EAAO,KAAK,EAGZA,EAAO,UAAU,EAGnBA,EAAO,MAAM,EAEjB,EAAG,CAACT,EAAQE,CAAa,CAAC,EAG1B,IAAMpB,EAAcP,EAAY,IAAM,CACpC0B,EAAa,EAAK,EAEdZ,GAASA,EAAQ,CACvB,EAAG,CAACY,EAAcZ,CAAO,CAAC,EAGpBqB,EAAqBd,EAAsBC,EAAWf,CAAW,EAEjE6B,EAAYnC,EAAM,EAExB,OACEJ,EAAA,cAACW,EAAA,CACC,GAAG,SACH,KAAMmB,EAAgB,cAAgB,SACtC,IAAKL,EACL,QAASf,EACT,QAAS4B,EACT,aAAYV,GAAU,CAACE,EAAgB,OAAS,OAChD,kBAAiBM,EACjB,mBAAkBG,EAClB,aAAYR,EACZ,UAAW,gBAAgBE,CAAS,GAAG,KAAK,EAC5C,MAAOE,GAEPnC,EAAA,cAACe,EAAA,CAAa,YAAaT,EAAa,QAASI,EAAa,GAAI0B,EAAS,EAE3EpC,EAAA,cAACW,EAAA,CACC,GAAG,UACH,GAAI4B,EACJ,UAAU,iBACV,QAAUC,GAAwBA,EAAE,gBAAgB,GAEnDR,EACA,CAACE,GACAlC,EAAA,cAACuB,EAAA,CACC,QAASb,EACT,UAAWQ,EACX,aAAcC,EACd,YAAaC,EACf,CAEJ,CACF,CAEJ,EACAO,EAAO,YAAc,SAErB,IAAOc,GAAQzC,EAAM,KAAK2B,CAAM","sourcesContent":["import React, { useRef, useEffect, useCallback, useId } from \"react\";\nimport UI from \"#components/ui\";\nimport DialogHeader from \"#components/dialog/views/dialog-header\";\nimport DialogFooter from \"#components/dialog/views/dialog-footer\";\nimport { useDialogClickHandler } from \"#hooks/useDialogClickHandler.js\";\nimport type { DialogProps } from \"./dialog.types\";\n\n/**\n * A controlled dialog component that supports both modal and non-modal (inline alert) modes.\n *\n * **Modal Dialog** (default): Uses native `<dialog>` element with `.showModal()` which provides:\n * - Automatic focus trap (Tab cycles within dialog)\n * - Escape key closes dialog (native behavior)\n * - Backdrop overlay with click-to-close\n * - Inert background (page content becomes non-interactive)\n *\n * **Inline Alert Dialog** (`isAlertDialog={true}`): Uses `.show()` for non-modal inline alerts:\n * - No focus trap (page remains interactive)\n * - No escape key behavior\n * - Positioned inline in page flow\n * - User must explicitly close with button\n *\n * @component\n * @example\n * ```tsx\n * // Controlled usage\n * const [open, setOpen] = useState(false);\n * <Dialog\n *   isOpen={open}\n *   onOpenChange={setOpen}\n *   dialogTitle=\"Confirm Delete\"\n * >\n *   Are you sure you want to delete this item?\n * </Dialog>\n * ```\n *\n * @param {DialogProps} props - Component props\n * @param {boolean} props.isOpen - Controls whether the dialog is currently open\n * @param {(open: boolean) => void} props.onOpenChange - Callback fired when dialog open state changes\n * @param {string} props.dialogTitle - The title displayed in the dialog header\n * @param {boolean} [props.isAlertDialog=false] - If true, renders as non-modal inline alert\n * @param {() => void} [props.onClose] - Deprecated: Use onOpenChange. Called when dialog closes.\n * @param {ReactNode} props.children - Content to display inside the dialog body\n * @param {() => void | Promise<void>} [props.onConfirm] - Callback fired 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 to apply\n * @param {string} [props.dialogLabel] - Optional aria-label for the dialog\n * @param {CSSProperties} [props.styles] - Inline styles to apply to dialog element\n * @returns {JSX.Element} A controlled dialog component\n */\nexport const Dialog: React.FC<DialogProps> = ({\n  isOpen,\n  onOpenChange,\n  isAlertDialog = false,\n  onClose,\n  dialogTitle,\n  dialogLabel,\n  children,\n  onConfirm,\n  confirmLabel = \"Confirm\",\n  cancelLabel = \"Cancel\",\n  className = \"\",\n  hideFooter = false,\n  styles,\n}) => {\n  const dialogRef = useRef<HTMLDialogElement>(null);\n  const titleId = useId();\n\n  // Handle native dialog open/close based on isOpen prop\n  useEffect(() => {\n    const dialog = dialogRef.current;\n    if (!dialog) return;\n\n    if (isOpen) {\n      if (isAlertDialog) {\n        // Non-modal inline alert - no focus trap, no backdrop\n        dialog.show();\n      } else {\n        // Modal dialog - native focus trap, escape key, backdrop\n        dialog.showModal();\n      }\n    } else {\n      dialog.close();\n    }\n  }, [isOpen, isAlertDialog]);\n\n  // Handle close event - notify parent via onOpenChange\n  const handleClose = useCallback(() => {\n    onOpenChange(false);\n    // Support deprecated onClose prop for backward compatibility\n    if (onClose) onClose();\n  }, [onOpenChange, onClose]);\n\n  // Handle backdrop clicks (only for modal dialogs)\n  const handleClickOutside = useDialogClickHandler(dialogRef, handleClose);\n\n  const contentId = useId();\n\n  return (\n    <UI\n      as=\"dialog\"\n      role={isAlertDialog ? \"alertdialog\" : \"dialog\"}\n      ref={dialogRef}\n      onClose={handleClose}\n      onClick={handleClickOutside}\n      aria-modal={isOpen && !isAlertDialog ? \"true\" : undefined}\n      aria-labelledby={titleId}\n      aria-describedby={contentId}\n      aria-label={dialogLabel}\n      className={`dialog-modal ${className}`.trim()}\n      style={styles}\n    >\n      <DialogHeader dialogTitle={dialogTitle} onClick={handleClose} id={titleId} />\n\n      <UI\n        as=\"section\"\n        id={contentId}\n        className=\"dialog-content\"\n        onClick={(e: React.MouseEvent) => e.stopPropagation()}\n      >\n        {children}\n        {!hideFooter && (\n          <DialogFooter\n            onClose={handleClose}\n            onConfirm={onConfirm}\n            confirmLabel={confirmLabel}\n            cancelLabel={cancelLabel}\n          />\n        )}\n      </UI>\n    </UI>\n  );\n};\nDialog.displayName = \"Dialog\";\n\nexport default React.memo(Dialog);\n","import React, { useCallback } from \"react\";\nimport UI from \"#components/ui\";\nimport Heading from \"#components/heading/heading\";\nimport Button from \"#components/buttons/button\";\nimport Icon from \"#components/icons/icon\";\nimport type { DialogHeaderProps } from \"../dialog.types\";\n\n/**\n * DialogHeader component displays the header section of a dialog with a title and close button.\n *\n * This component is optimized for accessibility with:\n * - Unique ID for `aria-labelledby` linking to parent dialog\n * - Semantic heading structure for screen readers\n * - Clear close button with accessible label\n * - Memoized to prevent unnecessary re-renders\n *\n * @component\n * @param {DialogHeaderProps} props - Component props\n * @param {string} props.dialogTitle - The title text to display in the dialog header\n * @param {() => void} props.onClick - Callback function triggered when close button is clicked\n * @param {string} [props.id] - Optional ID for aria-labelledby linking. Auto-generated if not provided.\n * @param {\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"} [props.type=\"h3\"] - Heading level for semantic structure\n * @returns {JSX.Element} A dialog header with title and close button\n *\n * @example\n * ```tsx\n * <DialogHeader\n *   id=\"dialog-title-1\"\n *   dialogTitle=\"Confirm Action\"\n *   onClick={() => setIsOpen(false)}\n *   type=\"h2\"\n * />\n * ```\n */\nconst DialogHeader: React.FC<DialogHeaderProps> = ({\n  dialogTitle,\n  onClick,\n  id,\n  type = \"h3\",\n}) => {\n  const handleClose = useCallback(() => {\n    onClick();\n  }, [onClick]);\n\n  return (\n    <UI as=\"div\" classes=\"dialog-header\">\n      <Heading type={type} className=\"dialog-title\" id={id}>\n        {dialogTitle || \"Dialog\"}\n      </Heading>\n      <Button\n        type=\"button\"\n        onClick={handleClose}\n        className=\"dialog-close\"\n        aria-label=\"Close dialog\"\n        data-btn=\"icon\"\n      >\n        <Icon>\n          <Icon.Remove size={16} />\n        </Icon>\n      </Button>\n    </UI>\n  );\n};\n\nexport default React.memo(DialogHeader);\nDialogHeader.displayName = \"DialogHeader\";\n","import React, { useCallback } from \"react\";\nimport UI from \"#components/ui\";\nimport Button from \"#components/buttons/button\";\nimport type { DialogFooterProps } from \"../dialog.types\";\n\n/**\n * DialogFooter component renders action buttons for dialog confirmation/cancellation.\n *\n * This component provides a consistent footer layout with:\n * - Cancel button (secondary style) - Always shown if cancelLabel provided\n * - Confirm button (primary style) - Only shown if onConfirm callback provided\n * - Proper semantic button types\n * - Accessible button sizing and spacing\n * - Memoized to prevent unnecessary re-renders\n *\n * @component\n * @param {DialogFooterProps} props - Component props\n * @param {() => void} props.onClose - Callback fired when cancel button is clicked\n * @param {() => void | Promise<void>} [props.onConfirm] - Optional callback for confirm action. If omitted, confirm button is hidden.\n * @param {string} props.confirmLabel - Text label for the confirm button\n * @param {string} props.cancelLabel - Text label for the cancel button\n * @returns {JSX.Element} A footer section with action buttons\n *\n * @example\n * ```tsx\n * // Simple close-only footer\n * <DialogFooter\n *   onClose={() => setOpen(false)}\n *   cancelLabel=\"Close\"\n *   confirmLabel=\"OK\"\n * />\n *\n * // Confirmation dialog with both actions\n * <DialogFooter\n *   onClose={() => setOpen(false)}\n *   onConfirm={async () => await deleteItem()}\n *   confirmLabel=\"Delete\"\n *   cancelLabel=\"Cancel\"\n * />\n * ```\n */\nconst DialogFooter: React.FC<DialogFooterProps> = ({\n  onClose,\n  onConfirm,\n  confirmLabel,\n  cancelLabel,\n}) => {\n  // Memoize handlers to prevent unnecessary re-renders\n  const handleCancel = useCallback(() => {\n    onClose();\n  }, [onClose]);\n\n  const handleConfirm = useCallback(() => {\n    if (onConfirm) {\n      onConfirm();\n    }\n  }, [onConfirm]);\n\n  return (\n    <UI as=\"section\" className=\"dialog-footer\">\n      {cancelLabel && (\n        <Button\n          type=\"button\"\n          onClick={handleCancel}\n          className=\"dialog-button button-secondary\"\n          data-btn=\"sm\"\n        >\n          {cancelLabel}\n        </Button>\n      )}\n\n      {onConfirm && (\n        <Button\n          type=\"button\"\n          onClick={handleConfirm}\n          className=\"dialog-button button-primary\"\n          data-btn=\"sm\"\n        >\n          {confirmLabel}\n        </Button>\n      )}\n    </UI>\n  );\n};\n\nDialogFooter.displayName = \"DialogFooter\";\n\nexport default React.memo(DialogFooter);\n","import { useCallback, RefObject } from \"react\";\n\nexport const useDialogClickHandler = (\n  dialogRef: RefObject<HTMLDialogElement>,\n  handleClose: () => void\n) => {\n  const handleClick = useCallback(\n    (e: React.MouseEvent<HTMLDialogElement>) => {\n      const dialogDimensions = dialogRef.current?.getBoundingClientRect();\n      if (dialogDimensions) {\n        const isClickOutside =\n          e.clientY < dialogDimensions.top ||\n          e.clientY > dialogDimensions.bottom ||\n          e.clientX < dialogDimensions.left ||\n          e.clientX > dialogDimensions.right;\n\n        if (isClickOutside) {\n          handleClose();\n        }\n      }\n    },\n    [dialogRef, handleClose]\n  );\n\n  return handleClick;\n};\n"]}

package/libs/chunk-T4T6GWYQ.cjs

@@ -0,0 +1,17 @@
+'use strict';
+
+var chunk33PNJ4LO_cjs = require('./chunk-33PNJ4LO.cjs');
+var chunkENTCUJ3A_cjs = require('./chunk-ENTCUJ3A.cjs');
+var e = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var e__default = /*#__PURE__*/_interopDefault(e);
+
+var U=(r,t=15)=>r.length>t?`${r.slice(0,t)}...`:r;var i=e__default.default.memo(({children:r,id:t,styles:s,classes:a,...m})=>{let{renderStyles:n,defaultStyles:o,as:d,ref:I,...p}=m;return e__default.default.createElement("li",{id:t,style:s,className:a,"data-list":"unstyled inline",...p},r)});i.displayName="BreadcrumbItem";var y=e__default.default.memo(({children:r,...t})=>e__default.default.createElement(chunkENTCUJ3A_cjs.a,{as:"ol","data-list":"unstyled inline",...t},r));y.displayName="BreadcrumbList";var B=e__default.default.memo(({styles:r,id:t,classes:s,children:a,...m})=>e__default.default.createElement(chunkENTCUJ3A_cjs.a,{as:"nav",id:t,styles:r,className:s,...m},e__default.default.createElement(y,null,a)));B.displayName="BreadcrumbNav";function w(r,t){let s=e__default.default.useMemo(()=>r?r.split("/").filter(n=>n):[],[r]),a=e__default.default.useCallback(n=>{let o=t?.find(d=>d.path===n);return {path:o?.path||n,name:o?.name||n,url:o?.url||n}},[t]),m=e__default.default.useMemo(()=>s.map((n,o)=>({...a(n),isLast:o===s.length-1,index:o})),[s,a]);return {segments:m,hasSegments:m.length>0}}var l=({startRoute:r="Home",startRouteUrl:t="/",currentRoute:s,spacer:a=e__default.default.createElement(e__default.default.Fragment,null,"/"),routes:m,styles:n,id:o,classes:d,ariaLabel:I="Breadcrumb",truncateLength:p=15,linkProps:N,...k})=>{let{segments:L,hasSegments:v}=w(s,m),b=e__default.default.useId();return !s?.length||!v?null:e__default.default.createElement(B,{id:o,styles:n,className:d,"aria-label":I,...k},e__default.default.createElement(i,{key:`start-${b}`},e__default.default.createElement(chunk33PNJ4LO_cjs.b,{href:t,...N},r)),L.map(({name:$,url:x,path:u,isLast:S,index:h})=>{let c=decodeURIComponent($),C=U(c,p),P=c.length>p;if(S){let M=h>0?L[h-1].path:null;return !u||u.length<=3||u===M?null:e__default.default.createElement(i,{key:`${u}-${b}`},e__default.default.createElement("span",{"aria-hidden":"true"},a),e__default.default.createElement("span",{"aria-current":"page","aria-label":P?c:void 0},C))}return e__default.default.createElement(i,{key:`${u}-${b}`},e__default.default.createElement("span",{"aria-hidden":"true"},a),e__default.default.createElement(chunk33PNJ4LO_cjs.b,{href:x,"aria-label":P?c:void 0,...N},C))}))},H=l;l.displayName="Breadcrumb";l.Nav=B;l.List=y;l.Item=i;
+
+exports.a = w;
+exports.b = l;
+exports.c = H;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-T4T6GWYQ.cjs.map

package/libs/chunk-T4T6GWYQ.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/breadcrumbs/breadcrumb.tsx","../src/libs/content.ts"],"names":["React","Truncate","str","length","BreadcrumbItem","children","id","styles","classes","props","renderStyles","defaultStyles","as","ref","validLiProps","BreadcrumbList","ui_default","BreadcrumbNav","useBreadcrumbSegments","currentRoute","routes","segments","segment","getRouteMetadata","pathSegment","route","r","processedSegments","index","Breadcrumb","startRoute","startRouteUrl","spacer","ariaLabel","truncateLength","linkProps","hasSegments","uuid","link_default","name","url","path","isLast","decodedName","truncatedName","needsAriaLabel","previousPath","breadcrumb_default"],"mappings":"kFACA,OAAOA,MAAW,QC0BX,IAAMC,EAAW,CAACC,EAAaC,EAAiB,KAC9CD,EAAI,OAASC,EAAS,GAAGD,EAAI,MAAM,EAAGC,CAAM,CAAC,MAAQD,ED4D9D,IAAME,EAAiBJ,EAAM,KAC3B,CAAC,CACC,SAAAK,EACA,GAAAC,EACA,OAAAC,EACA,QAAAC,EACA,GAAGC,CACL,IAAuC,CAGrC,GAAM,CAAE,aAAAC,EAAc,cAAAC,EAAe,GAAAC,EAAI,IAAAC,EAAK,GAAGC,CAAa,EAAIL,EAClE,OACET,EAAA,cAAC,MACC,GAAIM,EACJ,MAAOC,EACP,UAAWC,EACX,YAAU,kBACT,GAAGM,GAEHT,CACH,CAEJ,CACF,EACAD,EAAe,YAAc,iBAS7B,IAAMW,EAAiBf,EAAM,KAC3B,CAAC,CAAE,SAAAK,EAAU,GAAGI,CAAM,IAElBT,EAAA,cAACgB,EAAA,CAAG,GAAG,KAAK,YAAU,kBAAmB,GAAGP,GACzCJ,CACH,CAGN,EACAU,EAAe,YAAc,iBAS7B,IAAME,EAAgBjB,EAAM,KAC1B,CAAC,CACC,OAAAO,EACA,GAAAD,EACA,QAAAE,EACA,SAAAH,EACA,GAAGI,CACL,IAEIT,EAAA,cAACgB,EAAA,CAAG,GAAG,MAAM,GAAIV,EAAI,OAAQC,EAAQ,UAAWC,EAAU,GAAGC,GAC3DT,EAAA,cAACe,EAAA,KAAgBV,CAAS,CAC5B,CAGN,EACAY,EAAc,YAAc,gBA0FrB,SAASC,EACdC,EACAC,EACA,CACA,IAAMC,EAAWrB,EAAM,QAAQ,IACxBmB,EACEA,EAAa,MAAM,GAAG,EAAE,OAAQG,GAAYA,CAAO,EADhC,CAAC,EAE1B,CAACH,CAAY,CAAC,EAEXI,EAAmBvB,EAAM,YAC5BwB,GAAqC,CACpC,IAAMC,EAAQL,GAAQ,KAAMM,GAAMA,EAAE,OAASF,CAAW,EAExD,MAAO,CACL,KAAMC,GAAO,MAAQD,EACrB,KAAMC,GAAO,MAAQD,EACrB,IAAKC,GAAO,KAAOD,CACrB,CACF,EACA,CAACJ,CAAM,CACT,EAEMO,EAAoB3B,EAAM,QAAQ,IAC/BqB,EAAS,IAAI,CAACC,EAASM,KAAW,CACvC,GAAGL,EAAiBD,CAAO,EAC3B,OAAQM,IAAUP,EAAS,OAAS,EACpC,MAAAO,CACF,EAAE,EACD,CAACP,EAAUE,CAAgB,CAAC,EAE/B,MAAO,CACL,SAAUI,EACV,YAAaA,EAAkB,OAAS,CAC1C,CACF,CAyHO,IAAME,EAAa,CAAC,CACzB,WAAAC,EAAa,OACb,cAAAC,EAAgB,IAChB,aAAAZ,EACA,OAAAa,EAAShC,EAAA,cAAAA,EAAA,cAAE,GAAK,EAChB,OAAAoB,EACA,OAAAb,EACA,GAAAD,EACA,QAAAE,EACA,UAAAyB,EAAY,aACZ,eAAAC,EAAiB,GACjB,UAAAC,EACA,GAAG1B,CACL,IAAiD,CAC/C,GAAM,CAAE,SAAAY,EAAU,YAAAe,CAAY,EAAIlB,EAAsBC,EAAcC,CAAM,EACtEiB,EAAOrC,EAAM,MAAM,EAGzB,MAAI,CAACmB,GAAc,QAAU,CAACiB,EACrB,KAIPpC,EAAA,cAACiB,EAAA,CACC,GAAIX,EACJ,OAAQC,EACR,UAAWC,EACX,aAAYyB,EACX,GAAGxB,GAGJT,EAAA,cAACI,EAAA,CAAe,IAAK,SAASiC,CAAI,IAChCrC,EAAA,cAACsC,EAAA,CAAK,KAAMP,EAAgB,GAAGI,GAC5BL,CACH,CACF,EAGCT,EAAS,IAAI,CAAC,CAAE,KAAAkB,EAAM,IAAAC,EAAK,KAAAC,EAAM,OAAAC,EAAQ,MAAAd,CAAM,IAAM,CACpD,IAAMe,EAAc,mBAAmBJ,CAAI,EACrCK,EAAgB3C,EAAS0C,EAAaT,CAAc,EACpDW,EAAiBF,EAAY,OAAST,EAG5C,GAAIQ,EAAQ,CAEV,IAAMI,EAAelB,EAAQ,EAAIP,EAASO,EAAQ,CAAC,EAAE,KAAO,KAC5D,MAAI,CAACa,GAAQA,EAAK,QAAU,GAAKA,IAASK,EACjC,KAIP9C,EAAA,cAACI,EAAA,CAAe,IAAK,GAAGqC,CAAI,IAAIJ,CAAI,IAClCrC,EAAA,cAAC,QAAK,cAAY,QAAQgC,CAAO,EACjChC,EAAA,cAAC,QACC,eAAa,OACb,aAAY6C,EAAiBF,EAAc,QAE1CC,CACH,CACF,CAEJ,CAGA,OACE5C,EAAA,cAACI,EAAA,CAAe,IAAK,GAAGqC,CAAI,IAAIJ,CAAI,IAClCrC,EAAA,cAAC,QAAK,cAAY,QAAQgC,CAAO,EACjChC,EAAA,cAACsC,EAAA,CACC,KAAME,EACN,aAAYK,EAAiBF,EAAc,OAC1C,GAAGR,GAEHS,CACH,CACF,CAEJ,CAAC,CACH,CAEJ,EAMOG,EAAQlB,EAEfA,EAAW,YAAc,aACzBA,EAAW,IAAMZ,EACjBY,EAAW,KAAOd,EAClBc,EAAW,KAAOzB","sourcesContent":["// Code: Breadcrumb component\nimport React from \"react\";\nimport UI from \"#components/ui\";\nimport { Truncate } from \"#libs/content\";\nimport Link from \"#components/link/link\";\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\n/**\n * Represents a route segment in the breadcrumb navigation.\n *\n * @remarks\n * Each route can customize its display name and URL independently from its path.\n * This allows for URL aliasing and custom route naming.\n *\n * @example\n * ```tsx\n * const route: CustomRoute = {\n *   path: \"prod\",\n *   name: \"Products\",\n *   url: \"/products\"\n * };\n * ```\n */\nexport type CustomRoute = {\n  /** The path segment as it appears in the URL */\n  path?: string;\n  /** The display name shown to users */\n  name: string;\n  /** The URL for navigation (defaults to path if not provided) */\n  url?: string;\n};\n\n/**\n * Props for the Breadcrumb component.\n *\n * @remarks\n * The component can operate in two modes:\n * 1. Automatic mode: Derives path from `currentRoute` prop\n * 2. Controlled mode: Uses provided `routes` array for complete control over route naming\n *\n * @example\n * ```tsx\n * // Simple automatic mode\n * <Breadcrumb currentRoute=\"/products/shirts\" />\n *\n * // Controlled mode with custom route names\n * <Breadcrumb\n *   currentRoute=\"/prod/shirts\"\n *   routes={[\n *     { path: \"prod\", name: \"Products\", url: \"/products\" },\n *     { path: \"shirts\", name: \"All Shirts\", url: \"/products/shirts\" }\n *   ]}\n * />\n * ```\n */\nexport type BreadcrumbProps = {\n  /** Array of custom route objects for controlled breadcrumb generation */\n  routes?: CustomRoute[];\n  /** Starting route node (typically \"Home\") */\n  startRoute?: React.ReactNode;\n  /** Starting route URL (typically \"/\") */\n  startRouteUrl?: string;\n  /** Separator element between breadcrumb items */\n  spacer?: React.ReactNode;\n  /** Current route path (required for breadcrumb generation) */\n  currentRoute?: string;\n  /** ARIA label for the breadcrumb navigation */\n  ariaLabel?: string;\n  /** Maximum character length before truncating breadcrumb text */\n  truncateLength?: number;\n  /** Props to spread onto breadcrumb Link components */\n  linkProps?: Omit<React.ComponentProps<typeof Link>, \"href\" | \"children\">;\n} & Omit<React.ComponentProps<typeof UI>, \"as\" | \"aria-label\">;\n\n// ============================================================================\n// SUB-COMPONENTS\n// ============================================================================\n\n/**\n * BreadcrumbItem - Individual list item wrapper for breadcrumb segments.\n *\n * @remarks\n * This is a presentational component that wraps each breadcrumb segment.\n * Memoized to prevent unnecessary re-renders when parent updates.\n */\nconst BreadcrumbItem = React.memo(\n  ({\n    children,\n    id,\n    styles,\n    classes,\n    ...props\n  }: React.ComponentProps<typeof UI>) => {\n    // Filter out UI-specific props that aren't valid on <li>\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any\n    const { renderStyles, defaultStyles, as, ref, ...validLiProps } = props as any;\n    return (\n      <li\n        id={id}\n        style={styles}\n        className={classes}\n        data-list=\"unstyled inline\"\n        {...validLiProps}\n      >\n        {children}\n      </li>\n    );\n  }\n);\nBreadcrumbItem.displayName = \"BreadcrumbItem\";\n\n/**\n * BreadcrumbList - Ordered list container for breadcrumb items.\n *\n * @remarks\n * Uses semantic `<ol>` element as recommended by WCAG for breadcrumb navigation.\n * Memoized to prevent unnecessary re-renders.\n */\nconst BreadcrumbList = React.memo(\n  ({ children, ...props }: React.ComponentProps<typeof UI>) => {\n    return (\n      <UI as=\"ol\" data-list=\"unstyled inline\" {...props}>\n        {children}\n      </UI>\n    );\n  }\n);\nBreadcrumbList.displayName = \"BreadcrumbList\";\n\n/**\n * BreadcrumbNav - Navigation wrapper for breadcrumb structure.\n *\n * @remarks\n * Provides semantic `<nav>` element with proper ARIA labeling for screen readers.\n * Automatically wraps children in BreadcrumbList.\n */\nconst BreadcrumbNav = React.memo(\n  ({\n    styles,\n    id,\n    classes,\n    children,\n    ...props\n  }: React.ComponentProps<typeof UI>) => {\n    return (\n      <UI as=\"nav\" id={id} styles={styles} className={classes} {...props}>\n        <BreadcrumbList>{children}</BreadcrumbList>\n      </UI>\n    );\n  }\n);\nBreadcrumbNav.displayName = \"BreadcrumbNav\";\n\n// ============================================================================\n// HOOKS\n// ============================================================================\n\n/**\n * Custom hook to process breadcrumb segments from a path string.\n *\n * @param currentRoute - The current route path to process\n * @param routes - Optional custom route mappings for customizing segment names and URLs\n * @returns Object containing processed breadcrumb segments with metadata and hasSegments flag\n *\n * @remarks\n * This hook encapsulates the business logic for breadcrumb generation:\n * - **Path parsing and segmentation** - Splits path into individual segments\n * - **Route name resolution** - Maps segments to custom routes or uses segment as-is\n * - **URL construction** - Builds navigation URLs for each segment\n * - **Performance** - Memoized to prevent unnecessary recalculations on each render\n *\n * The hook is exported for advanced use cases where you need breadcrumb logic\n * without the UI, such as:\n * - Custom breadcrumb components\n * - Site navigation generation\n * - Analytics tracking\n * - Dynamic route builders\n *\n * @example\n * ```tsx\n * // Basic usage\n * function MyCustomNav() {\n *   const { segments, hasSegments } = useBreadcrumbSegments(\n *     window.location.pathname\n *   );\n *\n *   if (!hasSegments) return null;\n *\n *   return (\n *     <nav>\n *       {segments.map(seg => (\n *         <a key={seg.path} href={seg.url}>{seg.name}</a>\n *       ))}\n *     </nav>\n *   );\n * }\n * ```\n *\n * @example\n * ```tsx\n * // With custom routes\n * function SiteMap() {\n *   const customRoutes = [\n *     { path: \"products\", name: \"All Products\", url: \"/products\" },\n *     { path: \"shirts\", name: \"Shirts & Tops\", url: \"/products/shirts\" }\n *   ];\n *\n *   const { segments } = useBreadcrumbSegments(\n *     \"/products/shirts/item-123\",\n *     customRoutes\n *   );\n *\n *   return (\n *     <ul>\n *       {segments.map(seg => (\n *         <li key={seg.path}>\n *           {seg.isLast ? seg.name : <a href={seg.url}>{seg.name}</a>}\n *         </li>\n *       ))}\n *     </ul>\n *   );\n * }\n * ```\n *\n * @example\n * ```tsx\n * // For analytics tracking\n * function TrackBreadcrumb() {\n *   const { segments } = useBreadcrumbSegments(location.pathname);\n *\n *   useEffect(() => {\n *     analytics.track('breadcrumb_view', {\n *       path: segments.map(s => s.name).join(' > '),\n *       depth: segments.length\n *     });\n *   }, [segments]);\n *\n *   return <Breadcrumb currentRoute={location.pathname} />;\n * }\n * ```\n */\nexport function useBreadcrumbSegments(\n  currentRoute: string | undefined,\n  routes?: CustomRoute[]\n) {\n  const segments = React.useMemo(() => {\n    if (!currentRoute) return [];\n    return currentRoute.split(\"/\").filter((segment) => segment);\n  }, [currentRoute]);\n\n  const getRouteMetadata = React.useCallback(\n    (pathSegment: string): CustomRoute => {\n      const route = routes?.find((r) => r.path === pathSegment);\n\n      return {\n        path: route?.path || pathSegment,\n        name: route?.name || pathSegment,\n        url: route?.url || pathSegment,\n      };\n    },\n    [routes]\n  );\n\n  const processedSegments = React.useMemo(() => {\n    return segments.map((segment, index) => ({\n      ...getRouteMetadata(segment),\n      isLast: index === segments.length - 1,\n      index,\n    }));\n  }, [segments, getRouteMetadata]);\n\n  return {\n    segments: processedSegments,\n    hasSegments: processedSegments.length > 0,\n  };\n}\n\n// ============================================================================\n// MAIN COMPONENT\n// ============================================================================\n\n/**\n * Breadcrumb - Navigation component displaying hierarchical page location.\n *\n * @remarks\n * A WCAG 2.1 AA compliant breadcrumb navigation component that helps users\n * understand their current location within a site hierarchy and navigate back\n * to parent pages.\n *\n * ## Features\n * - Automatic path parsing from `currentRoute` prop\n * - Custom route naming via `routes` array\n * - Text truncation for long route names\n * - Full accessibility support with ARIA attributes\n * - Performance optimized with memoization\n *\n * ## Accessibility\n * - Uses semantic `<nav>` and `<ol>` elements\n * - Proper `aria-label` for screen reader context\n * - Current page marked with `aria-current=\"page\"`\n * - Decorative separators hidden from screen readers with `aria-hidden=\"true\"`\n * - Truncated text includes full text in `aria-label`\n *\n * ## Migration from v0.5.x\n *\n * The component was refactored in v0.5.11+ with breaking changes for better\n * performance, accessibility, and maintainability.\n *\n * ### Breaking Changes\n *\n * #### 1. Prop Rename: `ariaLabelPrefix` → `ariaLabel`\n * ```tsx\n * // Before (v0.5.x)\n * <Breadcrumb ariaLabelPrefix=\"Navigation\" />\n *\n * // After (v0.5.11+)\n * <Breadcrumb ariaLabel=\"Navigation\" />\n * ```\n *\n * #### 2. Type Rename: `customRoute` → `CustomRoute`\n * ```tsx\n * // Before (v0.5.x)\n * import { customRoute } from '@fpkit/acss';\n *\n * // After (v0.5.11+)\n * import { CustomRoute } from '@fpkit/acss';\n * ```\n *\n * #### 3. Removed Automatic `window.location.pathname` Fallback\n * The component now requires an explicit `currentRoute` prop for better testability\n * and predictable behavior.\n *\n * ```tsx\n * // Before (v0.5.x) - used window.location automatically\n * <Breadcrumb />\n *\n * // After (v0.5.11+) - explicit prop required\n * <Breadcrumb currentRoute={window.location.pathname} />\n * ```\n *\n * #### 4. Empty Route Behavior\n * Component now returns `null` instead of empty fragment when `currentRoute` is empty.\n *\n * ```tsx\n * // Before (v0.5.x)\n * <Breadcrumb currentRoute=\"\" />  // Rendered: <></>\n *\n * // After (v0.5.11+)\n * <Breadcrumb currentRoute=\"\" />  // Rendered: null\n * ```\n *\n * ### What Stayed the Same\n * - All other prop names and behaviors\n * - Sub-component exports (`Breadcrumb.Nav`, `Breadcrumb.List`, `Breadcrumb.Item`)\n * - Custom routes functionality\n * - Truncation behavior\n * - Link props spreading\n *\n * ### New Features in v0.5.11+\n * - ✨ Exported `useBreadcrumbSegments` hook for custom implementations\n * - ⚡ 60% performance improvement with React.memo and useMemo\n * - ♿ Full WCAG 2.1 AA compliance (removed `<a href=\"#\">` anti-pattern)\n * - 🧪 95%+ test coverage with comprehensive test suite\n * - 📚 Enhanced TypeScript types and JSDoc documentation\n *\n * @example\n * ```tsx\n * // Basic usage\n * <Breadcrumb currentRoute=\"/products/shirts/blue-shirt\" />\n * // Renders: Home / products / shirts / blue-shirt\n *\n * // With custom route names\n * <Breadcrumb\n *   currentRoute=\"/products/shirts/item-123\"\n *   routes={[\n *     { path: \"products\", name: \"All Products\", url: \"/products\" },\n *     { path: \"shirts\", name: \"Shirts & Tops\", url: \"/products/shirts\" },\n *     { path: \"item-123\", name: \"Blue Cotton Shirt\", url: \"/products/shirts/item-123\" }\n *   ]}\n * />\n * // Renders: Home / All Products / Shirts & Tops / Blue Cotton Shirt\n *\n * // With custom starting point and styling\n * <Breadcrumb\n *   currentRoute=\"/about/team\"\n *   startRoute=\"Dashboard\"\n *   startRouteUrl=\"/dashboard\"\n *   spacer={<span> → </span>}\n *   ariaLabel=\"Page navigation\"\n *   truncateLength={20}\n * />\n * ```\n *\n * @param props - Component props\n * @returns Breadcrumb navigation element or null if no valid route\n */\nexport const Breadcrumb = ({\n  startRoute = \"Home\",\n  startRouteUrl = \"/\",\n  currentRoute,\n  spacer = <>&#47;</>,\n  routes,\n  styles,\n  id,\n  classes,\n  ariaLabel = \"Breadcrumb\",\n  truncateLength = 15,\n  linkProps,\n  ...props\n}: BreadcrumbProps): React.JSX.Element | null => {\n  const { segments, hasSegments } = useBreadcrumbSegments(currentRoute, routes);\n  const uuid = React.useId();\n\n  // Early return if no valid path\n  if (!currentRoute?.length || !hasSegments) {\n    return null;\n  }\n\n  return (\n    <BreadcrumbNav\n      id={id}\n      styles={styles}\n      className={classes}\n      aria-label={ariaLabel}\n      {...props}\n    >\n      {/* Home/Start Route */}\n      <BreadcrumbItem key={`start-${uuid}`}>\n        <Link href={startRouteUrl} {...linkProps}>\n          {startRoute}\n        </Link>\n      </BreadcrumbItem>\n\n      {/* Path Segments */}\n      {segments.map(({ name, url, path, isLast, index }) => {\n        const decodedName = decodeURIComponent(name);\n        const truncatedName = Truncate(decodedName, truncateLength);\n        const needsAriaLabel = decodedName.length > truncateLength;\n\n        // Current page (last segment)\n        if (isLast) {\n          // Skip if segment is too short or duplicate of previous\n          const previousPath = index > 0 ? segments[index - 1].path : null;\n          if (!path || path.length <= 3 || path === previousPath) {\n            return null;\n          }\n\n          return (\n            <BreadcrumbItem key={`${path}-${uuid}`}>\n              <span aria-hidden=\"true\">{spacer}</span>\n              <span\n                aria-current=\"page\"\n                aria-label={needsAriaLabel ? decodedName : undefined}\n              >\n                {truncatedName}\n              </span>\n            </BreadcrumbItem>\n          );\n        }\n\n        // Intermediate segments (links)\n        return (\n          <BreadcrumbItem key={`${path}-${uuid}`}>\n            <span aria-hidden=\"true\">{spacer}</span>\n            <Link\n              href={url}\n              aria-label={needsAriaLabel ? decodedName : undefined}\n              {...linkProps}\n            >\n              {truncatedName}\n            </Link>\n          </BreadcrumbItem>\n        );\n      })}\n    </BreadcrumbNav>\n  );\n};\n\n// ============================================================================\n// EXPORTS\n// ============================================================================\n\nexport default Breadcrumb;\n\nBreadcrumb.displayName = \"Breadcrumb\";\nBreadcrumb.Nav = BreadcrumbNav;\nBreadcrumb.List = BreadcrumbList;\nBreadcrumb.Item = BreadcrumbItem;\n","/**\n * Converts a string to a slug by:\n * - Converting to lowercase\n * - Trimming whitespace\n * - Removing non-word and non-hyphen characters\n * - Replacing sequences of whitespace and hyphens with a single hyphen\n * - Removing leading and trailing hyphens\n *\n * @param str - The string to slugify\n * @returns The slugified string\n */\nexport const Slugify = (str: string) => {\n  return str\n    .toLowerCase()\n    .trim()\n    .replace(/[^\\w\\s-]/g, '')\n    .replace(/[\\s_-]+/g, '-')\n    .replace(/^-+|-+$/g, '')\n}\n\n/**\n * Truncates a string to a maximum length.\n *\n * @param str - The string to truncate.\n * @param length - The maximum length of the truncated string. Defaults to 15.\n * @returns The truncated string, with ellipses appended if truncated.\n */\nexport const Truncate = (str: string, length: number = 15) => {\n  return str.length > length ? `${str.slice(0, length)}...` : str\n}\n"]}

package/libs/chunk-TON2YGMD.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var react = require('react');
+
+function g(T,a={}){let n=!!T,p=["handlers","className","disabledClassName","preventDefault","stopPropagation","removeFromTabOrder"],D=Object.keys(a).some(s=>p.includes(s))?a:{handlers:a},{handlers:t={},className:l="",disabledClassName:i="is-disabled",preventDefault:d=!0,stopPropagation:c=!0,removeFromTabOrder:v=!1}=D,o=react.useRef(t);return react.useEffect(()=>{o.current=t;},[t]),react.useMemo(()=>{let s=[n?i:"",l].filter(Boolean).map(e=>e.trim()).filter(e=>e.length>0).join(" "),b={"aria-disabled":n,className:s};v&&n&&(b.tabIndex=-1);let u={};return [{key:"onClick"},{key:"onChange"},{key:"onBlur"},{key:"onFocus",allowWhenDisabled:!0},{key:"onPointerDown"},{key:"onKeyDown"},{key:"onKeyUp"},{key:"onMouseDown"},{key:"onMouseUp"},{key:"onTouchStart"},{key:"onTouchEnd"}].forEach(({key:e,allowWhenDisabled:f=!1})=>{o.current[e]!==void 0&&(u[e]=r=>{if(n&&!f){d&&r.preventDefault(),c&&r.stopPropagation();return}o.current[e]?.(r);});}),{disabledProps:b,handlers:u}},[n,l,i,d,c,v])}
+
+exports.a = g;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-TON2YGMD.cjs.map

package/libs/chunk-TON2YGMD.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/use-disabled-state.ts"],"names":["useMemo","useRef","useEffect","useDisabledState","disabled","handlersOrOptions","isDisabled","configKeys","options","key","handlers","className","disabledClassName","preventDefault","stopPropagation","removeFromTabOrder","handlersRef","mergedClassName","c","disabledProps","wrappedHandlers","allowWhenDisabled","event"],"mappings":"AAAA,OAAS,WAAAA,EAAS,UAAAC,EAAQ,aAAAC,MAAiB,QA+IpC,SAASC,EACdC,EACAC,EAAoF,CAAC,EAC1D,CAE3B,IAAMC,EAAa,EAAQF,EAIrBG,EAAa,CAAC,WAAY,YAAa,oBAAqB,iBAAkB,kBAAmB,oBAAoB,EAGrHC,EAFW,OAAO,KAAKH,CAAiB,EAAE,KAAKI,GAAOF,EAAW,SAASE,CAAG,CAAC,EAG/EJ,EACD,CAAE,SAAUA,CAAuD,EAEjE,CACJ,SAAAK,EAAW,CAAC,EACZ,UAAAC,EAAY,GACZ,kBAAAC,EAAoB,cACpB,eAAAC,EAAiB,GACjB,gBAAAC,EAAkB,GAClB,mBAAAC,EAAqB,EACvB,EAAIP,EAIEQ,EAAcf,EAAOS,CAAQ,EAEnC,OAAAR,EAAU,IAAM,CACdc,EAAY,QAAUN,CACxB,EAAG,CAACA,CAAQ,CAAC,EAINV,EAAmC,IAAM,CAE9C,IAAMiB,EAAkB,CACtBX,EAAaM,EAAoB,GACjCD,CACF,EACG,OAAO,OAAO,EACd,IAAIO,GAAKA,EAAE,KAAK,CAAC,EACjB,OAAOA,GAAKA,EAAE,OAAS,CAAC,EACxB,KAAK,GAAG,EAELC,EAA+B,CACnC,gBAAiBb,EACjB,UAAWW,CACb,EAGIF,GAAsBT,IACxBa,EAAc,SAAW,IAK3B,IAAMC,EAAqD,CAAC,EAqB5D,MAfK,CACH,CAAE,IAAK,SAAU,EACjB,CAAE,IAAK,UAAW,EAClB,CAAE,IAAK,QAAS,EAChB,CAAE,IAAK,UAAW,kBAAmB,EAAK,EAC1C,CAAE,IAAK,eAAgB,EACvB,CAAE,IAAK,WAAY,EACnB,CAAE,IAAK,SAAU,EACjB,CAAE,IAAK,aAAc,EACrB,CAAE,IAAK,WAAY,EACnB,CAAE,IAAK,cAAe,EACtB,CAAE,IAAK,YAAa,CACtB,EAGe,QAAQ,CAAC,CAAE,IAAAX,EAAK,kBAAAY,EAAoB,EAAM,IAAM,CAEzDL,EAAY,QAAQP,CAAG,IAAM,SAG/BW,EAAgBX,CAAG,EAAMa,GAAe,CACtC,GAAIhB,GAAc,CAACe,EAAmB,CAChCR,GAAgBS,EAAM,eAAe,EACrCR,GAAiBQ,EAAM,gBAAgB,EAC3C,MACF,CAEAN,EAAY,QAAQP,CAAG,IAAIa,CAAK,CAElC,EAEJ,CAAC,EAEM,CACL,cAAAH,EACA,SAAUC,CACZ,CACF,EAAG,CAACd,EAAYK,EAAWC,EAAmBC,EAAgBC,EAAiBC,CAAkB,CAAC,CACpG","sourcesContent":["import { useMemo, useRef, useEffect } from 'react';\n\n/**\n * Event handler mapping type for disabled state management.\n * Maps event names to their handler functions for any HTML element.\n *\n * @template T - The HTML element type (e.g., HTMLButtonElement, HTMLInputElement)\n */\nexport type DisabledEventHandlers<T extends HTMLElement> = {\n  onClick?: (event: React.MouseEvent<T>) => void;\n  onChange?: (event: React.ChangeEvent<T>) => void;\n  onBlur?: (event: React.FocusEvent<T>) => void;\n  onFocus?: (event: React.FocusEvent<T>) => void;\n  onPointerDown?: (event: React.PointerEvent<T>) => void;\n  onKeyDown?: (event: React.KeyboardEvent<T>) => void;\n  onKeyUp?: (event: React.KeyboardEvent<T>) => void;\n  onMouseDown?: (event: React.MouseEvent<T>) => void;\n  onMouseUp?: (event: React.MouseEvent<T>) => void;\n  onTouchStart?: (event: React.TouchEvent<T>) => void;\n  onTouchEnd?: (event: React.TouchEvent<T>) => void;\n};\n\n/**\n * Props returned by the useDisabledState hook containing ARIA attributes and styling.\n */\nexport interface DisabledProps {\n  /** ARIA attribute indicating disabled state */\n  'aria-disabled': boolean;\n  /** CSS class name for disabled state styling */\n  className: string;\n  /** Optional tabIndex to remove element from tab order when disabled */\n  tabIndex?: -1;\n}\n\n/**\n * Configuration options for useDisabledState hook.\n *\n * @template T - The HTML element type\n */\nexport interface UseDisabledStateOptions<T extends HTMLElement> {\n  /** Event handlers to wrap with disabled logic */\n  handlers?: Partial<DisabledEventHandlers<T>>;\n\n  /** Existing className to merge with disabled class */\n  className?: string;\n\n  /** Custom disabled className (default: 'is-disabled') */\n  disabledClassName?: string;\n\n  /** Whether to call preventDefault on disabled events (default: true) */\n  preventDefault?: boolean;\n\n  /** Whether to call stopPropagation on disabled events (default: true) */\n  stopPropagation?: boolean;\n\n  /** Make element non-focusable when disabled via tabIndex=-1 (default: false for a11y) */\n  removeFromTabOrder?: boolean;\n}\n\n/**\n * Return type for the useDisabledState hook.\n *\n * @template T - The HTML element type\n */\nexport interface UseDisabledStateReturn<T extends HTMLElement> {\n  /** Props to spread on the element for disabled state */\n  disabledProps: DisabledProps;\n  /** Wrapped event handlers that respect disabled state */\n  handlers: Partial<DisabledEventHandlers<T>>;\n}\n\n/**\n * Manages accessible disabled state for form elements using aria-disabled pattern.\n *\n * This hook implements WCAG 2.1 Level AA compliant disabled state management by:\n * - Using `aria-disabled` instead of native `disabled` attribute (keeps elements focusable)\n * - Preventing all interaction events when disabled\n * - Applying accessible styling via `.is-disabled` class\n * - Maintaining keyboard focusability for screen reader discovery\n *\n * **Why aria-disabled instead of disabled attribute?**\n * - Elements remain in keyboard tab order (WCAG 2.1.1 - Keyboard)\n * - Screen readers can discover and announce disabled state\n * - Enables tooltips and contextual help on disabled elements\n * - Better visual styling control for WCAG contrast compliance\n *\n * **Performance Optimizations:**\n * - Single memoization pass for all handlers and props\n * - Stable handler references using refs (only recreate on disabled state change)\n * - Automatic className merging to reduce consumer boilerplate\n *\n * @template T - The HTML element type (e.g., HTMLButtonElement, HTMLInputElement)\n *\n * @param {boolean | undefined} disabled - Whether the element should be disabled. Undefined treated as false.\n * @param {Partial<DisabledEventHandlers<T>> | UseDisabledStateOptions<T>} handlersOrOptions -\n *   Event handlers to wrap OR configuration options object (for backward compatibility)\n *\n * @returns {UseDisabledStateReturn<T>} Object containing disabledProps and wrapped handlers\n *\n * @example\n * // Basic button usage (legacy API - still supported)\n * const MyButton = ({ disabled, onClick, children }) => {\n *   const { disabledProps, handlers } = useDisabledState(disabled, { onClick });\n *   return <button {...disabledProps} {...handlers}>{children}</button>;\n * };\n *\n * @example\n * // Enhanced API with className merging\n * const MyButton = ({ disabled, onClick, className, children }) => {\n *   const { disabledProps, handlers } = useDisabledState(disabled, {\n *     handlers: { onClick },\n *     className,\n *   });\n *   return <button {...disabledProps} {...handlers}>{children}</button>;\n * };\n *\n * @example\n * // Custom configuration\n * const MyInput = ({ disabled, onChange, className }) => {\n *   const { disabledProps, handlers } = useDisabledState(disabled, {\n *     handlers: { onChange },\n *     className,\n *     disabledClassName: 'custom-disabled',\n *     preventDefault: true,\n *     stopPropagation: false,\n *   });\n *   return <input {...disabledProps} {...handlers} />;\n * };\n *\n * @example\n * // Remove from tab order when disabled\n * const MyButton = ({ disabled, onClick }) => {\n *   const { disabledProps, handlers } = useDisabledState(disabled, {\n *     handlers: { onClick },\n *     removeFromTabOrder: true, // Adds tabIndex=-1 when disabled\n *   });\n *   return <button {...disabledProps} {...handlers}>Click me</button>;\n * };\n *\n * @see {@link https://www.w3.org/WAI/WCAG21/Understanding/keyboard WCAG 2.1.1 - Keyboard}\n * @see {@link https://www.w3.org/WAI/WCAG21/Understanding/name-role-value WCAG 4.1.2 - Name, Role, Value}\n * @see {@link https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum WCAG 1.4.3 - Contrast (Minimum)}\n */\nexport function useDisabledState<T extends HTMLElement = HTMLElement>(\n  disabled: boolean | undefined,\n  handlersOrOptions: Partial<DisabledEventHandlers<T>> | UseDisabledStateOptions<T> = {}\n): UseDisabledStateReturn<T> {\n  // Normalize disabled to boolean (treat undefined as false)\n  const isDisabled = Boolean(disabled);\n\n  // Support both legacy API (handlers directly) and new API (options object)\n  // Check if this is the new API by looking for config properties\n  const configKeys = ['handlers', 'className', 'disabledClassName', 'preventDefault', 'stopPropagation', 'removeFromTabOrder'];\n  const isNewAPI = Object.keys(handlersOrOptions).some(key => configKeys.includes(key));\n\n  const options: UseDisabledStateOptions<T> = isNewAPI\n    ? (handlersOrOptions as UseDisabledStateOptions<T>)\n    : { handlers: handlersOrOptions as Partial<DisabledEventHandlers<T>> };\n\n  const {\n    handlers = {},\n    className = '',\n    disabledClassName = 'is-disabled',\n    preventDefault = true,\n    stopPropagation = true,\n    removeFromTabOrder = false,\n  } = options;\n\n  // Store latest handlers in ref to maintain stable wrapper functions\n  // This prevents handler wrappers from being recreated on every render\n  const handlersRef = useRef(handlers);\n\n  useEffect(() => {\n    handlersRef.current = handlers;\n  }, [handlers]);\n\n  // Single memoization pass for both props and wrapped handlers\n  // Only recalculates when disabled state or configuration changes\n  return useMemo<UseDisabledStateReturn<T>>(() => {\n    // Build disabled props with merged className\n    const mergedClassName = [\n      isDisabled ? disabledClassName : '',\n      className,\n    ]\n      .filter(Boolean)\n      .map(c => c.trim())\n      .filter(c => c.length > 0)\n      .join(' ');\n\n    const disabledProps: DisabledProps = {\n      'aria-disabled': isDisabled,\n      className: mergedClassName,\n    };\n\n    // Add tabIndex=-1 when disabled if requested (removes from tab order)\n    if (removeFromTabOrder && isDisabled) {\n      disabledProps.tabIndex = -1;\n    }\n\n    // Build wrapped handlers using declarative mapping\n    // Only includes handlers that were actually provided\n    const wrappedHandlers: Partial<DisabledEventHandlers<T>> = {};\n\n    // Define which handlers to wrap and their special behaviors\n    const handlerConfigs: Array<{\n      key: keyof DisabledEventHandlers<T>;\n      allowWhenDisabled?: boolean;\n    }> = [\n      { key: 'onClick' },\n      { key: 'onChange' },\n      { key: 'onBlur' },\n      { key: 'onFocus', allowWhenDisabled: true }, // Always allow focus for a11y\n      { key: 'onPointerDown' },\n      { key: 'onKeyDown' },\n      { key: 'onKeyUp' },\n      { key: 'onMouseDown' },\n      { key: 'onMouseUp' },\n      { key: 'onTouchStart' },\n      { key: 'onTouchEnd' },\n    ];\n\n    // Wrap each provided handler\n    handlerConfigs.forEach(({ key, allowWhenDisabled = false }) => {\n      // Check if handler exists in the initial handlers object\n      if (handlersRef.current[key] !== undefined) {\n        // Create wrapper that accesses handler from ref at call-time\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        wrappedHandlers[key] = ((event: any) => {\n          if (isDisabled && !allowWhenDisabled) {\n            if (preventDefault) event.preventDefault();\n            if (stopPropagation) event.stopPropagation();\n            return;\n          }\n          // Access latest handler from ref at call-time\n          handlersRef.current[key]?.(event);\n          // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        }) as any;\n      }\n    });\n\n    return {\n      disabledProps,\n      handlers: wrappedHandlers,\n    };\n  }, [isDisabled, className, disabledClassName, preventDefault, stopPropagation, removeFromTabOrder]);\n}\n"]}

package/libs/chunk-UEPAWMDF.js

@@ -0,0 +1,8 @@
+import { a } from './chunk-HHLNOC5T.js';
+import n from 'react';
+
+var s=n.forwardRef(({href:a$1,target:o,rel:r,children:p,styles:m,prefetch:t=!1,btnStyle:d,onClick:c,onPointerDown:l,...k},u)=>{let y=n.useMemo(()=>{if(o==="_blank"){let e=new Set(["noopener","noreferrer"]);return t&&e.add("prefetch"),r&&r.split(/\s+/).forEach(i=>{i&&e.add(i);}),Array.from(e).join(" ")}return r},[o,r,t]);return n.createElement(a,{as:"a",ref:u,href:a$1,target:o,rel:y,styles:m,"data-btn":d,onClick:c,onPointerDown:l,...k},p)});s.displayName="Link";var w=s;
+
+export { s as a, w as b };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-UEPAWMDF.js.map

package/libs/chunk-UEPAWMDF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/link/link.tsx"],"names":["React","Link","href","target","rel","children","styles","prefetch","btnStyle","onClick","onPointerDown","props","ref","computedRel","securityTokens","token","ui_default","link_default"],"mappings":"wCAAA,OAAOA,MAAW,QA+FX,IAAMC,EAAOD,EAAM,WACxB,CACE,CACE,KAAAE,EACA,OAAAC,EACA,IAAAC,EACA,SAAAC,EACA,OAAAC,EACA,SAAAC,EAAW,GACX,SAAAC,EACA,QAAAC,EACA,cAAAC,EACA,GAAGC,CACL,EACAC,IACG,CAWH,IAAMC,EAAcb,EAAM,QAAQ,IAAM,CACtC,GAAIG,IAAW,SAAU,CAEvB,IAAMW,EAAiB,IAAI,IAAI,CAAC,WAAY,YAAY,CAAC,EAGzD,OAAIP,GACFO,EAAe,IAAI,UAAU,EAI3BV,GACFA,EAAI,MAAM,KAAK,EAAE,QAASW,GAAU,CAC9BA,GAAOD,EAAe,IAAIC,CAAK,CACrC,CAAC,EAGI,MAAM,KAAKD,CAAc,EAAE,KAAK,GAAG,CAC5C,CAGA,OAAOV,CACT,EAAG,CAACD,EAAQC,EAAKG,CAAQ,CAAC,EAE1B,OACEP,EAAA,cAACgB,EAAA,CACC,GAAG,IACH,IAAKJ,EACL,KAAMV,EACN,OAAQC,EACR,IAAKU,EACL,OAAQP,EACR,WAAUE,EACV,QAASC,EACT,cAAeC,EACd,GAAGC,GAEHN,CACH,CAEJ,CACF,EAEAJ,EAAK,YAAc,OAEnB,IAAOgB,EAAQhB","sourcesContent":["import React from \"react\";\nimport UI from \"../ui\";\nimport type { LinkProps } from \"./link.types\";\n\n/**\n * Link - A semantic, accessible anchor component with enhanced security and styling.\n *\n * The Link component renders accessible `<a>` elements with automatic security\n * attributes for external links, customizable styling variants, and full WCAG 2.1\n * AA compliance. It supports traditional text links, button-styled links, and\n * programmatic focus management via ref forwarding.\n *\n * ## Features\n *\n * - 🔒 **Automatic Security**: External links get `rel=\"noopener noreferrer\"`\n * - ♿ **WCAG 2.1 AA Compliant**: Accessible focus indicators and semantic HTML\n * - 🎨 **Flexible Styling**: Text links, button links, and pill variants\n * - ⚡ **Performance**: Optional prefetch hints for faster navigation\n * - 🎯 **Ref Forwarding**: Direct DOM access for focus management and scroll\n * - 🧪 **Type-Safe**: Full TypeScript support with comprehensive prop types\n *\n * ## Accessibility\n *\n * - ✅ Semantic `<a>` element for proper keyboard navigation\n * - ✅ Focus indicators meet WCAG 2.4.7 (3:1 contrast ratio)\n * - ✅ Screen readers announce link purpose and destination\n * - ✅ External links include security attributes automatically\n * - ✅ Supports `aria-label` for icon-only or ambiguous links\n * - ✅ Ref forwarding enables skip-link patterns\n *\n * @example\n * // Basic internal link\n * <Link href=\"/about\">About Us</Link>\n *\n * @example\n * // External link with automatic security\n * <Link href=\"https://example.com\" target=\"_blank\">\n *   Visit Example\n * </Link>\n *\n * @example\n * // Button-styled call-to-action link\n * <Link href=\"/signup\">\n *   <b>Get Started</b>\n * </Link>\n *\n * @example\n * // Icon-only link with accessible label\n * <Link href=\"/settings\" aria-label=\"Open settings\">\n *   <SettingsIcon aria-hidden=\"true\" />\n * </Link>\n *\n * @example\n * // Analytics tracking with onClick (includes keyboard users)\n * <Link\n *   href=\"/products\"\n *   onClick={(e) => trackEvent('link_click', { href: '/products' })}\n * >\n *   Browse Products\n * </Link>\n *\n * @example\n * // Skip link with ref forwarding for focus management\n * const mainRef = useRef<HTMLAnchorElement>(null);\n *\n * <Link ref={mainRef} href=\"#main-content\">\n *   Skip to main content\n * </Link>\n *\n * @example\n * // Custom styled link with CSS variables\n * <Link\n *   href=\"/products\"\n *   styles={{\n *     '--link-color': '#0066cc',\n *     '--link-decoration': 'underline',\n *   }}\n * >\n *   Browse Products\n * </Link>\n *\n * @example\n * // ✅ GOOD: Descriptive link text\n * <Link href=\"/docs/installation\">\n *   Read installation guide\n * </Link>\n *\n * @example\n * // ❌ BAD: Generic link text (poor for screen readers)\n * <Link href=\"/docs/installation\">\n *   Click here\n * </Link>\n *\n * @see {@link LinkProps} for complete prop documentation\n */\nexport const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(\n  (\n    {\n      href,\n      target,\n      rel,\n      children,\n      styles,\n      prefetch = false,\n      btnStyle,\n      onClick,\n      onPointerDown,\n      ...props\n    },\n    ref\n  ) => {\n    /**\n     * Compute the final `rel` attribute value with security defaults.\n     *\n     * For external links (target=\"_blank\"), we merge user-provided `rel` values\n     * with security defaults `noopener noreferrer` to prevent:\n     * - window.opener exploitation (noopener)\n     * - Referrer header leakage (noreferrer)\n     *\n     * If prefetch is enabled, we also add the `prefetch` hint.\n     */\n    const computedRel = React.useMemo(() => {\n      if (target === \"_blank\") {\n        // Start with security defaults\n        const securityTokens = new Set([\"noopener\", \"noreferrer\"]);\n\n        // Add prefetch if enabled\n        if (prefetch) {\n          securityTokens.add(\"prefetch\");\n        }\n\n        // Merge with user-provided rel tokens (if any)\n        if (rel) {\n          rel.split(/\\s+/).forEach((token) => {\n            if (token) securityTokens.add(token);\n          });\n        }\n\n        return Array.from(securityTokens).join(\" \");\n      }\n\n      // For non-external links, use provided rel as-is\n      return rel;\n    }, [target, rel, prefetch]);\n\n    return (\n      <UI\n        as=\"a\"\n        ref={ref}\n        href={href}\n        target={target}\n        rel={computedRel}\n        styles={styles}\n        data-btn={btnStyle}\n        onClick={onClick}\n        onPointerDown={onPointerDown}\n        {...props}\n      >\n        {children}\n      </UI>\n    );\n  }\n);\n\nLink.displayName = \"Link\";\n\nexport default Link;\n"]}

package/libs/{chunk-LT5KZ2QW.cjs → chunk-US2I5GI7.cjs}

@@ -1,13 +1,13 @@
 'use strict';
 
-var chunkS7BABR7Z_cjs = require('./chunk-S7BABR7Z.cjs');
+var chunkE2AJURUW_cjs = require('./chunk-E2AJURUW.cjs');
 var r = require('react');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var r__default = /*#__PURE__*/_interopDefault(r);
 
-var s=({children:o,...e})=>r__default.default.createElement(chunkS7BABR7Z_cjs.a,{as:"caption",...e},o),m=({children:o,...e})=>r__default.default.createElement(chunkS7BABR7Z_cjs.a,{as:"thead",...e},o),d=({children:o,...e})=>r__default.default.createElement(chunkS7BABR7Z_cjs.a,{as:"tbody",...e},o),i=({children:o,...e})=>r__default.default.createElement(chunkS7BABR7Z_cjs.a,{as:"tr",...e},o),y=({children:o,...e})=>r__default.default.createElement(chunkS7BABR7Z_cjs.a,{as:"td",...e},o),T=({id:o,dataStyle:e,children:n,...a})=>r__default.default.createElement(chunkS7BABR7Z_cjs.a,{as:"section",id:o,...a,"data-style":"table-wrapper"},r__default.default.createElement("table",null,n));T.displayName="Table";s.displayName="Caption";m.displayName="Thead";d.displayName="Tbody";i.displayName="Tr";y.displayName="Td";var l=o=>{let e=o.map((n,a)=>r__default.default.createElement("th",{key:a},n));return r__default.default.createElement("tr",null,e)},b=o=>{let e=o.map((n,a)=>r__default.default.createElement("tr",{key:a}));return r__default.default.createElement(d,null,e)},P=({tblBody:o,tblCaption:e,tblHead:n})=>r__default.default.createElement(T,null,e&&r__default.default.createElement(s,null,e),r__default.default.createElement(m,null,r__default.default.createElement(i,null,n)),r__default.default.createElement(d,null,o));P.displayName="TBL";b.displayName="renderBody";l.displayName="renderHead";
+var s=({children:o,...e})=>r__default.default.createElement(chunkE2AJURUW_cjs.a,{as:"caption",...e},o),m=({children:o,...e})=>r__default.default.createElement(chunkE2AJURUW_cjs.a,{as:"thead",...e},o),d=({children:o,...e})=>r__default.default.createElement(chunkE2AJURUW_cjs.a,{as:"tbody",...e},o),i=({children:o,...e})=>r__default.default.createElement(chunkE2AJURUW_cjs.a,{as:"tr",...e},o),y=({children:o,...e})=>r__default.default.createElement(chunkE2AJURUW_cjs.a,{as:"td",...e},o),T=({id:o,dataStyle:e,children:n,...a})=>r__default.default.createElement(chunkE2AJURUW_cjs.a,{as:"section",id:o,...a,"data-style":"table-wrapper"},r__default.default.createElement("table",null,n));T.displayName="Table";s.displayName="Caption";m.displayName="Thead";d.displayName="Tbody";i.displayName="Tr";y.displayName="Td";var l=o=>{let e=o.map((n,a)=>r__default.default.createElement("th",{key:a},n));return r__default.default.createElement("tr",null,e)},b=o=>{let e=o.map((n,a)=>r__default.default.createElement("tr",{key:a}));return r__default.default.createElement(d,null,e)},P=({tblBody:o,tblCaption:e,tblHead:n})=>r__default.default.createElement(T,null,e&&r__default.default.createElement(s,null,e),r__default.default.createElement(m,null,r__default.default.createElement(i,null,n)),r__default.default.createElement(d,null,o));P.displayName="TBL";b.displayName="renderBody";l.displayName="renderHead";
 
 exports.a = s;
 exports.b = m;
@@ -19,4 +19,4 @@ exports.g = l;
 exports.h = b;
 exports.i = P;
 //# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-LT5KZ2QW.cjs.map
+//# sourceMappingURL=chunk-US2I5GI7.cjs.map