@techsio/ui-kit 0.3.2 → 0.4.0

package/dist/molecules/radio-group.js

@@ -0,0 +1,341 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { connect, machine } from "@zag-js/radio-group";
+import { normalizeProps, useMachine } from "@zag-js/react";
+import { createContext, useContext, useId } from "react";
+import { Label } from "../atoms/label.js";
+import { StatusText } from "../atoms/status-text.js";
+import { tv } from "../utils.js";
+const radioGroupVariants = tv({
+    slots: {
+        root: [
+            "flex w-full flex-col"
+        ],
+        itemGroup: [
+            "relative flex",
+            "data-[orientation=horizontal]:flex-row",
+            "data-[orientation=horizontal]:flex-wrap",
+            "data-[orientation=vertical]:flex-col"
+        ],
+        item: [
+            "grid grid-cols-(--radio-group-item-grid) items-start",
+            "cursor-pointer select-none",
+            "data-disabled:cursor-not-allowed",
+            "data-readonly:cursor-default"
+        ],
+        itemControl: [
+            "row-start-1 self-center",
+            "inline-grid shrink-0 place-items-center rounded-radio-group-control",
+            "border-(length:--border-width-radio-group)",
+            "border-radio-group-item-control-border",
+            "bg-radio-group-item-control-bg",
+            "transition-colors duration-200 motion-reduce:transition-none",
+            "data-hover:bg-radio-group-item-control-bg-hover",
+            "data-hover:border-radio-group-item-control-border-hover",
+            "data-disabled:bg-radio-group-item-control-bg-disabled",
+            "data-disabled:border-radio-group-item-control-border-disabled",
+            "data-focus-visible:outline-(style:--default-ring-style)",
+            "data-focus-visible:outline-(length:--default-ring-width)",
+            "data-focus-visible:outline-radio-group-ring",
+            "data-focus-visible:outline-offset-(length:--default-ring-offset)",
+            "data-invalid:border-radio-group-item-control-border-error",
+            "data-invalid:outline-offset-(length:--default-ring-offset)"
+        ],
+        itemContent: [
+            "col-start-2 row-start-1 min-w-0 flex flex-col"
+        ],
+        itemIndicator: [
+            "pointer-events-none block leading-none",
+            "token-icon-radio-group-checked",
+            "opacity-0 transition-opacity duration-200 motion-reduce:transition-none",
+            "data-[state=checked]:opacity-100",
+            "data-disabled:data-[state=checked]:text-radio-group-item-indicator-disabled"
+        ],
+        itemText: [
+            "min-w-0 text-radio-group-item-fg leading-normal",
+            "data-disabled:text-radio-group-item-fg-disabled"
+        ],
+        itemDescription: [
+            "col-start-2 row-start-2 min-w-0 text-radio-group-item-description leading-normal",
+            "data-disabled:text-radio-group-item-description-disabled"
+        ],
+        hiddenInput: "sr-only"
+    },
+    variants: {
+        variant: {
+            outline: {
+                itemControl: [
+                    "data-[state=checked]:bg-radio-group-item-control-bg-outline-checked",
+                    "data-[state=checked]:border-radio-group-item-control-border-outline-checked",
+                    "data-hover:data-[state=checked]:bg-radio-group-item-control-bg-outline-checked-hover",
+                    "data-hover:data-[state=checked]:border-radio-group-item-control-border-outline-checked-hover"
+                ],
+                itemIndicator: "text-radio-group-item-indicator-outline"
+            },
+            subtle: {
+                itemControl: [
+                    "data-[state=checked]:bg-radio-group-item-control-bg-subtle-checked",
+                    "data-[state=checked]:border-radio-group-item-control-border-subtle-checked",
+                    "data-hover:data-[state=checked]:bg-radio-group-item-control-bg-subtle-checked-hover",
+                    "data-hover:data-[state=checked]:border-radio-group-item-control-border-subtle-checked-hover"
+                ],
+                itemIndicator: "text-radio-group-item-indicator-subtle"
+            },
+            solid: {
+                itemControl: [
+                    "data-[state=checked]:bg-radio-group-item-control-bg-solid-checked",
+                    "data-[state=checked]:border-radio-group-item-control-border-solid-checked",
+                    "data-hover:data-[state=checked]:bg-radio-group-item-control-bg-solid-checked-hover",
+                    "data-hover:data-[state=checked]:border-radio-group-item-control-border-solid-checked-hover"
+                ],
+                itemIndicator: "text-radio-group-item-indicator-solid"
+            }
+        },
+        size: {
+            sm: {
+                root: "gap-radio-group-root-sm",
+                itemGroup: "data-[orientation=horizontal]:gap-radio-group-items-horizontal-sm data-[orientation=vertical]:gap-radio-group-items-vertical-sm",
+                item: "gap-x-radio-group-item-sm",
+                itemControl: "size-radio-group-control-sm",
+                itemContent: "gap-radio-group-item-content-sm",
+                itemIndicator: "size-radio-group-indicator-sm",
+                itemText: "text-radio-group-item-sm",
+                itemDescription: "text-radio-group-item-description-sm"
+            },
+            md: {
+                root: "gap-radio-group-root-md",
+                itemGroup: "data-[orientation=horizontal]:gap-radio-group-items-horizontal-md data-[orientation=vertical]:gap-radio-group-items-vertical-md",
+                item: "gap-x-radio-group-item-md",
+                itemControl: "size-radio-group-control-md",
+                itemContent: "gap-radio-group-item-content-md",
+                itemIndicator: "size-radio-group-indicator-md",
+                itemText: "text-radio-group-item-md",
+                itemDescription: "text-radio-group-item-description-md"
+            },
+            lg: {
+                root: "gap-radio-group-root-lg",
+                itemGroup: "data-[orientation=horizontal]:gap-radio-group-items-horizontal-lg data-[orientation=vertical]:gap-radio-group-items-vertical-lg",
+                item: "gap-x-radio-group-item-lg",
+                itemControl: "size-radio-group-control-lg",
+                itemContent: "gap-radio-group-item-content-lg",
+                itemIndicator: "size-radio-group-indicator-lg",
+                itemText: "text-radio-group-item-lg",
+                itemDescription: "text-radio-group-item-description-lg"
+            }
+        }
+    },
+    defaultVariants: {
+        variant: "outline",
+        size: "md"
+    }
+});
+const RadioGroupContext = /*#__PURE__*/ createContext(null);
+function useRadioGroupContext() {
+    const context = useContext(RadioGroupContext);
+    if (!context) throw new Error("RadioGroup components must be used within RadioGroup");
+    return context;
+}
+const RadioGroupItemContext = /*#__PURE__*/ createContext(null);
+function useRadioGroupItemContext() {
+    const context = useContext(RadioGroupItemContext);
+    if (!context) throw new Error("RadioGroup item components must be used within RadioGroup.Item");
+    return context;
+}
+function RadioGroup({ id: providedId, disabled = false, required = false, orientation = "vertical", validateStatus = "default", onValueChange, variant = "outline", size = "md", children, className, ref, ...machineProps }) {
+    const generatedId = useId();
+    const id = providedId || generatedId;
+    const invalid = "error" === validateStatus;
+    const service = useMachine(machine, {
+        ...machineProps,
+        id,
+        disabled,
+        required,
+        orientation,
+        invalid,
+        onValueChange: ({ value: nextValue })=>{
+            onValueChange?.(nextValue);
+        }
+    });
+    const api = connect(service, normalizeProps);
+    const styles = radioGroupVariants({
+        size,
+        variant
+    });
+    return /*#__PURE__*/ jsx(RadioGroupContext.Provider, {
+        value: {
+            api,
+            variant,
+            size,
+            orientation,
+            disabled,
+            required,
+            validateStatus
+        },
+        children: /*#__PURE__*/ jsx("div", {
+            className: styles.root({
+                className
+            }),
+            ref: ref,
+            ...api.getRootProps(),
+            children: children
+        })
+    });
+}
+RadioGroup.Label = function({ children, disabled, required, size: sizeProp, ...props }) {
+    const { api, size, disabled: groupDisabled, required: groupRequired } = useRadioGroupContext();
+    return /*#__PURE__*/ jsx(Label, {
+        disabled: disabled ?? groupDisabled,
+        required: required ?? groupRequired,
+        size: sizeProp ?? size,
+        ...api.getLabelProps(),
+        ...props,
+        children: children
+    });
+};
+RadioGroup.ItemGroup = function({ children, className, ref, ...props }) {
+    const { size, variant, orientation } = useRadioGroupContext();
+    const styles = radioGroupVariants({
+        size,
+        variant
+    });
+    return /*#__PURE__*/ jsx("div", {
+        className: styles.itemGroup({
+            className
+        }),
+        "data-orientation": orientation,
+        ref: ref,
+        ...props,
+        children: children
+    });
+};
+RadioGroup.Item = function({ value, disabled, invalid, children, className, ref, ...props }) {
+    const { api, size, variant } = useRadioGroupContext();
+    const styles = radioGroupVariants({
+        size,
+        variant
+    });
+    const itemProps = {
+        value,
+        disabled,
+        invalid
+    };
+    return /*#__PURE__*/ jsx(RadioGroupItemContext.Provider, {
+        value: {
+            itemProps
+        },
+        children: /*#__PURE__*/ jsx("label", {
+            className: styles.item({
+                className
+            }),
+            ref: ref,
+            ...api.getItemProps(itemProps),
+            ...props,
+            children: children
+        })
+    });
+};
+RadioGroup.ItemHiddenInput = function({ className, ref, ...props }) {
+    const { api, size, variant } = useRadioGroupContext();
+    const { itemProps } = useRadioGroupItemContext();
+    const styles = radioGroupVariants({
+        size,
+        variant
+    });
+    return /*#__PURE__*/ jsx("input", {
+        className: styles.hiddenInput({
+            className
+        }),
+        ref: ref,
+        ...api.getItemHiddenInputProps(itemProps),
+        ...props
+    });
+};
+RadioGroup.ItemControl = function({ children, className, ref, ...props }) {
+    const { api, size, variant } = useRadioGroupContext();
+    const { itemProps } = useRadioGroupItemContext();
+    const styles = radioGroupVariants({
+        size,
+        variant
+    });
+    const itemState = api.getItemState(itemProps);
+    return /*#__PURE__*/ jsxs("span", {
+        className: styles.itemControl({
+            className
+        }),
+        ref: ref,
+        ...api.getItemControlProps(itemProps),
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx("span", {
+                "aria-hidden": "true",
+                className: styles.itemIndicator(),
+                "data-disabled": itemState.disabled || void 0,
+                "data-state": itemState.checked ? "checked" : "unchecked"
+            }),
+            children
+        ]
+    });
+};
+RadioGroup.ItemContent = function({ children, className, ref, ...props }) {
+    const { size, variant } = useRadioGroupContext();
+    const styles = radioGroupVariants({
+        size,
+        variant
+    });
+    return /*#__PURE__*/ jsx("div", {
+        className: styles.itemContent({
+            className
+        }),
+        ref: ref,
+        ...props,
+        children: children
+    });
+};
+RadioGroup.ItemText = function({ children, className, ref, ...props }) {
+    const { api, size, variant } = useRadioGroupContext();
+    const { itemProps } = useRadioGroupItemContext();
+    const styles = radioGroupVariants({
+        size,
+        variant
+    });
+    return /*#__PURE__*/ jsx("span", {
+        className: styles.itemText({
+            className
+        }),
+        ref: ref,
+        ...api.getItemTextProps(itemProps),
+        ...props,
+        children: children
+    });
+};
+RadioGroup.ItemDescription = function({ children, className, ref, ...props }) {
+    const { api, size, variant } = useRadioGroupContext();
+    const { itemProps } = useRadioGroupItemContext();
+    const styles = radioGroupVariants({
+        size,
+        variant
+    });
+    const itemState = api.getItemState(itemProps);
+    return /*#__PURE__*/ jsx("div", {
+        className: styles.itemDescription({
+            className
+        }),
+        "data-disabled": itemState.disabled || void 0,
+        ref: ref,
+        ...props,
+        children: children
+    });
+};
+RadioGroup.StatusText = function({ status, size: sizeProp, showIcon, children, ...props }) {
+    const { size, validateStatus } = useRadioGroupContext();
+    const effectiveSize = sizeProp ?? size;
+    const effectiveStatus = status ?? validateStatus;
+    return /*#__PURE__*/ jsx(StatusText, {
+        showIcon: showIcon ?? "default" !== effectiveStatus,
+        size: effectiveSize,
+        status: effectiveStatus,
+        ...props,
+        children: children
+    });
+};
+RadioGroup.displayName = "RadioGroup";
+export { RadioGroup, radioGroupVariants, useRadioGroupContext };

