@fpkit/acss 0.5.13 → 0.6.0

package/src/styles/utilities/_disabled.scss

@@ -0,0 +1,58 @@
+/**
+ * Disabled State Utility Styles
+ *
+ * Provides accessible styling for disabled form elements using aria-disabled pattern.
+ * Meets WCAG 2.1 Level AA requirements for visual distinction and contrast.
+ *
+ * WCAG References:
+ * - WCAG 1.4.3 (Contrast Minimum): UI components require 3:1 contrast minimum
+ * - WCAG 2.1.1 (Keyboard): Elements remain focusable via keyboard
+ * - WCAG 4.1.2 (Name, Role, Value): aria-disabled properly announces state
+ *
+ * Usage:
+ * - Apply .is-disabled class OR aria-disabled="true" attribute
+ * - Customize via CSS custom properties (--disabled-opacity, --disabled-cursor, --disabled-color)
+ * - Default color (hsl(0 0% 40%)) ensures 3:1 contrast on white backgrounds
+ *
+ * WARNING: If overriding --disabled-color, ensure WCAG 1.4.3 compliance
+ * (minimum 3:1 contrast ratio for UI components)
+ */
+
+.is-disabled,
+[aria-disabled='true'] {
+  /* CSS Custom Properties for theming */
+  --disabled-opacity: 0.6;
+  --disabled-cursor: not-allowed;
+  /* hsl(0 0% 40%) = #666666, provides 3:1 contrast on white (#ffffff) */
+  --disabled-color: hsl(0 0% 40%);
+
+  /* Apply disabled styles */
+  opacity: var(--disabled-opacity);
+  cursor: var(--disabled-cursor);
+  color: var(--disabled-color);
+
+  /**
+   * Maintain focus visibility for keyboard navigation (WCAG 2.4.7)
+   * Disabled elements must still be focusable and have visible focus indicators
+   *
+   * WCAG 2.4.7 requires focus indicators to have 3:1 contrast against both:
+   * - The background color
+   * - Adjacent non-focused component colors
+   *
+   * Theme authors: If providing a custom --focus-color, ensure it meets WCAG 2.4.7
+   * contrast requirements (3:1 minimum) against all background colors in your theme.
+   *
+   * Example theme customization:
+   * :root {
+   *   --focus-color: #005fcc;  // Ensure 3:1 contrast on your backgrounds
+   * }
+   */
+  &:focus-visible {
+    /* Preserve focus ring from global styles */
+    outline-width: 0.125rem; /* 2px */
+    outline-style: solid;
+    outline-offset: 0.125rem; /* 2px */
+    /* Use custom focus color with currentColor fallback */
+    outline-color: var(--focus-color, currentColor);
+  }
+}

package/src/types/shared.ts

