@kcascend/liquid-ui 0.0.1

package/dist/components/SelectInput/SelectInput.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { Icon } from '../Icon/Icon';
+function getClassName(className) {
+    return ['liquid-select-input', className].filter(Boolean).join(' ');
+}
+export function SelectInput({ children, className, helperText, hideLabel = false, id, label, options, placeholder, size = 'sm', tone = 'default', style, disabled, 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, ...props }) {
+    const reactId = useId();
+    const selectId = id ?? reactId;
+    const helperId = helperText ? `${selectId}-helper` : undefined;
+    const describedBy = [ariaDescribedBy, helperId].filter(Boolean).join(' ') || undefined;
+    const resolvedTone = disabled ? 'disabled' : tone;
+    return (_jsxs("div", { className: getClassName(className), "data-size": size, "data-tone": resolvedTone, style: style, children: [label ? (_jsx("label", { className: hideLabel ? 'liquid-sr-only' : 'liquid-select-input__label', htmlFor: selectId, children: label })) : null, _jsxs("div", { className: "liquid-select-input__field", children: [_jsxs("select", { ...props, "aria-describedby": describedBy, "aria-invalid": ariaInvalid ?? (tone === 'error' ? true : undefined), className: "liquid-select-input__select", disabled: disabled, id: selectId, children: [placeholder ? (_jsx("option", { value: "", disabled: true, hidden: true, children: placeholder })) : null, options?.map((option) => (_jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value))), children] }), (resolvedTone === 'error' || resolvedTone === 'warning') && (_jsx("span", { "aria-hidden": "true", className: "liquid-select-input__status-icon", "data-tone": resolvedTone, children: resolvedTone === 'error' ? (_jsx(Icon, { name: "error", size: 16 })) : (_jsx(Icon, { name: "warning", size: 16 })) })), _jsx("span", { "aria-hidden": "true", className: "liquid-select-input__chevron", children: _jsx(Icon, { name: "chevron_down", size: 20 }) })] }), helperText ? (_jsx("p", { className: "liquid-select-input__helper", "data-tone": resolvedTone, id: helperId, children: helperText })) : null] }));
+}

package/dist/components/StructuredList/StructuredList.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"StructuredList.d.ts","sourceRoot":"","sources":["../../../src/components/StructuredList/StructuredList.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAEV,mBAAmB,EAEpB,MAAM,aAAa,CAAC;AAiBrB,wBAAgB,cAAc,CAAC,EAC7B,SAA6B,EAC7B,SAAS,EACT,OAAO,EACP,IAAI,EACJ,KAAK,EACL,GAAG,KAAK,EACT,EAAE,mBAAmB,2CAuDrB"}

package/dist/components/StructuredList/StructuredList.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function getClassName(className) {
+    return ['liquid-structured-list', className].filter(Boolean).join(' ');
+}
+function getVisibleCells(cells, columnCount) {
+    return cells.slice(0, columnCount);
+}
+function getColumnAlignment(column) {
+    return column?.align ?? 'left';
+}
+export function StructuredList({ ariaLabel = 'Structured list', className, columns, rows, style, ...props }) {
+    return (_jsx("section", { ...props, className: getClassName(className), style: style, children: _jsxs("div", { className: "liquid-structured-list__table", role: "table", "aria-label": ariaLabel, children: [_jsx("div", { className: "liquid-structured-list__header", role: "rowgroup", children: _jsx("div", { className: "liquid-structured-list__row", role: "row", children: columns.map((column) => (_jsx("div", { className: "liquid-structured-list__header-cell", "data-align": getColumnAlignment(column), role: "columnheader", children: column.header }, column.id))) }) }), _jsx("div", { className: "liquid-structured-list__body", role: "rowgroup", children: rows.map((row, rowIndex) => {
+                        const resolvedId = row.id ?? rowIndex;
+                        const visibleCells = getVisibleCells(row.cells, columns.length);
+                        return (_jsx("div", { className: "liquid-structured-list__row", role: "row", children: visibleCells.map((cell, columnIndex) => (_jsx("div", { className: "liquid-structured-list__cell", "data-align": getColumnAlignment(columns[columnIndex]), role: "cell", children: cell }, `${String(resolvedId)}:${columns[columnIndex]?.id ?? columnIndex}`))) }, String(resolvedId)));
+                    }) })] }) }));
+}

package/dist/components/Tabs/Tabs.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAY,SAAS,EAAE,MAAM,aAAa,CAAC;AAUvD,wBAAgB,IAAI,CAAC,EACnB,WAAW,EACX,SAAS,EACT,KAAK,EACL,WAAW,EACX,WAA0B,EAC1B,KAAK,EACL,GAAG,KAAK,EACT,EAAE,SAAS,2CAyDX"}

