@techsio/ui-kit 0.0.0

package/dist/molecules/tree-view.js

@@ -0,0 +1,451 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { normalizeProps, useMachine } from "@zag-js/react";
+import { collection as tree_view_collection, connect, machine } from "@zag-js/tree-view";
+import { createContext, useContext, useId } from "react";
+import { Icon } from "../atoms/icon.js";
+import { tv } from "../utils.js";
+const treeViewVariants = tv({
+    slots: {
+        root: 'relative bg-tree-root-bg rounded-tree',
+        label: [
+            'text-tree-label-fg font-tree-label'
+        ],
+        tree: [
+            'outline-none bg-tree-bg',
+            'focus-visible:ring',
+            'focus-visible:ring-tree-ring'
+        ],
+        branch: [
+            'data-[disabled]:opacity-tree-disabled data-[disabled]:pointer-events-none'
+        ],
+        branchTrigger: [
+            'group flex items-center justify-between',
+            'hover:bg-tree-node-bg-hover',
+            'cursor-pointer',
+            'has-focus-visible:outline-none',
+            'has-focus-visible:ring',
+            'has-focus-visible:ring-tree-ring'
+        ],
+        branchControl: [
+            'flex-1'
+        ],
+        branchText: [
+            'flex-1'
+        ],
+        branchIndicator: [
+            'group-hover:text-tree-fg-hover',
+            'data-[state=open]:token-icon-tree-indicator-open cursor-pointer hover:scale-125'
+        ],
+        branchContent: [
+            'relative',
+            'data-[state=closed]:hidden'
+        ],
+        indentGuide: [
+            'absolute top-0 bottom-0 start-1',
+            'w-tree-indent bg-tree-indent-bg',
+            'opacity-tree-indent'
+        ],
+        item: [
+            'hover:bg-tree-node-bg-hover hover:text-tree-fg-hover',
+            'data-[selected]:hover:bg-tree-node-bg-hover',
+            'data-[selected]:hover:text-tree-fg-hover',
+            'focus-visible:outline-none',
+            'focus-visible:ring',
+            'focus-visible:ring-tree-ring'
+        ],
+        itemText: [
+            'flex-1'
+        ],
+        nodeIcon: [
+            'hover:text-tree-icon-hover'
+        ]
+    },
+    compoundSlots: [
+        {
+            slots: [
+                'branch',
+                'item'
+            ],
+            class: [
+                'relative',
+                'ms-[calc(var(--depth)*var(--tree-indent-per-level))]',
+                'data-[depth=1]:ms-0'
+            ]
+        },
+        {
+            slots: [
+                'branchControl',
+                'item'
+            ],
+            class: [
+                'flex items-center gap-tree-icon p-tree-node',
+                'cursor-pointer',
+                'data-[selected]:text-tree-fg-selected',
+                'group-hover:text-tree-fg-hover',
+                'data-[selected]:group-hover:text-tree-fg-hover',
+                'focus-visible:outline-none'
+            ]
+        }
+    ],
+    variants: {
+        size: {
+            sm: {
+                nodeIcon: 'text-tree-icon-sm',
+                branchText: 'text-tree-sm',
+                itemText: 'text-tree-sm',
+                branchIndicator: 'text-tree-indicator-sm',
+                label: 'text-tree-sm'
+            },
+            md: {
+                nodeIcon: 'text-tree-icon-md',
+                branchText: 'text-tree-md',
+                itemText: 'text-tree-md',
+                branchIndicator: 'text-tree-indicator-md',
+                label: 'text-tree-md'
+            },
+            lg: {
+                nodeIcon: 'text-tree-icon-lg',
+                branchText: 'text-tree-lg',
+                itemText: 'text-tree-lg',
+                branchIndicator: 'text-tree-indicator-lg',
+                label: 'text-tree-lg'
+            }
+        }
+    },
+    defaultVariants: {
+        size: 'md'
+    }
+});
+const TreeViewContext = /*#__PURE__*/ createContext(null);
+function useTreeViewContext() {
+    const context = useContext(TreeViewContext);
+    if (!context) throw new Error('TreeView components must be used within TreeView.Root');
+    return context;
+}
+const TreeViewNodeContext = /*#__PURE__*/ createContext(null);
+function useTreeViewNodeContext() {
+    const context = useContext(TreeViewNodeContext);
+    if (!context) throw new Error('TreeView node components must be used within a node provider');
+    return context;
+}
+function TreeView({ id, data, size, selectionBehavior = 'all', dir = 'ltr', selectionMode = 'single', expandedValue, selectedValue, focusedValue, defaultExpandedValue, defaultSelectedValue, expandOnClick = true, typeahead = true, onExpandedChange, onSelectionChange, onFocusChange, children, className, ...props }) {
+    const generatedId = useId();
+    const uniqueId = id || generatedId;
+    const collection = tree_view_collection({
+        nodeToValue: (node)=>node.id,
+        nodeToString: (node)=>node.name,
+        rootNode: {
+            id: 'ROOT',
+            name: '',
+            children: data
+        }
+    });
+    const service = useMachine(machine, {
+        id: uniqueId,
+        collection,
+        dir,
+        selectionMode,
+        expandedValue,
+        selectedValue,
+        focusedValue,
+        defaultExpandedValue,
+        defaultSelectedValue,
+        expandOnClick,
+        typeahead,
+        onExpandedChange,
+        onSelectionChange,
+        onFocusChange
+    });
+    const api = connect(service, normalizeProps);
+    const styles = treeViewVariants({
+        size
+    });
+    return /*#__PURE__*/ jsx(TreeViewContext.Provider, {
+        value: {
+            api,
+            size,
+            styles,
+            selectionBehavior
+        },
+        children: /*#__PURE__*/ jsx("div", {
+            className: styles.root({
+                className
+            }),
+            ...api.getRootProps(),
+            ...props,
+            children: children
+        })
+    });
+}
+TreeView.Label = function({ children, className, ...props }) {
+    const { api, styles } = useTreeViewContext();
+    return /*#__PURE__*/ jsx("h3", {
+        className: styles.label({
+            className
+        }),
+        ...api.getLabelProps(),
+        ...props,
+        children: children
+    });
+};
+TreeView.Tree = function({ children, className, ...props }) {
+    const { api, styles } = useTreeViewContext();
+    return /*#__PURE__*/ jsx("div", {
+        className: styles.tree({
+            className
+        }),
+        ...api.getTreeProps(),
+        ...props,
+        children: children
+    });
+};
+TreeView.NodeProvider = function({ node, indexPath, children }) {
+    const { api } = useTreeViewContext();
+    const nodeProps = {
+        node,
+        indexPath
+    };
+    const nodeState = api.getNodeState(nodeProps);
+    return /*#__PURE__*/ jsx(TreeViewNodeContext.Provider, {
+        value: {
+            node,
+            indexPath,
+            nodeProps,
+            nodeState
+        },
+        children: children
+    });
+};
+TreeView.Branch = function({ children, className, ...props }) {
+    const { api, styles } = useTreeViewContext();
+    const { nodeProps } = useTreeViewNodeContext();
+    return /*#__PURE__*/ jsx("div", {
+        className: styles.branch({
+            className
+        }),
+        ...api.getBranchProps(nodeProps),
+        ...props,
+        children: children
+    });
+};
+TreeView.BranchTrigger = function({ children, className, ...props }) {
+    const { styles } = useTreeViewContext();
+    return /*#__PURE__*/ jsx("div", {
+        className: styles.branchTrigger({
+            className
+        }),
+        ...props,
+        children: children
+    });
+};
+TreeView.BranchControl = function({ children, className, ...props }) {
+    const { api, styles, selectionBehavior } = useTreeViewContext();
+    const { node, nodeProps, nodeState } = useTreeViewNodeContext();
+    const isSelectable = (()=>{
+        switch(selectionBehavior){
+            case 'all':
+                return true;
+            case 'leaf-only':
+                return false;
+            case 'custom':
+                return false !== node.selectable;
+            default:
+                return true;
+        }
+    })();
+    const controlProps = api.getBranchControlProps(nodeProps);
+    const finalProps = isSelectable ? controlProps : {
+        ...controlProps,
+        onClick: (e)=>{
+            e.preventDefault();
+            e.stopPropagation();
+            if (!nodeState.disabled) if (nodeState.expanded) api.collapse([
+                node.id
+            ]);
+            else api.expand([
+                node.id
+            ]);
+        },
+        'aria-selected': void 0,
+        'data-disabled': !isSelectable || nodeState.disabled || void 0
+    };
+    return /*#__PURE__*/ jsx("div", {
+        className: styles.branchControl({
+            className
+        }),
+        ...finalProps,
+        ...props,
+        children: children
+    });
+};
+TreeView.BranchText = function({ children, className }) {
+    const { api, styles } = useTreeViewContext();
+    const { node, nodeProps } = useTreeViewNodeContext();
+    return /*#__PURE__*/ jsx("span", {
+        className: styles.branchText({
+            className
+        }),
+        ...api.getBranchTextProps(nodeProps),
+        children: children || node.name
+    });
+};
+TreeView.BranchIndicator = function({ icon = 'token-icon-tree-indicator', className }) {
+    const { api, styles } = useTreeViewContext();
+    const { node, nodeProps, nodeState } = useTreeViewNodeContext();
+    const handleToggle = (id)=>{
+        if (nodeState.expanded) api.collapse([
+            id
+        ]);
+        else api.expand([
+            id
+        ]);
+    };
+    return /*#__PURE__*/ jsx(Icon, {
+        icon: icon,
+        className: styles.branchIndicator({
+            className
+        }),
+        ...api.getBranchIndicatorProps(nodeProps),
+        onClick: (e)=>{
+            e.preventDefault();
+            e.stopPropagation();
+            handleToggle(node.id);
+        }
+    });
+};
+TreeView.BranchContent = function({ children, className, ...props }) {
+    const { api, styles } = useTreeViewContext();
+    const { nodeProps } = useTreeViewNodeContext();
+    return /*#__PURE__*/ jsx("div", {
+        className: styles.branchContent({
+            className
+        }),
+        ...api.getBranchContentProps(nodeProps),
+        ...props,
+        children: children
+    });
+};
+TreeView.IndentGuide = function({ className }) {
+    const { api, styles } = useTreeViewContext();
+    const { nodeProps } = useTreeViewNodeContext();
+    return /*#__PURE__*/ jsx("div", {
+        className: styles.indentGuide({
+            className
+        }),
+        ...api.getBranchIndentGuideProps(nodeProps)
+    });
+};
+TreeView.Item = function({ children, className, ...props }) {
+    const { api, styles, selectionBehavior } = useTreeViewContext();
+    const { node, nodeProps, nodeState } = useTreeViewNodeContext();
+    const isSelectable = (()=>{
+        switch(selectionBehavior){
+            case 'all':
+            case 'leaf-only':
+                return true;
+            case 'custom':
+                return false !== node.selectable;
+            default:
+                return true;
+        }
+    })();
+    const itemProps = api.getItemProps(nodeProps);
+    const finalProps = isSelectable ? itemProps : {
+        ...itemProps,
+        onClick: (e)=>{
+            e.preventDefault();
+            e.stopPropagation();
+        },
+        'aria-selected': void 0,
+        'data-disabled': !isSelectable || nodeState.disabled || void 0
+    };
+    return /*#__PURE__*/ jsx("div", {
+        className: styles.item({
+            className
+        }),
+        ...finalProps,
+        "data-selected": nodeState.selected || void 0,
+        ...props,
+        children: children
+    });
+};
+TreeView.ItemText = function({ children, className }) {
+    const { api, styles } = useTreeViewContext();
+    const { node, nodeProps } = useTreeViewNodeContext();
+    return /*#__PURE__*/ jsx("span", {
+        className: styles.itemText({
+            className
+        }),
+        ...api.getItemTextProps(nodeProps),
+        children: children || node.name
+    });
+};
+TreeView.NodeIcon = function({ icon, className, ...props }) {
+    const { styles } = useTreeViewContext();
+    const { node, nodeState } = useTreeViewNodeContext();
+    const iconToShow = icon || (nodeState.isBranch ? node.icons?.branch || (nodeState.expanded ? 'token-icon-tree-node-open' : 'token-icon-tree-node') : node.icons?.leaf || 'token-icon-tree-item');
+    return /*#__PURE__*/ jsx("span", {
+        className: styles.nodeIcon({
+            className
+        }),
+        "data-state": nodeState.expanded ? 'open' : 'closed',
+        ...props,
+        children: /*#__PURE__*/ jsx(Icon, {
+            icon: iconToShow
+        })
+    });
+};
+TreeView.Node = function({ node, indexPath, showIndentGuides = true, showNodeIcons = true, onNodeHover, onNodeLeave }) {
+    const { api } = useTreeViewContext();
+    const nodeProps = {
+        node,
+        indexPath
+    };
+    const nodeState = api.getNodeState(nodeProps);
+    return /*#__PURE__*/ jsx(TreeView.NodeProvider, {
+        node: node,
+        indexPath: indexPath,
+        children: nodeState.isBranch ? /*#__PURE__*/ jsxs(TreeView.Branch, {
+            children: [
+                /*#__PURE__*/ jsxs(TreeView.BranchTrigger, {
+                    onMouseEnter: ()=>onNodeHover?.(node, indexPath),
+                    onMouseLeave: ()=>onNodeLeave?.(node, indexPath),
+                    children: [
+                        /*#__PURE__*/ jsxs(TreeView.BranchControl, {
+                            children: [
+                                showNodeIcons && /*#__PURE__*/ jsx(TreeView.NodeIcon, {}),
+                                /*#__PURE__*/ jsx(TreeView.BranchText, {})
+                            ]
+                        }),
+                        /*#__PURE__*/ jsx(TreeView.BranchIndicator, {})
+                    ]
+                }),
+                /*#__PURE__*/ jsxs(TreeView.BranchContent, {
+                    children: [
+                        showIndentGuides && /*#__PURE__*/ jsx(TreeView.IndentGuide, {}),
+                        node.children?.map((childNode, index)=>/*#__PURE__*/ jsx(TreeView.Node, {
+                                node: childNode,
+                                indexPath: [
+                                    ...indexPath,
+                                    index
+                                ],
+                                showIndentGuides: showIndentGuides,
+                                showNodeIcons: showNodeIcons,
+                                onNodeHover: onNodeHover,
+                                onNodeLeave: onNodeLeave
+                            }, childNode.id))
+                    ]
+                })
+            ]
+        }) : /*#__PURE__*/ jsxs(TreeView.Item, {
+            onMouseEnter: ()=>onNodeHover?.(node, indexPath),
+            onMouseLeave: ()=>onNodeLeave?.(node, indexPath),
+            children: [
+                showNodeIcons && /*#__PURE__*/ jsx(TreeView.NodeIcon, {}),
+                /*#__PURE__*/ jsx(TreeView.ItemText, {})
+            ]
+        })
+    });
+};
+TreeView.displayName = 'TreeView';
+export { TreeView };

