@techsio/ui-kit 0.0.0

package/dist/molecules/popover.js

@@ -0,0 +1,152 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { connect, machine } from "@zag-js/popover";
+import { Portal, normalizeProps, useMachine } from "@zag-js/react";
+import { useId } from "react";
+import { Button } from "../atoms/button.js";
+import { tv } from "../utils.js";
+const popoverVariants = tv({
+    slots: {
+        trigger: [
+            'p-popover-trigger',
+            'disabled:pointer-events-none',
+            'disabled:opacity-disabled'
+        ],
+        positioner: [
+            'absolute'
+        ],
+        content: [
+            'bg-popover-bg',
+            'text-popover-fg',
+            'rounded-popover',
+            'outline-none',
+            'z-50'
+        ],
+        arrow: '',
+        title: [
+            'font-popover-title',
+            'leading-none',
+            'mb-popover-title-mb'
+        ],
+        description: [
+            "text-popover-description-fg text-popover-description-size",
+            'leading-normal'
+        ]
+    },
+    variants: {
+        shadow: {
+            true: {
+                content: 'shadow-popover'
+            }
+        },
+        border: {
+            true: {
+                content: 'border border-popover-border',
+                arrow: 'border-popover-border border-t border-l'
+            }
+        },
+        size: {
+            sm: {
+                content: 'p-popover-sm text-sm',
+                title: 'text-popover-title-sm'
+            },
+            md: {
+                content: 'p-popover-md',
+                title: 'text-popover-title-md'
+            },
+            lg: {
+                content: 'p-popover-lg text-lg',
+                title: 'text-popover-title-lg'
+            }
+        }
+    },
+    defaultVariants: {
+        size: 'md',
+        shadow: true
+    }
+});
+function Popover({ trigger, children, open, defaultOpen, onOpenChange, placement = 'bottom', offset = {
+    mainAxis: 8,
+    crossAxis: 0
+}, gutter = 8, sameWidth = false, slide = true, flip = true, overflowPadding = 8, modal = false, closeOnInteractOutside = true, closeOnEscape = true, showArrow = true, autoFocus = true, portalled = true, title, description, id, triggerRef, contentRef, triggerClassName, contentClassName, size = 'md', shadow = true, border = true, onPointerDownOutside }) {
+    const generatedId = useId();
+    const uniqueId = id || generatedId;
+    const service = useMachine(machine, {
+        id: uniqueId,
+        open,
+        defaultOpen,
+        dir: 'ltr',
+        positioning: {
+            placement,
+            offset,
+            gutter,
+            sameWidth,
+            slide,
+            flip,
+            overflowPadding
+        },
+        modal,
+        closeOnInteractOutside,
+        closeOnEscape,
+        autoFocus,
+        portalled,
+        onOpenChange,
+        onPointerDownOutside
+    });
+    const api = connect(service, normalizeProps);
+    const { trigger: triggerStyles, positioner, content: contentStyles, arrow, title: titleStyles, description: descriptionStyles } = popoverVariants({
+        size,
+        shadow,
+        border
+    });
+    const renderContent = ()=>/*#__PURE__*/ jsx("div", {
+            ...api.getPositionerProps(),
+            className: positioner(),
+            children: /*#__PURE__*/ jsxs("div", {
+                ...api.getContentProps(),
+                ref: contentRef,
+                className: contentStyles({
+                    className: contentClassName
+                }),
+                "data-side": placement.split('-')[0],
+                "data-state": api.open ? 'open' : 'closed',
+                children: [
+                    showArrow && /*#__PURE__*/ jsx("div", {
+                        ...api.getArrowProps(),
+                        children: /*#__PURE__*/ jsx("div", {
+                            ...api.getArrowTipProps(),
+                            className: arrow()
+                        })
+                    }),
+                    title && /*#__PURE__*/ jsx("div", {
+                        ...api.getTitleProps(),
+                        className: titleStyles(),
+                        children: title
+                    }),
+                    description && /*#__PURE__*/ jsx("div", {
+                        ...api.getDescriptionProps(),
+                        className: descriptionStyles(),
+                        children: description
+                    }),
+                    children
+                ]
+            })
+        });
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(Button, {
+                theme: "borderless",
+                ...api.getTriggerProps(),
+                ref: triggerRef,
+                className: triggerStyles({
+                    className: triggerClassName
+                }),
+                "data-state": api.open ? 'open' : 'closed',
+                children: trigger
+            }),
+            portalled ? /*#__PURE__*/ jsx(Portal, {
+                children: api.open && renderContent()
+            }) : api.open && renderContent()
+        ]
+    });
+}
+export { Popover };

