@lifesg/react-design-system 4.0.0-alpha.5 → 4.0.0-alpha.7

package/smart-app-banner/types.d.ts

@@ -1,19 +1,75 @@
+/**
+ * Props for the `SmartAppBanner` component.
+ */
 export interface SmartAppBannerProps {
+    /**
+     * Controls whether the banner is visible.
+     */
     show: boolean;
+    /**
+     * Destination URL opened in a new tab when the banner or CTA button is clicked.
+     */
     href: string;
+    /**
+     * Text, labels, and rating content rendered inside the banner.
+     */
     content: SmartAppBannerContentProps;
+    /**
+     * Top offset in pixels applied to the banner's position.
+     *
+     * @default 0
+     */
     offset?: number | undefined;
+    /**
+     * URL of the app icon image displayed in the banner.
+     *
+     * @default "https://assets.life.gov.sg/react-design-system/img/app-icon/app-icon.png"
+     */
     icon?: string | undefined;
+    /**
+     * Applies a slide-in entrance animation to the banner.
+     *
+     * @default false
+     */
     animated?: boolean | undefined;
     className?: string | undefined;
+    /**
+     * Called when the user clicks the dismiss button.
+     */
     onDismiss: () => void;
+    /**
+     * Called when the user clicks on the banner or the CTA button.
+     */
     onClick?: (() => void) | undefined;
 }
+/**
+ * Text content and accessible labels rendered inside `SmartAppBanner`.
+ */
 export interface SmartAppBannerContentProps {
+    /**
+     * Primary heading text, typically the app name.
+     */
     title: string;
+    /**
+     * Label text for the CTA button.
+     */
     buttonLabel: string;
+    /**
+     * Alt text for the app icon image.
+     *
+     * @default ""
+     */
     iconAriaLabel?: string | undefined;
+    /**
+     * Accessible label for the CTA button. Falls back to `buttonLabel` when omitted.
+     */
     buttonAriaLabel?: string | undefined;
+    /**
+     * Secondary description text displayed beneath the title.
+     */
     message?: string | undefined;
+    /**
+     * App store rating rendered as up to 5 star icons.
+     */
     numberOfStars: number;
 }

package/tab/tab.d.ts

@@ -1,8 +1,15 @@
 import type { TabProps } from "./types";
