@techsio/ui-kit 0.3.2 → 0.4.0

package/dist/molecules/popover.js

@@ -1,151 +1,276 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { connect, machine } from "@zag-js/popover";
-import { Portal, normalizeProps, useMachine } from "@zag-js/react";
-import { useId } from "react";
+import { Portal, mergeProps, normalizeProps, useMachine } from "@zag-js/react";
+import { createContext, useContext, useId } from "react";
 import { Button } from "../atoms/button.js";
 import { tv } from "../utils.js";
 const popoverVariants = tv({
     slots: {
         trigger: [
-            'p-popover-trigger'
+            "p-popover-trigger"
+        ],
+        indicator: [
+            "data-[state=open]:rotate-180"
         ],
         positioner: [
-            'absolute'
+            "absolute"
         ],
         content: [
-            'bg-popover-bg',
-            'text-popover-fg',
-            'rounded-popover',
-            'outline-none',
-            'z-50'
+            "bg-popover-bg",
+            "text-popover-fg",
+            "rounded-popover",
+            "outline-none",
+            "z-50",
+            "relative"
         ],
-        arrow: '',
+        arrow: "",
+        arrowTip: "",
         title: [
-            'font-popover-title',
-            'leading-none',
-            'mb-popover-title-mb'
+            "font-popover-title",
+            "leading-none",
+            "mb-popover-title-mb"
         ],
         description: [
             "text-popover-description-fg text-popover-description-size",
-            'leading-normal'
+            "leading-normal"
+        ],
+        closeTrigger: [
+            "absolute top-2 right-2",
+            "text-popover-close-trigger-fg"
         ]
     },
     variants: {
         shadow: {
             true: {
-                content: 'shadow-popover'
+                content: "shadow-popover"
             }
         },
         border: {
             true: {
-                content: 'border border-popover-border',
-                arrow: 'border-popover-border border-t border-l'
+                content: "border border-popover-border",
+                arrowTip: "border-popover-border border-t border-l"
             }
         },
         size: {
             sm: {
-                content: 'p-popover-sm text-sm',
-                title: 'text-popover-title-sm'
+                content: "p-popover-sm text-sm",
+                title: "text-popover-title-sm"
             },
             md: {
-                content: 'p-popover-md',
-                title: 'text-popover-title-md'
+                content: "p-popover-md",
+                title: "text-popover-title-md"
             },
             lg: {
-                content: 'p-popover-lg text-lg',
-                title: 'text-popover-title-lg'
+                content: "p-popover-lg text-lg",
+                title: "text-popover-title-lg"
             }
         }
     },
     defaultVariants: {
-        size: 'md',
-        shadow: true
+        size: "md",
+        shadow: true,
+        border: true
     }
 });
