@techsio/ui-kit 0.15.0 → 0.17.0

package/dist/atoms/action-icon.js

@@ -0,0 +1,52 @@
+import { jsx } from "react/jsx-runtime";
+import { tv } from "../utils.js";
+import { Icon } from "./icon.js";
+const actionIconVariants = tv({
+    base: [
+        "inline-flex shrink-0 cursor-pointer items-center justify-center",
+        "rounded-icon-control text-icon-control-fg",
+        "transition-colors duration-200 motion-reduce:transition-none",
+        "focus-visible:outline-(style:--default-ring-style) focus-visible:outline-(length:--default-ring-width)",
+        "focus-visible:outline-offset-(length:--default-ring-offset) focus-visible:outline-icon-control-ring",
+        "disabled:cursor-not-allowed disabled:text-icon-control-fg-disabled"
+    ],
+    variants: {
+        size: {
+            sm: "size-icon-control-sm text-icon-control-sm",
+            md: "size-icon-control-md text-icon-control-md",
+            lg: "size-icon-control-lg text-icon-control-lg"
+        },
+        tone: {
+            neutral: [
+                "hover:bg-icon-control-bg-hover",
+                "active:bg-icon-control-bg-active"
+            ],
+            danger: [
+                "hover:bg-icon-control-bg-danger-hover hover:text-icon-control-fg-danger-hover",
+                "active:bg-icon-control-bg-danger-active"
+            ]
+        }
+    },
+    defaultVariants: {
+        size: "md",
+        tone: "neutral"
+    }
+});
+function ActionIcon({ icon, size, tone, type = "button", className, ref, ...props }) {
+    return /*#__PURE__*/ jsx("button", {
+        className: actionIconVariants({
+            size,
+            tone,
+            className
+        }),
+        ref: ref,
+        type: type,
+        ...props,
+        children: /*#__PURE__*/ jsx(Icon, {
+            icon: icon,
+            size: "current"
+        })
+    });
+}
+ActionIcon.displayName = "ActionIcon";
+export { ActionIcon };

package/dist/atoms/numeric-input.js

@@ -41,16 +41,17 @@ const numericInputVariants = tv({
             "duration-0 data-invalid:focus:border-input-border-danger-focus"
         ],
         triggerContainer: [
-            "flex flex-col gap-px self-stretch bg-numeric-input-trigger-container-bg"
+            "flex flex-col gap-px self-stretch",
+            "border-numeric-input-border border-s"
         ],
         trigger: [
             "flex flex-1 place-items-center",
             "px-numeric-input-trigger-x py-numeric-input-trigger-y",
-            "bg-numeric-input-trigger-bg hover:bg-numeric-input-trigger-bg-hover",
-            "text-numeric-input-trigger-fg hover:text-numeric-input-trigger-fg-hover",
+            "bg-transparent hover:bg-icon-control-bg-hover active:bg-icon-control-bg-active",
+            "text-icon-control-fg",
             "cursor-pointer",
             "transition-colors duration-200 motion-reduce:transition-none",
-            "disabled:cursor-not-allowed"
+            "disabled:cursor-not-allowed disabled:text-icon-control-fg-disabled"
         ],
         scrubber: "absolute inset-0 cursor-ew-resize"
     },

package/dist/molecules/accordion.js

@@ -58,17 +58,20 @@ const accordionVariants = tv({
             sm: {
                 title: "p-accordion-title-sm text-accordion-title-sm",
                 content: "px-accordion-content-x-sm text-accordion-content-sm",
-                subtitle: "text-accordion-subtitle-sm"
+                subtitle: "text-accordion-subtitle-sm",
+                icon: "text-icon-control-sm"
             },
             md: {
                 title: "p-accordion-title-md text-accordion-title-md",
                 content: "p-accordion-content-md text-accordion-content-md",
-                subtitle: "text-accordion-subtitle-md"
+                subtitle: "text-accordion-subtitle-md",
+                icon: "text-icon-control-md"
             },
             lg: {
                 title: "p-accordion-title-lg text-accordion-title-lg",
                 content: "p-accordion-content-lg text-accordion-content-lg",
-                subtitle: "text-accordion-subtitle-lg"
+                subtitle: "text-accordion-subtitle-lg",
+                icon: "text-icon-control-lg"
             }
         }
     },

