@techsio/ui-kit 0.3.1 → 0.4.0

package/dist/atoms/input.js

@@ -2,62 +2,68 @@ 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-fg-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'
+        "block w-full",
+        "font-normal",
+        "bg-input",
+        "text-input-fg",
+        "placeholder:font-normal",
+        "placeholder:text-input-fg-placeholder",
+        "border-(length:--border-width-input) border-input-border",
+        "rounded-input",
+        "transition-all duration-200 motion-reduce:transition-none",
+        "hover:border-input-border-hover hover:bg-input-hover",
+        "focus:border-input-border-focus focus:bg-input-focus",
+        "focus-visible:outline-(style:--default-ring-style) focus-visible:outline-(length:--default-ring-width)",
+        "focus-visible:outline-input-ring",
+        "focus-visible:outline-offset-(length:--default-ring-offset)",
+        "disabled:cursor-not-allowed disabled:hover:bg-input-bg-disabled"
     ],
     variants: {
         size: {
-            sm: 'p-input-sm text-input-sm',
-            md: 'p-input-md text-input-md',
-            lg: 'p-input-lg text-input-lg'
+            sm: "h-form-control-sm rounded-input-sm p-input-sm text-input-sm",
+            md: "h-form-control-md rounded-input-md p-input-md text-input-md",
+            lg: "h-form-control-lg rounded-input-lg p-input-lg text-input-lg"
         },
         variant: {
-            default: '',
+            default: "",
             error: [
-                'border-input-border-danger',
-                'hover:border-input-border-danger-hover',
-                'focus:border-input-border-danger-focus'
+                "border-(length:--border-width-validation)",
+                "border-input-border-danger",
+                "hover:border-input-border-danger-hover",
+                "focus:border-input-border-danger-focus"
             ],
             success: [
-                'border-input-border-success',
-                'hover:border-input-border-success-hover',
-                'focus:border-input-border-success-focus'
+                "border-(length:--border-width-validation)",
+                "border-input-border-success",
+                "hover:border-input-border-success-hover",
+                "focus:border-input-border-success-focus"
             ],
             warning: [
-                'border-input-border-warning',
-                'hover:border-input-border-warning-hover',
-                'focus:border-input-border-warning-focus'
+                "border-(length:--border-width-validation)",
+                "border-input-border-warning",
+                "hover:border-input-border-warning-hover",
+                "focus:border-input-border-warning-focus"
             ]
         },
         withButtonInside: {
-            false: '',
-            right: 'pe-with-button',
-            left: 'ps-with-button'
+            false: "",
+            right: "pe-with-button",
+            left: "ps-with-button"
         },
         hideSearchClear: {
-            true: '[&::-webkit-search-cancel-button]:hidden [&::-ms-clear]:hidden'
+            true: "[&::-ms-clear]:hidden [&::-webkit-search-cancel-button]:hidden"
         },
         disabled: {
             true: [
-                'bg-input-bg-disabled',
-                'border-input-border-disabled',
-                'text-input-fg-disabled'
+                "bg-input-bg-disabled",
+                "border-input-border-disabled",
+                "text-input-fg-disabled"
             ]
         }
     },
     defaultVariants: {
-        size: 'md',
-        variant: 'default',
+        size: "md",
+        variant: "default",
         hideSearchClear: true,
         withIconInside: false
     }

package/dist/atoms/label.js

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

package/dist/atoms/link-button.js

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

package/dist/atoms/link.js

