@fpkit/acss 1.0.0 → 2.0.0

package/README.md

@@ -551,6 +551,66 @@ Comprehensive guides to help you build accessible, maintainable applications wit
 **Testing components?**
 → Follow [Testing Guide](docs/guides/testing.md)
 
+## 🤖 Claude Code Skill
+
+Supercharge your development workflow with the **fpkit-developer** skill for Claude Code! This AI assistant skill helps you build applications using @fpkit/acss components with best practices baked in.
+
+### What the Skill Does
+
+- ✅ **Component Composition** - Get guidance on composing custom components from fpkit primitives
+- ✅ **CSS Variable Validation** - Automatically validate your custom styles against fpkit naming conventions
+- ✅ **Accessibility Assistance** - Maintain WCAG 2.1 Level AA compliance with automated checks
+- ✅ **TypeScript Support** - Type-safe component compositions with proper prop inheritance
+- ✅ **Testing Guidance** - Best practices for testing fpkit-based components
+
+### Quick Install
+
+### User-level installation (available in all projects)
+
+```bash
+npx gitpick shawn-sandy/acss/tree/main/.claude/skills/fpkit-developer ~/.claude/skills/fpkit-developer
+```
+
+### Project-specific installation
+
+```bash
+cd /path/to/your/project
+```
+
+```bash
+npx gitpick shawn-sandy/acss/tree/main/.claude/skills/fpkit-developer ./.claude/skills/fpkit-developer
+```
+
+**What is gitpick?** A lightweight tool (<35kb) for selective cloning from GitHub repositories. Learn more at [github.com/nrjdalal/gitpick](https://github.com/nrjdalal/gitpick).
+
+### Usage Examples
+
+Once installed, the skill activates automatically when working with @fpkit/acss:
+
+**Compose a Custom Component:**
+```
+You: "Create a StatusButton that combines Button and Badge from fpkit"
+Claude: [Provides composition with proper TypeScript types and accessibility]
+```
+
+**Validate Your Styles:**
+```
+You: "Check if my CSS variables follow fpkit conventions"
+Claude: [Validates naming patterns, units, and provides fixes]
+```
+
+**Ensure Accessibility:**
+```
+You: "Review this component for WCAG AA compliance"
+Claude: [Analyzes semantic HTML, ARIA, keyboard nav, and color contrast]
+```
+
+### Learn More
+
+- **[Full Skill Documentation](../../.claude/skills/fpkit-developer/README.md)** - Complete usage guide and examples
+- **[Reference Guides](../../.claude/skills/fpkit-developer/references/)** - Composition patterns, CSS variables, accessibility, and more
+- **Requirements:** Claude Code, @fpkit/acss installed in your project
+
 ## 🤝 Contributing
 
 We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.

package/libs/{chunk-7XPFW7CB.js → chunk-43TK2ICH.js}

@@ -1,4 +1,4 @@
-import { a as a$1 } from './chunk-OVWLQYMK.js';
+import { a as a$1 } from './chunk-KVKQLRJG.js';
 import { a } from './chunk-HHLNOC5T.js';
 import e from 'react';
 
@@ -6,4 +6,4 @@ var l=({id:n,children:a$1,classes:r,modalRef:d,openOnMount:i,...t})=>e.createEle
 
 export { u as a };
 //# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-7XPFW7CB.js.map
+//# sourceMappingURL=chunk-43TK2ICH.js.map

package/libs/chunk-5PJYLVFY.cjs

@@ -0,0 +1,17 @@
+'use strict';
+
+var chunkENTCUJ3A_cjs = require('./chunk-ENTCUJ3A.cjs');
+var o = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var o__default = /*#__PURE__*/_interopDefault(o);
+
+var i=o__default.default.forwardRef(({href:e,target:n,rel:r,children:t,styles:k,prefetch:s=!1,btnStyle:m,onClick:L,onPointerDown:d,...c},l)=>{let u=o__default.default.useMemo(()=>{if(n==="_blank"){let f=new Set(["noopener","noreferrer"]);return s&&f.add("prefetch"),r&&r.split(/\s+/).forEach(p=>{p&&f.add(p);}),Array.from(f).join(" ")}return r},[n,r,s]);return o__default.default.createElement(chunkENTCUJ3A_cjs.a,{as:"a",ref:l,href:e,target:n,rel:u,styles:k,"data-btn":m,onClick:L,onPointerDown:d,...c},t)}),y=o__default.default.forwardRef(({href:e,icon:n,...r},t)=>o__default.default.createElement(i,{ref:t,href:e,...r},n)),h=o__default.default.forwardRef(({href:e,children:n,...r},t)=>o__default.default.createElement(i,{ref:t,href:e,...r},n));y.displayName="IconLink";h.displayName="LinkButton";i.displayName="Link";var x=i;
+
+exports.a = i;
+exports.b = y;
+exports.c = h;
+exports.d = x;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-5PJYLVFY.cjs.map

package/libs/chunk-5PJYLVFY.cjs.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","IconLink","icon","LinkButton","link_default"],"mappings":"oCAAA,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,EAEaY,EAAWjB,EAAM,WAC5B,CAAC,CAAE,KAAAE,EAAM,KAAAgB,EAAM,GAAGP,CAAM,EAAGC,IAEvBZ,EAAA,cAACC,EAAA,CAAK,IAAKW,EAAK,KAAMV,EAAO,GAAGS,GAC7BO,CACH,CAGN,EAEaC,EAAanB,EAAM,WAC9B,CAAC,CAAE,KAAAE,EAAM,SAAAG,EAAU,GAAGM,CAAM,EAAGC,IAE3BZ,EAAA,cAACC,EAAA,CAAK,IAAKW,EAAK,KAAMV,EAAO,GAAGS,GAC7BN,CACH,CAGN,EAEAY,EAAS,YAAc,WACvBE,EAAW,YAAc,aACzBlB,EAAK,YAAc,OAEnB,IAAOmB,EAAQnB","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\nexport const IconLink = React.forwardRef<HTMLAnchorElement, LinkProps>(\n  ({ href, icon, ...props }, ref) => {\n    return (\n      <Link ref={ref} href={href} {...props}>\n        {icon}\n      </Link>\n    );\n  }\n);\n\nexport const LinkButton = React.forwardRef<HTMLAnchorElement, LinkProps>(\n  ({ href, children, ...props }, ref) => {\n    return (\n      <Link ref={ref} href={href} {...props}>\n        {children}\n      </Link>\n    );\n  }\n);\n\nIconLink.displayName = \"IconLink\";\nLinkButton.displayName = \"LinkButton\";\nLink.displayName = \"Link\";\n\nexport default Link;\n"]}

