@kcascend/liquid-ui 0.0.1

package/README.md

@@ -0,0 +1,64 @@
+# Liquid UI Package
+
+`@kcascend/liquid-ui` is the reusable UI package for Liquid Design System consumers.
+
+## Local development
+
+1. Run `npm install` from the repository root to install the local file dependency.
+2. Run `npm run build:ui` to rebuild the package outputs in `packages/liquid-ui/dist`.
+3. Run `npm run storybook` to rebuild the package and launch Storybook against the package boundary.
+
+## Grid usage
+
+The package exposes a grid primitive through `GridLayout` and `GridColumn`.
+
+```tsx
+import { GridColumn, GridLayout } from '@kcascend/liquid-ui';
+
+export function Example() {
+  return (
+    <GridLayout as="div">
+      <GridColumn sm={4} md={4} lg={8}>
+        Primary
+      </GridColumn>
+      <GridColumn sm={2} md={2} lg={4}>
+        Secondary A
+      </GridColumn>
+      <GridColumn sm={2} md={2} lg={4}>
+        Secondary B
+      </GridColumn>
+    </GridLayout>
+  );
+}
+```
+
+Supported layout features:
+
+- Responsive spans through `sm`, `md`, `lg`, `xlg`, and `max`.
+- Offset columns with object values like `md={{ span: 4, offset: 2 }}`.
+- Gutter modes with `narrow` and `condensed`.
+- `withRowGap` to keep vertical spacing aligned with the active gutter.
+- `fullWidth` for viewport-spanning layouts.
+- `subgrid` for nested grids that inherit the parent column scaffold.
+- Auto columns when a `GridColumn` is rendered without explicit breakpoint props.
+
+## Figma governance
+
+Every reusable component must record an approved Figma reference in story metadata or component documentation before it is considered ready for review. The initial workflow example in this package uses the Liquid token source in Figma:
+
+- https://www.figma.com/design/QOtgMJzWSuF5XOLrlw151c/Liquid-DS---00-Tokens?node-id=5-110&p=f&m=dev
+- https://www.figma.com/design/a9SMb2IjyRedfsaUMGXIyP/Liquid-DS---01-Components?node-id=2-2299&m=dev
+
+Storybook now demonstrates both patterns:
+
+- a package-consumed button component with Figma and accessibility metadata
+- a token values reference story that reads directly from the generated `tokens` export
+
+## Accessibility verification
+
+Each component review must include:
+
+- Keyboard interaction expectations when the component is interactive.
+- Name, role, and state guidance for assistive technologies.
+- Color contrast and focus treatment verification.
+- Storybook documentation that explains any usage constraints needed to stay WCAG 2.1 aligned.

package/dist/components/Accordion/Accordion.d.ts

