@kcascend/liquid-ui 0.0.1

package/dist/components/GridLayout/gridTokens.js

@@ -0,0 +1,91 @@
+import { tokens } from '../../generated/tokens';
+export const BREAKPOINT_KEYS = [
+    'sm',
+    'md',
+    'lg',
+    'xlg',
+    'max',
+];
+function getNodePath(path) {
+    return path.reduce((acc, segment) => {
+        if (!acc || typeof acc !== 'object') {
+            return undefined;
+        }
+        return acc[segment];
+    }, tokens);
+}
+function resolveTokenValue(value, depth = 0) {
+    if (depth > 10) {
+        return value;
+    }
+    if (typeof value !== 'string') {
+        return value;
+    }
+    const match = value.match(/^\{([^}]+)\}$/);
+    if (!match) {
+        return value;
+    }
+    const path = match[1].split('.').filter(Boolean);
+    const referencedNode = getNodePath(path);
+    if (referencedNode &&
+        typeof referencedNode === 'object' &&
+        'value' in referencedNode) {
+        return resolveTokenValue(referencedNode.value, depth + 1);
+    }
+    return referencedNode;
+}
+function toNumber(value, fallback) {
+    const resolved = resolveTokenValue(value);
+    if (typeof resolved === 'number' && Number.isFinite(resolved)) {
+        return resolved;
+    }
+    if (typeof resolved === 'string') {
+        const parsed = Number.parseFloat(resolved);
+        if (Number.isFinite(parsed)) {
+            return parsed;
+        }
+    }
+    return fallback;
+}
+function getGridLayoutNode() {
+    const node = getNodePath(['grid', 'grid', 'layout']);
+    return (node ?? {});
+}
+function getGridSystemNode() {
+    const node = getNodePath(['grid-system']);
+    return (node ?? {});
+}
+export function getGridBreakpointSpec(breakpoint) {
+    const layoutNode = getGridLayoutNode();
+    const gridSystemNode = getGridSystemNode();
+    const breakpointNode = (gridSystemNode.breakpoint ?? {});
+    const marginNode = (gridSystemNode.margin ?? {});
+    const gutterNode = (gridSystemNode.gutter ?? {});
+    const containerHangNode = (gridSystemNode.container ?? {}).hang ?? {};
+    const layoutBase = (layoutNode[breakpoint] ?? {});
+    const layoutValue = (layoutBase.value ?? {});
+    return {
+        key: breakpoint,
+        width: toNumber(breakpointNode[breakpoint]?.value, breakpoint === 'sm'
+            ? 320
+            : breakpoint === 'md'
+                ? 672
+                : breakpoint === 'lg'
+                    ? 1056
+                    : breakpoint === 'xlg'
+                        ? 1312
+                        : 1584),
+        columns: toNumber(layoutValue.count, breakpoint === 'sm' ? 4 : breakpoint === 'md' ? 8 : 16),
+        margin: toNumber(marginNode[breakpoint]?.value, breakpoint === 'max' ? 24 : 16),
+        wideGutter: toNumber(layoutValue['gutter-size'], breakpoint === 'sm' || breakpoint === 'md' ? 16 : 32),
+        narrowGutter: toNumber(gutterNode.narrow?.value, 16),
+        containerHang: toNumber(containerHangNode.narrow?.value, 16),
+    };
+}
+export function getRowRhythms() {
+    const rowValues = [8, 16, 24, 32, 48, 64, 80, 96];
+    return rowValues.map((value) => ({
+        value,
+        caption: value === 8 ? '1x mini unit' : `${Math.round(value / 8)}x mini unit`,
+    }));
+}

package/dist/components/Icon/Icon.d.ts

