@techsio/ui-kit 0.0.0

package/dist/atoms/tooltip.js

@@ -0,0 +1,119 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Portal, normalizeProps, useMachine } from "@zag-js/react";
+import { connect, machine } from "@zag-js/tooltip";
+import { useId } from "react";
+import { tv } from "tailwind-variants";
+const tooltipVariants = tv({
+    slots: {
+        trigger: [
+            'inline-flex'
+        ],
+        content: [
+            '[--arrow-size:var(--tooltip-arrow-size)]',
+            '[--arrow-background:var(--tooltip-arrow-background)]',
+            'bg-tooltip-bg',
+            'rounded-tooltip shadow-tooltip'
+        ],
+        positioner: [
+            'relative'
+        ],
+        arrow: ''
+    },
+    variants: {
+        variant: {
+            default: {},
+            outline: {
+                content: 'border border-tooltip-border',
+                arrow: 'border-t border-s border-tooltip-border'
+            }
+        },
+        size: {
+            sm: {
+                content: 'text-tooltip-sm p-tooltip-sm'
+            },
+            md: {
+                content: 'text-tooltip-md p-tooltip-md'
+            },
+            lg: {
+                content: 'text-tooltip-lg p-tooltip-lg'
+            }
+        }
+    },
+    defaultVariants: {
+        size: 'md',
+        variant: 'default'
+    }
+});
+function Tooltip({ content, children, className, ref, size, variant, id: MRAId, dir = 'ltr', openDelay = 200, closeDelay = 200, interactive = true, defaultOpen, open, onOpenChange, disabled, closeOnEscape = true, closeOnPointerDown, closeOnScroll, closeOnClick, placement, offset = {
+    mainAxis: 16,
+    crossAxis: 0
+}, gutter, flip, sameWidth, boundary, listeners, strategy }) {
+    const generatedId = useId();
+    const id = MRAId || generatedId;
+    const service = useMachine(machine, {
+        id,
+        dir,
+        open,
+        defaultOpen,
+        disabled,
+        openDelay,
+        closeDelay,
+        interactive,
+        closeOnPointerDown,
+        closeOnEscape,
+        closeOnScroll,
+        closeOnClick,
+        onOpenChange,
+        positioning: {
+            placement,
+            offset,
+            gutter,
+            flip,
+            sameWidth,
+            boundary,
+            listeners,
+            strategy
+        }
+    });
+    const api = connect(service, normalizeProps);
+    const { trigger, positioner, content: contentSlot, arrow } = tooltipVariants({
+        variant,
+        size
+    });
+    const triggerProps = api.getTriggerProps();
+    const { onBeforeInput, ...spanCompatibleProps } = triggerProps;
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx("span", {
+                ...spanCompatibleProps,
+                ref: ref,
+                className: trigger(),
+                children: children
+            }),
+            /*#__PURE__*/ jsx(Portal, {
+                children: api.open && /*#__PURE__*/ jsx("div", {
+                    ...api.getPositionerProps(),
+                    className: positioner(),
+                    children: /*#__PURE__*/ jsxs("div", {
+                        ...api.getContentProps(),
+                        className: contentSlot({
+                            className
+                        }),
+                        children: [
+                            /*#__PURE__*/ jsx("div", {
+                                ...api.getArrowProps(),
+                                children: /*#__PURE__*/ jsx("div", {
+                                    ...api.getArrowTipProps(),
+                                    className: arrow()
+                                })
+                            }),
+                            content
+                        ]
+                    })
+                })
+            })
+        ]
+    });
+}
+Tooltip.displayName = 'Tooltip';
+export { Tooltip };

package/dist/molecules/accordion.js

