@techsio/ui-kit 0.0.0

package/dist/molecules/combobox.js

@@ -0,0 +1,253 @@
+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 { 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 { tv } from "../utils.js";
+const comboboxVariants = tv({
+    slots: {
+        root: [
+            'flex flex-col relative w-full'
+        ],
+        label: [
+            'block text-label-md font-label'
+        ],
+        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'
+        ],
+        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'
+        ],
+        clearTrigger: [
+            'absolute right-combobox-clear-right'
+        ],
+        trigger: [
+            'flex items-center justify-center',
+            'p-combobox-trigger',
+            'transition-transform duration-200',
+            'data-[state=open]:rotate-180'
+        ],
+        positioner: [
+            'z-(--z-index) w-full *:overflow-y-auto *:max-h-(--available-height)'
+        ],
+        content: [
+            'flex flex-col overflow-clip',
+            'rounded-combobox shadow-md',
+            'bg-combobox-content-bg',
+            'border border-combobox-border z-(--z-combobox-content)'
+        ],
+        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'
+        ],
+        helper: [
+            'data-[validation=success]:text-combobox-success-fg',
+            'data-[validation=warning]:text-combobox-warning-fg'
+        ],
+        multiple: []
+    },
+    compoundSlots: [
+        {
+            slots: [
+                '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'
+            ]
+        }
+    ],
+    variants: {
+        size: {
+            sm: {
+                root: 'gap-combobox-root-sm',
+                item: 'p-combobox-item-sm',
+                input: 'py-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'
+            },
+            lg: {
+                root: 'gap-combobox-root-lg',
+                item: 'p-combobox-item-lg',
+                input: 'py-combobox-input-lg',
+                content: 'text-combobox-content-lg'
+            }
+        }
+    },
+    defaultVariants: {
+        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 }) {
+    const generatedId = useId();
+    const uniqueId = id || generatedId;
+    const [options, setOptions] = useState(items);
+    useEffect(()=>{
+        setOptions(items);
+    }, [
+        items
+    ]);
+    const collection = combobox_collection({
+        items: options,
+        itemToString: (item)=>item.label,
+        itemToValue: (item)=>item.value,
+        isItemDisabled: (item)=>!!item.disabled
+    });
+    const service = useMachine(machine, {
+        id: uniqueId,
+        name,
+        collection,
+        disabled,
+        readOnly,
+        closeOnSelect,
+        selectionBehavior,
+        allowCustomValue,
+        autoFocus,
+        inputBehavior,
+        loopFocus,
+        ids: {
+            label: `${uniqueId}-label`,
+            input: `${uniqueId}-input`,
+            control: `${uniqueId}-control`
+        },
+        value: value,
+        defaultValue: defaultValue,
+        multiple,
+        inputValue,
+        onValueChange: ({ value: selectedValue })=>{
+            onChange?.(selectedValue);
+        },
+        onInputValueChange: ({ inputValue })=>{
+            const filtered = items.filter((item)=>item.label.toLowerCase().includes(inputValue.toLowerCase()));
+            setOptions(filtered);
+            onInputValueChange?.(inputValue);
+        },
+        onOpenChange: ({ open })=>{
+            setOptions(items);
+            onOpenChange?.(open);
+        }
+    });
+    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({
+        size
+    });
+    return /*#__PURE__*/ jsxs("div", {
+        className: root(),
+        children: [
+            label && /*#__PURE__*/ jsx(Label, {
+                className: labelStyles(),
+                size: size,
+                required: required,
+                ...api.getLabelProps(),
+                children: label
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: control(),
+                ...api.getControlProps(),
+                "data-validation": validationState,
+                children: [
+                    /*#__PURE__*/ jsx(Input, {
+                        className: input(),
+                        ...restInputProps,
+                        placeholder: placeholder,
+                        name: name,
+                        required: required,
+                        size: size
+                    }),
+                    clearable && api.value.length > 0 && /*#__PURE__*/ jsx(Button, {
+                        className: clearTrigger(),
+                        theme: "borderless",
+                        size: size,
+                        ...api.getClearTriggerProps(),
+                        children: /*#__PURE__*/ jsx(Icon, {
+                            icon: 'token-icon-combobox-clear',
+                            size: "current"
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(Button, {
+                        ...api.getTriggerProps(),
+                        theme: "borderless",
+                        size: size,
+                        className: trigger(),
+                        children: /*#__PURE__*/ jsx(Icon, {
+                            icon: "token-icon-combobox-chevron"
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(Portal, {
+                children: /*#__PURE__*/ jsxs("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)
+                        })
+                    ]
+                })
+            }),
+            helper && !error && /*#__PURE__*/ jsx(ExtraText, {
+                "data-validation": validationState,
+                size: size,
+                className: helperSlot(),
+                children: helper
+            }),
+            error && /*#__PURE__*/ jsx(ErrorText, {
+                children: error
+            })
+        ]
+    });
+}
+export { Combobox };

package/dist/molecules/dialog.js

@@ -0,0 +1,313 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+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 { Button } from "../atoms/button.js";
+const dialogVariants = tv({
+    slots: {
+        backdrop: [
+            'inset-0 z-(--z-dialog-backdrop)'
+        ],
+        positioner: [
+            'inset-0 z-(--z-dialog-positioner) flex'
+        ],
+        content: [
+            'relative flex flex-col p-dialog-content gap-dialog-content',
+            'bg-dialog-content-bg text-dialog-content-fg',
+            'border-(length:--border-width-dialog) border-dialog-content-border',
+            'shadow-dialog-content',
+            'overflow-y-auto',
+            'focus-visible:outline-none',
+            'focus-visible:ring',
+            'focus-visible:ring-dialog-ring'
+        ],
+        title: [
+            'text-dialog-title-size font-dialog-title text-dialog-title-fg'
+        ],
+        description: [
+            "text-dialog-description-size text-dialog-description-fg"
+        ],
+        trigger: [],
+        closeTrigger: [
+            'absolute top-dialog-close-trigger-offset right-dialog-close-trigger-offset',
+            'flex items-center justify-center',
+            'p-dialog-close-trigger-padding rounded-dialog-close-trigger',
+            'text-dialog-close-trigger-fg',
+            'focus-visible:outline-none',
+            'focus-visible:ring',
+            'focus-visible:ring-dialog-ring'
+        ],
+        actions: 'mt-auto flex shrink-0 justify-end gap-dialog-actions pt-dialog-actions'
+    },
+    variants: {
+        placement: {
+            center: {
+                positioner: 'items-center justify-center',
+                content: 'max-w-dialog-center-w-max max-h-dialog-center-h-max rounded-dialog-center'
+            },
+            left: {
+                positioner: 'items-stretch justify-start',
+                content: 'h-full rounded-dialog-left border-l-0'
+            },
+            right: {
+                positioner: 'items-stretch justify-end',
+                content: 'h-full rounded-dialog-right border-r-0'
+            },
+            top: {
+                positioner: 'items-start justify-stretch',
+                content: 'w-full rounded-dialog-top border-t-0'
+            },
+            bottom: {
+                positioner: 'items-end justify-stretch',
+                content: 'w-full rounded-dialog-bottom border-b-0'
+            }
+        },
+        position: {
+            fixed: {
+                backdrop: 'fixed',
+                positioner: 'fixed'
+            },
+            absolute: {
+                backdrop: 'absolute',
+                positioner: 'absolute'
+            },
+            sticky: {
+                backdrop: 'sticky',
+                positioner: 'sticky'
+            },
+            relative: {
+                backdrop: 'relative',
+                positioner: 'relative'
+            }
+        },
+        size: {
+            xs: {},
+            sm: {},
+            md: {},
+            lg: {},
+            xl: {},
+            full: {}
+        },
+        behavior: {
+            modal: {
+                backdrop: 'bg-dialog-backdrop-bg'
+            },
+            modeless: {
+                backdrop: 'bg-transparent',
+                positioner: 'pointer-events-none',
+                content: 'pointer-events-auto'
+            }
+        }
+    },
+    compoundVariants: [
+        {
+            placement: [
+                'left',
+                'right'
+            ],
+            size: 'xs',
+            class: {
+                content: 'w-dialog-xs'
+            }
+        },
+        {
+            placement: [
+                'left',
+                'right'
+            ],
+            size: 'sm',
+            class: {
+                content: 'w-dialog-sm'
+            }
+        },
+        {
+            placement: [
+                'left',
+                'right'
+            ],
+            size: 'md',
+            class: {
+                content: 'w-dialog-md'
+            }
+        },
+        {
+            placement: [
+                'left',
+                'right'
+            ],
+            size: 'lg',
+            class: {
+                content: 'w-dialog-lg'
+            }
+        },
+        {
+            placement: [
+                'left',
+                'right'
+            ],
+            size: 'xl',
+            class: {
+                content: 'w-dialog-xl'
+            }
+        },
+        {
+            placement: [
+                'left',
+                'right'
+            ],
+            size: 'full',
+            class: {
+                content: 'w-full'
+            }
+        },
+        {
+            placement: [
+                'top',
+                'bottom'
+            ],
+            size: 'xs',
+            class: {
+                content: 'h-dialog-xs'
+            }
+        },
+        {
+            placement: [
+                'top',
+                'bottom'
+            ],
+            size: 'sm',
+            class: {
+                content: 'h-dialog-sm'
+            }
+        },
+        {
+            placement: [
+                'top',
+                'bottom'
+            ],
+            size: 'md',
+            class: {
+                content: 'h-dialog-md'
+            }
+        },
+        {
+            placement: [
+                'top',
+                'bottom'
+            ],
+            size: 'lg',
+            class: {
+                content: 'h-dialog-lg'
+            }
+        },
+        {
+            placement: [
+                'top',
+                'bottom'
+            ],
+            size: 'xl',
+            class: {
+                content: 'h-dialog-xl'
+            }
+        },
+        {
+            placement: [
+                'top',
+                'bottom'
+            ],
+            size: 'full',
+            class: {
+                content: 'h-full'
+            }
+        }
+    ],
+    defaultVariants: {
+        placement: 'center',
+        behavior: 'modal',
+        size: 'md',
+        position: 'fixed'
+    }
+});
+function Dialog({ id, open, onOpenChange, initialFocusEl, finalFocusEl, role = 'dialog', placement = 'center', position = 'fixed', size = 'md', behavior = 'modal', closeOnEscape = true, closeOnInteractOutside = true, preventScroll = true, trapFocus = true, customTrigger = false, triggerText = 'Open', title, description, children, hideCloseButton = false, actions, className, modal = true, portal = true }) {
+    const generatedId = useId();
+    const uniqueId = id || generatedId;
+    const service = useMachine(machine, {
+        id: uniqueId,
+        onOpenChange,
+        role,
+        closeOnEscape,
+        closeOnInteractOutside,
+        preventScroll,
+        trapFocus,
+        initialFocusEl,
+        finalFocusEl,
+        modal,
+        ...void 0 !== open && {
+            open
+        }
+    });
+    const api = connect(service, normalizeProps);
+    const { backdrop, positioner, content, trigger: triggerSlot, title: titleSlot, description: descriptionSlot, closeTrigger, actions: actionsSlot } = dialogVariants({
+        placement,
+        size,
+        behavior,
+        position
+    });
+    const dialogContent = ()=>/*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                /*#__PURE__*/ jsx("div", {
+                    className: backdrop(),
+                    ...api.getBackdropProps()
+                }),
+                /*#__PURE__*/ jsx("div", {
+                    className: positioner(),
+                    ...api.getPositionerProps(),
+                    children: /*#__PURE__*/ jsxs("div", {
+                        className: content({
+                            className
+                        }),
+                        ...api.getContentProps(),
+                        children: [
+                            !hideCloseButton && /*#__PURE__*/ jsx(Button, {
+                                theme: "borderless",
+                                className: closeTrigger(),
+                                ...api.getCloseTriggerProps(),
+                                icon: "token-icon-dialog-close"
+                            }),
+                            title && /*#__PURE__*/ jsx("h2", {
+                                className: titleSlot(),
+                                ...api.getTitleProps(),
+                                children: title
+                            }),
+                            description && /*#__PURE__*/ jsx("div", {
+                                className: descriptionSlot(),
+                                ...api.getDescriptionProps(),
+                                children: description
+                            }),
+                            children,
+                            actions && /*#__PURE__*/ jsx("div", {
+                                className: actionsSlot(),
+                                children: actions
+                            })
+                        ]
+                    })
+                })
+            ]
+        });
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            !customTrigger && /*#__PURE__*/ jsx(Button, {
+                size: "sm",
+                variant: "primary",
+                className: triggerSlot(),
+                ...api.getTriggerProps(),
+                children: triggerText
+            }),
+            api.open && (portal ? /*#__PURE__*/ jsx(Portal, {
+                children: dialogContent()
+            }) : dialogContent())
+        ]
+    });
+}
+export { Dialog };

package/dist/molecules/form-checkbox.js

@@ -0,0 +1,59 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ErrorText } from "../atoms/error-text.js";
+import { ExtraText } from "../atoms/extra-text.js";
+import { Label } from "../atoms/label.js";
+import { Checkbox } from "./checkbox.js";
+function FormCheckboxRaw({ id, label, validateStatus = 'default', helpText, extraText, size = 'md', required, disabled, ...props }) {
+    const extraTextId = extraText ? `${id}-extra` : void 0;
+    return /*#__PURE__*/ jsxs("div", {
+        className: "flex gap-150",
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: "mt-2 flex items-start",
+                children: /*#__PURE__*/ jsx(Checkbox, {
+                    id: id,
+                    required: required,
+                    disabled: disabled,
+                    ...props
+                })
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: "flex flex-col",
+                children: [
+                    /*#__PURE__*/ jsx(Label, {
+                        htmlFor: id,
+                        size: size,
+                        required: required,
+                        disabled: disabled,
+                        children: label
+                    }),
+                    helpText,
+                    extraText && /*#__PURE__*/ jsx(ExtraText, {
+                        id: extraTextId,
+                        size: size,
+                        children: extraText
+                    })
+                ]
+            })
+        ]
+    });
+}
+function FormCheckbox({ helpText, id, validateStatus, size, ...props }) {
+    const helpTextId = helpText ? `${id}-helper` : void 0;
+    return /*#__PURE__*/ jsx(FormCheckboxRaw, {
+        id: id,
+        size: size,
+        validateStatus: validateStatus,
+        helpText: 'error' === validateStatus ? /*#__PURE__*/ jsx(ErrorText, {
+            id: helpTextId,
+            size: size,
+            children: helpText
+        }) : helpText ?? /*#__PURE__*/ jsx(ExtraText, {
+            id: helpTextId,
+            size: size,
+            children: helpText
+        }),
+        ...props
+    });
+}
+export { FormCheckbox, FormCheckboxRaw };

