@techsio/ui-kit 0.3.2 → 0.4.1

package/dist/molecules/combobox.js

@@ -3,117 +3,139 @@ import { collection as combobox_collection, connect, machine } from "@zag-js/com
 import { Portal, normalizeProps, useMachine } from "@zag-js/react";
 import { useEffect, useId, useState } from "react";
 import { Button } from "../atoms/button.js";
-import { ErrorText } from "../atoms/error-text.js";
-import { ExtraText } from "../atoms/extra-text.js";
 import { Icon } from "../atoms/icon.js";
 import { Input } from "../atoms/input.js";
 import { Label } from "../atoms/label.js";
+import { StatusText } from "../atoms/status-text.js";
 import { tv } from "../utils.js";
 const comboboxVariants = tv({
     slots: {
         root: [
-            'flex flex-col relative w-full'
+            "relative flex w-full flex-col"
         ],
         label: [
-            'block text-label-md font-label'
+            "block font-label text-label-md"
         ],
         control: [
-            'flex items-center w-full relative',
-            'bg-combobox-bg border-(length:--border-width-combobox) border-combobox-border rounded-combobox',
-            'transition-colors duration-200 ease-in-out',
-            'hover:bg-combobox-bg-hover hover:border-combobox-border-hover',
-            'data-[focus]:bg-combobox-bg-focus data-[focus]:border-combobox-border-focus',
-            'data-[focus]:ring',
-            'data-[focus]:ring-combobox-ring',
-            'data-[disabled]:bg-combobox-bg-disabled data-[disabled]:border-combobox-border-disabled',
-            'data-[validation=error]:border-combobox-danger-fg',
-            'data-[validation=success]:border-combobox-success-fg',
-            'data-[validation=warning]:border-combobox-warning-fg'
+            "form-control-base relative flex w-full items-center overflow-hidden",
+            "bg-combobox-bg",
+            "transition-colors duration-200 ease-in-out motion-reduce:transition-none",
+            "hover:border-combobox-border-hover hover:bg-combobox-bg-hover",
+            "data-focus:border-combobox-border-focus data-focus:bg-combobox-bg-focus",
+            "data-focus-visible:outline-(style:--default-ring-style) data-focus-visible:outline-(length:--default-ring-width)",
+            "data-focus-visible:outline-combobox-ring",
+            "data-focus-visible:outline-offset-(length:--default-ring-offset)",
+            "data-disabled:border-combobox-border-disabled data-disabled:bg-combobox-bg-disabled",
+            "data-[validation=error]:border-(length:--border-width-validation)",
+            "data-[validation=error]:border-combobox-danger-fg",
+            "data-[validation=success]:border-(length:--border-width-validation)",
+            "data-[validation=success]:border-combobox-success-fg",
+            "data-[validation=warning]:border-(length:--border-width-validation)",
+            "data-[validation=warning]:border-combobox-warning-fg"
         ],
         input: [
-            'w-full relative border-none bg-combobox-input-bg',
-            'focus-visible:ring-0 hover:bg-combobox-input-bg-hover',
-            'focus:bg-combobox-input-bg-focused',
-            'placeholder:text-combobox-placeholder',
-            'data-[disabled]:text-combobox-fg-disabled',
-            'data-[disabled]:bg-combobox-bg-disabled'
+            "relative h-full w-full border-none bg-combobox-input-bg",
+            "hover:bg-combobox-input-bg-hover focus-visible:outline-none",
+            "focus:bg-combobox-input-bg-focused",
+            "placeholder:text-combobox-placeholder",
+            "data-disabled:text-combobox-fg-disabled",
+            "data-disabled:bg-combobox-bg-disabled"
         ],
         clearTrigger: [
-            'absolute right-combobox-clear-right'
+            "absolute right-combobox-clear-right h-full p-combobox-trigger"
         ],
         trigger: [
-            'flex items-center justify-center',
-            'p-combobox-trigger',
-            'transition-transform duration-200',
-            'data-[state=open]:rotate-180'
+            "group flex h-full shrink-0 items-center justify-center",
+            "font-normal",
+            "p-combobox-trigger"
         ],
         positioner: [
-            'z-(--z-index) w-full *:overflow-y-auto *:max-h-(--available-height)'
+            "z-(--z-index) w-full *:max-h-(--available-height) *:overflow-y-auto"
         ],
         content: [
-            'flex flex-col overflow-clip',
-            'rounded-combobox shadow-md',
-            'bg-combobox-content-bg',
-            'border border-combobox-border z-(--z-combobox-content)'
+            "flex flex-col overflow-clip",
+            "rounded-combobox shadow-md",
+            "bg-combobox-content-bg",
+            "z-(--z-combobox-content) border border-combobox-border",
+            "duration-200 ease-out motion-safe:transition-[opacity,display,translate]",
+            "transition-discrete",
+            "starting:-translate-y-2 starting:opacity-0",
+            "data-[state=open]:starting:-translate-y-2 data-[state=open]:starting:opacity-0",
+            "data-[state=open]:translate-y-0 data-[state=open]:opacity-100",
+            "data-[state=closed]:-translate-y-2 data-[state=closed]:opacity-0"
+        ],
+        list: [
+            "m-0 flex list-none flex-col"
         ],
         item: [
-            'flex items-center',
-            'text-combobox-item-fg',
-            'cursor-pointer',
-            'data-[highlighted]:bg-combobox-item-bg-hover',
-            'data-[state=checked]:bg-combobox-item-bg-selected',
-            'data-[disabled]:text-combobox-fg-disabled data-[disabled]:cursor-not-allowed'
+            "flex items-center",
+            "text-combobox-item-fg",
+            "cursor-pointer",
+            "data-highlighted:bg-combobox-item-bg-hover",
+            "data-[state=checked]:bg-combobox-item-bg-selected",
+            "data-disabled:cursor-not-allowed data-disabled:text-combobox-fg-disabled"
+        ],
+        emptyState: [
+            "text-combobox-placeholder"
         ],
         helper: [
-            'data-[validation=success]:text-combobox-success-fg',
-            'data-[validation=warning]:text-combobox-warning-fg'
+            "data-[validation=success]:text-combobox-success-fg",
+            "data-[validation=warning]:text-combobox-warning-fg"
         ],
         multiple: []
     },
     compoundSlots: [
         {
             slots: [
-                'clearTrigger',
-                'trigger'
+                "clearTrigger",
+                "trigger"
             ],
             class: [
-                'focus-visible:ring-0',
-                'text-combobox-trigger text-combobox-trigger-size',
-                'hover:text-combobox-trigger-hover',
-                'px-combobox-trigger',
-                'hover:bg-combobox-trigger-bg-hover',
-                'focus-visible:outline-none',
-                'active:bg-combobox-trigger-bg-active'
+                "focus-visible:outline-(style:--default-ring-style) focus-visible:outline-(length:--default-ring-width)",
+                "focus-visible:outline-combobox-ring",
+                "focus-visible:outline-offset-(length:--default-ring-offset)",
+                "text-combobox-trigger text-combobox-trigger-size",
+                "hover:text-combobox-trigger-hover",
+                "motion-safe:transition-colors motion-safe:duration-200 motion-reduce:transition-none",
+                "hover:bg-combobox-trigger-bg-hover",
+                "active:bg-combobox-trigger-bg-active"
             ]
         }
     ],
     variants: {
         size: {
             sm: {
-                root: 'gap-combobox-root-sm',
-                item: 'p-combobox-item-sm',
-                input: 'py-combobox-input-sm',
-                content: 'text-combobox-content-sm'
+                root: "gap-combobox-root-sm",
+                control: "h-form-control-sm rounded-combobox-sm text-input-sm",
+                item: "p-combobox-item-sm text-combobox-item-sm",
+                emptyState: "p-combobox-item-sm text-combobox-item-sm",
+                input: "p-combobox-input-sm",
+                content: "text-combobox-content-sm"
             },
             md: {
-                root: 'gap-combobox-root-md',
-                item: 'p-combobox-item-md',
-                input: 'py-combobox-input-md',
-                content: 'text-combobox-content-md'
+                root: "gap-combobox-root-md",
+                control: "h-form-control-md rounded-combobox-md text-input-md",
+                item: "p-combobox-item-md text-combobox-item-md",
+                emptyState: "p-combobox-item-md text-combobox-item-md",
+                input: "p-combobox-input-md",
+                content: "text-combobox-content-md"
             },
             lg: {
-                root: 'gap-combobox-root-lg',
-                item: 'p-combobox-item-lg',
-                input: 'py-combobox-input-lg',
-                content: 'text-combobox-content-lg'
+                root: "gap-combobox-root-lg",
+                control: "rounded-combobox text-input-lg",
+                item: "p-combobox-item-lg text-combobox-item-lg",
+                emptyState: "p-combobox-item-lg text-combobox-item-lg",
+                input: "p-combobox-input-lg",
+                content: "text-combobox-content-lg"
             }
         }
     },
     defaultVariants: {
-        size: 'md'
+        size: "md"
     }
 });