@@ -0,0 +1,245 @@
+import { jsx } from "react/jsx-runtime";
+import { connect, machine } from "@zag-js/accordion";
+import { normalizeProps, useMachine } from "@zag-js/react";
+import { createContext, useContext, useId } from "react";
+import { Button } from "../atoms/button.js";
+import { Icon } from "../atoms/icon.js";
+import { tv } from "../utils.js";
+const accordionVariants = tv({
+    slots: {
+        root: [
+            'flex flex-col w-full',
+            'bg-accordion-bg rounded-accordion',
+            'transition-all duration-200'
+        ],
+        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'
+        ],
+        subtitle: [
+            'text-accordion-subtitle-fg'
+        ],
+        content: [
+            'text-accordion-content-fg bg-accordion-content-bg'
+        ],
+        icon: [
+            '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'
+            },
+            borderless: {},
+            child: {}
+        },
+        shadow: {
+            sm: {
+                root: 'shadow-accordion-root-sm',
+                content: 'shadow-accordion-content-sm'
+            },
+            md: {
+                root: 'shadow-accordion-root-md',
+                content: 'shadow-accordion-content-md'
+            },
+            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'
+            },
+            md: {
+                title: 'text-accordion-title-md p-accordion-title-md',
+                content: 'text-accordion-content-md p-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'
+            }
+        }
+    },
+    compoundVariants: [
+        {
+            variant: 'child',
+            size: [
+                'sm',
+                'md',
+                'lg'
+            ],
+            className: {
+                content: 'py-0 bg-inherit text-inherit'
+            }
+        }
+    ],
+    defaultVariants: {
+        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');
+    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');
+    return context;
+}
+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, {
+        id: uniqueId,
+        value,
+        defaultValue,
+        collapsible,
+        multiple,
+        dir,
+        orientation: 'vertical',
+        disabled,
+        onValueChange: ({ value })=>{
+            onChange?.(value);
+        }
+    });
+    const api = connect(service, normalizeProps);
+    const styles = accordionVariants({
+        size,
+        shadow,
+        variant
+    });
+    return /*#__PURE__*/ jsx(AccordionContext.Provider, {
+        value: {
+            api,
+            size,
+            shadow,
+            styles,
+            variant
+        },
+        children: /*#__PURE__*/ jsx("div", {
+            ref: ref,
+            className: styles.root({
+                className
+            }),
+            ...props,
+            ...api.getRootProps(),
+            children: children
+        })
+    });
+}
+Accordion.Item = function({ value, disabled, children, ref, className, ...props }) {
+    const { api, styles, variant } = useAccordionContext();
+    return /*#__PURE__*/ jsx(AccordionItemContext.Provider, {
+        value: {
+            value,
+            disabled,
+            variant
+        },
+        children: /*#__PURE__*/ jsx("div", {
+            ref: ref,
+            ...props,
+            ...api.getItemProps({
+                value
+            }),
+            className: styles.item({
+                className
+            }),
+            children: children
+        })
+    });
+};
+Accordion.Header = function({ children, ref, className, ...props }) {
+    const { api, styles } = useAccordionContext();
+    const { value, disabled } = useAccordionItemContext();
+    return /*#__PURE__*/ jsx("header", {
+        ref: ref,
+        className: className,
+        ...props,
+        children: /*#__PURE__*/ jsx(Button, {
+            type: "button",
+            theme: "borderless",
+            className: styles.titleTrigger(),
+            ...api.getItemTriggerProps({
+                value,
+                disabled
+            }),
+            "data-disabled": disabled,
+            children: children
+        })
+    });
+};
+Accordion.Content = function({ children, ref, className, ...props }) {
+    const { api, styles } = useAccordionContext();
+    const { value } = useAccordionItemContext();
+    return /*#__PURE__*/ jsx("div", {
+        ref: ref,
+        className: styles.content({
+            className
+        }),
+        ...props,
+        ...api.getItemContentProps({
+            value
+        }),
+        "data-state": api.value.includes(value) ? 'expanded' : 'collapsed',
+        children: children
+    });
+};
+Accordion.Indicator = function({ icon = 'token-icon-accordion-chevron', ref, className, ...props }) {
+    const { api, styles } = useAccordionContext();
+    const { value } = useAccordionItemContext();
+    const isExpanded = api.value.includes(value);
+    return /*#__PURE__*/ jsx("span", {
+        ref: ref,
+        className: className,
+        ...props,
+        children: /*#__PURE__*/ jsx(Icon, {
+            className: styles.icon(),
+            icon: icon,
+            "data-state": isExpanded ? 'expanded' : 'collapsed'
+        })
+    });
+};
+Accordion.Title = function({ children, ref, className, ...props }) {
+    const { styles } = useAccordionContext();
+    return /*#__PURE__*/ jsx("span", {
+        className: styles.title({
+            className
+        }),
+        ref: ref,
+        ...props,
+        children: children
+    });
+};
+Accordion.Subtitle = function({ children, ref, className, ...props }) {
+    const { styles } = useAccordionContext();
+    return /*#__PURE__*/ jsx("span", {
+        ref: ref,
+        className: styles.subtitle({
+            className
+        }),
+        ...props,
+        children: children
+    });
+};
+export { Accordion };

