@techsio/ui-kit 0.0.0

package/dist/molecules/slider.js

@@ -0,0 +1,249 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { normalizeProps, useMachine } from "@zag-js/react";
+import { connect, machine } from "@zag-js/slider";
+import { useId } from "react";
+import { ErrorText } from "../atoms/error-text.js";
+import { ExtraText } from "../atoms/extra-text.js";
+import { Label } from "../atoms/label.js";
+import { slugify, tv } from "../utils.js";
+const sliderVariants = tv({
+    slots: {
+        root: [
+            'flex flex-col w-full gap-slider-root',
+            'data-[orientation=vertical]:h-full',
+            'data-[disabled]:opacity-slider-disabled data-[disabled]:cursor-not-allowed'
+        ],
+        header: [
+            'flex items-center justify-between'
+        ],
+        value: [
+            'text-slider-value-size'
+        ],
+        label: [
+            'block font-medium'
+        ],
+        control: [
+            'relative grid place-items-center ',
+            'data-[orientation=vertical]:h-full data-[orientation=vertical]:grid-rows-1'
+        ],
+        track: [
+            'rounded-slider-track bg-slider-track-bg flex-1',
+            'data-[orientation=horizontal]:w-full',
+            'data-[orientation=vertical]:h-full ',
+            'data-[disabled]:bg-slider-bg-disabled',
+            'border-(length:--border-width-slider) border-slider-border',
+            'data-[disabled]:border-slider-border-disabled',
+            'transition-colors duration-200',
+            'hover:bg-slider-track-bg-hover',
+            'data-[invalid=true]:border-slider-border-error'
+        ],
+        range: [
+            'bg-slider-range-bg rounded-slider-track h-full',
+            'data-[orientation=vertical]:h-auto data-[orientation=vertical]:w-full',
+            'data-[disabled]:bg-slider-bg-disabled',
+            'hover:bg-slider-range-bg-hover',
+            'data-[invalid=true]:bg-slider-range-bg-error'
+        ],
+        thumb: [
+            'flex items-center justify-center',
+            'rounded-slider-thumb bg-slider-thumb-bg',
+            'focus:outline-none',
+            'focus-visible:ring',
+            'focus-visible:ring-slider-ring',
+            'data-[disabled]:bg-slider-thumb-bg-disabled',
+            'border-(length:--border-width-slider) border-slider-border',
+            'data-[disabled]:border-slider-border-disabled',
+            'hover:bg-slider-thumb-bg-hover',
+            'cursor-grab data-[dragging]:cursor-grabbing data-[disabled]:cursor-not-allowed',
+            'transition-colors duration-200',
+            'shadow-slider-thumb'
+        ],
+        markerGroup: [
+            'relative h-full flex items-center'
+        ],
+        marker: [
+            'relative h-full flex flex-col justify-center items-center',
+            'data-[orientation=vertical]:w-full',
+            'data-[orientation=vertical]:h-marker-vertical',
+            'data-[orientation=vertical]:flex-row'
+        ],
+        markerLine: [
+            'w-slider-marker h-full bg-slider-marker-bg',
+            'data-[orientation=vertical]:h-slider-marker data-[orientation=vertical]:w-full'
+        ],
+        markerText: [
+            'absolute top-full',
+            'data-[orientation=vertical]:top-0 data-[orientation=vertical]:left-full',
+            'data-[orientation=vertical]:h-full',
+            'data-[orientation=vertical]:p-marker-text'
+        ],
+        footer: [
+            'flex flex-col'
+        ]
+    },
+    variants: {
+        size: {
+            sm: {
+                track: [
+                    'h-slider-track-sm data-[orientation=vertical]:w-slider-track-sm'
+                ],
+                thumb: [
+                    'w-slider-thumb-sm',
+                    'h-slider-thumb-sm'
+                ]
+            },
+            md: {
+                track: [
+                    'h-slider-track-md data-[orientation=vertical]:w-slider-track-md'
+                ],
+                thumb: [
+                    'w-slider-thumb-md',
+                    'h-slider-thumb-md'
+                ]
+            },
+            lg: {
+                track: [
+                    'h-slider-track-lg data-[orientation=vertical]:w-slider-track-lg'
+                ],
+                thumb: [
+                    'w-slider-thumb-lg',
+                    'h-slider-thumb-lg'
+                ]
+            }
+        }
+    },
+    defaultVariants: {
+        size: 'md'
+    }
+});
+function Slider({ id, name, label, helperText, error, errorText, value, origin, thumbAlignment = 'center', defaultValue = [
+    25,
+    75
+], min = 0, max = 100, step = 1, minStepsBetweenThumbs = 0, disabled = false, readOnly = false, dir = 'ltr', orientation = 'horizontal', size = 'md', showMarkers = false, markerCount = 5, showValueText = false, formatRangeText, formatValue = (val)=>val.toString(), className, onChange, onChangeEnd }) {
+    const generatedId = useId();
+    const uniqueId = id || generatedId;
+    const service = useMachine(machine, {
+        id: uniqueId,
+        name,
+        value,
+        defaultValue,
+        min,
+        max,
+        origin,
+        thumbAlignment,
+        step,
+        minStepsBetweenThumbs,
+        disabled,
+        readOnly,
+        dir,
+        orientation,
+        onValueChange: (details)=>onChange?.(details.value),
+        onValueChangeEnd: (details)=>onChangeEnd?.(details.value)
+    });
+    const api = connect(service, normalizeProps);
+    const { root, label: labelSlot, control, track, range, thumb, header, value: valueSlot, markerGroup, marker, markerLine, markerText, footer } = sliderVariants({
+        className,
+        size
+    });
+    return /*#__PURE__*/ jsxs("div", {
+        className: root({
+            className
+        }),
+        ...api.getRootProps(),
+        children: [
+            (label || showValueText) && /*#__PURE__*/ jsxs("div", {
+                className: header(),
+                children: [
+                    /*#__PURE__*/ jsx(Label, {
+                        className: labelSlot(),
+                        ...api.getLabelProps(),
+                        children: label
+                    }),
+                    showValueText && /*#__PURE__*/ jsxs("output", {
+                        className: valueSlot(),
+                        ...api.getValueTextProps(),
+                        children: [
+                            /*#__PURE__*/ jsx("b", {
+                                children: formatRangeText ? formatRangeText(api.value || defaultValue) : api.value && 2 === api.value.length && void 0 !== api.value[0] && void 0 !== api.value[1] ? `${formatValue(api.value[0])} - ${formatValue(api.value[1])}` : ''
+                            }),
+                            ' '
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: control(),
+                ...api.getControlProps(),
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        className: track(),
+                        ...api.getTrackProps(),
+                        "data-invalid": error,
+                        children: [
+                            /*#__PURE__*/ jsx("div", {
+                                className: range(),
+                                ...api.getRangeProps(),
+                                "data-invalid": error
+                            }),
+                            showMarkers && /*#__PURE__*/ jsx("div", {
+                                ...api.getMarkerGroupProps(),
+                                className: markerGroup(),
+                                children: Array.from({
+                                    length: markerCount
+                                }).map((_, index)=>{
+                                    const markerValue = 1 === markerCount ? min : min + (max - min) / (markerCount - 1) * index;
+                                    return /*#__PURE__*/ jsxs("div", {
+                                        className: marker(),
+                                        ...api.getMarkerProps({
+                                            value: markerValue
+                                        }),
+                                        children: [
+                                            !('center' === thumbAlignment && (0 === index || index === markerCount - 1)) && /*#__PURE__*/ jsx("div", {
+                                                className: markerLine(),
+                                                "data-orientation": orientation
+                                            }),
+                                            /*#__PURE__*/ jsx("span", {
+                                                className: markerText(),
+                                                "data-orientation": orientation,
+                                                children: markerValue
+                                            })
+                                        ]
+                                    }, slugify(`marker-${markerValue}`));
+                                })
+                            })
+                        ]
+                    }),
+                    api.value.map((_, index)=>/*#__PURE__*/ jsx("div", {
+                            className: thumb(),
+                            ...api.getThumbProps({
+                                index
+                            }),
+                            children: /*#__PURE__*/ jsx("input", {
+                                ...api.getHiddenInputProps({
+                                    index
+                                })
+                            })
+                        }, index))
+                ]
+            }),
+            (helperText || errorText) && /*#__PURE__*/ jsxs("div", {
+                className: footer(),
+                children: [
+                    /*#__PURE__*/ jsx("div", {
+                        className: error ? 'block' : 'invisible h-0 overflow-hidden',
+                        children: /*#__PURE__*/ jsx(ErrorText, {
+                            children: errorText
+                        })
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        className: !error && helperText ? 'block' : 'invisible h-0 overflow-hidden',
+                        children: /*#__PURE__*/ jsx(ExtraText, {
+                            children: helperText
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+}
+export { Slider };

package/dist/molecules/steps.js

@@ -0,0 +1,178 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { normalizeProps, useMachine } from "@zag-js/react";
+import { connect, machine } from "@zag-js/steps";
+import { useId } from "react";
+import { Button } from "../atoms/button.js";
+import { slugify, tv } from "../utils.js";
+const stepsVariants = tv({
+    slots: {
+        root: [
+            'relative flex bg-steps-root-bg',
+            'gap-root',
+            'text-steps-fg',
+            'data-[orientation=horizontal]:flex-col',
+            'data-[orientation=vertical]:grid data-[orientation=vertical]:grid-cols-[auto_1fr]'
+        ],
+        list: [
+            'relative flex bg-steps-list-bg gap-list',
+            'data-[orientation=vertical]:flex-col',
+            'data-[orientation=vertical]:h-full'
+        ],
+        item: [
+            'relative flex bg-steps-item-bg items-center gap-item',
+            'focus-visible:outline-none',
+            'data-[orientation=horizontal]:w-full data-[orientation=horizontal]:justify-start',
+            'data-[orientation=vertical]:flex-col data-[orientation=vertical]:h-full'
+        ],
+        trigger: [
+            'relative gap-trigger flex cursor-pointer group',
+            'items-center justify-center',
+            'transition-all duration-200',
+            'focus-visible:outline-none',
+            'data-[orientation=horizontal]:flex-row',
+            'data-[orientation=vertical]:flex-col'
+        ],
+        content: [
+            'grid p-content bg-steps-content-bg',
+            'focus-visible:outline-none',
+            'focus-visible:ring',
+            'focus-visible:ring-steps-ring',
+            'data-[orientation=horizontal]:w-full',
+            'data-[orientation=vertical]:flex-1'
+        ],
+        indicator: [
+            'grid place-items-center',
+            'h-steps-indicator rounded-full aspect-square',
+            'bg-steps-indicator-bg data-[complete]:bg-steps-indicator-bg-complete',
+            'group-focus-visible:ring',
+            'group-focus-visible:ring-steps-ring',
+            'group-hover:bg-steps-indicator-bg-hover',
+            'group-hover:text-steps-fg-active',
+            'transition-all duration-200 ease-out',
+            'data-[current]:bg-steps-indicator-bg-current',
+            'focus-visible:data-[current]:ring',
+            'focus-visible:data-[current]:ring-steps-ring',
+            'data-[current]:outline-none',
+            'data-[current]:text-steps-fg-current data-[complete]:text-steps-fg-active'
+        ],
+        separator: [
+            'bg-steps-separator-bg',
+            'data-[complete]:bg-steps-separator-bg-complete',
+            'data-[orientation=horizontal]:h-steps-separator data-[orientation=horizontal]:w-full data-[orientation=horizontal]:flex-1',
+            'data-[orientation=vertical]:w-steps-separator data-[orientation=vertical]:h-full'
+        ],
+        containerButtons: [
+            'flex gap-2 h-fit',
+            'data-[orientation=vertical]:col-start-2'
+        ],
+        stepButton: [
+            'rounded-none p-steps-btn',
+            'focus-visible:ring',
+            'focus-visible:ring-steps-ring'
+        ]
+    }
+});
+function Steps({ id, items, currentStep = 0, orientation = 'horizontal', linear = false, showControls = true, completeText, onStepChange, onStepComplete }) {
+    const generatedId = useId();
+    const uniqueId = id || generatedId;
+    const service = useMachine(machine, {
+        id: uniqueId,
+        count: items.length,
+        step: currentStep,
+        orientation,
+        linear,
+        onStepChange: (details)=>{
+            onStepChange?.(details.step);
+        },
+        onStepComplete: ()=>{
+            onStepComplete?.();
+        }
+    });
+    const api = connect(service, normalizeProps);
+    const { root, list, item, trigger, separator, indicator, content, containerButtons, stepButton } = stepsVariants();
+    return /*#__PURE__*/ jsxs("div", {
+        className: root(),
+        ...api.getRootProps(),
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: list(),
+                ...api.getListProps(),
+                children: items.map((step, index)=>/*#__PURE__*/ jsxs("div", {
+                        className: item(),
+                        ...api.getItemProps({
+                            index
+                        }),
+                        children: [
+                            /*#__PURE__*/ jsxs("button", {
+                                className: trigger(),
+                                ...api.getTriggerProps({
+                                    index
+                                }),
+                                children: [
+                                    /*#__PURE__*/ jsx("span", {
+                                        className: indicator(),
+                                        ...api.getIndicatorProps({
+                                            index
+                                        }),
+                                        children: index + 1
+                                    }),
+                                    /*#__PURE__*/ jsx("span", {
+                                        children: step.title
+                                    })
+                                ]
+                            }),
+                            index < items.length - 1 && /*#__PURE__*/ jsx("div", {
+                                className: separator(),
+                                ...api.getSeparatorProps({
+                                    index
+                                })
+                            })
+                        ]
+                    }, slugify(step.title)))
+            }),
+            items.map((step, index)=>/*#__PURE__*/ jsx("div", {
+                    className: content(),
+                    ...api.getContentProps({
+                        index
+                    }),
+                    children: /*#__PURE__*/ jsxs("article", {
+                        className: "h-fit",
+                        children: [
+                            /*#__PURE__*/ jsx("h3", {
+                                children: step.title
+                            }),
+                            step.content
+                        ]
+                    })
+                }, `content-${slugify(step.title)}`)),
+            /*#__PURE__*/ jsx("div", {
+                className: content(),
+                ...api.getContentProps({
+                    index: items.length
+                }),
+                children: completeText
+            }),
+            showControls && /*#__PURE__*/ jsxs("div", {
+                className: containerButtons(),
+                "data-orientation": orientation,
+                children: [
+                    /*#__PURE__*/ jsx(Button, {
+                        theme: "solid",
+                        size: "sm",
+                        className: stepButton(),
+                        ...api.getPrevTriggerProps(),
+                        children: "Back"
+                    }),
+                    /*#__PURE__*/ jsx(Button, {
+                        size: "sm",
+                        theme: "solid",
+                        className: stepButton(),
+                        ...api.getNextTriggerProps(),
+                        children: "Next"
+                    })
+                ]
+            })
+        ]
+    });
+}
+export { Steps };

package/dist/molecules/switch.js

@@ -0,0 +1,109 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { normalizeProps, useMachine } from "@zag-js/react";
+import { connect, machine } from "@zag-js/switch";
+import { useId } from "react";
+import { ErrorText } from "../atoms/error-text.js";
+import { ExtraText } from "../atoms/extra-text.js";
+import { Label } from "../atoms/label.js";
+import { tv } from "../utils.js";
+const switchVariants = tv({
+    slots: {
+        root: [
+            'cursor-pointer',
+            'data-[disabled]:cursor-not-allowed'
+        ],
+        control: [
+            'me-switch-root p-switch-control',
+            'relative inline-flex shrink-0 items-center justify-start',
+            'bg-switch-bg hover:bg-switch-bg-hover',
+            'w-switch-track-width h-switch-track-height',
+            'rounded-switch',
+            'transition-colors duration-200',
+            'ring-offset-transparent outline-none',
+            'border-(length:--border-width-switch) border-switch-border',
+            'data-[state=checked]:bg-switch-bg-checked',
+            'data-[state=checked]:hover:bg-switch-bg-checked-hover',
+            'data-[disabled]:bg-switch-bg-disabled',
+            'data-[disabled]:border-switch-border-disabled',
+            'data-[focus]:outline-none',
+            'data-[focus]:ring',
+            'data-[focus]:ring-switch-ring',
+            'data-[invalid]:bg-switch-bg-invalid data-[invalid]:ring-switch-ring-invalid'
+        ],
+        thumb: [
+            'block rounded-full h-switch-thumb-height aspect-square bg-switch-thumb-bg',
+            'transform transition-transform duration-200',
+            'data-[disabled]:bg-switch-thumb-bg-disabled',
+            'data-[state=checked]:translate-x-switch-translate-track'
+        ],
+        label: [
+            'select-none',
+            'text-switch-label-fg',
+            'data-[disabled]:text-switch-label-fg-disabled'
+        ],
+        hiddenInput: 'sr-only'
+    }
+});
+function Switch({ id, name, value, checked, defaultChecked, disabled = false, invalid = false, readOnly = false, required = false, dir = 'ltr', children, className, onCheckedChange, helperText, errorText }) {
+    const generatedId = useId();
+    const uniqueId = id || generatedId;
+    const service = useMachine(machine, {
+        id: uniqueId,
+        name,
+        value,
+        checked,
+        defaultChecked,
+        dir,
+        disabled,
+        invalid,
+        readOnly,
+        required,
+        onCheckedChange: ({ checked })=>onCheckedChange?.(checked)
+    });
+    const api = connect(service, normalizeProps);
+    const { root, control, thumb, label, hiddenInput } = switchVariants({
+        className
+    });
+    return /*#__PURE__*/ jsxs("div", {
+        className: className,
+        children: [
+            /*#__PURE__*/ jsxs(Label, {
+                className: root(),
+                required: required,
+                ...api.getRootProps(),
+                children: [
+                    /*#__PURE__*/ jsx("input", {
+                        className: hiddenInput(),
+                        ...api.getHiddenInputProps()
+                    }),
+                    /*#__PURE__*/ jsx("span", {
+                        className: control(),
+                        ...api.getControlProps(),
+                        children: /*#__PURE__*/ jsx("span", {
+                            className: thumb(),
+                            ...api.getThumbProps()
+                        })
+                    }),
+                    children && /*#__PURE__*/ jsx("span", {
+                        className: label(),
+                        ...api.getLabelProps(),
+                        children: children
+                    })
+                ]
+            }),
+            (errorText || helperText) && /*#__PURE__*/ jsxs("div", {
+                children: [
+                    invalid && errorText && /*#__PURE__*/ jsx(ErrorText, {
+                        size: "sm",
+                        children: errorText
+                    }),
+                    !invalid && helperText && /*#__PURE__*/ jsx(ExtraText, {
+                        size: "sm",
+                        children: helperText
+                    })
+                ]
+            })
+        ]
+    });
+}
+export { Switch };