+/**
+ * A tabbed-panel layout that switches visible content by selecting a tab link.
+ *
+ * Use `Tab` to organise content into labelled panels where only one panel is
+ * visible at a time. Compose with `Tab.Item` to define each panel.
+ */
 export declare const Tab: {
     ({ children, currentActive: currentActiveIndex, initialActive, onTabClick, "data-testid": testId, className, fullWidthIndicatorLine, fadeColor, ...otherProps }: TabProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 } & {
+    /** Renders an individual content panel within a `Tab`. */
     Item: {
         ({ index, children, titleAddon: _titleAddon, ...otherProps }: import("./tab-item").TabItemComponentProps): import("react/jsx-runtime").JSX.Element | null;
         displayName: string;

package/tab/tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab.js","sources":["../../src/tab/tab.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type { ReactElement } from \"react\";\nimport { Children, cloneElement, useEffect, useMemo, useState } from \"react\";\n\nimport * as styles from \"./tab.styles\";\nimport type { TabLinkProps } from \"./tab-context\";\nimport { TabContext } from \"./tab-context\";\nimport { TabItem } from \"./tab-item\";\nimport { TabLinkChain } from \"./tab-link-chain\";\nimport type { TabItemProps, TabProps } from \"./types\";\n\n// =============================================================================\n// COMPONENT\n// =============================================================================\nconst TabBase = ({\n    children,\n    currentActive: currentActiveIndex,\n    initialActive = 0,\n    onTabClick,\n    \"data-testid\": testId,\n    className,\n    fullWidthIndicatorLine,\n    fadeColor,\n    ...otherProps\n}: TabProps) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const [currentActive, setCurrentActive] = useState<number>(\n        currentActiveIndex || initialActive\n    );\n\n    const tabLinks = useMemo(() => {\n        const validChildren = Children.toArray(children).filter(\n            Boolean\n        ) as ReactElement<TabItemProps>[];\n\n        return validChildren.map((child) => {\n            return {\n                title: child.props.title,\n                width: child.props.width,\n                titleAddon: child.props.titleAddon,\n            };\n        }) as TabLinkProps[];\n    }, [children]);\n\n    const tabContextValue = useMemo(\n        () => ({\n            tabLinks,\n            currentActiveIndex: currentActive,\n            setCurrentActiveIndex: setCurrentActive,\n        }),\n        [currentActive, tabLinks]\n    );\n\n    // =========================================================================\n    // Effects\n    // =========================================================================\n    useEffect(() => {\n        if (typeof currentActiveIndex === \"number\") {\n            setCurrentActive(currentActiveIndex);\n        }\n    }, [currentActiveIndex]);\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderChildren = () => {\n        const validChildren = Children.toArray(children).filter(Boolean);\n\n        return validChildren.map((child, index) => {\n            const element = child as ReactElement<TabItemProps>;\n\n            // eslint-disable-next-line @typescript-eslint/no-explicit-any\n            return cloneElement(child as ReactElement<any>, {\n                key: element.key ?? element.props.title,\n                index,\n            });\n        });\n    };\n\n    return (\n        <div\n            data-testid={testId}\n            className={clsx(styles.wrapper, className)}\n            {...otherProps}\n        >\n            <TabContext.Provider value={tabContextValue}>\n                <TabLinkChain\n                    controlledMode={typeof currentActiveIndex === \"number\"}\n                    onTabClick={onTabClick}\n                    data-testid={`${testId}-tabs`}\n                    fullWidthIndicatorLine={fullWidthIndicatorLine}\n                    fadeColor={fadeColor}\n                />\n                {renderChildren()}\n            </TabContext.Provider>\n        </div>\n    );\n};\n\nTabBase.displayName = \"Tab\";\n\n// =============================================================================\n// EXPORTS\n// =============================================================================\nexport const Tab = Object.assign(TabBase, {\n    Item: TabItem,\n});\n"],"names":["TabBase","_a","children","currentActive","currentActiveIndex","initialActive","onTabClick","testId","className","fullWidthIndicatorLine","fadeColor","otherProps","__rest","setCurrentActive","useState","tabLinks","useMemo","Children","toArray","filter","Boolean","map","child","title","props","width","titleAddon","tabContextValue","setCurrentActiveIndex","useEffect","_jsx","Object","assign","clsx","styles.wrapper","_jsxs","TabContext","Provider","value","TabLinkChain","controlledMode","index","element","cloneElement","key","displayName","Tab","Item","TabItem"],"mappings":"qYAcA,MAAMA,EAAWC,QAAAC,SACbA,EACAC,cAAeC,EAAkBC,cACjCA,EAAgB,EAACC,WACjBA,EACA,cAAeC,EAAMC,UACrBA,EAASC,uBACTA,EAAsBC,UACtBA,GAAST,EACNU,EAAUC,EAAAX,EATA,CAAA,WAAA,gBAAA,gBAAA,aAAA,cAAA,YAAA,yBAAA,cAcb,MAAOE,EAAeU,GAAoBC,EACtCV,GAAsBC,GAGpBU,EAAWC,GAAQ,IACCC,EAASC,QAAQhB,GAAUiB,OAC7CC,SAGiBC,KAAKC,IACf,CACHC,MAAOD,EAAME,MAAMD,MACnBE,MAAOH,EAAME,MAAMC,MACnBC,WAAYJ,EAAME,MAAME,gBAGjC,CAACxB,IAEEyB,EAAkBX,GACpB,KAAA,CACID,WACAX,mBAAoBD,EACpByB,sBAAuBf,KAE3B,CAACV,EAAeY,IAMpBc,GAAU,KAC4B,iBAAvBzB,GACPS,EAAiBT,EACrB,GACD,CAACA,IAmBJ,OACI0B,EAAA,MAAAC,OAAAC,OAAA,CAAA,cACiBzB,EACbC,UAAWyB,EAAKC,EAAgB1B,IAC5BG,EAAU,CAAAT,SAEdiC,EAACC,EAAWC,SAAQ,CAACC,MAAOX,EAAezB,SAAA,CACvC4B,EAACS,EAAY,CACTC,eAA8C,iBAAvBpC,EACvBE,WAAYA,EAAU,cACT,GAAGC,SAChBE,uBAAwBA,EACxBC,UAAWA,IAzBDO,EAASC,QAAQhB,GAAUiB,OAAOC,SAEnCC,KAAI,CAACC,EAAOmB,WAC7B,MAAMC,EAAUpB,EAGhB,OAAOqB,EAAarB,EAA4B,CAC5CsB,YAAK3C,EAAAyC,EAAQE,mBAAOF,EAAQlB,MAAMD,MAClCkB,SACF,SAoBA,EAIdzC,EAAQ6C,YAAc,YAKTC,EAAMf,OAAOC,OAAOhC,EAAS,CACtC+C,KAAMC"}
+{"version":3,"file":"tab.js","sources":["../../src/tab/tab.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type { ReactElement } from \"react\";\nimport { Children, cloneElement, useEffect, useMemo, useState } from \"react\";\n\nimport * as styles from \"./tab.styles\";\nimport type { TabLinkProps } from \"./tab-context\";\nimport { TabContext } from \"./tab-context\";\nimport { TabItem } from \"./tab-item\";\nimport { TabLinkChain } from \"./tab-link-chain\";\nimport type { TabItemProps, TabProps } from \"./types\";\n\n// =============================================================================\n// COMPONENT\n// =============================================================================\nconst TabBase = ({\n    children,\n    currentActive: currentActiveIndex,\n    initialActive = 0,\n    onTabClick,\n    \"data-testid\": testId,\n    className,\n    fullWidthIndicatorLine,\n    fadeColor,\n    ...otherProps\n}: TabProps) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const [currentActive, setCurrentActive] = useState<number>(\n        currentActiveIndex || initialActive\n    );\n\n    const tabLinks = useMemo(() => {\n        const validChildren = Children.toArray(children).filter(\n            Boolean\n        ) as ReactElement<TabItemProps>[];\n\n        return validChildren.map((child) => {\n            return {\n                title: child.props.title,\n                width: child.props.width,\n                titleAddon: child.props.titleAddon,\n            };\n        }) as TabLinkProps[];\n    }, [children]);\n\n    const tabContextValue = useMemo(\n        () => ({\n            tabLinks,\n            currentActiveIndex: currentActive,\n            setCurrentActiveIndex: setCurrentActive,\n        }),\n        [currentActive, tabLinks]\n    );\n\n    // =========================================================================\n    // Effects\n    // =========================================================================\n    useEffect(() => {\n        if (typeof currentActiveIndex === \"number\") {\n            setCurrentActive(currentActiveIndex);\n        }\n    }, [currentActiveIndex]);\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderChildren = () => {\n        const validChildren = Children.toArray(children).filter(Boolean);\n\n        return validChildren.map((child, index) => {\n            const element = child as ReactElement<TabItemProps>;\n\n            // eslint-disable-next-line @typescript-eslint/no-explicit-any\n            return cloneElement(child as ReactElement<any>, {\n                key: element.key ?? element.props.title,\n                index,\n            });\n        });\n    };\n\n    return (\n        <div\n            data-testid={testId}\n            className={clsx(styles.wrapper, className)}\n            {...otherProps}\n        >\n            <TabContext.Provider value={tabContextValue}>\n                <TabLinkChain\n                    controlledMode={typeof currentActiveIndex === \"number\"}\n                    onTabClick={onTabClick}\n                    data-testid={`${testId}-tabs`}\n                    fullWidthIndicatorLine={fullWidthIndicatorLine}\n                    fadeColor={fadeColor}\n                />\n                {renderChildren()}\n            </TabContext.Provider>\n        </div>\n    );\n};\n\nTabBase.displayName = \"Tab\";\n\n// =============================================================================\n// EXPORTS\n// =============================================================================\n// @catalog\n/**\n * A tabbed-panel layout that switches visible content by selecting a tab link.\n *\n * Use `Tab` to organise content into labelled panels where only one panel is\n * visible at a time. Compose with `Tab.Item` to define each panel.\n */\nexport const Tab = Object.assign(TabBase, {\n    /** Renders an individual content panel within a `Tab`. */\n    Item: TabItem,\n});\n"],"names":["TabBase","_a","children","currentActive","currentActiveIndex","initialActive","onTabClick","testId","className","fullWidthIndicatorLine","fadeColor","otherProps","__rest","setCurrentActive","useState","tabLinks","useMemo","Children","toArray","filter","Boolean","map","child","title","props","width","titleAddon","tabContextValue","setCurrentActiveIndex","useEffect","_jsx","Object","assign","clsx","styles.wrapper","_jsxs","TabContext","Provider","value","TabLinkChain","controlledMode","index","element","cloneElement","key","displayName","Tab","Item","TabItem"],"mappings":"qYAcA,MAAMA,EAAWC,QAAAC,SACbA,EACAC,cAAeC,EAAkBC,cACjCA,EAAgB,EAACC,WACjBA,EACA,cAAeC,EAAMC,UACrBA,EAASC,uBACTA,EAAsBC,UACtBA,GAAST,EACNU,EAAUC,EAAAX,EATA,CAAA,WAAA,gBAAA,gBAAA,aAAA,cAAA,YAAA,yBAAA,cAcb,MAAOE,EAAeU,GAAoBC,EACtCV,GAAsBC,GAGpBU,EAAWC,GAAQ,IACCC,EAASC,QAAQhB,GAAUiB,OAC7CC,SAGiBC,KAAKC,IACf,CACHC,MAAOD,EAAME,MAAMD,MACnBE,MAAOH,EAAME,MAAMC,MACnBC,WAAYJ,EAAME,MAAME,gBAGjC,CAACxB,IAEEyB,EAAkBX,GACpB,KAAA,CACID,WACAX,mBAAoBD,EACpByB,sBAAuBf,KAE3B,CAACV,EAAeY,IAMpBc,GAAU,KAC4B,iBAAvBzB,GACPS,EAAiBT,EACrB,GACD,CAACA,IAmBJ,OACI0B,EAAA,MAAAC,OAAAC,OAAA,CAAA,cACiBzB,EACbC,UAAWyB,EAAKC,EAAgB1B,IAC5BG,EAAU,CAAAT,SAEdiC,EAACC,EAAWC,SAAQ,CAACC,MAAOX,EAAezB,SAAA,CACvC4B,EAACS,EAAY,CACTC,eAA8C,iBAAvBpC,EACvBE,WAAYA,EAAU,cACT,GAAGC,SAChBE,uBAAwBA,EACxBC,UAAWA,IAzBDO,EAASC,QAAQhB,GAAUiB,OAAOC,SAEnCC,KAAI,CAACC,EAAOmB,WAC7B,MAAMC,EAAUpB,EAGhB,OAAOqB,EAAarB,EAA4B,CAC5CsB,YAAK3C,EAAAyC,EAAQE,mBAAOF,EAAQlB,MAAMD,MAClCkB,SACF,SAoBA,EAIdzC,EAAQ6C,YAAc,YAYTC,EAAMf,OAAOC,OAAOhC,EAAS,CAEtC+C,KAAMC"}

package/tab/types.d.ts

@@ -1,33 +1,82 @@
 import type { FadeColorSet } from "../shared/fade-wrapper";
+/**
+ * Props for the `Tab` component.
+ */
 export interface TabProps {
     children: JSX.Element | JSX.Element[];
-    /** Specify the initial tab index that is to be displayed */
+    /**
+     * Zero-based index of the tab panel displayed on first render.
+     *
+     * Ignored when `currentActive` is provided.
+     *
+     * @default 0
+     */
     initialActive?: number | undefined;
     /**
-     * Specify the current tab index that is to be displayed. By specifying
-     * this prop, the tab rendering will be manually controlled by you
+     * Zero-based index of the currently active tab panel.
+     *
+     * When provided, the component operates in controlled mode — the caller is
+     * responsible for updating this value in response to `onTabClick` to
+     * reflect tab changes.
      */
     currentActive?: number;
     className?: string | undefined;
     id?: string | undefined;
     "data-testid"?: string | undefined;
+    /**
+     * Called when the user clicks a tab link.
+     *
+     * @param title The `title` of the clicked `Tab.Item`.
+     * @param index The zero-based index of the clicked `Tab.Item`.
+     */
     onTabClick?: ((title: string, index: number) => void) | undefined;
+    /**
+     * Extends all tab indicator lines to the full width
+     * of the tab bar instead of matching only the tab link width.
+     *
+     * @default false
+     */
     fullWidthIndicatorLine?: boolean | undefined;
+    /**
+     * Background color(s) used for the fade overlays at the edges of the
+     * scrollable tab link bar.
+     *
+     * Pass a `string[]` to apply the same gradient stop colors on both edges,
+     * or a `FadeColorSet` to specify left and right edges independently.
+     */
     fadeColor?: string[] | FadeColorSet | undefined;
 }
+/**
+ * Props for the `Tab.Item` sub-component.
+ */
 export interface TabItemProps {
+    /**
+     * Text label rendered in the tab link bar for this panel.
+     */
     title: string;
     children: JSX.Element | JSX.Element[];
-    /** Custom addon content displayed next to the tab title */
+    /**
+     * Optional addon element rendered alongside the tab title in the link bar.
+     */
     titleAddon?: TitleAddonProps | undefined;
     className?: string | undefined;
     id?: string | undefined;
     "data-testid"?: string | undefined;
+    /**
+     * Explicit width for this tab link in the tab bar. Accepts any valid CSS width value.
+     */
     width?: string | undefined;
 }
+/**
+ * Configuration for the optional addon element displayed next to a tab title.
+ */
 export interface TitleAddonProps {
-    /** addon content */
+    /** The element rendered as the addon. */
     content: JSX.Element;
-    /** position of the addon content, defaults to "right" */
+    /**
+     * Which side of the tab title the addon appears on.
+     *
+     * @default "right"
+     */
     position?: "left" | "right" | undefined;
 }

package/table/table.d.ts

@@ -1,30 +1,52 @@
-export declare const Table: (({ children, ...props }: React.TableHTMLAttributes<HTMLTableElement>) => import("react/jsx-runtime").JSX.Element) & {
+import type { TableBodyProps, TableCellProps, TableContainerProps, TableHeaderProps, TableHeadProps, TableRowProps, TableTableProps } from "./types";
+/**
+ * A styled HTML table with a scrollable container wrapper.
+ *
+ * Use `Table` when displaying structured tabular data. The default export
+ * wraps content in `Table.Container` and `Table.Table` automatically. For
+ * full layout control, compose the sub-components directly:
+ * - `Table.Container` — scrollable wrapper div
+ * - `Table.Table` — the bare `<table>` element
+ * - `Table.Head` — the `<thead>` section
+ * - `Table.Body` — the `<tbody>` section
+ * - `Table.Row` — a `<tr>` row within the body
+ * - `Table.Cell` — a `<td>` data cell
+ * - `Table.HeaderCell` — a `<th>` column header cell
+ */
+export declare const Table: (({ children, ...props }: TableTableProps) => import("react/jsx-runtime").JSX.Element) & {
+    /** Scrollable wrapper div that contains a `Table.Table`. */
     Container: {
-        ({ children, className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+        ({ children, className, ...props }: TableContainerProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
+    /** The bare `<table>` element. Use directly when you need to place the table inside a custom container. */
     Table: {
-        ({ children, className, ...props }: React.TableHTMLAttributes<HTMLTableElement>): import("react/jsx-runtime").JSX.Element;
+        ({ children, className, ...props }: TableTableProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
+    /** Renders the `<thead>` section of the table. */
     Head: {
-        ({ children, ...props }: React.HTMLAttributes<HTMLTableSectionElement>): import("react/jsx-runtime").JSX.Element;
+        ({ children, ...props }: TableHeadProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
+    /** Renders the `<tbody>` section of the table. */
     Body: {
-        ({ children, className, ...props }: React.HTMLAttributes<HTMLTableSectionElement>): import("react/jsx-runtime").JSX.Element;
+        ({ children, className, ...props }: TableBodyProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
+    /** Renders a `<tr>` row within a `Table.Body`. */
     Row: {
-        ({ children, className, ...props }: React.HTMLAttributes<HTMLTableRowElement>): import("react/jsx-runtime").JSX.Element;
+        ({ children, className, ...props }: TableRowProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
+    /** Renders a `<td>` data cell within a `Table.Row`. */
     Cell: {
-        ({ children, className, ...props }: React.TdHTMLAttributes<HTMLTableCellElement>): import("react/jsx-runtime").JSX.Element;
+        ({ children, className, ...props }: TableCellProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
+    /** Renders a `<th>` header cell within a `Table.Head` row. */
     HeaderCell: {
-        ({ children, className, ...props }: React.ThHTMLAttributes<HTMLTableCellElement>): import("react/jsx-runtime").JSX.Element;
+        ({ children, className, ...props }: TableHeaderProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
 };

package/table/table.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.js","sources":["../../src/table/table.tsx"],"sourcesContent":["import clsx from \"clsx\";\n\nimport * as styles from \"./table.styles\";\n\nconst Head = ({\n    children,\n    ...props\n}: React.HTMLAttributes<HTMLTableSectionElement>) => (\n    <thead {...props}>{children}</thead>\n);\nHead.displayName = \"Table.Head\";\n\nconst Body = ({\n    children,\n    className,\n    ...props\n}: React.HTMLAttributes<HTMLTableSectionElement>) => (\n    <tbody className={clsx(styles.tableBody, className)} {...props}>\n        {children}\n    </tbody>\n);\nBody.displayName = \"Table.Body\";\n\nconst Row = ({\n    children,\n    className,\n    ...props\n}: React.HTMLAttributes<HTMLTableRowElement>) => (\n    <tr className={clsx(styles.bodyRow, className)} {...props}>\n        {children}\n    </tr>\n);\nRow.displayName = \"Table.Row\";\n\nconst Cell = ({\n    children,\n    className,\n    ...props\n}: React.TdHTMLAttributes<HTMLTableCellElement>) => (\n    <td className={clsx(styles.bodyCell, className)} {...props}>\n        {children}\n    </td>\n);\nCell.displayName = \"Table.Cell\";\n\nconst Header = ({\n    children,\n    className,\n    ...props\n}: React.ThHTMLAttributes<HTMLTableCellElement>) => (\n    <th className={clsx(styles.headerCell, className)} {...props}>\n        {children}\n    </th>\n);\nHeader.displayName = \"Table.HeaderCell\";\n\nconst Container = ({\n    children,\n    className,\n    ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n    <div\n        className={clsx(styles.tableWrapper, className)}\n        data-testid=\"table-wrapper\"\n        {...props}\n    >\n        {children}\n    </div>\n);\nContainer.displayName = \"Table.Container\";\n\nconst TableEl = ({\n    children,\n    className,\n    ...props\n}: React.TableHTMLAttributes<HTMLTableElement>) => (\n    <table className={clsx(styles.tableComponent, className)} {...props}>\n        {children}\n    </table>\n);\nTableEl.displayName = \"Table.Table\";\n\nexport const Table = Object.assign(\n    ({ children, ...props }: React.TableHTMLAttributes<HTMLTableElement>) => (\n        <Container>\n            <TableEl {...props}>{children}</TableEl>\n        </Container>\n    ),\n    {\n        Container,\n        Table: TableEl,\n        Head,\n        Body,\n        Row,\n        Cell,\n        HeaderCell: Header,\n    }\n);\n"],"names":["Head","_a","children","props","__rest","_jsx","Object","assign","displayName","Body","className","clsx","styles.tableBody","Row","styles.bodyRow","Cell","styles.bodyCell","Header","styles.headerCell","Container","styles.tableWrapper","TableEl","styles.tableComponent","Table","HeaderCell"],"mappings":"0OAIA,MAAMA,EAAQC,IAAA,IAAAC,SACVA,GAAQD,EACLE,EAAKC,EAAAH,EAFE,cAGuC,OACjDI,EAAA,QAAAC,OAAAC,OAAA,GAAWJ,YAAQD,IAAiB,EAExCF,EAAKQ,YAAc,aAEnB,MAAMC,EAAQR,QAAAC,SACVA,EAAQQ,UACRA,GAAST,EACNE,EAAKC,EAAAH,EAHE,0BAIuC,OACjDI,EAAA,QAAAC,OAAAC,OAAA,CAAOG,UAAWC,EAAKC,EAAkBF,IAAgBP,YACpDD,IACG,EAEZO,EAAKD,YAAc,aAEnB,MAAMK,EAAOZ,QAAAC,SACTA,EAAQQ,UACRA,GAAST,EACNE,EAAKC,EAAAH,EAHC,0BAIoC,OAC7CI,EAAA,KAAAC,OAAAC,OAAA,CAAIG,UAAWC,EAAKG,EAAgBJ,IAAgBP,YAC/CD,IACA,EAETW,EAAIL,YAAc,YAElB,MAAMO,EAAQd,QAAAC,SACVA,EAAQQ,UACRA,GAAST,EACNE,EAAKC,EAAAH,EAHE,0BAIsC,OAChDI,EAAA,KAAAC,OAAAC,OAAA,CAAIG,UAAWC,EAAKK,EAAiBN,IAAgBP,YAChDD,IACA,EAETa,EAAKP,YAAc,aAEnB,MAAMS,EAAUhB,QAAAC,SACZA,EAAQQ,UACRA,GAAST,EACNE,EAAKC,EAAAH,EAHI,0BAIoC,OAChDI,EAAA,KAAAC,OAAAC,OAAA,CAAIG,UAAWC,EAAKO,EAAmBR,IAAgBP,YAClDD,IACA,EAETe,EAAOT,YAAc,mBAErB,MAAMW,EAAalB,QAAAC,SACfA,EAAQQ,UACRA,GAAST,EACNE,EAAKC,EAAAH,EAHO,0BAIyB,OACxCI,uBACIK,UAAWC,EAAKS,EAAqBV,GAAU,cACnC,iBACRP,YAEHD,IACC,EAEViB,EAAUX,YAAc,kBAExB,MAAMa,EAAWpB,QAAAC,SACbA,EAAQQ,UACRA,GAAST,EACNE,EAAKC,EAAAH,EAHK,0BAIkC,OAC/CI,EAAA,QAAAC,OAAAC,OAAA,CAAOG,UAAWC,EAAKW,EAAuBZ,IAAgBP,YACzDD,IACG,EAEZmB,EAAQb,YAAc,cAEf,MAAMe,EAAQjB,OAAOC,QACvBN,IAAA,IAAAC,SAAEA,GAAQD,EAAKE,EAAKC,EAAAH,EAApB,cAAwE,OACrEI,EAACc,EAAS,CAAAjB,SACNG,EAACgB,EAAOf,OAAAC,OAAA,CAAA,EAAKJ,EAAK,CAAAD,SAAGA,MACb,GAEhB,CACIiB,YACAI,MAAOF,EACPrB,OACAS,OACAI,MACAE,OACAS,WAAYP"}
+{"version":3,"file":"table.js","sources":["../../src/table/table.tsx"],"sourcesContent":["import clsx from \"clsx\";\n\nimport * as styles from \"./table.styles\";\nimport type {\n    TableBodyProps,\n    TableCellProps,\n    TableContainerProps,\n    TableHeaderProps,\n    TableHeadProps,\n    TableRowProps,\n    TableTableProps,\n} from \"./types\";\n\nconst Head = ({ children, ...props }: TableHeadProps) => (\n    <thead {...props}>{children}</thead>\n);\nHead.displayName = \"Table.Head\";\n\nconst Body = ({ children, className, ...props }: TableBodyProps) => (\n    <tbody className={clsx(styles.tableBody, className)} {...props}>\n        {children}\n    </tbody>\n);\nBody.displayName = \"Table.Body\";\n\nconst Row = ({ children, className, ...props }: TableRowProps) => (\n    <tr className={clsx(styles.bodyRow, className)} {...props}>\n        {children}\n    </tr>\n);\nRow.displayName = \"Table.Row\";\n\nconst Cell = ({ children, className, ...props }: TableCellProps) => (\n    <td className={clsx(styles.bodyCell, className)} {...props}>\n        {children}\n    </td>\n);\nCell.displayName = \"Table.Cell\";\n\nconst Header = ({ children, className, ...props }: TableHeaderProps) => (\n    <th className={clsx(styles.headerCell, className)} {...props}>\n        {children}\n    </th>\n);\nHeader.displayName = \"Table.HeaderCell\";\n\nconst Container = ({ children, className, ...props }: TableContainerProps) => (\n    <div\n        className={clsx(styles.tableWrapper, className)}\n        data-testid=\"table-wrapper\"\n        {...props}\n    >\n        {children}\n    </div>\n);\nContainer.displayName = \"Table.Container\";\n\nconst TableEl = ({ children, className, ...props }: TableTableProps) => (\n    <table className={clsx(styles.tableComponent, className)} {...props}>\n        {children}\n    </table>\n);\nTableEl.displayName = \"Table.Table\";\n\n// @catalog\n/**\n * A styled HTML table with a scrollable container wrapper.\n *\n * Use `Table` when displaying structured tabular data. The default export\n * wraps content in `Table.Container` and `Table.Table` automatically. For\n * full layout control, compose the sub-components directly:\n * - `Table.Container` — scrollable wrapper div\n * - `Table.Table` — the bare `<table>` element\n * - `Table.Head` — the `<thead>` section\n * - `Table.Body` — the `<tbody>` section\n * - `Table.Row` — a `<tr>` row within the body\n * - `Table.Cell` — a `<td>` data cell\n * - `Table.HeaderCell` — a `<th>` column header cell\n */\nexport const Table = Object.assign(\n    ({ children, ...props }: TableTableProps) => (\n        <Container>\n            <TableEl {...props}>{children}</TableEl>\n        </Container>\n    ),\n    {\n        /** Scrollable wrapper div that contains a `Table.Table`. */\n        Container,\n        /** The bare `<table>` element. Use directly when you need to place the table inside a custom container. */\n        Table: TableEl,\n        /** Renders the `<thead>` section of the table. */\n        Head,\n        /** Renders the `<tbody>` section of the table. */\n        Body,\n        /** Renders a `<tr>` row within a `Table.Body`. */\n        Row,\n        /** Renders a `<td>` data cell within a `Table.Row`. */\n        Cell,\n        /** Renders a `<th>` header cell within a `Table.Head` row. */\n        HeaderCell: Header,\n    }\n);\n"],"names":["Head","_a","children","props","__rest","_jsx","Object","assign","displayName","Body","className","clsx","styles.tableBody","Row","styles.bodyRow","Cell","styles.bodyCell","Header","styles.headerCell","Container","styles.tableWrapper","TableEl","styles.tableComponent","Table","HeaderCell"],"mappings":"0OAaA,MAAMA,EAAQC,IAAA,IAAAC,SAAEA,GAAQD,EAAKE,EAAKC,EAAAH,EAApB,cAA2C,OACrDI,EAAA,QAAAC,OAAAC,OAAA,GAAWJ,YAAQD,IAAiB,EAExCF,EAAKQ,YAAc,aAEnB,MAAMC,EAAQR,QAAAC,SAAEA,EAAQQ,UAAEA,GAAST,EAAKE,EAAKC,EAAAH,EAA/B,0BAAsD,OAChEI,EAAA,QAAAC,OAAAC,OAAA,CAAOG,UAAWC,EAAKC,EAAkBF,IAAgBP,YACpDD,IACG,EAEZO,EAAKD,YAAc,aAEnB,MAAMK,EAAOZ,QAAAC,SAAEA,EAAQQ,UAAEA,GAAST,EAAKE,EAAKC,EAAAH,EAA/B,0BAAqD,OAC9DI,EAAA,KAAAC,OAAAC,OAAA,CAAIG,UAAWC,EAAKG,EAAgBJ,IAAgBP,YAC/CD,IACA,EAETW,EAAIL,YAAc,YAElB,MAAMO,EAAQd,QAAAC,SAAEA,EAAQQ,UAAEA,GAAST,EAAKE,EAAKC,EAAAH,EAA/B,0BAAsD,OAChEI,EAAA,KAAAC,OAAAC,OAAA,CAAIG,UAAWC,EAAKK,EAAiBN,IAAgBP,YAChDD,IACA,EAETa,EAAKP,YAAc,aAEnB,MAAMS,EAAUhB,QAAAC,SAAEA,EAAQQ,UAAEA,GAAST,EAAKE,EAAKC,EAAAH,EAA/B,0BAAwD,OACpEI,EAAA,KAAAC,OAAAC,OAAA,CAAIG,UAAWC,EAAKO,EAAmBR,IAAgBP,YAClDD,IACA,EAETe,EAAOT,YAAc,mBAErB,MAAMW,EAAalB,QAAAC,SAAEA,EAAQQ,UAAEA,GAAST,EAAKE,EAAKC,EAAAH,EAA/B,0BAA2D,OAC1EI,uBACIK,UAAWC,EAAKS,EAAqBV,GAAU,cACnC,iBACRP,YAEHD,IACC,EAEViB,EAAUX,YAAc,kBAExB,MAAMa,EAAWpB,QAAAC,SAAEA,EAAQQ,UAAEA,GAAST,EAAKE,EAAKC,EAAAH,EAA/B,0BAAuD,OACpEI,EAAA,QAAAC,OAAAC,OAAA,CAAOG,UAAWC,EAAKW,EAAuBZ,IAAgBP,YACzDD,IACG,EAEZmB,EAAQb,YAAc,cAiBf,MAAMe,EAAQjB,OAAOC,QACvBN,IAAA,IAAAC,SAAEA,GAAQD,EAAKE,EAAKC,EAAAH,EAApB,cAA4C,OACzCI,EAACc,EAAS,CAAAjB,SACNG,EAACgB,EAAOf,OAAAC,OAAA,CAAA,EAAKJ,EAAK,CAAAD,SAAGA,MACb,GAEhB,CAEIiB,YAEAI,MAAOF,EAEPrB,OAEAS,OAEAI,MAEAE,OAEAS,WAAYP"}

package/table/table.styles.js

@@ -1,2 +1,2 @@
-import"./table.styles_1af5ipv.css";const t="txzjt0s",s="t110f2kz",e="tdex3lc",a="htqww2s",b="b1gaqki2",l="b183mjh5";export{l as bodyCell,b as bodyRow,a as headerCell,e as tableBody,s as tableComponent,t as tableWrapper};
+import"./table.styles_1vjx31g.css";const t="txzjt0s",s="t110f2kz",e="tdex3lc",b="htqww2s",l="b1gaqki2",x="b183mjh5";export{x as bodyCell,l as bodyRow,b as headerCell,e as tableBody,s as tableComponent,t as tableWrapper};
 //# sourceMappingURL=table.styles.js.map

package/table/table.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.styles.js","sources":["../../src/table/table.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Radius, Spacing } from \"../theme\";\n\n// =============================================================================\n// STYLES CONSTANTS\n// =============================================================================\nconst borderColor = Colour[\"border\"];\nconst fontColor = Colour[\"text\"];\n\n// =============================================================================\n// STYLES\n// =============================================================================\nexport const tableWrapper = css`\n    overflow: auto;\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${borderColor};\n    border-radius: ${Radius[\"md\"]};\n\n    /* Hide scrollbar */\n    &::-webkit-scrollbar {\n        display: none;\n    }\n    * {\n        -ms-overflow-style: none; /* IE and Edge */\n        scrollbar-width: none; /* Firefox */\n    }\n`;\n\nexport const tableComponent = css`\n    text-align: left;\n    border-collapse: separate;\n    border-spacing: 0;\n    width: 100%;\n`;\n\nexport const tableBody = css`\n    :where(tr:last-child) {\n        td {\n            border-bottom: none;\n        }\n    }\n`;\n\nexport const headerCell = css`\n    padding: ${Spacing[\"spacing-20\"]} ${Spacing[\"spacing-16\"]};\n    text-align: left;\n    cursor: default;\n    vertical-align: middle;\n    color: ${fontColor};\n    background-color: ${Colour[\"bg-stronger\"]};\n    height: 6rem;\n    border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${borderColor};\n\n    &:where(&:first-child) {\n        padding-left: ${Spacing[\"spacing-24\"]};\n    }\n    &:where(&:last-child) {\n        padding-right: ${Spacing[\"spacing-24\"]};\n    }\n`;\n\nexport const bodyRow = css`\n    background-color: ${Colour[\"bg\"]};\n    border-top: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${borderColor};\n`;\n\nexport const bodyCell = css`\n    padding: ${Spacing[\"spacing-20\"]} ${Spacing[\"spacing-16\"]};\n    vertical-align: middle;\n    color: ${fontColor};\n    border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${borderColor};\n\n    &:where(&:first-child) {\n        padding-left: ${Spacing[\"spacing-24\"]};\n    }\n    &:where(&:last-child) {\n        padding-right: ${Spacing[\"spacing-24\"]};\n    }\n`;\n"],"names":["tableWrapper","tableComponent","tableBody","headerCell","bodyRow","bodyCell"],"mappings":"wDAaO,MAAMA,EAAY,UAeZC,EAAc,WAOdC,EAAS,UAQTC,EAAU,UAkBVC,EAAO,WAKPC,EAAQ"}
+{"version":3,"file":"table.styles.js","sources":["../../src/table/table.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Radius, Spacing } from \"../theme\";\n\n// =============================================================================\n// STYLES CONSTANTS\n// =============================================================================\nconst borderColor = Colour[\"border\"];\nconst fontColor = Colour[\"text\"];\n\n// =============================================================================\n// STYLES\n// =============================================================================\nexport const tableWrapper = css`\n    overflow: auto;\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${borderColor};\n    border-radius: ${Radius[\"md\"]};\n\n    /* Hide scrollbar */\n    scrollbar-width: none; /* Firefox */\n    -ms-overflow-style: none; /* IE 10+ */\n    &::-webkit-scrollbar {\n        display: none; /* Chrome/Safari/Webkit */\n    }\n`;\n\nexport const tableComponent = css`\n    text-align: left;\n    border-collapse: separate;\n    border-spacing: 0;\n    width: 100%;\n`;\n\nexport const tableBody = css`\n    :where(tr:last-child) {\n        td {\n            border-bottom: none;\n        }\n    }\n`;\n\nexport const headerCell = css`\n    padding: ${Spacing[\"spacing-20\"]} ${Spacing[\"spacing-16\"]};\n    text-align: left;\n    cursor: default;\n    vertical-align: middle;\n    color: ${fontColor};\n    background-color: ${Colour[\"bg-stronger\"]};\n    height: 6rem;\n    border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${borderColor};\n\n    &:where(&:first-child) {\n        padding-left: ${Spacing[\"spacing-24\"]};\n    }\n    &:where(&:last-child) {\n        padding-right: ${Spacing[\"spacing-24\"]};\n    }\n`;\n\nexport const bodyRow = css`\n    background-color: ${Colour[\"bg\"]};\n    border-top: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${borderColor};\n`;\n\nexport const bodyCell = css`\n    padding: ${Spacing[\"spacing-20\"]} ${Spacing[\"spacing-16\"]};\n    vertical-align: middle;\n    color: ${fontColor};\n    border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${borderColor};\n\n    &:where(&:first-child) {\n        padding-left: ${Spacing[\"spacing-24\"]};\n    }\n    &:where(&:last-child) {\n        padding-right: ${Spacing[\"spacing-24\"]};\n    }\n`;\n"],"names":["tableWrapper","tableComponent","tableBody","headerCell","bodyRow","bodyCell"],"mappings":"wDAaO,MAAMA,EAAY,UAaZC,EAAc,WAOdC,EAAS,UAQTC,EAAU,UAkBVC,EAAO,WAKPC,EAAQ"}

package/table/{table.styles_1af5ipv.css → table.styles_1vjx31g.css}

@@ -1,4 +1,4 @@
-@layer fds{.txzjt0s{overflow:auto;border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-radius:var(--fds-radius-md);}.txzjt0s::-webkit-scrollbar{display:none;}.txzjt0s *{-ms-overflow-style:none;scrollbar-width:none;}
+@layer fds{.txzjt0s{overflow:auto;border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-radius:var(--fds-radius-md);scrollbar-width:none;-ms-overflow-style:none;}.txzjt0s::-webkit-scrollbar{display:none;}
 .t110f2kz{text-align:left;border-collapse:separate;border-spacing:0;width:100%;}
 .tdex3lc :where(tr:last-child) td{border-bottom:none;}
 .htqww2s{padding:var(--fds-spacing-20) var(--fds-spacing-16);text-align:left;cursor:default;vertical-align:middle;color:var(--fds-colour-text);background-color:var(--fds-colour-bg-stronger);height:6rem;border-bottom:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}.htqww2s:where(.htqww2s:first-child){padding-left:var(--fds-spacing-24);}.htqww2s:where(.htqww2s:last-child){padding-right:var(--fds-spacing-24);}

package/table/types.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Inherits props from [HTMLTableSectionElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableSectionElement)
+ */
+export interface TableHeadProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+}
+/**
+ * Inherits props from [HTMLTableSectionElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableSectionElement)
+ */
+export interface TableBodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+}
+/**
+ * Inherits props from [HTMLTableRowElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableRowElement)
+ */
+export interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
+}
+/**
+ * Inherits props from [HTMLTableCellElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableCellElement)
+ */
+export interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
+}
+/**
+ * Inherits props from [HTMLTableCellElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableCellElement)
+ */
+export interface TableHeaderProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
+}
+/**
+ * Inherits props from [HTMLDivElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElement)
+ */
+export interface TableContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+/**
+ * Inherits props from [HTMLTableElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement)
+ */
+export interface TableTableProps extends React.TableHTMLAttributes<HTMLTableElement> {
+}

package/tag/tag.d.ts

@@ -1,2 +1,7 @@
 import type { TagProps } from "./types";
+/**
+ * A compact label used to categorise or highlight content.
+ *
+ * Use `Tag` to display metadata such as status, category, or keyword.
+ */
 export declare const Tag: ({ type, colorType, children, interactive, icon, iconPosition, ...otherProps }: TagProps) => JSX.Element;

package/tag/tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"tag.js","sources":["../../src/tag/tag.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\n\nimport * as styles from \"./tag.style\";\nimport type { TagColorType, TagProps, TagType } from \"./types\";\n\nconst colorClassMap: Record<TagType, Record<TagColorType, string>> = {\n    solid: {\n        grey: styles.wrapperSolidGrey,\n        green: styles.wrapperSolidGreen,\n        yellow: styles.wrapperSolidYellow,\n        red: styles.wrapperSolidRed,\n        blue: styles.wrapperSolidBlue,\n        primary: styles.wrapperSolidPrimary,\n        black: styles.wrapperSolidBlack,\n    },\n    outline: {\n        grey: styles.wrapperOutlineGrey,\n        green: styles.wrapperOutlineGreen,\n        yellow: styles.wrapperOutlineYellow,\n        red: styles.wrapperOutlineRed,\n        blue: styles.wrapperOutlineBlue,\n        primary: styles.wrapperOutlinePrimary,\n        black: styles.wrapperOutlineBlack,\n    },\n};\n\nexport const Tag = ({\n    type,\n    colorType = \"black\",\n    children,\n    interactive = false,\n    icon,\n    iconPosition = \"left\",\n    ...otherProps\n}: TagProps): JSX.Element => {\n    const Element = interactive ? \"button\" : \"div\";\n\n    return (\n        <Element\n            className={clsx(\n                styles.wrapper,\n                colorClassMap[type]?.[colorType],\n                interactive && styles.wrapperInteractive\n            )}\n            {...otherProps}\n        >\n            {iconPosition === \"left\" &&\n                icon &&\n                React.cloneElement(icon, { \"aria-hidden\": true })}\n            <div className={styles.label} role=\"presentation\">\n                {children}\n            </div>\n            {iconPosition === \"right\" &&\n                icon &&\n                React.cloneElement(icon, { \"aria-hidden\": true })}\n        </Element>\n    );\n};\n"],"names":["colorClassMap","solid","grey","styles.wrapperSolidGrey","green","styles.wrapperSolidGreen","yellow","styles.wrapperSolidYellow","red","styles.wrapperSolidRed","blue","styles.wrapperSolidBlue","primary","styles.wrapperSolidPrimary","black","styles.wrapperSolidBlack","outline","styles.wrapperOutlineGrey","styles.wrapperOutlineGreen","styles.wrapperOutlineYellow","styles.wrapperOutlineRed","styles.wrapperOutlineBlue","styles.wrapperOutlinePrimary","styles.wrapperOutlineBlack","Tag","_a","type","colorType","children","interactive","icon","iconPosition","otherProps","__rest","_jsxs","Object","assign","className","clsx","styles.wrapper","_b","styles.wrapperInteractive","React","cloneElement","_jsx","styles.label","role"],"mappings":"oiBAMA,MAAMA,EAA+D,CACjEC,MAAO,CACHC,KAAMC,EACNC,MAAOC,EACPC,OAAQC,EACRC,IAAKC,EACLC,KAAMC,EACNC,QAASC,EACTC,MAAOC,GAEXC,QAAS,CACLd,KAAMe,EACNb,MAAOc,EACPZ,OAAQa,EACRX,IAAKY,EACLV,KAAMW,EACNT,QAASU,EACTR,MAAOS,IAIFC,EAAOC,WAAAC,KAChBA,EAAIC,UACJA,EAAY,QAAOC,SACnBA,EAAQC,YACRA,GAAc,EAAKC,KACnBA,EAAIC,aACJA,EAAe,UACZC,EAAUC,EAAAR,EAPG,CAAA,OAAA,YAAA,WAAA,cAAA,OAAA,iBAWhB,OACIS,EAHYL,EAAc,SAAW,MAG7BM,OAAAC,OAAA,CACJC,UAAWC,EACPC,EACmB,QAAnBC,EAAAxC,EAAc0B,UAAK,IAAAc,OAAA,EAAAA,EAAGb,GACtBE,GAAeY,IAEfT,EAAU,CAAAJ,SAAA,CAEI,SAAjBG,GACGD,GACAY,EAAMC,aAAab,EAAM,CAAE,eAAe,IAC9Cc,EAAA,MAAA,CAAKP,UAAWQ,EAAcC,KAAK,eAAclB,SAC5CA,IAEa,UAAjBG,GACGD,GACAY,EAAMC,aAAab,EAAM,CAAE,eAAe,OACxC"}
+{"version":3,"file":"tag.js","sources":["../../src/tag/tag.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\n\nimport * as styles from \"./tag.style\";\nimport type { TagColorType, TagProps, TagType } from \"./types\";\n\nconst colorClassMap: Record<TagType, Record<TagColorType, string>> = {\n    solid: {\n        grey: styles.wrapperSolidGrey,\n        green: styles.wrapperSolidGreen,\n        yellow: styles.wrapperSolidYellow,\n        red: styles.wrapperSolidRed,\n        blue: styles.wrapperSolidBlue,\n        primary: styles.wrapperSolidPrimary,\n        black: styles.wrapperSolidBlack,\n    },\n    outline: {\n        grey: styles.wrapperOutlineGrey,\n        green: styles.wrapperOutlineGreen,\n        yellow: styles.wrapperOutlineYellow,\n        red: styles.wrapperOutlineRed,\n        blue: styles.wrapperOutlineBlue,\n        primary: styles.wrapperOutlinePrimary,\n        black: styles.wrapperOutlineBlack,\n    },\n};\n\n// @catalog\n/**\n * A compact label used to categorise or highlight content.\n *\n * Use `Tag` to display metadata such as status, category, or keyword.\n */\nexport const Tag = ({\n    type,\n    colorType = \"black\",\n    children,\n    interactive = false,\n    icon,\n    iconPosition = \"left\",\n    ...otherProps\n}: TagProps): JSX.Element => {\n    const Element = interactive ? \"button\" : \"div\";\n\n    return (\n        <Element\n            className={clsx(\n                styles.wrapper,\n                colorClassMap[type]?.[colorType],\n                interactive && styles.wrapperInteractive\n            )}\n            {...otherProps}\n        >\n            {iconPosition === \"left\" &&\n                icon &&\n                React.cloneElement(icon, { \"aria-hidden\": true })}\n            <div className={styles.label} role=\"presentation\">\n                {children}\n            </div>\n            {iconPosition === \"right\" &&\n                icon &&\n                React.cloneElement(icon, { \"aria-hidden\": true })}\n        </Element>\n    );\n};\n"],"names":["colorClassMap","solid","grey","styles.wrapperSolidGrey","green","styles.wrapperSolidGreen","yellow","styles.wrapperSolidYellow","red","styles.wrapperSolidRed","blue","styles.wrapperSolidBlue","primary","styles.wrapperSolidPrimary","black","styles.wrapperSolidBlack","outline","styles.wrapperOutlineGrey","styles.wrapperOutlineGreen","styles.wrapperOutlineYellow","styles.wrapperOutlineRed","styles.wrapperOutlineBlue","styles.wrapperOutlinePrimary","styles.wrapperOutlineBlack","Tag","_a","type","colorType","children","interactive","icon","iconPosition","otherProps","__rest","_jsxs","Object","assign","className","clsx","styles.wrapper","_b","styles.wrapperInteractive","React","cloneElement","_jsx","styles.label","role"],"mappings":"oiBAMA,MAAMA,EAA+D,CACjEC,MAAO,CACHC,KAAMC,EACNC,MAAOC,EACPC,OAAQC,EACRC,IAAKC,EACLC,KAAMC,EACNC,QAASC,EACTC,MAAOC,GAEXC,QAAS,CACLd,KAAMe,EACNb,MAAOc,EACPZ,OAAQa,EACRX,IAAKY,EACLV,KAAMW,EACNT,QAASU,EACTR,MAAOS,IAUFC,EAAOC,WAAAC,KAChBA,EAAIC,UACJA,EAAY,QAAOC,SACnBA,EAAQC,YACRA,GAAc,EAAKC,KACnBA,EAAIC,aACJA,EAAe,UACZC,EAAUC,EAAAR,EAPG,CAAA,OAAA,YAAA,WAAA,cAAA,OAAA,iBAWhB,OACIS,EAHYL,EAAc,SAAW,MAG7BM,OAAAC,OAAA,CACJC,UAAWC,EACPC,EACmB,QAAnBC,EAAAxC,EAAc0B,UAAK,IAAAc,OAAA,EAAAA,EAAGb,GACtBE,GAAeY,IAEfT,EAAU,CAAAJ,SAAA,CAEI,SAAjBG,GACGD,GACAY,EAAMC,aAAab,EAAM,CAAE,eAAe,IAC9Cc,EAAA,MAAA,CAAKP,UAAWQ,EAAcC,KAAK,eAAclB,SAC5CA,IAEa,UAAjBG,GACGD,GACAY,EAAMC,aAAab,EAAM,CAAE,eAAe,OACxC"}

package/tag/types.d.ts

@@ -1,10 +1,34 @@
 import type React from "react";
+/** Visual style variant. */
 export type TagType = "outline" | "solid";
+/** Color theme applied to the tag. */
 export type TagColorType = "black" | "grey" | "green" | "yellow" | "red" | "blue" | "primary";
+/** Props for the `Tag` component. */
 export interface TagProps extends React.HTMLAttributes<HTMLElement> {
+    /** Visual style variant. */
     type: TagType;
+    /**
+     * Color theme applied to the tag.
+     *
+     * @default "black"
+     */
     colorType?: TagColorType | undefined;
+    /**
+     * Optional icon rendered alongside the label. The position is controlled by `iconPosition`.
+     */
     icon?: JSX.Element | undefined;
+    /**
+     * Position of the icon relative to the label text.
+     *
+     * @default "left"
+     */
     iconPosition?: "left" | "right";
+    /**
+     * When `true`, renders the tag as a `<button>` element to support click
+     * and keyboard interactions. When `false`, renders as a non-interactive
+     * `<div>`.
+     *
+     * @default false
+     */
     interactive?: boolean | undefined;
 }

package/text-list/index.d.ts

@@ -1,8 +1,25 @@
+/**
+ * Renders styled ordered and unordered lists for body copy and structured content.
+ *
+ * Use `TextList` to present sequential or non-sequential items with consistent
+ * typography and spacing.
+ *
+ * Sub-components:
+ * - `TextList.Ol` — a numbered list with configurable counter style and direction.
+ * - `TextList.Ul` — a bulleted list supporting predefined marker types or a custom icon.
+ */
 export declare const TextList: {
+    /**
+     * Renders a bulleted list. Supports predefined marker types or
+     * a custom decorative icon.
+     */
     Ul: {
         ({ className, size, bulletType, bottomMargin, children, ...otherProps }: import("./types").UnorderedListProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
+    /**
+     * Renders a numbered list with configurable counter display.
+     */
     Ol: {
         ({ className, size, counterType, counterSeparator, reversed, start, bottomMargin, children, ...otherProps }: import("./types").OrderedListProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;

package/text-list/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/text-list/index.ts"],"sourcesContent":["import { OrderedList } from \"./ordered-list\";\nimport { UnorderedList } from \"./unordered-list\";\n\nexport const TextList = {\n    Ul: UnorderedList,\n    Ol: OrderedList,\n};\n\nexport * from \"./types\";\n"],"names":["TextList","Ul","UnorderedList","Ol","OrderedList"],"mappings":"oGAGO,MAAMA,EAAW,CACpBC,GAAIC,EACJC,GAAIC"}
+{"version":3,"file":"index.js","sources":["../../src/text-list/index.ts"],"sourcesContent":["import { OrderedList } from \"./ordered-list\";\nimport { UnorderedList } from \"./unordered-list\";\n\n// @catalog\n/**\n * Renders styled ordered and unordered lists for body copy and structured content.\n *\n * Use `TextList` to present sequential or non-sequential items with consistent\n * typography and spacing.\n *\n * Sub-components:\n * - `TextList.Ol` — a numbered list with configurable counter style and direction.\n * - `TextList.Ul` — a bulleted list supporting predefined marker types or a custom icon.\n */\nexport const TextList = {\n    /**\n     * Renders a bulleted list. Supports predefined marker types or\n     * a custom decorative icon.\n     */\n    Ul: UnorderedList,\n    /**\n     * Renders a numbered list with configurable counter display.\n     */\n    Ol: OrderedList,\n};\n\nexport * from \"./types\";\n"],"names":["TextList","Ul","UnorderedList","Ol","OrderedList"],"mappings":"oGAcO,MAAMA,EAAW,CAKpBC,GAAIC,EAIJC,GAAIC"}

package/text-list/types.d.ts

@@ -1,27 +1,56 @@
 import type { FontSize } from "../theme";
+/**
+ * Text size tokens available for list content.
+ */
 export type TextListSize = Exclude<FontSize, "form-label" | "form-description">;
+/** Shared props for both ordered and unordered text list variants. */
 interface BaseListProps {
     children: JSX.Element | JSX.Element[];
+    /** Bottom margin in pixels applied to each list item except the last. */
     bottomMargin?: number | undefined;
+    /** Text size applied to the list content. */
     size?: TextListSize | undefined;
     id?: string | undefined;
     "data-testid"?: string | undefined;
     className?: string | undefined;
 }
+/** Counter style applied to each item in an ordered list. */
 export type CounterType = "lower-alpha" | "decimal" | "lower-roman";
+/**
+ * Props for the `TextList.Ol` component.
+ */
 export interface OrderedListProps extends BaseListProps {
-    /**  Values: "lower-alpha" | "decimal" | "lower-roman" */
+    /**
+     * Counter style applied to each list item.
+     *
+     * @default "decimal"
+     */
     counterType?: CounterType | undefined;
+    /**
+     * Character or string rendered after each counter value.
+     *
+     * @default ")"
+     */
     counterSeparator?: string | undefined;
-    /** Specifies if the list counter decrements */
+    /** The counter is decremented from the start value instead of incremented. */
     reversed?: boolean | undefined;
-    /** The value to start the list count from */
+    /** The value to start the list count from. */
     start?: number | undefined;
 }
+/** Predefined bullet marker style for an unordered list. */
 export type BulletType = "disc" | "circle" | "square" | "none";
 type CustomBulletIcon = Exclude<React.ReactNode, string>;
+/**
+ * Props for the `TextList.Ul` component.
+ */
 export interface UnorderedListProps extends BaseListProps {
-    /** Values: "disc" | "circle" | "square" | "none" or custom React.ReactNode icon */
+    /**
+     * Marker style for list items. Pass a `BulletType` token for a predefined
+     * marker, or any React node to render a custom decorative icon before each
+     * item's content.
+     *
+     * @default "disc"
+     */
     bulletType?: BulletType | CustomBulletIcon | undefined;
 }
 export {};

package/theme/theme-provider/breakpoint.d.ts

@@ -1,2 +1 @@
-export declare function applyBreakpointClasses(sourceElement: HTMLElement): void;
 export declare function setupBreakpointListener(sourceElement: HTMLElement): (() => void) | undefined;

package/theme/theme-provider/breakpoint.js

@@ -1,2 +1,2 @@
-import{Breakpoint as i}from"../tokens/breakpoint.js";import{parsePxOrRemValue as m,parseCSSVariableValue as n}from"../utils/css-variable.js";import"../../util/calendar-helper.js";import"../../external/dayjs/dayjs.min.js";import"react";import"../../util/simple-id-generator.js";import"../../util/string-helper.js";import"@react-aria/live-announcer";import"./context.js";import"../utils/use-media-query.js";const e="fds-breakpoint-";function t(t){const s=document.body,a=window.innerWidth;[...s.classList].forEach((i=>{i.startsWith(e)&&s.classList.remove(i)}));const o=function(m){const e=i=>{const e=n(i,m);return e||(m!==document.documentElement?n(i,document.documentElement):e)};return[{key:"xxs",min:e(i["xxs-min"]),max:e(i["xxs-max"])},{key:"xs",min:e(i["xs-min"]),max:e(i["xs-max"])},{key:"sm",min:e(i["sm-min"]),max:e(i["sm-max"])},{key:"md",min:e(i["md-min"]),max:e(i["md-max"])},{key:"lg",min:e(i["lg-min"]),max:e(i["lg-max"])},{key:"xl",min:e(i["xl-min"]),max:e(i["xl-max"])},{key:"xxl",min:e(i["xxl-min"]),max:1/0}]}(t);o.forEach((i=>{const n=m(i.min),t=i.max===1/0?1/0:m(i.max),o=a>=n,r=t!==1/0&&a<=t;o&&(t===1/0||r)&&s.classList.add(`${e}${i.key}`),o&&s.classList.add(`${e}${i.key}-min`),r&&s.classList.add(`${e}${i.key}-max`)}))}function s(i){if(!globalThis.window)return;const m=()=>{t(i)};return m(),globalThis.window.addEventListener("resize",m),()=>{globalThis.window.removeEventListener("resize",m)}}export{t as applyBreakpointClasses,s as setupBreakpointListener};
+import{Breakpoint as i}from"../tokens/breakpoint.js";import{parsePxOrRemValue as m,parseCSSVariableValue as n}from"../utils/css-variable.js";import"../../util/calendar-helper.js";import"../../external/dayjs/dayjs.min.js";import"react";import"../../util/simple-id-generator.js";import"../../util/string-helper.js";import"@react-aria/live-announcer";import"./context.js";import"../utils/use-media-query.js";const e="fds-breakpoint-";function t(t){const s=document.body,a=window.innerWidth;[...s.classList].forEach((i=>{i.startsWith(e)&&s.classList.remove(i)}));const o=function(m){const e=i=>{const e=n(i,m);return e||(m!==document.documentElement?n(i,document.documentElement):e)};return[{key:"xxs",min:e(i["xxs-min"]),max:e(i["xxs-max"])},{key:"xs",min:e(i["xs-min"]),max:e(i["xs-max"])},{key:"sm",min:e(i["sm-min"]),max:e(i["sm-max"])},{key:"md",min:e(i["md-min"]),max:e(i["md-max"])},{key:"lg",min:e(i["lg-min"]),max:e(i["lg-max"])},{key:"xl",min:e(i["xl-min"]),max:e(i["xl-max"])},{key:"xxl",min:e(i["xxl-min"]),max:1/0}]}(t);o.forEach((i=>{const n=m(i.min),t=i.max===1/0?1/0:m(i.max),o=a>=n,r=t!==1/0&&a<=t;o&&(t===1/0||r)&&s.classList.add(`${e}${i.key}`),o&&s.classList.add(`${e}${i.key}-min`),r&&s.classList.add(`${e}${i.key}-max`)}))}function s(i){if(!globalThis.window)return;const m=()=>{t(i)};return m(),globalThis.window.addEventListener("resize",m),()=>{globalThis.window.removeEventListener("resize",m)}}export{s as setupBreakpointListener};
 //# sourceMappingURL=breakpoint.js.map

package/theme/theme-provider/breakpoint.js.map

@@ -1 +1 @@
-{"version":3,"file":"breakpoint.js","sources":["../../../src/theme/theme-provider/breakpoint.ts"],"sourcesContent":["import { Breakpoint } from \"../tokens/breakpoint\";\nimport type { CSSVariableString } from \"../types\";\nimport { parseCSSVariableValue, parsePxOrRemValue } from \"../utils\";\n\nfunction getBreakpointRanges(sourceElement: HTMLElement) {\n    const getBreakpointValue = (token: CSSVariableString) => {\n        const scopedValue = parseCSSVariableValue(token, sourceElement);\n        if (scopedValue) return scopedValue;\n\n        if (sourceElement !== document.documentElement) {\n            return parseCSSVariableValue(token, document.documentElement);\n        }\n\n        return scopedValue;\n    };\n\n    return [\n        {\n            key: \"xxs\",\n            min: getBreakpointValue(Breakpoint[\"xxs-min\"]),\n            max: getBreakpointValue(Breakpoint[\"xxs-max\"]),\n        },\n        {\n            key: \"xs\",\n            min: getBreakpointValue(Breakpoint[\"xs-min\"]),\n            max: getBreakpointValue(Breakpoint[\"xs-max\"]),\n        },\n        {\n            key: \"sm\",\n            min: getBreakpointValue(Breakpoint[\"sm-min\"]),\n            max: getBreakpointValue(Breakpoint[\"sm-max\"]),\n        },\n        {\n            key: \"md\",\n            min: getBreakpointValue(Breakpoint[\"md-min\"]),\n            max: getBreakpointValue(Breakpoint[\"md-max\"]),\n        },\n        {\n            key: \"lg\",\n            min: getBreakpointValue(Breakpoint[\"lg-min\"]),\n            max: getBreakpointValue(Breakpoint[\"lg-max\"]),\n        },\n        {\n            key: \"xl\",\n            min: getBreakpointValue(Breakpoint[\"xl-min\"]),\n            max: getBreakpointValue(Breakpoint[\"xl-max\"]),\n        },\n        {\n            key: \"xxl\",\n            min: getBreakpointValue(Breakpoint[\"xxl-min\"]),\n            max: Infinity,\n        },\n    ] as const;\n}\n\nconst BREAKPOINT_CLASS_PREFIX = \"fds-breakpoint-\";\n\nexport function applyBreakpointClasses(sourceElement: HTMLElement) {\n    const body = document.body;\n    const width = window.innerWidth;\n\n    [...body.classList].forEach((cls) => {\n        if (cls.startsWith(BREAKPOINT_CLASS_PREFIX)) {\n            body.classList.remove(cls);\n        }\n    });\n\n    const BREAKPOINT_RANGES = getBreakpointRanges(sourceElement);\n\n    BREAKPOINT_RANGES.forEach((range) => {\n        const minValue = parsePxOrRemValue(range.min);\n        const maxValue =\n            range.max === Infinity\n                ? Infinity\n                : parsePxOrRemValue(range.max as string);\n\n        const isMinMatched = width >= minValue;\n        const isMaxMatched = maxValue === Infinity ? false : width <= maxValue;\n        const isWithinRange =\n            isMinMatched && (maxValue === Infinity || isMaxMatched);\n\n        if (isWithinRange) {\n            body.classList.add(`${BREAKPOINT_CLASS_PREFIX}${range.key}`);\n        }\n\n        if (isMinMatched) {\n            body.classList.add(`${BREAKPOINT_CLASS_PREFIX}${range.key}-min`);\n        }\n\n        if (isMaxMatched) {\n            body.classList.add(`${BREAKPOINT_CLASS_PREFIX}${range.key}-max`);\n        }\n    });\n}\n\nexport function setupBreakpointListener(sourceElement: HTMLElement) {\n    if (!globalThis.window) return;\n\n    const handleBreakpointChange = () => {\n        applyBreakpointClasses(sourceElement);\n    };\n\n    handleBreakpointChange();\n    globalThis.window.addEventListener(\"resize\", handleBreakpointChange);\n\n    return () => {\n        globalThis.window.removeEventListener(\"resize\", handleBreakpointChange);\n    };\n}\n"],"names":["BREAKPOINT_CLASS_PREFIX","applyBreakpointClasses","sourceElement","body","document","width","window","innerWidth","classList","forEach","cls","startsWith","remove","BREAKPOINT_RANGES","getBreakpointValue","token","scopedValue","parseCSSVariableValue","documentElement","key","min","Breakpoint","max","Infinity","getBreakpointRanges","range","minValue","parsePxOrRemValue","maxValue","isMinMatched","isMaxMatched","add","setupBreakpointListener","globalThis","handleBreakpointChange","addEventListener","removeEventListener"],"mappings":"qZAuDA,MAAMA,EAA0B,kBAE1B,SAAUC,EAAuBC,GACnC,MAAMC,EAAOC,SAASD,KAChBE,EAAQC,OAAOC,WAErB,IAAIJ,EAAKK,WAAWC,SAASC,IACrBA,EAAIC,WAAWX,IACfG,EAAKK,UAAUI,OAAOF,EAC1B,IAGJ,MAAMG,EA/DV,SAA6BX,GACzB,MAAMY,EAAsBC,IACxB,MAAMC,EAAcC,EAAsBF,EAAOb,GACjD,OAAIc,IAEAd,IAAkBE,SAASc,gBACpBD,EAAsBF,EAAOX,SAASc,iBAG1CF,EAAW,EAGtB,MAAO,CACH,CACIG,IAAK,MACLC,IAAKN,EAAmBO,EAAW,YACnCC,IAAKR,EAAmBO,EAAW,aAEvC,CACIF,IAAK,KACLC,IAAKN,EAAmBO,EAAW,WACnCC,IAAKR,EAAmBO,EAAW,YAEvC,CACIF,IAAK,KACLC,IAAKN,EAAmBO,EAAW,WACnCC,IAAKR,EAAmBO,EAAW,YAEvC,CACIF,IAAK,KACLC,IAAKN,EAAmBO,EAAW,WACnCC,IAAKR,EAAmBO,EAAW,YAEvC,CACIF,IAAK,KACLC,IAAKN,EAAmBO,EAAW,WACnCC,IAAKR,EAAmBO,EAAW,YAEvC,CACIF,IAAK,KACLC,IAAKN,EAAmBO,EAAW,WACnCC,IAAKR,EAAmBO,EAAW,YAEvC,CACIF,IAAK,MACLC,IAAKN,EAAmBO,EAAW,YACnCC,IAAKC,KAGjB,CAc8BC,CAAoBtB,GAE9CW,EAAkBJ,SAASgB,IACvB,MAAMC,EAAWC,EAAkBF,EAAML,KACnCQ,EACFH,EAAMH,MAAQC,IACRA,IACAI,EAAkBF,EAAMH,KAE5BO,EAAexB,GAASqB,EACxBI,EAAeF,IAAaL,KAAmBlB,GAASuB,EAE1DC,IAAiBD,IAAaL,KAAYO,IAG1C3B,EAAKK,UAAUuB,IAAI,GAAG/B,IAA0ByB,EAAMN,OAGtDU,GACA1B,EAAKK,UAAUuB,IAAI,GAAG/B,IAA0ByB,EAAMN,WAGtDW,GACA3B,EAAKK,UAAUuB,IAAI,GAAG/B,IAA0ByB,EAAMN,UAC1D,GAER,CAEM,SAAUa,EAAwB9B,GACpC,IAAK+B,WAAW3B,OAAQ,OAExB,MAAM4B,EAAyB,KAC3BjC,EAAuBC,EAAc,EAMzC,OAHAgC,IACAD,WAAW3B,OAAO6B,iBAAiB,SAAUD,GAEtC,KACHD,WAAW3B,OAAO8B,oBAAoB,SAAUF,EAAuB,CAE/E"}
+{"version":3,"file":"breakpoint.js","sources":["../../../src/theme/theme-provider/breakpoint.ts"],"sourcesContent":["import { Breakpoint } from \"../tokens/breakpoint\";\nimport type { CSSVariableString } from \"../types\";\nimport { parseCSSVariableValue, parsePxOrRemValue } from \"../utils\";\n\nfunction getBreakpointRanges(sourceElement: HTMLElement) {\n    const getBreakpointValue = (token: CSSVariableString) => {\n        const scopedValue = parseCSSVariableValue(token, sourceElement);\n        if (scopedValue) return scopedValue;\n\n        if (sourceElement !== document.documentElement) {\n            return parseCSSVariableValue(token, document.documentElement);\n        }\n\n        return scopedValue;\n    };\n\n    return [\n        {\n            key: \"xxs\",\n            min: getBreakpointValue(Breakpoint[\"xxs-min\"]),\n            max: getBreakpointValue(Breakpoint[\"xxs-max\"]),\n        },\n        {\n            key: \"xs\",\n            min: getBreakpointValue(Breakpoint[\"xs-min\"]),\n            max: getBreakpointValue(Breakpoint[\"xs-max\"]),\n        },\n        {\n            key: \"sm\",\n            min: getBreakpointValue(Breakpoint[\"sm-min\"]),\n            max: getBreakpointValue(Breakpoint[\"sm-max\"]),\n        },\n        {\n            key: \"md\",\n            min: getBreakpointValue(Breakpoint[\"md-min\"]),\n            max: getBreakpointValue(Breakpoint[\"md-max\"]),\n        },\n        {\n            key: \"lg\",\n            min: getBreakpointValue(Breakpoint[\"lg-min\"]),\n            max: getBreakpointValue(Breakpoint[\"lg-max\"]),\n        },\n        {\n            key: \"xl\",\n            min: getBreakpointValue(Breakpoint[\"xl-min\"]),\n            max: getBreakpointValue(Breakpoint[\"xl-max\"]),\n        },\n        {\n            key: \"xxl\",\n            min: getBreakpointValue(Breakpoint[\"xxl-min\"]),\n            max: Infinity,\n        },\n    ] as const;\n}\n\nconst BREAKPOINT_CLASS_PREFIX = \"fds-breakpoint-\";\n\nfunction applyBreakpointClasses(sourceElement: HTMLElement) {\n    const body = document.body;\n    const width = window.innerWidth;\n\n    [...body.classList].forEach((cls) => {\n        if (cls.startsWith(BREAKPOINT_CLASS_PREFIX)) {\n            body.classList.remove(cls);\n        }\n    });\n\n    const BREAKPOINT_RANGES = getBreakpointRanges(sourceElement);\n\n    BREAKPOINT_RANGES.forEach((range) => {\n        const minValue = parsePxOrRemValue(range.min);\n        const maxValue =\n            range.max === Infinity\n                ? Infinity\n                : parsePxOrRemValue(range.max as string);\n\n        const isMinMatched = width >= minValue;\n        const isMaxMatched = maxValue === Infinity ? false : width <= maxValue;\n        const isWithinRange =\n            isMinMatched && (maxValue === Infinity || isMaxMatched);\n\n        if (isWithinRange) {\n            body.classList.add(`${BREAKPOINT_CLASS_PREFIX}${range.key}`);\n        }\n\n        if (isMinMatched) {\n            body.classList.add(`${BREAKPOINT_CLASS_PREFIX}${range.key}-min`);\n        }\n\n        if (isMaxMatched) {\n            body.classList.add(`${BREAKPOINT_CLASS_PREFIX}${range.key}-max`);\n        }\n    });\n}\n\nexport function setupBreakpointListener(sourceElement: HTMLElement) {\n    if (!globalThis.window) return;\n\n    const handleBreakpointChange = () => {\n        applyBreakpointClasses(sourceElement);\n    };\n\n    handleBreakpointChange();\n    globalThis.window.addEventListener(\"resize\", handleBreakpointChange);\n\n    return () => {\n        globalThis.window.removeEventListener(\"resize\", handleBreakpointChange);\n    };\n}\n"],"names":["BREAKPOINT_CLASS_PREFIX","applyBreakpointClasses","sourceElement","body","document","width","window","innerWidth","classList","forEach","cls","startsWith","remove","BREAKPOINT_RANGES","getBreakpointValue","token","scopedValue","parseCSSVariableValue","documentElement","key","min","Breakpoint","max","Infinity","getBreakpointRanges","range","minValue","parsePxOrRemValue","maxValue","isMinMatched","isMaxMatched","add","setupBreakpointListener","globalThis","handleBreakpointChange","addEventListener","removeEventListener"],"mappings":"qZAuDA,MAAMA,EAA0B,kBAEhC,SAASC,EAAuBC,GAC5B,MAAMC,EAAOC,SAASD,KAChBE,EAAQC,OAAOC,WAErB,IAAIJ,EAAKK,WAAWC,SAASC,IACrBA,EAAIC,WAAWX,IACfG,EAAKK,UAAUI,OAAOF,EAC1B,IAGJ,MAAMG,EA/DV,SAA6BX,GACzB,MAAMY,EAAsBC,IACxB,MAAMC,EAAcC,EAAsBF,EAAOb,GACjD,OAAIc,IAEAd,IAAkBE,SAASc,gBACpBD,EAAsBF,EAAOX,SAASc,iBAG1CF,EAAW,EAGtB,MAAO,CACH,CACIG,IAAK,MACLC,IAAKN,EAAmBO,EAAW,YACnCC,IAAKR,EAAmBO,EAAW,aAEvC,CACIF,IAAK,KACLC,IAAKN,EAAmBO,EAAW,WACnCC,IAAKR,EAAmBO,EAAW,YAEvC,CACIF,IAAK,KACLC,IAAKN,EAAmBO,EAAW,WACnCC,IAAKR,EAAmBO,EAAW,YAEvC,CACIF,IAAK,KACLC,IAAKN,EAAmBO,EAAW,WACnCC,IAAKR,EAAmBO,EAAW,YAEvC,CACIF,IAAK,KACLC,IAAKN,EAAmBO,EAAW,WACnCC,IAAKR,EAAmBO,EAAW,YAEvC,CACIF,IAAK,KACLC,IAAKN,EAAmBO,EAAW,WACnCC,IAAKR,EAAmBO,EAAW,YAEvC,CACIF,IAAK,MACLC,IAAKN,EAAmBO,EAAW,YACnCC,IAAKC,KAGjB,CAc8BC,CAAoBtB,GAE9CW,EAAkBJ,SAASgB,IACvB,MAAMC,EAAWC,EAAkBF,EAAML,KACnCQ,EACFH,EAAMH,MAAQC,IACRA,IACAI,EAAkBF,EAAMH,KAE5BO,EAAexB,GAASqB,EACxBI,EAAeF,IAAaL,KAAmBlB,GAASuB,EAE1DC,IAAiBD,IAAaL,KAAYO,IAG1C3B,EAAKK,UAAUuB,IAAI,GAAG/B,IAA0ByB,EAAMN,OAGtDU,GACA1B,EAAKK,UAAUuB,IAAI,GAAG/B,IAA0ByB,EAAMN,WAGtDW,GACA3B,EAAKK,UAAUuB,IAAI,GAAG/B,IAA0ByB,EAAMN,UAC1D,GAER,CAEM,SAAUa,EAAwB9B,GACpC,IAAK+B,WAAW3B,OAAQ,OAExB,MAAM4B,EAAyB,KAC3BjC,EAAuBC,EAAc,EAMzC,OAHAgC,IACAD,WAAW3B,OAAO6B,iBAAiB,SAAUD,GAEtC,KACHD,WAAW3B,OAAO8B,oBAAoB,SAAUF,EAAuB,CAE/E"}

package/theme/theme-provider/hooks.d.ts

@@ -7,6 +7,22 @@ type InheritedThemeScope = {
     };
     themeStyle: CSSProperties;
 };
+/**
+ * Returns the theme context from the nearest `ThemeProvider`.
+ *
+ * @returns The active `ThemeContextValue`. When called outside a provider,
+ * returns defaults: `theme: "lifesg"`, `mode: "light"`, `themeElement: null`.
+ */
 export declare const useTheme: () => ThemeContextValue;
+/**
+ * Builds `data-fds-theme*` attributes and inline CSS variables for re-stamping
+ * the current theme onto a detached DOM element (e.g. a portal or floating
+ * overlay).
+ *
+ * @param enabled When `false`, returns empty objects — useful to conditionally
+ * skip the attribute injection.
+ * @returns `themeProps` (spread onto the root element) and `themeStyle` (inline
+ * CSS variables to apply).
+ */
 export declare const useInheritedThemeScope: (enabled: boolean) => InheritedThemeScope;
 export {};

package/theme/theme-provider/hooks.js.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.js","sources":["../../../src/theme/theme-provider/hooks.tsx"],"sourcesContent":["import type { CSSProperties } from \"react\";\nimport { useContext, useMemo } from \"react\";\n\nimport { getInheritedInlineCssVariables } from \"../utils/css-variable\";\nimport { ThemeContext } from \"./context\";\nimport type { ThemeContextValue } from \"./types\";\n\ntype InheritedThemeScope = {\n    themeProps: {\n        \"data-fds-theme\"?: string;\n        \"data-fds-theme-mode\"?: string;\n    };\n    themeStyle: CSSProperties;\n};\n\nexport const useTheme = (): ThemeContextValue => {\n    const context = useContext(ThemeContext);\n\n    if (!context) {\n        return {\n            theme: \"lifesg\",\n            mode: \"light\",\n            themeElement: null,\n        };\n    }\n\n    return context;\n};\n\nexport const useInheritedThemeScope = (\n    enabled: boolean\n): InheritedThemeScope => {\n    const themeContext = useContext(ThemeContext);\n\n    return useMemo(() => {\n        if (!enabled) {\n            return {\n                themeProps: {},\n                themeStyle: {},\n            };\n        }\n\n        return {\n            themeProps: {\n                \"data-fds-theme\": themeContext?.theme,\n                \"data-fds-theme-mode\": themeContext?.mode,\n            },\n            themeStyle: getInheritedInlineCssVariables(\n                themeContext?.themeElement ?? null\n            ),\n        };\n    }, [\n        enabled,\n        themeContext?.mode,\n        themeContext?.theme,\n        themeContext?.themeElement,\n    ]);\n};\n"],"names":["useTheme","context","useContext","ThemeContext","theme","mode","themeElement","useInheritedThemeScope","enabled","themeContext","useMemo","themeProps","themeStyle","getInheritedInlineCssVariables","_a"],"mappings":"sKAeO,MAAMA,EAAW,KACpB,MAAMC,EAAUC,EAAWC,GAE3B,OAAKF,GACM,CACHG,MAAO,SACPC,KAAM,QACNC,aAAc,KAIR,EAGLC,EACTC,IAEA,MAAMC,EAAeP,EAAWC,GAEhC,OAAOO,GAAQ,WACX,OAAKF,EAOE,CACHG,WAAY,CACR,iBAAkBF,aAAY,EAAZA,EAAcL,MAChC,sBAAuBK,aAAY,EAAZA,EAAcJ,MAEzCO,WAAYC,EACkB,QAA1BC,EAAAL,aAAY,EAAZA,EAAcH,oBAAY,IAAAQ,EAAAA,EAAI,OAZ3B,CACHH,WAAY,CAAA,EACZC,WAAY,CAAA,EAYnB,GACF,CACCJ,EACAC,aAAY,EAAZA,EAAcJ,KACdI,aAAY,EAAZA,EAAcL,MACdK,aAAY,EAAZA,EAAcH,cAChB"}
+{"version":3,"file":"hooks.js","sources":["../../../src/theme/theme-provider/hooks.tsx"],"sourcesContent":["import type { CSSProperties } from \"react\";\nimport { useContext, useMemo } from \"react\";\n\nimport { getInheritedInlineCssVariables } from \"../utils/css-variable\";\nimport { ThemeContext } from \"./context\";\nimport type { ThemeContextValue } from \"./types\";\n\ntype InheritedThemeScope = {\n    themeProps: {\n        \"data-fds-theme\"?: string;\n        \"data-fds-theme-mode\"?: string;\n    };\n    themeStyle: CSSProperties;\n};\n\n// @catalog\n/**\n * Returns the theme context from the nearest `ThemeProvider`.\n *\n * @returns The active `ThemeContextValue`. When called outside a provider,\n * returns defaults: `theme: \"lifesg\"`, `mode: \"light\"`, `themeElement: null`.\n */\nexport const useTheme = (): ThemeContextValue => {\n    const context = useContext(ThemeContext);\n\n    if (!context) {\n        return {\n            theme: \"lifesg\",\n            mode: \"light\",\n            themeElement: null,\n        };\n    }\n\n    return context;\n};\n\n// @catalog\n/**\n * Builds `data-fds-theme*` attributes and inline CSS variables for re-stamping\n * the current theme onto a detached DOM element (e.g. a portal or floating\n * overlay).\n *\n * @param enabled When `false`, returns empty objects — useful to conditionally\n * skip the attribute injection.\n * @returns `themeProps` (spread onto the root element) and `themeStyle` (inline\n * CSS variables to apply).\n */\nexport const useInheritedThemeScope = (\n    enabled: boolean\n): InheritedThemeScope => {\n    const themeContext = useContext(ThemeContext);\n\n    return useMemo(() => {\n        if (!enabled) {\n            return {\n                themeProps: {},\n                themeStyle: {},\n            };\n        }\n\n        return {\n            themeProps: {\n                \"data-fds-theme\": themeContext?.theme,\n                \"data-fds-theme-mode\": themeContext?.mode,\n            },\n            themeStyle: getInheritedInlineCssVariables(\n                themeContext?.themeElement ?? null\n            ),\n        };\n    }, [\n        enabled,\n        themeContext?.mode,\n        themeContext?.theme,\n        themeContext?.themeElement,\n    ]);\n};\n"],"names":["useTheme","context","useContext","ThemeContext","theme","mode","themeElement","useInheritedThemeScope","enabled","themeContext","useMemo","themeProps","themeStyle","getInheritedInlineCssVariables","_a"],"mappings":"sKAsBO,MAAMA,EAAW,KACpB,MAAMC,EAAUC,EAAWC,GAE3B,OAAKF,GACM,CACHG,MAAO,SACPC,KAAM,QACNC,aAAc,KAIR,EAcLC,EACTC,IAEA,MAAMC,EAAeP,EAAWC,GAEhC,OAAOO,GAAQ,WACX,OAAKF,EAOE,CACHG,WAAY,CACR,iBAAkBF,aAAY,EAAZA,EAAcL,MAChC,sBAAuBK,aAAY,EAAZA,EAAcJ,MAEzCO,WAAYC,EACkB,QAA1BC,EAAAL,aAAY,EAAZA,EAAcH,oBAAY,IAAAQ,EAAAA,EAAI,OAZ3B,CACHH,WAAY,CAAA,EACZC,WAAY,CAAA,EAYnB,GACF,CACCJ,EACAC,aAAY,EAAZA,EAAcJ,KACdI,aAAY,EAAZA,EAAcL,MACdK,aAAY,EAAZA,EAAcH,cAChB"}