package/libs/chunk-E4OSROCA.cjs

@@ -0,0 +1,17 @@
+'use strict';
+
+var chunkPNWIRCG3_cjs = require('./chunk-PNWIRCG3.cjs');
+var chunkTON2YGMD_cjs = require('./chunk-TON2YGMD.cjs');
+var chunkENTCUJ3A_cjs = require('./chunk-ENTCUJ3A.cjs');
+var D = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var D__default = /*#__PURE__*/_interopDefault(D);
+
+var r=({type:a="button",children:n,styles:p,disabled:i,isDisabled:l,classes:m,onPointerDown:u,onPointerOver:d,onPointerLeave:b,onClick:P,onKeyDown:c,...y})=>{let B=chunkPNWIRCG3_cjs.a(i,l),{disabledProps:t,handlers:f}=chunkTON2YGMD_cjs.a(B,{handlers:{onClick:P,onPointerDown:u,onKeyDown:c},className:m});return D__default.default.createElement(chunkENTCUJ3A_cjs.a,{as:"button",type:a,"aria-disabled":t["aria-disabled"],onPointerOver:d,onPointerLeave:b,style:p,className:t.className,...f,...y},n)};var h=r;r.displayName="Button";
+
+exports.a = r;
+exports.b = h;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-E4OSROCA.cjs.map