@@ -14,7 +14,7 @@ export interface ComponentProps {
   /**
    * Styles object
    */
-  styles?: {}
+  styles?: React.CSSProperties
   /**
    * Component class attribute
    */
@@ -25,7 +25,48 @@ export interface ComponentProps {
   dataStyle?: string
 }
 
-export interface SharedInputProps extends ComponentProps {
+/**
+ * Props for disabled state management across components.
+ *
+ * Supports both modern `disabled` and legacy `isDisabled` props for
+ * backward compatibility.
+ *
+ * @see {@link https://www.w3.org/WAI/WCAG21/Understanding/keyboard WCAG 2.1.1 - Keyboard}
+ * @see {@link https://www.w3.org/WAI/WCAG21/Understanding/name-role-value WCAG 4.1.2 - Name, Role, Value}
+ */
+export interface DisabledStateProps {
+  /**
+   * Disables the component, preventing user interaction while maintaining
+   * keyboard focusability and screen reader accessibility.
+   *
+   * Uses `aria-disabled` pattern instead of native `disabled` attribute to:
+   * - Keep elements in keyboard tab order (WCAG 2.1.1)
+   * - Allow screen readers to discover and announce disabled state
+   * - Enable tooltips and contextual help on disabled elements
+   * - Provide better visual styling control
+   *
+   * @default false
+   */
+  disabled?: boolean
+
+  /**
+   * Legacy disabled prop for backward compatibility.
+   *
+   * @deprecated Use `disabled` instead. This prop will be removed in v3.0.
+   *
+   * @migration Replace `isDisabled={true}` with `disabled={true}`
+   *
+   * @example
+   * // Before
+   * <Button isDisabled={true}>Click me</Button>
+   *
+   * // After
+   * <Button disabled={true}>Click me</Button>
+   */
+  isDisabled?: boolean
+}
+
+export interface SharedInputProps extends ComponentProps, DisabledStateProps {
   /**
    * The input name
    */
@@ -46,10 +87,6 @@ export interface SharedInputProps extends ComponentProps {
    * Input id attribute
    */
   id: string
-  /**
-   * Set the element as disabled
-   */
-  disabled?: boolean
   /**
    * Set the element as readonly
    */

package/src/utils/accessibility.ts

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

package/libs/chunk-2LTJ7HHX.cjs

@@ -1,18 +0,0 @@
-'use strict';
-
-var chunkXTQKWY7W_cjs = require('./chunk-XTQKWY7W.cjs');
-var chunkL75OQKEI_cjs = require('./chunk-L75OQKEI.cjs');
-var r = require('react');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var r__default = /*#__PURE__*/_interopDefault(r);
-
-var n=({isBlock:t,children:o,...s})=>r__default.default.createElement(chunkXTQKWY7W_cjs.c,{type:"ul",...s,"data-list":`unstyled ${t?"block":""}`},o),L=({id:t,styles:o,classes:s,children:i,...m})=>r__default.default.createElement(chunkXTQKWY7W_cjs.c.ListItem,{type:"li",id:t,classes:s,styles:o,...m},i),e=({children:t,...o})=>r__default.default.createElement(chunkL75OQKEI_cjs.a,{as:"nav",...o},t),N=e;e.displayName="Nav";e.List=n;e.Item=L;
-
-exports.a = n;
-exports.b = L;
-exports.c = e;
-exports.d = N;
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-2LTJ7HHX.cjs.map

package/libs/chunk-2LTJ7HHX.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/nav/nav.tsx"],"names":["React","NavList","isBlock","children","props","list_default","NavItem","id","styles","classes","Nav","ui_default","nav_default"],"mappings":"6EAEA,OAAOA,MAAW,QAgBX,IAAMC,EAAU,CAAC,CAAE,QAAAC,EAAS,SAAAC,EAAU,GAAGC,CAAM,IAElDJ,EAAA,cAACK,EAAA,CAAK,KAAK,KAAM,GAAGD,EAAO,YAAW,YAAYF,EAAU,QAAU,EAAE,IACrEC,CACH,EAeSG,EAAU,CAAC,CACtB,GAAAC,EACA,OAAAC,EACA,QAAAC,EACA,SAAAN,EACA,GAAGC,CACL,IAEIJ,EAAA,cAACK,EAAK,SAAL,CACC,KAAK,KACL,GAAIE,EACJ,QAASE,EACT,OAAQD,EACP,GAAGJ,GAEHD,CACH,EAWSO,EAAM,CAAC,CAAE,SAAAP,EAAU,GAAGC,CAAM,IAErCJ,EAAA,cAACW,EAAA,CAAG,GAAG,MAAO,GAAGP,GACdD,CACH,EAIGS,EAAQF,EACfA,EAAI,YAAc,MAClBA,EAAI,KAAOT,EACXS,EAAI,KAAOJ","sourcesContent":["import UI from '../ui'\nimport List from '../list/list'\nimport React from 'react'\n\nexport type NavListProps = React.ComponentProps<typeof List> & {\n  isBlock?: boolean\n}\nexport type NavItemProps = React.ComponentProps<typeof List.ListItem>\n\nexport type NavProps = React.ComponentProps<typeof UI>\n\n/**\n * Renders a NavList component.\n * @param {Object} props - The props for the component.\n * @param {ReactNode} props.children - The child elements.\n * @param {Object} props - Additional props to spread to the List component.\n * @returns {JSX.Element} The rendered NavList component.\n */\nexport const NavList = ({ isBlock, children, ...props }: NavListProps) => {\n  return (\n    <List type=\"ul\" {...props} data-list={`unstyled ${isBlock ? 'block' : ''}`}>\n      {children}\n    </List>\n  )\n}\n\n/**\n * Renders a NavItem component.\n * @param {Object} props - The props for the component.\n * @param {string} [props.id] - The id for the component.\n * @param {Object} [props.styles] - The styles for the component.\n * @param {string} [props.classes] - The classes for the component.\n * @param {ReactNode} props.children - The child elements.\n * @param {boolean} [props.inline=true] - Whether the item should display inline.\n * @param {Object} props - Additional props to spread to the ListItem component.\n * @returns {JSX.Element} The rendered NavItem component.\n */\nexport const NavItem = ({\n  id,\n  styles,\n  classes,\n  children,\n  ...props\n}: NavItemProps) => {\n  return (\n    <List.ListItem\n      type=\"li\"\n      id={id}\n      classes={classes}\n      styles={styles}\n      {...props}\n    >\n      {children}\n    </List.ListItem>\n  )\n}\n\n/**\n * Renders a Nav component.\n * @param {Object} props - The props for the component.\n * @param {ReactNode} props.children - The child elements.\n * @param {Object} props - Additional props to spread to the UI component.\n * @returns {JSX.Element} The rendered Nav component.\n */\nexport const Nav = ({ children, ...props }: NavProps) => {\n  return (\n    <UI as=\"nav\" {...props}>\n      {children}\n    </UI>\n  )\n}\n\nexport default Nav\nNav.displayName = 'Nav'\nNav.List = NavList\nNav.Item = NavItem\n"]}

package/libs/chunk-2Y7W75TT.js

@@ -1,9 +0,0 @@
-import { c } from './chunk-SMYRLO3E.js';
-import { a } from './chunk-KUKIVRC2.js';
-import r from 'react';
-
-var n=({isBlock:t,children:o,...s})=>r.createElement(c,{type:"ul",...s,"data-list":`unstyled ${t?"block":""}`},o),L=({id:t,styles:o,classes:s,children:i,...m})=>r.createElement(c.ListItem,{type:"li",id:t,classes:s,styles:o,...m},i),e=({children:t,...o})=>r.createElement(a,{as:"nav",...o},t),N=e;e.displayName="Nav";e.List=n;e.Item=L;
-
-export { n as a, L as b, e as c, N as d };
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-2Y7W75TT.js.map

package/libs/chunk-2Y7W75TT.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/nav/nav.tsx"],"names":["React","NavList","isBlock","children","props","list_default","NavItem","id","styles","classes","Nav","ui_default","nav_default"],"mappings":"2EAEA,OAAOA,MAAW,QAgBX,IAAMC,EAAU,CAAC,CAAE,QAAAC,EAAS,SAAAC,EAAU,GAAGC,CAAM,IAElDJ,EAAA,cAACK,EAAA,CAAK,KAAK,KAAM,GAAGD,EAAO,YAAW,YAAYF,EAAU,QAAU,EAAE,IACrEC,CACH,EAeSG,EAAU,CAAC,CACtB,GAAAC,EACA,OAAAC,EACA,QAAAC,EACA,SAAAN,EACA,GAAGC,CACL,IAEIJ,EAAA,cAACK,EAAK,SAAL,CACC,KAAK,KACL,GAAIE,EACJ,QAASE,EACT,OAAQD,EACP,GAAGJ,GAEHD,CACH,EAWSO,EAAM,CAAC,CAAE,SAAAP,EAAU,GAAGC,CAAM,IAErCJ,EAAA,cAACW,EAAA,CAAG,GAAG,MAAO,GAAGP,GACdD,CACH,EAIGS,EAAQF,EACfA,EAAI,YAAc,MAClBA,EAAI,KAAOT,EACXS,EAAI,KAAOJ","sourcesContent":["import UI from '../ui'\nimport List from '../list/list'\nimport React from 'react'\n\nexport type NavListProps = React.ComponentProps<typeof List> & {\n  isBlock?: boolean\n}\nexport type NavItemProps = React.ComponentProps<typeof List.ListItem>\n\nexport type NavProps = React.ComponentProps<typeof UI>\n\n/**\n * Renders a NavList component.\n * @param {Object} props - The props for the component.\n * @param {ReactNode} props.children - The child elements.\n * @param {Object} props - Additional props to spread to the List component.\n * @returns {JSX.Element} The rendered NavList component.\n */\nexport const NavList = ({ isBlock, children, ...props }: NavListProps) => {\n  return (\n    <List type=\"ul\" {...props} data-list={`unstyled ${isBlock ? 'block' : ''}`}>\n      {children}\n    </List>\n  )\n}\n\n/**\n * Renders a NavItem component.\n * @param {Object} props - The props for the component.\n * @param {string} [props.id] - The id for the component.\n * @param {Object} [props.styles] - The styles for the component.\n * @param {string} [props.classes] - The classes for the component.\n * @param {ReactNode} props.children - The child elements.\n * @param {boolean} [props.inline=true] - Whether the item should display inline.\n * @param {Object} props - Additional props to spread to the ListItem component.\n * @returns {JSX.Element} The rendered NavItem component.\n */\nexport const NavItem = ({\n  id,\n  styles,\n  classes,\n  children,\n  ...props\n}: NavItemProps) => {\n  return (\n    <List.ListItem\n      type=\"li\"\n      id={id}\n      classes={classes}\n      styles={styles}\n      {...props}\n    >\n      {children}\n    </List.ListItem>\n  )\n}\n\n/**\n * Renders a Nav component.\n * @param {Object} props - The props for the component.\n * @param {ReactNode} props.children - The child elements.\n * @param {Object} props - Additional props to spread to the UI component.\n * @returns {JSX.Element} The rendered Nav component.\n */\nexport const Nav = ({ children, ...props }: NavProps) => {\n  return (\n    <UI as=\"nav\" {...props}>\n      {children}\n    </UI>\n  )\n}\n\nexport default Nav\nNav.displayName = 'Nav'\nNav.List = NavList\nNav.Item = NavItem\n"]}

package/libs/chunk-5S4ORA4C.cjs

@@ -1,15 +0,0 @@
-'use strict';
-
-var chunkL75OQKEI_cjs = require('./chunk-L75OQKEI.cjs');
-var m = require('react');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var m__default = /*#__PURE__*/_interopDefault(m);
-
-var a=({href:i,target:e,rel:p,children:l,styles:s,prefetch:t,btnStyle:c,onPointerDown:n,...f})=>{let r=p;return e==="_blank"&&(r=`noopener noreferrer ${t?"prefetch":""}`),m__default.default.createElement(chunkL75OQKEI_cjs.a,{as:"a",href:i,target:e,styles:s,rel:r,onPointerDown:h=>{n&&n?.(h);},"data-btn":c,prefetch:t,...f},l)},y=a;a.displayName="Link";
-
-exports.a = a;
-exports.b = y;
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-5S4ORA4C.cjs.map

package/libs/chunk-5S4ORA4C.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/link/link.tsx"],"names":["React","Link","href","target","rel","children","styles","prefetch","btnStyle","onPointerDown","props","relValue","ui_default","e","link_default"],"mappings":"yCACA,OAAOA,MAAW,QAqBX,IAAMC,EAAO,CAAC,CACnB,KAAAC,EACA,OAAAC,EACA,IAAAC,EACA,SAAAC,EACA,OAAAC,EACA,SAAAC,EACA,SAAAC,EACA,cAAAC,EACA,GAAGC,CACL,IAAiB,CACf,IAAIC,EAAWP,EAEf,OAAID,IAAW,WACbQ,EAAW,uBAAuBJ,EAAW,WAAa,EAAE,IAO5DP,EAAA,cAACY,EAAA,CACC,GAAG,IACH,KAAMV,EACN,OAAQC,EACR,OAAQG,EACR,IAAKK,EACL,cAXyBE,GAA6C,CACpEJ,GAAeA,IAAgBI,CAAC,CACtC,EAUI,WAAUL,EACV,SAAUD,EACT,GAAGG,GAEHL,CACH,CAEJ,EAEOS,EAAQb,EACfA,EAAK,YAAc","sourcesContent":["import UI from \"../ui\";\nimport React from \"react\";\n\nexport type LinkProps = {\n  href?: string;\n\n  target?: string;\n\n  rel?: string;\n\n  children: React.ReactNode;\n\n  styles?: React.CSSProperties;\n\n  prefetch?: boolean;\n\n  btnStyle?: string;\n\n  onPointerDown?: (event: React.PointerEvent<HTMLAnchorElement>) => void;\n} & React.ComponentProps<typeof UI> &\n  React.ComponentProps<\"a\">;\n\nexport const Link = ({\n  href,\n  target,\n  rel,\n  children,\n  styles,\n  prefetch,\n  btnStyle,\n  onPointerDown,\n  ...props\n}: LinkProps) => {\n  let relValue = rel;\n\n  if (target === \"_blank\")\n    relValue = `noopener noreferrer ${prefetch ? \"prefetch\" : \"\"}`;\n\n  const handleOnpointerDown = (e: React.PointerEvent<HTMLAnchorElement>) => {\n    if (onPointerDown) onPointerDown?.(e);\n  };\n\n  return (\n    <UI\n      as=\"a\"\n      href={href}\n      target={target}\n      styles={styles}\n      rel={relValue}\n      onPointerDown={handleOnpointerDown}\n      data-btn={btnStyle}\n      prefetch={prefetch}\n      {...props}\n    >\n      {children}\n    </UI>\n  );\n};\n\nexport default Link;\nLink.displayName = \"Link\";\n"]}

package/libs/chunk-AHDJGCG5.cjs

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

package/libs/chunk-AHDJGCG5.cjs.map

@@ -1 +0,0 @@
-{"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,QAmBX,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  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 * @param labelFor Defines the for attribute of the label element\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-BHRQBJRY.js

@@ -1,8 +0,0 @@
-import { a } from './chunk-P7TTEYCD.js';
-import R from 'react';
-
-var m=({type:a$1="text",name:c,value:i,placeholder:d,id:f,styles:y,classes:I,isDisabled:p,disabled:t,readonly:r,required:n,ref:h,onChange:o,onBlur:l,onPointerDown:u,...E})=>{let x=e=>{o&&!t&&o?.(e);},v=e=>{l&&!t&&l?.(e);},P=e=>{u&&!t&&(e.preventDefault(),u?.(e));};return R.createElement(a,{as:"input",id:f,type:a$1,placeholder:d||`${n?"*":""} ${a$1} input `,className:I,styles:y,onChange:x,onBlur:v,onKeyDown:P,value:i,name:c,ref:h,"aria-disabled":p,tabIndex:p?-1:void 0,"aria-readonly":r,"aria-required":n,required:n,readOnly:r,...E})};m.displayName="Input";var F=m;
-
-export { m as a, F as b };
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-BHRQBJRY.js.map

package/libs/chunk-BHRQBJRY.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/form/inputs.tsx"],"names":["React","Input","type","name","value","placeholder","id","styles","classes","isDisabled","disabled","readonly","required","ref","onChange","onBlur","onPointerDown","props","handleChange","handleBlur","handleKeyDown","fp_default","inputs_default"],"mappings":"wCAAA,OAAOA,MAAW,QAeX,IAAMC,EAAQ,CAAC,CACpB,KAAAC,EAAO,OACP,KAAAC,EACA,MAAAC,EACA,YAAAC,EACA,GAAAC,EACA,OAAAC,EACA,QAAAC,EACA,WAAAC,EACA,SAAAC,EACA,SAAAC,EACA,SAAAC,EACA,IAAAC,EACA,SAAAC,EACA,OAAAC,EACA,cAAAC,EACA,GAAGC,CACL,IAA+B,CAC7B,IAAMC,EAAgB,GAA2C,CAC3DJ,GAAY,CAACJ,GACfI,IAAW,CAAC,CAEhB,EAEMK,EAAc,GAA0C,CACxDJ,GAAU,CAACL,GACbK,IAAS,CAAC,CAEd,EAEMK,EAAiB,GAA6C,CAC9DJ,GAAiB,CAACN,IACpB,EAAE,eAAe,EACjBM,IAAgB,CAAC,EAErB,EAEA,OACEhB,EAAA,cAACqB,EAAA,CACC,GAAG,QACH,GAAIf,EACJ,KAAMJ,EACN,YAAaG,GAAe,GAAGO,EAAW,IAAM,EAAE,IAAIV,CAAI,UAC1D,UAAWM,EACX,OAAQD,EACR,SAAUW,EACV,OAAQC,EACR,UAAWC,EACX,MAAOhB,EACP,KAAMD,EACN,IAAKU,EACL,gBAAeJ,EACf,SAAUA,EAAa,GAAK,OAC5B,gBAAeE,EACf,gBAAeC,EACf,SAAUA,EACV,SAAUD,EACT,GAAGM,EACN,CAEJ,EACAhB,EAAM,YAAc,QACpB,IAAOqB,EAAQrB","sourcesContent":["import React from \"react\";\nimport FP from \"../fp\";\n\nexport type InputProps = {\n  /**\n   * The type of the input.\n   */\n  type?: \"text\" | \"password\" | \"email\" | \"number\" | \"tel\" | \"url\" | \"search\";\n\n  /**\n   * Set the element as disabled\n   */\n  isDisabled?: boolean;\n} & React.ComponentProps<typeof FP>;\n\nexport const Input = ({\n  type = \"text\",\n  name,\n  value,\n  placeholder,\n  id,\n  styles,\n  classes,\n  isDisabled,\n  disabled,\n  readonly,\n  required,\n  ref,\n  onChange,\n  onBlur,\n  onPointerDown,\n  ...props\n}: InputProps): JSX.Element => {\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (onChange && !disabled) {\n      onChange?.(e);\n    }\n  };\n\n  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n    if (onBlur && !disabled) {\n      onBlur?.(e);\n    }\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (onPointerDown && !disabled) {\n      e.preventDefault();\n      onPointerDown?.(e);\n    }\n  };\n\n  return (\n    <FP\n      as=\"input\"\n      id={id}\n      type={type}\n      placeholder={placeholder || `${required ? \"*\" : \"\"} ${type} input `}\n      className={classes}\n      styles={styles}\n      onChange={handleChange}\n      onBlur={handleBlur}\n      onKeyDown={handleKeyDown}\n      value={value}\n      name={name}\n      ref={ref}\n      aria-disabled={isDisabled}\n      tabIndex={isDisabled ? -1 : undefined}\n      aria-readonly={readonly}\n      aria-required={required}\n      required={required}\n      readOnly={readonly}\n      {...props}\n    />\n  );\n};\nInput.displayName = \"Input\";\nexport default Input;\n"]}

package/libs/chunk-GZ4QFPRY.js

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

package/libs/chunk-GZ4QFPRY.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/breadcrumbs/breadcrumb.tsx","../src/libs/content.ts"],"names":["React","Truncate","str","length","BreadcrumbItem","children","id","styles","classes","props","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":"gFACA,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,IAEIT,EAAA,cAAC,MACC,GAAIM,EACJ,MAAOC,EACP,UAAWC,EACX,YAAU,kBACT,GAAGC,GAEHJ,CACH,CAGN,EACAD,EAAe,YAAc,iBAS7B,IAAMM,EAAiBV,EAAM,KAC3B,CAAC,CAAE,SAAAK,EAAU,GAAGI,CAAM,IAElBT,EAAA,cAACW,EAAA,CAAG,GAAG,KAAK,YAAU,kBAAmB,GAAGF,GACzCJ,CACH,CAGN,EACAK,EAAe,YAAc,iBAS7B,IAAME,EAAgBZ,EAAM,KAC1B,CAAC,CACC,OAAAO,EACA,GAAAD,EACA,QAAAE,EACA,SAAAH,EACA,GAAGI,CACL,IAEIT,EAAA,cAACW,EAAA,CAAG,GAAG,MAAM,GAAIL,EAAI,OAAQC,EAAQ,UAAWC,EAAU,GAAGC,GAC3DT,EAAA,cAACU,EAAA,KAAgBL,CAAS,CAC5B,CAGN,EACAO,EAAc,YAAc,gBA0FrB,SAASC,EACdC,EACAC,EACA,CACA,IAAMC,EAAWhB,EAAM,QAAQ,IACxBc,EACEA,EAAa,MAAM,GAAG,EAAE,OAAQG,GAAYA,CAAO,EADhC,CAAC,EAE1B,CAACH,CAAY,CAAC,EAEXI,EAAmBlB,EAAM,YAC5BmB,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,EAAoBtB,EAAM,QAAQ,IAC/BgB,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,EAAS3B,EAAA,cAAAA,EAAA,cAAE,GAAK,EAChB,OAAAe,EACA,OAAAR,EACA,GAAAD,EACA,QAAAE,EACA,UAAAoB,EAAY,aACZ,eAAAC,EAAiB,GACjB,UAAAC,EACA,GAAGrB,CACL,IAAiD,CAC/C,GAAM,CAAE,SAAAO,EAAU,YAAAe,CAAY,EAAIlB,EAAsBC,EAAcC,CAAM,EACtEiB,EAAOhC,EAAM,MAAM,EAGzB,MAAI,CAACc,GAAc,QAAU,CAACiB,EACrB,KAIP/B,EAAA,cAACY,EAAA,CACC,GAAIN,EACJ,OAAQC,EACR,UAAWC,EACX,aAAYoB,EACX,GAAGnB,GAGJT,EAAA,cAACI,EAAA,CAAe,IAAK,SAAS4B,CAAI,IAChChC,EAAA,cAACiC,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,EAAgBtC,EAASqC,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,KAIPzC,EAAA,cAACI,EAAA,CAAe,IAAK,GAAGgC,CAAI,IAAIJ,CAAI,IAClChC,EAAA,cAAC,QAAK,cAAY,QAAQ2B,CAAO,EACjC3B,EAAA,cAAC,QACC,eAAa,OACb,aAAYwC,EAAiBF,EAAc,QAE1CC,CACH,CACF,CAEJ,CAGA,OACEvC,EAAA,cAACI,EAAA,CAAe,IAAK,GAAGgC,CAAI,IAAIJ,CAAI,IAClChC,EAAA,cAAC,QAAK,cAAY,QAAQ2B,CAAO,EACjC3B,EAAA,cAACiC,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,KAAOpB","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    return (\n      <li\n        id={id}\n        style={styles}\n        className={classes}\n        data-list=\"unstyled inline\"\n        {...props}\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-IYUN2EW3.cjs

@@ -1,15 +0,0 @@
-'use strict';
-
-var chunkS7BABR7Z_cjs = require('./chunk-S7BABR7Z.cjs');
-var R = require('react');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var R__default = /*#__PURE__*/_interopDefault(R);
-
-var m=({type:a="text",name:c,value:i,placeholder:d,id:f,styles:y,classes:I,isDisabled:p,disabled:t,readonly:r,required:n,ref:h,onChange:o,onBlur:l,onPointerDown:u,...E})=>{let x=e=>{o&&!t&&o?.(e);},v=e=>{l&&!t&&l?.(e);},P=e=>{u&&!t&&(e.preventDefault(),u?.(e));};return R__default.default.createElement(chunkS7BABR7Z_cjs.a,{as:"input",id:f,type:a,placeholder:d||`${n?"*":""} ${a} input `,className:I,styles:y,onChange:x,onBlur:v,onKeyDown:P,value:i,name:c,ref:h,"aria-disabled":p,tabIndex:p?-1:void 0,"aria-readonly":r,"aria-required":n,required:n,readOnly:r,...E})};m.displayName="Input";var F=m;
-
-exports.a = m;
-exports.b = F;
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-IYUN2EW3.cjs.map

package/libs/chunk-IYUN2EW3.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/form/inputs.tsx"],"names":["React","Input","type","name","value","placeholder","id","styles","classes","isDisabled","disabled","readonly","required","ref","onChange","onBlur","onPointerDown","props","handleChange","handleBlur","handleKeyDown","fp_default","inputs_default"],"mappings":"yCAAA,OAAOA,MAAW,QAeX,IAAMC,EAAQ,CAAC,CACpB,KAAAC,EAAO,OACP,KAAAC,EACA,MAAAC,EACA,YAAAC,EACA,GAAAC,EACA,OAAAC,EACA,QAAAC,EACA,WAAAC,EACA,SAAAC,EACA,SAAAC,EACA,SAAAC,EACA,IAAAC,EACA,SAAAC,EACA,OAAAC,EACA,cAAAC,EACA,GAAGC,CACL,IAA+B,CAC7B,IAAMC,EAAgB,GAA2C,CAC3DJ,GAAY,CAACJ,GACfI,IAAW,CAAC,CAEhB,EAEMK,EAAc,GAA0C,CACxDJ,GAAU,CAACL,GACbK,IAAS,CAAC,CAEd,EAEMK,EAAiB,GAA6C,CAC9DJ,GAAiB,CAACN,IACpB,EAAE,eAAe,EACjBM,IAAgB,CAAC,EAErB,EAEA,OACEhB,EAAA,cAACqB,EAAA,CACC,GAAG,QACH,GAAIf,EACJ,KAAMJ,EACN,YAAaG,GAAe,GAAGO,EAAW,IAAM,EAAE,IAAIV,CAAI,UAC1D,UAAWM,EACX,OAAQD,EACR,SAAUW,EACV,OAAQC,EACR,UAAWC,EACX,MAAOhB,EACP,KAAMD,EACN,IAAKU,EACL,gBAAeJ,EACf,SAAUA,EAAa,GAAK,OAC5B,gBAAeE,EACf,gBAAeC,EACf,SAAUA,EACV,SAAUD,EACT,GAAGM,EACN,CAEJ,EACAhB,EAAM,YAAc,QACpB,IAAOqB,EAAQrB","sourcesContent":["import React from \"react\";\nimport FP from \"../fp\";\n\nexport type InputProps = {\n  /**\n   * The type of the input.\n   */\n  type?: \"text\" | \"password\" | \"email\" | \"number\" | \"tel\" | \"url\" | \"search\";\n\n  /**\n   * Set the element as disabled\n   */\n  isDisabled?: boolean;\n} & React.ComponentProps<typeof FP>;\n\nexport const Input = ({\n  type = \"text\",\n  name,\n  value,\n  placeholder,\n  id,\n  styles,\n  classes,\n  isDisabled,\n  disabled,\n  readonly,\n  required,\n  ref,\n  onChange,\n  onBlur,\n  onPointerDown,\n  ...props\n}: InputProps): JSX.Element => {\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (onChange && !disabled) {\n      onChange?.(e);\n    }\n  };\n\n  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n    if (onBlur && !disabled) {\n      onBlur?.(e);\n    }\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (onPointerDown && !disabled) {\n      e.preventDefault();\n      onPointerDown?.(e);\n    }\n  };\n\n  return (\n    <FP\n      as=\"input\"\n      id={id}\n      type={type}\n      placeholder={placeholder || `${required ? \"*\" : \"\"} ${type} input `}\n      className={classes}\n      styles={styles}\n      onChange={handleChange}\n      onBlur={handleBlur}\n      onKeyDown={handleKeyDown}\n      value={value}\n      name={name}\n      ref={ref}\n      aria-disabled={isDisabled}\n      tabIndex={isDisabled ? -1 : undefined}\n      aria-readonly={readonly}\n      aria-required={required}\n      required={required}\n      readOnly={readonly}\n      {...props}\n    />\n  );\n};\nInput.displayName = \"Input\";\nexport default Input;\n"]}