package/dist/molecules/product-card.js

@@ -0,0 +1,194 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+import { Button } from "../atoms/button.js";
+import { Image } from "../atoms/image.js";
+import { Rating } from "../atoms/rating.js";
+import { tv } from "../utils.js";
+const productCardVariants = tv({
+    slots: {
+        root: [
+            'rounded-product-card p-product-card-padding',
+            'border-(length:--border-product-card-width) border-product-card-border bg-product-card-bg max-w-product-card-max shadow-sm'
+        ],
+        imageSlot: 'object-cover h-full rounded-product-card-image',
+        nameSlot: 'text-product-card-name-fg font-product-card-name text-product-card-name-size line-clamp-product-card-name',
+        priceSlot: 'text-product-card-price-fg font-product-card-price text-product-card-price-size',
+        stockStatusSlot: [
+            'text-product-card-stock-size font-product-card-stock',
+            'data-[stock=in-stock]:text-product-card-stock-fg-in-stock',
+            'data-[stock=limited-stock]:text-product-card-stock-fg-limited-stock',
+            'data-[stock=out-of-stock]:text-product-card-stock-fg-out-of-stock'
+        ],
+        badgesSlot: 'flex flex-wrap gap-product-card-box',
+        ratingSlot: 'flex items-center',
+        actionsSlot: 'flex flex-wrap gap-product-card-buttons',
+        button: ''
+    },
+    variants: {
+        buttonVariant: {
+            cart: {
+                button: 'bg-product-card-button-cart-bg hover:bg-product-card-button-cart-bg-hover text-product-card-button-cart-fg w-max'
+            },
+            detail: {
+                button: 'bg-product-card-button-detail-bg hover:bg-product-card-button-detail-bg-hover text-product-card-button-detail-fg w-max'
+            },
+            wishlist: {
+                button: 'bg-product-card-button-wishlist-bg hover:bg-product-card-button-wishlist-bg-hover text-product-card-button-wishlist-fg w-max'
+            },
+            custom: {}
+        },
+        layout: {
+            column: {
+                root: [
+                    'grid grid-cols-(--product-card-layout-column-grid) gap-product-card-col-layout'
+                ],
+                imageSlot: 'aspect-product-card-image'
+            },
+            row: {
+                root: 'grid grid-cols-(--product-card-layout-row-grid) gap-x-product-card-row-layout',
+                imageSlot: 'row-span-6 aspect-auto'
+            }
+        }
+    },
+    defaultVariants: {
+        layout: 'column',
+        buttonVariant: 'cart'
+    }
+});
+const ProductCardContext = /*#__PURE__*/ createContext({});
+function ProductCard({ children, layout = 'column', className, ref, ...props }) {
+    const { root } = productCardVariants({
+        layout
+    });
+    return /*#__PURE__*/ jsx(ProductCardContext.Provider, {
+        value: {
+            layout
+        },
+        children: /*#__PURE__*/ jsx("div", {
+            ref: ref,
+            className: root({
+                className
+            }),
+            ...props,
+            children: children
+        })
+    });
+}
+ProductCard.Image = function({ as, className, ref, ...props }) {
+    const context = useContext(ProductCardContext);
+    const { imageSlot } = productCardVariants({
+        layout: context.layout
+    });
+    const ImageComponent = as || Image;
+    return /*#__PURE__*/ jsx(ImageComponent, {
+        ref: ref,
+        className: imageSlot({
+            className
+        }),
+        ...props
+    });
+};
+ProductCard.Name = function({ children, className, ref, ...props }) {
+    const context = useContext(ProductCardContext);
+    const { nameSlot } = productCardVariants({
+        layout: context.layout
+    });
+    return /*#__PURE__*/ jsx("h3", {
+        ref: ref,
+        className: nameSlot({
+            className
+        }),
+        ...props,
+        children: children
+    });
+};
+ProductCard.Price = function({ children, className, ref, ...props }) {
+    const context = useContext(ProductCardContext);
+    const { priceSlot } = productCardVariants({
+        layout: context.layout
+    });
+    return /*#__PURE__*/ jsx("p", {
+        ref: ref,
+        className: priceSlot({
+            className
+        }),
+        ...props,
+        children: children
+    });
+};
+ProductCard.Stock = function({ children, className, ref, status = 'in-stock', ...props }) {
+    const context = useContext(ProductCardContext);
+    const { stockStatusSlot } = productCardVariants({
+        layout: context.layout
+    });
+    return /*#__PURE__*/ jsx("p", {
+        ref: ref,
+        "data-stock": status,
+        className: stockStatusSlot({
+            className
+        }),
+        ...props,
+        children: children
+    });
+};
+ProductCard.Badges = function({ children, className, ref, ...props }) {
+    const context = useContext(ProductCardContext);
+    const { badgesSlot } = productCardVariants({
+        layout: context.layout
+    });
+    return /*#__PURE__*/ jsx("div", {
+        ref: ref,
+        className: badgesSlot({
+            className
+        }),
+        ...props,
+        children: children
+    });
+};
+ProductCard.Rating = function({ children, className, rating, ref, ...props }) {
+    const context = useContext(ProductCardContext);
+    const { ratingSlot } = productCardVariants({
+        layout: context.layout
+    });
+    return /*#__PURE__*/ jsx("div", {
+        ref: ref,
+        className: ratingSlot({
+            className
+        }),
+        ...props,
+        children: rating ? /*#__PURE__*/ jsx(Rating, {
+            ...rating
+        }) : children
+    });
+};
+ProductCard.Actions = function({ children, className, ref, ...props }) {
+    const context = useContext(ProductCardContext);
+    const { actionsSlot } = productCardVariants({
+        layout: context.layout
+    });
+    return /*#__PURE__*/ jsx("div", {
+        ref: ref,
+        className: actionsSlot({
+            className
+        }),
+        ...props,
+        children: children
+    });
+};
+ProductCard.Button = function({ children, onClick, icon, className, buttonVariant, ref, ...props }) {
+    const { button } = productCardVariants({
+        buttonVariant
+    });
+    return /*#__PURE__*/ jsx(Button, {
+        ref: ref,
+        size: "sm",
+        className: button({
+            className
+        }),
+        onClick: onClick,
+        icon: icon,
+        ...props,
+        children: children
+    });
+};
+export { ProductCard };