@@ -6,10 +6,12 @@ const linkVariants = tv({
     defaultVariants: {}
 });
 function Link({ as, children, external = false, className, ...props }) {
-    const Component = as || 'a';
-    const externalProps = external && (!as || 'a' === as) ? {
-        target: '_blank',
-        rel: 'noopener noreferrer'
+    const Component = as || "a";
+    const target = "target" in props ? props.target : void 0;
+    const rel = "rel" in props ? props.rel : void 0;
+    const externalProps = external ? {
+        target: target ?? "_blank",
+        rel: rel ?? "noopener noreferrer"
     } : {};
     return /*#__PURE__*/ jsx(Component, {
         className: linkVariants({

package/dist/atoms/numeric-input.js

@@ -8,72 +8,97 @@ import { Input } from "./input.js";
 const numericInputVariants = tv({
     slots: {
         root: [
-            'flex relative'
+            "relative flex"
         ],
         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'
+            "group form-control-base relative flex",
+            "border-numeric-input-border",
+            "items-center overflow-hidden",
+            "hover:border-numeric-input-border-hover",
+            "focus-within:border-numeric-input-border-focus",
+            "data-disabled:bg-numeric-input-bg-disabled",
+            "data-disabled:border-numeric-input-border-disabled",
+            "data-disabled:text-numeric-input-fg-disabled",
+            "data-invalid:bg-numeric-input-invalid-bg",
+            "data-invalid:border-(length:--border-width-validation)",
+            "data-invalid:border-numeric-input-invalid-border",
+            "text-numeric-input-fg",
+            "has-[input:not(:disabled):hover]:bg-numeric-input-input-bg-hover",
+            "has-[input:focus]:bg-numeric-input-input-bg-focus",
+            "focus-within:outline-(style:--default-ring-style) focus-within:outline-(length:--default-ring-width)",
+            "focus-within:outline-numeric-input-ring",
+            "focus-within:outline-offset-(length:--default-ring-offset)",
+            "transition-colors duration-200 motion-reduce:transition-none"
         ],
         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'
+            "h-full rounded-none border-none",
+            "bg-numeric-input-input-bg",
+            "focus:bg-numeric-input-input-bg-focus",
+            "hover:bg-numeric-input-input-bg-hover",
+            "disabled:hover:bg-numeric-input-input-bg",
+            "disabled:cursor-not-allowed",
+            "focus-visible:outline-none",
+            "duration-0 data-invalid:focus:border-input-border-danger-focus"
         ],
         triggerContainer: [
-            'flex flex-col h-fit justify-center bg-numeric-input-trigger-container-bg'
+            "flex flex-col gap-px self-stretch 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'
+            "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",
+            "cursor-pointer",
+            "transition-colors duration-200 motion-reduce:transition-none",
+            "disabled:cursor-not-allowed"
         ],
-        scrubber: 'absolute inset-0 cursor-ew-resize'
+        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'
+                root: "gap-numeric-input-root-sm text-numeric-input-sm",
+                container: "h-form-control-sm rounded-numeric-input-sm",
+                trigger: "text-numeric-input-sm",
+                input: "pl-numeric-input-input-sm text-numeric-input-sm"
             },
             md: {
-                root: 'text-numeric-input-md',
-                trigger: 'text-numeric-input-md',
-                input: 'text-numeric-input-md'
+                root: "gap-numeric-input-root-md text-numeric-input-md",
+                container: "h-form-control-md rounded-numeric-input-md",
+                trigger: "text-numeric-input-md",
+                input: "pl-numeric-input-input-md text-numeric-input-md"
             },
             lg: {
-                root: 'text-numeric-input-lg',
-                trigger: 'text-numeric-input-lg',
-                input: 'text-numeric-input-lg'
+                root: "gap-numeric-input-root-lg text-numeric-input-lg",
+                container: "h-form-control-lg rounded-numeric-input-lg",
+                trigger: "text-numeric-input-lg",
+                input: "pl-numeric-input-input-lg text-numeric-input-lg"
             }
         }
     },
     defaultVariants: {
-        size: 'md'
+        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');
+    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 }) {
+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, locale = "cs-CZ", ...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 resolvedFormatOptions = precision ? {
+        ...formatOptions ?? {},
+        maximumFractionDigits: precision
+    } : formatOptions;
+    const formatValue = (inputValue)=>{
+        if (!resolvedFormatOptions) return String(inputValue);
+        return new Intl.NumberFormat(locale, resolvedFormatOptions).format(inputValue);
+    };
+    const stringValue = void 0 !== value ? formatValue(value) : void 0;
+    const stringDefaultValue = void 0 !== defaultValue ? formatValue(defaultValue) : void 0;
     const service = useMachine(machine, {
         id: uniqueId,
         min,
@@ -81,6 +106,7 @@ function NumericInput({ id, name, size, disabled = false, required = false, patt
         step,
         name,
         disabled,
+        locale,
         required,
         pattern,
         readOnly,
@@ -93,9 +119,7 @@ function NumericInput({ id, name, size, disabled = false, required = false, patt
         allowOverflow,
         clampValueOnBlur,
         spinOnPress,
-        formatOptions: precision ? {
-            maximumFractionDigits: precision
-        } : formatOptions,
+        formatOptions: resolvedFormatOptions,
         onValueChange: (details)=>{
             onChange?.(details.valueAsNumber);
         },
@@ -114,10 +138,10 @@ function NumericInput({ id, name, size, disabled = false, required = false, patt
             describedBy
         },
         children: /*#__PURE__*/ jsx("div", {
-            ref: ref,
             className: styles.root({
                 className
             }),
+            ref: ref,
             ...api.getRootProps(),
             ...props,
             children: children
@@ -127,10 +151,10 @@ function NumericInput({ id, name, size, disabled = false, required = false, patt
 NumericInput.Control = function({ children, ref, className, ...props }) {
     const { api, styles, invalid } = useNumericInputContext();
     return /*#__PURE__*/ jsx("div", {
-        ref: ref,
         className: styles.container({
             className
         }),
+        ref: ref,
         ...api.getControlProps(),
         ...props,
         "data-invalid": invalid || void 0,
@@ -140,56 +164,60 @@ NumericInput.Control = function({ children, ref, className, ...props }) {
 NumericInput.Input = function({ ref, className, ...props }) {
     const { api, styles, describedBy } = useNumericInputContext();
     const ariaDescribedBy = [
-        props['aria-describedby'],
+        props["aria-describedby"],
         describedBy
-    ].filter(Boolean).join(' ') || void 0;
+    ].filter(Boolean).join(" ") || void 0;
     return /*#__PURE__*/ jsx(Input, {
         ref: ref,
         ...api.getInputProps(),
         ...props,
+        "aria-describedby": ariaDescribedBy,
         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();
+NumericInput.IncrementTrigger = function({ variant = "primary", theme = "borderless", icon = "token-icon-numeric-input-increment", iconPosition = "left", iconSize, uppercase, block, isLoading, loadingText, ref, className, children, ...props }) {
+    const { api, styles, size } = useNumericInputContext();
+    const resolvedIconSize = iconSize ?? ("sm" === size ? "xs" : "lg" === size ? "md" : "sm");
     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
         }),
+        icon: icon,
+        iconPosition: iconPosition,
+        iconSize: resolvedIconSize,
+        isLoading: isLoading,
+        loadingText: loadingText,
+        ref: ref,
+        size: "current",
+        theme: theme,
+        uppercase: uppercase,
+        variant: variant,
         ...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();
+NumericInput.DecrementTrigger = function({ variant = "primary", theme = "borderless", icon = "token-icon-numeric-input-decrement", iconPosition = "left", iconSize, uppercase, block, isLoading, loadingText, ref, className, children, ...props }) {
+    const { api, styles, size } = useNumericInputContext();
+    const resolvedIconSize = iconSize ?? ("sm" === size ? "xs" : "lg" === size ? "md" : "sm");
     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
         }),
+        icon: icon,
+        iconPosition: iconPosition,
+        iconSize: resolvedIconSize,
+        isLoading: isLoading,
+        loadingText: loadingText,
+        ref: ref,
+        size: "current",
+        theme: theme,
+        uppercase: uppercase,
+        variant: variant,
         ...api.getDecrementTriggerProps(),
         ...props,
         children: children
@@ -198,10 +226,10 @@ NumericInput.DecrementTrigger = function({ variant = 'primary', theme = 'borderl
 NumericInput.Scrubber = function({ ref, className, ...props }) {
     const { api, styles } = useNumericInputContext();
     return /*#__PURE__*/ jsx("div", {
-        ref: ref,
         className: styles.scrubber({
             className
         }),
+        ref: ref,
         ...api.getScrubberProps(),
         ...props
     });
@@ -209,13 +237,13 @@ NumericInput.Scrubber = function({ ref, className, ...props }) {
 NumericInput.TriggerContainer = function({ children, ref, className, ...props }) {
     const { styles } = useNumericInputContext();
     return /*#__PURE__*/ jsx("div", {
-        ref: ref,
         className: styles.triggerContainer({
             className
         }),
+        ref: ref,
         ...props,
         children: children
     });
 };
-NumericInput.displayName = 'NumericInput';
+NumericInput.displayName = "NumericInput";
 export { NumericInput };

package/dist/atoms/rating.js

@@ -7,58 +7,58 @@ import { Label } from "./label.js";
 const rating = tv({
     slots: {
         root: [
-            'grid items-center'
+            "grid items-center"
         ],
         control: [
-            'flex'
+            "flex"
         ],
         itemWrapper: [
-            'flex items-center',
-            'has-[:focus-visible]:outline-none',
-            'has-[:focus-visible]:ring',
-            'has-[:focus-visible]:ring-rating-ring'
+            "flex items-center",
+            "has-focus-visible:outline-(style:--default-ring-style) has-focus-visible:outline-(length:--default-ring-width)",
+            "has-focus-visible:outline-rating-ring",
+            "has-focus-visible:outline-offset-(length:--default-ring-offset)"
         ],
         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'
+            "cursor-pointer transition-colors duration-200",
+            "cursor-pointer transition-colors duration-200 motion-reduce:transition-none",
+            "text-rating-fg",
+            "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'
+                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'
+                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'
+                root: "gap-rating-lg",
+                control: "gap-rating-lg",
+                item: "text-rating-lg"
             }
         },
         isInteractive: {
             true: {},
             false: {
-                item: 'cursor-default'
+                item: "cursor-default"
             }
         }
     },
     defaultVariants: {
-        size: 'md'
+        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 }) {
+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, {
@@ -72,8 +72,8 @@ function Rating({ value, defaultValue, count = 5, labelText, readOnly = false, d
         name,
         dir,
         translations,
-        onValueChange: ({ value })=>{
-            onChange?.(value);
+        onValueChange: ({ value: newValue })=>{
+            onChange?.(newValue);
         },
         onHoverChange: ({ hoveredValue })=>{
             onHoverChange?.(hoveredValue);
@@ -82,7 +82,7 @@ function Rating({ value, defaultValue, count = 5, labelText, readOnly = false, d
     const api = connect(service, normalizeProps);
     const { root, control, itemWrapper, item } = rating({
         size,
-        isInteractive: !readOnly && !disabled
+        isInteractive: !(readOnly || disabled)
     });
     return /*#__PURE__*/ jsxs("div", {
         className: root({
@@ -109,7 +109,7 @@ function Rating({ value, defaultValue, count = 5, labelText, readOnly = false, d
                                 index
                             })
                         })
-                    }, index))
+                    }, `star-${index}`))
             })
         ]
     });