@techsio/ui-kit 0.3.1 → 0.4.0

package/dist/molecules/accordion.js

@@ -8,106 +8,102 @@ import { tv } from "../utils.js";
 const accordionVariants = tv({
     slots: {
         root: [
-            'flex flex-col w-full',
-            'bg-accordion-bg rounded-accordion',
-            'transition-all duration-200'
+            "flex w-full flex-col",
+            "rounded-accordion bg-accordion-bg",
+            "transition-all duration-200",
+            "transition-all duration-200 motion-reduce:transition-none"
         ],
-        item: '',
-        title: 'grid place-items-start',
+        item: "",
+        title: "grid place-items-start",
         titleTrigger: [
-            'flex items-center relative justify-between w-full cursor-pointer',
-            'rounded-none',
-            'font-accordion-title',
-            'text-accordion-title-fg bg-accordion-title-bg',
-            'focus-visible:outline-none',
-            'focus-visible:ring',
-            'focus-visible:ring-accordion-ring',
-            'focus-visible:bg-accordion-bg-hover',
-            'data-[disabled]:text-accordion-fg-disabled',
-            'hover:bg-accordion-title-bg-hover',
-            'px-0 py-0 pr-accordion-icon',
-            'data-[disabled=true]:cursor-not-allowed'
+            "relative flex w-full cursor-pointer items-center justify-between",
+            "rounded-none",
+            "font-accordion-title",
+            "bg-accordion-title-bg text-accordion-title-fg",
+            "hover:bg-accordion-title-bg-hover",
+            "pr-accordion-icon",
+            "data-[disabled=true]:cursor-not-allowed"
         ],
         subtitle: [
-            'text-accordion-subtitle-fg'
+            "text-accordion-subtitle-fg"
         ],
         content: [
-            'text-accordion-content-fg bg-accordion-content-bg'
+            "bg-accordion-content-bg text-accordion-content-fg"
         ],
         icon: [
-            'data-[state=expanded]:rotate-180'
+            "data-[state=expanded]:rotate-180"
         ]
     },
     variants: {
         variant: {
             default: {
-                root: 'border-accordion-border border-(length:--border-width-accordion)',
-                item: 'border-b-(length:--border-width-accordion) border-accordion-border'
+                root: "border-(length:--border-width-accordion) border-accordion-border",
+                item: "border-b-(length:--border-width-accordion) border-accordion-border"
             },
             borderless: {},
             child: {}
         },
         shadow: {
             sm: {
-                root: 'shadow-accordion-root-sm',
-                content: 'shadow-accordion-content-sm'
+                root: "shadow-accordion-root-sm",
+                content: "shadow-accordion-content-sm"
             },
             md: {
-                root: 'shadow-accordion-root-md',
-                content: 'shadow-accordion-content-md'
+                root: "shadow-accordion-root-md",
+                content: "shadow-accordion-content-md"
             },
-            none: ''
+            none: ""
         },
         size: {
             sm: {
-                title: 'text-accordion-title-sm p-accordion-title-sm',
-                content: 'text-accordion-content-sm px-accordion-content-sm',
-                subtitle: 'text-accordion-subtitle-sm'
+                title: "p-accordion-title-sm text-accordion-title-sm",
+                content: "px-accordion-content-sm text-accordion-content-sm",
+                subtitle: "text-accordion-subtitle-sm"
             },
             md: {
-                title: 'text-accordion-title-md p-accordion-title-md',
-                content: 'text-accordion-content-md p-accordion-content-md',
-                subtitle: 'text-accordion-subtitle-md'
+                title: "p-accordion-title-md text-accordion-title-md",
+                content: "p-accordion-content-md text-accordion-content-md",
+                subtitle: "text-accordion-subtitle-md"
             },
             lg: {
-                title: 'text-accordion-title-lg p-accordion-title-lg',
-                content: 'text-accordion-content-lg p-accordion-content-lg',
-                subtitle: 'text-accordion-subtitle-lg'
+                title: "p-accordion-title-lg text-accordion-title-lg",
+                content: "p-accordion-content-lg text-accordion-content-lg",
+                subtitle: "text-accordion-subtitle-lg"
             }
         }
     },
     compoundVariants: [
         {
-            variant: 'child',
+            variant: "child",
             size: [
-                'sm',
-                'md',
-                'lg'
+                "sm",
+                "md",
+                "lg"
             ],
             className: {
-                content: 'py-0 bg-inherit text-inherit'
+                content: "bg-inherit py-0 text-inherit"
             }
         }
     ],
     defaultVariants: {
-        size: 'md',
-        shadow: 'none',
-        variant: 'default'
+        size: "md",
+        shadow: "none",
+        variant: "default"
     }
 });
 const AccordionContext = /*#__PURE__*/ createContext(null);
 function useAccordionContext() {
     const context = useContext(AccordionContext);
-    if (!context) throw new Error('Accordion components must be used within Accordion.Root');
+    if (!context) throw new Error("Accordion components must be used within Accordion.Root");
     return context;
 }
 const AccordionItemContext = /*#__PURE__*/ createContext(null);
 function useAccordionItemContext() {
     const context = useContext(AccordionItemContext);
-    if (!context) throw new Error('Accordion item components must be used within Accordion.Item');
+    if (!context) throw new Error("Accordion item components must be used within Accordion.Item");
     return context;
 }