@@ -0,0 +1,3 @@
+import type { AccordionProps } from '../../types';
+export declare function Accordion({ allowMultiple, className, defaultOpenItemIds, items, onOpenChange, openItemIds, style, ...props }: AccordionProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Accordion.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAiB,cAAc,EAAE,MAAM,aAAa,CAAC;AA2BjE,wBAAgB,SAAS,CAAC,EACxB,aAAqB,EACrB,SAAS,EACT,kBAAkB,EAClB,KAAK,EACL,YAAY,EACZ,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACT,EAAE,cAAc,2CA4EhB"}

package/dist/components/Accordion/Accordion.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { Icon } from '../Icon/Icon';
+function getClassName(className) {
+    return ['liquid-accordion', className].filter(Boolean).join(' ');
+}
+function getItemClassName(item, isOpen) {
+    return [
+        'liquid-accordion__item',
+        isOpen ? 'liquid-accordion__item--open' : '',
+        item.disabled ? 'liquid-accordion__item--disabled' : '',
+    ]
+        .filter(Boolean)
+        .join(' ');
+}
+function getDefaultOpenItemIds(defaultOpenItemIds, allowMultiple) {
+    if (!defaultOpenItemIds || defaultOpenItemIds.length === 0) {
+        return [];
+    }
+    return allowMultiple ? defaultOpenItemIds : [defaultOpenItemIds[0]];
+}
+export function Accordion({ allowMultiple = false, className, defaultOpenItemIds, items, onOpenChange, openItemIds, style, ...props }) {
+    const initialOpenIds = useMemo(() => getDefaultOpenItemIds(defaultOpenItemIds, allowMultiple), [defaultOpenItemIds, allowMultiple]);
+    const [internalOpenIds, setInternalOpenIds] = useState(initialOpenIds);
+    const resolvedOpenIds = openItemIds ?? internalOpenIds;
+    const toggleItem = (itemId) => {
+        const isOpen = resolvedOpenIds.includes(itemId);
+        const nextOpenIds = isOpen
+            ? resolvedOpenIds.filter((id) => id !== itemId)
+            : allowMultiple
+                ? [...resolvedOpenIds, itemId]
+                : [itemId];
+        if (openItemIds === undefined) {
+            setInternalOpenIds(nextOpenIds);
+        }
+        onOpenChange?.(nextOpenIds);
+    };
+    return (_jsx("section", { ...props, className: getClassName(className), style: style, children: items.map((item) => {
+            const isOpen = resolvedOpenIds.includes(item.id);
+            const panelId = `${item.id}-panel`;
+            const triggerId = `${item.id}-trigger`;
+            return (_jsxs("article", { className: getItemClassName(item, isOpen), children: [_jsx("h3", { className: "liquid-accordion__heading", children: _jsxs("button", { id: triggerId, "aria-controls": panelId, "aria-expanded": isOpen, className: "liquid-accordion__trigger", disabled: item.disabled, "data-open": isOpen || undefined, type: "button", onClick: () => {
+                                toggleItem(item.id);
+                            }, children: [_jsx("span", { className: "liquid-accordion__title", children: item.title }), _jsx("span", { className: "liquid-accordion__icon", "aria-hidden": "true", children: _jsx(Icon, { name: "chevron_down", size: 20 }) })] }) }), _jsx("div", { id: panelId, "aria-labelledby": triggerId, className: "liquid-accordion__panel", hidden: !isOpen, role: "region", children: _jsx("div", { className: "liquid-accordion__text-margin", children: _jsx("div", { className: "liquid-accordion__content", children: item.content }) }) })] }, item.id));
+        }) }));
+}

package/dist/components/Breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,3 @@
+import type { BreadcrumbProps } from '../../types';
+export declare function Breadcrumb({ ariaLabel, className, items, onNavigate, separator, style, ...props }: BreadcrumbProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Breadcrumb.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumb/Breadcrumb.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAkB,eAAe,EAAE,MAAM,aAAa,CAAC;AA0BnE,wBAAgB,UAAU,CAAC,EACzB,SAAwB,EACxB,SAAS,EACT,KAAK,EACL,UAAU,EACV,SAAe,EACf,KAAK,EACL,GAAG,KAAK,EACT,EAAE,eAAe,2CA+DjB"}

package/dist/components/Breadcrumb/Breadcrumb.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function getClassName(className) {
+    return ['liquid-breadcrumb', className].filter(Boolean).join(' ');
+}
+function getItemClassName(className, isCurrent) {
+    return [
+        'liquid-breadcrumb__item',
+        isCurrent ? 'liquid-breadcrumb__item--current' : '',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+}
+function getVisibleItems(items) {
+    return items.filter((item) => item.label !== null && item.label !== undefined);
+}
+function isCurrentItem(index, itemCount) {
+    return index === itemCount - 1;
+}
+export function Breadcrumb({ ariaLabel = 'Breadcrumb', className, items, onNavigate, separator = '/', style, ...props }) {
+    const visibleItems = getVisibleItems(items);
+    return (_jsx("nav", { ...props, "aria-label": ariaLabel, className: getClassName(className), style: style, children: _jsx("ol", { className: "liquid-breadcrumb__list", children: visibleItems.map((item, itemIndex) => {
+                const resolvedId = item.id ?? itemIndex;
+                const current = isCurrentItem(itemIndex, visibleItems.length);
+                const itemClassName = getItemClassName(item.className, current);
+                return (_jsxs("li", { className: itemClassName, children: [current ? (_jsx("span", { "aria-current": "page", className: "liquid-breadcrumb__current", children: item.label })) : item.href ? (_jsx("a", { className: "liquid-breadcrumb__link", href: item.href, onClick: () => {
+                                onNavigate?.(item, itemIndex);
+                                item.onClick?.();
+                            }, children: item.label })) : (_jsx("button", { className: "liquid-breadcrumb__link", onClick: () => {
+                                onNavigate?.(item, itemIndex);
+                                item.onClick?.();
+                            }, type: "button", children: item.label })), !current ? (_jsx("span", { "aria-hidden": "true", className: "liquid-breadcrumb__separator", children: separator })) : null] }, String(resolvedId)));
+            }) }) }));
+}

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,3 @@
+import type { ButtonProps } from '../../types';
+export declare function Button({ children, className, variant, size, disabled, style, type, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAA6B,MAAM,aAAa,CAAC;AAM1E,wBAAgB,MAAM,CAAC,EACrB,QAAQ,EACR,SAAS,EACT,OAAmB,EACnB,IAAW,EACX,QAAgB,EAChB,KAAK,EACL,IAAe,EACf,GAAG,KAAK,EACT,EAAE,WAAW,2CAcb"}

package/dist/components/Button/Button.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+function getButtonClassName(className) {
+    return ['liquid-button', className].filter(Boolean).join(' ');
+}
+export function Button({ children, className, variant = 'primary', size = 'md', disabled = false, style, type = 'button', ...props }) {
+    return (_jsx("button", { ...props, className: getButtonClassName(className), "data-size": size, "data-variant": variant, disabled: disabled, style: style, type: type, children: children }));
+}

package/dist/components/Card/Card.d.ts

@@ -0,0 +1,3 @@
+import type { CardProps } from '../../types';
+export declare function Card({ action, actionButtonProps, actionLabel, className, disabled, description, details, onAction, style, title, ...props }: CardProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Card.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAM7C,wBAAgB,IAAI,CAAC,EACnB,MAAM,EACN,iBAAiB,EACjB,WAAW,EACX,SAAS,EACT,QAAgB,EAChB,WAAW,EACX,OAAY,EACZ,QAAQ,EACR,KAAK,EACL,KAAK,EACL,GAAG,KAAK,EACT,EAAE,SAAS,2CAyEX"}

package/dist/components/Card/Card.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../Button/Button';
+function getClassName(className) {
+    return ['liquid-card', className].filter(Boolean).join(' ');
+}
+export function Card({ action, actionButtonProps, actionLabel, className, disabled = false, description, details = [], onAction, style, title, ...props }) {
+    const hasHeader = Boolean(title || description);
+    const hasBody = details.length > 0;
+    const hasFooter = Boolean(action || actionLabel);
+    return (_jsx("section", { ...props, "aria-disabled": disabled || undefined, className: getClassName(className), "data-disabled": disabled ? 'true' : undefined, style: style, children: _jsxs("div", { className: "liquid-card__container", children: [hasHeader ? (_jsxs("header", { className: "liquid-card__header", children: [title ? _jsx("h2", { className: "liquid-card__title", children: title }) : null, description ? (_jsx("p", { className: "liquid-card__description", children: description })) : null] })) : null, hasBody ? (_jsx("div", { className: "liquid-card__body", children: _jsx("dl", { className: "liquid-card__detail-list", children: details.map((detail, detailIndex) => {
+                            const resolvedId = detail.id ?? detailIndex;
+                            return (_jsxs("div", { className: "liquid-card__detail-row", children: [_jsx("dt", { className: "liquid-card__detail-label", children: detail.label }), _jsx("dd", { className: "liquid-card__detail-value", children: detail.value })] }, String(resolvedId)));
+                        }) }) })) : null, hasFooter ? (_jsx("footer", { className: "liquid-card__footer", children: action ? (action) : (_jsx(Button, { ...actionButtonProps, className: [
+                            'liquid-card__action-button',
+                            actionButtonProps?.className,
+                        ]
+                            .filter(Boolean)
+                            .join(' '), disabled: disabled || actionButtonProps?.disabled, size: actionButtonProps?.size ?? 'sm', variant: actionButtonProps?.variant ?? 'primary', onClick: onAction, children: actionLabel })) })) : null] }) }));
+}

package/dist/components/Checkbox/Checkbox.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAMjD,wBAAgB,QAAQ,CAAC,EACvB,SAAS,EACT,EAAE,EACF,aAAqB,EACrB,KAAK,EACL,SAAiB,EACjB,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,aAAa,2CAkDf"}

package/dist/components/Checkbox/Checkbox.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useRef, useEffect } from 'react';
+import { Icon } from '../Icon/Icon';
+function getClassName(className) {
+    return ['liquid-checkbox', className].filter(Boolean).join(' ');
+}
+export function Checkbox({ className, id, indeterminate = false, label, hideLabel = false, style, disabled, ...props }) {
+    const reactId = useId();
+    const inputId = id ?? reactId;
+    const inputRef = useRef(null);
+    useEffect(() => {
+        if (inputRef.current) {
+            inputRef.current.indeterminate = indeterminate;
+        }
+    }, [indeterminate]);
+    return (_jsxs("label", { className: getClassName(className), style: style, "data-disabled": disabled || undefined, children: [_jsx("input", { ...props, ref: inputRef, type: "checkbox", id: inputId, disabled: disabled, className: "liquid-checkbox__input" }), _jsxs("span", { className: "liquid-checkbox__box", "aria-hidden": "true", children: [_jsx(Icon, { className: "liquid-checkbox__check-icon", color: "var(--component-checkbox-icon-check, #ffffff)", name: "check", size: 14 }), _jsx(Icon, { className: "liquid-checkbox__dash-icon", color: "var(--component-checkbox-icon-check, #ffffff)", name: "dash", size: 14 })] }), label ? (_jsx("span", { className: hideLabel ? 'liquid-sr-only' : 'liquid-checkbox__label-text', children: label })) : null] }));
+}

package/dist/components/ContainedList/ContainedList.d.ts

@@ -0,0 +1,3 @@
+import type { ContainedListProps } from '../../types';
+export declare function ContainedList({ ariaLabel, className, items, style, title, variant, ...props }: ContainedListProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ContainedList.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ContainedList.d.ts","sourceRoot":"","sources":["../../../src/components/ContainedList/ContainedList.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAwB,MAAM,aAAa,CAAC;AAwB5E,wBAAgB,aAAa,CAAC,EAC5B,SAA4B,EAC5B,SAAS,EACT,KAAK,EACL,KAAK,EACL,KAAK,EACL,OAAmB,EACnB,GAAG,KAAK,EACT,EAAE,kBAAkB,2CAuCpB"}

package/dist/components/ContainedList/ContainedList.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function getClassName(className) {
+    return ['liquid-contained-list', className].filter(Boolean).join(' ');
+}
+function getHeaderClassName(variant) {
+    return [
+        'liquid-contained-list__header',
+        `liquid-contained-list__header--${variant}`,
+    ]
+        .filter(Boolean)
+        .join(' ');
+}
+function getTitleClassName(variant) {
+    return [
+        'liquid-contained-list__title',
+        `liquid-contained-list__title--${variant}`,
+    ]
+        .filter(Boolean)
+        .join(' ');
+}
+export function ContainedList({ ariaLabel = 'Contained list', className, items, style, title, variant = 'on-page', ...props }) {
+    return (_jsx("section", { ...props, className: getClassName(className), style: style, children: _jsxs("div", { className: "liquid-contained-list__table", role: "table", "aria-label": ariaLabel, children: [_jsx("div", { className: getHeaderClassName(variant), role: "rowgroup", children: _jsx("div", { className: "liquid-contained-list__row", role: "row", children: _jsx("div", { className: getTitleClassName(variant), role: "columnheader", children: title }) }) }), _jsx("div", { className: "liquid-contained-list__body", role: "rowgroup", children: items.map((item, itemIndex) => {
+                        const resolvedId = item.id ?? itemIndex;
+                        return (_jsx("div", { className: "liquid-contained-list__row", role: "row", children: _jsx("div", { className: "liquid-contained-list__item-label", role: "cell", children: item.label }) }, String(resolvedId)));
+                    }) })] }) }));
+}

package/dist/components/DataTable/DataTable.d.ts

@@ -0,0 +1,3 @@
+import type { DataTableProps } from '../../types';
+export declare function DataTable({ captionDescription, captionTitle, className, columns, onRowSelectChange, onSelectAllChange, rowCheckboxLabel, rows, selectable, selectAllLabel, style, ...props }: DataTableProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DataTable.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/DataTable.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAMlD,wBAAgB,SAAS,CAAC,EACxB,kBAAmE,EACnE,YAA4B,EAC5B,SAAS,EACT,OAAO,EACP,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,IAAI,EACJ,UAAkB,EAClB,cAAkC,EAClC,KAAK,EACL,GAAG,KAAK,EACT,EAAE,cAAc,2CAgGhB"}

package/dist/components/DataTable/DataTable.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Checkbox } from '../Checkbox/Checkbox';
+function getClassName(className) {
+    return ['liquid-data-table', className].filter(Boolean).join(' ');
+}
+export function DataTable({ captionDescription = 'Brief description of what the table contains', captionTitle = 'Table title', className, columns, onRowSelectChange, onSelectAllChange, rowCheckboxLabel, rows, selectable = false, selectAllLabel = 'Select all rows', style, ...props }) {
+    const selectableRows = rows.filter((row) => !row.selectionDisabled);
+    const selectedCount = selectableRows.filter((row) => row.selected).length;
+    const allSelected = selectableRows.length > 0 && selectedCount === selectableRows.length;
+    const partiallySelected = selectedCount > 0 && !allSelected;
+    return (_jsxs("section", { ...props, className: getClassName(className), style: style, children: [_jsxs("header", { className: "liquid-data-table__header", children: [_jsx("h2", { className: "liquid-data-table__title", children: captionTitle }), _jsx("p", { className: "liquid-data-table__description", children: captionDescription })] }), _jsxs("table", { className: "liquid-data-table__table", children: [_jsx("thead", { children: _jsxs("tr", { className: "liquid-data-table__column-row", children: [selectable ? (_jsx("th", { className: "liquid-data-table__column-header liquid-data-table__checkbox-column", scope: "col", children: _jsx(Checkbox, { checked: allSelected, indeterminate: partiallySelected, label: selectAllLabel, hideLabel: true, onChange: (event) => {
+                                            onSelectAllChange?.(event.currentTarget.checked);
+                                        } }) })) : null, columns.map((column) => (_jsx("th", { className: "liquid-data-table__column-header", "data-align": column.align ?? 'left', scope: "col", children: column.header }, column.id)))] }) }), _jsx("tbody", { children: rows.map((row, rowIndex) => {
+                            const resolvedId = row.id ?? rowIndex;
+                            return (_jsxs("tr", { className: "liquid-data-table__row", "data-selected": row.selected || undefined, children: [selectable ? (_jsx("td", { className: "liquid-data-table__cell liquid-data-table__checkbox-column", children: _jsx(Checkbox, { checked: Boolean(row.selected), disabled: row.selectionDisabled, hideLabel: true, label: rowCheckboxLabel?.(row, rowIndex) ??
+                                                `Select row ${rowIndex + 1}`, onChange: (event) => {
+                                                onRowSelectChange?.(resolvedId, event.currentTarget.checked);
+                                            } }) })) : null, columns.map((column, columnIndex) => (_jsx("td", { className: "liquid-data-table__cell", "data-align": column.align ?? 'left', children: row.cells[columnIndex] ?? null }, `${String(resolvedId)}:${column.id}`)))] }, String(resolvedId)));
+                        }) })] })] }));
+}

package/dist/components/DescriptionList/DescriptionList.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"DescriptionList.d.ts","sourceRoot":"","sources":["../../../src/components/DescriptionList/DescriptionList.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAuB,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAU7E,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,SAAS,EACT,KAAK,EACL,KAAK,EACL,GAAG,KAAK,EACT,EAAE,oBAAoB,2CA2BtB"}

package/dist/components/DescriptionList/DescriptionList.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function getClassName(className) {
+    return ['liquid-description-list', className].filter(Boolean).join(' ');
+}
+function getVisibleItems(items) {
+    return items.filter((item) => Boolean(item.label || item.value));
+}
+export function DescriptionList({ ariaLabel, className, items, style, ...props }) {
+    const visibleItems = getVisibleItems(items);
+    return (_jsx("section", { ...props, "aria-label": ariaLabel, className: getClassName(className), style: style, children: _jsx("dl", { className: "liquid-description-list__content", children: visibleItems.map((item, itemIndex) => {
+                const resolvedId = item.id ?? itemIndex;
+                return (_jsxs("div", { className: "liquid-description-list__row", children: [_jsx("dt", { className: "liquid-description-list__label", children: item.label }), _jsx("dd", { className: "liquid-description-list__value", children: item.value })] }, String(resolvedId)));
+            }) }) }));
+}

package/dist/components/Form/Form.d.ts

@@ -0,0 +1,5 @@
+import type { FormItemProps, FormProps, FormRowProps } from '../../types';
+export declare function Form({ actions, children, className, description, onPrimaryAction, onSecondaryAction, primaryActionButtonProps, primaryActionLabel, secondaryActionButtonProps, secondaryActionLabel, style, title, ...props }: FormProps): import("react/jsx-runtime").JSX.Element;
+export declare function FormRow({ children, className, ...props }: FormRowProps): import("react/jsx-runtime").JSX.Element;
+export declare function FormItem({ children, className, grow, ...props }: FormItemProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Form.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../src/components/Form/Form.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAc1E,wBAAgB,IAAI,CAAC,EACnB,OAAO,EACP,QAAQ,EACR,SAAS,EACT,WAAW,EACX,eAAe,EACf,iBAAiB,EACjB,wBAAwB,EACxB,kBAAkB,EAClB,0BAA0B,EAC1B,oBAAoB,EACpB,KAAK,EACL,KAAK,EACL,GAAG,KAAK,EACT,EAAE,SAAS,2CAwEX;AAED,wBAAgB,OAAO,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,2CAMtE;AAED,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EACR,SAAS,EACT,IAAY,EACZ,GAAG,KAAK,EACT,EAAE,aAAa,2CAUf"}

package/dist/components/Form/Form.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../Button/Button';
+function getClassName(className) {
+    return ['liquid-form', className].filter(Boolean).join(' ');
+}
+function getItemClassName(className) {
+    return ['liquid-form__item', className].filter(Boolean).join(' ');
+}
+function getRowClassName(className) {
+    return ['liquid-form__row', className].filter(Boolean).join(' ');
+}
+export function Form({ actions, children, className, description, onPrimaryAction, onSecondaryAction, primaryActionButtonProps, primaryActionLabel, secondaryActionButtonProps, secondaryActionLabel, style, title, ...props }) {
+    const hasHeader = Boolean(title || description);
+    const hasFooter = Boolean(actions || primaryActionLabel || secondaryActionLabel);
+    return (_jsxs("form", { ...props, className: getClassName(className), style: style, children: [hasHeader ? (_jsxs("header", { className: "liquid-form__header", children: [title ? _jsx("h2", { className: "liquid-form__title", children: title }) : null, description ? (_jsx("p", { className: "liquid-form__description", children: description })) : null] })) : null, _jsxs("div", { className: "liquid-form__content", children: [_jsx("div", { className: "liquid-form__body", children: children }), hasFooter ? (_jsx("footer", { className: "liquid-form__footer", children: actions ? (actions) : (_jsxs("div", { className: "liquid-form__actions", children: [primaryActionLabel ? (_jsx(Button, { ...primaryActionButtonProps, className: [
+                                        'liquid-form__action-button',
+                                        primaryActionButtonProps?.className,
+                                    ]
+                                        .filter(Boolean)
+                                        .join(' '), size: primaryActionButtonProps?.size ?? 'sm', variant: primaryActionButtonProps?.variant ?? 'primary', onClick: onPrimaryAction, type: primaryActionButtonProps?.type ?? 'submit', children: primaryActionLabel })) : null, secondaryActionLabel ? (_jsx(Button, { ...secondaryActionButtonProps, className: [
+                                        'liquid-form__action-button',
+                                        secondaryActionButtonProps?.className,
+                                    ]
+                                        .filter(Boolean)
+                                        .join(' '), size: secondaryActionButtonProps?.size ?? 'sm', variant: secondaryActionButtonProps?.variant ?? 'secondary', onClick: onSecondaryAction, type: secondaryActionButtonProps?.type ?? 'button', children: secondaryActionLabel })) : null] })) })) : null] })] }));
+}
+export function FormRow({ children, className, ...props }) {
+    return (_jsx("div", { ...props, className: getRowClassName(className), children: children }));
+}
+export function FormItem({ children, className, grow = false, ...props }) {
+    return (_jsx("div", { ...props, className: getItemClassName(className), "data-grow": grow ? 'true' : undefined, children: children }));
+}

package/dist/components/GridLayout/GridLayout.d.ts

@@ -0,0 +1,4 @@
+import type { GridColumnProps, GridLayoutProps } from '../../types';
+export declare function GridLayout({ align, as: Element, children, className, condensed, fullWidth, narrow, style, subgrid, withRowGap, ...props }: GridLayoutProps): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export declare function GridColumn({ as: Element, children, className, lg, max, md, sm, style, xlg, ...props }: GridColumnProps): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+//# sourceMappingURL=GridLayout.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GridLayout.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridLayout.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAEV,eAAe,EAEf,eAAe,EAChB,MAAM,aAAa,CAAC;AAyIrB,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,EAAE,EAAE,OAAe,EACnB,QAAQ,EACR,SAAS,EACT,SAAS,EACT,SAAS,EACT,MAAM,EACN,KAAK,EACL,OAAO,EACP,UAAU,EACV,GAAG,KAAK,EACT,EAAE,eAAe,0FAoBjB;AAED,wBAAgB,UAAU,CAAC,EACzB,EAAE,EAAE,OAAe,EACnB,QAAQ,EACR,SAAS,EACT,EAAE,EACF,GAAG,EACH,EAAE,EACF,EAAE,EACF,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,eAAe,0FAkBjB"}

package/dist/components/GridLayout/GridLayout.js

@@ -0,0 +1,138 @@
+import { createElement } from 'react';
+import { BREAKPOINT_KEYS, getGridBreakpointSpec } from './gridTokens';
+function getClassName(className) {
+    return ['liquid-grid', className].filter(Boolean).join(' ');
+}
+function getColumnClassName(className) {
+    return ['liquid-grid__column', className].filter(Boolean).join(' ');
+}
+function getAlignment(align) {
+    if (align === 'start') {
+        return 'start';
+    }
+    if (align === 'end') {
+        return 'end';
+    }
+    if (align === 'center') {
+        return 'center';
+    }
+    return 'stretch';
+}
+function getResponsiveGridStyle(props) {
+    const { align, condensed, fullWidth, narrow, style, subgrid, withRowGap } = props;
+    const maxSpec = getGridBreakpointSpec('max');
+    const variables = {
+        '--liquid-grid-align': getAlignment(align),
+        '--liquid-grid-margin-inline': fullWidth || subgrid ? '0px' : 'auto',
+        '--liquid-grid-max-width': fullWidth || subgrid ? 'none' : `${maxSpec.width + maxSpec.margin * 2}px`,
+    };
+    for (const breakpoint of BREAKPOINT_KEYS) {
+        const spec = getGridBreakpointSpec(breakpoint);
+        const gutter = condensed ? 1 : narrow ? spec.narrowGutter : spec.wideGutter;
+        const hang = narrow ? spec.containerHang : 0;
+        const margin = Math.max(0, spec.margin - hang);
+        if (subgrid) {
+            variables[`--liquid-grid-margin-${breakpoint}`] = '0px';
+            variables[`--liquid-grid-row-gap-${breakpoint}`] = withRowGap
+                ? `var(--liquid-grid-gutter-${breakpoint})`
+                : '0px';
+            continue;
+        }
+        variables[`--liquid-grid-columns-${breakpoint}`] = `${spec.columns}`;
+        variables[`--liquid-grid-margin-${breakpoint}`] = `${margin}px`;
+        variables[`--liquid-grid-gutter-${breakpoint}`] = `${gutter}px`;
+        variables[`--liquid-grid-row-gap-${breakpoint}`] = withRowGap
+            ? `var(--liquid-grid-gutter-${breakpoint})`
+            : '0px';
+    }
+    return {
+        ...variables,
+        ...style,
+    };
+}
+function normalizeColumnValue(value) {
+    if (typeof value === 'number') {
+        return { span: value };
+    }
+    return value;
+}
+function getGridColumnValue(value) {
+    const normalizedValue = normalizeColumnValue(value);
+    if (!normalizedValue) {
+        return undefined;
+    }
+    const span = normalizedValue.span ?? 1;
+    const offset = normalizedValue.offset ?? 0;
+    if (span <= 0) {
+        return {
+            display: 'none',
+            placement: 'auto',
+        };
+    }
+    if (offset > 0) {
+        return {
+            display: 'block',
+            placement: `${offset + 1} / span ${span}`,
+        };
+    }
+    return {
+        display: 'block',
+        placement: `span ${span}`,
+    };
+}
+function getResponsiveColumnStyle(props) {
+    const { lg, max, md, sm, style, xlg } = props;
+    const values = {
+        sm,
+        md,
+        lg,
+        xlg,
+        max,
+    };
+    const variables = {};
+    for (const breakpoint of BREAKPOINT_KEYS) {
+        const columnValue = getGridColumnValue(values[breakpoint]);
+        if (!columnValue) {
+            continue;
+        }
+        variables[`--liquid-grid-column-${breakpoint}`] = columnValue.placement;
+        variables[`--liquid-grid-column-display-${breakpoint}`] =
+            columnValue.display;
+    }
+    return {
+        ...variables,
+        ...style,
+    };
+}
+export function GridLayout({ align, as: Element = 'div', children, className, condensed, fullWidth, narrow, style, subgrid, withRowGap, ...props }) {
+    return createElement(Element, {
+        ...props,
+        className: getClassName(className),
+        style: getResponsiveGridStyle({
+            align,
+            children,
+            className,
+            condensed,
+            fullWidth,
+            narrow,
+            style,
+            subgrid,
+            withRowGap,
+        }),
+    }, children);
+}
+export function GridColumn({ as: Element = 'div', children, className, lg, max, md, sm, style, xlg, ...props }) {
+    return createElement(Element, {
+        ...props,
+        className: getColumnClassName(className),
+        style: getResponsiveColumnStyle({
+            className,
+            lg,
+            max,
+            md,
+            sm,
+            style,
+            xlg,
+        }),
+    }, children);
+}

package/dist/components/GridLayout/gridTokens.d.ts

@@ -0,0 +1,18 @@
+export type BreakpointKey = 'sm' | 'md' | 'lg' | 'xlg' | 'max';
+export interface GridBreakpointSpec {
+    columns: number;
+    containerHang: number;
+    key: BreakpointKey;
+    margin: number;
+    narrowGutter: number;
+    wideGutter: number;
+    width: number;
+}
+export interface RowRhythmSpec {
+    caption: string;
+    value: number;
+}
+export declare const BREAKPOINT_KEYS: BreakpointKey[];
+export declare function getGridBreakpointSpec(breakpoint: BreakpointKey): GridBreakpointSpec;
+export declare function getRowRhythms(): RowRhythmSpec[];
+//# sourceMappingURL=gridTokens.d.ts.map

package/dist/components/GridLayout/gridTokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"gridTokens.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/gridTokens.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,KAAK,CAAC;AAE/D,MAAM,WAAW,kBAAkB;IACjC,OAAO,EAAE,MAAM,CAAC;IAChB,aAAa,EAAE,MAAM,CAAC;IACtB,GAAG,EAAE,aAAa,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,eAAe,EAAE,aAAa,EAM1C,CAAC;AAsEF,wBAAgB,qBAAqB,CACnC,UAAU,EAAE,aAAa,GACxB,kBAAkB,CAqDpB;AAED,wBAAgB,aAAa,IAAI,aAAa,EAAE,CAQ/C"}