-function Combobox({ id, name, label, size, placeholder = 'Select option', disabled = false, readOnly = false, required = false, items = [], value, defaultValue, inputValue, multiple = false, validationState = 'normal', error, helper, noResultsMessage = 'No results found for "{inputValue}"', clearable = true, selectionBehavior = 'replace', closeOnSelect = false, allowCustomValue = false, loopFocus = true, autoFocus = false, inputBehavior = 'autocomplete', onChange, onInputValueChange, onOpenChange }) {
+function Combobox({ id, name, label, size, placeholder = "Select option", disabled = false, readOnly = false, required = false, items = [], value, defaultValue, inputValue, multiple = false, validateStatus, helpText, showHelpTextIcon = true, noResultsMessage = 'No results found for "{inputValue}"', clearable = true, selectionBehavior = "replace", closeOnSelect = true, allowCustomValue = false, loopFocus = true, autoFocus = false, triggerIcon = "token-icon-combobox-chevron", triggerIconSize, clearIcon = "token-icon-combobox-clear", clearIconSize, inputBehavior = "autocomplete", onChange, onInputValueChange, onOpenChange }) {
+    const resolvedChevronIconSize = "sm" === size ? "sm" : "md";
     const generatedId = useId();
     const uniqueId = id || generatedId;
     const [options, setOptions] = useState(items);
@@ -152,10 +174,10 @@ function Combobox({ id, name, label, size, placeholder = 'Select option', disabl
         onValueChange: ({ value: selectedValue })=>{
             onChange?.(selectedValue);
         },
-        onInputValueChange: ({ inputValue })=>{
-            const filtered = items.filter((item)=>item.label.toLowerCase().includes(inputValue.toLowerCase()));
+        onInputValueChange: ({ inputValue: newItemInputValue })=>{
+            const filtered = items.filter((item)=>item.label.toLowerCase().includes(newItemInputValue.toLowerCase()));
             setOptions(filtered);
-            onInputValueChange?.(inputValue);
+            onInputValueChange?.(newItemInputValue);
         },
         onOpenChange: ({ open })=>{
             setOptions(items);
@@ -165,87 +187,92 @@ function Combobox({ id, name, label, size, placeholder = 'Select option', disabl
     const api = connect(service, normalizeProps);
     const inputProps = api.getInputProps();
     const { ...restInputProps } = inputProps;
-    const { root, label: labelStyles, control, input, trigger, positioner, content, clearTrigger, item: itemSlot, helper: helperSlot } = comboboxVariants({
+    const { root, label: labelStyles, control, input, trigger, positioner, content, list, clearTrigger, item: itemSlot, emptyState } = comboboxVariants({
         size
     });
+    const hasOptions = api.collection.size > 0;
+    const showEmptyState = !hasOptions && Boolean(api.inputValue);
     return /*#__PURE__*/ jsxs("div", {
         className: root(),
         children: [
             label && /*#__PURE__*/ jsx(Label, {
                 className: labelStyles(),
-                size: size,
                 required: required,
+                size: size,
                 ...api.getLabelProps(),
                 children: label
             }),
             /*#__PURE__*/ jsxs("div", {
                 className: control(),
                 ...api.getControlProps(),
-                "data-validation": validationState,
+                "data-validation": validateStatus,
                 children: [
                     /*#__PURE__*/ jsx(Input, {
                         className: input(),
                         ...restInputProps,
-                        placeholder: placeholder,
                         name: name,
+                        placeholder: placeholder,
                         required: required,
                         size: size
                     }),
                     clearable && api.value.length > 0 && /*#__PURE__*/ jsx(Button, {
                         className: clearTrigger(),
-                        theme: "borderless",
-                        size: size,
+                        size: "current",
+                        theme: "unstyled",
                         ...api.getClearTriggerProps(),
                         children: /*#__PURE__*/ jsx(Icon, {
-                            icon: 'token-icon-combobox-clear',
-                            size: "current"
+                            icon: clearIcon,
+                            size: clearIconSize ?? "current"
                         })
                     }),
                     /*#__PURE__*/ jsx(Button, {
                         ...api.getTriggerProps(),
-                        theme: "borderless",
-                        size: size,
                         className: trigger(),
+                        size: "current",
+                        theme: "unstyled",
                         children: /*#__PURE__*/ jsx(Icon, {
-                            icon: "token-icon-combobox-chevron"
+                            className: `text-combobox-trigger group-hover:text-combobox-trigger-hover motion-safe:transition-[transform,color] motion-safe:duration-200 motion-reduce:transition-none ${api.open ? "rotate-180" : "rotate-0"}`,
+                            icon: triggerIcon,
+                            size: triggerIconSize ?? resolvedChevronIconSize
                         })
                     })
                 ]
             }),
             /*#__PURE__*/ jsx(Portal, {
-                children: /*#__PURE__*/ jsxs("div", {
+                children: /*#__PURE__*/ jsx("div", {
                     ...api.getPositionerProps(),
                     className: positioner(),
-                    children: [
-                        api.open && options.length > 0 && /*#__PURE__*/ jsx("ul", {
-                            ...api.getContentProps(),
-                            className: content(),
-                            children: options.map((item)=>/*#__PURE__*/ jsx("li", {
-                                    ...api.getItemProps({
-                                        item
-                                    }),
-                                    className: itemSlot(),
-                                    children: /*#__PURE__*/ jsx("span", {
-                                        className: "flex-1",
-                                        children: item.label
-                                    })
-                                }, item.value))
-                        }),
-                        api.open && api.inputValue && 0 === options.length && /*#__PURE__*/ jsx("div", {
-                            className: content(),
-                            children: noResultsMessage.replace('{inputValue}', api.inputValue)
-                        })
-                    ]
+                    children: /*#__PURE__*/ jsxs("div", {
+                        ...api.getContentProps(),
+                        className: content(),
+                        children: [
+                            hasOptions && /*#__PURE__*/ jsx("ul", {
+                                ...api.getListProps(),
+                                className: list(),
+                                children: options.map((item)=>/*#__PURE__*/ jsx("li", {
+                                        ...api.getItemProps({
+                                            item
+                                        }),
+                                        className: itemSlot(),
+                                        children: /*#__PURE__*/ jsx("span", {
+                                            className: "flex-1",
+                                            children: item.label
+                                        })
+                                    }, item.value))
+                            }),
+                            showEmptyState && /*#__PURE__*/ jsx("div", {
+                                className: emptyState(),
+                                children: noResultsMessage.replace("{inputValue}", api.inputValue)
+                            })
+                        ]
+                    })
                 })
             }),
-            helper && !error && /*#__PURE__*/ jsx(ExtraText, {
-                "data-validation": validationState,
+            helpText && /*#__PURE__*/ jsx(StatusText, {
+                showIcon: showHelpTextIcon,
                 size: size,
-                className: helperSlot(),
-                children: helper
-            }),
-            error && /*#__PURE__*/ jsx(ErrorText, {
-                children: error
+                status: validateStatus,
+                children: helpText
             })
         ]
     });