@techsio/ui-kit 0.41.2 → 0.42.0

package/dist/internal/organisms/sidebar.styles.js

@@ -0,0 +1,146 @@
+import { tv } from "../../utils.js";
+const sidebarVariants = tv({
+    slots: {
+        root: [
+            "relative flex min-h-sidebar-viewport w-full min-w-0",
+            "bg-sidebar-root-bg text-sidebar-root-fg"
+        ],
+        breakpoint: "pointer-events-none invisible absolute sidebar-desktop:block hidden size-0",
+        desktopPanel: [
+            "group/sidebar-panel sticky top-sidebar-offset hidden h-sidebar-viewport shrink-0 flex-col overflow-hidden",
+            "sidebar-desktop:flex bg-sidebar-panel-bg text-sidebar-panel-fg",
+            "border-sidebar-panel-border transition-all duration-(--duration-sidebar) motion-reduce:transition-none",
+            "focus-visible:sidebar-focus-ring",
+            "data-[side=start]:border-e-(length:--border-width-sidebar)",
+            "data-[side=end]:border-s-(length:--border-width-sidebar)"
+        ],
+        mobilePanel: [
+            "w-full max-w-sidebar-mobile bg-sidebar-panel-bg p-0 text-sidebar-panel-fg",
+            "data-[swipe-direction=left]:rounded-none data-[swipe-direction=right]:rounded-none"
+        ],
+        mobileAside: "focus-visible:sidebar-focus-ring flex size-full min-h-0 flex-col overflow-hidden",
+        trigger: [
+            "bg-sidebar-trigger-bg text-sidebar-trigger-fg",
+            "hover:bg-sidebar-trigger-bg-hover active:bg-sidebar-trigger-bg-active"
+        ],
+        inset: [
+            "relative min-h-sidebar-viewport min-w-0 flex-1",
+            "bg-sidebar-inset-bg text-sidebar-inset-fg"
+        ],
+        header: [
+            "flex shrink-0 flex-col gap-sidebar-section p-sidebar-section",
+            "border-b-(length:--border-width-sidebar) border-sidebar-panel-border",
+            "group-data-[state=collapsed]/sidebar-panel:p-sidebar-section-compact",
+            "group-data-[size=rail]/sidebar-pane:p-sidebar-section-compact"
+        ],
+        content: [
+            "flex min-h-0 flex-1 flex-col gap-sidebar-content overflow-y-auto overflow-x-hidden",
+            "p-sidebar-content",
+            "group-data-[state=collapsed]/sidebar-panel:p-sidebar-content-compact",
+            "group-data-[size=rail]/sidebar-pane:p-sidebar-content-compact"
+        ],
+        footer: [
+            "flex shrink-0 flex-col gap-sidebar-section p-sidebar-section",
+            "border-t-(length:--border-width-sidebar) border-sidebar-panel-border",
+            "group-data-[state=collapsed]/sidebar-panel:p-sidebar-section-compact",
+            "group-data-[size=rail]/sidebar-pane:p-sidebar-section-compact"
+        ],
+        group: "flex min-w-0 flex-col gap-sidebar-group",
+        groupLabel: [
+            "sidebar-group-label-typography truncate px-sidebar-group-label",
+            "font-sidebar-group-label text-sidebar-group-label-fg"
+        ],
+        groupContent: "flex min-w-0 flex-col gap-sidebar-group-content",
+        menu: "flex min-w-0 list-none flex-col gap-sidebar-menu",
+        item: "relative min-w-0",
+        separator: [
+            "h-sidebar-separator w-full shrink-0 border-0",
+            "bg-sidebar-separator-bg"
+        ],
+        expanded: "min-w-0",
+        label: "min-w-0 truncate whitespace-nowrap",
+        paneGroup: "flex min-h-0 min-w-0 flex-1 overflow-hidden",
+        pane: "group/sidebar-pane flex min-h-0 min-w-0 flex-col",
+        rail: [
+            "sidebar-rail-layer absolute inset-y-sidebar-rail hidden w-sidebar-rail cursor-col-resize items-center justify-center",
+            "sidebar-desktop:flex text-sidebar-rail-fg hover:bg-sidebar-rail-bg-hover",
+            "focus-visible:sidebar-focus-ring",
+            "data-[side=end]:start-0 data-[side=start]:end-0",
+            "after:h-sidebar-rail-indicator after:w-sidebar-rail-indicator after:rounded-sidebar-rail after:bg-sidebar-rail-indicator-bg"
+        ]
+    },
+    variants: {
+        collapsible: {
+            icon: {},
+            offcanvas: {},
+            none: {}
+        },
+        expanded: {
+            true: {},
+            false: {}
+        },
+        paneSize: {
+            rail: {
+                pane: "w-sidebar-icon shrink-0"
+            },
+            content: {
+                pane: [
+                    "border-s-(length:--border-width-sidebar) flex-1",
+                    "border-sidebar-pane-border"
+                ]
+            },
+            auto: {
+                pane: "flex-1"
+            }
+        },
+        collapsed: {
+            true: {
+                label: "sr-only"
+            },
+            false: {}
+        }
+    },
+    compoundVariants: [
+        {
+            collapsible: "icon",
+            expanded: true,
+            class: {
+                desktopPanel: "w-sidebar-expanded"
+            }
+        },
+        {
+            collapsible: "icon",
+            expanded: false,
+            class: {
+                desktopPanel: "w-sidebar-icon"
+            }
+        },
+        {
+            collapsible: "offcanvas",
+            expanded: true,
+            class: {
+                desktopPanel: "w-sidebar-expanded"
+            }
+        },
+        {
+            collapsible: "offcanvas",
+            expanded: false,
+            class: {
+                desktopPanel: "w-0 border-transparent"
+            }
+        },
+        {
+            collapsible: "none",
+            class: {
+                desktopPanel: "w-sidebar-expanded"
+            }
+        }
+    ],
+    defaultVariants: {
+        collapsible: "icon",
+        expanded: true,
+        paneSize: "auto",
+        collapsed: false
+    }
+});
+export { sidebarVariants };

