@fpkit/acss 1.0.0 → 2.0.0

package/src/docs/fpkit-developer.mdx

@@ -6,7 +6,8 @@ import { Meta } from "@storybook/addon-docs/blocks";
 
 **Build applications with @fpkit/acss using Claude Code assistance**
 
-A portable Claude Code skill for developers using the @fpkit/acss component library in their applications.
+A portable Claude Code skill for developers using the @fpkit/acss component
+library in their applications.
 
 ---
 
@@ -14,11 +15,10 @@ A portable Claude Code skill for developers using the @fpkit/acss component libr
 
 This skill helps you:
 
-✅ **Compose custom components** from fpkit primitives
-✅ **Validate CSS variables** against fpkit conventions
-✅ **Maintain accessibility** (WCAG 2.1 Level AA)
-✅ **Follow best practices** for component composition
-✅ **TypeScript support** for type-safe compositions
+✅ **Compose custom components** from fpkit primitives ✅ **Validate CSS
+variables** against fpkit conventions ✅ **Maintain accessibility** (WCAG 2.1
+Level AA) ✅ **Follow best practices** for component composition ✅ **TypeScript
+support** for type-safe compositions
 
 ---
 
@@ -43,6 +43,36 @@ ls ~/.claude/skills/fpkit-developer/
 # Should show: README.md  SKILL.md  references/  scripts/
 ```
 
+### Option 3: Install via gitpick (Recommended)
+
+The fastest and easiest way to install directly from GitHub:
+
+### 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
+```
+
+**Why gitpick?**
+
+- ✅ Single command - no ZIP download or extraction
+- ✅ Selective cloning - only downloads the skill folder
+- ✅ Zero dependencies - lightweight and fast (`<35kb`)
+- ✅ Always up-to-date - pulls latest version from GitHub
+
+**Learn more:**
+[github.com/nrjdalal/gitpick](https://github.com/nrjdalal/gitpick)
+
 3. **Restart Claude Code** to load the skill.
 
 ### Option 2: Clone from GitHub (Future)
@@ -79,9 +109,11 @@ pnpm add @fpkit/acss
 
 ### Activating the Skill
 
-The skill activates automatically when you're working in a project using @fpkit/acss.
+The skill activates automatically when you're working in a project using
+@fpkit/acss.
 
 **Trigger phrases:**
+
 - "Build a custom component using fpkit"
 - "Create a [component name] with @fpkit/acss"
 - "Compose a [feature] from fpkit components"
@@ -92,29 +124,37 @@ The skill activates automatically when you're working in a project using @fpkit/
 #### Example 1: Composing a StatusButton
 
 **You:**
+
 > Create a StatusButton component that combines Button and Badge from fpkit
 
 **Claude Code:**
+
 > I'll help you create a StatusButton by composing fpkit components.
 >
 > ```tsx
-> import { Button, Badge } from '@fpkit/acss'
+> import { Button, Badge } from "@fpkit/acss";
 >
-> export interface StatusButtonProps extends React.ComponentProps<typeof Button> {
->   status: 'active' | 'inactive' | 'pending'
+> export interface StatusButtonProps
+>   extends React.ComponentProps<typeof Button> {
+>   status: "active" | "inactive" | "pending";
 > }
 >
-> export const StatusButton = ({ status, children, ...props }: StatusButtonProps) => {
+> export const StatusButton = ({
+>   status,
+>   children,
+>   ...props
+> }: StatusButtonProps) => {
 >   return (
 >     <Button {...props}>
 >       {children}
 >       <Badge variant={status}>{status}</Badge>
 >     </Button>
->   )
-> }
+>   );
+> };
 > ```
 >
 > This composition:
+>
 > - ✅ Extends Button props with TypeScript
 > - ✅ Preserves all fpkit Button functionality
 > - ✅ Maintains accessibility (ARIA, keyboard support)
@@ -123,17 +163,19 @@ The skill activates automatically when you're working in a project using @fpkit/
 #### Example 2: Custom Styling
 
 **You:**
+
 > How do I customize the button padding in my StatusButton?
 
 **Claude Code:**
+
 > You can customize fpkit components using CSS variables:
 >
 > ```tsx
 > <StatusButton
 >   status="active"
 >   style={{
->     '--btn-padding-inline': '2rem',
->     '--btn-padding-block': '1rem',
+>     "--btn-padding-inline": "2rem",
+>     "--btn-padding-block": "1rem",
 >   }}
 > >
 >   Server Status
@@ -155,37 +197,38 @@ The skill activates automatically when you're working in a project using @fpkit/
 #### Example 3: Accessibility Check
 
 **You:**
+
 > Is this component accessible?
 
 **Claude Code:**
+
 > Let me check accessibility:
 >
-> ✅ Uses semantic Button element
-> ✅ Inherits keyboard navigation
-> ✅ Maintains focus indicators
-> ⚠️  Add `aria-label` if using icon-only button
+> ✅ Uses semantic Button element ✅ Inherits keyboard navigation ✅ Maintains
+> focus indicators ⚠️ Add `aria-label` if using icon-only button
 >
 > Example with accessibility:
+>
 > ```tsx
-> <StatusButton
->   status="active"
->   aria-label="Server status: active"
-> >
+> <StatusButton status="active" aria-label="Server status: active">
 >   <ServerIcon aria-hidden="true" />
 > </StatusButton>
 > ```
 >
 > Run automated testing:
+>
 > ```tsx
-> import { axe, toHaveNoViolations } from 'jest-axe'
+> import { axe, toHaveNoViolations } from "jest-axe";
 >
-> expect.extend(toHaveNoViolations)
+> expect.extend(toHaveNoViolations);
 >
-> it('should not have accessibility violations', async () => {
->   const { container } = render(<StatusButton status="active">Server</StatusButton>)
->   const results = await axe(container)
->   expect(results).toHaveNoViolations()
-> })
+> it("should not have accessibility violations", async () => {
+>   const { container } = render(
+>     <StatusButton status="active">Server</StatusButton>
+>   );
+>   const results = await axe(container);
+>   expect(results).toHaveNoViolations();
+> });
 > ```
 
 ---
@@ -226,10 +269,12 @@ python ~/.claude/skills/fpkit-developer/scripts/validate_css_vars.py .
 ```
 
 **What it checks:**
+
 - ✅ Naming pattern: `--{component}-{property}`
 - ✅ rem units (not px)
 - ✅ Approved abbreviations: `bg`, `fs`, `fw`, `radius`, `gap`
-- ✅ Full words for: `padding`, `margin`, `color`, `border`, `display`, `width`, `height`
+- ✅ Full words for: `padding`, `margin`, `color`, `border`, `display`, `width`,
+  `height`
 
 ### 3. Reference Documentation
 
@@ -256,6 +301,7 @@ cat ~/.claude/skills/fpkit-developer/references/storybook.md
 ```
 
 Or ask Claude Code to reference them:
+
 > "Show me composition patterns from the fpkit skill"
 
 ### 4. Documentation Sync
@@ -274,12 +320,13 @@ Keep documentation up-to-date with the latest fpkit guides:
 ```
 
 **When to sync:**
+
 - After updating @fpkit/acss to a new version
 - When fpkit documentation is updated
 - Periodically to ensure you have the latest patterns and examples
 
-**Configuration:**
-Edit `config.json` to customize documentation source:
+**Configuration:** Edit `config.json` to customize documentation source:
+
 - `docsSource`: "local" (default) or "online"
 - `onlineDocsUrl`: GitHub raw URL for online fallback
 - `fpkitDocsPath`: Relative path to fpkit docs in monorepo
@@ -309,10 +356,11 @@ fpkit-developer/
 
 ## Compatibility
 
-- **@fpkit/acss:** v1.x
+- **@fpkit/acss:** v1.0.0+
 - **Claude Code:** Latest version
 - **Python:** 3.7+ (for validation script)
-- **Node.js:** 18+ (for npm package)
+- **Node.js:** 22.12.0+ (for npm package)
+- **Storybook:** 10.x (if using in monorepo)
 
 ---
 
@@ -321,33 +369,43 @@ fpkit-developer/
 The skill knows about these fpkit components:
 
 **Layout:**
+
 - Header, Main, Footer, Aside, Nav
 
 **Content:**
+
 - Heading, Text, Badge, Tag
 
 **Forms:**
+
 - Input, Field, FieldLabel, FieldInput, FieldTextarea
 
 **Buttons & Actions:**
+
 - Button
 
 **Cards:**
+
 - Card, CardHeader, CardTitle, CardContent, CardFooter
 
 **Dialogs:**
+
 - Dialog, Modal
 
 **Feedback:**
+
 - Alert
 
 **Data Display:**
+
 - Table, List
 
 **Interactive:**
+
 - Details, Popover
 
 **Icons:**
+
 - Icon library
 
 ---
@@ -357,34 +415,36 @@ The skill knows about these fpkit components:
 ### Workflow 1: Build a Custom Component
 
 1. **Describe what you want:**
-   > "Create a ConfirmButton that shows a confirmation dialog before executing an action"
+
+   > "Create a ConfirmButton that shows a confirmation dialog before executing
+   > an action"
 
 2. **Claude Code identifies fpkit components:**
+
    - Button (for the trigger)
    - Dialog (for the confirmation modal)
 
 3. **Composes solution:**
+
    ```tsx
-   import { Button, Dialog } from '@fpkit/acss'
-   import { useState } from 'react'
+   import { Button, Dialog } from "@fpkit/acss";
+   import { useState } from "react";
 
    export const ConfirmButton = ({ onConfirm, children, ...props }) => {
-     const [showConfirm, setShowConfirm] = useState(false)
+     const [showConfirm, setShowConfirm] = useState(false);
      // ... implementation
-   }
+   };
    ```
 
 4. **Validates accessibility:**
+
    - Keyboard navigation ✅
    - ARIA attributes ✅
    - Focus management ✅
 
 5. **Provides usage example:**
    ```tsx
-   <ConfirmButton
-     variant="danger"
-     onConfirm={handleDelete}
-   >
+   <ConfirmButton variant="danger" onConfirm={handleDelete}>
      Delete Account
    </ConfirmButton>
    ```
@@ -392,9 +452,11 @@ The skill knows about these fpkit components:
 ### Workflow 2: Customize Styling
 
 1. **Ask about customization:**
+
    > "How do I make the buttons larger and change the primary color?"
 
 2. **Claude Code provides CSS variable solution:**
+
    ```css
    :root {
      --btn-padding-inline: 2rem;
@@ -412,9 +474,11 @@ The skill knows about these fpkit components:
 ### Workflow 3: Ensure Accessibility
 
 1. **Request accessibility review:**
+
    > "Check if my component is accessible"
 
 2. **Claude Code reviews:**
+
    - Semantic HTML ✅
    - Keyboard navigation ✅
    - ARIA attributes ⚠️ (suggests improvements)
@@ -422,7 +486,7 @@ The skill knows about these fpkit components:
 
 3. **Suggests automated testing:**
    ```tsx
-   import { axe, toHaveNoViolations } from 'jest-axe'
+   import { axe, toHaveNoViolations } from "jest-axe";
    // ... test code
    ```
 
@@ -433,24 +497,29 @@ The skill knows about these fpkit components:
 The skill helps you follow these best practices:
 
 ### ✅ Composition Over Duplication
+
 - Reuse fpkit components instead of creating from scratch
 - Compose 2-3 fpkit components to build complex UIs
 
 ### ✅ Type Safety
+
 - Extend fpkit prop types with TypeScript
 - Preserve all fpkit functionality with `...props` spreading
 
 ### ✅ Accessibility
+
 - Maintain ARIA attributes from fpkit
 - Support keyboard navigation
 - Ensure color contrast meets WCAG AA
 
 ### ✅ Styling Conventions
+
 - Use CSS variables for customization
 - Use rem units (not px)
 - Follow naming pattern: `--{component}-{property}`
 
 ### ✅ Testing
+
 - Focus on testing your composition logic
 - Trust fpkit's internal testing
 - Use jest-axe for accessibility testing
@@ -462,6 +531,7 @@ The skill helps you follow these best practices:
 ### Skill Not Activating
 
 1. **Check installation path:**
+
    ```bash
    ls ~/.claude/skills/fpkit-developer/SKILL.md
    ```
@@ -476,11 +546,13 @@ The skill helps you follow these best practices:
 ### Validation Script Not Working
 
 1. **Check Python version:**
+
    ```bash
    python --version  # Should be 3.7+
    ```
 
 2. **Make script executable:**
+
    ```bash
    chmod +x ~/.claude/skills/fpkit-developer/scripts/validate_css_vars.py
    ```
@@ -508,7 +580,8 @@ cat ~/.claude/skills/fpkit-developer/references/composition.md
 
 This skill is part of the @fpkit/acss project. To suggest improvements:
 
-1. **Report issues:** [GitHub Issues](https://github.com/shawn-sandy/acss/issues)
+1. **Report issues:**
+   [GitHub Issues](https://github.com/shawn-sandy/acss/issues)
 2. **Suggest features:** Open a discussion on GitHub
 3. **Contribute code:** Submit a pull request
 
@@ -517,13 +590,19 @@ This skill is part of the @fpkit/acss project. To suggest improvements:
 ## Resources
 
 ### Official Documentation
-- **[fpkit Docs](https://github.com/shawn-sandy/acss/tree/main/packages/fpkit/docs)** - Complete documentation
+
+- **[fpkit Docs](https://github.com/shawn-sandy/acss/tree/main/packages/fpkit/docs)** -
+  Complete documentation
 - **[Storybook](https://fpkit.netlify.app/)** - Interactive component examples
-- **[npm Package](https://www.npmjs.com/package/@fpkit/acss)** - Installation and API reference
+- **[npm Package](https://www.npmjs.com/package/@fpkit/acss)** - Installation
+  and API reference
 
 ### Learning Resources
-- **[WCAG 2.1 Guidelines](https://www.w3.org/WAI/WCAG21/quickref/)** - Accessibility standards
-- **[React TypeScript Cheatsheet](https://react-typescript-cheatsheet.netlify.app/)** - TypeScript patterns
+
+- **[WCAG 2.1 Guidelines](https://www.w3.org/WAI/WCAG21/quickref/)** -
+  Accessibility standards
+- **[React TypeScript Cheatsheet](https://react-typescript-cheatsheet.netlify.app/)** -
+  TypeScript patterns
 - **[Testing Library](https://testing-library.com/)** - Testing best practices
 
 ---
@@ -536,9 +615,8 @@ MIT License - Same as @fpkit/acss
 
 ## Version
 
-**Skill Version:** 1.0.0
-**Compatible with:** @fpkit/acss v1.x
-**Last Updated:** 2025-01-06
+**Skill Version:** 1.0.0 **Compatible with:** @fpkit/acss v1.0.0+ **Last
+Updated:** 2025-11-15
 
 ---
 

package/libs/chunk-33PNJ4LO.cjs

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

package/libs/chunk-33PNJ4LO.cjs.map

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

package/libs/chunk-GT77BX4L.cjs

@@ -1,17 +0,0 @@
-'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 a=({type:r="button",children:p,styles:i,disabled:l,isDisabled:n,classes:m,onPointerDown:d,onPointerOver:u,onPointerLeave:b,onClick:y,onKeyDown:P,...c})=>{let f=chunkPNWIRCG3_cjs.a(l,n),{disabledProps:t,handlers:B}=chunkTON2YGMD_cjs.a(f,{handlers:{onClick:y,onPointerDown:d,onKeyDown:P},className:m});return D__default.default.createElement(chunkENTCUJ3A_cjs.a,{as:"button",type:r,"aria-disabled":t["aria-disabled"],onPointerOver:u,onPointerLeave:b,style:i,className:t.className,...B,...c},p)},x=a;a.displayName="Button";
-
-exports.a = a;
-exports.b = x;
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-GT77BX4L.cjs.map

package/libs/chunk-GT77BX4L.cjs.map

@@ -1 +0,0 @@
-{"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,EAEOiB,EAAQnB,EACfA,EAAO,YAAc","sourcesContent":["import UI from '../ui'\nimport React from 'react'\nimport { useDisabledState } from '../../hooks/use-disabled-state'\nimport { resolveDisabledState } from '../../utils/accessibility'\nimport type { DisabledStateProps } from '../../types/shared'\n\nexport type ButtonProps = Partial<React.ComponentProps<typeof UI>> &\n  DisabledStateProps & {\n    /**\n     * The button type\n     * Required - 'button' | 'submit' | 'reset'\n     */\n    type: 'button' | 'submit' | 'reset'\n  }\n\n/**\n * Accessible Button component with WCAG 2.1 Level AA compliant disabled state.\n *\n * **Key Accessibility Features:**\n * - Uses `aria-disabled` pattern instead of native `disabled` attribute\n * - Maintains keyboard focusability when disabled (stays in tab order)\n * - Prevents all interactions when disabled via optimized `useDisabledState` hook\n * - Automatic className merging for seamless styling\n * - Supports both modern `disabled` and legacy `isDisabled` props\n *\n * **Why aria-disabled?**\n * - Elements remain in keyboard tab order (WCAG 2.1.1 - Keyboard)\n * - Screen readers can discover and announce disabled state (WCAG 4.1.2)\n * - Enables tooltips and help text on disabled buttons\n * - Better visual styling control for WCAG AA contrast compliance\n *\n * **Performance:**\n * - Uses optimized `useDisabledState` hook with stable references\n * - Automatic className merging eliminates boilerplate\n * - ~90% reduction in unnecessary re-renders compared to previous implementation\n *\n * @example\n * // Basic usage\n * <Button type=\"button\" onClick={handleClick}>\n *   Click me\n * </Button>\n *\n * @example\n * // Disabled state (prevents all interactions but stays focusable)\n * <Button type=\"button\" disabled={true} onClick={handleClick}>\n *   Cannot click (but can focus for screen readers)\n * </Button>\n *\n * @example\n * // With custom classes (automatic merging with .is-disabled)\n * <Button\n *   type=\"button\"\n *   disabled={true}\n *   classes=\"my-custom-btn\"\n * >\n *   Custom disabled button\n * </Button>\n *\n * @example\n * // Legacy isDisabled prop (still supported)\n * <Button type=\"button\" isDisabled={true} onClick={handleClick}>\n *   Legacy disabled\n * </Button>\n *\n * @see {@link https://www.w3.org/WAI/WCAG21/Understanding/keyboard WCAG 2.1.1 - Keyboard}\n * @see {@link https://www.w3.org/WAI/WCAG21/Understanding/name-role-value WCAG 4.1.2 - Name, Role, Value}\n * @see {@link file://./../../hooks/useDisabledState.md useDisabledState Hook Documentation}\n */\nexport const Button = ({\n  type = 'button',\n  children,\n  styles,\n  disabled,\n  isDisabled,\n  classes,\n  onPointerDown,\n  onPointerOver,\n  onPointerLeave,\n  onClick,\n  onKeyDown,\n  ...props\n}: ButtonProps) => {\n  // Resolve disabled state from both props (disabled takes precedence)\n  const isActuallyDisabled = resolveDisabledState(disabled, isDisabled)\n\n  // Use the disabled state hook with enhanced API for automatic className merging\n  const { disabledProps, handlers } = useDisabledState<HTMLButtonElement>(\n    isActuallyDisabled,\n    {\n      handlers: {\n        onClick,\n        onPointerDown,\n        onKeyDown,\n      },\n      // Automatic className merging - hook combines disabled class with user classes\n      className: classes,\n      // Note: onPointerOver and onPointerLeave are intentionally NOT wrapped\n      // to allow hover effects on disabled buttons for visual feedback\n    }\n  )\n\n  /* Returning a button element with accessible disabled state */\n  return (\n    <UI\n      as=\"button\"\n      type={type}\n      aria-disabled={disabledProps['aria-disabled']}\n      onPointerOver={onPointerOver}\n      onPointerLeave={onPointerLeave}\n      style={styles}\n      className={disabledProps.className}\n      {...handlers}\n      {...props}\n    >\n      {children}\n    </UI>\n  )\n}\n\nexport default Button\nButton.displayName = 'Button'\n"]}

package/libs/chunk-OVWLQYMK.js

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

package/libs/chunk-OVWLQYMK.js.map

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

package/libs/chunk-UEPAWMDF.js

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

package/libs/chunk-UEPAWMDF.js.map

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