package/dist/molecules/breadcrumb.js

@@ -0,0 +1,168 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { tv } from "tailwind-variants";
+import { Icon } from "../atoms/icon.js";
+import { Link } from "../atoms/link.js";
+const breadcrumbsVariants = tv({
+    slots: {
+        root: [
+            'inline-flex flex-wrap items-center',
+            'bg-breadcrumb-bg'
+        ],
+        list: [
+            'flex items-center',
+            'break-words',
+            'list-none'
+        ],
+        item: [
+            'inline-flex items-center',
+            'text-breadcrumb-item-fg',
+            'hover:text-breadcrumb-fg-hover',
+            'data-[current=true]:text-breadcrumb-fg-current',
+            'h-full'
+        ],
+        link: [
+            'no-underline',
+            'cursor-pointer',
+            'hover:text-breadcrumb-fg-hover',
+            'focus:outline-none',
+            'focus-visible:ring',
+            'focus-visible:ring-breadcrumb-ring'
+        ],
+        currentLink: [
+            'cursor-default'
+        ],
+        separator: [
+            'text-breadcrumb-separator-fg',
+            'inline-flex items-center justify-center',
+            'rtl:rotate-180'
+        ],
+        ellipsis: [
+            'text-breadcrumb-ellipsis-fg',
+            'inline-flex items-center justify-center'
+        ]
+    },
+    compoundSlots: [
+        {
+            slots: [
+                'link',
+                'currentLink'
+            ],
+            class: [
+                'font-medium inline-flex items-center',
+                'outline-none focus:outline-none'
+            ]
+        }
+    ],
+    variants: {
+        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'
+            },
+            md: {
+                root: 'text-breadcrumb-md p-breadcrumb-md',
+                list: 'gap-breadcrumb-md',
+                item: 'gap-breadcrumb-md',
+                separator: 'gap-breadcrumb-md',
+                ellipsis: 'text-breadcrumb-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'
+            }
+        }
+    },
+    defaultVariants: {
+        size: 'md'
+    }
+});
+function BreadcrumbItem({ label, href, icon, separator = 'token-icon-breadcrumb-separator', isCurrentPage, lastItem, linkAs }) {
+    const { item, currentLink, link, separator: separatorSlot } = breadcrumbsVariants({
+        size: 'md'
+    });
+    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
+            }),
+            !lastItem && /*#__PURE__*/ jsx("span", {
+                className: separatorSlot(),
+                children: /*#__PURE__*/ jsx(Icon, {
+                    icon: separator ?? 'token-icon-breadcrumb-separator'
+                })
+            })
+        ]
+    });
+}
+function BreadcrumbEllipsis() {
+    const { ellipsis, separator: separatorSlot } = breadcrumbsVariants({
+        size: 'md'
+    });
+    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'
+                })
+            })
+        ]
+    });
+}
+function Breadcrumb({ items, maxItems = 0, size = 'md', className, 'aria-label': ariaLabel = 'breadcrumb', linkAs, ...props }) {
+    const { root, list } = breadcrumbsVariants({
+        size
+    });
+    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({
+            className
+        }),
+        "aria-label": ariaLabel,
+        ...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}`))
+        })
+    });
+}
+export { Breadcrumb };