-function Popover({ trigger, children, open, defaultOpen, onOpenChange, placement = 'bottom', offset = {
+const PopoverContext = /*#__PURE__*/ createContext(null);
+function usePopoverContext() {
+    const context = useContext(PopoverContext);
+    if (!context) throw new Error("Popover components must be used within Popover.Root");
+    return context;
+}
+function Popover({ autoFocus = true, border, children, closeOnEscape = true, closeOnInteractOutside = true, defaultOpen, dir = "ltr", flip = true, gutter = 8, id, modal = false, 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, disabled = false, onPointerDownOutside }) {
+}, onOpenChange, onPointerDownOutside, open, overflowPadding = 8, placement = "bottom", portalled = true, sameWidth = false, shadow, size, slide = true, ...props }) {
     const generatedId = useId();
     const uniqueId = id || generatedId;
     const service = useMachine(machine, {
+        ...props,
+        autoFocus,
+        closeOnEscape,
+        closeOnInteractOutside,
+        defaultOpen,
+        dir,
         id: uniqueId,
+        modal,
+        onOpenChange,
+        onPointerDownOutside,
         open,
-        defaultOpen,
-        dir: 'ltr',
+        portalled,
         positioning: {
-            placement,
-            offset,
+            flip,
             gutter,
+            offset,
+            overflowPadding,
+            placement,
             sameWidth,
-            slide,
-            flip,
-            overflowPadding
-        },
-        modal,
-        closeOnInteractOutside,
-        closeOnEscape,
-        autoFocus,
-        portalled,
-        onOpenChange,
-        onPointerDownOutside
+            slide
+        }
     });
     const api = connect(service, normalizeProps);
-    const { trigger: triggerStyles, positioner, content: contentStyles, arrow, title: titleStyles, description: descriptionStyles } = popoverVariants({
-        size,
+    const styles = popoverVariants({
+        border,
         shadow,
-        border
+        size
     });
-    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",
-                disabled: disabled,
-                ...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()
-        ]
+    return /*#__PURE__*/ jsx(PopoverContext.Provider, {
+        value: {
+            api,
+            placement,
+            styles
+        },
+        children: children
     });
 }
+Popover.Anchor = function({ className, ref, ...props }) {
+    const { api } = usePopoverContext();
+    const anchorProps = mergeProps(props, api.getAnchorProps());
+    return /*#__PURE__*/ jsx("div", {
+        ...anchorProps,
+        className: className,
+        ref: ref
+    });
+};
+Popover.Trigger = function({ children, className, clickBehavior = "toggle", disabled, onClick, ref, size = "current", theme = "borderless", type = "button", ...props }) {
+    const { api, styles } = usePopoverContext();
+    const { disabled: machineDisabled, onClick: onMachineClick, ...machineTriggerProps } = api.getTriggerProps();
+    const buttonProps = mergeProps(props, machineTriggerProps);
+    const isDisabled = Boolean(disabled || machineDisabled);
+    return /*#__PURE__*/ jsx(Button, {
+        ...buttonProps,
+        className: styles.trigger({
+            className
+        }),
+        "data-state": api.open ? "open" : "closed",
+        disabled: isDisabled,
+        onClick: (event)=>{
+            onClick?.(event);
+            if (!event.defaultPrevented && "toggle" === clickBehavior) onMachineClick?.(event);
+        },
+        ref: ref,
+        size: size,
+        theme: theme,
+        type: type,
+        children: children
+    });
+};
+Popover.Indicator = function({ className, ref, ...props }) {
+    const { api, styles } = usePopoverContext();
+    const indicatorProps = mergeProps(props, api.getIndicatorProps());
+    return /*#__PURE__*/ jsx("span", {
+        ...indicatorProps,
+        className: styles.indicator({
+            className
+        }),
+        "data-state": api.open ? "open" : "closed",
+        ref: ref
+    });
+};
+Popover.Positioner = function({ children, className, forceMount = false, ref, ...props }) {
+    const { api, styles } = usePopoverContext();
+    if (!(api.open || forceMount)) return null;
+    const positionerProps = mergeProps(props, api.getPositionerProps());
+    const positionerNode = /*#__PURE__*/ jsx("div", {
+        ...positionerProps,
+        className: styles.positioner({
+            className
+        }),
+        ref: ref,
+        children: children
+    });
+    return api.portalled ? /*#__PURE__*/ jsx(Portal, {
+        children: positionerNode
+    }) : positionerNode;
+};
+Popover.Content = function({ children, className, ref, ...props }) {
+    const { api, placement, styles } = usePopoverContext();
+    const machineContentProps = api.getContentProps();
+    const contentProps = mergeProps(props, machineContentProps);
+    const contentPlacement = contentProps["data-placement"];
+    const contentSide = "string" == typeof contentPlacement ? contentPlacement.split("-")[0] : placement.split("-")[0];
+    return /*#__PURE__*/ jsx("div", {
+        ...contentProps,
+        className: styles.content({
+            className
+        }),
+        "data-side": contentSide,
+        "data-state": api.open ? "open" : "closed",
+        ref: ref,
+        children: children
+    });
+};
+Popover.Arrow = function({ children, className, ref, ...props }) {
+    const { api, styles } = usePopoverContext();
+    const arrowProps = mergeProps(props, api.getArrowProps());
+    return /*#__PURE__*/ jsx("div", {
+        ...arrowProps,
+        className: styles.arrow({
+            className
+        }),
+        ref: ref,
+        children: children ?? /*#__PURE__*/ jsx(Popover.ArrowTip, {})
+    });
+};
+Popover.ArrowTip = function({ className, ref, ...props }) {
+    const { api, styles } = usePopoverContext();
+    const arrowTipProps = mergeProps(props, api.getArrowTipProps());
+    return /*#__PURE__*/ jsx("div", {
+        ...arrowTipProps,
+        className: styles.arrowTip({
+            className
+        }),
+        ref: ref
+    });
+};
+Popover.Title = function({ className, ref, ...props }) {
+    const { api, styles } = usePopoverContext();
+    const titleProps = mergeProps(props, api.getTitleProps());
+    return /*#__PURE__*/ jsx("div", {
+        ...titleProps,
+        className: styles.title({
+            className
+        }),
+        ref: ref
+    });
+};
+Popover.Description = function({ className, ref, ...props }) {
+    const { api, styles } = usePopoverContext();
+    const descriptionProps = mergeProps(props, api.getDescriptionProps());
+    return /*#__PURE__*/ jsx("div", {
+        ...descriptionProps,
+        className: styles.description({
+            className
+        }),
+        ref: ref
+    });
+};
+Popover.CloseTrigger = function({ children, className, icon, onClick, ref, size = "current", theme = "unstyled", type = "button", ...props }) {
+    const { api, styles } = usePopoverContext();
+    const { onClick: onMachineClick, ...machineCloseTriggerProps } = api.getCloseTriggerProps();
+    const buttonProps = mergeProps(props, machineCloseTriggerProps);
+    const closeIcon = icon ?? (children ? void 0 : "token-icon-close");
+    return /*#__PURE__*/ jsx(Button, {
+        ...buttonProps,
+        "aria-label": children ? void 0 : "Close popover",
+        className: styles.closeTrigger({
+            className
+        }),
+        icon: closeIcon,
+        onClick: (event)=>{
+            onClick?.(event);
+            if (!event.defaultPrevented) onMachineClick?.(event);
+        },
+        ref: ref,
+        size: size,
+        theme: theme,
+        type: type,
+        children: children
+    });
+};
+Popover.Context = function({ children }) {
+    const { api } = usePopoverContext();
+    return children(api);
+};
+Popover.Root = Popover;
+Popover.displayName = "Popover";
 export { Popover };

package/dist/molecules/product-card.js

@@ -7,56 +7,56 @@ 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'
+            "rounded-product-card p-product-card-padding",
+            "border-(length:--border-product-card-width) max-w-product-card-max border-product-card-border bg-product-card-bg 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',
+        imageSlot: "h-full rounded-product-card-image object-cover",
+        nameSlot: "line-clamp-product-card-name font-product-card-name text-product-card-name-fg text-product-card-name-size",
+        priceSlot: "font-product-card-price text-product-card-price-fg 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'
+            "font-product-card-stock text-product-card-stock-size",
+            "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: ''
+        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'
+                button: "w-max bg-product-card-button-cart-bg text-product-card-button-cart-fg hover:bg-product-card-button-cart-bg-hover"
             },
             detail: {
-                button: 'bg-product-card-button-detail-bg hover:bg-product-card-button-detail-bg-hover text-product-card-button-detail-fg w-max'
+                button: "w-max bg-product-card-button-detail-bg text-product-card-button-detail-fg hover:bg-product-card-button-detail-bg-hover"
             },
             wishlist: {
-                button: 'bg-product-card-button-wishlist-bg hover:bg-product-card-button-wishlist-bg-hover text-product-card-button-wishlist-fg w-max'
+                button: "w-max bg-product-card-button-wishlist-bg text-product-card-button-wishlist-fg hover:bg-product-card-button-wishlist-bg-hover"
             },
             custom: {}
         },
         layout: {
             column: {
                 root: [
-                    'grid grid-cols-(--product-card-layout-column-grid) gap-product-card-col-layout'
+                    "grid grid-cols-(--product-card-layout-column-grid) gap-product-card-col-layout"
                 ],
-                imageSlot: 'aspect-product-card-image'
+                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'
+                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'
+        layout: "column",
+        buttonVariant: "cart"
     }
 });
 const ProductCardContext = /*#__PURE__*/ createContext({});
