@fpkit/acss 1.0.0 → 2.0.0

package/libs/components/link/link.d.cts

@@ -1,3 +1,131 @@
-import 'react';
-export { L as Link, L as default } from '../../link-5192f411.js';
-import '../../ui-d01b50d4.js';
+import React from 'react';
+
+/**
+ * Link - A semantic, accessible anchor component with enhanced security and styling.
+ *
+ * The Link component renders accessible `<a>` elements with automatic security
+ * attributes for external links, customizable styling variants, and full WCAG 2.1
+ * AA compliance. It supports traditional text links, button-styled links, and
+ * programmatic focus management via ref forwarding.
+ *
+ * ## Features
+ *
+ * - 🔒 **Automatic Security**: External links get `rel="noopener noreferrer"`
+ * - ♿ **WCAG 2.1 AA Compliant**: Accessible focus indicators and semantic HTML
+ * - 🎨 **Flexible Styling**: Text links, button links, and pill variants
+ * - ⚡ **Performance**: Optional prefetch hints for faster navigation
+ * - 🎯 **Ref Forwarding**: Direct DOM access for focus management and scroll
+ * - 🧪 **Type-Safe**: Full TypeScript support with comprehensive prop types
+ *
+ * ## Accessibility
+ *
+ * - ✅ Semantic `<a>` element for proper keyboard navigation
+ * - ✅ Focus indicators meet WCAG 2.4.7 (3:1 contrast ratio)
+ * - ✅ Screen readers announce link purpose and destination
+ * - ✅ External links include security attributes automatically
+ * - ✅ Supports `aria-label` for icon-only or ambiguous links
+ * - ✅ Ref forwarding enables skip-link patterns
+ *
+ * @example
+ * // Basic internal link
+ * <Link href="/about">About Us</Link>
+ *
+ * @example
+ * // External link with automatic security
+ * <Link href="https://example.com" target="_blank">
+ *   Visit Example
+ * </Link>
+ *
+ * @example
+ * // Button-styled call-to-action link
+ * <Link href="/signup">
+ *   <b>Get Started</b>
+ * </Link>
+ *
+ * @example
+ * // Icon-only link with accessible label
+ * <Link href="/settings" aria-label="Open settings">
+ *   <SettingsIcon aria-hidden="true" />
+ * </Link>
+ *
+ * @example
+ * // Analytics tracking with onClick (includes keyboard users)
+ * <Link
+ *   href="/products"
+ *   onClick={(e) => trackEvent('link_click', { href: '/products' })}
+ * >
+ *   Browse Products
+ * </Link>
+ *
+ * @example
+ * // Skip link with ref forwarding for focus management
+ * const mainRef = useRef<HTMLAnchorElement>(null);
+ *
+ * <Link ref={mainRef} href="#main-content">
+ *   Skip to main content
+ * </Link>
+ *
+ * @example
+ * // Custom styled link with CSS variables
+ * <Link
+ *   href="/products"
+ *   styles={{
+ *     '--link-color': '#0066cc',
+ *     '--link-decoration': 'underline',
+ *   }}
+ * >
+ *   Browse Products
+ * </Link>
+ *
+ * @example
+ * // ✅ GOOD: Descriptive link text
+ * <Link href="/docs/installation">
+ *   Read installation guide
+ * </Link>
+ *
+ * @example
+ * // ❌ BAD: Generic link text (poor for screen readers)
+ * <Link href="/docs/installation">
+ *   Click here
+ * </Link>
+ *
+ * @see {@link LinkProps} for complete prop documentation
+ */
+declare const Link: React.ForwardRefExoticComponent<{
+    href?: string | undefined;
+    target?: string | undefined;
+    rel?: string | undefined;
+    children: React.ReactNode;
+    styles?: React.CSSProperties | undefined;
+    prefetch?: boolean | undefined;
+    btnStyle?: string | undefined;
+    onClick?: ((event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void) | undefined;
+    onPointerDown?: ((event: React.PointerEvent<HTMLAnchorElement>) => void) | undefined;
+    icon?: React.ReactNode;
+} & Omit<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref">, "style"> & React.RefAttributes<HTMLAnchorElement>>;
+declare const IconLink: React.ForwardRefExoticComponent<{
+    href?: string | undefined;
+    target?: string | undefined;
+    rel?: string | undefined;
+    children: React.ReactNode;
+    styles?: React.CSSProperties | undefined;
+    prefetch?: boolean | undefined;
+    btnStyle?: string | undefined;
+    onClick?: ((event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void) | undefined;
+    onPointerDown?: ((event: React.PointerEvent<HTMLAnchorElement>) => void) | undefined;
+    icon?: React.ReactNode;
+} & Omit<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref">, "style"> & React.RefAttributes<HTMLAnchorElement>>;
+declare const LinkButton: React.ForwardRefExoticComponent<{
+    href?: string | undefined;
+    target?: string | undefined;
+    rel?: string | undefined;
+    children: React.ReactNode;
+    styles?: React.CSSProperties | undefined;
+    prefetch?: boolean | undefined;
+    btnStyle?: string | undefined;
+    onClick?: ((event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void) | undefined;
+    onPointerDown?: ((event: React.PointerEvent<HTMLAnchorElement>) => void) | undefined;
+    icon?: React.ReactNode;
+} & Omit<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref">, "style"> & React.RefAttributes<HTMLAnchorElement>>;
+
+export { IconLink, Link, LinkButton, Link as default };

package/libs/components/link/link.d.ts

@@ -1,3 +1,131 @@
-import 'react';
-export { L as Link, L as default } from '../../link-5192f411.js';
-import '../../ui-d01b50d4.js';
+import React from 'react';
+
+/**
+ * Link - A semantic, accessible anchor component with enhanced security and styling.
+ *
+ * The Link component renders accessible `<a>` elements with automatic security
+ * attributes for external links, customizable styling variants, and full WCAG 2.1
+ * AA compliance. It supports traditional text links, button-styled links, and
+ * programmatic focus management via ref forwarding.
+ *
+ * ## Features
+ *
+ * - 🔒 **Automatic Security**: External links get `rel="noopener noreferrer"`
+ * - ♿ **WCAG 2.1 AA Compliant**: Accessible focus indicators and semantic HTML
+ * - 🎨 **Flexible Styling**: Text links, button links, and pill variants
+ * - ⚡ **Performance**: Optional prefetch hints for faster navigation
+ * - 🎯 **Ref Forwarding**: Direct DOM access for focus management and scroll
+ * - 🧪 **Type-Safe**: Full TypeScript support with comprehensive prop types
+ *
+ * ## Accessibility
+ *
+ * - ✅ Semantic `<a>` element for proper keyboard navigation
+ * - ✅ Focus indicators meet WCAG 2.4.7 (3:1 contrast ratio)
+ * - ✅ Screen readers announce link purpose and destination
+ * - ✅ External links include security attributes automatically
+ * - ✅ Supports `aria-label` for icon-only or ambiguous links
+ * - ✅ Ref forwarding enables skip-link patterns
+ *
+ * @example
+ * // Basic internal link
+ * <Link href="/about">About Us</Link>
+ *
+ * @example
+ * // External link with automatic security
+ * <Link href="https://example.com" target="_blank">
+ *   Visit Example
+ * </Link>
+ *
+ * @example
+ * // Button-styled call-to-action link
+ * <Link href="/signup">
+ *   <b>Get Started</b>
+ * </Link>
+ *
+ * @example
+ * // Icon-only link with accessible label
+ * <Link href="/settings" aria-label="Open settings">
+ *   <SettingsIcon aria-hidden="true" />
+ * </Link>
+ *
+ * @example
+ * // Analytics tracking with onClick (includes keyboard users)
+ * <Link
+ *   href="/products"
+ *   onClick={(e) => trackEvent('link_click', { href: '/products' })}
+ * >
+ *   Browse Products
+ * </Link>
+ *
+ * @example
+ * // Skip link with ref forwarding for focus management
+ * const mainRef = useRef<HTMLAnchorElement>(null);
+ *
+ * <Link ref={mainRef} href="#main-content">
+ *   Skip to main content
+ * </Link>
+ *
+ * @example
+ * // Custom styled link with CSS variables
+ * <Link
+ *   href="/products"
+ *   styles={{
+ *     '--link-color': '#0066cc',
+ *     '--link-decoration': 'underline',
+ *   }}
+ * >
+ *   Browse Products
+ * </Link>
+ *
+ * @example
+ * // ✅ GOOD: Descriptive link text
+ * <Link href="/docs/installation">
+ *   Read installation guide
+ * </Link>
+ *
+ * @example
+ * // ❌ BAD: Generic link text (poor for screen readers)
+ * <Link href="/docs/installation">
+ *   Click here
+ * </Link>
+ *
+ * @see {@link LinkProps} for complete prop documentation
+ */
+declare const Link: React.ForwardRefExoticComponent<{
+    href?: string | undefined;
+    target?: string | undefined;
+    rel?: string | undefined;
+    children: React.ReactNode;
+    styles?: React.CSSProperties | undefined;
+    prefetch?: boolean | undefined;
+    btnStyle?: string | undefined;
+    onClick?: ((event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void) | undefined;
+    onPointerDown?: ((event: React.PointerEvent<HTMLAnchorElement>) => void) | undefined;
+    icon?: React.ReactNode;
+} & Omit<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref">, "style"> & React.RefAttributes<HTMLAnchorElement>>;
+declare const IconLink: React.ForwardRefExoticComponent<{
+    href?: string | undefined;
+    target?: string | undefined;
+    rel?: string | undefined;
+    children: React.ReactNode;
+    styles?: React.CSSProperties | undefined;
+    prefetch?: boolean | undefined;
+    btnStyle?: string | undefined;
+    onClick?: ((event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void) | undefined;
+    onPointerDown?: ((event: React.PointerEvent<HTMLAnchorElement>) => void) | undefined;
+    icon?: React.ReactNode;
+} & Omit<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref">, "style"> & React.RefAttributes<HTMLAnchorElement>>;
+declare const LinkButton: React.ForwardRefExoticComponent<{
+    href?: string | undefined;
+    target?: string | undefined;
+    rel?: string | undefined;
+    children: React.ReactNode;
+    styles?: React.CSSProperties | undefined;
+    prefetch?: boolean | undefined;
+    btnStyle?: string | undefined;
+    onClick?: ((event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void) | undefined;
+    onPointerDown?: ((event: React.PointerEvent<HTMLAnchorElement>) => void) | undefined;
+    icon?: React.ReactNode;
+} & Omit<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref">, "style"> & React.RefAttributes<HTMLAnchorElement>>;
+
+export { IconLink, Link, LinkButton, Link as default };

package/libs/components/link/link.js

@@ -1,4 +1,4 @@
-export { a as Link, b as default } from '../../chunk-UEPAWMDF.js';
+export { b as IconLink, a as Link, c as LinkButton, d as default } from '../../chunk-NNTBIHSD.js';
 import '../../chunk-HHLNOC5T.js';
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=link.js.map

package/libs/components/modal.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
-var chunkDKTHCQ5P_cjs = require('../chunk-DKTHCQ5P.cjs');
-require('../chunk-GT77BX4L.cjs');
+var chunkX5RKCLDC_cjs = require('../chunk-X5RKCLDC.cjs');
+require('../chunk-E4OSROCA.cjs');
 require('../chunk-PNWIRCG3.cjs');
 require('../chunk-TON2YGMD.cjs');
 require('../chunk-ENTCUJ3A.cjs');
@@ -10,7 +10,7 @@ require('../chunk-ENTCUJ3A.cjs');
 
 Object.defineProperty(exports, 'Modal', {
 	enumerable: true,
-	get: function () { return chunkDKTHCQ5P_cjs.a; }
+	get: function () { return chunkX5RKCLDC_cjs.a; }
 });
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=modal.cjs.map

package/libs/components/modal.js

@@ -1,5 +1,5 @@
-export { a as Modal } from '../chunk-7XPFW7CB.js';
-import '../chunk-OVWLQYMK.js';
+export { a as Modal } from '../chunk-43TK2ICH.js';
+import '../chunk-KVKQLRJG.js';
 import '../chunk-BFK62VX5.js';
 import '../chunk-75QHTLFO.js';
 import '../chunk-HHLNOC5T.js';

package/libs/hooks.cjs

@@ -1,16 +1,16 @@
 'use strict';
 
-var chunkT4T6GWYQ_cjs = require('./chunk-T4T6GWYQ.cjs');
+var chunkR7NLLZU2_cjs = require('./chunk-R7NLLZU2.cjs');
 var chunkPDD4N5P5_cjs = require('./chunk-PDD4N5P5.cjs');
 var chunkTON2YGMD_cjs = require('./chunk-TON2YGMD.cjs');
-require('./chunk-33PNJ4LO.cjs');
+require('./chunk-5PJYLVFY.cjs');
 require('./chunk-ENTCUJ3A.cjs');
 
 
 
 Object.defineProperty(exports, 'useBreadcrumbSegments', {
 	enumerable: true,
-	get: function () { return chunkT4T6GWYQ_cjs.a; }
+	get: function () { return chunkR7NLLZU2_cjs.a; }
 });
 Object.defineProperty(exports, 'usePopover', {
 	enumerable: true,

package/libs/hooks.d.cts

@@ -1,7 +1,7 @@
 export { useBreadcrumbSegments } from './components/breadcrumbs/breadcrumb.cjs';
 import 'react';
 import './ui-d01b50d4.js';
-import './link-5192f411.js';
+import './components/link/link.cjs';
 
 type Position = {
     /**

package/libs/hooks.d.ts

@@ -1,7 +1,7 @@
 export { useBreadcrumbSegments } from './components/breadcrumbs/breadcrumb.js';
 import 'react';
 import './ui-d01b50d4.js';
-import './link-5192f411.js';
+import './components/link/link.js';
 
 type Position = {
     /**

package/libs/hooks.js

@@ -1,7 +1,7 @@
-export { a as useBreadcrumbSegments } from './chunk-X5LGFCWG.js';
+export { a as useBreadcrumbSegments } from './chunk-UJAQVHWC.js';
 export { a as usePopover } from './chunk-GCGKYLDG.js';
 export { a as useDisabledState } from './chunk-75QHTLFO.js';
-import './chunk-UEPAWMDF.js';
+import './chunk-NNTBIHSD.js';
 import './chunk-HHLNOC5T.js';
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=hooks.js.map

package/libs/index.cjs

@@ -3,23 +3,23 @@
 var chunkWXBFBWYF_cjs = require('./chunk-WXBFBWYF.cjs');
 var chunkO3JIHC5M_cjs = require('./chunk-O3JIHC5M.cjs');
 var chunkUS2I5GI7_cjs = require('./chunk-US2I5GI7.cjs');
-var chunkQVW6W76L_cjs = require('./chunk-QVW6W76L.cjs');
+var chunkMGPWZRBX_cjs = require('./chunk-MGPWZRBX.cjs');
 var chunkO5XAJ7BY_cjs = require('./chunk-O5XAJ7BY.cjs');
 var chunkGUJSMQ3V_cjs = require('./chunk-GUJSMQ3V.cjs');
 var chunkG55UJ53G_cjs = require('./chunk-G55UJ53G.cjs');
 var chunkW2UIN7EV_cjs = require('./chunk-W2UIN7EV.cjs');
 var chunk2NRIP6RB_cjs = require('./chunk-2NRIP6RB.cjs');
-var chunkT4T6GWYQ_cjs = require('./chunk-T4T6GWYQ.cjs');
+var chunkR7NLLZU2_cjs = require('./chunk-R7NLLZU2.cjs');
 require('./chunk-PDD4N5P5.cjs');
 var chunk6WTC4JXH_cjs = require('./chunk-6WTC4JXH.cjs');
 var chunkW5TKWBFC_cjs = require('./chunk-W5TKWBFC.cjs');
-var chunkDKTHCQ5P_cjs = require('./chunk-DKTHCQ5P.cjs');
-var chunkGT77BX4L_cjs = require('./chunk-GT77BX4L.cjs');
+var chunkX5RKCLDC_cjs = require('./chunk-X5RKCLDC.cjs');
+var chunkE4OSROCA_cjs = require('./chunk-E4OSROCA.cjs');
 var chunk4BZKFPEC_cjs = require('./chunk-4BZKFPEC.cjs');
 var chunkE2AJURUW_cjs = require('./chunk-E2AJURUW.cjs');
 require('./chunk-PNWIRCG3.cjs');
 require('./chunk-TON2YGMD.cjs');
-var chunk33PNJ4LO_cjs = require('./chunk-33PNJ4LO.cjs');
+var chunk5PJYLVFY_cjs = require('./chunk-5PJYLVFY.cjs');
 var chunkENTCUJ3A_cjs = require('./chunk-ENTCUJ3A.cjs');
 var u = require('react');
 
@@ -79,7 +79,7 @@ Object.defineProperty(exports, 'Tr', {
 });
 Object.defineProperty(exports, 'Dialog', {
     enumerable: true,
-    get: function () { return chunkQVW6W76L_cjs.a; }
+    get: function () { return chunkMGPWZRBX_cjs.a; }
 });
 Object.defineProperty(exports, 'Nav', {
     enumerable: true,
@@ -115,11 +115,11 @@ Object.defineProperty(exports, 'Title', {
 });
 Object.defineProperty(exports, 'Breadcrumb', {
     enumerable: true,
-    get: function () { return chunkT4T6GWYQ_cjs.b; }
+    get: function () { return chunkR7NLLZU2_cjs.b; }
 });
 Object.defineProperty(exports, 'useBreadcrumbSegments', {
     enumerable: true,
-    get: function () { return chunkT4T6GWYQ_cjs.a; }
+    get: function () { return chunkR7NLLZU2_cjs.a; }
 });
 Object.defineProperty(exports, 'Icon', {
     enumerable: true,
@@ -143,11 +143,11 @@ Object.defineProperty(exports, 'CardTitle', {
 });
 Object.defineProperty(exports, 'Modal', {
     enumerable: true,
-    get: function () { return chunkDKTHCQ5P_cjs.a; }
+    get: function () { return chunkX5RKCLDC_cjs.a; }
 });
 Object.defineProperty(exports, 'Button', {
     enumerable: true,
-    get: function () { return chunkGT77BX4L_cjs.a; }
+    get: function () { return chunkE4OSROCA_cjs.a; }
 });
 Object.defineProperty(exports, 'Input', {
     enumerable: true,
@@ -163,11 +163,11 @@ Object.defineProperty(exports, 'FP', {
 });
 Object.defineProperty(exports, 'Link', {
     enumerable: true,
-    get: function () { return chunk33PNJ4LO_cjs.a; }
+    get: function () { return chunk5PJYLVFY_cjs.a; }
 });
 Object.defineProperty(exports, 'To', {
     enumerable: true,
-    get: function () { return chunk33PNJ4LO_cjs.b; }
+    get: function () { return chunk5PJYLVFY_cjs.d; }
 });
 exports.Article = ge;
 exports.Aside = fe;