@techsio/ui-kit 0.0.0

package/dist/molecules/form-numeric-input.js

@@ -0,0 +1,47 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ErrorText } from "../atoms/error-text.js";
+import { ExtraText } from "../atoms/extra-text.js";
+import { Label } from "../atoms/label.js";
+import { NumericInput } from "../atoms/numeric-input.js";
+function FormNumericInput({ id, label, validateStatus = 'default', helpText, extraText, size = 'md', required, disabled, children, ...numericInputProps }) {
+    const helpTextId = helpText ? `${id}-helper` : void 0;
+    const extraTextId = extraText ? `${id}-extra` : void 0;
+    return /*#__PURE__*/ jsxs("div", {
+        className: "flex flex-col gap-numeric-input-root-md data-[size=lg]:gap-numeric-input-root-lg data-[size=sm]:gap-numeric-input-root-sm",
+        "data-size": size,
+        children: [
+            /*#__PURE__*/ jsx(Label, {
+                htmlFor: id,
+                size: size,
+                required: required,
+                disabled: disabled,
+                children: label
+            }),
+            /*#__PURE__*/ jsx(NumericInput, {
+                id: id,
+                size: size,
+                required: required,
+                invalid: 'error' === validateStatus,
+                disabled: disabled,
+                ...numericInputProps,
+                children: children
+            }),
+            helpText && ('error' === validateStatus ? /*#__PURE__*/ jsx(ErrorText, {
+                id: helpTextId,
+                size: size,
+                showIcon: true,
+                children: helpText
+            }) : /*#__PURE__*/ jsx(ExtraText, {
+                id: helpTextId,
+                size: size,
+                children: helpText
+            })),
+            extraText && /*#__PURE__*/ jsx(ExtraText, {
+                id: extraTextId,
+                size: size,
+                children: extraText
+            })
+        ]
+    });
+}
+export { FormNumericInput };

package/dist/molecules/form-textarea.js

@@ -0,0 +1,54 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ErrorText } from "../atoms/error-text.js";
+import { ExtraText } from "../atoms/extra-text.js";
+import { Label } from "../atoms/label.js";
+import { Textarea } from "../atoms/textarea.js";
+function FormTextareaRaw({ id, label, validateStatus = 'default', helpText, extraText, size = 'md', required, disabled, ...props }) {
+    const extraTextId = extraText ? `${id}-extra` : void 0;
+    return /*#__PURE__*/ jsxs("div", {
+        className: "flex flex-col gap-1",
+        children: [
+            /*#__PURE__*/ jsx(Label, {
+                htmlFor: id,
+                size: size,
+                required: required,
+                disabled: disabled,
+                children: label
+            }),
+            /*#__PURE__*/ jsx(Textarea, {
+                id: id,
+                size: size,
+                required: required,
+                variant: validateStatus,
+                disabled: disabled,
+                ...props
+            }),
+            helpText,
+            extraText && /*#__PURE__*/ jsx(ExtraText, {
+                id: extraTextId,
+                size: size,
+                children: extraText
+            })
+        ]
+    });
+}
+function FormTextarea({ helpText, id, validateStatus, size, ...props }) {
+    const helpTextId = helpText ? `${id}-helper` : void 0;
+    return /*#__PURE__*/ jsx(FormTextareaRaw, {
+        id: id,
+        size: size,
+        validateStatus: validateStatus,
+        helpText: 'error' === validateStatus ? /*#__PURE__*/ jsx(ErrorText, {
+            id: helpTextId,
+            size: size,
+            showIcon: true,
+            children: helpText
+        }) : /*#__PURE__*/ jsx(ExtraText, {
+            id: helpTextId,
+            size: size,
+            children: helpText
+        }),
+        ...props
+    });
+}
+export { FormTextarea, FormTextareaRaw };

package/dist/molecules/menu.js