package/dist/components/Tabs/Tabs.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+function getClassName(className) {
+    return ['liquid-tabs', className].filter(Boolean).join(' ');
+}
+function getFirstEnabledTab(items) {
+    return items.find((item) => !item.disabled)?.id;
+}
+export function Tabs({ activeTabId, className, items, onTabChange, orientation = 'horizontal', style, ...props }) {
+    const fallbackActiveId = useMemo(() => getFirstEnabledTab(items), [items]);
+    const [internalActiveId, setInternalActiveId] = useState(fallbackActiveId);
+    const resolvedActiveId = activeTabId ?? internalActiveId ?? fallbackActiveId;
+    const activateTab = (tabId) => {
+        if (activeTabId === undefined) {
+            setInternalActiveId(tabId);
+        }
+        onTabChange?.(tabId);
+    };
+    return (_jsx("div", { ...props, className: getClassName(className), "data-orientation": orientation, style: style, children: _jsx("div", { className: "liquid-tabs__tablist", role: "tablist", "aria-orientation": orientation === 'vertical' ? 'vertical' : 'horizontal', children: items.map((item) => {
+                const isSelected = item.id === resolvedActiveId;
+                return (_jsxs("button", { "aria-selected": isSelected, className: "liquid-tabs__tab", "data-selected": isSelected || undefined, disabled: item.disabled, onClick: () => {
+                        if (!item.disabled) {
+                            activateTab(item.id);
+                        }
+                    }, role: "tab", tabIndex: isSelected ? 0 : -1, type: "button", children: [_jsx("span", { className: "liquid-tabs__label", children: item.label }), isSelected ? _jsx("span", { className: "liquid-tabs__indicator" }) : null] }, item.id));
+            }) }) }));
+}

package/dist/components/Tag/Tag.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/Tag.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAM5C,wBAAgB,GAAG,CAAC,EAClB,QAAQ,EACR,SAAS,EACT,KAAiB,EACjB,KAAmB,EACnB,IAAW,EACX,KAAK,EACL,GAAG,KAAK,EACT,EAAE,QAAQ,2CAcV"}

package/dist/components/Tag/Tag.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+function getClassName(className) {
+    return ['liquid-tag', className].filter(Boolean).join(' ');
+}
+export function Tag({ children, className, color = 'neutral', label = 'Tag label', size = 'md', style, ...props }) {
+    const content = children ?? label;
+    return (_jsx("span", { ...props, className: getClassName(className), "data-color": color, "data-size": size, style: style, children: _jsx("span", { className: "liquid-tag__label", children: content }) }));
+}

package/dist/components/TextArea/TextArea.d.ts

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

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

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

package/dist/components/TextArea/TextArea.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { Icon } from '../Icon/Icon';
+function getClassName(className) {
+    return ['liquid-text-area', className].filter(Boolean).join(' ');
+}
+export function TextArea({ className, helperText, hideLabel = false, id, label, size = 'md', tone = 'default', rows = 4, style, disabled, 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, ...props }) {
+    const reactId = useId();
+    const textAreaId = id ?? reactId;
+    const helperId = helperText ? `${textAreaId}-helper` : undefined;
+    const describedBy = [ariaDescribedBy, helperId].filter(Boolean).join(' ') || undefined;
+    const resolvedTone = disabled ? 'disabled' : tone;
+    const isInvalid = ariaInvalid ?? (resolvedTone === 'error' ? true : undefined);
+    return (_jsxs("div", { className: getClassName(className), "data-size": size, "data-tone": resolvedTone, style: style, children: [label && !hideLabel ? (_jsx("label", { className: "liquid-text-area__label", htmlFor: textAreaId, children: label })) : null, _jsxs("div", { className: "liquid-text-area__field", children: [_jsx("textarea", { ...props, "aria-describedby": describedBy, "aria-invalid": isInvalid, className: "liquid-text-area__textarea", disabled: disabled, id: textAreaId, rows: rows }), resolvedTone === 'error' ? (_jsx("span", { "aria-hidden": "true", className: "liquid-text-area__status-icon", "data-tone": "error", children: _jsx(Icon, { name: "error", size: 16 }) })) : resolvedTone === 'warning' ? (_jsx("span", { "aria-hidden": "true", className: "liquid-text-area__status-icon", "data-tone": "warning", children: _jsx(Icon, { name: "warning", size: 16 }) })) : null] }), helperText ? (_jsx("p", { className: "liquid-text-area__helper", "data-tone": resolvedTone, id: helperId, children: helperText })) : null] }));
+}

package/dist/components/TextInput/TextInput.d.ts

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

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

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

