@techsio/ui-kit 0.0.0

package/dist/atoms/input.js

@@ -0,0 +1,83 @@
+import { jsx } from "react/jsx-runtime";
+import { tv } from "../utils.js";
+const inputVariants = tv({
+    base: [
+        'block w-full',
+        'bg-input',
+        'text-input-fg',
+        'placeholder:text-input-placeholder',
+        'border border-input-border',
+        'rounded-input',
+        'transition-all duration-200',
+        'hover:bg-input-hover hover:border-input-border-hover',
+        'focus:outline-none focus:bg-input-focus focus:border-input-border-focus',
+        'focus-visible:ring',
+        'focus-visible:ring-input-ring',
+        'disabled:pointer-events-none'
+    ],
+    variants: {
+        size: {
+            sm: 'p-input-sm text-input-sm',
+            md: 'p-input-md text-input-md',
+            lg: 'p-input-lg text-input-lg'
+        },
+        variant: {
+            default: '',
+            error: [
+                'border-input-border-danger',
+                'hover:border-input-border-danger-hover',
+                'focus:border-input-border-danger-focus',
+                'placeholder:text-input-placeholder-danger'
+            ],
+            success: [
+                'border-input-border-success',
+                'hover:border-input-border-success-hover',
+                'focus:border-input-border-success-focus',
+                'placeholder:text-input-placeholder-success'
+            ],
+            warning: [
+                'border-input-border-warning',
+                'hover:border-input-border-warning-hover',
+                'focus:border-input-border-warning-focus',
+                'placeholder:text-input-placeholder-warning'
+            ]
+        },
+        withButtonInside: {
+            false: '',
+            right: 'pe-with-button',
+            left: 'ps-with-button'
+        },
+        hideSearchClear: {
+            true: '[&::-webkit-search-cancel-button]:hidden [&::-ms-clear]:hidden'
+        },
+        disabled: {
+            true: [
+                'bg-input-disabled',
+                'border-input-border-disabled',
+                'text-input-fg-disabled',
+                'placeholder:text-input-placeholder-disabled'
+            ]
+        }
+    },
+    defaultVariants: {
+        size: 'md',
+        variant: 'default',
+        hideSearchClear: true,
+        withIconInside: false
+    }
+});
+function Input({ size, variant, disabled, ref, withButtonInside, className, ...props }) {
+    return /*#__PURE__*/ jsx("input", {
+        className: inputVariants({
+            size,
+            variant,
+            disabled,
+            withButtonInside,
+            className
+        }),
+        disabled: disabled,
+        ref: ref,
+        ...props
+    });
+}
+export { Input };

package/dist/atoms/label.js

@@ -0,0 +1,43 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { tv } from "../utils.js";
+const labelVariants = tv({
+    base: [
+        'block',
+        'text-label-fg',
+        'font-label'
+    ],
+    variants: {
+        size: {
+            sm: 'text-label-sm',
+            md: 'text-label-md',
+            lg: 'text-label-lg',
+            current: ''
+        },
+        disabled: {
+            true: 'text-label-disabled'
+        }
+    },
+    defaultVariants: {
+        size: 'current',
+        disabled: false
+    }
+});
+function Label({ size, disabled, required, children, className, ...props }) {
+    return /*#__PURE__*/ jsxs("label", {
+        className: labelVariants({
+            size,
+            disabled,
+            className
+        }),
+        ...props,
+        htmlFor: props.htmlFor,
+        children: [
+            children,
+            required && /*#__PURE__*/ jsx("span", {
+                className: "ms-1 text-label-required",
+                children: "*"
+            })
+        ]
+    });
+}
+export { Label };

package/dist/atoms/link-button.js