-function Accordion({ id, defaultValue, value, collapsible = true, multiple = false, dir = 'ltr', onChange, size, shadow, disabled = false, children, ref, className, variant, ...props }) {
+function Accordion({ id, defaultValue, value, collapsible = true, multiple = false, dir = "ltr", onChange, size, shadow, disabled = false, children, ref, className, variant, ...props }) {
     const generatedId = useId();
     const uniqueId = id || generatedId;
     const service = useMachine(machine, {
@@ -117,10 +113,10 @@ function Accordion({ id, defaultValue, value, collapsible = true, multiple = fal
         collapsible,
         multiple,
         dir,
-        orientation: 'vertical',
+        orientation: "vertical",
         disabled,
-        onValueChange: ({ value })=>{
-            onChange?.(value);
+        onValueChange: ({ value: newValue })=>{
+            onChange?.(newValue);
         }
     });
     const api = connect(service, normalizeProps);
@@ -138,10 +134,10 @@ function Accordion({ id, defaultValue, value, collapsible = true, multiple = fal
             variant
         },
         children: /*#__PURE__*/ jsx("div", {
-            ref: ref,
             className: styles.root({
                 className
             }),
+            ref: ref,
             ...props,
             ...api.getRootProps(),
             children: children
@@ -173,13 +169,14 @@ Accordion.Header = function({ children, ref, className, ...props }) {
     const { api, styles } = useAccordionContext();
     const { value, disabled } = useAccordionItemContext();
     return /*#__PURE__*/ jsx("header", {
-        ref: ref,
         className: className,
+        ref: ref,
         ...props,
         children: /*#__PURE__*/ jsx(Button, {
-            type: "button",
-            theme: "borderless",
             className: styles.titleTrigger(),
+            size: "current",
+            theme: "unstyled",
+            type: "button",
             ...api.getItemTriggerProps({
                 value,
                 disabled
@@ -193,30 +190,31 @@ Accordion.Content = function({ children, ref, className, ...props }) {
     const { api, styles } = useAccordionContext();
     const { value } = useAccordionItemContext();
     return /*#__PURE__*/ jsx("div", {
-        ref: ref,
         className: styles.content({
             className
         }),
+        ref: ref,
         ...props,
         ...api.getItemContentProps({
             value
         }),
-        "data-state": api.value.includes(value) ? 'expanded' : 'collapsed',
+        "data-state": api.value.includes(value) ? "expanded" : "collapsed",
         children: children
     });
 };
-Accordion.Indicator = function({ icon = 'token-icon-accordion-chevron', ref, className, ...props }) {
+Accordion.Indicator = function({ icon = "token-icon-accordion-chevron", iconSize, ref, className, ...props }) {
     const { api, styles } = useAccordionContext();
     const { value } = useAccordionItemContext();
     const isExpanded = api.value.includes(value);
     return /*#__PURE__*/ jsx("span", {
-        ref: ref,
         className: className,
+        ref: ref,
         ...props,
         children: /*#__PURE__*/ jsx(Icon, {
             className: styles.icon(),
+            "data-state": isExpanded ? "expanded" : "collapsed",
             icon: icon,
-            "data-state": isExpanded ? 'expanded' : 'collapsed'
+            size: iconSize
         })
     });
 };
@@ -234,10 +232,10 @@ Accordion.Title = function({ children, ref, className, ...props }) {
 Accordion.Subtitle = function({ children, ref, className, ...props }) {
     const { styles } = useAccordionContext();
     return /*#__PURE__*/ jsx("span", {
-        ref: ref,
         className: styles.subtitle({
             className
         }),
+        ref: ref,
         ...props,
         children: children
     });

package/dist/molecules/breadcrumb.js

@@ -1,168 +1,250 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { tv } from "tailwind-variants";
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
 import { Icon } from "../atoms/icon.js";
 import { Link } from "../atoms/link.js";
-const breadcrumbsVariants = tv({
+import { tv } from "../utils.js";
+const BreadcrumbVariants = tv({
     slots: {
         root: [
-            'inline-flex flex-wrap items-center',
-            'bg-breadcrumb-bg'
+            "inline-flex flex-wrap items-center",
+            "bg-breadcrumb-bg"
         ],
         list: [
-            'flex items-center',
-            'break-words',
-            'list-none'
+            "flex flex-wrap items-center",
+            "break-words",
+            "list-none",
+            "text-breadcrumb-list-fg"
         ],
         item: [
-            'inline-flex items-center',
-            'text-breadcrumb-item-fg',
-            'hover:text-breadcrumb-fg-hover',
-            'data-[current=true]:text-breadcrumb-fg-current',
-            'h-full'
+            "inline-flex min-w-0 items-center",
+            "text-breadcrumb-item-fg"
         ],
         link: [
-            'no-underline',
-            'cursor-pointer',
-            'hover:text-breadcrumb-fg-hover',
-            'focus:outline-none',
-            'focus-visible:ring',
-            'focus-visible:ring-breadcrumb-ring'
+            "inline-flex min-w-0 items-center",
+            "rounded-breadcrumb-link",
+            "text-breadcrumb-link-fg",
+            "no-underline",
+            "cursor-pointer",
+            "hover:text-breadcrumb-link-fg-hover",
+            "focus-visible:outline-(style:--default-ring-style) focus-visible:outline-(length:--default-ring-width)",
+            "focus-visible:outline-breadcrumb-ring",
+            "focus-visible:outline-offset-(length:--default-ring-offset)",
+            "transition-colors duration-200 motion-reduce:transition-none"
         ],
         currentLink: [
-            'cursor-default'
+            "inline-flex min-w-0 items-center",
+            "rounded-breadcrumb-link",
+            "text-breadcrumb-current-link-fg",
+            "cursor-default"
         ],
+        icon: [
+            "inline-flex items-center justify-center"
+        ],
+        iconSize: "",
         separator: [
-            'text-breadcrumb-separator-fg',
-            'inline-flex items-center justify-center',
-            'rtl:rotate-180'
+            "inline-flex shrink-0 items-center justify-center",
+            "text-breadcrumb-separator-fg",
+            "rtl:rotate-180"
+        ],
+        separatorIcon: [
+            "inline-flex items-center justify-center"
         ],
+        separatorIconSize: "",
         ellipsis: [
-            'text-breadcrumb-ellipsis-fg',
-            'inline-flex items-center justify-center'
-        ]
+            "inline-flex shrink-0 items-center justify-center",
+            "text-breadcrumb-ellipsis-fg"
+        ],
+        ellipsisIcon: [
+            "inline-flex items-center justify-center"
+        ],
+        ellipsisIconSize: ""
     },
-    compoundSlots: [
-        {
-            slots: [
-                'link',
-                'currentLink'
-            ],
-            class: [
-                'font-medium inline-flex items-center',
-                'outline-none focus:outline-none'
-            ]
-        }
-    ],
     variants: {
+        variant: {
+            plain: {},
+            underline: {
+                link: "underline",
+                currentLink: "underline"
+            }
+        },
         size: {
             sm: {
-                root: 'text-breadcrumb-sm p-breadcrumb-sm',
-                list: 'gap-breadcrumb-sm',
-                item: 'gap-breadcrumb-sm',
-                separator: 'gap-breadcrumb-sm',
-                ellipsis: 'text-breadcrumb-sm'
+                root: "p-breadcrumb-root-sm text-breadcrumb-sm",
+                list: "gap-breadcrumb-list-sm",
+                link: "gap-breadcrumb-link-sm",
+                currentLink: "gap-breadcrumb-link-sm",
+                iconSize: "text-breadcrumb-icon-sm",
+                separator: "gap-breadcrumb-separator-sm",
+                separatorIconSize: "text-breadcrumb-separator-icon-sm",
+                ellipsisIconSize: "text-breadcrumb-ellipsis-icon-sm"
             },
             md: {
-                root: 'text-breadcrumb-md p-breadcrumb-md',
-                list: 'gap-breadcrumb-md',
-                item: 'gap-breadcrumb-md',
-                separator: 'gap-breadcrumb-md',
-                ellipsis: 'text-breadcrumb-md'
+                root: "p-breadcrumb-root-md text-breadcrumb-md",
+                list: "gap-breadcrumb-list-md",
+                link: "gap-breadcrumb-link-md",
+                currentLink: "gap-breadcrumb-link-md",
+                iconSize: "text-breadcrumb-icon-md",
+                separator: "gap-breadcrumb-separator-md",
+                separatorIconSize: "text-breadcrumb-separator-icon-md",
+                ellipsisIconSize: "text-breadcrumb-ellipsis-icon-md"
             },
             lg: {
-                root: 'text-breadcrumb-lg p-breadcrumb-lg',
-                list: 'gap-breadcrumb-lg',
-                item: 'gap-breadcrumb-lg',
-                separator: 'gap-breadcrumb-lg',
-                ellipsis: 'text-breadcrumb-lg'
+                root: "p-breadcrumb-root-lg text-breadcrumb-lg",
+                list: "gap-breadcrumb-list-lg",
+                link: "gap-breadcrumb-link-lg",
+                currentLink: "gap-breadcrumb-link-lg",
+                iconSize: "text-breadcrumb-icon-lg",
+                separator: "gap-breadcrumb-separator-lg",
+                separatorIconSize: "text-breadcrumb-separator-icon-lg",
+                ellipsisIconSize: "text-breadcrumb-ellipsis-icon-lg"
             }
         }
     },
     defaultVariants: {
-        size: 'md'
+        size: "md",
+        variant: "plain"
     }
 });
-function BreadcrumbItem({ label, href, icon, separator = 'token-icon-breadcrumb-separator', isCurrentPage, lastItem, linkAs }) {
-    const { item, currentLink, link, separator: separatorSlot } = breadcrumbsVariants({
-        size: 'md'
+const BreadcrumbContext = /*#__PURE__*/ createContext(null);
+function useBreadcrumbContext() {
+    const context = useContext(BreadcrumbContext);
+    if (!context) throw new Error("Breadcrumb components must be used within Breadcrumb.Root");
+    return context;
+}
+function getContextualIconClassName({ className, defaultClassName, useDefaultClassName }) {
+    if (!useDefaultClassName) return className;
+    return [
+        defaultClassName,
+        className
+    ].filter(Boolean).join(" ");
+}
+function Breadcrumb({ children, className, ref, size, variant, "aria-label": ariaLabel = "breadcrumb", ...props }) {
+    const styles = BreadcrumbVariants({
+        size,
+        variant
     });
-    return /*#__PURE__*/ jsxs("li", {
-        className: item(),
-        "data-current": isCurrentPage,
-        children: [
-            icon && /*#__PURE__*/ jsx(Icon, {
-                icon: icon
-            }),
-            isCurrentPage ? /*#__PURE__*/ jsx("span", {
-                className: currentLink(),
-                "aria-current": "page",
-                children: label
-            }) : /*#__PURE__*/ jsx(Link, {
-                as: linkAs,
-                href: href || '#',
-                className: link(),
-                children: label
+    return /*#__PURE__*/ jsx(BreadcrumbContext.Provider, {
+        value: {
+            styles
+        },
+        children: /*#__PURE__*/ jsx("nav", {
+            "aria-label": ariaLabel,
+            className: styles.root({
+                className
             }),
-            !lastItem && /*#__PURE__*/ jsx("span", {
-                className: separatorSlot(),
-                children: /*#__PURE__*/ jsx(Icon, {
-                    icon: separator ?? 'token-icon-breadcrumb-separator'
-                })
-            })
-        ]
+            ref: ref,
+            ...props,
+            children: children
+        })
     });
 }
-function BreadcrumbEllipsis() {
-    const { ellipsis, separator: separatorSlot } = breadcrumbsVariants({
-        size: 'md'
+Breadcrumb.List = function({ children, className, ref, ...props }) {
+    const { styles } = useBreadcrumbContext();
+    return /*#__PURE__*/ jsx("ol", {
+        className: styles.list({
+            className
+        }),
+        ref: ref,
+        ...props,
+        children: children
     });
-    return /*#__PURE__*/ jsxs("li", {
-        className: ellipsis(),
-        children: [
-            /*#__PURE__*/ jsx("span", {
-                "aria-hidden": "true",
-                children: /*#__PURE__*/ jsx(Icon, {
-                    icon: "token-icon-breadcrumb-ellipsis"
-                })
-            }),
-            /*#__PURE__*/ jsx("span", {
-                className: separatorSlot(),
-                children: /*#__PURE__*/ jsx(Icon, {
-                    icon: 'token-icon-breadcrumb-separator'
-                })
+};
+Breadcrumb.Item = function({ children, className, ref, ...props }) {
+    const { styles } = useBreadcrumbContext();
+    return /*#__PURE__*/ jsx("li", {
+        className: styles.item({
+            className
+        }),
+        ref: ref,
+        ...props,
+        children: children
+    });
+};
+Breadcrumb.Link = function({ children, className, ...props }) {
+    const { styles } = useBreadcrumbContext();
+    return /*#__PURE__*/ jsx(Link, {
+        className: styles.link({
+            className
+        }),
+        ...props,
+        children: children
+    });
+};
+Breadcrumb.CurrentLink = function({ children, className, ref, ...props }) {
+    const { styles } = useBreadcrumbContext();
+    return /*#__PURE__*/ jsx("span", {
+        "aria-current": "page",
+        className: styles.currentLink({
+            className
+        }),
+        ref: ref,
+        ...props,
+        children: children
+    });
+};
+Breadcrumb.Icon = function({ className, size, ...props }) {
+    const { styles } = useBreadcrumbContext();
+    return /*#__PURE__*/ jsx(Icon, {
+        className: styles.icon({
+            className: getContextualIconClassName({
+                className,
+                defaultClassName: styles.iconSize(),
+                useDefaultClassName: !size
             })
-        ]
+        }),
+        size: size,
+        ...props
     });
-}
-function Breadcrumb({ items, maxItems = 0, size = 'md', className, 'aria-label': ariaLabel = 'breadcrumb', linkAs, ...props }) {
-    const { root, list } = breadcrumbsVariants({
-        size
+};
+Breadcrumb.Separator = function({ children, className, icon = "token-icon-breadcrumb-separator", iconProps, iconSize, ref, ...props }) {
+    const { styles } = useBreadcrumbContext();
+    const { className: iconClassName, ...restIconProps } = iconProps ?? {};
+    return /*#__PURE__*/ jsx("li", {
+        "aria-hidden": "true",
+        className: styles.separator({
+            className
+        }),
+        ref: ref,
+        ...props,
+        children: children ?? /*#__PURE__*/ jsx(Icon, {
+            className: styles.separatorIcon({
+                className: getContextualIconClassName({
+                    className: iconClassName,
+                    defaultClassName: styles.separatorIconSize(),
+                    useDefaultClassName: !iconSize
+                })
+            }),
+            icon: icon,
+            size: iconSize,
+            ...restIconProps
+        })
     });
-    const displayItems = maxItems <= 0 || items.length <= maxItems ? items : 1 === maxItems ? [
-        items.at(-1)
-    ] : [
-        items[0],
-        'ellipsis',
-        ...items.slice(-(maxItems - 1))
-    ];
-    return /*#__PURE__*/ jsx("nav", {
-        className: root({
+};
+Breadcrumb.Ellipsis = function({ children, className, icon = "token-icon-breadcrumb-ellipsis", iconProps, iconSize, ref, ...props }) {
+    const { styles } = useBreadcrumbContext();
+    const { className: iconClassName, ...restIconProps } = iconProps ?? {};
+    return /*#__PURE__*/ jsx("li", {
+        "aria-hidden": "true",
+        className: styles.ellipsis({
             className
         }),
-        "aria-label": ariaLabel,
+        ref: ref,
+        role: "presentation",
         ...props,
-        children: /*#__PURE__*/ jsx("ol", {
-            className: list(),
-            children: displayItems.map((item, index)=>'ellipsis' === item ? /*#__PURE__*/ jsx(BreadcrumbEllipsis, {}, "ellipsis") : item && 'string' != typeof item && /*#__PURE__*/ jsx(BreadcrumbItem, {
-                    label: item.label,
-                    href: item.href,
-                    icon: item.icon,
-                    separator: item.separator,
-                    lastItem: index === displayItems.length - 1,
-                    linkAs: linkAs,
-                    isCurrentPage: item.isCurrent || index === displayItems.length - 1
-                }, `${item.label}`))
+        children: children ?? /*#__PURE__*/ jsx(Icon, {
+            className: styles.ellipsisIcon({
+                className: getContextualIconClassName({
+                    className: iconClassName,
+                    defaultClassName: styles.ellipsisIconSize(),
+                    useDefaultClassName: !iconSize
+                })
+            }),
+            icon: icon,
+            size: iconSize,
+            ...restIconProps
         })
     });
-}
+};
+Breadcrumb.Root = Breadcrumb;
+Breadcrumb.displayName = "Breadcrumb";
 export { Breadcrumb };