@techsio/ui-kit 0.3.1 → 0.4.0

package/dist/organisms/gallery.js

@@ -0,0 +1,244 @@
+import { jsx } from "react/jsx-runtime";
+import { Fragment, createContext, useContext, useEffect, useState } from "react";
+import { Button } from "../atoms/button.js";
+import { Image } from "../atoms/image.js";
+import { Carousel } from "../molecules/carousel.js";
+import { tv } from "../utils.js";
+const galleryVariants = tv({
+    slots: {
+        root: "w-full gap-gallery-root",
+        main: "relative flex min-w-0 h-fit",
+        thumbnails: "shrink-0",
+        thumbnailsScrollArea: "scrollbar-thin",
+        thumbnailsList: "flex gap-gallery-sm",
+        thumbnailTrigger: [
+            "relative shrink-0",
+            "size-(--gallery-thumbnail-size)",
+            "aspect-square",
+            "overflow-hidden rounded-gallery-trigger border border-gallery-trigger-border bg-gallery-trigger-bg",
+            "cursor-pointer p-gallery-trigger",
+            "focus-visible:outline-(style:--default-ring-style) focus-visible:outline-(length:--default-ring-width)",
+            "focus-visible:outline-gallery-trigger-ring",
+            "focus-visible:outline-offset-(length:--default-ring-offset)",
+            "data-active:border-gallery-trigger-border-active",
+            "data-active:bg-gallery-trigger-bg-active",
+            "shadow-gallery-trigger",
+            "brightness-gallery-trigger",
+            "hover:brightness-gallery-trigger-active data-active:brightness-gallery-trigger-active",
+            "transition-all duration-200 motion-reduce:transition-none",
+            "*:h-full *:w-full *:object-cover"
+        ]
+    },
+    variants: {
+        orientation: {
+            horizontal: {
+                root: "flex flex-col",
+                main: "order-1",
+                thumbnails: "order-2",
+                thumbnailsScrollArea: "w-full overflow-x-auto overflow-y-hidden",
+                thumbnailsList: "flex-row items-center py-gallery-sm"
+            },
+            vertical: {
+                root: "flex flex-col md:grid md:grid-cols-[minmax(0,1fr)_auto] md:items-start",
+                main: "order-1 md:col-start-1 md:row-start-1",
+                thumbnails: "order-2 md:col-start-2 md:row-start-1",
+                thumbnailsScrollArea: "w-full overflow-x-auto overflow-y-hidden md:max-h-gallery md:overflow-x-hidden md:overflow-y-auto",
+                thumbnailsList: "flex-row items-center py-gallery-sm md:flex-col md:items-stretch md:px-gallery-xs md:py-0"
+            }
+        }
+    },
+    defaultVariants: {
+        orientation: "vertical"
+    }
+});
+const GalleryContext = /*#__PURE__*/ createContext(null);
+function useGalleryContext() {
+    const context = useContext(GalleryContext);
+    if (!context) throw new Error("Gallery components must be used within Gallery");
+    return context;
+}
+function clampPage(page, maxPage) {
+    if (Number.isNaN(page)) return 0;
+    if (page < 0) return 0;
+    if (page > maxPage) return maxPage;
+    return page;
+}
+function getDefaultThumbnailAriaLabel({ index }) {
+    return `Show slide ${index + 1}`;
+}
+function Gallery({ items, children, orientation, value, defaultValue = 0, onValueChange, showThumbnails = true, hideThumbnailsWhenSingle = true, thumbnailSize = 60, thumbnailImageAs, getThumbnailAriaLabel = getDefaultThumbnailAriaLabel, carouselProps, emptyState, className, ...props }) {
+    const maxPage = Math.max(items.length - 1, 0);
+    const [internalPage, setInternalPage] = useState(defaultValue);
+    const isControlled = void 0 !== value;
+    const page = clampPage(isControlled ? value : internalPage, maxPage);
+    const shouldShowThumbnails = showThumbnails && !(hideThumbnailsWhenSingle && items.length <= 1);
+    const styles = galleryVariants({
+        orientation
+    });
+    useEffect(()=>{
+        if (!isControlled) setInternalPage((currentPage)=>clampPage(currentPage, maxPage));
+    }, [
+        isControlled,
+        maxPage
+    ]);
+    const setPage = (nextPage)=>{
+        const safePage = clampPage(nextPage, maxPage);
+        if (!isControlled) setInternalPage(safePage);
+        onValueChange?.({
+            value: safePage
+        });
+    };
+    return /*#__PURE__*/ jsx(GalleryContext.Provider, {
+        value: {
+            items,
+            page,
+            setPage,
+            showThumbnails: shouldShowThumbnails,
+            thumbnailSize,
+            thumbnailImageAs,
+            getThumbnailAriaLabel,
+            styles,
+            carouselProps: carouselProps
+        },
+        children: /*#__PURE__*/ jsx("div", {
+            className: styles.root({
+                className
+            }),
+            ...props,
+            children: 0 === items.length ? emptyState : children
+        })
+    });
+}
+Gallery.Main = function({ children, className, ...props }) {
+    const { styles } = useGalleryContext();
+    return /*#__PURE__*/ jsx("div", {
+        className: styles.main({
+            className
+        }),
+        ...props,
+        children: children
+    });
+};
+Gallery.Thumbnails = function({ children, className, listClassName, scrollAreaClassName, thumbnailClassName, renderThumbnail, ...props }) {
+    const { items, page, setPage, showThumbnails, styles } = useGalleryContext();
+    if (!showThumbnails) return null;
+    const thumbnails = children ? children : items.map((item, index)=>{
+        const defaultThumbnail = /*#__PURE__*/ jsx(Gallery.Thumbnail, {
+            className: thumbnailClassName,
+            index: index
+        }, item.id);
+        if (!renderThumbnail) return defaultThumbnail;
+        return /*#__PURE__*/ jsx(Fragment, {
+            children: renderThumbnail({
+                item,
+                index,
+                isActive: page === index,
+                setActive: setPage,
+                defaultThumbnail
+            })
+        }, item.id);
+    });
+    return /*#__PURE__*/ jsx("div", {
+        className: styles.thumbnails({
+            className
+        }),
+        ...props,
+        children: /*#__PURE__*/ jsx("div", {
+            className: styles.thumbnailsScrollArea({
+                className: scrollAreaClassName
+            }),
+            children: /*#__PURE__*/ jsx("div", {
+                className: styles.thumbnailsList({
+                    className: listClassName
+                }),
+                children: thumbnails
+            })
+        })
+    });
+};
+Gallery.Thumbnail = function({ index, children, imageAs, imageClassName, className, style, onClick, ...props }) {
+    const { items, page, setPage, styles, thumbnailSize, thumbnailImageAs, getThumbnailAriaLabel } = useGalleryContext();
+    const item = items[index];
+    if (!item) return null;
+    const isActive = page === index;
+    const thumbnailSource = item.thumbnailSrc || item.src || "";
+    const thumbnailAlt = item.thumbnailAlt ?? item.alt ?? `Product image ${index + 1}`;
+    const resolvedImageAs = imageAs || thumbnailImageAs || Image;
+    const hasCustomThumbnailComponent = resolvedImageAs !== Image;
+    const CustomThumbnailComponent = hasCustomThumbnailComponent ? resolvedImageAs : Image;
+    const handleClick = (event)=>{
+        onClick?.(event);
+        if (event.defaultPrevented) return;
+        setPage(index);
+    };
+    const resolvedStyle = {
+        "--gallery-thumbnail-size": `${thumbnailSize}px`,
+        ...style
+    };
+    return /*#__PURE__*/ jsx(Button, {
+        "aria-current": isActive ? "true" : void 0,
+        "aria-label": getThumbnailAriaLabel({
+            index,
+            item
+        }),
+        className: styles.thumbnailTrigger({
+            className
+        }),
+        "data-active": isActive || void 0,
+        onClick: handleClick,
+        size: "current",
+        style: resolvedStyle,
+        theme: "unstyled",
+        type: "button",
+        ...props,
+        children: children ?? item.thumbnailContent ?? (thumbnailSource ? hasCustomThumbnailComponent ? /*#__PURE__*/ jsx(CustomThumbnailComponent, {
+            alt: thumbnailAlt,
+            className: imageClassName,
+            height: thumbnailSize,
+            src: thumbnailSource,
+            width: thumbnailSize,
+            ...item.thumbnailImageProps
+        }) : /*#__PURE__*/ jsx(Image, {
+            alt: thumbnailAlt,
+            className: imageClassName,
+            height: thumbnailSize,
+            src: thumbnailSource,
+            width: thumbnailSize,
+            ...item.thumbnailImageProps
+        }) : null)
+    });
+};
+Gallery.Carousel = function({ children, onPageChange, ...props }) {
+    const { items, page, setPage, carouselProps } = useGalleryContext();
+    const inheritedProps = carouselProps || {};
+    const mergedProps = {
+        ...inheritedProps,
+        ...props
+    };
+    const inheritedOnPageChange = inheritedProps.onPageChange;
+    const handlePageChange = (details)=>{
+        setPage(details.page);
+        if (inheritedOnPageChange === onPageChange) return void inheritedOnPageChange?.(details);
+        inheritedOnPageChange?.(details);
+        onPageChange?.(details);
+    };
+    return /*#__PURE__*/ jsx(Carousel, {
+        ...mergedProps,
+        onPageChange: handlePageChange,
+        page: page,
+        slideCount: items.length,
+        children: children ?? /*#__PURE__*/ jsx(Gallery.Slides, {})
+    });
+};
+Gallery.Slides = function({ slides, size, imageAs, className }) {
+    const { items, carouselProps } = useGalleryContext();
+    const inheritedProps = carouselProps || {};
+    return /*#__PURE__*/ jsx(Carousel.Slides, {
+        className: className,
+        imageAs: imageAs ?? inheritedProps.imageAs,
+        size: size,
+        slides: slides || items
+    });
+};
+Gallery.Root = Gallery;
+export { Gallery };