-function ProductCard({ children, layout = 'column', className, ref, ...props }) {
+function ProductCard({ children, layout = "column", className, ref, ...props }) {
     const { root } = productCardVariants({
         layout
     });
@@ -65,10 +65,10 @@ function ProductCard({ children, layout = 'column', className, ref, ...props })
             layout
         },
         children: /*#__PURE__*/ jsx("div", {
-            ref: ref,
             className: root({
                 className
             }),
+            ref: ref,
             ...props,
             children: children
         })
@@ -81,10 +81,10 @@ ProductCard.Image = function({ as, className, ref, ...props }) {
     });
     const ImageComponent = as || Image;
     return /*#__PURE__*/ jsx(ImageComponent, {
-        ref: ref,
         className: imageSlot({
             className
         }),
+        ref: ref,
         ...props
     });
 };
@@ -94,10 +94,10 @@ ProductCard.Name = function({ children, className, ref, ...props }) {
         layout: context.layout
     });
     return /*#__PURE__*/ jsx("h3", {
-        ref: ref,
         className: nameSlot({
             className
         }),
+        ref: ref,
         ...props,
         children: children
     });
@@ -108,25 +108,25 @@ ProductCard.Price = function({ children, className, ref, ...props }) {
         layout: context.layout
     });
     return /*#__PURE__*/ jsx("p", {
-        ref: ref,
         className: priceSlot({
             className
         }),
+        ref: ref,
         ...props,
         children: children
     });
 };
