@fpkit/acss 0.5.11 → 0.5.13

package/libs/components/tables/table.d.ts

@@ -0,0 +1,36 @@
+import { C as ComponentProps } from '../../component-props-a8a2f97e.js';
+import React__default from 'react';
+
+interface TableProps extends ComponentProps {
+    tblHead: React__default.ReactNode;
+    tblBody: React__default.ReactNode;
+    tblCaption?: React__default.ReactNode;
+}
+type dataType = {
+    id: number;
+    items: string[];
+}[];
+/**
+ * Render the `thead` by passing an array of names
+ */
+declare const RenderHead: {
+    (data: []): React__default.JSX.Element;
+    displayName: string;
+};
+/**
+ * Render the table body `tr`, `td` with the data provided
+ */
+declare const RenderBody: {
+    (data: {}[]): React__default.JSX.Element;
+    displayName: string;
+};
+/**
+ * Render the table placing `caption`, `thead` and `tbody` in the correct order
+ * caption is optional
+ */
+declare const RenderTable: {
+    ({ tblBody, tblCaption, tblHead }: TableProps): React__default.JSX.Element;
+    displayName: string;
+};
+
+export { RenderBody, RenderHead, RenderTable, TableProps, dataType };

package/libs/components/tables/table.js

@@ -0,0 +1,4 @@
+export { h as RenderBody, g as RenderHead, i as RenderTable } from '../../chunk-5M57K4SW.js';
+import '../../chunk-P7TTEYCD.js';
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=table.js.map

package/libs/components/tables/table.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":""}

package/libs/components/text/text.cjs

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var chunkB7F5FS6D_cjs = require('../../chunk-B7F5FS6D.cjs');
+require('../../chunk-L75OQKEI.cjs');
+
+
+
+Object.defineProperty(exports, 'Text', {
+	enumerable: true,
+	get: function () { return chunkB7F5FS6D_cjs.a; }
+});
+Object.defineProperty(exports, 'Title', {
+	enumerable: true,
+	get: function () { return chunkB7F5FS6D_cjs.b; }
+});
+Object.defineProperty(exports, 'default', {
+	enumerable: true,
+	get: function () { return chunkB7F5FS6D_cjs.c; }
+});
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=text.cjs.map

package/libs/components/text/text.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":""}

package/libs/components/text/text.d.cts

@@ -0,0 +1,30 @@
+import React__default from 'react';
+import { U as UI } from '../../ui-645f95b5.js';
+
+type InheritedProps = React__default.ComponentProps<typeof UI>;
+type TextElements = 'a' | 'b' | 'blockquote' | 'b' | 'blockquote' | 'cite' | 'code' | 'em' | 'i' | 'em' | 'i' | 'kbd' | 'mark' | 'p' | 's' | 'small' | 'span' | 'span' | 'strong' | 'mark' | 'p' | 's' | 'small' | 'span' | 'span' | 'strong' | 'sub' | 'sup' | 'time' | 'time' | 'u';
+type TextProps = {
+    /**
+     * Text element to to use
+     * Text element to to use
+     */
+    elm?: TextElements;
+    /** Pass a text element or string */
+    text?: string;
+} & InheritedProps;
+declare const Text: {
+    ({ elm, id, text, styles, classes, children, ...props }: TextProps): React__default.JSX.Element;
+    displayName: string;
+};
+type TitleProps = {
+    /**
+     * HTML headings
+     */
+    elm?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+} & InheritedProps;
+declare const Title: {
+    ({ elm, id, children, styles, classes, ...props }: TitleProps): React__default.JSX.Element;
+    displayName: string;
+};
+
+export { Text, TextProps, Title, Text as default };

package/libs/components/text/text.d.ts

@@ -0,0 +1,30 @@
+import React__default from 'react';
+import { U as UI } from '../../ui-645f95b5.js';
+
+type InheritedProps = React__default.ComponentProps<typeof UI>;
+type TextElements = 'a' | 'b' | 'blockquote' | 'b' | 'blockquote' | 'cite' | 'code' | 'em' | 'i' | 'em' | 'i' | 'kbd' | 'mark' | 'p' | 's' | 'small' | 'span' | 'span' | 'strong' | 'mark' | 'p' | 's' | 'small' | 'span' | 'span' | 'strong' | 'sub' | 'sup' | 'time' | 'time' | 'u';
+type TextProps = {
+    /**
+     * Text element to to use
+     * Text element to to use
+     */
+    elm?: TextElements;
+    /** Pass a text element or string */
+    text?: string;
+} & InheritedProps;
+declare const Text: {
+    ({ elm, id, text, styles, classes, children, ...props }: TextProps): React__default.JSX.Element;
+    displayName: string;
+};
+type TitleProps = {
+    /**
+     * HTML headings
+     */
+    elm?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+} & InheritedProps;
+declare const Title: {
+    ({ elm, id, children, styles, classes, ...props }: TitleProps): React__default.JSX.Element;
+    displayName: string;
+};
+
+export { Text, TextProps, Title, Text as default };