package/libs/chunk-E4OSROCA.cjs.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":"2HACA,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,EAMA,IAAOiB,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 const IconButton = ({ icon, ...props }: ButtonProps) => {\n  return <Button {...props}>{icon}</Button>;\n};\n\nexport default Button;\nButton.displayName = \"Button\";\n"]}

package/libs/chunk-KVKQLRJG.js

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

package/libs/chunk-KVKQLRJG.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,EAMA,IAAOiB,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 const IconButton = ({ icon, ...props }: ButtonProps) => {\n  return <Button {...props}>{icon}</Button>;\n};\n\nexport default Button;\nButton.displayName = \"Button\";\n"]}

package/libs/{chunk-QVW6W76L.cjs → chunk-MGPWZRBX.cjs}

@@ -2,7 +2,7 @@
 
 var chunk2NRIP6RB_cjs = require('./chunk-2NRIP6RB.cjs');
 var chunk6WTC4JXH_cjs = require('./chunk-6WTC4JXH.cjs');
-var chunkGT77BX4L_cjs = require('./chunk-GT77BX4L.cjs');
+var chunkE4OSROCA_cjs = require('./chunk-E4OSROCA.cjs');
 var chunkENTCUJ3A_cjs = require('./chunk-ENTCUJ3A.cjs');
 var s = require('react');
 
@@ -10,9 +10,9 @@ 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);
+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(chunkE4OSROCA_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(chunkE4OSROCA_cjs.b,{type:"button",onClick:a,className:"dialog-button button-secondary","data-btn":"sm"},e),o&&s__default.default.createElement(chunkE4OSROCA_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
+//# sourceMappingURL=chunk-MGPWZRBX.cjs.map

package/libs/chunk-NNTBIHSD.js

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

package/libs/chunk-NNTBIHSD.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","IconLink","icon","LinkButton","link_default"],"mappings":"mCAAA,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,EAEaY,EAAWjB,EAAM,WAC5B,CAAC,CAAE,KAAAE,EAAM,KAAAgB,EAAM,GAAGP,CAAM,EAAGC,IAEvBZ,EAAA,cAACC,EAAA,CAAK,IAAKW,EAAK,KAAMV,EAAO,GAAGS,GAC7BO,CACH,CAGN,EAEaC,EAAanB,EAAM,WAC9B,CAAC,CAAE,KAAAE,EAAM,SAAAG,EAAU,GAAGM,CAAM,EAAGC,IAE3BZ,EAAA,cAACC,EAAA,CAAK,IAAKW,EAAK,KAAMV,EAAO,GAAGS,GAC7BN,CACH,CAGN,EAEAY,EAAS,YAAc,WACvBE,EAAW,YAAc,aACzBlB,EAAK,YAAc,OAEnB,IAAOmB,EAAQnB","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\nexport const IconLink = React.forwardRef<HTMLAnchorElement, LinkProps>(\n  ({ href, icon, ...props }, ref) => {\n    return (\n      <Link ref={ref} href={href} {...props}>\n        {icon}\n      </Link>\n    );\n  }\n);\n\nexport const LinkButton = React.forwardRef<HTMLAnchorElement, LinkProps>(\n  ({ href, children, ...props }, ref) => {\n    return (\n      <Link ref={ref} href={href} {...props}>\n        {children}\n      </Link>\n    );\n  }\n);\n\nIconLink.displayName = \"IconLink\";\nLinkButton.displayName = \"LinkButton\";\nLink.displayName = \"Link\";\n\nexport default Link;\n"]}

package/libs/{chunk-X3JCTEPD.js → chunk-QKHPHMG2.js}

@@ -1,6 +1,6 @@
 import { b } from './chunk-ZFJ4U45S.js';
 import { b as b$2 } from './chunk-5QD3DWFI.js';