package/dist/molecules/form-input.js

@@ -0,0 +1,55 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ErrorText } from "../atoms/error-text.js";
+import { ExtraText } from "../atoms/extra-text.js";
+import { Input } from "../atoms/input.js";
+import { Label } from "../atoms/label.js";
+function FormInputRaw({ id, label, validateStatus = 'default', helpText, extraText, size = 'md', required, disabled, ...props }) {
+    const extraTextId = extraText ? `${id}-extra` : void 0;
+    return /*#__PURE__*/ jsxs("div", {
+        className: "flex flex-col gap-1",
+        children: [
+            /*#__PURE__*/ jsx(Label, {
+                htmlFor: id,
+                size: size,
+                required: required,
+                disabled: disabled,
+                children: label
+            }),
+            /*#__PURE__*/ jsx(Input, {
+                id: id,
+                size: size,
+                required: required,
+                variant: validateStatus,
+                disabled: disabled,
+                ...props,
+                className: "p-input-sm md:p-input-md"
+            }),
+            helpText,
+            extraText && /*#__PURE__*/ jsx(ExtraText, {
+                id: extraTextId,
+                size: size,
+                children: extraText
+            })
+        ]
+    });
+}
+function FormInput({ helpText, id, validateStatus, size, ...props }) {
+    const helpTextId = helpText ? `${id}-helper` : void 0;
+    return /*#__PURE__*/ jsx(FormInputRaw, {
+        id: id,
+        size: size,
+        validateStatus: validateStatus,
+        helpText: 'error' === validateStatus ? /*#__PURE__*/ jsx(ErrorText, {
+            id: helpTextId,
+            size: size,
+            showIcon: true,
+            children: helpText
+        }) : /*#__PURE__*/ jsx(ExtraText, {
+            id: helpTextId,
+            size: size,
+            children: helpText
+        }),
+        ...props
+    });
+}
+export { FormInput, FormInputRaw };