package/libs/components/text/text.js

@@ -0,0 +1,4 @@
+export { a as Text, b as Title, c as default } from '../../chunk-NGTJDDFO.js';
+import '../../chunk-KUKIVRC2.js';
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=text.js.map

package/libs/components/text/text.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":""}

package/libs/heading-3648c538.d.ts

@@ -0,0 +1,250 @@
+import React__default from 'react';
+import { U as UI } from './ui-645f95b5.js';
+
+/**
+ * Valid HTML heading levels for semantic document structure.
+ *
+ * @remarks
+ * Heading levels establish the document outline and hierarchy for screen readers.
+ * Always maintain proper heading order (don't skip levels) for WCAG 2.1 compliance.
+ *
+ * @example
+ * // ✅ GOOD: Proper heading hierarchy
+ * <Title level="h1">Main Page Title</Title>
+ * <Title level="h2">Section Heading</Title>
+ * <Title level="h3">Subsection Heading</Title>
+ *
+ * @example
+ * // ❌ BAD: Skipping heading levels
+ * <Title level="h1">Main Title</Title>
+ * <Title level="h4">Skipped h2 and h3</Title>
+ */
+type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+/**
+ * Props for the Title component.
+ *
+ * @typeParam TLevel - The heading level to render (h1-h6)
+ *
+ * @property {HeadingLevel} level - The semantic heading level (h1-h6). Defaults to "h2".
+ * @property {React.ReactNode} children - The text or elements to render inside the heading.
+ * @property {string} [id] - Unique identifier for the heading, useful for anchor links.
+ * @property {React.CSSProperties} [styles] - Inline styles to apply to the heading.
+ * @property {string} [ui] - Data attribute for UI framework styling hooks.
+ * @property {string} [className] - CSS class names to apply.
+ *
+ * @remarks
+ * This interface extends the polymorphic UI component props, providing full access
+ * to native HTML heading attributes and ARIA properties for accessibility.
+ *
+ * For AI assistants: This component ensures semantic HTML structure for document
+ * outlines, which is critical for screen reader navigation and SEO.
+ */
+type TitleProps$1 = {
+    /**
+     * The semantic heading level to render.
+     *
+     * @default "h2"
+     *
+     * @remarks
+     * Choose the appropriate level based on your document structure:
+     * - h1: Page title (typically one per page)
+     * - h2: Major sections
+     * - h3-h6: Subsections and nested content
+     *
+     * WCAG 2.1 requires proper heading hierarchy for screen reader users.
+     */
+    level?: HeadingLevel;
+    /**
+     * The content to display in the heading.
+     *
+     * @remarks
+     * Can be text, elements, or a combination. Ensure text content is meaningful
+     * and descriptive for users navigating with screen readers.
+     */
+    children: React__default.ReactNode;
+    /**
+     * Unique identifier for the heading element.
+     *
+     * @remarks
+     * Useful for:
+     * - Creating anchor links to sections
+     * - ARIA relationships (aria-labelledby, aria-describedby)
+     * - Testing and automation
+     */
+    id?: string;
+    /**
+     * Data attribute for UI framework styling hooks.
+     *
+     * @remarks
+     * Used by fpkit's CSS system to apply component-specific styles.
+     * Automatically prefixed with "data-ui" when rendered.
+     */
+    ui?: string;
+    /**
+     * CSS class names to apply to the heading.
+     *
+     * @remarks
+     * Prefer using the `ui` prop for fpkit styling, and this for
+     * utility classes or custom overrides.
+     */
+    className?: string;
+} & React__default.ComponentPropsWithoutRef<typeof UI>;
+/**
+ * Title - A semantic heading component for document structure and hierarchy.
+ *
+ * The Title component renders semantic HTML headings (h1-h6) with proper
+ * accessibility support. It ensures WCAG 2.1 AA compliance by maintaining
+ * semantic document structure for screen readers and assistive technologies.
+ *
+ * ## Key Features
+ *
+ * - **Semantic HTML**: Renders actual heading elements (h1-h6) for proper document outline
+ * - **Accessibility**: Full ARIA support and keyboard navigation
+ * - **Flexible Styling**: Supports fpkit's UI system, custom classes, and inline styles
+ * - **Type Safety**: Fully typed with TypeScript for developer experience
+ * - **Performance**: Memoized to prevent unnecessary re-renders
+ *
+ * ## Accessibility Considerations
+ *
+ * ### WCAG 2.1 AA Compliance
+ *
+ * - **1.3.1 Info and Relationships (Level A)**: Semantic heading elements preserve
+ *   document structure for screen readers
+ * - **2.4.6 Headings and Labels (Level AA)**: Headings should be descriptive and
+ *   properly ordered
+ * - **2.4.10 Section Headings (Level AAA)**: Use headings to organize content
+ *
+ * ### Best Practices
+ *
+ * 1. **Maintain Heading Hierarchy**: Don't skip levels (e.g., h1 → h3)
+ * 2. **One h1 Per Page**: Use h1 for the main page title only
+ * 3. **Descriptive Text**: Headings should clearly describe the following content
+ * 4. **Avoid Empty Headings**: Always provide meaningful text content
+ *
+ * ## Usage Examples
+ *
+ * @example
+ * // Basic usage with default h2
+ * <Title>Section Heading</Title>
+ *
+ * @example
+ * // Page title with explicit h1
+ * <Title level="h1">Welcome to Our Application</Title>
+ *
+ * @example
+ * // Subsection with custom styling
+ * <Title
+ *   level="h3"
+ *   id="getting-started"
+ *   className="text-primary"
+ * >
+ *   Getting Started
+ * </Title>
+ *
+ * @example
+ * // With fpkit UI data attribute
+ * <Title level="h2" ui="section-title">
+ *   Features Overview
+ * </Title>
+ *
+ * @example
+ * // Accessible heading with aria-label for context
+ * <Title level="h2" aria-label="User dashboard overview">
+ *   Dashboard
+ * </Title>
+ *
+ * @example
+ * // Complex heading with mixed content
+ * <Title level="h2" id="stats">
+ *   <Icon name="chart" aria-hidden="true" />
+ *   <span>Statistics</span>
+ * </Title>
+ *
+ * @example
+ * // ✅ GOOD: Proper heading hierarchy
+ * <Title level="h1">Page Title</Title>
+ * <Title level="h2">Main Section</Title>
+ * <Title level="h3">Subsection</Title>
+ *
+ * @example
+ * // ❌ BAD: Skipping heading levels (accessibility violation)
+ * <Title level="h1">Page Title</Title>
+ * <Title level="h4">Skipped h2 and h3</Title>
+ *
+ * @param {TitleProps} props - Component props
+ * @returns {React.ReactElement} A semantic heading element
+ *
+ * @see {@link https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html WCAG 1.3.1}
+ * @see {@link https://www.w3.org/WAI/WCAG21/Understanding/headings-and-labels.html WCAG 2.4.6}
+ */
+declare const Title: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<Omit<TitleProps$1, "ref"> & React__default.RefAttributes<HTMLHeadingElement>>>;
+
+/**
+ * @deprecated Use `Title` component instead. This component will be removed in v3.0.0.
+ *
+ * @remarks
+ * The `Heading` component has been deprecated in favor of the new `Title` component
+ * which offers improved API design and better accessibility features.
+ *
+ * **Migration Guide:**
+ * - Rename `Heading` → `Title`
+ * - Rename prop `type` → `level`
+ * - Default level changed from `h3` → `h2` (update if you relied on the default)
+ *
+ * @example
+ * // Before (deprecated):
+ * <Heading type="h2">Section Title</Heading>
+ *
+ * // After:
+ * <Title level="h2">Section Title</Title>
+ *
+ * @see {@link Title} for the new component
+ */
+type TitleProps = {
+    /**
+     * @deprecated Use `level` prop on the `Title` component instead.
+     */
+    children: React__default.ReactNode;
+    /**
+     * @deprecated Use `level` prop on the `Title` component instead.
+     */
+    type?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+    /**
+     * @deprecated Use `ui` prop on the `Title` component.
+     */
+    ui?: string;
+} & Omit<React__default.ComponentPropsWithoutRef<typeof Title>, 'level'>;
+/**
+ * Heading - Deprecated component wrapper for Title.
+ *
+ * @deprecated Use {@link Title} component instead. Will be removed in v3.0.0.
+ *
+ * This component provides backwards compatibility for existing code using
+ * the old `Heading` component API. It forwards all props to the new `Title`
+ * component with appropriate prop name mapping.
+ *
+ * **Breaking Changes in v3.0.0:**
+ * - This component will be removed
+ * - Migrate to `Title` component before upgrading
+ *
+ * **Migration Steps:**
+ * 1. Replace all `<Heading>` imports with `<Title>`
+ * 2. Rename `type` prop to `level`
+ * 3. Review default behavior (default changed from h3 to h2)
+ *
+ * @example
+ * // Old API (still works but deprecated):
+ * import { Heading } from '@fpkit/acss';
+ * <Heading type="h2">Section</Heading>
+ *
+ * @example
+ * // New API (recommended):
+ * import { Title } from '@fpkit/acss';
+ * <Title level="h2">Section</Title>
+ *
+ * @param {TitleProps} props - Component props (maps old API to new)
+ * @returns {React.ReactElement} The rendered Title component
+ */
+declare const Heading: React__default.ForwardRefExoticComponent<Omit<TitleProps, "ref"> & React__default.RefAttributes<HTMLHeadingElement>>;
+
+export { HeadingLevel as H, Title as T, TitleProps$1 as a, Heading as b, TitleProps as c };