package/libs/chunk-J32EZPYD.cjs

@@ -1,15 +0,0 @@
-'use strict';
-
-var chunkL75OQKEI_cjs = require('./chunk-L75OQKEI.cjs');
-var v = require('react');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var v__default = /*#__PURE__*/_interopDefault(v);
-
-var r=({type:a="button",children:i,styles:l,disabled:e,classes:u,onPointerDown:P,onPointerOver:c,onPointerLeave:p,onClick:s,...m})=>{let n=t=>{e||P?.(t);};return v__default.default.createElement(chunkL75OQKEI_cjs.a,{as:"button",type:a,onPointerOver:t=>{e||c?.(t);},onPointerDown:n,onPointerLeave:t=>{e||p?.(t);},onKeyDown:n,style:l,className:u,"aria-disabled":e,onClick:t=>{e||s?.(t);},...m},i)},L=r;r.displayName="Button";
-
-exports.a = r;
-exports.b = L;
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-J32EZPYD.cjs.map

package/libs/chunk-J32EZPYD.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/buttons/button.tsx"],"names":["React","Button","type","children","styles","disabled","classes","onPointerDown","onPointerOver","onPointerLeave","onClick","props","handlePointerDown","e","ui_default","button_default"],"mappings":"yCACA,OAAOA,MAAW,QAUX,IAAMC,EAAS,CAAC,CACrB,KAAAC,EAAO,SACP,SAAAC,EACA,OAAAC,EACA,SAAAC,EACA,QAAAC,EACA,cAAAC,EACA,cAAAC,EACA,eAAAC,EACA,QAAAC,EACA,GAAGC,CACL,IAAmB,CAMjB,IAAMC,EAAqBC,GAA6C,CACjER,GACHE,IAAgBM,CAAC,CAErB,EAqCA,OACEb,EAAA,cAACc,EAAA,CACC,GAAG,SACH,KAAMZ,EACN,cAlCuBW,GAA6C,CACjER,GACHG,IAAgBK,CAAC,CAErB,EA+BI,cAAeD,EACf,eAzBwBC,GAA6C,CAClER,GACHI,IAAiBI,CAAC,CAEtB,EAsBI,UAAWD,EACX,MAAOR,EACP,UAAWE,EACX,gBAAeD,EACf,QAnBmBQ,GAA2C,CAC3DR,GACFK,IAAUG,CAAC,CAEhB,EAgBK,GAAGF,GAEHR,CACH,CAGJ,EAEOY,EAAQd,EACfA,EAAO,YAAc","sourcesContent":["import UI from '../ui'\nimport React from 'react'\n\nexport type ButtonProps = Partial<React.ComponentProps<typeof UI>> & {\n    /**\n     * The button type\n     * Required - 'button' | 'submit' | 'reset'\n     */\n    type: 'button' | 'submit' | 'reset'\n  }\n\nexport const Button = ({\n  type = 'button',\n  children,\n  styles,\n  disabled,\n  classes,\n  onPointerDown,\n  onPointerOver,\n  onPointerLeave,\n  onClick,\n  ...props\n}: ButtonProps) => {\n  /**\n   * Handles the pointer down event on the button.\n   * Only triggers the onPointerDown callback if the button is not disabled.\n   * @param e The pointer event object from the button element\n   */\n  const handlePointerDown = (e: React.PointerEvent<HTMLButtonElement>) => {\n    if (!disabled) {\n      onPointerDown?.(e)\n    }\n  }\n\n  /**\n     * Handles the pointer over event on the button.\n     * Only triggers the onPointerOver callback if the button is not disabled.\n     * @param e The pointer event object from the button element\n     */\n  const handlePointerOver = (e: React.PointerEvent<HTMLButtonElement>) => {\n    if (!disabled) {\n      onPointerOver?.(e)\n    }\n  }\n\n  /**\n     * Handles the pointer leave event on the button.\n     * Only triggers the onPointerLeave callback if the button is not disabled.\n     * @param e The pointer event object from the button element\n     */\n  const handlePointerLeave = (e: React.PointerEvent<HTMLButtonElement>) => {\n    if (!disabled) {\n      onPointerLeave?.(e)\n    }\n  }\n\n  /**\n     * Handles the click event on the button.\n     * Only triggers the onClick callback if the button is not disabled.\n     * @param e The mouse event object from the button element\n     */\n  const handleOnClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n    if (!disabled) {\n       onClick?.(e)\n    }\n  }\n\n\n  /* Returning a button element. */\n  return (\n    <UI\n      as=\"button\"\n      type={type}\n      onPointerOver={handlePointerOver}\n      onPointerDown={handlePointerDown}\n      onPointerLeave={handlePointerLeave}\n      onKeyDown={handlePointerDown}\n      style={styles}\n      className={classes}\n      aria-disabled={disabled}\n      onClick={handleOnClick}\n      {...props}\n    >\n      {children}\n    </UI>\n  )\n  //\n}\n\nexport default Button\nButton.displayName = 'Button'\n"]}

