@techsio/ui-kit 0.3.2 → 0.4.0

package/dist/molecules/carousel.js

@@ -8,161 +8,183 @@ import { Image } from "../atoms/image.js";
 const carouselVariants = tv({
     slots: {
         wrapper: [
-            'relative w-fit'
+            "relative w-fit"
         ],
         root: [
-            'relative overflow-hidden',
-            'rounded-carousel'
+            "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'
+            "flex gap-carousel-control p-carousel-control",
+            "bg-carousel-control-bg",
+            "rounded-carousel"
         ],
         slideGroup: [
-            'overflow-hidden',
-            'scrollbar-hide',
-            'data-[dragging]:cursor-grabbing'
+            "overflow-hidden",
+            "scrollbar-hide",
+            "data-dragging:cursor-grabbing",
+            "data-[orientation=vertical]:h-full"
         ],
         slide: [
-            'relative flex-shrink-0',
-            'flex items-center justify-center',
-            'overflow-hidden'
+            "relative shrink-0",
+            "flex items-center justify-center",
+            "overflow-hidden",
+            "data-[orientation=vertical]:h-full data-[orientation=vertical]:w-full"
         ],
-        prevTrigger: '',
-        nextTrigger: '',
+        prevTrigger: "",
+        nextTrigger: "",
         indicatorGroup: [
-            'flex justify-center w-full items-center gap-carousel-indicator'
+            "flex w-full items-center justify-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'
+            "aspect-carousel-indicator w-carousel-indicator bg-carousel-indicator-bg",
+            "data-current:bg-carousel-indicator-bg-active",
+            "data-current:border-carousel-indicator-border-active",
+            "rounded-carousel-indicator border border-carousel-indicator-border",
+            "transition-colors duration-200 motion-reduce:transition-none"
         ],
         autoplayIcon: [
-            'icon-[mdi--play]',
-            'data-[pressed=true]:icon-[mdi--pause]'
+            "token-icon-carousel-play",
+            "data-[pressed=true]:token-icon-carousel-pause"
         ],
         autoplayTrigger: [
-            'absolute top-carousel-trigger-top right-carousel-trigger-right z-50',
-            'bg-carousel-trigger-bg'
+            "absolute top-carousel-trigger-top right-carousel-trigger-right z-50",
+            "bg-carousel-trigger-bg"
         ],
         spacer: [
-            'flex-1'
+            "flex-1"
         ]
     },
     compoundSlots: [
         {
             slots: [
-                'autoplayTrigger',
-                'indicator',
-                'prevTrigger',
-                'nextTrigger'
+                "autoplayTrigger",
+                "indicator",
+                "prevTrigger",
+                "nextTrigger"
             ],
             class: [
-                'p-carousel-trigger',
-                'focus:outline-none text-carousel-trigger-fg',
-                'focus:ring',
-                'focus:ring-carousel-ring'
+                "p-carousel-trigger",
+                "text-carousel-trigger-fg",
+                "focus-visible:outline-(style:--default-ring-style) focus-visible:outline-(length:--default-ring-width)",
+                "focus-visible:outline-carousel-ring",
+                "focus-visible:outline-offset-(length:--default-ring-offset)"
             ]
         },
         {
             slots: [
-                'prevTrigger',
-                'nextTrigger'
+                "prevTrigger",
+                "nextTrigger"
             ],
             class: [
                 'bg-carousel-trigger-bg hover:bg-carousel-trigger-bg-hover text-carousel-trigger-size',
-                'hover:text-carousel-trigger-fg-hover'
+                'hover:text-carousel-trigger-fg-hover',
+                'transition-colors duration-200 motion-reduce:transition-none'
             ]
         }
     ],
     variants: {
         objectFit: {
             cover: {
-                slide: '*:w-full *:h-full *:object-cover'
+                slide: "*:h-full *:w-full *:object-cover"
             },
             contain: {
-                slide: '*:w-full *:h-full *:object-contain'
+                slide: "*:h-full *:w-full *:object-contain"
             },
             fill: {
-                slide: '*:w-full *:h-full *:object-fill'
+                slide: "*:h-full *:w-full *:object-fill"
             },
             none: {
-                slide: ''
+                slide: ""
             }
         },
+        controlPosition: {
+            side: {
+                control: "flex-col items-center justify-between"
+            },
+            top: {
+                control: "-translate-x-1/2 absolute top-0 left-1/2"
+            },
+            bottom: {
+                control: "-translate-x-1/2 absolute bottom-0 left-1/2"
+            },
+            unset: {}
+        },
         aspectRatio: {
             square: {
-                slide: 'aspect-square'
+                slideGroup: "data-[orientation=vertical]:aspect-square",
+                slide: "data-[orientation=horizontal]:aspect-square"
             },
             landscape: {
-                slide: 'aspect-video'
+                slideGroup: "data-[orientation=vertical]:aspect-video",
+                slide: "data-[orientation=horizontal]:aspect-video"
             },
             portrait: {
-                slide: 'aspect-portrait'
+                slideGroup: "data-[orientation=vertical]:aspect-portrait",
+                slide: "data-[orientation=horizontal]:aspect-portrait"
             },
             wide: {
-                slide: 'aspect-wide'
+                slideGroup: "data-[orientation=vertical]:aspect-wide",
+                slide: "data-[orientation=horizontal]:aspect-wide"
             },
             none: {
-                slide: ''
+                slideGroup: "",
+                slide: ""
             }
         },
         size: {
             sm: {
                 root: [
-                    'data-[orientation=horizontal]:max-w-carousel-root-sm',
-                    'data-[orientation=vertical]:max-h-carousel-root-sm'
+                    "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'
+                    "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'
+                    "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'
+                    "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'
+                    "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'
+                    "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'
+                    "data-[orientation=horizontal]:w-full",
+                    "data-[orientation=vertical]:h-full"
                 ]
             }
         }
     },
     defaultVariants: {
-        aspectRatio: 'square',
-        objectFit: 'cover',
-        size: 'md'
+        aspectRatio: "square",
+        objectFit: "cover",
+        size: "md",
+        controlPosition: "bottom"
     }
 });
 const CarouselContext = /*#__PURE__*/ createContext(null);
 const useCarouselContext = ()=>{
     const context = useContext(CarouselContext);
-    if (!context) throw new Error('Carousel components must be used within Carousel.Root');
+    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 }) {
+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", snapType = "mandatory", className, children, width, height, onPageChange, ...props }) {
     const fallbackId = useId();
     const service = useMachine(machine, {
         id: id ?? fallbackId,
@@ -176,6 +198,7 @@ function Carousel({ id, size, objectFit, aspectRatio, orientation = 'horizontal'
         spacing,
         padding,
         dir,
+        snapType,
         onPageChange,
         ...props
     });
@@ -185,6 +208,24 @@ function Carousel({ id, size, objectFit, aspectRatio, orientation = 'horizontal'
         objectFit,
         aspectRatio
     });
+    const rootProps = api.getRootProps();
+    const resolvedRootStyle = {
+        ...rootProps.style,
+        ...void 0 !== width ? {
+            width
+        } : {},
+        ...void 0 !== height ? {
+            height
+        } : {}
+    };
+    const resolvedWrapperStyle = {
+        ..."full" === size ? {
+            width: "100%"
+        } : {},
+        ...void 0 !== width ? {
+            width
+        } : {}
+    };
     return /*#__PURE__*/ jsx(CarouselContext.Provider, {
         value: {
             api,
@@ -193,18 +234,20 @@ function Carousel({ id, size, objectFit, aspectRatio, orientation = 'horizontal'
             aspectRatio
         },
         children: /*#__PURE__*/ jsx("div", {
-            className: wrapper({
-                className
-            }),
+            className: wrapper(),
+            style: resolvedWrapperStyle,
             children: /*#__PURE__*/ jsx("div", {
-                className: root(),
-                ...api.getRootProps(),
+                ...rootProps,
+                className: root({
+                    className
+                }),
+                style: resolvedRootStyle,
                 children: children
             })
         })
     });
 }
-Carousel.Slides = function({ slides, size: overrideSize, imageAs, width, height, className }) {
+Carousel.Slides = function({ slides, size: overrideSize, imageAs, className }) {
     const { api, size: contextSize, objectFit, aspectRatio } = useCarouselContext();
     const size = overrideSize ?? contextSize;
     const { slideGroup } = carouselVariants({
@@ -212,7 +255,8 @@ Carousel.Slides = function({ slides, size: overrideSize, imageAs, width, height,
         objectFit,
         aspectRatio
     });
-    const ImageComponent = imageAs || Image;
+    const hasCustomImageComponent = imageAs && imageAs !== Image;
+    const CustomImageComponent = hasCustomImageComponent ? imageAs : Image;
     return /*#__PURE__*/ jsx("div", {
         className: slideGroup({
             className
@@ -220,14 +264,15 @@ Carousel.Slides = function({ slides, size: overrideSize, imageAs, width, height,
         ...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,
+                children: slide.content || (hasCustomImageComponent ? /*#__PURE__*/ jsx(CustomImageComponent, {
+                    alt: slide.alt || "",
+                    src: slide.src || "",
                     ...slide.imageProps
-                })
+                }) : /*#__PURE__*/ jsx(Image, {
+                    alt: slide.alt || "",
+                    src: slide.src || "",
+                    ...slide.imageProps
+                }))
             }, slide.id))
     });
 };
@@ -239,17 +284,18 @@ Carousel.Slide = function({ index, children, size: overrideSize, className }) {
         objectFit,
         aspectRatio
     });
+    const itemProps = api.getItemProps({
+        index
+    });
     return /*#__PURE__*/ jsx("div", {
+        ...itemProps,
         className: slideSlot({
             className
         }),
-        ...api.getItemProps({
-            index
-        }),
         children: children
     });
 };
-Carousel.Previous = function({ className, icon = 'token-icon-carousel-prev' }) {
+Carousel.Previous = function({ className, icon = "token-icon-carousel-prev" }) {
     const { api } = useCarouselContext();
     const { prevTrigger } = carouselVariants();
     return /*#__PURE__*/ jsx(Button, {
@@ -260,7 +306,7 @@ Carousel.Previous = function({ className, icon = 'token-icon-carousel-prev' }) {
         icon: icon
     });
 };
-Carousel.Next = function({ className, icon = 'token-icon-carousel-next' }) {
+Carousel.Next = function({ className, icon = "token-icon-carousel-next" }) {
     const { api } = useCarouselContext();
     const { nextTrigger } = carouselVariants();
     return /*#__PURE__*/ jsx(Button, {
@@ -288,10 +334,12 @@ Carousel.Indicators = function({ className, children }) {
         ...api.getIndicatorGroupProps(),
         children: api.pageSnapPoints.map((_, index)=>/*#__PURE__*/ jsx(Button, {
                 className: indicator(),
+                size: "current",
+                theme: "unstyled",
                 ...api.getIndicatorProps({
                     index
                 })
-            }, index))
+            }, `indicator-${index}`))
     });
 };
 Carousel.Indicator = function({ index, className, children }) {
@@ -301,6 +349,8 @@ Carousel.Indicator = function({ index, className, children }) {
         className: indicator({
             className
         }),
+        size: "current",
+        theme: "unstyled",
         ...api.getIndicatorProps({
             index
         }),
@@ -311,16 +361,18 @@ 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
         }),
+        icon: api.isPlaying ? "token-icon-carousel-pause" : "token-icon-carousel-play",
         ...api.getAutoplayTriggerProps()
     });
 };
-Carousel.Control = function({ children, className }) {
+Carousel.Control = function({ children, className, controlPosition }) {
     const { api } = useCarouselContext();
-    const { control } = carouselVariants();
+    const { control } = carouselVariants({
+        controlPosition
+    });
     return /*#__PURE__*/ jsx("div", {
         className: control({
             className

package/dist/molecules/color-select.js

@@ -5,99 +5,99 @@ import { tv } from "../utils.js";
 const colorSelectVariants = tv({
     slots: {
         group: [
-            'grid place-items-start'
+            "grid place-items-start"
         ],
-        cell: 'grid',
+        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'
+            "relative cursor-pointer p-color-select-atom",
+            "aspect-square overflow-hidden",
+            "border-2 transition-all duration-200 motion-reduce:transition-none",
+            "border-color-select-border shadow-color-select hover:border-color-select-border-hover",
+            "focus-visible:outline-(style:--default-ring-style) focus-visible:outline-(length:--default-ring-width)",
+            "focus-visible:outline-color-select-ring",
+            "focus-visible:outline-offset-(length:--default-ring-offset)",
+            "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'
+            "absolute",
+            "h-full w-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'
+            "absolute hidden items-center justify-center",
+            "text-color-select-fg-check drop-shadow-sm",
+            "pointer-events-none",
+            "data-[selected=true]:flex"
         ],
         labelContainer: [
-            'text-center'
+            "text-center"
         ],
         labelText: [
-            'text-xs text-color-select-label-fg'
+            "text-color-select-label-fg text-xs"
         ],
         countText: [
-            'text-xs text-color-select-label-fg'
+            "text-color-select-label-fg text-xs"
         ]
     },
     variants: {
         radius: {
             sm: {
-                atom: 'rounded-color-select-sm'
+                atom: "rounded-color-select-sm"
             },
             md: {
-                atom: 'rounded-color-select-md'
+                atom: "rounded-color-select-md"
             },
             lg: {
-                atom: 'rounded-color-select-lg'
+                atom: "rounded-color-select-lg"
             },
             full: {
-                atom: 'rounded-color-select-full'
+                atom: "rounded-color-select-full"
             }
         },
         size: {
             sm: {
-                group: 'gap-color-select-group-sm',
-                atom: 'h-color-select-sm',
-                icon: 'text-color-select-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'
+                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'
+                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'
+                group: "h-full w-full gap-color-select-group-md",
+                cell: "h-full w-full",
+                atom: "h-full",
+                icon: "size-color-select-icon"
             }
         },
         layout: {
             list: {
-                group: 'grid-cols-1'
+                group: "grid-cols-1"
             },
             grid: {
-                group: 'color-select-grid'
+                group: "color-select-grid"
             }
         },
         disabled: {
             true: {
-                atom: 'select-disabled hover:border-color-select-border'
+                atom: "select-disabled hover:border-color-select-border"
             }
         }
     },
     defaultVariants: {
-        radius: 'full',
-        size: 'lg',
-        layout: 'list'
+        radius: "full",
+        size: "lg",
+        layout: "list"
     }
 });
-const ColorSelect = ({ colors, layout = 'grid', size = 'lg', radius = 'full', disabled, onColorClick, selectionMode = 'single' })=>{
+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,
@@ -106,32 +106,32 @@ const ColorSelect = ({ colors, layout = 'grid', size = 'lg', radius = 'full', di
     });
     return /*#__PURE__*/ jsx("div", {
         className: group(),
-        role: 'single' === selectionMode ? 'radiogroup' : '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' : ''}`,
+                        "aria-checked": !!colorItem.selected,
+                        "aria-label": `Select color ${colorItem.label ?? colorItem.color}`,
+                        className: `${atom()} ${colorItem.disabled ? "select-disabled" : ""}`,
+                        "data-selected": colorItem.selected,
                         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,
+                        role: "single" === selectionMode ? "radio" : "checkbox",
+                        theme: "borderless",
                         children: [
                             /*#__PURE__*/ jsx("span", {
+                                "aria-hidden": "true",
                                 className: colorSlot(),
+                                "data-selected": colorItem.selected,
                                 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
+                                "data-selected": colorItem.selected,
+                                icon: "token-icon-color-select"
                             })
                         ]
                     }),