@techsio/ui-kit 0.41.2 → 0.42.0

package/dist/organisms/sidebar.js

@@ -0,0 +1,448 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { ActionIcon } from "../atoms/action-icon.js";
+import { Tooltip } from "../atoms/tooltip.js";
+import { SidebarPanelProvider, SidebarProvider, useSidebarContext, useSidebarPanelContext, useSidebarState } from "../internal/organisms/sidebar.context.js";
+import { useSidebarPanelFocusTransfer } from "../internal/organisms/sidebar.focus.js";
+import { sidebarVariants } from "../internal/organisms/sidebar.styles.js";
+import { Drawer } from "../molecules/drawer.js";
+function Sidebar({ children, className, collapsible, defaultExpanded, defaultMobileOpen, dir, expanded, id, mobileOpen, onExpandedChange, onMobileOpenChange, ref, ...props }) {
+    const state = useSidebarState({
+        collapsible,
+        defaultExpanded,
+        defaultMobileOpen,
+        dir,
+        expanded,
+        id,
+        mobileOpen,
+        onExpandedChange,
+        onMobileOpenChange
+    });
+    const { breakpoint, root } = sidebarVariants();
+    return /*#__PURE__*/ jsx(SidebarProvider, {
+        value: state,
+        children: /*#__PURE__*/ jsxs("div", {
+            ...props,
+            className: root({
+                className
+            }),
+            "data-part": "root",
+            "data-scope": "sidebar",
+            dir: state.dir,
+            id: state.rootId,
+            ref: ref,
+            children: [
+                /*#__PURE__*/ jsx("span", {
+                    "aria-hidden": "true",
+                    className: breakpoint(),
+                    "data-part": "breakpoint",
+                    "data-scope": "sidebar",
+                    ref: state.breakpointRef
+                }),
+                children
+            ]
+        })
+    });
+}
+Sidebar.Root = Sidebar;
+Sidebar.Panel = function({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, children, className, onBlurCapture, onFocusCapture, ref, side = "start", tabIndex = -1, ...props }) {
+    const context = useSidebarContext();
+    const collapsible = context.getCollapsible(side);
+    const expanded = "none" === collapsible || context.isExpanded(side);
+    const state = expanded ? "expanded" : "collapsed";
+    const panelId = context.getPanelId(side);
+    const styles = sidebarVariants({
+        collapsible,
+        expanded
+    });
+    const drawerTriggerValue = context.drawer[side].triggerValue;
+    const focusTransfer = useSidebarPanelFocusTransfer({
+        focus: context.focus,
+        isDesktop: context.isDesktop,
+        panelId,
+        rootId: context.rootId,
+        side,
+        triggerValue: drawerTriggerValue
+    });
+    if (context.isDesktop) {
+        const inaccessible = "offcanvas" === collapsible && !expanded;
+        return /*#__PURE__*/ jsx(SidebarPanelProvider, {
+            value: {
+                collapsible,
+                expanded,
+                side
+            },
+            children: /*#__PURE__*/ jsx("aside", {
+                ...props,
+                "aria-hidden": inaccessible || void 0,
+                "aria-label": ariaLabel,
+                "aria-labelledby": ariaLabelledBy,
+                className: styles.desktopPanel({
+                    className
+                }),
+                "data-collapsible": collapsible,
+                "data-part": "panel",
+                "data-scope": "sidebar",
+                "data-side": side,
+                "data-state": state,
+                id: panelId,
+                inert: inaccessible || void 0,
+                onBlurCapture: (event)=>{
+                    focusTransfer.onBlurCapture(event);
+                    onBlurCapture?.(event);
+                },
+                onFocusCapture: (event)=>{
+                    focusTransfer.onFocusCapture(event);
+                    onFocusCapture?.(event);
+                },
+                ref: ref,
+                tabIndex: tabIndex,
+                children: children
+            })
+        });
+    }
+    return /*#__PURE__*/ jsx(Drawer.RootProvider, {
+        size: "full",
+        value: context.drawer[side],
+        children: /*#__PURE__*/ jsxs(Drawer.Portal, {
+            children: [
+                /*#__PURE__*/ jsx(Drawer.Backdrop, {}),
+                /*#__PURE__*/ jsx(Drawer.Positioner, {
+                    children: /*#__PURE__*/ jsx(Drawer.Content, {
+                        "aria-label": ariaLabel,
+                        "aria-labelledby": ariaLabelledBy,
+                        className: styles.mobilePanel(),
+                        onBlurCapture: focusTransfer.onBlurCapture,
+                        onFocusCapture: focusTransfer.onFocusCapture,
+                        children: /*#__PURE__*/ jsx(SidebarPanelProvider, {
+                            value: {
+                                collapsible,
+                                expanded: true,
+                                side
+                            },
+                            children: /*#__PURE__*/ jsx("aside", {
+                                ...props,
+                                "aria-label": ariaLabel,
+                                "aria-labelledby": ariaLabelledBy,
+                                className: styles.mobileAside({
+                                    className
+                                }),
+                                "data-collapsible": collapsible,
+                                "data-part": "panel",
+                                "data-scope": "sidebar",
+                                "data-side": side,
+                                "data-state": "expanded",
+                                id: panelId,
+                                onBlurCapture: onBlurCapture,
+                                onFocusCapture: onFocusCapture,
+                                ref: ref,
+                                tabIndex: tabIndex,
+                                children: children
+                            })
+                        })
+                    })
+                }),
+                /*#__PURE__*/ jsx(Drawer.SwipeArea, {})
+            ]
+        })
+    });
+};
+Sidebar.Trigger = function({ "aria-label": ariaLabel, className, icon = "token-icon-sidebar-trigger", onBlurCapture, onClick, onFocusCapture, side = "start", tooltip, value, ...props }) {
+    const context = useSidebarContext();
+    const generatedValue = useId();
+    const drawerApi = context.drawer[side];
+    const triggerValue = value ?? generatedValue;
+    const mobileTriggerProps = context.isDesktop ? void 0 : drawerApi.getTriggerProps({
+        value: triggerValue
+    });
+    const { trigger } = sidebarVariants();
+    const expanded = context.isExpanded(side);
+    const desktopStateProps = context.isDesktop ? {
+        "aria-controls": context.getPanelId(side),
+        "aria-expanded": expanded,
+        "data-state": expanded ? "open" : "closed"
+    } : void 0;
+    if (context.isDesktop && context.isFixed(side)) return null;
+    const button = /*#__PURE__*/ jsx(ActionIcon, {
+        ...mobileTriggerProps,
+        ...props,
+        ...desktopStateProps,
+        "aria-label": ariaLabel,
+        className: trigger({
+            className
+        }),
+        "data-side": side,
+        "data-sidebar-trigger": "",
+        "data-sidebar-trigger-value": triggerValue,
+        icon: icon,
+        onBlurCapture: (event)=>{
+            context.focus.blur({
+                mode: context.isDesktop ? "desktop" : "mobile",
+                node: event.currentTarget,
+                relatedTarget: event.relatedTarget,
+                side
+            });
+            onBlurCapture?.(event);
+        },
+        onClick: (event)=>{
+            onClick?.(event);
+            if (event.defaultPrevented) return;
+            if (context.isDesktop) context.toggle(side);
+            else mobileTriggerProps?.onClick?.(event);
+        },
+        onFocusCapture: (event)=>{
+            context.focus.capture({
+                mode: context.isDesktop ? "desktop" : "mobile",
+                node: event.currentTarget,
+                side,
+                triggerValue
+            });
+            onFocusCapture?.(event);
+        }
+    });
+    if (null === tooltip) return button;
+    return /*#__PURE__*/ jsx(Tooltip, {
+        content: tooltip ?? ariaLabel,
+        dir: context.dir,
+        placement: getTooltipPlacement(side, context.dir),
+        children: button
+    });
+};
+Sidebar.CloseTrigger = function({ "aria-label": ariaLabel, className, icon = "token-icon-sidebar-close", onClick, size = "md", tone = "neutral", ...props }) {
+    const context = useSidebarContext();
+    const panel = useSidebarPanelContext();
+    if (context.isDesktop) return null;
+    const { onClick: onMachineClick, ...machineProps } = context.drawer[panel.side].getCloseTriggerProps();
+    const { trigger } = sidebarVariants();
+    return /*#__PURE__*/ jsx(ActionIcon, {
+        ...machineProps,
+        ...props,
+        "aria-label": ariaLabel,
+        className: trigger({
+            className
+        }),
+        icon: icon,
+        onClick: (event)=>{
+            onClick?.(event);
+            if (!event.defaultPrevented) onMachineClick?.(event);
+        },
+        size: size,
+        tone: tone
+    });
+};
+Sidebar.Inset = function({ className, ref, ...props }) {
+    const { inset } = sidebarVariants();
+    return /*#__PURE__*/ jsx("main", {
+        ...props,
+        className: inset({
+            className
+        }),
+        "data-part": "inset",
+        "data-scope": "sidebar",
+        ref: ref
+    });
+};
+Sidebar.Header = function({ className, ref, ...props }) {
+    const { header } = sidebarVariants();
+    return /*#__PURE__*/ jsx("div", {
+        ...props,
+        className: header({
+            className
+        }),
+        "data-part": "header",
+        "data-scope": "sidebar",
+        ref: ref
+    });
+};
+Sidebar.Content = function({ className, ref, ...props }) {
+    const { content } = sidebarVariants();
+    return /*#__PURE__*/ jsx("div", {
+        ...props,
+        className: content({
+            className
+        }),
+        "data-part": "content",
+        "data-scope": "sidebar",
+        ref: ref
+    });
+};
+Sidebar.Footer = function({ className, ref, ...props }) {
+    const { footer } = sidebarVariants();
+    return /*#__PURE__*/ jsx("div", {
+        ...props,
+        className: footer({
+            className
+        }),
+        "data-part": "footer",
+        "data-scope": "sidebar",
+        ref: ref
+    });
+};
+Sidebar.Group = function({ className, ref, ...props }) {
+    const { group } = sidebarVariants();
+    return /*#__PURE__*/ jsx("div", {
+        ...props,
+        className: group({
+            className
+        }),
+        "data-part": "group",
+        "data-scope": "sidebar",
+        ref: ref
+    });
+};
+Sidebar.GroupLabel = function({ className, ref, ...props }) {
+    const { groupLabel } = sidebarVariants();
+    return /*#__PURE__*/ jsx("h2", {
+        ...props,
+        className: groupLabel({
+            className
+        }),
+        "data-part": "group-label",
+        "data-scope": "sidebar",
+        ref: ref
+    });
+};
+Sidebar.GroupContent = function({ className, ref, ...props }) {
+    const { groupContent } = sidebarVariants();
+    return /*#__PURE__*/ jsx("div", {
+        ...props,
+        className: groupContent({
+            className
+        }),
+        "data-part": "group-content",
+        "data-scope": "sidebar",
+        ref: ref
+    });
+};
+Sidebar.Menu = function({ className, ref, ...props }) {
+    const { menu } = sidebarVariants();
+    return /*#__PURE__*/ jsx("ul", {
+        ...props,
+        className: menu({
+            className
+        }),
+        "data-part": "menu",
+        "data-scope": "sidebar",
+        ref: ref
+    });
+};
+Sidebar.Item = function({ className, ref, ...props }) {
+    const { item } = sidebarVariants();
+    return /*#__PURE__*/ jsx("li", {
+        ...props,
+        className: item({
+            className
+        }),
+        "data-part": "item",
+        "data-scope": "sidebar",
+        ref: ref
+    });
+};
+Sidebar.Separator = function({ className, ref, ...props }) {
+    const { separator } = sidebarVariants();
+    return /*#__PURE__*/ jsx("hr", {
+        ...props,
+        className: separator({
+            className
+        }),
+        "data-part": "separator",
+        "data-scope": "sidebar",
+        ref: ref
+    });
+};
+Sidebar.Expanded = function({ className, ref, ...props }) {
+    const panel = useSidebarPanelContext();
+    const { expanded } = sidebarVariants();
+    return /*#__PURE__*/ jsx("div", {
+        ...props,
+        className: expanded({
+            className
+        }),
+        "data-part": "expanded",
+        "data-scope": "sidebar",
+        hidden: !panel.expanded,
+        ref: ref
+    });
+};
+Sidebar.Label = function({ className, ref, ...props }) {
+    const panel = useSidebarPanelContext();
+    const collapsed = "icon" === panel.collapsible && !panel.expanded;
+    const { label } = sidebarVariants({
+        collapsed
+    });
+    return /*#__PURE__*/ jsx("span", {
+        ...props,
+        className: label({
+            className
+        }),
+        "data-part": "label",
+        "data-scope": "sidebar",
+        ref: ref
+    });
+};
+Sidebar.PaneGroup = function({ className, ref, ...props }) {
+    const { paneGroup } = sidebarVariants();
+    return /*#__PURE__*/ jsx("div", {
+        ...props,
+        className: paneGroup({
+            className
+        }),
+        "data-part": "pane-group",
+        "data-scope": "sidebar",
+        ref: ref
+    });
+};
+Sidebar.Pane = function({ className, ref, size = "auto", visibility = "always", ...props }) {
+    const panel = useSidebarPanelContext();
+    const { pane } = sidebarVariants({
+        paneSize: size
+    });
+    return /*#__PURE__*/ jsx("div", {
+        ...props,
+        className: pane({
+            className
+        }),
+        "data-part": "pane",
+        "data-scope": "sidebar",
+        "data-size": size,
+        "data-visibility": visibility,
+        hidden: "expanded" === visibility && !panel.expanded,
+        ref: ref
+    });
+};
+Sidebar.Rail = function({ "aria-label": ariaLabel, className, onClick, ref, title, ...props }) {
+    const context = useSidebarContext();
+    const panel = useSidebarPanelContext();
+    const { rail } = sidebarVariants();
+    if ("none" === panel.collapsible) return null;
+    return /*#__PURE__*/ jsx("button", {
+        ...props,
+        "aria-controls": context.getPanelId(panel.side),
+        "aria-expanded": panel.expanded,
+        "aria-label": ariaLabel,
+        className: rail({
+            className
+        }),
+        "data-part": "rail",
+        "data-scope": "sidebar",
+        "data-side": panel.side,
+        onClick: (event)=>{
+            onClick?.(event);
+            if (!event.defaultPrevented) context.toggle(panel.side);
+        },
+        ref: ref,
+        title: title ?? ariaLabel,
+        type: "button"
+    });
+};
+Sidebar.Context = function({ children }) {
+    const context = useSidebarContext();
+    return children(context);
+};
+function getTooltipPlacement(side, dir) {
+    const startIsLeft = "rtl" !== dir;
+    const isLeft = "start" === side ? startIsLeft : !startIsLeft;
+    return isLeft ? "right" : "left";
+}
+export { Sidebar };