package/dist/organisms/header.js

@@ -5,55 +5,57 @@ import { tv } from "../utils.js";
 const headerVariants = tv({
     slots: {
         root: [
-            'w-full @container bg-header-bg',
-            'flex justify-between',
-            'max-w-header-max',
-            'relative'
+            "@container w-full bg-header-bg",
+            "flex justify-between",
+            "max-w-header-max",
+            "relative"
         ],
-        desktop: 'flex @max-header-desktop:hidden w-full',
+        desktop: "flex @max-header-desktop:hidden w-full",
         mobile: [
-            'data-[open=false]:hidden @header-desktop:hidden *:flex *:flex-col absolute top-full data-[position=left]:left-0 data-[position=right]:right-0'
+            "absolute top-full @header-desktop:hidden *:flex *:flex-col data-[position=right]:right-0 data-[position=left]:left-0 data-[open=false]:hidden"
         ],
         container: [
-            'grid gap-header-container w-full',
-            'data-[position=start]:justify-items-start-safe',
-            'data-[position=center]:justify-items-center-safe',
-            'data-[position=end]:justify-items-end-safe'
+            "grid w-full gap-header-container",
+            "data-[position=start]:justify-items-start-safe",
+            "data-[position=center]:justify-items-center-safe",
+            "data-[position=end]:justify-items-end-safe"
         ],
         nav: [
-            'flex items-center flex-1',
-            '@max-header-desktop:bg-header-bg'
+            "flex flex-1 items-center",
+            "@max-header-desktop:bg-header-bg"
         ],
         navItem: [
             'bg-header-nav-item-bg hover:bg-header-nav-item-bg-hover',
             'data-[active=true]:text-header-nav-fg-active',
             'data-[active=true]:font-header-nav-active',
-            'min-w-max'
+            'min-w-max',
+            'transition-colors duration-200 motion-reduce:transition-none'
         ],
         actions: [
-            'flex items-center',
-            'shrink-0'
+            "flex items-center",
+            "shrink-0"
         ],
         actionItem: [
             'text-header-actions-fg',
-            'hover:text-header-actions-fg-hover'
+            'hover:text-header-actions-fg-hover',
+            'transition-colors duration-200 motion-reduce:transition-none'
         ],
         hamburger: [
             '@header-desktop:hidden',
             'items-center',
             'text-header-hamburger-fg hover:text-header-hamburger-fg-hover',
-            'transition-colors duration-header',
+            'transition-colors duration-header motion-reduce:transition-none',
             'cursor-pointer'
         ]
     },
     compoundSlots: [
         {
             slots: [
-                'navItem'
+                "navItem"
             ],
             class: [
-                'justify-start font-header-nav text-header-nav-fg hover:text-header-nav-fg-hover',
-                'cursor-pointer'
+                "justify-start font-header-nav text-header-nav-fg hover:text-header-nav-fg-hover",
+                "cursor-pointer"
             ]
         }
     ],
@@ -61,42 +63,42 @@ const headerVariants = tv({
         direction: {
             vertical: {
                 root: [
-                    'flex-col'
+                    "flex-col"
                 ]
             },
             horizontal: {
                 root: [
-                    'flex-row'
+                    "flex-row"
                 ]
             }
         },
         size: {
             sm: {
-                nav: 'gap-header-nav-sm',
-                navItem: 'p-header-item-sm text-header-item-sm',
-                actions: 'gap-header-actions-sm',
-                actionItem: 'text-header-item-sm p-header-item-sm',
-                hamburger: 'text-header-hamburger-sm p-header-hamburger-sm'
+                nav: "gap-header-nav-sm",
+                navItem: "p-header-item-sm text-header-item-sm",
+                actions: "gap-header-actions-sm",
+                actionItem: "p-header-item-sm text-header-item-sm",
+                hamburger: "p-header-hamburger-sm text-header-hamburger-sm"
             },
             md: {
-                nav: 'gap-header-nav-md',
-                navItem: 'p-header-item-md text-header-item-md',
-                actions: 'gap-header-actions-md',
-                actionItem: 'text-header-item-md p-header-item-md',
-                hamburger: 'text-header-hamburger-md p-header-hamburger-md'
+                nav: "gap-header-nav-md",
+                navItem: "p-header-item-md text-header-item-md",
+                actions: "gap-header-actions-md",
+                actionItem: "p-header-item-md text-header-item-md",
+                hamburger: "p-header-hamburger-md text-header-hamburger-md"
             },
             lg: {
-                nav: 'gap-header-nav-lg',
-                navItem: 'p-header-item-lg text-header-item-lg',
-                actions: 'gap-header-actions-lg',
-                actionItem: 'text-header-item-lg p-header-item-lg',
-                hamburger: 'text-header-hamburger-lg p-header-hamburger-lg'
+                nav: "gap-header-nav-lg",
+                navItem: "p-header-item-lg text-header-item-lg",
+                actions: "gap-header-actions-lg",
+                actionItem: "p-header-item-lg text-header-item-lg",
+                hamburger: "p-header-hamburger-lg text-header-hamburger-lg"
             }
         }
     },
     defaultVariants: {
-        size: 'md',
-        direction: 'horizontal'
+        size: "md",
+        direction: "horizontal"
     }
 });
 const HeaderContext = /*#__PURE__*/ createContext({
@@ -104,7 +106,7 @@ const HeaderContext = /*#__PURE__*/ createContext({
     setIsMobileMenuOpen: ()=>{},
     toggleMobileMenu: ()=>{}
 });
-function Header({ size = 'md', direction = 'horizontal', className, children, ref, ...props }) {
+function Header({ size = "md", direction = "horizontal", className, children, ref, ...props }) {
     const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
     const toggleMobileMenu = ()=>setIsMobileMenuOpen((prev)=>!prev);
     const { root } = headerVariants({
@@ -119,10 +121,10 @@ function Header({ size = 'md', direction = 'horizontal', className, children, re
             toggleMobileMenu
         },
         children: /*#__PURE__*/ jsx("header", {
-            ref: ref,
             className: root({
                 className
             }),
+            ref: ref,
             ...props,
             children: children
         })
@@ -131,24 +133,24 @@ function Header({ size = 'md', direction = 'horizontal', className, children, re
 Header.Desktop = function({ className, children, ref, ...props }) {
     const { desktop } = headerVariants();
     return /*#__PURE__*/ jsx("section", {
-        ref: ref,
         className: desktop({
             className
         }),
+        ref: ref,
         ...props,
         children: children
     });
 };
-Header.Mobile = function({ className, children, ref, position = 'right', ...props }) {
+Header.Mobile = function({ className, children, ref, position = "right", ...props }) {
     const { isMobileMenuOpen } = useContext(HeaderContext);
     const { mobile } = headerVariants();
     return /*#__PURE__*/ jsx("section", {
-        ref: ref,
         className: mobile({
             className
         }),
         "data-open": isMobileMenuOpen,
         "data-position": position,
+        ref: ref,
         ...props,
         children: children
     });
@@ -156,72 +158,72 @@ Header.Mobile = function({ className, children, ref, position = 'right', ...prop
 Header.Container = function({ className, children, ref, position, ...props }) {
     const { container } = headerVariants();
     return /*#__PURE__*/ jsx("section", {
-        ref: ref,
         className: container({
             className
         }),
         "data-position": position,
+        ref: ref,
         ...props,
         children: children
     });
 };
 Header.Nav = function({ className, children, ref, size: overrideSize, ...props }) {
     const { size: contextSize } = useContext(HeaderContext);
-    const size = overrideSize ?? contextSize ?? 'md';
+    const size = overrideSize ?? contextSize ?? "md";
     const { nav } = headerVariants({
         size
     });
     return /*#__PURE__*/ jsx("nav", {
-        ref: ref,
         className: nav({
             className
         }),
+        ref: ref,
         ...props,
         children: children
     });
 };
 Header.NavItem = function({ active = false, className, children, ref, size: overrideSize, ...props }) {
     const context = useContext(HeaderContext);
-    const size = overrideSize ?? context.size ?? 'md';
+    const size = overrideSize ?? context.size ?? "md";
     const { navItem } = headerVariants({
         size
     });
     return /*#__PURE__*/ jsx("div", {
-        ref: ref,
         className: navItem({
             className
         }),
         "data-active": active || void 0,
+        ref: ref,
         ...props,
         children: children
     });
 };
 Header.Actions = function({ className, children, ref, size: overrideSize, ...props }) {
     const context = useContext(HeaderContext);
-    const size = overrideSize ?? context.size ?? 'md';
+    const size = overrideSize ?? context.size ?? "md";
     const { actions } = headerVariants({
         size
     });
     return /*#__PURE__*/ jsx("div", {
-        ref: ref,
         className: actions({
             className
         }),
+        ref: ref,
         ...props,
         children: children
     });
 };
 Header.ActionItem = function({ className, children, ref, size: overrideSize, ...props }) {
     const context = useContext(HeaderContext);
-    const size = overrideSize ?? context.size ?? 'md';
+    const size = overrideSize ?? context.size ?? "md";
     const { actionItem } = headerVariants({
         size
     });
     return /*#__PURE__*/ jsx("div", {
-        ref: ref,
         className: actionItem({
             className
         }),
+        ref: ref,
         ...props,
         children: children
     });
@@ -230,16 +232,16 @@ Header.Hamburger = function({ className }) {
     const { toggleMobileMenu, isMobileMenuOpen } = useContext(HeaderContext);
     const { hamburger } = headerVariants();
     return /*#__PURE__*/ jsx(Button, {
-        theme: "unstyled",
-        type: "button",
         "aria-expanded": isMobileMenuOpen,
         "aria-label": "Toggle mobile menu",
-        onClick: toggleMobileMenu,
-        size: "current",
         className: hamburger({
             className
         }),
-        icon: isMobileMenuOpen ? 'icon-[mdi--close]' : 'icon-[mdi--menu]'
+        icon: isMobileMenuOpen ? "token-icon-header-close" : "token-icon-header-menu",
+        onClick: toggleMobileMenu,
+        size: "current",
+        theme: "unstyled",
+        type: "button"
     });
 };
 export { Header, HeaderContext };