@@ -0,0 +1,51 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { tv } from "../utils.js";
+import { buttonVariants } from "./button.js";
+import { Icon } from "./icon.js";
+import { Link } from "./link.js";
+const linkButton = tv({
+    extend: buttonVariants,
+    base: 'cursor-pointer',
+    variants: {
+        size: {
+            current: ''
+        }
+    },
+    defaultVariants: {
+        size: 'current'
+    }
+});
+function LinkButton({ href, icon, as, iconPosition = 'left', children, variant, theme, size, block, uppercase, className, disabled, ref, ...props }) {
+    return /*#__PURE__*/ jsxs(Link, {
+        ref: ref,
+        as: as,
+        className: linkButton({
+            variant,
+            theme,
+            size,
+            block,
+            uppercase,
+            className
+        }),
+        href: disabled ? void 0 : href,
+        tabIndex: disabled ? -1 : 0,
+        "aria-disabled": disabled,
+        "data-disabled": disabled || void 0,
+        onClick: (e)=>{
+            if (disabled) e.preventDefault();
+        },
+        ...props,
+        children: [
+            icon && 'left' === iconPosition && /*#__PURE__*/ jsx(Icon, {
+                icon: icon,
+                size: size
+            }),
+            children,
+            icon && 'right' === iconPosition && /*#__PURE__*/ jsx(Icon, {
+                icon: icon,
+                size: size
+            })
+        ]
+    });
+}
+export { LinkButton };

package/dist/atoms/link.js

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import { tv } from "../utils.js";
+const linkVariants = tv({
+    base: [],
+    variants: {},
+    defaultVariants: {}
+});
+function Link({ as, children, external = false, className, ...props }) {
+    const Component = as || 'a';
+    const externalProps = external && (!as || 'a' === as) ? {
+        target: '_blank',
+        rel: 'noopener noreferrer'
+    } : {};
+    return /*#__PURE__*/ jsx(Component, {
+        className: linkVariants({
+            className
+        }),
+        ...externalProps,
+        ...props,
+        children: children
+    });
+}
+export { Link };

package/dist/atoms/numeric-input.js