package/dist/src/internal/molecules/drawer.context.d.ts

@@ -0,0 +1,53 @@
+import * as drawer from "@zag-js/drawer";
+import * as presence from "@zag-js/presence";
+import { type PropTypes } from "@zag-js/react";
+import { type ReactNode, type Ref, type RefCallback } from "react";
+import { type DrawerSize, drawerVariants } from "./drawer.styles.js";
+export type DrawerApi = drawer.Api<PropTypes>;
+export type DrawerStackApi = drawer.DrawerStackApi<PropTypes>;
+export type UseDrawerProps = Omit<drawer.Props, "id"> & {
+    id?: string;
+};
+export type DrawerPresenceProps = Pick<presence.Props, "immediate" | "onEnterComplete" | "onExitComplete"> & {
+    lazyMount?: boolean;
+    skipAnimationOnMount?: boolean;
+    unmountOnExit?: boolean;
+};
+type DrawerPresenceOptions = Pick<DrawerPresenceProps, "immediate" | "lazyMount" | "skipAnimationOnMount" | "unmountOnExit">;
+export type DrawerPresenceState = {
+    api: presence.Api;
+    ref: RefCallback<HTMLDivElement>;
+    skipAnimationOnMount: boolean;
+    unmounted: boolean;
+};
+type DrawerContextValue = {
+    api: DrawerApi;
+    presence: DrawerPresenceState;
+    presenceOptions: DrawerPresenceOptions;
+    styles: ReturnType<typeof drawerVariants>;
+};
+export declare function useDrawer(props?: UseDrawerProps): DrawerApi;
+export declare function useDrawerContext(): DrawerContextValue;
+export declare function useDrawerStackContext(): DrawerStackApi;
+type UseDrawerPresenceProps = DrawerPresenceProps & {
+    present: boolean;
+};
+export declare function useDrawerPresence({ immediate, lazyMount, onEnterComplete, onExitComplete, present, skipAnimationOnMount, unmountOnExit, }: UseDrawerPresenceProps): DrawerPresenceState;
+type DrawerProviderProps = DrawerPresenceProps & {
+    api: DrawerApi;
+    children?: ReactNode;
+    size?: DrawerSize;
+};
+export declare function DrawerProvider({ api, children, immediate, lazyMount, onEnterComplete, onExitComplete, size, skipAnimationOnMount, unmountOnExit, }: DrawerProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function getDrawerPresenceProps(open: boolean, presenceState: DrawerPresenceState): {
+    readonly "data-state": "open" | "closed" | null;
+    readonly hidden: boolean;
+};
+type PossibleRef<T> = Ref<T> | undefined;
+export declare function useComposedRefs<T>(firstRef: PossibleRef<T>, secondRef: PossibleRef<T>): RefCallback<T>;
+export type DrawerStackProviderProps = {
+    children?: ReactNode;
+};
+export declare function DrawerStackProvider({ children }: DrawerStackProviderProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=drawer.context.d.ts.map

package/dist/src/internal/molecules/drawer.context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.context.d.ts","sourceRoot":"","sources":["../../../../src/internal/molecules/drawer.context.tsx"],"names":[],"mappings":"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"}

package/dist/src/internal/molecules/drawer.styles.d.ts

@@ -0,0 +1,115 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const drawerVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: {
+            content: string[];
+        };
+        sm: {
+            content: string[];
+        };
+        md: {
+            content: string[];
+        };
+        lg: {
+            content: string[];
+        };
+        xl: {
+            content: string[];
+        };
+        full: {
+            content: string[];
+        };
+    };
+}, {
+    backdrop: string[];
+    positioner: string[];
+    content: string[];
+    header: string[];
+    body: string;
+    footer: string[];
+    title: string;
+    description: string;
+    trigger: string;
+    closeTrigger: string;
+    grabber: string[];
+    grabberIndicator: string[];
+    swipeArea: string[];
+    indent: string;
+    indentBackground: string;
+}, undefined, {
+    size: {
+        xs: {
+            content: string[];
+        };
+        sm: {
+            content: string[];
+        };
+        md: {
+            content: string[];
+        };
+        lg: {
+            content: string[];
+        };
+        xl: {
+            content: string[];
+        };
+        full: {
+            content: string[];
+        };
+    };
+}, {
+    backdrop: string[];
+    positioner: string[];
+    content: string[];
+    header: string[];
+    body: string;
+    footer: string[];
+    title: string;
+    description: string;
+    trigger: string;
+    closeTrigger: string;
+    grabber: string[];
+    grabberIndicator: string[];
+    swipeArea: string[];
+    indent: string;
+    indentBackground: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: {
+            content: string[];
+        };
+        sm: {
+            content: string[];
+        };
+        md: {
+            content: string[];
+        };
+        lg: {
+            content: string[];
+        };
+        xl: {
+            content: string[];
+        };
+        full: {
+            content: string[];
+        };
+    };
+}, {
+    backdrop: string[];
+    positioner: string[];
+    content: string[];
+    header: string[];
+    body: string;
+    footer: string[];
+    title: string;
+    description: string;
+    trigger: string;
+    closeTrigger: string;
+    grabber: string[];
+    grabberIndicator: string[];
+    swipeArea: string[];
+    indent: string;
+    indentBackground: string;
+}, undefined, unknown, unknown, undefined>>;
+export type DrawerSize = Exclude<VariantProps<typeof drawerVariants>["size"], null | undefined>;
+//# sourceMappingURL=drawer.styles.d.ts.map

package/dist/src/internal/molecules/drawer.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.styles.d.ts","sourceRoot":"","sources":["../../../../src/internal/molecules/drawer.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAGrD,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAwGzB,CAAA;AAEF,MAAM,MAAM,UAAU,GAAG,OAAO,CAC9B,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,EAC3C,IAAI,GAAG,SAAS,CACjB,CAAA"}