package/dist/molecules/combobox.js

@@ -2,6 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { collection as combobox_collection, connect, machine } from "@zag-js/combobox";
 import { Portal, normalizeProps, useMachine } from "@zag-js/react";
 import { useEffect, useId, useState } from "react";
+import { ActionIcon } from "../atoms/action-icon.js";
 import { Button } from "../atoms/button.js";
 import { Icon } from "../atoms/icon.js";
 import { Input } from "../atoms/input.js";
@@ -34,16 +35,13 @@ const comboboxVariants = tv({
             "data-[validation=warning]:border-combobox-border-warning"
         ],
         input: [
-            "relative h-full w-full border-none bg-combobox-input-bg-base",
+            "relative h-full min-w-0 flex-1 border-none bg-combobox-input-bg-base",
             "hover:bg-combobox-input-bg-hover focus-visible:outline-none",
             "focus:bg-combobox-input-bg-focus",
             "placeholder:text-combobox-fg-placeholder",
             "data-disabled:text-combobox-fg-disabled",
             "data-disabled:bg-combobox-bg-disabled"
         ],
-        clearTrigger: [
-            "absolute right-combobox-clear-right h-full p-combobox-trigger"
-        ],
         trigger: [
             "group flex h-full shrink-0 items-center justify-center",
             "font-normal",
@@ -92,14 +90,13 @@ const comboboxVariants = tv({
     compoundSlots: [
         {
             slots: [
-                "clearTrigger",
                 "trigger"
             ],
             class: [
                 "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-fg-base text-combobox-trigger",
+                "text-combobox-trigger text-combobox-trigger-fg-base",
                 "hover:text-combobox-trigger-fg-hover",
                 "motion-safe:transition-colors motion-safe:duration-200 motion-reduce:transition-none",
                 "hover:bg-combobox-trigger-bg-hover",
@@ -115,7 +112,8 @@ const comboboxVariants = tv({
                 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-sm"
+                content: "text-combobox-sm",
+                triggerIndicator: "text-icon-control-sm"
             },
             md: {
                 root: "gap-combobox-md",
@@ -123,7 +121,8 @@ const comboboxVariants = tv({
                 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-md"
+                content: "text-combobox-md",
+                triggerIndicator: "text-icon-control-md"
             },
             lg: {
                 root: "gap-combobox-lg",
@@ -131,7 +130,8 @@ const comboboxVariants = tv({
                 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-lg"
+                content: "text-combobox-lg",
+                triggerIndicator: "text-icon-control-lg"
             }
         }
     },
@@ -139,8 +139,7 @@ const comboboxVariants = tv({
         size: "md"
     }
 });
-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";
+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", inputBehavior = "autocomplete", onChange, onInputValueChange, onOpenChange }) {
     const generatedId = useId();
     const uniqueId = id || generatedId;
     const [options, setOptions] = useState(items);
@@ -192,7 +191,7 @@ 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, list, clearTrigger, item: itemSlot, emptyState, triggerIndicator } = comboboxVariants({
+    const { root, label: labelStyles, control, input, trigger, positioner, content, list, item: itemSlot, emptyState, triggerIndicator } = comboboxVariants({
         size
     });
     const hasOptions = api.collection.size > 0;
@@ -220,15 +219,11 @@ function Combobox({ id, name, label, size, placeholder = "Select option", disabl
                         required: required,
                         size: size
                     }),
-                    clearable && api.value.length > 0 && /*#__PURE__*/ jsx(Button, {
-                        className: clearTrigger(),
-                        size: "current",
-                        theme: "unstyled",
-                        ...api.getClearTriggerProps(),
-                        children: /*#__PURE__*/ jsx(Icon, {
-                            icon: clearIcon,
-                            size: clearIconSize ?? "current"
-                        })
+                    clearable && api.value.length > 0 && /*#__PURE__*/ jsx(ActionIcon, {
+                        icon: clearIcon,
+                        size: size ?? "md",
+                        tone: "neutral",
+                        ...api.getClearTriggerProps()
                     }),
                     /*#__PURE__*/ jsx(Button, {
                         ...api.getTriggerProps(),
@@ -238,7 +233,7 @@ function Combobox({ id, name, label, size, placeholder = "Select option", disabl
                         children: /*#__PURE__*/ jsx(Icon, {
                             className: triggerIndicator(),
                             icon: triggerIcon,
-                            size: triggerIconSize ?? resolvedChevronIconSize
+                            size: triggerIconSize ?? "current"
                         })
                     })
                 ]

package/dist/molecules/dialog.js

@@ -3,6 +3,7 @@ import { connect, machine } from "@zag-js/dialog";
 import { Portal, normalizeProps, useMachine } from "@zag-js/react";
 import { useId } from "react";
 import { tv } from "tailwind-variants";
+import { ActionIcon } from "../atoms/action-icon.js";
 import { Button } from "../atoms/button.js";
 const dialogVariants = tv({
     slots: {
@@ -23,20 +24,14 @@ const dialogVariants = tv({
             "focus-visible:outline-offset-(length:--default-ring-offset)"
         ],
         title: [
-            "font-dialog-title text-dialog-title-fg text-dialog-title"
+            "font-dialog-title text-dialog-title text-dialog-title-fg"
         ],
         description: [
-            "text-dialog-description-fg text-dialog-description"
+            "text-dialog-description text-dialog-description-fg"
         ],
         trigger: [],
         closeTrigger: [
-            "absolute top-dialog-close-trigger-offset right-dialog-close-trigger-offset",
-            "flex items-center justify-center",
-            "rounded-dialog-close-trigger p-dialog-close-trigger",
-            "text-dialog-close-trigger-fg",
-            "focus-visible:outline-(style:--default-ring-style) focus-visible:outline-(length:--default-ring-width)",
-            "focus-visible:outline-dialog-ring",
-            "focus-visible:outline-offset-(length:--default-ring-offset)"
+            "absolute top-dialog-close-trigger-offset right-dialog-close-trigger-offset"
         ],
         actions: "mt-auto flex shrink-0 justify-end gap-dialog-actions pt-dialog-actions-top"
     },
@@ -269,11 +264,13 @@ function Dialog({ id, open, onOpenChange, initialFocusEl, finalFocusEl, role = "
                         }),
                         ...api.getContentProps(),
                         children: [
-                            !hideCloseButton && /*#__PURE__*/ jsx(Button, {
+                            !hideCloseButton && /*#__PURE__*/ jsx(ActionIcon, {
                                 className: closeTrigger(),
-                                theme: "borderless",
+                                icon: "token-icon-dialog-close",
+                                size: "md",
+                                tone: "neutral",
                                 ...api.getCloseTriggerProps(),
-                                icon: "token-icon-dialog-close"
+                                "aria-label": "Close dialog"
                             }),
                             title && /*#__PURE__*/ jsx("h2", {
                                 className: titleSlot(),

package/dist/molecules/phone-input.js

@@ -86,7 +86,8 @@ const phoneInputVariants = tv({
             "border-(length:--border-phone-input-trigger)",
             "focus-visible:outline-none",
             "w-phone-input-trigger",
-            "focus-visible:bg-phone-input-trigger-bg-hover"
+            "focus-visible:bg-phone-input-trigger-bg-hover",
+            "rounded-e-none"
         ],
         countryValue: [
             "flex items-center gap-phone-input-country-value"

package/dist/molecules/popover.js

@@ -2,6 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { connect, machine } from "@zag-js/popover";
 import { Portal, mergeProps, normalizeProps, useMachine } from "@zag-js/react";
 import { createContext, useContext, useId } from "react";
+import { ActionIcon } from "../atoms/action-icon.js";
 import { Button } from "../atoms/button.js";
 import { tv } from "../utils.js";
 const popoverVariants = tv({
@@ -31,12 +32,11 @@ const popoverVariants = tv({
             "mb-popover-title"
         ],
         description: [
-            "text-popover-description-fg text-popover-description",
+            "text-popover-description text-popover-description-fg",
             "leading-normal"
         ],
         closeTrigger: [
-            "absolute top-2 right-2",
-            "text-popover-close-trigger-fg"
+            "absolute top-2 right-2"
         ]
     },
     variants: {
@@ -248,18 +248,30 @@ Popover.CloseTrigger = function({ children, className, icon, onClick, ref, size
     const { api, styles } = usePopoverContext();
     const { onClick: onMachineClick, ...machineCloseTriggerProps } = api.getCloseTriggerProps();
     const buttonProps = mergeProps(props, machineCloseTriggerProps);
-    const closeIcon = icon ?? (children ? void 0 : "token-icon-close");
+    const handleClick = (event)=>{
+        onClick?.(event);
+        if (!event.defaultPrevented) onMachineClick?.(event);
+    };
+    if (!children) return /*#__PURE__*/ jsx(ActionIcon, {
+        ...buttonProps,
+        "aria-label": "Close popover",
+        className: styles.closeTrigger({
+            className
+        }),
+        icon: icon ?? "token-icon-close",
+        onClick: handleClick,
+        ref: ref,
+        size: "md",
+        tone: "neutral",
+        type: type
+    });
     return /*#__PURE__*/ jsx(Button, {
         ...buttonProps,
-        "aria-label": children ? void 0 : "Close popover",
         className: styles.closeTrigger({
             className
         }),
-        icon: closeIcon,
-        onClick: (event)=>{
-            onClick?.(event);
-            if (!event.defaultPrevented) onMachineClick?.(event);
-        },
+        icon: icon,
+        onClick: handleClick,
         ref: ref,
         size: size,
         theme: theme,

package/dist/molecules/search-form.figma.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import code_connect from "@figma/code-connect";
 import { SearchForm } from "./search-form.js";
-code_connect.connect(SearchForm, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=1146-48", {
+code_connect.connect(SearchForm, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=2620-122", {
     imports: [
         'import { SearchForm } from "@libs/ui/molecules/search-form"'
     ],
@@ -10,15 +10,19 @@ code_connect.connect(SearchForm, "https://www.figma.com/design/12xb1pqXKwE2vbOBy
             sm: "sm",
             md: "md",
             lg: "lg"
-        })
+        }),
+        gapped: code_connect.boolean("gapped")
     },
-    example: ({ size })=>/*#__PURE__*/ jsxs(SearchForm, {
+    example: ({ size, gapped })=>/*#__PURE__*/ jsx(SearchForm, {
+            gapped: gapped,
             size: size,
-            children: [
-                /*#__PURE__*/ jsx(SearchForm.Input, {
-                    placeholder: "Search..."
-                }),
-                /*#__PURE__*/ jsx(SearchForm.Button, {})
-            ]
+            children: /*#__PURE__*/ jsxs(SearchForm.Control, {
+                children: [
+                    /*#__PURE__*/ jsx(SearchForm.Input, {
+                        placeholder: "Search..."
+                    }),
+                    /*#__PURE__*/ jsx(SearchForm.Button, {})
+                ]
+            })
         })
 });

package/dist/molecules/search-form.js

@@ -1,5 +1,7 @@
 import { jsx } from "react/jsx-runtime";
-import { createContext, useContext, useId, useState } from "react";
+import { createContext, useContext, useEffect, useId, useState } from "react";
+import { createPortal } from "react-dom";
+import { ActionIcon } from "../atoms/action-icon.js";
 import { Button } from "../atoms/button.js";
 import { Input } from "../atoms/input.js";
 import { Label } from "../atoms/label.js";
@@ -10,46 +12,54 @@ const searchFormVariants = tv({
             "relative grid"
         ],
         control: [
-            "relative flex items-center overflow-hidden",
-            "form-control-base",
-            "hover:border-input-border-hover",
-            "focus-within:border-input-border-focus",
-            "focus-within:outline-(style:--default-ring-style) focus-within:outline-(length:--default-ring-width)",
-            "focus-within:outline-input-ring",
-            "focus-within:outline-offset-(length:--default-ring-offset)",
-            "transition-colors duration-200 motion-reduce:transition-none"
+            "flex items-stretch"
+        ],
+        inputWrapper: [
+            "relative min-w-0 flex-1",
+            "focus-within:z-10"
         ],
         input: [
-            "peer",
-            "min-w-0 flex-1",
-            "border-none bg-transparent",
-            "focus-visible:outline-none"
+            "w-full"
         ],
         button: [
-            "h-full shrink-0 items-center rounded-l-none"
+            "relative shrink-0",
+            "focus-visible:z-10"
         ],
         clearButton: [
-            "h-full shrink-0 rounded-none p-search-form-clear-button",
-            "peer-hover:bg-input-hover peer-focus:bg-input-focus"
+            "-translate-y-1/2 absolute top-1/2"
         ]
     },
     variants: {
         size: {
             sm: {
                 root: "gap-search-form-sm",
-                control: "h-form-control-sm rounded-search-form-sm"
+                button: "h-form-control-sm",
+                clearButton: "end-(length:--padding-input-sm)"
             },
             md: {
                 root: "gap-search-form-md",
-                control: "h-form-control-md rounded-search-form-md"
+                button: "h-form-control-md",
+                clearButton: "end-(length:--padding-input-md)"
             },
             lg: {
-                root: "gap-search-form-lg"
+                root: "gap-search-form-lg",
+                button: "h-form-control-lg",
+                clearButton: "end-(length:--padding-input-lg)"
+            }
+        },
+        gapped: {
+            false: {
+                input: "rounded-e-none",
+                button: "rounded-s-none"
+            },
+            true: {
+                control: "gap-search-form-gapped"
             }
         }
     },
     defaultVariants: {
-        size: "md"
+        size: "md",
+        gapped: false
     }
 });
 const SearchFormContext = /*#__PURE__*/ createContext(null);
@@ -58,10 +68,12 @@ function useSearchFormContext() {
     if (!context) throw new Error("SearchForm components must be used within SearchForm");
     return context;
 }
-function SearchForm({ size = "md", children, defaultValue = "", value, onValueChange, className, ref, onSubmit, ...props }) {
+function SearchForm({ size = "md", gapped = false, children, defaultValue = "", value, onValueChange, className, ref, onSubmit, ...props }) {
     const generatedId = useId();
     const inputId = `search-input-${generatedId}`;
     const [internalValue, setInternalValue] = useState(defaultValue);
+    const [clearSlot, setClearSlot] = useState(null);
+    const [hasClearButton, setHasClearButton] = useState(false);
     const isControlled = void 0 !== value;
     const inputValue = isControlled ? value : internalValue;
     const setInputValue = (newValue)=>{
@@ -76,16 +88,22 @@ function SearchForm({ size = "md", children, defaultValue = "", value, onValueCh
         onSubmit?.(e);
     };
     const styles = searchFormVariants({
-        size
+        size,
+        gapped
     });
     return /*#__PURE__*/ jsx(SearchFormContext.Provider, {
         value: {
             size,
+            gapped,
             inputId,
             inputValue,
             setInputValue,
             clearInput,
-            hasValue: inputValue.length > 0
+            hasValue: inputValue.length > 0,
+            clearSlot,
+            setClearSlot,
+            hasClearButton,
+            setHasClearButton
         },
         children: /*#__PURE__*/ jsx("search", {
             children: /*#__PURE__*/ jsx("form", {
@@ -111,9 +129,10 @@ SearchForm.Label = function({ children, className, ...props }) {
     });
 };
 SearchForm.Control = function({ children, className, ref, ...props }) {
-    const { size } = useSearchFormContext();
+    const { size, gapped } = useSearchFormContext();
     const styles = searchFormVariants({
-        size
+        size,
+        gapped
     });
     return /*#__PURE__*/ jsx("div", {
         className: styles.control({
@@ -125,29 +144,36 @@ SearchForm.Control = function({ children, className, ref, ...props }) {
     });
 };
 SearchForm.Input = function({ className, placeholder = "Search...", ref, ...props }) {
-    const { inputId, inputValue, setInputValue, size } = useSearchFormContext();
+    const { inputId, inputValue, setInputValue, size, gapped, hasValue, hasClearButton, setClearSlot } = useSearchFormContext();
     const styles = searchFormVariants({
-        size
+        size,
+        gapped
     });
-    return /*#__PURE__*/ jsx(Input, {
-        "aria-label": props["aria-label"] || "Search",
-        className: styles.input({
-            className
-        }),
-        id: inputId,
-        onChange: (e)=>setInputValue(e.target.value),
-        placeholder: placeholder,
-        ref: ref,
-        size: size,
-        type: "search",
-        value: inputValue,
-        ...props
+    return /*#__PURE__*/ jsx("div", {
+        className: styles.inputWrapper(),
+        ref: setClearSlot,
+        children: /*#__PURE__*/ jsx(Input, {
+            "aria-label": props["aria-label"] || "Search",
+            className: styles.input({
+                className
+            }),
+            id: inputId,
+            onChange: (e)=>setInputValue(e.target.value),
+            placeholder: placeholder,
+            ref: ref,
+            size: size,
+            type: "search",
+            value: inputValue,
+            withButtonInside: hasValue && hasClearButton ? "right" : void 0,
+            ...props
+        })
     });
 };
 SearchForm.Button = function({ className, children, showSearchIcon = false, icon, iconPosition = "right", ...props }) {
-    const { size } = useSearchFormContext();
+    const { size, gapped } = useSearchFormContext();
     const styles = searchFormVariants({
-        size
+        size,
+        gapped
     });
     const effectiveIcon = icon ?? (showSearchIcon ? "token-icon-search" : void 0);
     return /*#__PURE__*/ jsx(Button, {
@@ -162,24 +188,30 @@ SearchForm.Button = function({ className, children, showSearchIcon = false, icon
         children: children
     });
 };
-SearchForm.ClearButton = function({ className, icon = "token-icon-close", theme = "unstyled", ...props }) {
-    const { size, clearInput, hasValue, inputValue } = useSearchFormContext();
+SearchForm.ClearButton = function({ className, icon = "token-icon-close", tone = "neutral", ...props }) {
+    const { size, gapped, clearInput, hasValue, inputValue, clearSlot, setHasClearButton } = useSearchFormContext();
     const styles = searchFormVariants({
-        size
+        size,
+        gapped
     });
-    if (!hasValue) return null;
-    return /*#__PURE__*/ jsx(Button, {
+    useEffect(()=>{
+        setHasClearButton(true);
+        return ()=>setHasClearButton(false);
+    }, [
+        setHasClearButton
+    ]);
+    if (!(hasValue && clearSlot)) return null;
+    return /*#__PURE__*/ createPortal(/*#__PURE__*/ jsx(ActionIcon, {
         "aria-label": `Clear search: ${inputValue}`,
         className: styles.clearButton({
             className
         }),
         icon: icon,
         onClick: clearInput,
-        size: "current",
-        theme: theme,
-        type: "button",
+        size: size,
+        tone: tone,
         ...props
-    });
+    }), clearSlot);
 };
 SearchForm.displayName = "SearchForm";
 export { SearchForm, searchFormVariants, useSearchFormContext };