@techsio/ui-kit 0.0.0

package/dist/molecules/carousel.js

@@ -0,0 +1,333 @@
+import { jsx } from "react/jsx-runtime";
+import { connect, machine } from "@zag-js/carousel";
+import { normalizeProps, useMachine } from "@zag-js/react";
+import { createContext, useContext, useId } from "react";
+import { tv } from "tailwind-variants";
+import { Button } from "../atoms/button.js";
+import { Image } from "../atoms/image.js";
+const carouselVariants = tv({
+    slots: {
+        wrapper: [
+            'relative w-fit'
+        ],
+        root: [
+            'relative overflow-hidden',
+            'rounded-carousel'
+        ],
+        control: [
+            'flex absolute bottom-0 left-1/2 -translate-x-1/2',
+            'gap-carousel-control p-carousel-control',
+            'bg-carousel-control-bg',
+            'rounded-carousel'
+        ],
+        slideGroup: [
+            'overflow-hidden',
+            'scrollbar-hide',
+            'data-[dragging]:cursor-grabbing'
+        ],
+        slide: [
+            'relative flex-shrink-0',
+            'flex items-center justify-center',
+            'overflow-hidden'
+        ],
+        prevTrigger: '',
+        nextTrigger: '',
+        indicatorGroup: [
+            'flex justify-center w-full items-center gap-carousel-indicator'
+        ],
+        indicator: [
+            'aspect-carousel-indicator bg-carousel-indicator-bg w-carousel-indicator',
+            'data-[current]:bg-carousel-indicator-bg-active',
+            'data-[current]:border-carousel-indicator-border-active',
+            'rounded-carousel-indicator border border-carousel-indicator-border'
+        ],
+        autoplayIcon: [
+            'icon-[mdi--play]',
+            'data-[pressed=true]:icon-[mdi--pause]'
+        ],
+        autoplayTrigger: [
+            'absolute top-carousel-trigger-top right-carousel-trigger-right z-50',
+            'bg-carousel-trigger-bg'
+        ],
+        spacer: [
+            'flex-1'
+        ]
+    },
+    compoundSlots: [
+        {
+            slots: [
+                'autoplayTrigger',
+                'indicator',
+                'prevTrigger',
+                'nextTrigger'
+            ],
+            class: [
+                'p-carousel-trigger',
+                'focus:outline-none text-carousel-trigger-fg',
+                'focus:ring',
+                'focus:ring-carousel-ring'
+            ]
+        },
+        {
+            slots: [
+                'prevTrigger',
+                'nextTrigger'
+            ],
+            class: [
+                'bg-carousel-trigger-bg hover:bg-carousel-trigger-bg-hover text-carousel-trigger-size',
+                'hover:text-carousel-trigger-fg-hover'
+            ]
+        }
+    ],
+    variants: {
+        objectFit: {
+            cover: {
+                slide: '*:w-full *:h-full *:object-cover'
+            },
+            contain: {
+                slide: '*:w-full *:h-full *:object-contain'
+            },
+            fill: {
+                slide: '*:w-full *:h-full *:object-fill'
+            },
+            none: {
+                slide: ''
+            }
+        },
+        aspectRatio: {
+            square: {
+                slide: 'aspect-square'
+            },
+            landscape: {
+                slide: 'aspect-video'
+            },
+            portrait: {
+                slide: 'aspect-portrait'
+            },
+            wide: {
+                slide: 'aspect-wide'
+            },
+            none: {
+                slide: ''
+            }
+        },
+        size: {
+            sm: {
+                root: [
+                    'data-[orientation=horizontal]:max-w-carousel-root-sm',
+                    'data-[orientation=vertical]:max-h-carousel-root-sm'
+                ],
+                slide: [
+                    'data-[orientation=horizontal]:max-w-carousel-root-sm',
+                    'data-[orientation=vertical]:max-h-carousel-root-sm'
+                ]
+            },
+            md: {
+                root: [
+                    'data-[orientation=horizontal]:max-w-carousel-root-md',
+                    'data-[orientation=vertical]:max-h-carousel-root-md'
+                ],
+                slide: [
+                    'data-[orientation=horizontal]:max-w-carousel-root-md',
+                    'data-[orientation=vertical]:max-h-carousel-root-md'
+                ]
+            },
+            lg: {
+                root: [
+                    'data-[orientation=horizontal]:max-w-carousel-root-lg',
+                    'data-[orientation=vertical]:max-h-carousel-root-lg'
+                ],
+                slide: [
+                    'data-[orientation=horizontal]:max-w-carousel-root-lg',
+                    'data-[orientation=vertical]:max-h-carousel-root-lg'
+                ]
+            },
+            full: {
+                root: [
+                    'data-[orientation=horizontal]:w-full',
+                    'data-[orientation=vertical]:h-full'
+                ]
+            }
+        }
+    },
+    defaultVariants: {
+        aspectRatio: 'square',
+        objectFit: 'cover',
+        size: 'md'
+    }
+});
+const CarouselContext = /*#__PURE__*/ createContext(null);
+const useCarouselContext = ()=>{
+    const context = useContext(CarouselContext);
+    if (!context) throw new Error('Carousel components must be used within Carousel.Root');
+    return context;
+};
+function Carousel({ id, size, objectFit, aspectRatio, orientation = 'horizontal', slideCount = 1, loop = true, autoplay = false, allowMouseDrag = true, slidesPerPage = 1, slidesPerMove = 1, spacing = '0px', padding = '0px', dir = 'ltr', className, children, onPageChange, ...props }) {
+    const fallbackId = useId();
+    const service = useMachine(machine, {
+        id: id ?? fallbackId,
+        slideCount,
+        autoplay,
+        orientation,
+        allowMouseDrag,
+        loop,
+        slidesPerPage,
+        slidesPerMove,
+        spacing,
+        padding,
+        dir,
+        onPageChange,
+        ...props
+    });
+    const api = connect(service, normalizeProps);
+    const { wrapper, root } = carouselVariants({
+        size,
+        objectFit,
+        aspectRatio
+    });
+    return /*#__PURE__*/ jsx(CarouselContext.Provider, {
+        value: {
+            api,
+            size,
+            objectFit,
+            aspectRatio
+        },
+        children: /*#__PURE__*/ jsx("div", {
+            className: wrapper({
+                className
+            }),
+            children: /*#__PURE__*/ jsx("div", {
+                className: root(),
+                ...api.getRootProps(),
+                children: children
+            })
+        })
+    });
+}
+Carousel.Slides = function({ slides, size: overrideSize, imageAs, width, height, className }) {
+    const { api, size: contextSize, objectFit, aspectRatio } = useCarouselContext();
+    const size = overrideSize ?? contextSize;
+    const { slideGroup } = carouselVariants({
+        size,
+        objectFit,
+        aspectRatio
+    });
+    const ImageComponent = imageAs || Image;
+    return /*#__PURE__*/ jsx("div", {
+        className: slideGroup({
+            className
+        }),
+        ...api.getItemGroupProps(),
+        children: slides.map((slide, index)=>/*#__PURE__*/ jsx(Carousel.Slide, {
+                index: index,
+                children: slide.content || /*#__PURE__*/ jsx(ImageComponent, {
+                    as: imageAs === Image ? void 0 : imageAs,
+                    src: slide.src || '',
+                    alt: slide.alt || '',
+                    width: width,
+                    height: height,
+                    ...slide.imageProps
+                })
+            }, slide.id))
+    });
+};
+Carousel.Slide = function({ index, children, size: overrideSize, className }) {
+    const { api, size: contextSize, objectFit, aspectRatio } = useCarouselContext();
+    const size = overrideSize ?? contextSize;
+    const { slide: slideSlot } = carouselVariants({
+        size,
+        objectFit,
+        aspectRatio
+    });
+    return /*#__PURE__*/ jsx("div", {
+        className: slideSlot({
+            className
+        }),
+        ...api.getItemProps({
+            index
+        }),
+        children: children
+    });
+};
+Carousel.Previous = function({ className, icon = 'token-icon-carousel-prev' }) {
+    const { api } = useCarouselContext();
+    const { prevTrigger } = carouselVariants();
+    return /*#__PURE__*/ jsx(Button, {
+        className: prevTrigger({
+            className
+        }),
+        ...api.getPrevTriggerProps(),
+        icon: icon
+    });
+};
+Carousel.Next = function({ className, icon = 'token-icon-carousel-next' }) {
+    const { api } = useCarouselContext();
+    const { nextTrigger } = carouselVariants();
+    return /*#__PURE__*/ jsx(Button, {
+        className: nextTrigger({
+            className
+        }),
+        ...api.getNextTriggerProps(),
+        icon: icon
+    });
+};
+Carousel.Indicators = function({ className, children }) {
+    const { api } = useCarouselContext();
+    const { indicatorGroup, indicator } = carouselVariants();
+    if (children) return /*#__PURE__*/ jsx("div", {
+        className: indicatorGroup({
+            className
+        }),
+        ...api.getIndicatorGroupProps(),
+        children: children
+    });
+    return /*#__PURE__*/ jsx("div", {
+        className: indicatorGroup({
+            className
+        }),
+        ...api.getIndicatorGroupProps(),
+        children: api.pageSnapPoints.map((_, index)=>/*#__PURE__*/ jsx(Button, {
+                className: indicator(),
+                ...api.getIndicatorProps({
+                    index
+                })
+            }, index))
+    });
+};
+Carousel.Indicator = function({ index, className, children }) {
+    const { api } = useCarouselContext();
+    const { indicator } = carouselVariants();
+    return /*#__PURE__*/ jsx(Button, {
+        className: indicator({
+            className
+        }),
+        ...api.getIndicatorProps({
+            index
+        }),
+        children: children
+    });
+};
+Carousel.Autoplay = function({ className }) {
+    const { api } = useCarouselContext();
+    const { autoplayTrigger: autoplayTriggerSlot } = carouselVariants();
+    return /*#__PURE__*/ jsx(Button, {
+        icon: api.isPlaying ? 'icon-[mdi--pause]' : 'icon-[mdi--play]',
+        className: autoplayTriggerSlot({
+            className
+        }),
+        ...api.getAutoplayTriggerProps()
+    });
+};
+Carousel.Control = function({ children, className }) {
+    const { api } = useCarouselContext();
+    const { control } = carouselVariants();
+    return /*#__PURE__*/ jsx("div", {
+        className: control({
+            className
+        }),
+        ...api.getControlProps(),
+        children: children
+    });
+};
+Carousel.Root = Carousel;
+export { Carousel };