-ProductCard.Stock = function({ children, className, ref, status = 'in-stock', ...props }) {
+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
         }),
+        "data-stock": status,
+        ref: ref,
         ...props,
         children: children
     });
@@ -137,10 +137,10 @@ ProductCard.Badges = function({ children, className, ref, ...props }) {
         layout: context.layout
     });
     return /*#__PURE__*/ jsx("div", {
-        ref: ref,
         className: badgesSlot({
             className
         }),
+        ref: ref,
         ...props,
         children: children
     });
@@ -151,10 +151,10 @@ ProductCard.Rating = function({ children, className, rating, ref, ...props }) {
         layout: context.layout
     });
     return /*#__PURE__*/ jsx("div", {
-        ref: ref,
         className: ratingSlot({
             className
         }),
+        ref: ref,
         ...props,
         children: rating ? /*#__PURE__*/ jsx(Rating, {
             ...rating
@@ -167,26 +167,27 @@ ProductCard.Actions = function({ children, className, ref, ...props }) {
         layout: context.layout
     });
     return /*#__PURE__*/ jsx("div", {
-        ref: ref,
         className: actionsSlot({
             className
         }),
+        ref: ref,
         ...props,
         children: children
     });
 };
-ProductCard.Button = function({ children, onClick, icon, className, buttonVariant, ref, ...props }) {
+ProductCard.Button = function({ children, onClick, icon, iconSize, className, buttonVariant, ref, ...props }) {
     const { button } = productCardVariants({
         buttonVariant
     });
     return /*#__PURE__*/ jsx(Button, {
-        ref: ref,
-        size: "sm",
         className: button({
             className
         }),
-        onClick: onClick,
         icon: icon,
+        iconSize: iconSize,
+        onClick: onClick,
+        ref: ref,
+        size: "sm",
         ...props,
         children: children
     });