-import { b as b$1 } from './chunk-OVWLQYMK.js';
+import { b as b$1 } from './chunk-KVKQLRJG.js';
 import { a } from './chunk-HHLNOC5T.js';
 import s, { useCallback, useRef, useId, useEffect } from 'react';
 
@@ -8,4 +8,4 @@ var y=({dialogTitle:t,onClick:o,id:l,type:e="h3"})=>{let a$1=useCallback(()=>{o(
 
 export { F as a, ao as b };
 //# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-X3JCTEPD.js.map
+//# sourceMappingURL=chunk-QKHPHMG2.js.map

package/libs/{chunk-T4T6GWYQ.cjs → chunk-R7NLLZU2.cjs}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunk33PNJ4LO_cjs = require('./chunk-33PNJ4LO.cjs');
+var chunk5PJYLVFY_cjs = require('./chunk-5PJYLVFY.cjs');
 var chunkENTCUJ3A_cjs = require('./chunk-ENTCUJ3A.cjs');
 var e = require('react');
 
@@ -8,10 +8,10 @@ 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;
+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(chunk5PJYLVFY_cjs.d,{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(chunk5PJYLVFY_cjs.d,{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
+//# sourceMappingURL=chunk-R7NLLZU2.cjs.map

package/libs/{chunk-X5LGFCWG.js → chunk-UJAQVHWC.js}

@@ -1,9 +1,9 @@
-import { b } from './chunk-UEPAWMDF.js';
+import { d } from './chunk-NNTBIHSD.js';
 import { a } from './chunk-HHLNOC5T.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:s,classes:a,...m})=>{let{renderStyles:n,defaultStyles:o,as:d,ref:I,...p}=m;return e.createElement("li",{id:t,style:s,className:a,"data-list":"unstyled inline",...p},r)});i.displayName="BreadcrumbItem";var y=e.memo(({children:r,...t})=>e.createElement(a,{as:"ol","data-list":"unstyled inline",...t},r));y.displayName="BreadcrumbList";var B=e.memo(({styles:r,id:t,classes:s,children:a$1,...m})=>e.createElement(a,{as:"nav",id:t,styles:r,className:s,...m},e.createElement(y,null,a$1)));B.displayName="BreadcrumbNav";function w(r,t){let s=e.useMemo(()=>r?r.split("/").filter(n=>n):[],[r]),a=e.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.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.createElement(e.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$1=e.useId();return !s?.length||!v?null:e.createElement(B,{id:o,styles:n,className:d,"aria-label":I,...k},e.createElement(i,{key:`start-${b$1}`},e.createElement(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.createElement(i,{key:`${u}-${b$1}`},e.createElement("span",{"aria-hidden":"true"},a),e.createElement("span",{"aria-current":"page","aria-label":P?c:void 0},C))}return e.createElement(i,{key:`${u}-${b$1}`},e.createElement("span",{"aria-hidden":"true"},a),e.createElement(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;
+var U=(r,t=15)=>r.length>t?`${r.slice(0,t)}...`:r;var i=e.memo(({children:r,id:t,styles:s,classes:a,...m})=>{let{renderStyles:n,defaultStyles:o,as:d,ref:I,...p}=m;return e.createElement("li",{id:t,style:s,className:a,"data-list":"unstyled inline",...p},r)});i.displayName="BreadcrumbItem";var y=e.memo(({children:r,...t})=>e.createElement(a,{as:"ol","data-list":"unstyled inline",...t},r));y.displayName="BreadcrumbList";var B=e.memo(({styles:r,id:t,classes:s,children:a$1,...m})=>e.createElement(a,{as:"nav",id:t,styles:r,className:s,...m},e.createElement(y,null,a$1)));B.displayName="BreadcrumbNav";function w(r,t){let s=e.useMemo(()=>r?r.split("/").filter(n=>n):[],[r]),a=e.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.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.createElement(e.Fragment,null,"/"),routes:m,styles:n,id:o,classes:d$1,ariaLabel:I="Breadcrumb",truncateLength:p=15,linkProps:N,...k})=>{let{segments:L,hasSegments:v}=w(s,m),b=e.useId();return !s?.length||!v?null:e.createElement(B,{id:o,styles:n,className:d$1,"aria-label":I,...k},e.createElement(i,{key:`start-${b}`},e.createElement(d,{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.createElement(i,{key:`${u}-${b}`},e.createElement("span",{"aria-hidden":"true"},a),e.createElement("span",{"aria-current":"page","aria-label":P?c:void 0},C))}return e.createElement(i,{key:`${u}-${b}`},e.createElement("span",{"aria-hidden":"true"},a),e.createElement(d,{href:x,"aria-label":P?c:void 0,...N},C))}))},H=l;l.displayName="Breadcrumb";l.Nav=B;l.List=y;l.Item=i;
 
 export { w as a, l as b, H as c };
 //# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-X5LGFCWG.js.map
+//# sourceMappingURL=chunk-UJAQVHWC.js.map

package/libs/{chunk-DKTHCQ5P.cjs → chunk-X5RKCLDC.cjs}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkGT77BX4L_cjs = require('./chunk-GT77BX4L.cjs');
+var chunkE4OSROCA_cjs = require('./chunk-E4OSROCA.cjs');
 var chunkENTCUJ3A_cjs = require('./chunk-ENTCUJ3A.cjs');
 var e = require('react');
 
@@ -8,8 +8,8 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var e__default = /*#__PURE__*/_interopDefault(e);
 
-var l=({id:n,children:a,classes:r,modalRef:d,openOnMount:i,...t})=>e__default.default.createElement(chunkENTCUJ3A_cjs.a,{as:"dialog",id:n,classes:r,ref:d,open:i,onClick:o=>{o.currentTarget===o.target&&o.currentTarget.close();},...t},a);e__default.default.memo(l);l.displayName="Dialog";var u=({openChild:n,closeChild:a,modalHeader:r,modalFooter:d,children:i,showOpen:t=!1,...p})=>{let o=e__default.default.useRef(null),f=()=>{o.current&&(t?o.current.show():o.current.showModal());},M=()=>{o.current&&o.current.close();};return e__default.default.createElement(e__default.default.Fragment,null,e__default.default.createElement(l,{modalRef:o,openOnMount:t,...p},e__default.default.createElement("section",null,r,i,d??e__default.default.createElement("div",null,e__default.default.createElement(chunkGT77BX4L_cjs.a,{type:"button",pointerDown:()=>{M();}},a||"Close")," "))),!t&&e__default.default.createElement(chunkGT77BX4L_cjs.a,{type:"button",pointerDown:f},n||"Open Modal"))};u.displayName="Modal";
+var l=({id:n,children:a,classes:r,modalRef:d,openOnMount:i,...t})=>e__default.default.createElement(chunkENTCUJ3A_cjs.a,{as:"dialog",id:n,classes:r,ref:d,open:i,onClick:o=>{o.currentTarget===o.target&&o.currentTarget.close();},...t},a);e__default.default.memo(l);l.displayName="Dialog";var u=({openChild:n,closeChild:a,modalHeader:r,modalFooter:d,children:i,showOpen:t=!1,...p})=>{let o=e__default.default.useRef(null),f=()=>{o.current&&(t?o.current.show():o.current.showModal());},M=()=>{o.current&&o.current.close();};return e__default.default.createElement(e__default.default.Fragment,null,e__default.default.createElement(l,{modalRef:o,openOnMount:t,...p},e__default.default.createElement("section",null,r,i,d??e__default.default.createElement("div",null,e__default.default.createElement(chunkE4OSROCA_cjs.a,{type:"button",pointerDown:()=>{M();}},a||"Close")," "))),!t&&e__default.default.createElement(chunkE4OSROCA_cjs.a,{type:"button",pointerDown:f},n||"Open Modal"))};u.displayName="Modal";
 
 exports.a = u;
 //# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-DKTHCQ5P.cjs.map
+//# sourceMappingURL=chunk-X5RKCLDC.cjs.map

package/libs/components/breadcrumbs/breadcrumb.cjs

@@ -2,23 +2,23 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var chunkT4T6GWYQ_cjs = require('../../chunk-T4T6GWYQ.cjs');
-require('../../chunk-33PNJ4LO.cjs');
+var chunkR7NLLZU2_cjs = require('../../chunk-R7NLLZU2.cjs');
+require('../../chunk-5PJYLVFY.cjs');
 require('../../chunk-ENTCUJ3A.cjs');
 
 
 
 Object.defineProperty(exports, 'Breadcrumb', {
 	enumerable: true,
-	get: function () { return chunkT4T6GWYQ_cjs.b; }
+	get: function () { return chunkR7NLLZU2_cjs.b; }
 });
 Object.defineProperty(exports, 'default', {
 	enumerable: true,
-	get: function () { return chunkT4T6GWYQ_cjs.c; }
+	get: function () { return chunkR7NLLZU2_cjs.c; }
 });
 Object.defineProperty(exports, 'useBreadcrumbSegments', {
 	enumerable: true,
-	get: function () { return chunkT4T6GWYQ_cjs.a; }
+	get: function () { return chunkR7NLLZU2_cjs.a; }
 });
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=breadcrumb.cjs.map

package/libs/components/breadcrumbs/breadcrumb.d.cts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { U as UI } from '../../ui-d01b50d4.js';
-import { L as Link } from '../../link-5192f411.js';
+import Link from '../link/link.cjs';
 
 /**
  * Represents a route segment in the breadcrumb navigation.

package/libs/components/breadcrumbs/breadcrumb.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { U as UI } from '../../ui-d01b50d4.js';
-import { L as Link } from '../../link-5192f411.js';
+import Link from '../link/link.js';
 
 /**
  * Represents a route segment in the breadcrumb navigation.

package/libs/components/breadcrumbs/breadcrumb.js

@@ -1,5 +1,5 @@
-export { b as Breadcrumb, c as default, a as useBreadcrumbSegments } from '../../chunk-X5LGFCWG.js';
-import '../../chunk-UEPAWMDF.js';
+export { b as Breadcrumb, c as default, a as useBreadcrumbSegments } from '../../chunk-UJAQVHWC.js';
+import '../../chunk-NNTBIHSD.js';
 import '../../chunk-HHLNOC5T.js';
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=breadcrumb.js.map

package/libs/components/button.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var chunkGT77BX4L_cjs = require('../chunk-GT77BX4L.cjs');
+var chunkE4OSROCA_cjs = require('../chunk-E4OSROCA.cjs');
 require('../chunk-PNWIRCG3.cjs');
 require('../chunk-TON2YGMD.cjs');
 require('../chunk-ENTCUJ3A.cjs');
@@ -11,11 +11,11 @@ require('../chunk-ENTCUJ3A.cjs');
 
 Object.defineProperty(exports, 'Button', {
 	enumerable: true,
-	get: function () { return chunkGT77BX4L_cjs.a; }
+	get: function () { return chunkE4OSROCA_cjs.a; }
 });
 Object.defineProperty(exports, 'default', {
 	enumerable: true,
-	get: function () { return chunkGT77BX4L_cjs.b; }
+	get: function () { return chunkE4OSROCA_cjs.b; }
 });
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=button.cjs.map

package/libs/components/button.d.cts

@@ -46,7 +46,7 @@ type ButtonProps = Partial<React$1.ComponentProps<typeof UI>> & DisabledStatePro
      * The button type
      * Required - 'button' | 'submit' | 'reset'
      */
-    type: 'button' | 'submit' | 'reset';
+    type: "button" | "submit" | "reset";
 };
 /**
  * Accessible Button component with WCAG 2.1 Level AA compliant disabled state.

package/libs/components/button.d.ts

@@ -46,7 +46,7 @@ type ButtonProps = Partial<React$1.ComponentProps<typeof UI>> & DisabledStatePro
      * The button type
      * Required - 'button' | 'submit' | 'reset'
      */
-    type: 'button' | 'submit' | 'reset';
+    type: "button" | "submit" | "reset";
 };
 /**
  * Accessible Button component with WCAG 2.1 Level AA compliant disabled state.

package/libs/components/button.js

@@ -1,4 +1,4 @@
-export { a as Button, b as default } from '../chunk-OVWLQYMK.js';
+export { a as Button, b as default } from '../chunk-KVKQLRJG.js';
 import '../chunk-BFK62VX5.js';
 import '../chunk-75QHTLFO.js';
 import '../chunk-HHLNOC5T.js';

package/libs/components/dialog/dialog.cjs

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var chunkQVW6W76L_cjs = require('../../chunk-QVW6W76L.cjs');
+var chunkMGPWZRBX_cjs = require('../../chunk-MGPWZRBX.cjs');
 require('../../chunk-2NRIP6RB.cjs');
 require('../../chunk-6WTC4JXH.cjs');
-require('../../chunk-GT77BX4L.cjs');
+require('../../chunk-E4OSROCA.cjs');
 require('../../chunk-PNWIRCG3.cjs');
 require('../../chunk-TON2YGMD.cjs');
 require('../../chunk-ENTCUJ3A.cjs');
@@ -14,11 +14,11 @@ require('../../chunk-ENTCUJ3A.cjs');
 
 Object.defineProperty(exports, 'Dialog', {
 	enumerable: true,
-	get: function () { return chunkQVW6W76L_cjs.a; }
+	get: function () { return chunkMGPWZRBX_cjs.a; }
 });
 Object.defineProperty(exports, 'default', {
 	enumerable: true,
-	get: function () { return chunkQVW6W76L_cjs.b; }
+	get: function () { return chunkMGPWZRBX_cjs.b; }
 });
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=dialog.cjs.map

package/libs/components/dialog/dialog.js

@@ -1,7 +1,7 @@
-export { a as Dialog, b as default } from '../../chunk-X3JCTEPD.js';
+export { a as Dialog, b as default } from '../../chunk-QKHPHMG2.js';
 import '../../chunk-ZFJ4U45S.js';
 import '../../chunk-5QD3DWFI.js';
-import '../../chunk-OVWLQYMK.js';
+import '../../chunk-KVKQLRJG.js';
 import '../../chunk-BFK62VX5.js';
 import '../../chunk-75QHTLFO.js';
 import '../../chunk-HHLNOC5T.js';

package/libs/components/link/link.cjs

@@ -2,18 +2,26 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var chunk33PNJ4LO_cjs = require('../../chunk-33PNJ4LO.cjs');
+var chunk5PJYLVFY_cjs = require('../../chunk-5PJYLVFY.cjs');
 require('../../chunk-ENTCUJ3A.cjs');
 
 
 
+Object.defineProperty(exports, 'IconLink', {
+	enumerable: true,
+	get: function () { return chunk5PJYLVFY_cjs.b; }
+});
 Object.defineProperty(exports, 'Link', {
 	enumerable: true,
-	get: function () { return chunk33PNJ4LO_cjs.a; }
+	get: function () { return chunk5PJYLVFY_cjs.a; }
+});
+Object.defineProperty(exports, 'LinkButton', {
+	enumerable: true,
+	get: function () { return chunk5PJYLVFY_cjs.c; }
 });
 Object.defineProperty(exports, 'default', {
 	enumerable: true,
-	get: function () { return chunk33PNJ4LO_cjs.b; }
+	get: function () { return chunk5PJYLVFY_cjs.d; }
 });
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=link.cjs.map