@@ -0,0 +1,221 @@
+import { jsx } from "react/jsx-runtime";
+import { connect, machine } from "@zag-js/number-input";
+import { normalizeProps, useMachine } from "@zag-js/react";
+import { createContext, useContext, useId } from "react";
+import { tv } from "../utils.js";
+import { Button } from "./button.js";
+import { Input } from "./input.js";
+const numericInputVariants = tv({
+    slots: {
+        root: [
+            'flex relative'
+        ],
+        container: [
+            'group flex relative border-(length:--border-width-numeric-input)',
+            'border-numeric-input-border rounded-numeric-input overflow-hidden items-center',
+            'data-[invalid]:bg-numeric-input-invalid-bg',
+            'data-[invalid]:border-numeric-input-invalid-border',
+            'text-numeric-input-fg',
+            'has-[input:hover]:bg-numeric-input-input-bg-hover',
+            'has-[input:focus]:bg-numeric-input-input-bg-focus',
+            'focus-within:ring',
+            'focus-within:ring-numeric-input-ring'
+        ],
+        input: [
+            'p-numeric-input-input border-none',
+            'bg-numeric-input-input-bg',
+            'focus:bg-numeric-input-input-bg-focus',
+            'hover:bg-numeric-input-input-bg-hover',
+            'focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0',
+            'data-[invalid]:focus:border-input-border-danger-focus duration-0'
+        ],
+        triggerContainer: [
+            'flex flex-col h-fit justify-center bg-numeric-input-trigger-container-bg'
+        ],
+        trigger: [
+            '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',
+            'cursor-pointer'
+        ],
+        scrubber: 'absolute inset-0 cursor-ew-resize'
+    },
+    variants: {
+        size: {
+            sm: {
+                root: 'text-numeric-input-sm',
+                trigger: 'text-numeric-input-sm',
+                input: 'text-numeric-input-sm'
+            },
+            md: {
+                root: 'text-numeric-input-md',
+                trigger: 'text-numeric-input-md',
+                input: 'text-numeric-input-md'
+            },
+            lg: {
+                root: 'text-numeric-input-lg',
+                trigger: 'text-numeric-input-lg',
+                input: 'text-numeric-input-lg'
+            }
+        }
+    },
+    defaultVariants: {
+        size: 'md'
+    }
+});
+const NumericInputContext = /*#__PURE__*/ createContext(null);
+function useNumericInputContext() {
+    const context = useContext(NumericInputContext);
+    if (!context) throw new Error('NumericInput components must be used within NumericInput.Root');
+    return context;
+}
+function NumericInput({ id, name, size, disabled = false, required = false, pattern, readOnly, inputMode, value, defaultValue, onChange, dir = 'ltr', describedBy, min, max, step = 1, precision, allowMouseWheel = true, allowOverflow, clampValueOnBlur = true, spinOnPress = true, formatOptions, invalid, children, ref, className, ...props }) {
+    const generatedId = useId();
+    const uniqueId = id || generatedId;
+    const stringValue = void 0 !== value ? String(value) : void 0;
+    const stringDefaultValue = void 0 !== defaultValue ? String(defaultValue) : void 0;
+    const service = useMachine(machine, {
+        id: uniqueId,
+        min,
+        max,
+        step,
+        name,
+        disabled,
+        required,
+        pattern,
+        readOnly,
+        inputMode,
+        dir,
+        invalid,
+        value: stringValue,
+        defaultValue: stringDefaultValue,
+        allowMouseWheel,
+        allowOverflow,
+        clampValueOnBlur,
+        spinOnPress,
+        formatOptions: precision ? {
+            maximumFractionDigits: precision
+        } : formatOptions,
+        onValueChange: (details)=>{
+            onChange?.(details.valueAsNumber);
+        },
+        focusInputOnChange: true
+    });
+    const api = connect(service, normalizeProps);
+    const styles = numericInputVariants({
+        size
+    });
+    return /*#__PURE__*/ jsx(NumericInputContext.Provider, {
+        value: {
+            api,
+            size,
+            styles,
+            invalid,
+            describedBy
+        },
+        children: /*#__PURE__*/ jsx("div", {
+            ref: ref,
+            className: styles.root({
+                className
+            }),
+            ...api.getRootProps(),
+            ...props,
+            children: children
+        })
+    });
+}
+NumericInput.Control = function({ children, ref, className, ...props }) {
+    const { api, styles, invalid } = useNumericInputContext();
+    return /*#__PURE__*/ jsx("div", {
+        ref: ref,
+        className: styles.container({
+            className
+        }),
+        ...api.getControlProps(),
+        ...props,
+        "data-invalid": invalid || void 0,
+        children: children
+    });
+};
+NumericInput.Input = function({ ref, className, ...props }) {
+    const { api, styles, describedBy } = useNumericInputContext();
+    const ariaDescribedBy = [
+        props['aria-describedby'],
+        describedBy
+    ].filter(Boolean).join(' ') || void 0;
+    return /*#__PURE__*/ jsx(Input, {
+        ref: ref,
+        ...api.getInputProps(),
+        ...props,
+        className: styles.input({
+            className
+        }),
+        "aria-describedby": ariaDescribedBy
+    });
+};
+NumericInput.IncrementTrigger = function({ variant = 'primary', theme = 'borderless', size = 'sm', icon = 'token-icon-numeric-input-increment', iconPosition = 'left', uppercase, block, isLoading, loadingText, ref, className, children, ...props }) {
+    const { api, styles } = useNumericInputContext();
+    return /*#__PURE__*/ jsx(Button, {
+        ref: ref,
+        variant: variant,
+        theme: theme,
+        size: size,
+        icon: icon,
+        iconPosition: iconPosition,
+        uppercase: uppercase,
+        block: block,
+        isLoading: isLoading,
+        loadingText: loadingText,
+        className: styles.trigger({
+            className
+        }),
+        ...api.getIncrementTriggerProps(),
+        ...props,
+        children: children
+    });
+};
+NumericInput.DecrementTrigger = function({ variant = 'primary', theme = 'borderless', size = 'sm', icon = 'token-icon-numeric-input-decrement', iconPosition = 'left', uppercase, block, isLoading, loadingText, ref, className, children, ...props }) {
+    const { api, styles } = useNumericInputContext();
+    return /*#__PURE__*/ jsx(Button, {
+        ref: ref,
+        variant: variant,
+        theme: theme,
+        size: size,
+        icon: icon,
+        iconPosition: iconPosition,
+        uppercase: uppercase,
+        block: block,
+        isLoading: isLoading,
+        loadingText: loadingText,
+        className: styles.trigger({
+            className
+        }),
+        ...api.getDecrementTriggerProps(),
+        ...props,
+        children: children
+    });
+};
+NumericInput.Scrubber = function({ ref, className, ...props }) {
+    const { api, styles } = useNumericInputContext();
+    return /*#__PURE__*/ jsx("div", {
+        ref: ref,
+        className: styles.scrubber({
+            className
+        }),
+        ...api.getScrubberProps(),
+        ...props
+    });
+};
+NumericInput.TriggerContainer = function({ children, ref, className, ...props }) {
+    const { styles } = useNumericInputContext();
+    return /*#__PURE__*/ jsx("div", {
+        ref: ref,
+        className: styles.triggerContainer({
+            className
+        }),
+        ...props,
+        children: children
+    });
+};
+NumericInput.displayName = 'NumericInput';
+export { NumericInput };

