@fpkit/acss 0.5.12 → 0.5.13

package/libs/index.d.ts

@@ -3,7 +3,6 @@ export { Card, Content as CardContent, Footer as CardFooter, CardProps, Title as
 export { default as Field, FieldProps } from './components/form/fields.js';
 export { F as Box, F as FP, I as Input, a as InputProps } from './inputs-f3a216db.js';
 export { default as Icon, IconProps } from './components/icons/icon.js';
-import { F as FP } from './ui-9a6f9f8d.js';
 import React__default, { ReactNode } from 'react';
 export { default as Link, LinkProps, default as To } from './components/link/link.js';
 export { default as List, ListItemProps } from './components/list/list.js';
@@ -11,16 +10,319 @@ export { Modal, ModalProps } from './components/modal.js';
 export { default as Popover, PopoverProps } from './components/popover/popover.js';
 export { RenderTable as TBL, TableProps } from './components/tables/table.js';
 export { Dialog } from './components/dialog/dialog.js';
+import { U as UI } from './ui-645f95b5.js';
 export { default as Nav, NavItem, NavItemProps, NavList, NavListProps, NavProps } from './components/nav/nav.js';
-export { default as Text, TextProps, Title } from './components/text/text.js';
-export { TitleProps } from './components/heading/heading.js';
+export { default as Text, TextProps } from './components/text/text.js';
+export { b as Heading, H as HeadingLevel, T as Title, a as TitleProps } from './heading-3648c538.js';
 export { default as Textarea, TextareaProps } from './components/form/textarea.js';
 import { C as ComponentProps$1 } from './component-props-a8a2f97e.js';
-export { default as Breadcrumb } from './components/breadcrumbs/breadcrumb.js';
+export { default as Breadcrumb, BreadcrumbProps, CustomRoute, useBreadcrumbSegments } from './components/breadcrumbs/breadcrumb.js';
 
-type ImageProps = React__default.ComponentProps<'img'> & React__default.ComponentProps<typeof FP>;
+/**
+ * Props for the Img component.
+ *
+ * Extends native HTML img element attributes with additional functionality
+ * for responsive images, loading states, and error handling.
+ *
+ * ## Accessibility Guidelines (WCAG 2.1 AA)
+ *
+ * **Decorative Images:**
+ * Images that are purely visual decoration should have an empty alt attribute.
+ *
+ * @example
+ * ```tsx
+ * // ✅ Decorative image (border, background pattern, visual separator)
+ * <Img src="/decorative-border.png" alt="" />
+ * ```
+ *
+ * **Semantic Images:**
+ * Images that convey information or meaning must have descriptive alt text.
+ *
+ * @example
+ * ```tsx
+ * // ✅ Semantic image (charts, diagrams, photos with meaning)
+ * <Img
+ *   src="/sales-chart.png"
+ *   alt="Sales chart showing 30% growth in Q4 2024"
+ * />
+ * ```
+ *
+ * **Responsive Images:**
+ * Use srcset and sizes for responsive images to optimize performance.
+ *
+ * @example
+ * ```tsx
+ * // ✅ Responsive image with srcset
+ * <Img
+ *   src="/photo.jpg"
+ *   srcSet="/photo-320w.jpg 320w, /photo-640w.jpg 640w, /photo-1024w.jpg 1024w"
+ *   sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
+ *   alt="Team photo from annual conference"
+ * />
+ * ```
+ *
+ * @see https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html
+ */
+interface ImgProps extends Omit<React__default.ImgHTMLAttributes<HTMLImageElement>, 'placeholder'> {
+    /**
+     * The image source URL.
+     * @default '//'
+     */
+    src?: string;
+    /**
+     * Alternative text for the image.
+     * - **Empty string (`""`)** for decorative images
+     * - **Descriptive text** for semantic images that convey meaning
+     *
+     * @example
+     * ```tsx
+     * // Decorative
+     * <Img src="/border.png" alt="" />
+     *
+     * // Semantic
+     * <Img src="/logo.png" alt="Company logo" />
+     * ```
+     */
+    alt?: string;
+    /**
+     * Width of the image in pixels.
+     * @default 480
+     */
+    width?: number | string;
+    /**
+     * Height of the image in pixels.
+     * When not provided, defaults to 'auto'.
+     */
+    height?: number | string;
+    /**
+     * Inline styles to apply to the image.
+     */
+    styles?: React__default.CSSProperties;
+    /**
+     * Loading behavior for the image.
+     * - `"lazy"` (default): Defers loading until near viewport
+     * - `"eager"`: Loads immediately
+     *
+     * @default "lazy"
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#loading
+     */
+    loading?: 'eager' | 'lazy';
+    /**
+     * Fallback placeholder image URL to display on error.
+     * If not provided and image fails to load, a default placeholder is used.
+     *
+     * @example
+     * ```tsx
+     * <Img
+     *   src="/photo.jpg"
+     *   placeholder="/fallback.png"
+     *   alt="User profile photo"
+     * />
+     * ```
+     */
+    placeholder?: string;
+    /**
+     * Hint for the browser to prioritize image fetching.
+     * - `"high"`: High priority (above-the-fold images)
+     * - `"low"` (default): Low priority
+     * - `"auto"`: Browser decides
+     *
+     * @default "low"
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#fetchpriority
+     */
+    fetchpriority?: 'high' | 'low' | 'auto';
+    /**
+     * Decoding hint for the browser.
+     * - `"async"`: Decode asynchronously (don't block rendering)
+     * - `"sync"`: Decode synchronously
+     * - `"auto"` (default): Browser decides
+     *
+     * @default "auto"
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#decoding
+     */
+    decoding?: 'sync' | 'async' | 'auto';
+    /**
+     * Responsive image sources with width descriptors.
+     * Allows browser to choose appropriate image based on viewport.
+     *
+     * @example
+     * ```tsx
+     * <Img
+     *   src="/photo.jpg"
+     *   srcSet="/photo-320w.jpg 320w, /photo-640w.jpg 640w"
+     *   sizes="(max-width: 640px) 100vw, 640px"
+     *   alt="Responsive image"
+     * />
+     * ```
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#srcset
+     */
+    srcSet?: string;
+    /**
+     * Media conditions for responsive image sizing.
+     * Works with srcSet to determine which image to load.
+     *
+     * @example
+     * ```tsx
+     * sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 800px"
+     * ```
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#sizes
+     */
+    sizes?: string;
+    /**
+     * Callback fired when the image fails to load.
+     * The default SVG placeholder is still applied after calling this handler.
+     * Call `event.preventDefault()` to prevent the default fallback behavior.
+     *
+     * @param event - The error event
+     *
+     * @example
+     * ```tsx
+     * // Log error and show default placeholder
+     * <Img
+     *   src="/photo.jpg"
+     *   onError={(e) => console.error('Image failed to load', e)}
+     *   alt="Photo"
+     * />
+     *
+     * // Prevent default and use custom fallback
+     * <Img
+     *   src="/photo.jpg"
+     *   onError={(e) => {
+     *     e.preventDefault()
+     *     e.currentTarget.src = '/custom-fallback.jpg'
+     *   }}
+     *   alt="Photo"
+     * />
+     * ```
+     */
+    onError?: (event: React__default.SyntheticEvent<HTMLImageElement, Event>) => void;
+    /**
+     * Callback fired when the image successfully loads.
+     *
+     * @param event - The load event
+     *
+     * @example
+     * ```tsx
+     * <Img
+     *   src="/photo.jpg"
+     *   onLoad={(e) => console.log('Image loaded successfully')}
+     *   alt="Photo"
+     * />
+     * ```
+     */
+    onLoad?: (event: React__default.SyntheticEvent<HTMLImageElement, Event>) => void;
+}
+
+/**
+ * Img - A semantic image component with accessibility and performance best practices.
+ *
+ * This component wraps the native `<img>` element with enhanced features:
+ * - **Responsive images** via optional srcset/sizes
+ * - **Lazy loading** by default for performance
+ * - **Error handling** with configurable fallback placeholders
+ * - **Type safety** with full TypeScript support
+ *
+ * ## Accessibility Patterns (WCAG 2.1 AA)
+ *
+ * ### Decorative Images
+ * Images that are purely visual decoration should use an empty alt attribute.
+ * These images are typically borders, patterns, or visual separators.
+ *
+ * @example
+ * ```tsx
+ * // ✅ GOOD: Decorative border image
+ * <Img src="/decorative-border.png" alt="" />
+ *
+ * // ✅ GOOD: Background pattern
+ * <Img src="/pattern.svg" alt="" loading="eager" />
+ * ```
+ *
+ * ### Semantic Images
+ * Images that convey information must have descriptive alt text that explains
+ * the content and purpose of the image.
+ *
+ * @example
+ * ```tsx
+ * // ✅ GOOD: Informative image with descriptive alt
+ * <Img
+ *   src="/sales-chart.png"
+ *   alt="Sales chart showing 30% revenue growth in Q4 2024"
+ * />
+ *
+ * // ✅ GOOD: Product photo with context
+ * <Img
+ *   src="/laptop.jpg"
+ *   alt="Silver MacBook Pro 14-inch on wooden desk"
+ * />
+ * ```
+ *
+ * ## Performance Optimization
+ *
+ * ### Lazy Loading
+ * By default, images use lazy loading to improve page load performance.
+ * Only use `loading="eager"` for above-the-fold images.
+ *
+ * @example
+ * ```tsx
+ * // ✅ GOOD: Lazy load below-the-fold image
+ * <Img src="/photo.jpg" alt="Photo" />
+ *
+ * // ✅ GOOD: Eager load hero image
+ * <Img
+ *   src="/hero.jpg"
+ *   alt="Hero banner"
+ *   loading="eager"
+ *   fetchpriority="high"
+ * />
+ * ```
+ *
+ * ### Responsive Images
+ * Use srcset and sizes for responsive images to serve appropriate image sizes
+ * based on viewport width, improving performance and bandwidth usage.
+ *
+ * @example
+ * ```tsx
+ * // ✅ GOOD: Responsive image with multiple sizes
+ * <Img
+ *   src="/photo.jpg"
+ *   srcSet="/photo-320w.jpg 320w, /photo-640w.jpg 640w, /photo-1024w.jpg 1024w"
+ *   sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 800px"
+ *   alt="Responsive image adapts to viewport"
+ * />
+ * ```
+ *
+ * ## Error Handling
+ *
+ * @example
+ * ```tsx
+ * // ✅ GOOD: Custom placeholder on error
+ * <Img
+ *   src="/photo.jpg"
+ *   placeholder="/fallback.png"
+ *   alt="User profile photo"
+ * />
+ *
+ * // ✅ GOOD: Custom error handler
+ * <Img
+ *   src="/photo.jpg"
+ *   onError={(e) => {
+ *     console.error('Image failed to load')
+ *     logToAnalytics('image_error', { src: e.currentTarget.src })
+ *   }}
+ *   alt="Photo"
+ * />
+ * ```
+ *
+ * @param {ImgProps} props - Component props extending native img attributes
+ * @returns {React.ReactElement} Image element with enhanced functionality
+ *
+ * @see {@link ImgProps} for complete prop documentation
+ * @see https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html
+ */
 declare const Img: {
-    ({ src, alt, width, height, styles, loading, placeholder, fetchpriority, decoding, imgLoaded, imgError, ...props }: ImageProps): React__default.JSX.Element;
+    ({ src, alt, width, height, styles, loading, placeholder, fetchpriority, decoding, srcSet, sizes, onError, onLoad, ...props }: ImgProps): React__default.JSX.Element;
     displayName: string;
 };
 
@@ -53,7 +355,7 @@ interface TextToSpeechComponentProps {
  */
 declare const TextToSpeech: React__default.FC<TextToSpeechComponentProps>;
 
-type ComponentProps = React__default.ComponentProps<typeof FP>;
+type ComponentProps = React__default.ComponentProps<typeof UI>;
 /**
  * Renders children elements without any wrapping component.
  * Can be used as a placeholder when no semantic landmark is needed.
@@ -117,12 +419,102 @@ declare const Section: ({ id, children, styles, classes, ...props }: ComponentPr
  */
 declare const Article: ({ id, children, styles, classes, ...props }: ComponentProps) => React__default.JSX.Element;
 
+/**
+ * Props for the Badge component
+ *
+ * @property {React.ReactNode} children - Content to display inside the badge (typically numbers or short text)
+ * @property {string} [id] - Optional HTML id attribute for the badge element
+ * @property {React.CSSProperties} [styles] - Inline styles to apply to the badge
+ * @property {string} [classes] - CSS class names to apply to the badge
+ * @property {'rounded'} [variant] - Visual variant of the badge. Use 'rounded' for circular badges (fixed size with ellipsis for overflow)
+ * @property {string} [aria-label] - Accessible label for screen readers. Required for icon-only or number-only badges
+ * @property {'status' | 'note'} [role] - ARIA role for the badge. Defaults to 'status' for dynamic content
+ */
+type BadgeProps = {
+    /**
+     * Content to display inside the badge (typically numbers or short text)
+     */
+    children?: React__default.ReactNode;
+    /**
+     * Visual variant of the badge
+     * - 'rounded': Circular badge style
+     */
+    variant?: 'rounded';
+} & React__default.ComponentProps<typeof UI>;
+/**
+ * Badge - A small label component for displaying status, counts, or notifications
+ *
+ * The Badge component is used to display supplementary information alongside other content,
+ * such as notification counts, status indicators, or labels. It renders as a semantic `<sup>`
+ * element with a nested `<span>` required for the component's styling architecture.
+ *
+ * ## Styling Architecture
+ *
+ * The Badge uses a nested structure (`<sup><span>content</span></sup>`) which is required
+ * for the SCSS styling system. The outer `<sup>` element provides positioning context,
+ * while the inner `<span>` receives the visual styling (background, padding, border-radius).
+ *
+ * ## Rounded Variant Behavior
+ *
+ * The `rounded` variant creates a perfect circular badge with fixed dimensions (1.5625rem).
+ * Content that exceeds the available space will be truncated with an ellipsis (...).
+ * **Best practice**: Format large numbers yourself (e.g., pass "99+" instead of "999").
+ *
+ * ## Accessibility Considerations
+ *
+ * - **Semantic HTML**: Uses `<sup>` (superscript) element for proper positioning context
+ * - **ARIA Role**: Defaults to `role="status"` for dynamic badges (e.g., unread counts)
+ * - **Accessible Names**: For icon-only or number-only badges, provide an `aria-label`
+ *   to give context (e.g., "3 unread messages" instead of just "3")
+ * - **Live Regions**: The `role="status"` makes badges announce updates to screen readers
+ *
+ * @param {BadgeProps} props - Component props
+ * @returns {React.ReactElement} A Badge component
+ *
+ * @example
+ * // Basic badge with notification count
+ * <p>
+ *   Messages
+ *   <Badge aria-label="3 unread messages">3</Badge>
+ * </p>
+ *
+ * @example
+ * // Rounded badge variant (perfect circle)
+ * <p>
+ *   Notifications
+ *   <Badge variant="rounded" aria-label="99 or more notifications">99+</Badge>
+ * </p>
+ *
+ * @example
+ * // Status badge with custom styling
+ * <p>
+ *   Active Users
+ *   <Badge styles={{ backgroundColor: 'green', color: 'white' }}>21</Badge>
+ * </p>
+ *
+ * @example
+ * // ✅ GOOD: Accessible badge with descriptive label and formatted content
+ * <Badge variant="rounded" aria-label="12 items in cart">12</Badge>
+ *
+ * @example
+ * // ✅ GOOD: Large numbers formatted by developer
+ * <Badge variant="rounded" aria-label="More than 99 notifications">99+</Badge>
+ *
+ * @example
+ * // ❌ BAD: Number-only badge without context for screen readers
+ * <Badge>12</Badge>
+ */
+declare const Badge: {
+    ({ id, styles, classes, children, variant, ...props }: BadgeProps): React__default.JSX.Element;
+    displayName: string;
+};
+
 type TagProps = {
     /** HTML element to display the badge as span or p */
     elm?: 'span' | 'p';
     /**  Aria role for the component - conditional */
     role: 'note' | 'status';
-} & React__default.ComponentProps<typeof FP>;
+} & React__default.ComponentProps<typeof UI>;
 declare const Tag: {
     ({ elm, role, children, styles, ...props }: TagProps): React__default.JSX.Element;
     displayName: string;
@@ -153,33 +545,125 @@ declare const Table: {
     displayName: string;
 };
 
+/**
+ * Props for the Details component.
+ *
+ * Combines native HTML details element props with custom styling and interaction handlers.
+ * The Details component uses the native `<details>` element for progressive disclosure,
+ * providing built-in keyboard support and semantic HTML.
+ *
+ * @example
+ * ```tsx
+ * <Details
+ *   summary="Click to expand"
+ *   icon={<ChevronIcon />}
+ *   onToggle={(e) => console.log('Toggled:', e.currentTarget.open)}
+ * >
+ *   <p>Hidden content revealed when opened</p>
+ * </Details>
+ * ```
+ */
 type DetailsProps = {
     /**
-     * The summary text shown for the details.
-     * Required.
+     * The summary text or element shown in the clickable header.
+     * This is always visible and acts as the toggle control.
+     *
+     * @required
+     * @example
+     * ```tsx
+     * summary="Shipping Information"
+     * // or
+     * summary={<><Icon /> Shipping Information</>}
+     * ```
      */
     summary: React__default.ReactNode;
     /**
-     * The aria-label  element for accessibility.
-     */
-    ariaLabel: string;
-} & React__default.ComponentProps<"details"> & Partial<React__default.ComponentProps<typeof FP>>;
-/**3
- * Details component props interface.
- *
- * @param {React.CSSProperties} [styles] - CSS styles object.
- * @param {string} [classes] - Classnames string.
- * @param {boolean} [open] - Whether the details is open.
- * @param {(e: React.PointerEvent<HTMLDetailsElement>) => void} [onToggle] - onToggle callback.
- * @param {(e: React.PointerEvent<HTMLDetailsElement>) => void} [onPointerDown] - onPointerDown callback.
- * @param {ReactNode} children - The content inside the details.
- * @param {string} [ariaLabel] - aria-label for accessibility.
- * @param {React.Ref<any>} [ref] - Ref object.
- * @param {Object} props - Other props.
+     * Optional icon displayed before the summary text.
+     * Commonly used for chevron/arrow indicators.
+     *
+     * @example
+     * ```tsx
+     * icon={<ChevronDownIcon />}
+     * ```
+     */
+    icon?: React__default.ReactNode;
+    /**
+     * Accessible label for screen readers.
+     * If not provided, the native `<details>` semantic will be used.
+     *
+     * Note: Native `<details>` elements are already semantic and announced properly
+     * by screen readers. Only provide this if you need to override the default behavior.
+     *
+     * @optional
+     * @example
+     * ```tsx
+     * ariaLabel="Product details section"
+     * ```
+     */
+    ariaLabel?: string;
+    /**
+     * Groups multiple details elements into an accordion where only one can be open.
+     * Multiple details elements with the same `name` will behave as a mutually exclusive group.
+     *
+     * @optional
+     * @example
+     * ```tsx
+     * <Details name="faq-accordion" summary="Question 1">...</Details>
+     * <Details name="faq-accordion" summary="Question 2">...</Details>
+     * ```
+     */
+    name?: string;
+} & React__default.ComponentProps<"details"> & Partial<React__default.ComponentProps<typeof UI>>;
+
+/**
+ * Details - A progressive disclosure component using native HTML `<details>` element.
+ *
+ * This component wraps the native `<details>` and `<summary>` elements to provide
+ * an accessible, semantic way to show and hide content. It supports accordion behavior
+ * through the `name` attribute and includes proper keyboard navigation out of the box.
+ *
+ * ## Key Features:
+ * - **Semantic HTML**: Uses native `<details>` for built-in accessibility
+ * - **Keyboard Support**: Space/Enter to toggle, fully accessible by default
+ * - **Accordion Mode**: Group multiple details with `name` for exclusive expansion
+ * - **Customizable**: Supports icons, custom styles, and event handlers
+ *
+ * ## Accessibility:
+ * - ✅ WCAG 2.1 AA compliant using semantic HTML
+ * - ✅ Native keyboard support (Space, Enter)
+ * - ✅ Screen reader compatible (announced as "disclosure" or "expandable")
+ * - ✅ Focus indicators automatically applied via CSS
+ * - ✅ `aria-expanded` managed automatically by browser
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Details summary="Click to expand">
+ *   <p>Hidden content here</p>
+ * </Details>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With icon and custom styling
+ * <Details
+ *   summary="Shipping Information"
+ *   icon={<ChevronDownIcon />}
+ *   classes="custom-details"
+ *   onToggle={(e) => console.log('Open:', e.currentTarget.open)}
+ * >
+ *   <p>Ships within 2-3 business days</p>
+ * </Details>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Accordion mode - only one open at a time
+ * <Details name="faq" summary="Question 1">Answer 1</Details>
+ * <Details name="faq" summary="Question 2">Answer 2</Details>
+ * <Details name="faq" summary="Question 3">Answer 3</Details>
+ * ```
  */
-declare const Details: {
-    ({ summary, icon, styles, classes, ariaLabel, name, open, onPointerDown, onToggle, children, ref, ...props }: DetailsProps): React__default.JSX.Element;
-    displayName: string;
-};
+declare const Details: React__default.ForwardRefExoticComponent<Omit<DetailsProps, "ref"> & React__default.RefAttributes<HTMLDetailsElement>>;
 
-export { Article, Aside, Caption, ComponentProps$1 as ComponentProps, Details, Footer, Header, ImageProps, Img, Landmarks, Main, Section, Table, Tag, TagProps, Tbody, Td, TextToSpeech, Thead, Tr };
+export { Article, Aside, Badge, BadgeProps, Caption, ComponentProps$1 as ComponentProps, Details, Footer, Header, Img, ImgProps, Landmarks, Main, Section, Table, Tag, TagProps, Tbody, Td, TextToSpeech, Thead, Tr };

package/libs/index.js

@@ -1,28 +1,40 @@
-export { a as Breadcrumb } from './chunk-DKGJHKGW.js';
-import { b } from './chunk-PPOOBUOS.js';
-export { a as Textarea } from './chunk-PPOOBUOS.js';
-export { a as Field } from './chunk-BIP2NY53.js';
+import { b } from './chunk-XBA562WW.js';
+export { a as Textarea } from './chunk-XBA562WW.js';
+export { a as Field } from './chunk-RIVUMPOG.js';
 export { a as Caption, i as TBL, f as Table, c as Tbody, e as Td, b as Thead, d as Tr } from './chunk-5M57K4SW.js';
-export { a as Dialog } from './chunk-SXVZSWX6.js';
-export { c as Nav, b as NavItem, a as NavList } from './chunk-EQ67LF46.js';
-export { b as List } from './chunk-NHYXGV3L.js';
+export { a as Dialog } from './chunk-VUH3FXGJ.js';
+export { c as Nav, b as NavItem, a as NavList } from './chunk-2Y7W75TT.js';
+export { b as List } from './chunk-SMYRLO3E.js';
 export { b as Popover } from './chunk-23ANBDCR.js';
-export { a as Text, b as Title } from './chunk-LIQJ7ZZR.js';
-import './chunk-HYBZBN4G.js';
+export { a as Text } from './chunk-NGTJDDFO.js';
+export { b as Heading, a as Title } from './chunk-ETFLFC2S.js';
+export { b as Breadcrumb, a as useBreadcrumbSegments } from './chunk-GZ4QFPRY.js';
 import './chunk-GCGKYLDG.js';
-import { b as b$1 } from './chunk-O6QZBB6G.js';
-export { a as Icon } from './chunk-O6QZBB6G.js';
-export { d as Card, b as CardContent, c as CardFooter, a as CardTitle } from './chunk-BSPKFLO4.js';
-export { a as Modal } from './chunk-YWOYVRFT.js';
-export { a as Button } from './chunk-QCMV4VQZ.js';
+import { b as b$1 } from './chunk-772NRB75.js';
+export { a as Icon } from './chunk-772NRB75.js';
+export { d as Card, b as CardContent, c as CardFooter, a as CardTitle } from './chunk-JJ43O4Y5.js';
+export { a as Modal } from './chunk-ZANSFMTD.js';
+export { a as Button } from './chunk-QLZWHAMK.js';
 export { a as Input } from './chunk-BHRQBJRY.js';
 export { a as Box, a as FP } from './chunk-P7TTEYCD.js';
-export { a as Link, b as To } from './chunk-5ZM4XL44.js';
-import { a } from './chunk-NE6YXTMC.js';
-import l, { useState, useEffect } from 'react';
+export { a as Link, b as To } from './chunk-TYRCEX2L.js';
+import { a } from './chunk-KUKIVRC2.js';
+import u, { useCallback, useMemo, useState, useEffect } from 'react';
 
-var F=({src:e="//",alt:o,width:t=480,height:n,styles:s,loading:i="lazy",placeholder:c=`https://via.placeholder.com/${t}?text=PLACEHOLDER`,fetchpriority:a$1="low",decoding:m="auto",imgLoaded:x,imgError:S,...y})=>l.createElement(a,{as:"img",src:e,alt:o,width:t,height:n||"auto",loading:i,style:s,onError:h=>{if(S){S?.(h);return}h.currentTarget.src!==c&&(h.currentTarget.src=c);},onLoad:h=>{x?.(h);},fetchPriority:a$1,decoding:m,...y});F.displayName="Img";var z=e=>{let[o,t]=useState([]),[n,s]=useState(e),[i,c]=useState(!1),[a,m]=useState(!1),[x,S]=useState(null);return useEffect(()=>{let d=()=>{let f=window.speechSynthesis.getVoices();t(f);let g=f.find(p=>p.name==="Google US English");if(g)s(g);else {let p=f.find(E=>E.lang.startsWith("en-"));p&&s(p);}};return d(),window.speechSynthesis.onvoiceschanged=d,()=>{window.speechSynthesis.onvoiceschanged=null;}},[]),{speak:(d,f={},g)=>{let p=new SpeechSynthesisUtterance(d);p.lang=f.lang??"en-US",p.pitch=f.pitch??1,p.rate=f.rate??1,p.voice=n??f.voice??null,p.onend=()=>{c(!1),m(!1),g&&g();},"speechSynthesis"in window?(window.speechSynthesis.speak(p),S(p),c(!0),m(!1)):console.error("Speech synthesis not supported");},pause:()=>{i&&!a&&(window.speechSynthesis.pause(),m(!0));},resume:()=>{i&&a&&(window.speechSynthesis.resume(),m(!1));},cancel:()=>{i&&(window.speechSynthesis.cancel(),c(!1),m(!1));},isSpeaking:i,isPaused:a,availableVoices:o,changeVoice:d=>{s(d);},currentVoice:n,getAvailableLanguages:()=>[...new Set(o.map(d=>d.lang))]}};var oe=({children:e,onClick:o})=>l.createElement(a,{as:"button",type:"button",className:"tts-border","data-btn":"sm text pill",onClick:o},e),U=l.memo(oe),N=({label:e,isSpeaking:o,isPaused:t,onSpeak:n,onPause:s,onResume:i,onCancel:c})=>l.createElement(a,{as:"div","data-tts":!0},e&&l.createElement("p",null,e),!o&&l.createElement(U,{"aria-label":"Speak",onClick:n},l.createElement(b$1.PlaySolid,{size:16})),o&&!t&&l.createElement(U,{"aria-label":"Pause",onClick:s},l.createElement(b$1.PauseSolid,{size:16})),t&&l.createElement(U,{"aria-label":"Resume",onClick:i},l.createElement(b$1.ResumeSolid,{size:16})),l.createElement(U,{"aria-label":"Stop",onClick:c},l.createElement(b$1.StopSolid,{size:16})));N.displayName="TextToSpeechControls";N.TTSButton=U;var A=N;var H=({initialText:e="",showTextInput:o=!1,voice:t,pitch:n=1,rate:s=1,language:i,label:c,onEnd:a})=>{let{speak:m,pause:x,resume:S,cancel:y,isSpeaking:P,isPaused:I,getAvailableLanguages:h,availableVoices:C}=z(),[k,d]=useState(e);console.log(h()),useEffect(()=>{d(e);},[e]);let f=()=>{k.trim()!==""&&m(k,{voice:t,pitch:n,rate:s},p);},g=E=>{d(E.target.value);},p=()=>{a&&a();};return l.createElement(l.Fragment,null,o&&l.createElement(b,{value:k,onChange:g}),l.createElement(A,{label:c,isSpeaking:P,isPaused:I,onSpeak:f,onPause:x,onResume:S,onCancel:y}))};H.displayName="TextToSpeechComponent";var T=e=>l.createElement(l.Fragment,null,e),ne=({id:e,children:o,headerBackground:t,styles:n,classes:s,...i})=>l.createElement(a,{as:"header",id:e,styles:n,className:s,...i},t,l.createElement(a,{as:"section"},o)),re=({id:e,children:o,styles:t,classes:n,...s})=>l.createElement(a,{as:"main",id:e,styles:t,...s,className:n},o),ae=({id:e,classes:o,children:t,styles:n={},...s})=>l.createElement(a,{as:"footer",id:e,className:o,styles:n,...s},l.createElement(a,{as:"section"},t||"Copyright \xA9 2022")),pe=({id:e,children:o,styles:t={},classes:n,...s})=>l.createElement(a,{as:"aside",id:e,styles:t,className:n,...s},l.createElement(a,{as:"section"},o)),ie=({id:e,children:o,styles:t,classes:n,...s})=>l.createElement(a,{as:"section",id:e,styles:t,className:n,...s},o),ce=({id:e,children:o,styles:t,classes:n,...s})=>l.createElement(a,{as:"article",id:e,styles:t,className:n,...s},o);T.displayName="Landmarks";T.Header=ne;T.Main=re;T.Footer=ae;T.Aside=pe;T.Section=ie;T.Article=ce;var me=({elm:e="span",role:o="note",children:t,styles:n,...s})=>l.createElement(a,{as:e,role:o,styles:n,...s},t);me.displayName="Tag";var de=({summary:e,icon:o,styles:t,classes:n,ariaLabel:s,name:i,open:c,onPointerDown:a$1,onToggle:m,children:x,ref:S,...y})=>{let P={...t},I=C=>{a$1&&a$1?.(C),a$1&&a$1?.(C);};return l.createElement(a,{as:"details",style:P,className:n,onToggle:C=>{m&&a$1?.(C);},ref:S,open:c,"aria-label":s||"Details dropdown",name:i,...y},l.createElement(a,{as:"summary",onPointerDown:I},o,e),l.createElement(a,{as:"section"},x))};de.displayName="Details";
+var M=({src:e="//",alt:t,width:s=480,height:n,styles:r,loading:l="lazy",placeholder:m,fetchpriority:c="low",decoding:d="auto",srcSet:T,sizes:x,onError:y,onLoad:P,...C})=>{let h=useMemo(()=>{let o=typeof s=="number"?s:480,p=typeof n=="number"?n:Math.round(o*.75),i=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${o} ${p}">
+      <defs>
+        <linearGradient id="grad-${o}-${p}" x1="0%" y1="0%" x2="100%" y2="100%">
+          <stop offset="0%" style="stop-color:#6366f1;stop-opacity:1" />
+          <stop offset="50%" style="stop-color:#8b5cf6;stop-opacity:1" />
+          <stop offset="100%" style="stop-color:#ec4899;stop-opacity:1" />
+        </linearGradient>
+      </defs>
+      <rect width="${o}" height="${p}" fill="url(#grad-${o}-${p})"/>
+      <circle cx="${o*.15}" cy="${p*.2}" r="${Math.min(o,p)*.08}" fill="rgba(255,255,255,0.2)"/>
+      <path d="M0,${p*.75} Q${o*.25},${p*.65} ${o*.5},${p*.75} T${o},${p*.75} L${o},${p} L0,${p} Z" fill="rgba(0,0,0,0.15)"/>
+      <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-family="system-ui,-apple-system,sans-serif" font-size="${Math.max(16,Math.min(o,p)*.05)}" font-weight="500" fill="rgba(255,255,255,0.9)">${o}\xD7${p}</text>
+    </svg>`;return `data:image/svg+xml,${encodeURIComponent(i)}`},[s,n]),w=m??h;return u.createElement(a,{as:"img",src:e,alt:t,width:s,height:n||"auto",loading:l,style:r,srcSet:T,sizes:x,onError:o=>{y&&y(o),o.defaultPrevented||o.currentTarget.src!==w&&(o.currentTarget.src=w);},onLoad:o=>{P?.(o);},decoding:d,...C,...c&&{fetchpriority:c}})};M.displayName="Img";var V=e=>{let[t,s]=useState([]),[n,r]=useState(e),[l,m]=useState(!1),[c,d]=useState(!1),[T,x]=useState(null);return useEffect(()=>{let f=()=>{let o=window.speechSynthesis.getVoices();s(o);let p=o.find(i=>i.name==="Google US English");if(p)r(p);else {let i=o.find($=>$.lang.startsWith("en-"));i&&r(i);}};return f(),window.speechSynthesis.onvoiceschanged=f,()=>{window.speechSynthesis.onvoiceschanged=null;}},[]),{speak:(f,o={},p)=>{let i=new SpeechSynthesisUtterance(f);i.lang=o.lang??"en-US",i.pitch=o.pitch??1,i.rate=o.rate??1,i.voice=n??o.voice??null,i.onend=()=>{m(!1),d(!1),p&&p();},"speechSynthesis"in window?(window.speechSynthesis.speak(i),x(i),m(!0),d(!1)):console.error("Speech synthesis not supported");},pause:()=>{l&&!c&&(window.speechSynthesis.pause(),d(!0));},resume:()=>{l&&c&&(window.speechSynthesis.resume(),d(!1));},cancel:()=>{l&&(window.speechSynthesis.cancel(),m(!1),d(!1));},isSpeaking:l,isPaused:c,availableVoices:t,changeVoice:f=>{r(f);},currentVoice:n,getAvailableLanguages:()=>[...new Set(t.map(f=>f.lang))]}};var pe=({children:e,onClick:t})=>u.createElement(a,{as:"button",type:"button",className:"tts-border","data-btn":"sm text pill",onClick:t},e),U=u.memo(pe),L=({label:e,isSpeaking:t,isPaused:s,onSpeak:n,onPause:r,onResume:l,onCancel:m})=>u.createElement(a,{as:"div","data-tts":!0},e&&u.createElement("p",null,e),!t&&u.createElement(U,{"aria-label":"Speak",onClick:n},u.createElement(b$1.PlaySolid,{size:16})),t&&!s&&u.createElement(U,{"aria-label":"Pause",onClick:r},u.createElement(b$1.PauseSolid,{size:16})),s&&u.createElement(U,{"aria-label":"Resume",onClick:l},u.createElement(b$1.ResumeSolid,{size:16})),u.createElement(U,{"aria-label":"Stop",onClick:m},u.createElement(b$1.StopSolid,{size:16})));L.displayName="TextToSpeechControls";L.TTSButton=U;var H=L;var z=({initialText:e="",showTextInput:t=!1,voice:s,pitch:n=1,rate:r=1,language:l,label:m,onEnd:c})=>{let{speak:d,pause:T,resume:x,cancel:y,isSpeaking:P,isPaused:C,getAvailableLanguages:h,availableVoices:w}=V(),[I,f]=useState(e);console.log(h()),useEffect(()=>{f(e);},[e]);let o=()=>{I.trim()!==""&&d(I,{voice:s,pitch:n,rate:r},i);},p=$=>{f($.target.value);},i=()=>{c&&c();};return u.createElement(u.Fragment,null,t&&u.createElement(b,{value:I,onChange:p}),u.createElement(H,{label:m,isSpeaking:P,isPaused:C,onSpeak:o,onPause:T,onResume:x,onCancel:y}))};z.displayName="TextToSpeechComponent";var S=e=>u.createElement(u.Fragment,null,e),ce=({id:e,children:t,headerBackground:s,styles:n,classes:r,...l})=>u.createElement(a,{as:"header",id:e,styles:n,className:r,...l},s,u.createElement(a,{as:"section"},t)),me=({id:e,children:t,styles:s,classes:n,...r})=>u.createElement(a,{as:"main",id:e,styles:s,...r,className:n},t),de=({id:e,classes:t,children:s,styles:n={},...r})=>u.createElement(a,{as:"footer",id:e,className:t,styles:n,...r},u.createElement(a,{as:"section"},s||"Copyright \xA9 2022")),fe=({id:e,children:t,styles:s={},classes:n,...r})=>u.createElement(a,{as:"aside",id:e,styles:s,className:n,...r},u.createElement(a,{as:"section"},t)),ue=({id:e,children:t,styles:s,classes:n,...r})=>u.createElement(a,{as:"section",id:e,styles:s,className:n,...r},t),ge=({id:e,children:t,styles:s,classes:n,...r})=>u.createElement(a,{as:"article",id:e,styles:s,className:n,...r},t);S.displayName="Landmarks";S.Header=ce;S.Main=me;S.Footer=de;S.Aside=fe;S.Section=ue;S.Article=ge;var A=({id:e,styles:t,classes:s,children:n,variant:r,...l})=>u.createElement(a,{as:"sup",id:e,styles:t,className:s,"data-badge":r||void 0,role:"status",...l},u.createElement(a,{as:"span"},n));A.displayName="Badge";var xe=({elm:e="span",role:t="note",children:s,styles:n,...r})=>u.createElement(a,{as:e,role:t,styles:n,...r},s);xe.displayName="Tag";var ye=u.forwardRef(({summary:e,icon:t,styles:s,classes:n,ariaLabel:r,name:l,open:m,onPointerDown:c,onToggle:d,children:T,...x},y)=>{let P=useCallback(h=>{c?.(h);},[c]),C=useCallback(h=>{d?.(h);},[d]);return u.createElement(a,{as:"details",styles:s,classes:n,onToggle:C,ref:y,open:m,"aria-label":r,name:l,...x},u.createElement(a,{as:"summary",onPointerDown:P},t,e),u.createElement(a,{as:"section"},T))});ye.displayName="Details";
 
-export { ce as Article, pe as Aside, de as Details, ae as Footer, ne as Header, F as Img, T as Landmarks, re as Main, ie as Section, me as Tag, H as TextToSpeech };
+export { ge as Article, fe as Aside, A as Badge, ye as Details, de as Footer, ce as Header, M as Img, S as Landmarks, me as Main, ue as Section, xe as Tag, z as TextToSpeech };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map