@@ -0,0 +1,302 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { connect, machine } from "@zag-js/menu";
+import { Portal, normalizeProps, useMachine } from "@zag-js/react";
+import { cloneElement, isValidElement, useEffect, useId } from "react";
+import { tv } from "tailwind-variants";
+import { Button } from "../atoms/button.js";
+import { Icon } from "../atoms/icon.js";
+const menuVariants = tv({
+    slots: {
+        trigger: '',
+        positioner: [
+            'w-(--reference-width)',
+            'isolate z-(--z-index)'
+        ],
+        content: [
+            'bg-menu-content-bg border border-menu-content-border',
+            'rounded-menu shadow-menu-content-shadow',
+            'p-menu-content',
+            'overflow-auto',
+            'focus:outline-none',
+            'data-[state=open]:animate-in',
+            'data-[state=closed]:animate-out'
+        ],
+        item: [
+            'flex items-center gap-menu-item',
+            'cursor-pointer',
+            'px-menu-item-x py-menu-item-y',
+            'text-menu-item-fg',
+            'rounded-menu-item',
+            'hover:bg-menu-item-hover',
+            'focus:bg-menu-item-hover focus:outline-none',
+            'data-[disabled]:opacity-menu-disabled data-[disabled]:cursor-not-allowed',
+            'data-[highlighted]:bg-menu-item-hover',
+            'data-[disabled]:opacity-50'
+        ],
+        optionItem: [
+            'data-[state=checked]:font-semibold'
+        ],
+        separator: [
+            'my-menu-separator',
+            'h-menu-separator',
+            'bg-menu-separator-bg'
+        ],
+        itemText: [
+            'flex-grow'
+        ],
+        itemIcon: [
+            'text-menu-item-icon-size text-menu-item-icon-fg'
+        ],
+        submenuIndicator: [
+            'ms-menu-submenu-indicator text-menu-submenu-indicator-fg'
+        ]
+    },
+    variants: {
+        size: {
+            sm: {
+                content: 'text-sm',
+                item: 'text-sm'
+            },
+            md: {
+                content: 'text-md',
+                item: 'text-md'
+            },
+            lg: {
+                content: 'text-lg',
+                item: 'text-lg'
+            }
+        }
+    },
+    defaultVariants: {
+        size: 'md'
+    }
+});
+function SubmenuItem({ item, parentApi, parentService, size = 'md', onCheckedChange, onSelect, closeOnSelect = true }) {
+    const submenuService = useMachine(machine, {
+        id: useId(),
+        closeOnSelect,
+        onSelect
+    });
+    const submenuApi = connect(submenuService, normalizeProps);
+    useEffect(()=>{
+        parentApi.setChild(submenuService);
+        submenuApi.setParent(parentService);
+    }, [
+        parentApi,
+        submenuApi,
+        submenuService,
+        parentService
+    ]);
+    const { positioner, content, separator, optionItem, item: itemSlot, itemIcon, itemText, submenuIndicator } = menuVariants({
+        size
+    });
+    const renderMenuItem = (menuItem)=>{
+        if ('separator' === menuItem.type) return /*#__PURE__*/ jsx("hr", {
+            className: separator()
+        }, `separator-${menuItem.id}`);
+        if ('submenu' === menuItem.type) return /*#__PURE__*/ jsx(SubmenuItem, {
+            item: menuItem,
+            parentApi: submenuApi,
+            parentService: submenuService,
+            size: size,
+            onCheckedChange: onCheckedChange,
+            onSelect: onSelect,
+            closeOnSelect: closeOnSelect
+        }, menuItem.value);
+        if ('radio' === menuItem.type || 'checkbox' === menuItem.type) return /*#__PURE__*/ jsxs("li", {
+            className: `${itemSlot()} ${optionItem()}`,
+            ...submenuApi.getOptionItemProps({
+                type: menuItem.type,
+                value: menuItem.value,
+                checked: menuItem.checked,
+                onCheckedChange: (checked)=>{
+                    onCheckedChange?.(menuItem, checked);
+                }
+            }),
+            children: [
+                menuItem.checked && /*#__PURE__*/ jsx(Icon, {
+                    icon: "token-icon-check",
+                    className: itemIcon()
+                }),
+                /*#__PURE__*/ jsx("span", {
+                    className: itemText(),
+                    children: menuItem.label
+                })
+            ]
+        }, menuItem.value);
+        return /*#__PURE__*/ jsxs("li", {
+            className: itemSlot(),
+            ...submenuApi.getItemProps({
+                value: menuItem.value,
+                disabled: menuItem.disabled
+            }),
+            children: [
+                menuItem.icon && /*#__PURE__*/ jsx(Icon, {
+                    icon: menuItem.icon,
+                    className: itemIcon()
+                }),
+                /*#__PURE__*/ jsx("span", {
+                    className: itemText(),
+                    children: menuItem.label
+                })
+            ]
+        }, menuItem.value);
+    };
+    const triggerProps = parentApi.getTriggerItemProps(submenuApi);
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsxs("li", {
+                className: itemSlot(),
+                ...triggerProps,
+                "data-disabled": item.disabled || void 0,
+                children: [
+                    item.icon && /*#__PURE__*/ jsx(Icon, {
+                        icon: item.icon,
+                        className: itemIcon()
+                    }),
+                    /*#__PURE__*/ jsx("span", {
+                        className: itemText(),
+                        children: item.label
+                    }),
+                    /*#__PURE__*/ jsx(Icon, {
+                        icon: "token-icon-menu-submenu",
+                        className: submenuIndicator()
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(Portal, {
+                children: /*#__PURE__*/ jsx("div", {
+                    className: positioner(),
+                    ...submenuApi.getPositionerProps(),
+                    children: /*#__PURE__*/ jsx("ul", {
+                        className: content(),
+                        ...submenuApi.getContentProps(),
+                        children: item.items.map(renderMenuItem)
+                    })
+                })
+            })
+        ]
+    });
+}
+function Menu({ 'aria-label': ariaLabel, dir, id, closeOnSelect = true, loopFocus = true, typeahead = true, positioning, anchorPoint, open, defaultOpen, composite, navigate, defaultHighlightedValue, highlightedValue, onHighlightChange, onSelect, onOpenChange, onEscapeKeyDown, onPointerDownOutside, onInteractOutside, onFocusOutside, items, triggerText = 'Menu', triggerIcon, customTrigger, size = 'md', onCheckedChange }) {
+    const generatedId = useId();
+    const service = useMachine(machine, {
+        id: id || generatedId,
+        dir,
+        closeOnSelect,
+        loopFocus,
+        typeahead,
+        positioning,
+        defaultHighlightedValue,
+        highlightedValue,
+        anchorPoint,
+        open,
+        defaultOpen,
+        composite,
+        navigate,
+        onSelect,
+        onOpenChange,
+        onEscapeKeyDown,
+        onPointerDownOutside,
+        onInteractOutside,
+        onFocusOutside,
+        onHighlightChange,
+        'aria-label': ariaLabel
+    });
+    const api = connect(service, normalizeProps);
+    const { trigger, positioner, content, separator, optionItem, item: itemSlot, itemIcon, itemText } = menuVariants({
+        size
+    });
+    const renderMenuItem = (item)=>{
+        if ('separator' === item.type) return /*#__PURE__*/ jsx("hr", {
+            className: separator()
+        }, `separator-${item.id}`);
+        if ('submenu' === item.type) return /*#__PURE__*/ jsx(SubmenuItem, {
+            item: item,
+            parentApi: api,
+            parentService: service,
+            size: size,
+            onCheckedChange: onCheckedChange,
+            onSelect: onSelect,
+            closeOnSelect: closeOnSelect
+        }, item.value);
+        if ('radio' === item.type || 'checkbox' === item.type) return /*#__PURE__*/ jsxs("li", {
+            className: `${itemSlot()} ${optionItem()}`,
+            ...api.getOptionItemProps({
+                type: item.type,
+                value: item.value,
+                checked: item.checked,
+                onCheckedChange: (checked)=>{
+                    onCheckedChange?.(item, checked);
+                }
+            }),
+            children: [
+                item.checked && /*#__PURE__*/ jsx(Icon, {
+                    icon: "token-icon-check",
+                    className: itemIcon()
+                }),
+                /*#__PURE__*/ jsx("span", {
+                    className: itemText(),
+                    children: item.label
+                })
+            ]
+        }, item.value);
+        return /*#__PURE__*/ jsxs("li", {
+            className: itemSlot(),
+            ...api.getItemProps({
+                value: item.value,
+                disabled: item.disabled
+            }),
+            children: [
+                item.icon && /*#__PURE__*/ jsx(Icon, {
+                    icon: item.icon,
+                    className: itemIcon()
+                }),
+                /*#__PURE__*/ jsx("span", {
+                    className: itemText(),
+                    children: item.label
+                })
+            ]
+        }, item.value);
+    };
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            customTrigger ? /*#__PURE__*/ isValidElement(customTrigger) ? /*#__PURE__*/ cloneElement(customTrigger, {
+                ...api.getTriggerProps()
+            }) : /*#__PURE__*/ jsx("button", {
+                ...api.getTriggerProps(),
+                children: customTrigger
+            }) : /*#__PURE__*/ jsxs(Button, {
+                ...api.getTriggerProps(),
+                className: trigger(),
+                children: [
+                    triggerText,
+                    triggerIcon && /*#__PURE__*/ jsx(Icon, {
+                        icon: triggerIcon,
+                        className: "ms-1"
+                    }),
+                    !triggerIcon && /*#__PURE__*/ jsx("span", {
+                        ...api.getIndicatorProps(),
+                        children: /*#__PURE__*/ jsx(Icon, {
+                            icon: "token-icon-menu-trigger",
+                            className: "ms-1"
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(Portal, {
+                children: /*#__PURE__*/ jsx("div", {
+                    className: positioner(),
+                    ...api.getPositionerProps(),
+                    children: /*#__PURE__*/ jsx("ul", {
+                        className: content(),
+                        ...api.getContentProps(),
+                        children: items.map(renderMenuItem)
+                    })
+                })
+            })
+        ]
+    });
+}
+Menu.displayName = 'Menu';
+export { Menu };

package/dist/molecules/pagination.js

@@ -0,0 +1,184 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { connect, machine } from "@zag-js/pagination";
+import { normalizeProps, useMachine } from "@zag-js/react";
+import { useId } from "react";
+import { Icon } from "../atoms/icon.js";
+import { LinkButton } from "../atoms/link-button.js";
+import { tv } from "../utils.js";
+const paginationVariants = tv({
+    slots: {
+        base: '',
+        list: [
+            'inline-flex items-center gap-pagination-list'
+        ],
+        item: [
+            'grid cursor-pointer',
+            'has-[[data-part="ellipsis"]]:bg-pagination-neutral-bg',
+            'has-[[data-part="compact-text"]]:bg-pagination-neutral-bg'
+        ],
+        link: [
+            'focus:outline-none',
+            'focus-visible:ring',
+            'focus-visible:ring-pagination-ring',
+            'border-(length:--border-pagination-width) border-pagination-border rounded-pagination',
+            'aspect-square',
+            'data-[disabled]:text-pagination-fg-disabled data-[disabled]:hover:bg-pagination-bg-disabled',
+            'data-[disabled]:bg-pagination-bg-disabled',
+            'data-[disabled]:border-pagination-border-disabled data-[disabled]:cursor-not-allowed'
+        ],
+        ellipsis: '',
+        compactText: ''
+    },
+    compoundSlots: [
+        {
+            slots: [
+                'link',
+                'ellipsis'
+            ],
+            className: [
+                'inline-flex items-center justify-center',
+                'transition-colors duration-200',
+                'text-pagination-fg'
+            ]
+        }
+    ],
+    variants: {
+        variant: {
+            filled: {
+                item: 'bg-pagination-bg',
+                link: [
+                    'data-[current=true]:bg-pagination-bg-active data-[current=true]:text-pagination-filled-fg-active data-[current=true]:border-pagination-border-active',
+                    'hover:bg-pagination-bg-hover hover:border-pagination-border-hover',
+                    'hover:text-pagination-filled-fg-active'
+                ]
+            },
+            outlined: {
+                item: 'bg-pagination-bg',
+                link: [
+                    'data-[current=true]:text-pagination-outlined-fg-active data-[current=true]:border-pagination-border-active',
+                    'hover:border-pagination-border-hover hover:text-pagination-outlined-fg-active'
+                ]
+            },
+            minimal: {
+                link: [
+                    'border-transparent',
+                    'data-[current=true]:text-pagination-minimal-fg-active',
+                    'hover:text-pagination-minimal-fg-active'
+                ]
+            }
+        },
+        size: {
+            sm: {
+                link: ' text-pagination-sm h-pagination-sm',
+                compactText: 'text-pagination-sm'
+            },
+            md: {
+                link: ' text-pagination-md h-pagination-md',
+                compactText: 'text-pagination-md'
+            },
+            lg: {
+                link: ' text-pagination-lg h-pagination-lg',
+                compactText: 'text-pagination-lg'
+            }
+        }
+    },
+    defaultVariants: {
+        variant: 'filled',
+        size: 'md'
+    }
+});
+function Pagination({ page, defaultPage = 1, count, pageSize = 10, siblingCount = 1, showPrevNext = true, onPageChange, variant, className, dir = 'ltr', linkAs, size, compact = false, ...props }) {
+    const uniqueId = useId();
+    const service = useMachine(machine, {
+        id: uniqueId,
+        count,
+        pageSize,
+        siblingCount,
+        page,
+        dir,
+        defaultPage,
+        onPageChange: ({ page })=>{
+            onPageChange?.(page);
+        }
+    });
+    const api = connect(service, normalizeProps);
+    const { base, list, link, item, ellipsis, compactText } = paginationVariants({
+        variant,
+        size
+    });
+    return /*#__PURE__*/ jsx("nav", {
+        className: base({
+            className
+        }),
+        ...api.getRootProps(),
+        ...props,
+        children: /*#__PURE__*/ jsxs("ul", {
+            className: list(),
+            "aria-label": "Pagination",
+            children: [
+                showPrevNext && /*#__PURE__*/ jsx("li", {
+                    className: item(),
+                    children: /*#__PURE__*/ jsx(LinkButton, {
+                        theme: "borderless",
+                        className: link(),
+                        icon: "token-icon-pagination-prev",
+                        disabled: 1 === api.page,
+                        as: linkAs,
+                        ...api.getPrevTriggerProps()
+                    })
+                }),
+                compact ? /*#__PURE__*/ jsx("li", {
+                    className: item(),
+                    children: /*#__PURE__*/ jsxs("span", {
+                        className: compactText(),
+                        "data-part": "compact-text",
+                        children: [
+                            api.page,
+                            " of ",
+                            api.totalPages
+                        ]
+                    })
+                }) : api.pages.map((page, i)=>{
+                    if ('page' === page.type) return /*#__PURE__*/ jsx("li", {
+                        className: item(),
+                        children: /*#__PURE__*/ jsx(LinkButton, {
+                            theme: "borderless",
+                            className: link(),
+                            "aria-current": api.page === page.value ? 'page' : void 0,
+                            "data-current": api.page === page.value,
+                            as: linkAs,
+                            ...api.getItemProps(page),
+                            children: page.value
+                        })
+                    }, page.value);
+                    return /*#__PURE__*/ jsx("li", {
+                        className: item(),
+                        children: /*#__PURE__*/ jsx("span", {
+                            className: ellipsis(),
+                            "aria-hidden": "true",
+                            ...api.getEllipsisProps({
+                                index: i
+                            }),
+                            children: /*#__PURE__*/ jsx(Icon, {
+                                icon: "token-icon-pagination-ellipsis",
+                                size: "current"
+                            })
+                        })
+                    }, `ellipsis-${i}`);
+                }),
+                showPrevNext && /*#__PURE__*/ jsx("li", {
+                    className: item(),
+                    children: /*#__PURE__*/ jsx(LinkButton, {
+                        theme: "borderless",
+                        className: link(),
+                        icon: "token-icon-pagination-next",
+                        disabled: api.page === api.totalPages,
+                        as: linkAs,
+                        ...api.getNextTriggerProps()
+                    })
+                })
+            ]
+        })
+    });
+}
+export { Pagination };