package/dist/molecules/search-form.js

@@ -0,0 +1,106 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { Button } from "../atoms/button.js";
+import { Icon } from "../atoms/icon.js";
+import { Input } from "../atoms/input.js";
+import { Label } from "../atoms/label.js";
+import { tv } from "../utils.js";
+const iconSizeMap = {
+    sm: 'lg',
+    md: 'xl',
+    lg: '2xl'
+};
+const formVariants = tv({
+    base: [
+        'grid relative'
+    ],
+    variants: {
+        size: {
+            sm: 'gap-search-form-sm',
+            md: 'gap-search-form-md',
+            lg: 'gap-search-form-lg'
+        }
+    },
+    defaultVariants: {
+        size: 'md'
+    }
+});
+const inputWrapperVariants = tv({
+    base: [
+        'grid relative overflow-hidden rounded-md'
+    ],
+    variants: {
+        size: {
+            sm: 'gap-search-form-sm',
+            md: 'gap-search-form-md',
+            lg: 'gap-search-form-lg'
+        }
+    }
+});
+const buttonVariants = tv({
+    base: [
+        'absolute',
+        'justify-self-end place-self-center',
+        'h-full rounded-none p-200'
+    ]
+});
+function SearchForm({ inputProps, buttonProps, size = 'md', buttonText, buttonIcon = false, placeholder = 'Search...', label, className, ref, searchId, ...props }) {
+    const fallbackId = useId();
+    const id = searchId || `search-${fallbackId}`;
+    const withButton = !!buttonText || buttonIcon;
+    const iconSize = iconSizeMap[size] || 'lg';
+    return /*#__PURE__*/ jsx("search", {
+        children: /*#__PURE__*/ jsxs("form", {
+            ref: ref,
+            className: formVariants({
+                size,
+                className
+            }),
+            onSubmit: props.onSubmit,
+            ...props,
+            children: [
+                label && /*#__PURE__*/ jsx(Label, {
+                    htmlFor: id,
+                    size: size,
+                    children: label
+                }),
+                /*#__PURE__*/ jsxs("div", {
+                    className: inputWrapperVariants({
+                        size
+                    }),
+                    children: [
+                        /*#__PURE__*/ jsx(Input, {
+                            id: id,
+                            type: "search",
+                            withButtonInside: withButton && 'right',
+                            placeholder: placeholder,
+                            size: size,
+                            "aria-label": label ? void 0 : 'Search',
+                            ...inputProps
+                        }),
+                        withButton && /*#__PURE__*/ jsxs(Button, {
+                            type: "submit",
+                            theme: buttonProps?.theme || 'borderless',
+                            block: false,
+                            size: size,
+                            "aria-label": buttonText ? void 0 : 'Search',
+                            className: buttonVariants({
+                                className: buttonText ? '' : 'aspect-square'
+                            }),
+                            ...buttonProps,
+                            children: [
+                                buttonText,
+                                buttonIcon && /*#__PURE__*/ jsx(Icon, {
+                                    icon: 'token-icon-search',
+                                    size: iconSize
+                                })
+                            ]
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+}
+SearchForm.displayName = 'SearchForm';
+export { SearchForm };

package/dist/molecules/select.js

@@ -0,0 +1,217 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Portal, normalizeProps, useMachine } from "@zag-js/react";
+import { collection as select_collection, connect, machine } from "@zag-js/select";
+import { useId } from "react";
+import { tv } from "tailwind-variants";
+import { Button } from "../atoms/button.js";
+import { ErrorText } from "../atoms/error-text.js";
+import { ExtraText } from "../atoms/extra-text.js";
+import { Icon } from "../atoms/icon.js";
+import { Label } from "../atoms/label.js";
+const selectVariants = tv({
+    slots: {
+        root: [
+            'relative',
+            'flex flex-col gap-select-root',
+            'w-full'
+        ],
+        control: [
+            'flex relative items-center justify-between',
+            'w-full'
+        ],
+        positioner: [
+            'w-(--reference-width)',
+            'isolate z-(--z-index)'
+        ],
+        trigger: [
+            'w-full',
+            'p-select-trigger',
+            'border border-select-trigger-border rounded-select',
+            'text-select-trigger-size text-left',
+            'hover:bg-select-trigger-bg-hover',
+            'focus:outline-none focus:border-select-trigger-border-focus',
+            'data-[disabled]:cursor-not-allowed',
+            'data-[invalid]:border-select-danger data-[invalid]:ring-select-danger'
+        ],
+        clearTrigger: [
+            'absolute right-select-right h-full',
+            'p-select-clear-trigger',
+            'hover:bg-select-clear-trigger-bg',
+            'text-select-clear-trigger-fg hover:text-select-danger',
+            'focus:text-select-danger',
+            'focus:outline-none focus:ring-offset-transparent focus:ring-transparent'
+        ],
+        content: [
+            'bg-select-content-bg border border-select-content-border',
+            'rounded-select shadow-select-content max-h-fit',
+            'h-[calc(var(--available-height)-var(--spacing-content))]',
+            'overflow-auto z-(--z-content)'
+        ],
+        item: [
+            'flex items-center justify-between',
+            'bg-select-item-bg cursor-pointer',
+            'p-select-item',
+            'text-select-item-fg',
+            'hover:bg-select-item-bg-hover',
+            'data-[state=checked]:bg-select-item-bg-selected',
+            'data-[state=checked]:text-select-item-selected-fg',
+            'data-[disabled]:opacity-select-disabled data-[disabled]:cursor-not-allowed'
+        ],
+        itemIndicator: [
+            'text-select-indicator'
+        ],
+        value: [
+            'flex-grow truncate data-[placeholder]:text-select-placeholder'
+        ]
+    },
+    variants: {
+        size: {
+            xs: {
+                trigger: 'text-select-xs',
+                item: 'text-select-xs',
+                value: 'text-select-xs'
+            },
+            sm: {
+                trigger: 'text-select-sm',
+                item: 'text-select-sm',
+                value: 'text-select-sm'
+            },
+            md: {
+                trigger: 'text-select-md',
+                item: 'text-select-md',
+                value: 'text-select-md'
+            },
+            lg: {
+                trigger: 'text-select-lg',
+                item: 'text-select-lg',
+                value: 'text-select-lg'
+            }
+        }
+    },
+    defaultVariants: {
+        size: 'md'
+    }
+});
+function Select({ options, label, placeholder = 'Select an option', size = 'md', value, defaultValue, multiple = false, clearIcon = true, disabled = false, invalid = false, required = false, readOnly = false, errorText, helperText, closeOnSelect = true, loopFocus = true, name, form, onValueChange, onOpenChange, onHighlightChange, onSelect, className, id: providedId }) {
+    const generatedId = useId();
+    const id = providedId || generatedId;
+    const collection = select_collection({
+        items: options,
+        itemToString: (item)=>item.displayValue || item.value,
+        itemToValue: (item)=>item.value,
+        isItemDisabled: (item)=>!!item.disabled
+    });
+    const service = useMachine(machine, {
+        id,
+        collection,
+        name,
+        form,
+        multiple,
+        disabled,
+        invalid,
+        required,
+        readOnly,
+        closeOnSelect,
+        loopFocus,
+        defaultValue,
+        value,
+        onValueChange,
+        onOpenChange,
+        onHighlightChange,
+        onSelect
+    });
+    const api = connect(service, normalizeProps);
+    const { root, control, trigger, clearTrigger, content, positioner, item, itemIndicator, value: valueSlot } = selectVariants({
+        size
+    });
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx("select", {
+                ...api.getHiddenSelectProps(),
+                children: options.map((option)=>/*#__PURE__*/ jsx("option", {
+                        value: option.value,
+                        disabled: option.disabled,
+                        children: option.displayValue || option.value
+                    }, option.value))
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: root({
+                    className
+                }),
+                ...api.getRootProps(),
+                children: [
+                    label && /*#__PURE__*/ jsx(Label, {
+                        ...api.getLabelProps(),
+                        children: label
+                    }),
+                    /*#__PURE__*/ jsxs("div", {
+                        className: control(),
+                        ...api.getControlProps(),
+                        children: [
+                            /*#__PURE__*/ jsx(Button, {
+                                theme: "borderless",
+                                className: trigger(),
+                                ...api.getTriggerProps(),
+                                icon: api.open ? 'token-icon-select-indicator-open' : 'token-icon-select-indicator',
+                                iconPosition: "right",
+                                children: /*#__PURE__*/ jsx("span", {
+                                    className: valueSlot(),
+                                    "data-placeholder": 0 === api.value.length,
+                                    children: api.value.length > 0 ? options.find((option)=>option.value === api.value[0])?.label : placeholder
+                                })
+                            }),
+                            clearIcon && /*#__PURE__*/ jsx(Button, {
+                                theme: "borderless",
+                                ...api.getClearTriggerProps(),
+                                className: clearTrigger(),
+                                "aria-label": "Clear selection",
+                                icon: "token-icon-select-clear"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx(Portal, {
+                        children: /*#__PURE__*/ jsx("div", {
+                            className: positioner(),
+                            ...api.getPositionerProps(),
+                            children: /*#__PURE__*/ jsx("ul", {
+                                className: content(),
+                                ...api.getContentProps(),
+                                children: options.map((option)=>/*#__PURE__*/ jsxs("li", {
+                                        className: item(),
+                                        ...api.getItemProps({
+                                            item: option
+                                        }),
+                                        children: [
+                                            /*#__PURE__*/ jsx("span", {
+                                                ...api.getItemTextProps({
+                                                    item: option
+                                                }),
+                                                children: option.label
+                                            }),
+                                            /*#__PURE__*/ jsx("span", {
+                                                className: itemIndicator(),
+                                                ...api.getItemIndicatorProps({
+                                                    item: option
+                                                }),
+                                                children: /*#__PURE__*/ jsx(Icon, {
+                                                    icon: "token-icon-select-check"
+                                                })
+                                            })
+                                        ]
+                                    }, option.value))
+                            })
+                        })
+                    }),
+                    invalid && /*#__PURE__*/ jsx(ErrorText, {
+                        children: errorText
+                    }),
+                    !invalid && helperText && /*#__PURE__*/ jsx(ExtraText, {
+                        children: helperText
+                    })
+                ]
+            })
+        ]
+    });
+}
+Select.displayName = 'Select';
+export { Select };