package/dist/atoms/rating.js

@@ -0,0 +1,117 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { connect, machine } from "@zag-js/rating-group";
+import { normalizeProps, useMachine } from "@zag-js/react";
+import { useId } from "react";
+import { tv } from "../utils.js";
+import { Label } from "./label.js";
+const rating = tv({
+    slots: {
+        root: [
+            'grid items-center'
+        ],
+        control: [
+            'flex'
+        ],
+        itemWrapper: [
+            'flex items-center',
+            'has-[:focus-visible]:outline-none',
+            'has-[:focus-visible]:ring',
+            'has-[:focus-visible]:ring-rating-ring'
+        ],
+        item: [
+            'cursor-pointer transition-colors duration-200',
+            'text-rating-fg',
+            'data-[checked]:text-rating-fg-active',
+            'data-[highlighted]:text-rating-fg-active',
+            'data-[disabled]:cursor-not-allowed',
+            'data-[disabled]:data-[highlighted]:text-rating-fg-disabled',
+            'token-icon-rating',
+            'data-[half]:token-icon-rating-half'
+        ]
+    },
+    variants: {
+        size: {
+            sm: {
+                root: 'gap-rating-sm',
+                control: 'gap-rating-sm',
+                item: 'text-rating-sm'
+            },
+            md: {
+                root: 'gap-rating-md',
+                control: 'gap-rating-md',
+                item: 'text-rating-md'
+            },
+            lg: {
+                root: 'gap-rating-lg',
+                control: 'gap-rating-lg',
+                item: 'text-rating-lg'
+            }
+        },
+        isInteractive: {
+            true: {},
+            false: {
+                item: 'cursor-default'
+            }
+        }
+    },
+    defaultVariants: {
+        size: 'md'
+    }
+});
+function Rating({ value, defaultValue, count = 5, labelText, readOnly = false, disabled = false, allowHalf = true, name, dir = 'ltr', translations, onChange, onHoverChange, size = 'md', className, ...props }) {
+    const generatedId = useId();
+    const uniqueId = props.id || generatedId;
+    const service = useMachine(machine, {
+        id: uniqueId,
+        count,
+        value,
+        defaultValue,
+        disabled,
+        readOnly,
+        allowHalf,
+        name,
+        dir,
+        translations,
+        onValueChange: ({ value })=>{
+            onChange?.(value);
+        },
+        onHoverChange: ({ hoveredValue })=>{
+            onHoverChange?.(hoveredValue);
+        }
+    });
+    const api = connect(service, normalizeProps);
+    const { root, control, itemWrapper, item } = rating({
+        size,
+        isInteractive: !readOnly && !disabled
+    });
+    return /*#__PURE__*/ jsxs("div", {
+        className: root({
+            className
+        }),
+        ...api.getRootProps(),
+        ...props,
+        children: [
+            labelText && /*#__PURE__*/ jsx(Label, {
+                ...api.getLabelProps(),
+                children: labelText
+            }),
+            /*#__PURE__*/ jsx("input", {
+                ...api.getHiddenInputProps()
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: control(),
+                ...api.getControlProps(),
+                children: api.items.map((index)=>/*#__PURE__*/ jsx("div", {
+                        className: itemWrapper(),
+                        children: /*#__PURE__*/ jsx("span", {
+                            className: item(),
+                            ...api.getItemProps({
+                                index
+                            })
+                        })
+                    }, index))
+            })
+        ]
+    });
+}
+export { Rating };

