@techsio/ui-kit 0.48.0 → 0.50.0

package/dist/templates/facet-filter-panel.js

@@ -0,0 +1,310 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+import { Button } from "../atoms/button.js";
+import { Accordion } from "../molecules/accordion.js";
+import { Dialog } from "../molecules/dialog.js";
+import { FormCheckbox } from "../molecules/form-checkbox.js";
+import { Slider } from "../molecules/slider.js";
+import { tv } from "../utils.js";
+const facetFilterPanelStyles = tv({
+    slots: {
+        root: [
+            "flex w-full min-w-0 flex-col overflow-y-auto",
+            "max-h-(--container-facet-filter-panel-max-h) rounded-facet-filter-panel",
+            "border-(length:--border-width-facet-filter-panel) border-facet-filter-panel-border",
+            "bg-facet-filter-panel-bg text-facet-filter-panel-fg",
+            "p-facet-filter-panel"
+        ],
+        content: "flex min-h-0 flex-col gap-facet-filter-panel",
+        title: "font-facet-filter-panel-title text-facet-filter-panel-title text-facet-filter-panel-title-fg",
+        pending: "text-(length:--text-facet-filter-panel-status) text-facet-filter-panel-muted-fg",
+        groups: "min-h-0 gap-facet-filter-panel-group bg-facet-filter-panel-bg",
+        rangeGroup: "border-b-(length:--border-width-facet-filter-panel) border-facet-filter-panel-border p-facet-filter-panel-group",
+        optionList: "flex flex-col gap-facet-filter-panel-item",
+        optionLabel: "flex min-w-0 flex-1 items-center justify-between gap-facet-filter-panel-item",
+        optionText: "min-w-0 break-words",
+        optionCount: "shrink-0 text-facet-filter-panel-count text-facet-filter-panel-muted-fg",
+        empty: "text-(length:--text-facet-filter-panel-status) text-facet-filter-panel-muted-fg",
+        overflowAction: "mt-facet-filter-panel-overflow self-start",
+        drawerTrigger: "self-start",
+        drawerContent: "min-w-0",
+        triggerCount: "inline-flex min-w-facet-filter-panel-count items-center justify-center rounded-facet-filter-panel-count bg-facet-filter-panel-count-bg px-facet-filter-panel-count text-facet-filter-panel-count text-facet-filter-panel-count-fg",
+        activeRoot: "border-b-(length:--border-width-facet-filter-panel) flex flex-col gap-facet-filter-panel-active border-facet-filter-panel-border pb-facet-filter-panel-active",
+        activeHeader: "flex flex-wrap items-center justify-between gap-facet-filter-panel-active",
+        activeTitle: "font-facet-filter-panel-active-title text-facet-filter-panel-active-title",
+        activeList: "flex flex-wrap gap-facet-filter-panel-active"
+    }
+});
+const toRangeTuple = (values, group)=>[
+        values[0] ?? group.min,
+        values[1] ?? group.max
+    ];
+function FacetFilterOptions({ group, selectedValues, disabled, showMoreLabel, showLessLabel, onOptionChange }) {
+    const [expanded, setExpanded] = useState(false);
+    const styles = facetFilterPanelStyles();
+    const collapseAfter = Math.max(0, group.collapseAfter ?? group.options.length);
+    const hasOverflow = group.options.length > collapseAfter;
+    const visibleOptions = expanded || !hasOverflow ? group.options : group.options.slice(0, collapseAfter);
+    if (0 === group.options.length) return group.emptyLabel ? /*#__PURE__*/ jsx("div", {
+        className: styles.empty(),
+        children: group.emptyLabel
+    }) : null;
+    return /*#__PURE__*/ jsxs("div", {
+        className: "flex flex-col",
+        children: [
+            /*#__PURE__*/ jsx("ul", {
+                className: styles.optionList(),
+                children: visibleOptions.map((option)=>/*#__PURE__*/ jsx("li", {
+                        children: /*#__PURE__*/ jsx(FormCheckbox, {
+                            checked: selectedValues.includes(option.value),
+                            disabled: disabled || option.disabled,
+                            label: /*#__PURE__*/ jsxs("span", {
+                                className: styles.optionLabel(),
+                                children: [
+                                    /*#__PURE__*/ jsx("span", {
+                                        className: styles.optionText(),
+                                        children: option.label
+                                    }),
+                                    void 0 !== option.count ? /*#__PURE__*/ jsx("span", {
+                                        className: styles.optionCount(),
+                                        children: option.count
+                                    }) : null
+                                ]
+                            }),
+                            name: group.id,
+                            onCheckedChange: (checked)=>onOptionChange?.({
+                                    groupId: group.id,
+                                    value: option.value,
+                                    checked
+                                }),
+                            value: option.value
+                        })
+                    }, option.value))
+            }),
+            hasOverflow ? /*#__PURE__*/ jsx(Button, {
+                "aria-expanded": expanded,
+                className: styles.overflowAction(),
+                disabled: disabled,
+                onClick: ()=>setExpanded((current)=>!current),
+                size: "sm",
+                theme: "borderless",
+                type: "button",
+                variant: "primary",
+                children: expanded ? showLessLabel : showMoreLabel(group.options.length - collapseAfter)
+            }) : null
+        ]
+    });
+}
+function FacetFilterPanelContent({ title, groups, selectedValues = {}, activeFilters = [], disabled = false, pending = false, pendingLabel, activeFiltersLabel = "Active filters", resetLabel = "Clear filters", showMoreLabel = (hiddenCount)=>`Show ${hiddenCount} more`, showLessLabel = "Show less", expandedGroups, defaultExpandedGroups, onExpandedGroupsChange, onOptionChange, onRangeChange, onRangeChangeEnd, onRemoveFilter, onReset, showTitle, titleId }) {
+    const styles = facetFilterPanelStyles();
+    const interactionDisabled = disabled || pending;
+    const optionGroupIds = groups.filter((group)=>"options" === group.type).map((group)=>group.id);
+    const [localExpandedGroups, setLocalExpandedGroups] = useState(()=>defaultExpandedGroups ?? optionGroupIds);
+    const previousGroupIds = useRef(new Set(optionGroupIds));
+    useEffect(()=>{
+        const addedGroupIds = optionGroupIds.filter((id)=>!previousGroupIds.current.has(id));
+        previousGroupIds.current = new Set(optionGroupIds);
+        if (void 0 === expandedGroups && void 0 === defaultExpandedGroups && addedGroupIds.length > 0) setLocalExpandedGroups((current)=>[
+                ...new Set([
+                    ...current,
+                    ...addedGroupIds
+                ])
+            ]);
+    }, [
+        optionGroupIds,
+        expandedGroups,
+        defaultExpandedGroups
+    ]);
+    return /*#__PURE__*/ jsxs("div", {
+        "aria-busy": pending || void 0,
+        className: styles.content(),
+        children: [
+            showTitle ? /*#__PURE__*/ jsx("h2", {
+                className: styles.title(),
+                id: titleId,
+                children: title
+            }) : null,
+            pending && pendingLabel ? /*#__PURE__*/ jsx("output", {
+                "aria-live": "polite",
+                className: styles.pending(),
+                children: pendingLabel
+            }) : null,
+            /*#__PURE__*/ jsx(FacetFilterPanel.ActiveFilters, {
+                disabled: interactionDisabled,
+                items: activeFilters,
+                label: activeFiltersLabel,
+                onRemove: onRemoveFilter,
+                onReset: onReset,
+                resetLabel: resetLabel
+            }),
+            /*#__PURE__*/ jsx(Accordion, {
+                className: styles.groups(),
+                disabled: disabled,
+                multiple: true,
+                onChange: (groupIds)=>{
+                    if (void 0 === expandedGroups) setLocalExpandedGroups(groupIds);
+                    onExpandedGroupsChange?.(groupIds);
+                },
+                value: expandedGroups ?? localExpandedGroups,
+                variant: "child",
+                children: groups.map((group)=>{
+                    if ("range" === group.type) return /*#__PURE__*/ jsx("section", {
+                        className: styles.rangeGroup(),
+                        children: /*#__PURE__*/ jsx(Slider, {
+                            disabled: interactionDisabled || group.disabled,
+                            formatRangeText: group.formatRangeText,
+                            formatValue: group.formatValue,
+                            label: group.label,
+                            max: group.max,
+                            min: group.min,
+                            minStepsBetweenThumbs: group.minStepsBetweenThumbs,
+                            onChange: (value)=>onRangeChange?.({
+                                    groupId: group.id,
+                                    value: toRangeTuple(value, group)
+                                }),
+                            onChangeEnd: (value)=>onRangeChangeEnd?.({
+                                    groupId: group.id,
+                                    value: toRangeTuple(value, group)
+                                }),
+                            showValueText: true,
+                            step: group.step,
+                            value: [
+                                ...group.value
+                            ]
+                        })
+                    }, group.id);
+                    return /*#__PURE__*/ jsxs(Accordion.Item, {
+                        disabled: group.disabled,
+                        value: group.id,
+                        children: [
+                            /*#__PURE__*/ jsxs(Accordion.Header, {
+                                children: [
+                                    /*#__PURE__*/ jsx(Accordion.Title, {
+                                        children: group.label
+                                    }),
+                                    /*#__PURE__*/ jsx(Accordion.Indicator, {})
+                                ]
+                            }),
+                            /*#__PURE__*/ jsx(Accordion.Content, {
+                                children: /*#__PURE__*/ jsx(FacetFilterOptions, {
+                                    disabled: interactionDisabled || Boolean(group.disabled),
+                                    group: group,
+                                    onOptionChange: onOptionChange,
+                                    selectedValues: selectedValues[group.id] ?? [],
+                                    showLessLabel: showLessLabel,
+                                    showMoreLabel: showMoreLabel
+                                })
+                            })
+                        ]
+                    }, group.id);
+                })
+            })
+        ]
+    });
+}
+function FacetFilterPanel({ presentation = "inline", drawerTriggerLabel, drawerPlacement = "right", drawerSize = "sm", drawerOpen, defaultDrawerOpen = false, onDrawerOpenChange, className, ...props }) {
+    const styles = facetFilterPanelStyles();
+    const inlineTitleId = useId();
+    const drawerTriggerRef = useRef(null);
+    const [uncontrolledDrawerOpen, setUncontrolledDrawerOpen] = useState(defaultDrawerOpen);
+    const resolvedDrawerOpen = drawerOpen ?? uncontrolledDrawerOpen;
+    const activeCount = props.activeFilters?.length ?? 0;
+    const setDrawerOpen = (open)=>{
+        if (void 0 === drawerOpen) setUncontrolledDrawerOpen(open);
+        onDrawerOpenChange?.(open);
+    };
+    if ("drawer" === presentation) return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsxs(Button, {
+                "aria-expanded": resolvedDrawerOpen,
+                "aria-haspopup": "dialog",
+                className: styles.drawerTrigger(),
+                icon: "token-icon-facet-filter-panel-filter",
+                onClick: ()=>setDrawerOpen(true),
+                ref: drawerTriggerRef,
+                type: "button",
+                variant: "primary",
+                children: [
+                    drawerTriggerLabel ?? props.title,
+                    activeCount > 0 ? /*#__PURE__*/ jsx("span", {
+                        "aria-hidden": "true",
+                        className: styles.triggerCount(),
+                        children: activeCount
+                    }) : null
+                ]
+            }),
+            /*#__PURE__*/ jsx(Dialog, {
+                className: styles.drawerContent({
+                    className
+                }),
+                customTrigger: true,
+                finalFocusEl: ()=>drawerTriggerRef.current,
+                onOpenChange: ({ open })=>setDrawerOpen(open),
+                open: resolvedDrawerOpen,
+                placement: drawerPlacement,
+                size: drawerSize,
+                title: props.title,
+                children: /*#__PURE__*/ jsx(FacetFilterPanelContent, {
+                    ...props,
+                    showTitle: false
+                })
+            })
+        ]
+    });
+    return /*#__PURE__*/ jsx("aside", {
+        "aria-labelledby": inlineTitleId,
+        className: styles.root({
+            className
+        }),
+        children: /*#__PURE__*/ jsx(FacetFilterPanelContent, {
+            ...props,
+            showTitle: true,
+            titleId: inlineTitleId
+        })
+    });
+}
+FacetFilterPanel.ActiveFilters = function({ items, label = "Active filters", resetLabel = "Clear filters", disabled = false, className, onRemove, onReset }) {
+    const styles = facetFilterPanelStyles();
+    if (0 === items.length) return null;
+    return /*#__PURE__*/ jsxs("section", {
+        className: styles.activeRoot({
+            className
+        }),
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: styles.activeHeader(),
+                children: [
+                    /*#__PURE__*/ jsx("h3", {
+                        className: styles.activeTitle(),
+                        children: label
+                    }),
+                    /*#__PURE__*/ jsx(Button, {
+                        disabled: disabled,
+                        onClick: onReset,
+                        size: "sm",
+                        theme: "borderless",
+                        type: "button",
+                        variant: "primary",
+                        children: resetLabel
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: styles.activeList(),
+                children: items.map((item)=>/*#__PURE__*/ jsx(Button, {
+                        "aria-label": item.removeLabel,
+                        disabled: disabled,
+                        icon: "token-icon-close",
+                        iconPosition: "right",
+                        onClick: ()=>onRemove?.(item.id),
+                        size: "sm",
+                        theme: "outlined",
+                        type: "button",
+                        variant: "primary",
+                        children: item.label
+                    }, item.id))
+            })
+        ]
+    });
+};
+export { FacetFilterPanel };