package/libs/hooks.cjs

@@ -1,9 +1,16 @@
 'use strict';
 
+var chunkOK5QEIMD_cjs = require('./chunk-OK5QEIMD.cjs');
 var chunkPDD4N5P5_cjs = require('./chunk-PDD4N5P5.cjs');
+require('./chunk-5S4ORA4C.cjs');
+require('./chunk-L75OQKEI.cjs');
 
 
 
+Object.defineProperty(exports, 'useBreadcrumbSegments', {
+	enumerable: true,
+	get: function () { return chunkOK5QEIMD_cjs.a; }
+});
 Object.defineProperty(exports, 'usePopover', {
 	enumerable: true,
 	get: function () { return chunkPDD4N5P5_cjs.a; }

package/libs/hooks.d.cts

@@ -1,3 +1,8 @@
+export { useBreadcrumbSegments } from './components/breadcrumbs/breadcrumb.cjs';
+import 'react';
+import './ui-645f95b5.js';
+import './components/link/link.cjs';
+
 type Position = {
     /**
      * @description This is the top position of the popover.

package/libs/hooks.d.ts

@@ -1,3 +1,8 @@
+export { useBreadcrumbSegments } from './components/breadcrumbs/breadcrumb.js';
+import 'react';
+import './ui-645f95b5.js';
+import './components/link/link.js';
+
 type Position = {
     /**
      * @description This is the top position of the popover.

package/libs/hooks.js

@@ -1,3 +1,6 @@
+export { a as useBreadcrumbSegments } from './chunk-GZ4QFPRY.js';
 export { a as usePopover } from './chunk-GCGKYLDG.js';
+import './chunk-TYRCEX2L.js';
+import './chunk-KUKIVRC2.js';
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=hooks.js.map

package/libs/icons.cjs

@@ -1,12 +1,13 @@
 'use strict';
 
-var chunkSVS4MX3U_cjs = require('./chunk-SVS4MX3U.cjs');
+var chunk3MKLDCKQ_cjs = require('./chunk-3MKLDCKQ.cjs');
+require('./chunk-L75OQKEI.cjs');
 
 
 
 Object.defineProperty(exports, 'Icon', {
 	enumerable: true,
-	get: function () { return chunkSVS4MX3U_cjs.b; }
+	get: function () { return chunk3MKLDCKQ_cjs.a; }
 });
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=icons.cjs.map

package/libs/icons.d.cts

@@ -1,2 +1,4 @@
-export { I as Icon, a as IconProps } from './icons-31ace3de.js';
+export { default as Icon, IconProps } from './components/icons/icon.cjs';
+import './component-props-a8a2f97e.js';
 import 'react';
+import './ui-645f95b5.js';

package/libs/icons.d.ts

@@ -1,2 +1,4 @@
-export { I as Icon, a as IconProps } from './icons-31ace3de.js';
+export { default as Icon, IconProps } from './components/icons/icon.js';
+import './component-props-a8a2f97e.js';
 import 'react';
+import './ui-645f95b5.js';

package/libs/icons.js

@@ -1,3 +1,4 @@
-export { b as Icon } from './chunk-PWVRDQ3R.js';
+export { a as Icon } from './chunk-772NRB75.js';
+import './chunk-KUKIVRC2.js';
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=icons.js.map