package/dist/molecules/checkbox.js

@@ -0,0 +1,92 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { connect, machine } from "@zag-js/checkbox";
+import { normalizeProps, useMachine } from "@zag-js/react";
+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 checkboxVariants = tv({
+    slots: {
+        root: [],
+        label: [
+            'flex items-center gap-2 cursor-pointer'
+        ],
+        checkbox: [
+            'appearance-none relative cursor-pointer flex-shrink-0',
+            'h-checkbox w-checkbox',
+            'border border-checkbox-border rounded-checkbox',
+            'bg-checkbox data-[state=checked]:bg-checkbox-checked border-checkbox',
+            'after:absolute after:left-1/2 after:top-1/2 after:-translate-x-1/2 after:-translate-y-1/2',
+            'data-[state=checked]:after:token-icon-checkbox text-icon-fg data-[state=checked]:text-checkbox-icon-md',
+            'data-[disabled]:opacity-checkbox-disabled data-[disabled]:cursor-not-allowed data-[disabled]:grayscale',
+            'transition-all duration-200',
+            'data-[focus]:outline-none',
+            'data-[focus]:ring',
+            'data-[focus]:ring-checkbox-ring',
+            'data-[invalid]:ring-checkbox-error ',
+            'data-[invalid]:border-checkbox-border-error',
+            'data-[state=indeterminate]:bg-checkbox-indeterminate',
+            'data-[state=indeterminate]:after:w-indeterminate data-[state=indeterminate]:after:h-indeterminate',
+            'data-[state=indeterminate]:after:bg-icon-fg'
+        ]
+    }
+});
+function Checkbox({ id, name, checked, defaultChecked, indeterminate, disabled, onCheckedChange, className, invalid, readOnly, labelText, errorText, helperText }) {
+    const fallbackId = useId();
+    const service = useMachine(machine, {
+        id: id || fallbackId,
+        name,
+        disabled,
+        defaultChecked,
+        readOnly,
+        checked: indeterminate ? 'indeterminate' : checked,
+        invalid: invalid,
+        onCheckedChange: (details)=>{
+            onCheckedChange?.(details);
+        }
+    });
+    const api = connect(service, normalizeProps);
+    const { checkbox: checkboxSlot, root, label: labelSlot } = checkboxVariants({
+        className
+    });
+    return /*#__PURE__*/ jsxs("div", {
+        className: root({
+            className
+        }),
+        children: [
+            /*#__PURE__*/ jsxs(Label, {
+                className: labelSlot(),
+                ...api.getRootProps(),
+                children: [
+                    /*#__PURE__*/ jsx("div", {
+                        ...api.getControlProps(),
+                        className: checkboxSlot({
+                            className
+                        }),
+                        "data-invalid": invalid
+                    }),
+                    /*#__PURE__*/ jsx("input", {
+                        ...api.getHiddenInputProps()
+                    }),
+                    labelText && /*#__PURE__*/ jsx(Label, {
+                        ...api.getLabelProps(),
+                        children: labelText
+                    })
+                ]
+            }),
+            (errorText || helperText) && /*#__PURE__*/ jsxs("div", {
+                children: [
+                    invalid && errorText && /*#__PURE__*/ jsx(ErrorText, {
+                        children: errorText
+                    }),
+                    !invalid && helperText && /*#__PURE__*/ jsx(ExtraText, {
+                        children: helperText
+                    })
+                ]
+            })
+        ]
+    });
+}
+Checkbox.displayName = 'Checkbox';
+export { Checkbox };