package/dist/organisms/footer.js

@@ -0,0 +1,209 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+import { Link } from "../atoms/link.js";
+import { tv } from "../utils.js";
+const footerVariants = tv({
+    slots: {
+        root: 'flex w-full bg-footer-bg items-center justify-center rounded-footer',
+        container: 'w-full max-w-footer-max bg-footer-container-bg',
+        section: 'bg-footer-section-bg',
+        list: 'flex flex-col bg-footer-list-bg list-none gap-footer-list-gap',
+        bottom: 'flex w-full items-center bg-footer-bottom-bg justify-between border-t-(--border-width-footer) pt-footer-bottom',
+        title: 'font-footer-title text-footer-title-fg hover:text-footer-title-fg-hover transition-footer-title',
+        link: 'font-footer-link text-footer-link-fg hover:text-footer-link-fg-hover transition-footer-link',
+        text: 'text-footer-text-fg',
+        divider: 'flex w-full h-footer-divider border-0 bg-footer-divider-bg'
+    },
+    variants: {
+        direction: {
+            vertical: {
+                root: 'flex-col'
+            },
+            horizontal: {
+                root: 'flex-row'
+            }
+        },
+        layout: {
+            col: {
+                container: 'grid grid-cols-(--footer-cols)'
+            },
+            row: {
+                container: 'flex flex-row'
+            }
+        },
+        sectionFlow: {
+            col: {
+                section: 'flex flex-col'
+            },
+            row: {
+                section: 'flex flex-row'
+            }
+        },
+        size: {
+            sm: {
+                root: 'p-footer-root-sm',
+                container: 'gap-footer-container-sm',
+                section: 'gap-footer-section-sm',
+                list: 'gap-footer-list-gap-sm',
+                title: 'text-footer-title-sm',
+                link: 'text-footer-link-sm',
+                text: 'text-footer-text-sm',
+                bottom: 'p-footer-bottom-sm',
+                divider: 'my-footer-divider-sm'
+            },
+            md: {
+                root: 'p-footer-root-md',
+                container: 'gap-footer-container-md',
+                section: 'gap-footer-section-md',
+                list: 'gap-footer-list-gap-md',
+                title: 'text-footer-title-md',
+                link: 'text-footer-link-md',
+                text: 'text-footer-text-md',
+                bottom: 'p-footer-bottom-md',
+                divider: 'my-footer-divider-md'
+            },
+            lg: {
+                root: 'p-footer-root-lg',
+                container: 'gap-footer-container-lg',
+                section: 'gap-footer-section-lg',
+                list: 'gap-footer-list-gap-lg',
+                title: 'text-footer-title-lg',
+                link: 'text-footer-link-lg',
+                text: 'text-footer-text-lg',
+                bottom: 'p-footer-bottom-lg',
+                divider: 'my-footer-divider-lg'
+            }
+        }
+    },
+    defaultVariants: {
+        size: 'md',
+        direction: 'horizontal',
+        layout: 'col',
+        sectionFlow: 'col'
+    }
+});
+const FooterContext = /*#__PURE__*/ createContext({});
+function Footer({ children, size, sectionFlow, direction, layout, className }) {
+    const { root } = footerVariants({
+        size,
+        direction
+    });
+    return /*#__PURE__*/ jsx(FooterContext.Provider, {
+        value: {
+            size,
+            sectionFlow,
+            layout
+        },
+        children: /*#__PURE__*/ jsx("footer", {
+            className: root({
+                className
+            }),
+            children: children
+        })
+    });
+}
+Footer.Container = function({ children, className }) {
+    const { size, layout } = useContext(FooterContext);
+    const { container } = footerVariants({
+        size,
+        layout
+    });
+    return /*#__PURE__*/ jsx("div", {
+        className: container({
+            className
+        }),
+        children: children
+    });
+};
+Footer.Section = function({ children, className }) {
+    const { size, sectionFlow } = useContext(FooterContext);
+    const { section } = footerVariants({
+        size,
+        sectionFlow
+    });
+    return /*#__PURE__*/ jsx("div", {
+        className: section({
+            className
+        }),
+        children: children
+    });
+};
+Footer.Title = function({ children, className }) {
+    const { size } = useContext(FooterContext);
+    const { title } = footerVariants({
+        size
+    });
+    return /*#__PURE__*/ jsx("h3", {
+        className: title({
+            className
+        }),
+        children: children
+    });
+};
+Footer.Link = function({ children, className, href, external, ...props }) {
+    const { size } = useContext(FooterContext);
+    const { link } = footerVariants({
+        size
+    });
+    return /*#__PURE__*/ jsx(Link, {
+        href: href,
+        className: link({
+            className
+        }),
+        target: external ? '_blank' : void 0,
+        rel: external ? 'noopener noreferrer' : void 0,
+        ...props,
+        children: children
+    });
+};
+Footer.Text = function({ children, className }) {
+    const { size } = useContext(FooterContext);
+    const { text } = footerVariants({
+        size
+    });
+    return /*#__PURE__*/ jsx("p", {
+        className: text({
+            className
+        }),
+        children: children
+    });
+};
+Footer.List = function({ children, className, ...props }) {
+    const { size } = useContext(FooterContext);
+    const { list } = footerVariants({
+        size
+    });
+    return /*#__PURE__*/ jsx("ul", {
+        className: list({
+            className
+        }),
+        ...props,
+        children: children
+    });
+};
+Footer.Divider = function({ className, ...props }) {
+    const { size } = useContext(FooterContext);
+    const { divider } = footerVariants({
+        size
+    });
+    return /*#__PURE__*/ jsx("hr", {
+        className: divider({
+            className
+        }),
+        ...props
+    });
+};
+Footer.Bottom = function({ children, className, ...props }) {
+    const { size } = useContext(FooterContext);
+    const { bottom } = footerVariants({
+        size
+    });
+    return /*#__PURE__*/ jsx("div", {
+        className: bottom({
+            className
+        }),
+        ...props,
+        children: children
+    });
+};
+export { Footer };