package/dist/templates/search-suggestions.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import { Combobox } from "../molecules/combobox.js";
+function SearchSuggestions({ resultSlot, allResultsLink, filterBehavior = "external", inputBehavior = "none", portalled = false, ...props }) {
+    return /*#__PURE__*/ jsx(Combobox, {
+        ...props,
+        filterBehavior: filterBehavior,
+        footer: allResultsLink,
+        inputBehavior: inputBehavior,
+        mode: "navigation",
+        portalled: portalled,
+        renderItem: resultSlot
+    });
+}
+export { SearchSuggestions };

package/dist/test/combobox.behavior.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=combobox.behavior.spec.d.ts.map

package/dist/test/combobox.behavior.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.behavior.spec.d.ts","sourceRoot":"","sources":["../../test/combobox.behavior.spec.ts"],"names":[],"mappings":""}

package/dist/test/facet-filter-panel.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=facet-filter-panel.spec.d.ts.map

package/dist/test/facet-filter-panel.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"facet-filter-panel.spec.d.ts","sourceRoot":"","sources":["../../test/facet-filter-panel.spec.ts"],"names":[],"mappings":""}

package/dist/test/form-error-summary.ids.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=form-error-summary.ids.test.d.ts.map

package/dist/test/form-error-summary.ids.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-error-summary.ids.test.d.ts","sourceRoot":"","sources":["../../test/form-error-summary.ids.test.tsx"],"names":[],"mappings":""}