@@ -0,0 +1,11 @@
+import { HTMLAttributes } from 'react';
+import { icons } from './icons';
+export declare const iconNames: Array<keyof typeof icons>;
+export type IconName = keyof typeof icons;
+export interface IconProps extends HTMLAttributes<HTMLSpanElement> {
+    name: IconName;
+    size?: number;
+    color?: string;
+}
+export declare function Icon({ name, size, color, style, ...props }: IconProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=Icon.d.ts.map

package/dist/components/Icon/Icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,eAAO,MAAM,SAAS,EAAyB,KAAK,CAAC,MAAM,OAAO,KAAK,CAAC,CAAC;AACzE,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,KAAK,CAAC;AAE1C,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,eAAe,CAAC;IAChE,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,IAAS,EACT,KAAsB,EACtB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,SAAS,kDA2BX"}

package/dist/components/Icon/Icon.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { icons } from './icons';
+export const iconNames = Object.keys(icons);
+export function Icon({ name, size = 24, color = 'currentColor', style, ...props }) {
+    const SvgIcon = icons[name];
+    if (!SvgIcon)
+        return null;
+    return (_jsx("span", { "aria-hidden": "true", ...props, style: {
+            display: 'inline-block',
+            width: size,
+            height: size,
+            color,
+            ...style,
+        }, children: SvgIcon &&
+            // Clone the SVG element to inject size and color
+            (typeof SvgIcon === 'object' && 'type' in SvgIcon
+                ? React.cloneElement(SvgIcon, {
+                    width: size,
+                    height: size,
+                    color,
+                    style: { display: 'block', width: '100%', height: '100%' },
+                })
+                : SvgIcon) }));
+}

package/dist/components/Icon/icons.d.ts

@@ -0,0 +1,21 @@
+export declare const icons: {
+    search: import("react/jsx-runtime").JSX.Element;
+    account: import("react/jsx-runtime").JSX.Element;
+    setting: import("react/jsx-runtime").JSX.Element;
+    delete: import("react/jsx-runtime").JSX.Element;
+    arrow_up: import("react/jsx-runtime").JSX.Element;
+    arrow_down: import("react/jsx-runtime").JSX.Element;
+    arrow_right: import("react/jsx-runtime").JSX.Element;
+    arrow_left: import("react/jsx-runtime").JSX.Element;
+    chevron_down: import("react/jsx-runtime").JSX.Element;
+    check: import("react/jsx-runtime").JSX.Element;
+    dash: import("react/jsx-runtime").JSX.Element;
+    close: import("react/jsx-runtime").JSX.Element;
+    info: import("react/jsx-runtime").JSX.Element;
+    check_circle: import("react/jsx-runtime").JSX.Element;
+    error: import("react/jsx-runtime").JSX.Element;
+    warning: import("react/jsx-runtime").JSX.Element;
+    add: import("react/jsx-runtime").JSX.Element;
+};
+export type IconKey = keyof typeof icons;
+//# sourceMappingURL=icons.d.ts.map

package/dist/components/Icon/icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/icons.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;CAsNjB,CAAC;AAEF,MAAM,MAAM,OAAO,GAAG,MAAM,OAAO,KAAK,CAAC"}

package/dist/components/Icon/icons.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const icons = {
+    search: (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("circle", { cx: "11", cy: "11", r: "7", stroke: "currentColor", strokeWidth: "2", fill: "none" }), _jsx("line", { x1: "16.5", y1: "16.5", x2: "21", y2: "21", stroke: "currentColor", strokeWidth: "2" })] })),
+    account: (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("circle", { cx: "12", cy: "8", r: "4", stroke: "currentColor", strokeWidth: "2", fill: "none" }), _jsx("path", { d: "M4 20c0-4 16-4 16 0", stroke: "currentColor", strokeWidth: "2", fill: "none" })] })),
+    setting: (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("circle", { cx: "12", cy: "12", r: "3", stroke: "currentColor", strokeWidth: "2", fill: "none" }), _jsx("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06A1.65 1.65 0 0 0 15 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 8.6 15a1.65 1.65 0 0 0-1.82-.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.6a1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 15 8.6a1.65 1.65 0 0 0 1.82.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 15z", stroke: "currentColor", strokeWidth: "2", fill: "none" })] })),
+    delete: (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("rect", { x: "6", y: "7", width: "12", height: "13", rx: "2", stroke: "currentColor", strokeWidth: "2", fill: "none" }), _jsx("path", { d: "M3 7h18", stroke: "currentColor", strokeWidth: "2" }), _jsx("path", { d: "M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2", stroke: "currentColor", strokeWidth: "2" })] })),
+    arrow_up: (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M12 19V5", stroke: "currentColor", strokeWidth: "2" }), _jsx("path", { d: "M5 12l7-7 7 7", stroke: "currentColor", strokeWidth: "2", fill: "none" })] })),
+    arrow_down: (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M12 5v14", stroke: "currentColor", strokeWidth: "2" }), _jsx("path", { d: "M19 12l-7 7-7-7", stroke: "currentColor", strokeWidth: "2", fill: "none" })] })),
+    arrow_right: (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M9.5 17V7L14.5 12L9.5 17Z", fill: "currentColor" }) })),
+    arrow_left: (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M14.5 17L9.5 12L14.5 7V17Z", fill: "currentColor" }) })),
+    chevron_down: (_jsx("svg", { viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M5 8L10 13L15 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })),
+    check: (_jsx("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M2 8.5L6.5 13L14 3.5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })),
+    dash: (_jsx("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M3 8H13", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) })),
+    close: (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18", stroke: "currentColor", strokeWidth: "2" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18", stroke: "currentColor", strokeWidth: "2" })] })),
+    info: (_jsxs("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("circle", { cx: "8", cy: "8", r: "7", fill: "currentColor" }), _jsx("rect", { x: "7.25", y: "6.5", width: "1.5", height: "5", rx: "0.75", fill: "#ffffff" }), _jsx("circle", { cx: "8", cy: "4.5", r: "1", fill: "#ffffff" })] })),
+    check_circle: (_jsxs("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("circle", { cx: "8", cy: "8", r: "7", fill: "currentColor" }), _jsx("path", { d: "M4.25 8.25L6.75 10.75L11.75 5.75", stroke: "#ffffff", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] })),
+    error: (_jsxs("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("circle", { cx: "8", cy: "8", r: "7", fill: "currentColor" }), _jsx("rect", { x: "7.25", y: "4", width: "1.5", height: "6", rx: "0.75", fill: "#ffffff" }), _jsx("circle", { cx: "8", cy: "12", r: "1", fill: "#ffffff" })] })),
+    warning: (_jsxs("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M8 1.5L15 13.5H1L8 1.5Z", fill: "currentColor" }), _jsx("rect", { x: "7.25", y: "5", width: "1.5", height: "4.75", rx: "0.75", fill: "#ffffff" }), _jsx("circle", { cx: "8", cy: "11.5", r: "1", fill: "#ffffff" })] })),
+    add: (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("line", { x1: "12", y1: "5", x2: "12", y2: "19", stroke: "currentColor", strokeWidth: "2" }), _jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12", stroke: "currentColor", strokeWidth: "2" })] })),
+};

package/dist/components/Icon/index.d.ts

@@ -0,0 +1,3 @@
+export { Icon, iconNames } from './Icon';
+export type { IconName, IconProps } from './Icon';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Icon/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACzC,YAAY,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC"}

package/dist/components/Icon/index.js

@@ -0,0 +1 @@
+export { Icon, iconNames } from './Icon';

package/dist/components/Icons/Icons.d.ts

@@ -0,0 +1,3 @@
+export { Icon, iconNames } from '../Icon/Icon';
+export type { IconName, IconProps } from '../Icon/Icon';
+//# sourceMappingURL=Icons.d.ts.map

package/dist/components/Icons/Icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icons.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/Icons.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC/C,YAAY,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC"}

package/dist/components/Icons/Icons.js

@@ -0,0 +1 @@
+export { Icon, iconNames } from '../Icon/Icon';

package/dist/components/Index/Index.d.ts

@@ -0,0 +1,3 @@
+import type { IndexProps } from '../../types';
+export declare function Index({ activeLetter, className, defaultActiveLetter, items, maxVisiblePages, onLetterChange, showStepControls, style, ...props }: IndexProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Index.d.ts.map

package/dist/components/Index/Index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Index.d.ts","sourceRoot":"","sources":["../../../src/components/Index/Index.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAa,UAAU,EAAE,MAAM,aAAa,CAAC;AAoDzD,wBAAgB,KAAK,CAAC,EACpB,YAAY,EACZ,SAAS,EACT,mBAAmB,EACnB,KAAK,EACL,eAAmB,EACnB,cAAc,EACd,gBAAwB,EACxB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,UAAU,2CAkLZ"}

package/dist/components/Index/Index.js

@@ -0,0 +1,114 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { Icon } from '../Icon/Icon';
+const ITEM_WIDTH = 48;
+function getClassName(className) {
+    return ['liquid-index', className].filter(Boolean).join(' ');
+}
+function getDefaultItems() {
+    return Array.from({ length: 26 }, (_, i) => ({
+        letter: String.fromCharCode(65 + i),
+    }));
+}
+function normalizeItems(items) {
+    const seen = new Set();
+    return items.flatMap((item) => {
+        const normalized = item.letter.trim().toUpperCase();
+        if (!normalized || seen.has(normalized)) {
+            return [];
+        }
+        seen.add(normalized);
+        return [{ ...item, letter: normalized }];
+    });
+}
+function getFirstEnabledLetter(items) {
+    return items.find((item) => !item.disabled)?.letter;
+}
+function getVisibleItems(items, activeIndex, maxVisible) {
+    if (items.length <= maxVisible) {
+        return items;
+    }
+    const sideCount = Math.floor(maxVisible / 2);
+    let start = Math.max(0, activeIndex - sideCount);
+    const end = Math.min(items.length - 1, start + maxVisible - 1);
+    if (end - start + 1 < maxVisible) {
+        start = Math.max(0, end - maxVisible + 1);
+    }
+    return items.slice(start, end + 1);
+}
+export function Index({ activeLetter, className, defaultActiveLetter, items, maxVisiblePages = 5, onLetterChange, showStepControls = false, style, ...props }) {
+    const navRef = useRef(null);
+    const resolvedItems = useMemo(() => {
+        const source = items?.length ? [...items] : getDefaultItems();
+        return normalizeItems(source);
+    }, [items]);
+    const [responsiveVisiblePages, setResponsiveVisiblePages] = useState(Math.max(1, maxVisiblePages));
+    const fallbackActive = getFirstEnabledLetter(resolvedItems);
+    const [internalActiveLetter, setInternalActiveLetter] = useState(defaultActiveLetter?.trim().toUpperCase() ?? fallbackActive);
+    const requestedActive = activeLetter?.trim().toUpperCase();
+    const resolvedActiveLetter = resolvedItems.find((item) => item.letter === (requestedActive ?? internalActiveLetter) &&
+        !item.disabled)?.letter ?? fallbackActive;
+    const enabledLetters = useMemo(() => resolvedItems.filter((item) => !item.disabled).map((item) => item.letter), [resolvedItems]);
+    const maxVisible = Math.max(1, maxVisiblePages);
+    useEffect(() => {
+        setResponsiveVisiblePages(maxVisible);
+    }, [maxVisible]);
+    useEffect(() => {
+        const navElement = navRef.current;
+        if (!navElement || typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        const controlCount = showStepControls ? 2 : 0;
+        const updateVisiblePages = (width) => {
+            const availableSlots = Math.floor(width / ITEM_WIDTH) - controlCount;
+            const fittedVisible = Math.max(1, availableSlots);
+            setResponsiveVisiblePages((current) => current === fittedVisible ? current : fittedVisible);
+        };
+        const observer = new ResizeObserver((entries) => {
+            const entry = entries[0];
+            if (!entry) {
+                return;
+            }
+            updateVisiblePages(entry.contentRect.width);
+        });
+        observer.observe(navElement);
+        updateVisiblePages(navElement.getBoundingClientRect().width);
+        return () => {
+            observer.disconnect();
+        };
+    }, [showStepControls]);
+    const activeEnabledIndex = enabledLetters.findIndex((letter) => letter === resolvedActiveLetter);
+    const activeLetterIndex = resolvedItems.findIndex((item) => item.letter === resolvedActiveLetter);
+    const effectiveVisiblePages = Math.min(resolvedItems.length, maxVisible, responsiveVisiblePages);
+    const visibleItems = useMemo(() => {
+        if (!resolvedItems.length) {
+            return [];
+        }
+        const resolvedActiveIndex = activeLetterIndex < 0 ? 0 : activeLetterIndex;
+        return getVisibleItems(resolvedItems, resolvedActiveIndex, Math.max(1, effectiveVisiblePages));
+    }, [activeLetterIndex, effectiveVisiblePages, resolvedItems]);
+    const activateLetter = (letter) => {
+        if (activeLetter === undefined) {
+            setInternalActiveLetter(letter);
+        }
+        onLetterChange?.(letter);
+    };
+    return (_jsxs("nav", { ...props, "aria-label": "A-Z index", className: getClassName(className), ref: navRef, style: style, children: [showStepControls ? (_jsx("button", { "aria-label": "Previous letter", className: "liquid-index__item liquid-index__item--icon", disabled: activeEnabledIndex <= 0, onClick: () => {
+                    if (activeEnabledIndex > 0) {
+                        activateLetter(enabledLetters[activeEnabledIndex - 1]);
+                    }
+                }, type: "button", children: _jsx(Icon, { name: "arrow_left", size: 24 }) })) : null, visibleItems.map((item) => {
+                const isSelected = item.letter === resolvedActiveLetter;
+                return (_jsxs("button", { "aria-current": isSelected ? 'page' : undefined, "aria-label": `Letter ${item.letter}`, className: "liquid-index__item", "data-selected": isSelected || undefined, disabled: item.disabled, onClick: () => {
+                        if (!item.disabled) {
+                            activateLetter(item.letter);
+                        }
+                    }, type: "button", children: [_jsx("span", { className: "liquid-index__label", children: item.letter }), isSelected ? _jsx("span", { className: "liquid-index__indicator" }) : null] }, item.letter));
+            }), showStepControls ? (_jsx("button", { "aria-label": "Next letter", className: "liquid-index__item liquid-index__item--icon", disabled: activeEnabledIndex < 0 ||
+                    activeEnabledIndex >= enabledLetters.length - 1, onClick: () => {
+                    if (activeEnabledIndex >= 0 &&
+                        activeEnabledIndex < enabledLetters.length - 1) {
+                        activateLetter(enabledLetters[activeEnabledIndex + 1]);
+                    }
+                }, type: "button", children: _jsx(Icon, { name: "arrow_right", size: 24 }) })) : null] }));
+}

package/dist/components/InlineNotification/InlineNotification.d.ts

@@ -0,0 +1,3 @@
+import type { InlineNotificationProps } from '../../types';
+export declare function InlineNotification({ actionHref, actionLabel, children, className, dismissLabel, hideDismiss, kind, onAction, onDismiss, role, status, style, title, ...props }: InlineNotificationProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=InlineNotification.d.ts.map

package/dist/components/InlineNotification/InlineNotification.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InlineNotification.d.ts","sourceRoot":"","sources":["../../../src/components/InlineNotification/InlineNotification.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EACV,uBAAuB,EAExB,MAAM,aAAa,CAAC;AA+DrB,wBAAgB,kBAAkB,CAAC,EACjC,UAAU,EACV,WAAsB,EACtB,QAAQ,EACR,SAAS,EACT,YAAqC,EACrC,WAAW,EACX,IAAgB,EAChB,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,MAAsB,EACtB,KAAK,EACL,KAAK,EACL,GAAG,KAAK,EACT,EAAE,uBAAuB,kDAwEzB"}

package/dist/components/InlineNotification/InlineNotification.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Icon } from '../Icon/Icon';
+import { Link } from '../Link/Link';
+const DEFAULT_TITLE = {
+    information: 'Information',
+    success: 'Success',
+    warning: 'Warning',
+    error: 'Error',
+};
+const DEFAULT_BODY = {
+    information: 'This notification provides additional context for the current workflow.',
+    success: 'Your changes were saved and are now available to everyone on the team.',
+    warning: 'Review the highlighted details before you continue to the next step.',
+    error: 'Something went wrong. Check the details and try the action again.',
+};
+const STATUS_ICON = {
+    information: 'info',
+    success: 'check_circle',
+    warning: 'warning',
+    error: 'error',
+};
+function getClassName(className) {
+    return ['liquid-inline-notification', className].filter(Boolean).join(' ');
+}
+function renderAction(actionLabel, actionHref, onAction) {
+    if (actionHref) {
+        return (_jsx(Link, { appearance: "standalone", href: actionHref, showTrailingIcon: false, size: "md", children: actionLabel }));
+    }
+    return (_jsx(Link, { appearance: "standalone", onClick: onAction, showTrailingIcon: false, size: "md", children: actionLabel }));
+}
+export function InlineNotification({ actionHref, actionLabel = 'Review', children, className, dismissLabel = 'Dismiss notification', hideDismiss, kind = 'default', onAction, onDismiss, role, status = 'information', style, title, ...props }) {
+    const [isDismissed, setIsDismissed] = useState(false);
+    const resolvedTitle = title ?? DEFAULT_TITLE[status];
+    const resolvedBody = children ?? DEFAULT_BODY[status];
+    const resolvedRole = role ?? (status === 'error' ? 'alert' : 'status');
+    const isActionable = kind === 'actionable';
+    const iconName = STATUS_ICON[status];
+    const handleDismiss = () => {
+        setIsDismissed(true);
+        onDismiss?.();
+    };
+    if (isDismissed) {
+        return null;
+    }
+    return (_jsxs("section", { ...props, "aria-live": status === 'error' ? undefined : 'polite', className: getClassName(className), "data-kind": kind, "data-status": status, role: resolvedRole, style: style, children: [_jsx("div", { className: "liquid-inline-notification__indicator" }), _jsxs("div", { className: "liquid-inline-notification__shell", children: [_jsxs("div", { className: "liquid-inline-notification__details", children: [_jsx("span", { "aria-hidden": "true", className: "liquid-inline-notification__status-icon", children: _jsx(Icon, { name: iconName, size: 24 }) }), _jsxs("div", { className: "liquid-inline-notification__content", children: [_jsxs("div", { className: "liquid-inline-notification__copy", children: [_jsx("p", { className: "liquid-inline-notification__title", children: resolvedTitle }), _jsx("p", { className: "liquid-inline-notification__body", children: resolvedBody })] }), isActionable ? (_jsx("div", { className: "liquid-inline-notification__actions", children: renderAction(actionLabel, actionHref, onAction) })) : null] })] }), !hideDismiss ? (_jsx("button", { "aria-label": dismissLabel, className: "liquid-inline-notification__dismiss", onClick: handleDismiss, type: "button", children: _jsx("span", { "aria-hidden": "true", className: "liquid-inline-notification__dismiss-icon", children: _jsx(Icon, { name: "close", size: 24 }) }) })) : null] })] }));
+}

package/dist/components/Link/Link.d.ts

@@ -0,0 +1,3 @@
+import type { LinkProps } from '../../types';
+export declare function Link(props: LinkProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Link.d.ts.map

package/dist/components/Link/Link.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../src/components/Link/Link.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAIV,SAAS,EACV,MAAM,aAAa,CAAC;AAMrB,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,2CA2EpC"}

package/dist/components/Link/Link.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from '../Icon/Icon';
+function getClassName(className) {
+    return ['liquid-link', className].filter(Boolean).join(' ');
+}
+export function Link(props) {
+    const appearance = props.appearance ?? 'standalone';
+    const children = props.children;
+    const className = props.className;
+    const showTrailingIcon = props.showTrailingIcon ?? true;
+    const size = props.size ?? 'md';
+    const state = props.state;
+    const style = props.style;
+    const isStandalone = appearance === 'standalone';
+    const showIcon = isStandalone && showTrailingIcon;
+    const iconSize = size === 'lg' ? 20 : 16;
+    if ('href' in props && props.href) {
+        const { appearance: _appearance, children: _children, className: _className, href, showTrailingIcon: _showTrailingIcon, size: _size, state: _state, style: _style, ...anchorProps } = props;
+        return (_jsxs("a", { ...anchorProps, className: getClassName(className), "data-appearance": appearance, "data-size": size, "data-state": state, href: href, style: style, children: [_jsx("span", { className: "liquid-link__label", children: children }), showIcon ? (_jsx("span", { "aria-hidden": "true", className: "liquid-link__icon", children: _jsx(Icon, { name: "arrow_right", size: iconSize }) })) : null] }));
+    }
+    const { appearance: _appearance, children: _children, className: _className, showTrailingIcon: _showTrailingIcon, size: _size, state: _state, style: _style, ...buttonProps } = props;
+    return (_jsxs("button", { ...buttonProps, className: getClassName(className), "data-appearance": appearance, "data-size": size, "data-state": state, style: style, type: buttonProps.type ?? 'button', children: [_jsx("span", { className: "liquid-link__label", children: children }), showIcon ? (_jsx("span", { "aria-hidden": "true", className: "liquid-link__icon", children: _jsx(Icon, { name: "arrow_right", size: iconSize }) })) : null] }));
+}

package/dist/components/Modal/Modal.d.ts

@@ -0,0 +1,3 @@
+import type { ModalProps } from '../../types';
+export declare function Modal({ children, className, closeButtonLabel, description, footerLayout, label, onClose, onPrimaryAction, onSecondaryAction, onTertiaryAction, primaryActionLabel, primaryActionVariant, secondaryActionLabel, showCloseButton, showFooter, style, tertiaryActionLabel, title, tone, ...props }: ModalProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Modal.d.ts.map

package/dist/components/Modal/Modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAoC,UAAU,EAAE,MAAM,aAAa,CAAC;AA6BhF,wBAAgB,KAAK,CAAC,EACpB,QAAQ,EACR,SAAS,EACT,gBAAiC,EACjC,WAAuN,EACvN,YAAY,EACZ,KAAwB,EACxB,OAAO,EACP,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EAChB,kBAA8B,EAC9B,oBAAoB,EACpB,oBAA+B,EAC/B,eAAsB,EACtB,UAAU,EACV,KAAK,EACL,mBAAqC,EACrC,KAAe,EACf,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,UAAU,2CAgHZ"}

package/dist/components/Modal/Modal.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../Button/Button';
+import { Icon } from '../Icon/Icon';
+function getClassName(className) {
+    return ['liquid-modal', className].filter(Boolean).join(' ');
+}
+function getDefaultFooterLayout(tone) {
+    if (tone === 'danger') {
+        return 'double';
+    }
+    if (tone === 'transactional') {
+        return 'split';
+    }
+    return 'single';
+}
+function getPrimaryVariant(tone, primaryActionVariant) {
+    if (primaryActionVariant) {
+        return primaryActionVariant;
+    }
+    return tone === 'danger' ? 'danger' : 'primary';
+}
+export function Modal({ children, className, closeButtonLabel = 'Close dialog', description = 'Modals are a type of dialog because it is a conversation between the user and the system. Use a modal to present critical information or request user input that is needed to complete a user workflow.', footerLayout, label = 'Optional label', onClose, onPrimaryAction, onSecondaryAction, onTertiaryAction, primaryActionLabel = 'Confirm', primaryActionVariant, secondaryActionLabel = 'Cancel', showCloseButton = true, showFooter, style, tertiaryActionLabel = 'Save as draft', title = 'Title', tone = 'passive', ...props }) {
+    const resolvedFooterLayout = footerLayout ?? getDefaultFooterLayout(tone);
+    const resolvedShowFooter = showFooter ?? tone !== 'passive';
+    const resolvedPrimaryVariant = getPrimaryVariant(tone, primaryActionVariant);
+    return (_jsxs("section", { ...props, className: getClassName(className), "data-footer-layout": resolvedFooterLayout, "data-tone": tone, style: style, children: [_jsxs("header", { className: "liquid-modal__header", children: [_jsxs("div", { className: "liquid-modal__header-content", children: [label ? _jsx("p", { className: "liquid-modal__label", children: label }) : null, _jsx("h2", { className: "liquid-modal__title", children: title })] }), showCloseButton ? (_jsx("button", { "aria-label": closeButtonLabel, className: "liquid-modal__close", onClick: onClose, type: "button", children: _jsx(Icon, { className: "liquid-modal__close-icon", name: "close", size: 24 }) })) : null] }), _jsxs("div", { className: "liquid-modal__content", children: [description ? (_jsx("div", { className: "liquid-modal__description-wrap", children: _jsx("p", { className: "liquid-modal__description", children: description }) })) : null, children ? _jsx("div", { className: "liquid-modal__body", children: children }) : null] }), resolvedShowFooter ? (_jsx("footer", { className: "liquid-modal__footer", children: _jsxs("div", { className: "liquid-modal__actions", children: [resolvedFooterLayout === 'single' ? (_jsx("div", { className: "liquid-modal__actions-single", children: _jsx(Button, { className: "liquid-modal__action liquid-modal__action--single", onClick: onPrimaryAction, size: "lg", variant: resolvedPrimaryVariant, children: primaryActionLabel }) })) : null, resolvedFooterLayout === 'double' ? (_jsxs("div", { className: "liquid-modal__actions-double", children: [_jsx(Button, { className: "liquid-modal__action", onClick: onPrimaryAction, size: "lg", variant: resolvedPrimaryVariant, children: primaryActionLabel }), _jsx(Button, { className: "liquid-modal__action", onClick: onSecondaryAction, size: "lg", variant: "secondary", children: secondaryActionLabel })] })) : null, resolvedFooterLayout === 'split' ? (_jsxs("div", { className: "liquid-modal__actions-split", children: [_jsxs("div", { className: "liquid-modal__actions-left", children: [_jsx(Button, { className: "liquid-modal__action", onClick: onPrimaryAction, size: "lg", variant: resolvedPrimaryVariant, children: primaryActionLabel }), _jsx(Button, { className: "liquid-modal__action", onClick: onSecondaryAction, size: "lg", variant: "secondary", children: secondaryActionLabel })] }), _jsx(Button, { className: "liquid-modal__action liquid-modal__action--option", onClick: onTertiaryAction, size: "lg", variant: "tertiary", children: tertiaryActionLabel })] })) : null] }) })) : null] }));
+}

package/dist/components/Pagination/Pagination.d.ts

@@ -0,0 +1,3 @@
+import type { PaginationProps } from '../../types';
+export declare function Pagination({ className, currentPage, maxVisiblePages, onPageChange, style, totalPages, ...props }: PaginationProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Pagination.d.ts.map

package/dist/components/Pagination/Pagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../src/components/Pagination/Pagination.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AA8BnD,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,WAAW,EACX,eAAmB,EACnB,YAAY,EACZ,KAAK,EACL,UAAU,EACV,GAAG,KAAK,EACT,EAAE,eAAe,2CAgEjB"}

package/dist/components/Pagination/Pagination.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from '../Icon/Icon';
+function getClassName(className) {
+    return ['liquid-pagination', className].filter(Boolean).join(' ');
+}
+function clampPage(page, totalPages) {
+    return Math.max(1, Math.min(totalPages, page));
+}
+function getVisiblePages(currentPage, totalPages, maxVisible) {
+    if (totalPages <= maxVisible) {
+        return Array.from({ length: totalPages }, (_, i) => i + 1);
+    }
+    const sideCount = Math.floor(maxVisible / 2);
+    let start = Math.max(1, currentPage - sideCount);
+    const end = Math.min(totalPages, start + maxVisible - 1);
+    if (end - start + 1 < maxVisible) {
+        start = Math.max(1, end - maxVisible + 1);
+    }
+    return Array.from({ length: end - start + 1 }, (_, i) => start + i);
+}
+export function Pagination({ className, currentPage, maxVisiblePages = 5, onPageChange, style, totalPages, ...props }) {
+    const resolvedCurrentPage = clampPage(currentPage, totalPages);
+    const visiblePages = getVisiblePages(resolvedCurrentPage, totalPages, Math.max(1, maxVisiblePages));
+    const goToPage = (page) => {
+        const nextPage = clampPage(page, totalPages);
+        if (nextPage !== resolvedCurrentPage) {
+            onPageChange?.(nextPage);
+        }
+    };
+    return (_jsxs("nav", { ...props, "aria-label": "Pagination", className: getClassName(className), style: style, children: [_jsx("button", { "aria-label": "Previous page", className: "liquid-pagination__item liquid-pagination__item--icon", disabled: resolvedCurrentPage <= 1, onClick: () => goToPage(resolvedCurrentPage - 1), type: "button", children: _jsx(Icon, { name: "arrow_left", size: 24 }) }), visiblePages.map((page) => {
+                const isSelected = page === resolvedCurrentPage;
+                return (_jsxs("button", { "aria-current": isSelected ? 'page' : undefined, "aria-label": `Page ${page}`, className: "liquid-pagination__item liquid-pagination__item--number", "data-selected": isSelected || undefined, onClick: () => goToPage(page), type: "button", children: [_jsx("span", { className: "liquid-pagination__label", children: page }), isSelected ? (_jsx("span", { className: "liquid-pagination__indicator" })) : null] }, page));
+            }), _jsx("button", { "aria-label": "Next page", className: "liquid-pagination__item liquid-pagination__item--icon", disabled: resolvedCurrentPage >= totalPages, onClick: () => goToPage(resolvedCurrentPage + 1), type: "button", children: _jsx(Icon, { name: "arrow_right", size: 24 }) })] }));
+}

package/dist/components/Radio/Radio.d.ts

@@ -0,0 +1,3 @@
+import type { RadioProps } from '../../types';
+export declare function Radio({ className, id, label, hideLabel, style, disabled, ...props }: RadioProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Radio.d.ts.map

package/dist/components/Radio/Radio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../src/components/Radio/Radio.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAgB9C,wBAAgB,KAAK,CAAC,EACpB,SAAS,EACT,EAAE,EACF,KAAK,EACL,SAAiB,EACjB,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,UAAU,2CA6BZ"}

package/dist/components/Radio/Radio.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+function getClassName(className) {
+    return ['liquid-radio', className].filter(Boolean).join(' ');
+}
+function RadioDot() {
+    return (_jsx("span", { "aria-hidden": "true", className: "liquid-radio__dot", children: _jsx("svg", { viewBox: "0 0 16 16", fill: "none", children: _jsx("circle", { cx: "8", cy: "8", r: "4", fill: "currentColor" }) }) }));
+}
+export function Radio({ className, id, label, hideLabel = false, style, disabled, ...props }) {
+    const reactId = useId();
+    const inputId = id ?? reactId;
+    return (_jsxs("label", { className: getClassName(className), style: style, "data-disabled": disabled || undefined, children: [_jsx("input", { ...props, type: "radio", id: inputId, disabled: disabled, className: "liquid-radio__input" }), _jsx("span", { className: "liquid-radio__control", "aria-hidden": "true", children: _jsx(RadioDot, {}) }), label ? (_jsx("span", { className: hideLabel ? 'liquid-sr-only' : 'liquid-radio__label-text', children: label })) : null] }));
+}

package/dist/components/SearchInput/SearchInput.d.ts

@@ -0,0 +1,3 @@
+import type { SearchInputProps } from '../../types';
+export declare function SearchInput({ className, disabled, id, onClear, placeholder, style, onChange, value, defaultValue, ...props }: SearchInputProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SearchInput.d.ts.map

package/dist/components/SearchInput/SearchInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../../src/components/SearchInput/SearchInput.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAMpD,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,QAAQ,EACR,EAAE,EACF,OAAO,EACP,WAAsB,EACtB,KAAK,EACL,QAAQ,EACR,KAAK,EACL,YAAY,EACZ,GAAG,KAAK,EACT,EAAE,gBAAgB,2CA0ElB"}

package/dist/components/SearchInput/SearchInput.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from 'react';
+import { Icon } from '../Icon/Icon';
+function getClassName(className) {
+    return ['liquid-search-input', className].filter(Boolean).join(' ');
+}
+export function SearchInput({ className, disabled, id, onClear, placeholder = 'Search', style, onChange, value, defaultValue, ...props }) {
+    const reactId = useId();
+    const inputId = id ?? reactId;
+    const inputRef = useRef(null);
+    const isControlled = value !== undefined;
+    const [internalHasValue, setInternalHasValue] = useState(() => Boolean(isControlled ? value : defaultValue));
+    // Keep internal state in sync with controlled value
+    useEffect(() => {
+        if (isControlled) {
+            setInternalHasValue(Boolean(value));
+        }
+    }, [isControlled, value]);
+    const showClear = isControlled ? Boolean(value) : internalHasValue;
+    const handleChange = (e) => {
+        if (!isControlled) {
+            setInternalHasValue(Boolean(e.target.value));
+        }
+        onChange?.(e);
+    };
+    const handleClear = () => {
+        if (inputRef.current) {
+            inputRef.current.value = '';
+            inputRef.current.focus();
+        }
+        if (!isControlled) {
+            setInternalHasValue(false);
+        }
+        onClear?.();
+    };
+    return (_jsxs("div", { className: getClassName(className), "data-tone": disabled ? 'disabled' : undefined, style: style, children: [_jsx("label", { className: "liquid-search-input__label", htmlFor: inputId, children: _jsx("span", { className: "liquid-search-input__search-icon", children: _jsx(Icon, { name: "search", size: 24 }) }) }), _jsx("input", { ...props, ref: inputRef, className: "liquid-search-input__input", disabled: disabled, id: inputId, onChange: handleChange, placeholder: placeholder, type: "search", value: value, defaultValue: defaultValue }), showClear && !disabled ? (_jsx("button", { "aria-label": "Clear search", className: "liquid-search-input__clear", onClick: handleClear, type: "button", children: _jsx(Icon, { name: "close", size: 24 }) })) : null] }));
+}

package/dist/components/SelectInput/SelectInput.d.ts

@@ -0,0 +1,3 @@
+import type { SelectInputProps } from '../../types';
+export declare function SelectInput({ children, className, helperText, hideLabel, id, label, options, placeholder, size, tone, style, disabled, 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, ...props }: SelectInputProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SelectInput.d.ts.map

package/dist/components/SelectInput/SelectInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectInput.d.ts","sourceRoot":"","sources":["../../../src/components/SelectInput/SelectInput.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAMpD,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,SAAS,EACT,UAAU,EACV,SAAiB,EACjB,EAAE,EACF,KAAK,EACL,OAAO,EACP,WAAW,EACX,IAAW,EACX,IAAgB,EAChB,KAAK,EACL,QAAQ,EACR,kBAAkB,EAAE,eAAe,EACnC,cAAc,EAAE,WAAW,EAC3B,GAAG,KAAK,EACT,EAAE,gBAAgB,2CAkFlB"}