package/dist/atoms/textarea.js

@@ -0,0 +1,81 @@
+import { jsx } from "react/jsx-runtime";
+import { tv } from "../utils.js";
+const textareaVariants = tv({
+    base: [
+        'block w-full',
+        'bg-textarea-bg',
+        'text-textarea-fg',
+        'placeholder:text-textarea-placeholder',
+        'border-(length:--border-textarea-width) border-textarea-border',
+        'rounded-textarea',
+        'transition-all duration-200',
+        'hover:bg-textarea-bg-hover hover:border-textarea-border-hover',
+        'focus:outline-none focus:bg-textarea-bg-focus focus:border-textarea-border-focus',
+        'focus-visible:ring',
+        'focus-visible:ring-textarea-ring',
+        'disabled:pointer-events-none disabled:bg-textarea-bg-disabled disabled:border-textarea-border-disabled disabled:text-textarea-fg-disabled'
+    ],
+    variants: {
+        variant: {
+            default: '',
+            error: [
+                'border-textarea-border-danger',
+                'hover:border-textarea-border-danger-hover',
+                'focus:border-textarea-border-danger-focus',
+                'placeholder:text-textarea-placeholder-danger'
+            ],
+            success: [
+                'border-textarea-border-success',
+                'hover:border-textarea-border-success-hover',
+                'focus:border-textarea-border-success-focus'
+            ],
+            warning: [
+                'border-textarea-border-warning',
+                'hover:border-textarea-border-warning-hover',
+                'focus:border-textarea-border-warning-focus'
+            ],
+            borderless: [
+                'border-transparent',
+                'bg-textarea-bg-borderless',
+                'hover:bg-textarea-bg-borderless-hover',
+                'focus:bg-textarea-bg-borderless-focus'
+            ]
+        },
+        size: {
+            sm: 'p-textarea-sm text-textarea-sm',
+            md: 'p-textarea-md text-textarea-md',
+            lg: 'p-textarea-lg text-textarea-lg'
+        },
+        resize: {
+            none: 'resize-none',
+            y: 'resize-y',
+            x: 'resize-x',
+            both: 'resize',
+            auto: 'resize-none field-sizing-content'
+        },
+        readonly: {
+            true: 'bg-textarea-bg-disabled cursor-default opacity-90 text-textarea-fg-disabled border-textarea-border-disabled'
+        }
+    },
+    defaultVariants: {
+        size: 'md',
+        resize: 'y',
+        variant: 'default'
+    }
+});
+function Textarea({ size, resize, variant, readonly, className, ref, ...props }) {
+    return /*#__PURE__*/ jsx("textarea", {
+        ref: ref,
+        readOnly: readonly,
+        className: textareaVariants({
+            size,
+            resize,
+            variant,
+            readonly,
+            className
+        }),
+        ...props
+    });
+}
+Textarea.displayName = 'Textarea';
+export { Textarea };