@techsio/ui-kit 0.3.2 → 0.4.1

package/dist/molecules/select.js

@@ -1,105 +1,161 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Portal, normalizeProps, useMachine } from "@zag-js/react";
 import { collection as select_collection, connect, machine } from "@zag-js/select";
-import { useId } from "react";
+import { createContext, useContext, useId } from "react";
 import { tv } from "tailwind-variants";
 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 { Label } from "../atoms/label.js";
+import { StatusText } from "../atoms/status-text.js";
 const selectVariants = tv({
     slots: {
         root: [
-            'relative',
-            'flex flex-col gap-select-root',
-            'w-full'
+            "relative",
+            "flex flex-col gap-select-root",
+            "w-full"
         ],
         control: [
-            'flex relative items-center justify-between',
-            'w-full'
+            "relative flex items-center justify-between",
+            "w-full"
         ],
         positioner: [
-            'w-(--reference-width)',
-            'isolate z-(--z-index)'
+            "w-(--reference-width)",
+            "isolate z-(--z-index)"
         ],
         trigger: [
-            'w-full',
-            'p-select-trigger',
-            'border border-select-trigger-border rounded-select',
-            'text-select-trigger-size text-left',
-            'hover:bg-select-trigger-bg-hover',
-            'focus:outline-none focus:border-select-trigger-border-focus',
-            'data-[disabled]:cursor-not-allowed',
-            'data-[disabled]:bg-select-bg-disabled',
-            'data-[disabled]:text-select-fg-disabled',
-            'data-[disabled]:border-select-border-disabled',
-            'data-[invalid]:border-select-danger data-[invalid]:ring-select-danger'
+            "form-control-base w-full",
+            "border-select-trigger-border",
+            "group",
+            "flex items-center justify-between gap-0",
+            "font-normal",
+            "text-left",
+            "hover:bg-select-trigger-bg-hover",
+            "hover:border-select-trigger-border-hover",
+            "focus:border-select-trigger-border-focus",
+            "focus-visible:outline-(style:--default-ring-style) focus-visible:outline-(length:--default-ring-width)",
+            "focus-visible:outline-select-ring",
+            "focus-visible:outline-offset-(length:--default-ring-offset)",
+            "data-[disabled]:cursor-not-allowed",
+            "data-[disabled]:bg-select-bg-disabled",
+            "data-[disabled]:text-select-fg-disabled",
+            "data-[disabled]:border-select-border-disabled",
+            "data-[validation=error]:border-(length:--border-width-validation)",
+            "data-[validation=error]:border-select-danger data-[validation=error]:outline-select-danger",
+            "data-[validation=error]:outline-(style:--default-ring-style) data-[validation=error]:outline-(length:--default-ring-width)",
+            "data-[validation=error]:outline-offset-(length:--default-ring-offset)",
+            "data-[validation=success]:border-(length:--border-width-validation)",
+            "data-[validation=success]:border-select-success data-[validation=success]:outline-select-success",
+            "data-[validation=success]:outline-(style:--default-ring-style) data-[validation=success]:outline-(length:--default-ring-width)",
+            "data-[validation=success]:outline-offset-(length:--default-ring-offset)",
+            "data-[validation=warning]:border-(length:--border-width-validation)",
+            "data-[validation=warning]:border-select-warning data-[validation=warning]:outline-select-warning",
+            "data-[validation=warning]:outline-(style:--default-ring-style) data-[validation=warning]:outline-(length:--default-ring-width)",
+            "data-[validation=warning]:outline-offset-(length:--default-ring-offset)",
+            "transition-colors duration-200 motion-reduce:transition-none"
         ],
         clearTrigger: [
-            'absolute right-select-right h-full',
-            'p-select-clear-trigger',
-            'hover:bg-select-clear-trigger-bg',
-            'text-select-clear-trigger-fg hover:text-select-danger',
-            'focus:text-select-danger',
-            'focus:outline-none focus:ring-offset-transparent focus:ring-transparent'
+            "absolute right-select-right h-full",
+            "p-select-clear-trigger",
+            "hover:bg-select-clear-trigger-bg",
+            "text-select-clear-trigger-fg hover:text-select-danger",
+            "focus:text-select-danger",
+            "focus-visible:outline-(style:--default-ring-style) focus-visible:outline-(length:--default-ring-width)",
+            "focus-visible:outline-ring",
+            "focus-visible:outline-offset-(length:--default-ring-offset)",
+            "transition-colors duration-200 motion-reduce:transition-none"
         ],
         content: [
-            'bg-select-content-bg border border-select-content-border',
-            'rounded-select shadow-select-content max-h-fit',
-            'h-[calc(var(--available-height)-var(--spacing-content))]',
-            'overflow-auto z-(--z-content)'
+            "border border-select-content-border bg-select-content-bg",
+            "max-h-fit rounded-select shadow-select-content",
+            "h-[calc(var(--available-height)-var(--spacing-content))]",
+            "z-(--z-content) overflow-auto",
+            "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"
         ],
         item: [
-            'flex items-center justify-between',
-            'bg-select-item-bg cursor-pointer',
-            'p-select-item',
-            'text-select-item-fg',
-            'hover:bg-select-item-bg-hover',
-            'data-[state=checked]:bg-select-item-bg-selected',
-            'data-[state=checked]:text-select-item-selected-fg',
-            'data-[disabled]:text-select-fg-disabled data-[disabled]:cursor-not-allowed'
+            "flex items-center justify-between",
+            "cursor-pointer bg-select-item-bg",
+            "p-select-item",
+            "text-select-item-fg",
+            "hover:bg-select-item-bg-hover",
+            "data-[highlighted]:bg-select-item-bg-hover",
+            "data-[state=checked]:bg-select-item-bg-selected",
+            "data-[state=checked]:text-select-item-selected-fg",
+            "data-[disabled]:cursor-not-allowed data-[disabled]:text-select-fg-disabled",
+            "transition-colors duration-200 motion-reduce:transition-none"
         ],
         itemIndicator: [
-            'text-select-indicator'
+            "text-select-indicator"
         ],
-        value: [
-            'flex-grow truncate data-[placeholder]:text-select-placeholder'
+        itemText: [
+            "flex-grow"
+        ],
+        itemGroup: [
+            ""
+        ],
+        itemGroupLabel: [
+            "px-select-item",
+            "font-medium text-select-fg-disabled"
+        ],
+        valueText: [
+            "flex-grow truncate font-normal",
+            "data-[placeholder]:font-normal data-[placeholder]:text-select-placeholder"
         ]
     },
     variants: {
         size: {
             xs: {
-                trigger: 'text-select-xs',
-                item: 'text-select-xs',
-                value: 'text-select-xs'
+                trigger: "p-select-trigger-sm text-select-trigger-xs",
+                item: "text-select-item-xs",
+                valueText: "text-select-value-xs",
+                itemGroupLabel: "text-select-item-group-label-xs"
             },
             sm: {
-                trigger: 'text-select-sm',
-                item: 'text-select-sm',
-                value: 'text-select-sm'
+                trigger: "h-form-control-sm rounded-select-sm p-select-trigger-sm text-select-trigger-sm",
+                item: "text-select-item-sm",
+                valueText: "text-select-value-sm",
+                itemGroupLabel: "text-select-item-group-label-sm"
             },
             md: {
-                trigger: 'text-select-md',
-                item: 'text-select-md',
-                value: 'text-select-md'
+                trigger: "h-form-control-md rounded-select-md p-select-trigger-md text-select-trigger-md",
+                item: "text-select-item-md",
+                valueText: "text-select-value-md",
+                itemGroupLabel: "text-select-item-group-label-md"
             },
             lg: {
-                trigger: 'text-select-lg',
-                item: 'text-select-lg',
-                value: 'text-select-lg'
+                trigger: "p-select-trigger-md text-select-trigger-lg",
+                item: "text-select-item-lg",
+                valueText: "text-select-value-lg",
+                itemGroupLabel: "text-select-item-group-label-lg"
             }
         }
     },
     defaultVariants: {
-        size: 'md'
+        size: "md"
     }
 });
-function Select({ options, label, placeholder = 'Select an option', size = 'md', value, defaultValue, multiple = false, clearIcon = true, disabled = false, invalid = false, required = false, readOnly = false, errorText, helperText, closeOnSelect = true, loopFocus = true, name, form, onValueChange, onOpenChange, onHighlightChange, onSelect, className, id: providedId }) {
+const SelectContext = /*#__PURE__*/ createContext(null);
+function useSelectContext() {
+    const context = useContext(SelectContext);
+    if (!context) throw new Error("Select components must be used within Select.Root");
+    return context;
+}
+const SelectItemContext = /*#__PURE__*/ createContext(null);
+function useSelectItemContext() {
+    const context = useContext(SelectItemContext);
+    if (!context) throw new Error("Select.Item components must be used within Select.Item");
+    return context;
+}
+function Select({ items, id: providedId, size = "md", value, defaultValue, multiple = false, disabled = false, validateStatus = "default", required = false, readOnly = false, closeOnSelect = true, loopFocus = true, name, form, onValueChange, onOpenChange, onHighlightChange, className, children, ref }) {
     const generatedId = useId();
     const id = providedId || generatedId;
+    const invalid = "error" === validateStatus;
     const collection = select_collection({
-        items: options,
+        items,
         itemToString: (item)=>item.displayValue || item.value,
         itemToValue: (item)=>item.value,
         isItemDisabled: (item)=>!!item.disabled
@@ -120,101 +176,273 @@ function Select({ options, label, placeholder = 'Select an option', size = 'md',
         value,
         onValueChange,
         onOpenChange,
-        onHighlightChange,
-        onSelect
+        onHighlightChange
     });
     const api = connect(service, normalizeProps);
-    const { root, control, trigger, clearTrigger, content, positioner, item, itemIndicator, value: valueSlot } = selectVariants({
+    const styles = selectVariants({
         size
     });
-    return /*#__PURE__*/ jsxs(Fragment, {
+    return /*#__PURE__*/ jsxs(SelectContext.Provider, {
+        value: {
+            api,
+            size,
+            items,
+            validateStatus
+        },
         children: [
             /*#__PURE__*/ jsx("select", {
                 ...api.getHiddenSelectProps(),
-                children: options.map((option)=>/*#__PURE__*/ jsx("option", {
-                        value: option.value,
-                        disabled: option.disabled,
-                        children: option.displayValue || option.value
-                    }, option.value))
+                children: items.map((item)=>/*#__PURE__*/ jsx("option", {
+                        disabled: item.disabled,
+                        value: item.value,
+                        children: item.displayValue || item.value
+                    }, item.value))
             }),
-            /*#__PURE__*/ jsxs("div", {
-                className: root({
+            /*#__PURE__*/ jsx("div", {
+                className: styles.root({
                     className
                 }),
+                ref: ref,
                 ...api.getRootProps(),
-                children: [
-                    label && /*#__PURE__*/ jsx(Label, {
-                        ...api.getLabelProps(),
-                        children: label
-                    }),
-                    /*#__PURE__*/ jsxs("div", {
-                        className: control(),
-                        ...api.getControlProps(),
-                        children: [
-                            /*#__PURE__*/ jsx(Button, {
-                                theme: "borderless",
-                                className: trigger(),
-                                ...api.getTriggerProps(),
-                                icon: api.open ? 'token-icon-select-indicator-open' : 'token-icon-select-indicator',
-                                iconPosition: "right",
-                                children: /*#__PURE__*/ jsx("span", {
-                                    className: valueSlot(),
-                                    "data-placeholder": 0 === api.value.length,
-                                    children: api.value.length > 0 ? options.find((option)=>option.value === api.value[0])?.label : placeholder
-                                })
-                            }),
-                            clearIcon && /*#__PURE__*/ jsx(Button, {
-                                theme: "borderless",
-                                ...api.getClearTriggerProps(),
-                                className: clearTrigger(),
-                                "aria-label": "Clear selection",
-                                icon: "token-icon-select-clear"
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ jsx(Portal, {
-                        children: /*#__PURE__*/ jsx("div", {
-                            className: positioner(),
-                            ...api.getPositionerProps(),
-                            children: /*#__PURE__*/ jsx("ul", {
-                                className: content(),
-                                ...api.getContentProps(),
-                                children: options.map((option)=>/*#__PURE__*/ jsxs("li", {
-                                        className: item(),
-                                        ...api.getItemProps({
-                                            item: option
-                                        }),
-                                        children: [
-                                            /*#__PURE__*/ jsx("span", {
-                                                ...api.getItemTextProps({
-                                                    item: option
-                                                }),
-                                                children: option.label
-                                            }),
-                                            /*#__PURE__*/ jsx("span", {
-                                                className: itemIndicator(),
-                                                ...api.getItemIndicatorProps({
-                                                    item: option
-                                                }),
-                                                children: /*#__PURE__*/ jsx(Icon, {
-                                                    icon: "token-icon-select-check"
-                                                })
-                                            })
-                                        ]
-                                    }, option.value))
-                            })
-                        })
-                    }),
-                    invalid && /*#__PURE__*/ jsx(ErrorText, {
-                        children: errorText
-                    }),
-                    !invalid && helperText && /*#__PURE__*/ jsx(ExtraText, {
-                        children: helperText
-                    })
-                ]
+                children: children
             })
         ]
     });
 }
-Select.displayName = 'Select';
-export { Select };
+Select.Label = function({ children, ...props }) {
+    const { api } = useSelectContext();
+    return /*#__PURE__*/ jsx(Label, {
+        ...api.getLabelProps(),
+        ...props,
+        children: children
+    });
+};
+Select.Control = function({ children, className, ref, ...props }) {
+    const { api, size } = useSelectContext();
+    const styles = selectVariants({
+        size
+    });
+    return /*#__PURE__*/ jsx("div", {
+        className: styles.control({
+            className
+        }),
+        ref: ref,
+        ...api.getControlProps(),
+        ...props,
+        children: children
+    });
+};
+Select.Trigger = function({ children, className, size: sizeProp, iconSize, ref, ...props }) {
+    const { api, size: contextSize, validateStatus } = useSelectContext();
+    const effectiveSize = sizeProp ?? contextSize;
+    const styles = selectVariants({
+        size: effectiveSize
+    });
+    const chevronIconSize = "sm" === effectiveSize ? "sm" : "md";
+    const validationDataAttrs = "default" !== validateStatus ? {
+        "data-validation": validateStatus
+    } : {};
+    return /*#__PURE__*/ jsxs(Button, {
+        className: styles.trigger({
+            className
+        }),
+        ref: ref,
+        size: "current",
+        theme: "unstyled",
+        ...api.getTriggerProps(),
+        ...validationDataAttrs,
+        ...props,
+        children: [
+            children,
+            /*#__PURE__*/ jsx(Icon, {
+                className: `text-select-trigger group-hover:text-select-trigger-hover motion-safe:transition-[transform,color] motion-safe:duration-200 motion-reduce:transition-none ${api.open ? "rotate-180" : "rotate-0"}`,
+                icon: "token-icon-select-indicator",
+                size: iconSize ?? chevronIconSize
+            })
+        ]
+    });
+};
+Select.ValueText = function({ placeholder = "Select an option", className, size: sizeProp, ref, children, ...props }) {
+    const { api, size: contextSize, items } = useSelectContext();
+    const effectiveSize = sizeProp ?? contextSize;
+    const styles = selectVariants({
+        size: effectiveSize
+    });
+    const hasValue = api.value.length > 0;
+    const selectedItems = api.value.map((v)=>items.find((item)=>item.value === v)).filter(Boolean);
+    const renderContent = ()=>{
+        if (!hasValue) return placeholder;
+        if ("function" == typeof children) return children(selectedItems);
+        return selectedItems[0]?.label;
+    };
+    return /*#__PURE__*/ jsx("span", {
+        className: styles.valueText({
+            className
+        }),
+        "data-placeholder": !hasValue || void 0,
+        ref: ref,
+        ...props,
+        children: renderContent()
+    });
+};
+Select.ClearTrigger = function({ className, iconSize, ref, ...props }) {
+    const { api, size } = useSelectContext();
+    const styles = selectVariants({
+        size
+    });
+    return /*#__PURE__*/ jsx(Button, {
+        className: styles.clearTrigger({
+            className
+        }),
+        ref: ref,
+        size: "current",
+        theme: "unstyled",
+        ...api.getClearTriggerProps(),
+        "aria-label": "Clear selection",
+        icon: "token-icon-select-clear",
+        iconSize: iconSize,
+        ...props
+    });
+};
+Select.Positioner = function({ children, className, ref, ...props }) {
+    const { api, size } = useSelectContext();
+    const styles = selectVariants({
+        size
+    });
+    return /*#__PURE__*/ jsx(Portal, {
+        children: /*#__PURE__*/ jsx("div", {
+            className: styles.positioner({
+                className
+            }),
+            ref: ref,
+            ...api.getPositionerProps(),
+            ...props,
+            children: children
+        })
+    });
+};
+Select.Content = function({ children, className, ref, ...props }) {
+    const { api, size } = useSelectContext();
+    const styles = selectVariants({
+        size
+    });
+    return /*#__PURE__*/ jsx("ul", {
+        className: styles.content({
+            className
+        }),
+        ref: ref,
+        ...api.getContentProps(),
+        ...props,
+        children: children
+    });
+};
+Select.ItemGroup = function({ id, children, className, ref, ...props }) {
+    const { api, size } = useSelectContext();
+    const styles = selectVariants({
+        size
+    });
+    return /*#__PURE__*/ jsx("div", {
+        className: styles.itemGroup({
+            className
+        }),
+        ref: ref,
+        ...api.getItemGroupProps({
+            id
+        }),
+        ...props,
+        children: children
+    });
+};
+Select.ItemGroupLabel = function({ htmlFor, children, className, ref, ...props }) {
+    const { api, size } = useSelectContext();
+    const styles = selectVariants({
+        size
+    });
+    return /*#__PURE__*/ jsx("div", {
+        className: styles.itemGroupLabel({
+            className
+        }),
+        ref: ref,
+        ...api.getItemGroupLabelProps({
+            htmlFor
+        }),
+        ...props,
+        children: children
+    });
+};
+Select.Item = function({ item, children, className, size: sizeProp, ref, ...props }) {
+    const { api, size: contextSize } = useSelectContext();
+    const effectiveSize = sizeProp ?? contextSize;
+    const styles = selectVariants({
+        size: effectiveSize
+    });
+    return /*#__PURE__*/ jsx(SelectItemContext.Provider, {
+        value: {
+            item
+        },
+        children: /*#__PURE__*/ jsx("li", {
+            className: styles.item({
+                className
+            }),
+            ref: ref,
+            ...api.getItemProps({
+                item
+            }),
+            ...props,
+            children: children
+        })
+    });
+};
+Select.ItemText = function({ children, className, ref, ...props }) {
+    const { api, size } = useSelectContext();
+    const { item } = useSelectItemContext();
+    const styles = selectVariants({
+        size
+    });
+    return /*#__PURE__*/ jsx("span", {
+        className: styles.itemText({
+            className
+        }),
+        ref: ref,
+        ...api.getItemTextProps({
+            item
+        }),
+        ...props,
+        children: children || item.label
+    });
+};
+Select.ItemIndicator = function({ className, iconSize, ref, ...props }) {
+    const { api, size } = useSelectContext();
+    const { item } = useSelectItemContext();
+    const styles = selectVariants({
+        size
+    });
+    return /*#__PURE__*/ jsx("span", {
+        className: styles.itemIndicator({
+            className
+        }),
+        ref: ref,
+        ...api.getItemIndicatorProps({
+            item
+        }),
+        ...props,
+        children: /*#__PURE__*/ jsx(Icon, {
+            icon: "token-icon-select-check",
+            size: iconSize
+        })
+    });
+};
+Select.StatusText = function({ status: statusProp, size: sizeProp, showIcon, children, ...props }) {
+    const { size: contextSize, validateStatus: contextValidateStatus } = useSelectContext();
+    const effectiveSize = sizeProp ?? contextSize;
+    const effectiveStatus = statusProp ?? contextValidateStatus;
+    return /*#__PURE__*/ jsx(StatusText, {
+        showIcon: showIcon,
+        size: "xs" === effectiveSize ? "sm" : effectiveSize,
+        status: effectiveStatus,
+        ...props,
+        children: children
+    });
+};
+Select.displayName = "Select";
+export { Select, selectVariants, useSelectContext };