package/dist/test/search-suggestions.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=search-suggestions.spec.d.ts.map

package/dist/test/search-suggestions.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-suggestions.spec.d.ts","sourceRoot":"","sources":["../../test/search-suggestions.spec.ts"],"names":[],"mappings":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@techsio/ui-kit",
-  "version": "0.48.0",
+  "version": "0.50.0",
   "license": "MIT",
   "type": "module",
   "repository": {

package/src/tokens/components/components.css

@@ -29,6 +29,7 @@
 @import "./molecules/_dialog.css";
 @import "./molecules/_drawer.css";
 @import "./molecules/_file-upload.css";
+@import "./molecules/_form-error-summary.css";
 @import "./molecules/_pagination.css";
 @import "./molecules/_popover.css";
 @import "./molecules/_radio-card.css";
@@ -52,3 +53,5 @@
 @import "./organisms/_header.css";
 @import "./organisms/_gallery.css";
 @import "./organisms/_sidebar.css";
+
+@import "./templates/_facet-filter-panel.css";

package/src/tokens/components/molecules/_combobox.css

@@ -5,14 +5,36 @@
  *   - `--padding-combobox-input-{size}` semantic aliases (Figma exports
  *     the shared per-size spacing axis).
  *   - `--padding-combobox-trigger` composite.
+ *   - Group, footer, and async status aliases over shared popup tokens.
  */
 
 @theme static {
+  --color-combobox-status: var(--color-popup-item-fg);
+  --color-combobox-group: var(--color-popup-item-fg);
+  --color-combobox-divider: var(--color-popup-border);
+
+  --color-combobox-status-fg: var(--color-combobox-status);
+  --color-combobox-group-fg: var(--color-combobox-group);
+  --color-combobox-footer-border: var(--color-combobox-divider);
+
   --padding-combobox-input-sm: var(--spacing-combobox-sm);
   --padding-combobox-input-md: var(--spacing-combobox-md);
   --padding-combobox-input-lg: var(--spacing-combobox-lg);
 
   --padding-combobox-trigger: 0 var(--spacing-100);
+
+  --text-combobox-group-label-size: var(--text-sm);
+  --font-weight-combobox-group-label: var(--font-weight-semibold);
+}
+
+/* Resolve the popup's size scale on each group label, footer, or status. */
+@utility combobox-popup-padding {
+  padding: var(--popup-item-y, var(--padding-popup-item-y-md))
+    var(--popup-item-x, var(--padding-popup-item-x-md));
+}
+
+@utility combobox-status-gap {
+  gap: var(--popup-item-gap, var(--spacing-popup-item-md));
 }
 
 /* Semantic tokens for combobox icons */

package/src/tokens/components/molecules/_form-error-summary.css

@@ -0,0 +1,20 @@
+/*
+ * FormErrorSummary — runtime tokens derive from the status-text error token and
+ * danger primitives so the summary reads as one system with the form fields.
+ */
+@theme static {
+  --color-form-error-summary-fg: var(--color-status-text-fg-error);
+  --color-form-error-summary-border: var(--color-bg-danger-base);
+  --color-form-error-summary-bg: var(--color-bg-danger-subtle);
+  --color-form-error-summary-ring: var(--color-status-text-fg-error);
+  --outline-form-error-summary-focus-style: var(--default-ring-style);
+  --outline-form-error-summary-focus-width: var(--default-ring-width);
+  --outline-form-error-summary-focus-offset: var(--default-ring-offset);
+}
+
+@utility form-error-summary-focus-ring {
+  outline-color: var(--color-form-error-summary-ring);
+  outline-offset: var(--outline-form-error-summary-focus-offset);
+  outline-style: var(--outline-form-error-summary-focus-style);
+  outline-width: var(--outline-form-error-summary-focus-width);
+}

package/src/tokens/components/templates/_facet-filter-panel.css

@@ -0,0 +1,43 @@
+@theme static {
+  /* Reference layer */
+  --color-facet-filter-panel-surface: var(--color-fill-surface);
+  --color-facet-filter-panel-text: var(--color-fg-primary);
+  --color-facet-filter-panel-muted: var(--color-fg-secondary);
+  --color-facet-filter-panel-divider: var(--color-border-primary);
+  --color-facet-filter-panel-accent: var(--color-bg-primary-base);
+  --color-facet-filter-panel-on-accent: var(--color-fg-on-primary-solid-neo);
+
+  /* Derived layer */
+  --color-facet-filter-panel-bg: var(--color-facet-filter-panel-surface);
+  --color-facet-filter-panel-fg: var(--color-facet-filter-panel-text);
+  --color-facet-filter-panel-title-fg: var(--color-facet-filter-panel-text);
+  --color-facet-filter-panel-muted-fg: var(--color-facet-filter-panel-muted);
+  --color-facet-filter-panel-border: var(--color-facet-filter-panel-divider);
+  --color-facet-filter-panel-count-bg: var(--color-facet-filter-panel-accent);
+  --color-facet-filter-panel-count-fg: var(--color-facet-filter-panel-on-accent);
+
+  --border-width-facet-filter-panel: var(--border-sm);
+  --radius-facet-filter-panel: var(--radius-md);
+  --radius-facet-filter-panel-count: var(--radius-sm);
+  --container-facet-filter-panel-max-h: calc(100dvh - var(--spacing-400));
+  --spacing-facet-filter-panel: var(--spacing-200);
+  --spacing-facet-filter-panel-group: var(--spacing-100);
+  --spacing-facet-filter-panel-item: var(--spacing-100);
+  --spacing-facet-filter-panel-active: var(--spacing-100);
+  --spacing-facet-filter-panel-overflow: var(--spacing-100);
+  --spacing-facet-filter-panel-count: var(--spacing-400);
+  --padding-facet-filter-panel: var(--spacing-200);
+  --padding-facet-filter-panel-group: var(--spacing-200);
+  --padding-facet-filter-panel-active: var(--spacing-150);
+  --padding-facet-filter-panel-count: var(--spacing-100);
+  --text-facet-filter-panel-title: var(--text-md);
+  --text-facet-filter-panel-active-title: var(--text-sm);
+  --text-facet-filter-panel-status: var(--text-sm);
+  --text-facet-filter-panel-count: var(--text-xs);
+  --font-weight-facet-filter-panel-title: var(--font-weight-semibold);
+  --font-weight-facet-filter-panel-active-title: var(--font-weight-medium);
+}
+
+@utility token-icon-facet-filter-panel-filter {
+  @apply icon-[mdi--filter-variant];
+}