package/dist/molecules/drawer.js

@@ -0,0 +1,262 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Portal, mergeProps } from "@zag-js/react";
+import { ActionIcon } from "../atoms/action-icon.js";
+import { Button } from "../atoms/button.js";
+import { DrawerProvider, DrawerStackProvider, getDrawerPresenceProps, useComposedRefs, useDrawer, useDrawerContext, useDrawerPresence, useDrawerStackContext } from "../internal/molecules/drawer.context.js";
+import { drawerVariants } from "../internal/molecules/drawer.styles.js";
+const drawer_useDrawer = useDrawer;
+const swipeDirectionByPlacement = {
+    bottom: "down",
+    end: "end",
+    start: "start",
+    top: "up"
+};
+function Drawer({ children, immediate, lazyMount = true, onEnterComplete, onExitComplete, placement = "end", size, skipAnimationOnMount = false, unmountOnExit = true, ...machineProps }) {
+    const api = drawer_useDrawer({
+        ...machineProps,
+        swipeDirection: swipeDirectionByPlacement[placement]
+    });
+    return /*#__PURE__*/ jsx(DrawerProvider, {
+        api: api,
+        immediate: immediate,
+        lazyMount: lazyMount,
+        onEnterComplete: onEnterComplete,
+        onExitComplete: onExitComplete,
+        size: size,
+        skipAnimationOnMount: skipAnimationOnMount,
+        unmountOnExit: unmountOnExit,
+        children: children
+    });
+}
+Drawer.Root = Drawer;
+Drawer.RootProvider = function({ children, immediate, lazyMount = true, onEnterComplete, onExitComplete, size, skipAnimationOnMount = false, unmountOnExit = true, value }) {
+    return /*#__PURE__*/ jsx(DrawerProvider, {
+        api: value,
+        immediate: immediate,
+        lazyMount: lazyMount,
+        onEnterComplete: onEnterComplete,
+        onExitComplete: onExitComplete,
+        size: size,
+        skipAnimationOnMount: skipAnimationOnMount,
+        unmountOnExit: unmountOnExit,
+        children: children
+    });
+};
+Drawer.Trigger = function({ className, ref, value, ...props }) {
+    const { api, styles } = useDrawerContext();
+    const mergedProps = mergeProps(api.getTriggerProps({
+        value
+    }), props);
+    return /*#__PURE__*/ jsx(Button, {
+        ...mergedProps,
+        className: styles.trigger({
+            className
+        }),
+        ref: ref
+    });
+};
+Drawer.Portal = function(props) {
+    return /*#__PURE__*/ jsx(Portal, {
+        ...props
+    });
+};
+Drawer.Backdrop = function({ className, ref, ...props }) {
+    const { api, presenceOptions, styles } = useDrawerContext();
+    const presence = useDrawerPresence({
+        ...presenceOptions,
+        present: api.open
+    });
+    const composedRef = useComposedRefs(presence.ref, ref);
+    if (presence.unmounted) return null;
+    const mergedProps = mergeProps(api.getBackdropProps(), getDrawerPresenceProps(api.open, presence), props);
+    return /*#__PURE__*/ jsx("div", {
+        ...mergedProps,
+        className: styles.backdrop({
+            className
+        }),
+        ref: composedRef
+    });
+};
+Drawer.Positioner = function({ className, ref, ...props }) {
+    const { api, presence, styles } = useDrawerContext();
+    if (presence.unmounted) return null;
+    const mergedProps = mergeProps(api.getPositionerProps(), getDrawerPresenceProps(api.open, presence), props);
+    return /*#__PURE__*/ jsx("div", {
+        ...mergedProps,
+        className: styles.positioner({
+            className
+        }),
+        ref: ref
+    });
+};
+Drawer.Content = function({ className, draggable = true, ref, ...props }) {
+    const { api, presence, styles } = useDrawerContext();
+    const composedRef = useComposedRefs(presence.ref, ref);
+    if (presence.unmounted) return null;
+    const mergedProps = mergeProps(api.getContentProps({
+        draggable
+    }), getDrawerPresenceProps(api.open, presence), props);
+    return /*#__PURE__*/ jsx("div", {
+        ...mergedProps,
+        className: styles.content({
+            className
+        }),
+        ref: composedRef
+    });
+};
+Drawer.Header = function({ className, ref, ...props }) {
+    const { styles } = useDrawerContext();
+    return /*#__PURE__*/ jsx("div", {
+        className: styles.header({
+            className
+        }),
+        ref: ref,
+        ...props
+    });
+};
+Drawer.Body = function({ className, ref, ...props }) {
+    const { styles } = useDrawerContext();
+    return /*#__PURE__*/ jsx("div", {
+        className: styles.body({
+            className
+        }),
+        ref: ref,
+        ...props
+    });
+};
+Drawer.Footer = function({ className, ref, ...props }) {
+    const { styles } = useDrawerContext();
+    return /*#__PURE__*/ jsx("div", {
+        className: styles.footer({
+            className
+        }),
+        ref: ref,
+        ...props
+    });
+};
+Drawer.Title = function({ className, ref, ...props }) {
+    const { api, styles } = useDrawerContext();
+    return /*#__PURE__*/ jsx("h2", {
+        ...mergeProps(api.getTitleProps(), props),
+        className: styles.title({
+            className
+        }),
+        ref: ref
+    });
+};
+Drawer.Description = function({ className, ref, ...props }) {
+    const { api, styles } = useDrawerContext();
+    return /*#__PURE__*/ jsx("p", {
+        ...mergeProps(api.getDescriptionProps(), props),
+        className: styles.description({
+            className
+        }),
+        ref: ref
+    });
+};
+Drawer.CloseTrigger = function(props) {
+    const { api, styles } = useDrawerContext();
+    const { onClick: onMachineClick, ...machineProps } = api.getCloseTriggerProps();
+    if (null == props.children) {
+        const { children: _children, className: iconClassName, icon: iconName = "token-icon-drawer-close", onClick: onIconClick, ref: iconRef, size: iconSize = "md", tone = "neutral", type: iconType = "button", ...iconProps } = props;
+        const mergedProps = mergeProps(iconProps, machineProps);
+        return /*#__PURE__*/ jsx(ActionIcon, {
+            ...mergedProps,
+            "aria-label": mergedProps["aria-label"] ?? "Close drawer",
+            className: styles.closeTrigger({
+                className: iconClassName
+            }),
+            icon: iconName,
+            onClick: (event)=>{
+                onIconClick?.(event);
+                if (!event.defaultPrevented) onMachineClick?.(event);
+            },
+            ref: iconRef,
+            size: iconSize,
+            tone: tone,
+            type: iconType
+        });
+    }
+    const { children, className, icon, onClick, ref, size = "current", theme = "unstyled", type = "button", ...buttonProps } = props;
+    const mergedProps = mergeProps(buttonProps, machineProps);
+    return /*#__PURE__*/ jsx(Button, {
+        ...mergedProps,
+        className: styles.closeTrigger({
+            className
+        }),
+        icon: icon,
+        onClick: (event)=>{
+            onClick?.(event);
+            if (!event.defaultPrevented) onMachineClick?.(event);
+        },
+        ref: ref,
+        size: size,
+        theme: theme,
+        type: type,
+        children: children
+    });
+};
+Drawer.Grabber = function({ className, ref, ...props }) {
+    const { api, styles } = useDrawerContext();
+    const mergedProps = mergeProps(api.getGrabberProps(), props);
+    return /*#__PURE__*/ jsx("div", {
+        ...mergedProps,
+        className: styles.grabber({
+            className
+        }),
+        "data-swipe-direction": api.swipeDirection,
+        ref: ref
+    });
+};
+Drawer.GrabberIndicator = function({ className, ref, ...props }) {
+    const { api, styles } = useDrawerContext();
+    return /*#__PURE__*/ jsx("div", {
+        ...mergeProps(api.getGrabberIndicatorProps(), props),
+        className: styles.grabberIndicator({
+            className
+        }),
+        ref: ref
+    });
+};
+Drawer.SwipeArea = function({ className, disabled, ref, swipeDirection, ...props }) {
+    const { api, styles } = useDrawerContext();
+    return /*#__PURE__*/ jsx("div", {
+        ...mergeProps(api.getSwipeAreaProps({
+            disabled,
+            swipeDirection
+        }), props),
+        className: styles.swipeArea({
+            className
+        }),
+        ref: ref
+    });
+};
+Drawer.Context = function({ children }) {
+    return children(useDrawerContext().api);
+};
+Drawer.Stack = DrawerStackProvider;
+Drawer.Indent = function({ className, ref, ...props }) {
+    const api = useDrawerStackContext();
+    const { indent } = drawerVariants();
+    return /*#__PURE__*/ jsx("div", {
+        ...mergeProps(api.getIndentProps(), props),
+        className: indent({
+            className
+        }),
+        ref: ref
+    });
+};
+Drawer.IndentBackground = function({ className, ref, ...props }) {
+    const api = useDrawerStackContext();
+    const { indentBackground } = drawerVariants();
+    return /*#__PURE__*/ jsx("div", {
+        ...mergeProps(api.getIndentBackgroundProps(), props),
+        className: indentBackground({
+            className
+        }),
+        ref: ref
+    });
+};
+Drawer.displayName = "Drawer";
+export { Drawer, drawer_useDrawer as useDrawer };