package/dist/molecules/color-select.js

@@ -0,0 +1,159 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "../atoms/button.js";
+import { Icon } from "../atoms/icon.js";
+import { tv } from "../utils.js";
+const colorSelectVariants = tv({
+    slots: {
+        group: [
+            'grid place-items-start'
+        ],
+        cell: 'grid',
+        atom: [
+            'relative cursor-pointer p-color-select-atom',
+            'aspect-square overflow-hidden',
+            'border-2 transition-all duration-200',
+            'border-color-select-border hover:border-color-select-border-hover shadow-color-select',
+            'focus-visible:outline-none',
+            'focus-visible:ring',
+            'focus-visible:ring-color-select-ring',
+            'data-[selected=true]:border-color-select-selected data-[selected=true]:shadow-none'
+        ],
+        color: [
+            'absolute',
+            'w-full h-full hover:brightness-75',
+            'data-[selected=true]:brightness-75'
+        ],
+        icon: [
+            'absolute items-center hidden justify-center',
+            'text-color-select-fg-check drop-shadow-sm',
+            'pointer-events-none',
+            'data-[selected=true]:flex'
+        ],
+        labelContainer: [
+            'text-center'
+        ],
+        labelText: [
+            'text-xs text-color-select-label-fg'
+        ],
+        countText: [
+            'text-xs text-color-select-label-fg'
+        ]
+    },
+    variants: {
+        radius: {
+            sm: {
+                atom: 'rounded-color-select-sm'
+            },
+            md: {
+                atom: 'rounded-color-select-md'
+            },
+            lg: {
+                atom: 'rounded-color-select-lg'
+            },
+            full: {
+                atom: 'rounded-color-select-full'
+            }
+        },
+        size: {
+            sm: {
+                group: 'gap-color-select-group-sm',
+                atom: 'h-color-select-sm',
+                icon: 'text-color-select-sm'
+            },
+            md: {
+                group: 'gap-color-select-group-md',
+                atom: 'h-color-select-md',
+                icon: 'text-color-select-md'
+            },
+            lg: {
+                group: 'gap-color-select-group-lg',
+                atom: 'h-color-select-lg',
+                icon: 'text-color-select-lg'
+            },
+            full: {
+                group: 'h-full',
+                cell: 'h-full',
+                atom: 'h-full',
+                icon: 'w-color-select-icon h-color-select-icon'
+            }
+        },
+        layout: {
+            list: {
+                group: 'grid-cols-1'
+            },
+            grid: {
+                group: 'color-select-grid'
+            }
+        },
+        disabled: {
+            true: {
+                atom: 'select-disabled hover:border-color-select-border'
+            }
+        }
+    },
+    defaultVariants: {
+        radius: 'full',
+        size: 'lg',
+        layout: 'list'
+    }
+});
+const ColorSelect = ({ colors, layout = 'grid', size = 'lg', radius = 'full', disabled, onColorClick, selectionMode = 'single' })=>{
+    const { group, cell, atom, color: colorSlot, icon, labelContainer, labelText, countText } = colorSelectVariants({
+        layout,
+        size,
+        radius,
+        disabled
+    });
+    return /*#__PURE__*/ jsx("div", {
+        className: group(),
+        role: 'single' === selectionMode ? 'radiogroup' : 'group',
+        children: colors.map((colorItem)=>/*#__PURE__*/ jsxs("div", {
+                className: cell(),
+                children: [
+                    /*#__PURE__*/ jsxs(Button, {
+                        theme: "borderless",
+                        className: `${atom()} ${colorItem.disabled ? 'select-disabled' : ''}`,
+                        disabled: colorItem.disabled || disabled,
+                        onClick: ()=>onColorClick?.(colorItem.color),
+                        role: 'single' === selectionMode ? 'radio' : 'checkbox',
+                        "aria-label": `Select color ${colorItem.label ?? colorItem.color}`,
+                        "aria-checked": !!colorItem.selected,
+                        "data-selected": colorItem.selected || false,
+                        children: [
+                            /*#__PURE__*/ jsx("span", {
+                                className: colorSlot(),
+                                style: {
+                                    backgroundColor: colorItem.color
+                                },
+                                "aria-hidden": "true",
+                                "data-selected": colorItem.selected || false
+                            }),
+                            /*#__PURE__*/ jsx(Icon, {
+                                icon: "token-icon-color-select",
+                                className: icon(),
+                                "data-selected": colorItem.selected || false
+                            })
+                        ]
+                    }),
+                    (null != colorItem.label || null != colorItem.count) && /*#__PURE__*/ jsxs("div", {
+                        className: labelContainer(),
+                        children: [
+                            colorItem.label && /*#__PURE__*/ jsx("span", {
+                                className: labelText(),
+                                children: colorItem.label
+                            }),
+                            null != colorItem.count && /*#__PURE__*/ jsxs("span", {
+                                className: countText(),
+                                children: [
+                                    "(",
+                                    colorItem.count,
+                                    ")"
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            }, colorItem.id || colorItem.color))
+    });
+};
+export { ColorSelect };