package/dist/molecules/search-form.js

@@ -1,106 +1,185 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useId } from "react";
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext, useId, useState } from "react";
 import { Button } from "../atoms/button.js";
-import { Icon } from "../atoms/icon.js";
 import { Input } from "../atoms/input.js";
 import { Label } from "../atoms/label.js";
 import { tv } from "../utils.js";
-const iconSizeMap = {
-    sm: 'lg',
-    md: 'xl',
-    lg: '2xl'
-};
-const formVariants = tv({
-    base: [
-        'grid relative'
-    ],
+const searchFormVariants = tv({
+    slots: {
+        root: [
+            "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"
+        ],
+        input: [
+            "peer",
+            "min-w-0 flex-1",
+            "border-none bg-transparent",
+            "focus-visible:outline-none"
+        ],
+        button: [
+            "h-full shrink-0 items-center rounded-l-none"
+        ],
+        clearButton: [
+            "h-full shrink-0 rounded-none p-search-form-clear-button",
+            "peer-hover:bg-input-hover peer-focus:bg-input-focus"
+        ]
+    },
     variants: {
         size: {
-            sm: 'gap-search-form-sm',
-            md: 'gap-search-form-md',
-            lg: 'gap-search-form-lg'
+            sm: {
+                root: "gap-search-form-sm",
+                control: "h-form-control-sm rounded-search-form-sm"
+            },
+            md: {
+                root: "gap-search-form-md",
+                control: "h-form-control-md rounded-search-form-md"
+            },
+            lg: {
+                root: "gap-search-form-lg"
+            }
         }
     },
     defaultVariants: {
-        size: 'md'
-    }
-});
-const inputWrapperVariants = tv({
-    base: [
-        'grid relative overflow-hidden rounded-md'
-    ],
-    variants: {
-        size: {
-            sm: 'gap-search-form-sm',
-            md: 'gap-search-form-md',
-            lg: 'gap-search-form-lg'
-        }
+        size: "md"
     }
 });
-const buttonVariants = tv({
-    base: [
-        'absolute',
-        'justify-self-end place-self-center',
-        'h-full rounded-none p-200'
-    ]
-});
-function SearchForm({ inputProps, buttonProps, size = 'md', buttonText, buttonIcon = false, placeholder = 'Search...', label, className, ref, searchId, ...props }) {
-    const fallbackId = useId();
-    const id = searchId || `search-${fallbackId}`;
-    const withButton = !!buttonText || buttonIcon;
-    const iconSize = iconSizeMap[size] || 'lg';
-    return /*#__PURE__*/ jsx("search", {
-        children: /*#__PURE__*/ jsxs("form", {
-            ref: ref,
-            className: formVariants({
-                size,
-                className
-            }),
-            onSubmit: props.onSubmit,
-            ...props,
-            children: [
-                label && /*#__PURE__*/ jsx(Label, {
-                    htmlFor: id,
-                    size: size,
-                    children: label
+const SearchFormContext = /*#__PURE__*/ createContext(null);
+function useSearchFormContext() {
+    const context = useContext(SearchFormContext);
+    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 }) {
+    const generatedId = useId();
+    const inputId = `search-input-${generatedId}`;
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const isControlled = void 0 !== value;
+    const inputValue = isControlled ? value : internalValue;
+    const setInputValue = (newValue)=>{
+        if (!isControlled) setInternalValue(newValue);
+        onValueChange?.(newValue);
+    };
+    const clearInput = ()=>{
+        setInputValue("");
+    };
+    const handleSubmit = (e)=>{
+        e.preventDefault();
+        onSubmit?.(e);
+    };
+    const styles = searchFormVariants({
+        size
+    });
+    return /*#__PURE__*/ jsx(SearchFormContext.Provider, {
+        value: {
+            size,
+            inputId,
+            inputValue,
+            setInputValue,
+            clearInput,
+            hasValue: inputValue.length > 0
+        },
+        children: /*#__PURE__*/ jsx("search", {
+            children: /*#__PURE__*/ jsx("form", {
+                className: styles.root({
+                    className
                 }),
-                /*#__PURE__*/ jsxs("div", {
-                    className: inputWrapperVariants({
-                        size
-                    }),
-                    children: [
-                        /*#__PURE__*/ jsx(Input, {
-                            id: id,
-                            type: "search",
-                            withButtonInside: withButton && 'right',
-                            placeholder: placeholder,
-                            size: size,
-                            "aria-label": label ? void 0 : 'Search',
-                            ...inputProps
-                        }),
-                        withButton && /*#__PURE__*/ jsxs(Button, {
-                            type: "submit",
-                            theme: buttonProps?.theme || 'borderless',
-                            block: false,
-                            size: size,
-                            "aria-label": buttonText ? void 0 : 'Search',
-                            className: buttonVariants({
-                                className: buttonText ? '' : 'aspect-square'
-                            }),
-                            ...buttonProps,
-                            children: [
-                                buttonText,
-                                buttonIcon && /*#__PURE__*/ jsx(Icon, {
-                                    icon: 'token-icon-search',
-                                    size: iconSize
-                                })
-                            ]
-                        })
-                    ]
-                })
-            ]
+                onSubmit: handleSubmit,
+                ref: ref,
+                ...props,
+                children: children
+            })
         })
     });
 }
-SearchForm.displayName = 'SearchForm';
-export { SearchForm };
+SearchForm.Label = function({ children, className, ...props }) {
+    const { inputId, size } = useSearchFormContext();
+    return /*#__PURE__*/ jsx(Label, {
+        className: className,
+        htmlFor: inputId,
+        size: size,
+        ...props,
+        children: children
+    });
+};
+SearchForm.Control = function({ children, className, ref, ...props }) {
+    const { size } = useSearchFormContext();
+    const styles = searchFormVariants({
+        size
+    });
+    return /*#__PURE__*/ jsx("div", {
+        className: styles.control({
+            className
+        }),
+        ref: ref,
+        ...props,
+        children: children
+    });
+};
+SearchForm.Input = function({ className, placeholder = "Search...", ref, ...props }) {
+    const { inputId, inputValue, setInputValue, size } = useSearchFormContext();
+    const styles = searchFormVariants({
+        size
+    });
+    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
+    });
+};
+SearchForm.Button = function({ className, children, showSearchIcon = false, icon, iconPosition = "right", ...props }) {
+    const { size } = useSearchFormContext();
+    const styles = searchFormVariants({
+        size
+    });
+    const effectiveIcon = icon ?? (showSearchIcon ? "token-icon-search" : void 0);
+    return /*#__PURE__*/ jsx(Button, {
+        className: styles.button({
+            className
+        }),
+        icon: effectiveIcon,
+        iconPosition: iconPosition,
+        size: size,
+        type: "submit",
+        ...props,
+        children: children
+    });
+};
+SearchForm.ClearButton = function({ className, icon = "token-icon-close", theme = "unstyled", ...props }) {
+    const { size, clearInput, hasValue, inputValue } = useSearchFormContext();
+    const styles = searchFormVariants({
+        size
+    });
+    if (!hasValue) return null;
+    return /*#__PURE__*/ jsx(Button, {
+        "aria-label": `Clear search: ${inputValue}`,
+        className: styles.clearButton({
+            className
+        }),
+        icon: icon,
+        onClick: clearInput,
+        size: "current",
+        theme: theme,
+        type: "button",
+        ...props
+    });
+};
+SearchForm.displayName = "SearchForm";
+export { SearchForm, searchFormVariants, useSearchFormContext };