package/libs/chunk-KUKIVRC2.js

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

package/libs/chunk-KUKIVRC2.js.map

@@ -1 +0,0 @@
-{"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,QA4SlB,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 *\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> =\n  React.ComponentPropsWithRef<C>[\"ref\"];\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 * @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>;\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-L75OQKEI.cjs.map

@@ -1 +0,0 @@
-{"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,QA4SlB,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 *\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> =\n  React.ComponentPropsWithRef<C>[\"ref\"];\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 * @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>;\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-M5RRNTVX.cjs

@@ -1,15 +0,0 @@
-'use strict';
-
-var chunkL75OQKEI_cjs = require('./chunk-L75OQKEI.cjs');
-var y = require('react');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var y__default = /*#__PURE__*/_interopDefault(y);
-
-var s=({id:p,classes:c,value:x,rows:m=5,cols:h=25,name:T,required:a,disabled:t,readOnly:i,onBlur:r,onPointerDown:n,onChange:o,ref:d,styles:f,placeholder:P,...u})=>y__default.default.createElement(chunkL75OQKEI_cjs.a,{as:"textarea",id:p,name:T,rows:m,cols:h,styles:f,className:c,"data-style":"textarea",required:a,value:x,"aria-disabled":t,readOnly:i,onChange:e=>{o&&!t&&o?.(e);},onBlur:e=>{r&&!t&&r?.(e);},onPointerDown:e=>{n&&!t&&n?.(e);},ref:d,placeholder:P||`${a?"*":""} Message`,...u}),M=s;s.displayName="Textarea";
-
-exports.a = s;
-exports.b = M;
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-M5RRNTVX.cjs.map

package/libs/chunk-M5RRNTVX.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/form/textarea.tsx"],"names":["React","Textarea","id","classes","value","rows","cols","name","required","disabled","readOnly","onBlur","onPointerDown","onChange","ref","styles","placeholder","props","ui_default","textarea_default"],"mappings":"yCAAA,OAAOA,MAAW,QAyBX,IAAMC,EAAW,CAAC,CACvB,GAAAC,EACA,QAAAC,EACA,MAAAC,EACA,KAAAC,EAAO,EACP,KAAAC,EAAO,GACP,KAAAC,EACA,SAAAC,EACA,SAAAC,EACA,SAAAC,EACA,OAAAC,EACA,cAAAC,EACA,SAAAC,EACA,IAAAC,EACA,OAAAC,EACA,YAAAC,EACA,GAAGC,CACL,IAoBIjB,EAAA,cAACkB,EAAA,CACC,GAAG,WACH,GAAIhB,EACJ,KAAMK,EACN,KAAMF,EACN,KAAMC,EACN,OAAQS,EACR,UAAWZ,EACX,aAAW,WACX,SAAUK,EACV,MAAOJ,EACP,gBAAeK,EACf,SAAUC,EACV,SAhCkB,GAA8C,CAC9DG,GAAY,CAACJ,GACfI,IAAW,CAAC,CAEhB,EA6BI,OA3BgB,GAA6C,CAC3DF,GAAU,CAACF,GACbE,IAAS,CAAC,CAEd,EAwBI,cAtBuB,GAA+C,CACpEC,GAAiB,CAACH,GACpBG,IAAgB,CAAC,CAErB,EAmBI,IAAKE,EACL,YAAaE,GAAe,GAAGR,EAAW,IAAM,EAAE,WACjD,GAAGS,EACN,EAIGE,EAAQlB,EACfA,EAAS,YAAc","sourcesContent":["import React from 'react'\nimport UI from '../ui'\n\nexport type TextareaProps = React.ComponentProps<'textarea'> &\n  React.ComponentProps<typeof UI>\n\n/**\n * Textarea component.\n *\n * @param value - The value of the textarea.\n * @param rows - The number of rows.\n * @param cols - The number of columns.\n * @param id - The id of the textarea.\n * @param name - The name of the textarea.\n * @param required - Whether the textarea is required.\n * @param disabled - Whether the textarea is disabled.\n * @param readOnly - Whether the textarea is read only.\n * @param onBlur - Blur event handler.\n * @param onPointerDown - Pointer down event handler.\n * @param onChange - Change event handler.\n * @param ref - Ref for the textarea.\n * @param styles - Styles object for the textarea.\n * @param textareaRef - Ref specifically for the textarea element.\n * @param props - Other props.\n */\nexport const Textarea = ({\n  id,\n  classes,\n  value,\n  rows = 5,\n  cols = 25,\n  name,\n  required,\n  disabled,\n  readOnly,\n  onBlur,\n  onPointerDown,\n  onChange,\n  ref,\n  styles,\n  placeholder,\n  ...props\n}: TextareaProps) => {\n  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n    if (onChange && !disabled) {\n      onChange?.(e)\n    }\n  }\n\n  const handleBlur = (e: React.FocusEvent<HTMLTextAreaElement>) => {\n    if (onBlur && !disabled) {\n      onBlur?.(e)\n    }\n  }\n\n  const handlePointerDown = (e: React.PointerEvent<HTMLTextAreaElement>) => {\n    if (onPointerDown && !disabled) {\n      onPointerDown?.(e)\n    }\n  }\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={classes}\n      data-style=\"textarea\"\n      required={required}\n      value={value}\n      aria-disabled={disabled}\n      readOnly={readOnly}\n      onChange={handleChange}\n      onBlur={handleBlur}\n      onPointerDown={handlePointerDown}\n      ref={ref}\n      placeholder={placeholder || `${required ? '*' : ''} Message`}\n      {...props}\n    />\n  )\n}\n\nexport default Textarea\nTextarea.displayName = 'Textarea'\n"]}

package/libs/chunk-OK5QEIMD.cjs

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