package/dist/components/TextInput/TextInput.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { Icon } from '../Icon/Icon';
+function getClassName(className) {
+    return ['liquid-text-input', className].filter(Boolean).join(' ');
+}
+export function TextInput({ className, errorText, helperText, hideLabel = false, id, label, leadingIcon, size = 'md', tone = 'default', warningText, style, disabled, 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, ...props }) {
+    const reactId = useId();
+    const inputId = id ?? reactId;
+    const resolvedTone = disabled ? 'disabled' : tone;
+    const helperMessage = resolvedTone === 'error'
+        ? (errorText ?? helperText)
+        : resolvedTone === 'warning'
+            ? (warningText ?? helperText)
+            : helperText;
+    const helperId = helperMessage ? `${inputId}-helper` : undefined;
+    const describedBy = [ariaDescribedBy, helperId].filter(Boolean).join(' ') || undefined;
+    const isInvalid = ariaInvalid ?? (resolvedTone === 'error' ? true : undefined);
+    return (_jsxs("div", { className: getClassName(className), "data-size": size, "data-tone": resolvedTone, style: style, children: [label && !hideLabel ? (_jsx("label", { className: "liquid-text-input__label", htmlFor: inputId, children: label })) : null, _jsxs("div", { className: "liquid-text-input__field", children: [leadingIcon ? (_jsx("span", { "aria-hidden": "true", className: "liquid-text-input__leading-icon", children: leadingIcon })) : null, _jsx("input", { ...props, "aria-describedby": describedBy, "aria-invalid": isInvalid, className: "liquid-text-input__input", disabled: disabled, id: inputId }), resolvedTone === 'error' ? (_jsx("span", { "aria-hidden": "true", className: "liquid-text-input__status-icon", "data-tone": "error", children: _jsx(Icon, { name: "error", size: 16 }) })) : resolvedTone === 'warning' ? (_jsx("span", { "aria-hidden": "true", className: "liquid-text-input__status-icon", "data-tone": "warning", children: _jsx(Icon, { name: "warning", size: 16 }) })) : null] }), helperMessage ? (_jsx("p", { className: "liquid-text-input__helper", "data-tone": resolvedTone, id: helperId, children: helperMessage })) : null] }));
+}

package/dist/components/ToggleInput/ToggleInput.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleInput.d.ts","sourceRoot":"","sources":["../../../src/components/ToggleInput/ToggleInput.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAMpD,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,EAAE,EACF,KAAK,EACL,SAAiB,EACjB,IAAW,EACX,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,gBAAgB,2CAkClB"}

package/dist/components/ToggleInput/ToggleInput.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+function getClassName(className) {
+    return ['liquid-toggle-input', className].filter(Boolean).join(' ');
+}
+export function ToggleInput({ className, id, label, hideLabel = false, size = 'md', style, disabled, ...props }) {
+    const reactId = useId();
+    const inputId = id ?? reactId;
+    return (_jsxs("label", { className: getClassName(className), "data-size": size, style: style, "data-disabled": disabled || undefined, children: [_jsx("input", { ...props, className: "liquid-toggle-input__input", disabled: disabled, id: inputId, type: "checkbox" }), _jsx("span", { className: "liquid-toggle-input__track", "aria-hidden": "true", children: _jsx("span", { className: "liquid-toggle-input__thumb" }) }), label ? (_jsx("span", { className: hideLabel ? 'liquid-sr-only' : 'liquid-toggle-input__label-text', children: label })) : null] }));
+}

package/dist/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,3 @@
+import type { TooltipProps } from '../../types';
+export declare function Tooltip({ alignment, children, className, content, id, position, style, ...props }: TooltipProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Tooltip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAqBhD,wBAAgB,OAAO,CAAC,EACtB,SAAoB,EACpB,QAAQ,EACR,SAAS,EACT,OAAwB,EACxB,EAAE,EACF,QAAgB,EAChB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,YAAY,2CA0Bd"}

package/dist/components/Tooltip/Tooltip.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-tooltip', className].filter(Boolean).join(' ');
+}
+function TooltipCaretSvg() {
+    return (_jsx("svg", { "aria-hidden": "true", className: "liquid-tooltip__caret-svg", viewBox: "0 0 12 6", width: "12", height: "6", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M0 0H12L6 6L0 0Z", fill: "currentColor" }) }));
+}
+export function Tooltip({ alignment = 'center', children, className, content = 'Tooltip text', id, position = 'top', style, ...props }) {
+    const generatedId = useId();
+    const tooltipId = id ?? generatedId;
+    return (_jsxs("span", { ...props, className: getClassName(className), "data-alignment": alignment, "data-position": position, style: style, children: [_jsx("span", { className: "liquid-tooltip__trigger", "aria-describedby": tooltipId, children: children }), _jsxs("span", { className: "liquid-tooltip__popover", id: tooltipId, role: "tooltip", children: [_jsx("span", { className: "liquid-tooltip__body", children: _jsx("span", { className: "liquid-tooltip__text", children: content }) }), _jsx("span", { className: "liquid-tooltip__caret", "aria-hidden": "true", children: _jsx(TooltipCaretSvg, {}) })] })] }));
+}