@techsio/ui-kit 0.3.1 → 0.4.0

package/dist/molecules/tree-view.js

@@ -6,137 +6,143 @@ import { Icon } from "../atoms/icon.js";
 import { tv } from "../utils.js";
 const treeViewVariants = tv({
     slots: {
-        root: 'relative bg-tree-root-bg rounded-tree',
+        root: "relative rounded-tree bg-tree-root-bg",
         label: [
-            'text-tree-label-fg font-tree-label'
+            "font-tree-label text-tree-label-fg"
         ],
         tree: [
-            'outline-none bg-tree-bg',
-            'focus-visible:ring',
-            'focus-visible:ring-tree-ring'
+            "bg-tree-bg",
+            "focus-visible:outline-(style:--default-ring-style) focus-visible:outline-(length:--default-ring-width)",
+            "focus-visible:outline-tree-ring",
+            "focus-visible:outline-offset-(length:--default-ring-offset)"
         ],
         branch: [
-            'data-[disabled]:text-tree-fg-disabled data-[disabled]:pointer-events-none'
+            "data-disabled:cursor-not-allowed",
+            "data-disabled:text-tree-fg-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'
+            "group flex items-center justify-between",
+            "hover:bg-tree-node-bg-hover",
+            "cursor-pointer",
+            "has-focus-visible:outline-(style:--default-ring-style) has-focus-visible:outline-(length:--default-ring-width)",
+            "has-focus-visible:outline-tree-ring",
+            "has-focus-visible:outline-offset-(length:--default-ring-offset)",
+            "transition-colors duration-200 motion-reduce:transition-none"
         ],
         branchControl: [
-            'flex-1'
+            "flex-1"
         ],
         branchText: [
-            'flex-1'
+            "flex-1"
         ],
         branchIndicator: [
-            'group-hover:text-tree-fg-hover',
-            'data-[state=open]:token-icon-tree-indicator-open cursor-pointer hover:scale-125'
+            "group-hover:text-tree-fg-hover",
+            "data-[state=open]:token-icon-tree-indicator-open cursor-pointer hover:scale-125",
+            "transition-all duration-200 motion-reduce:transition-none"
         ],
         branchContent: [
-            'relative',
-            'data-[state=closed]:hidden'
+            "relative",
+            "data-[state=closed]:hidden"
         ],
         indentGuide: [
-            'absolute top-0 bottom-0 start-1',
-            'w-tree-indent bg-tree-indent-bg',
-            'opacity-tree-indent'
+            "absolute start-1 top-0 bottom-0",
+            "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'
+            "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-(style:--default-ring-style) focus-visible:outline-(length:--default-ring-width)",
+            "focus-visible:outline-tree-ring",
+            "focus-visible:outline-offset-(length:--default-ring-offset)",
+            "transition-colors duration-200 motion-reduce:transition-none"
         ],
         itemText: [
-            'flex-1'
+            "flex-1"
         ],
         nodeIcon: [
-            'hover:text-tree-icon-hover'
+            "hover:text-tree-icon-hover",
+            "transition-colors duration-200 motion-reduce:transition-none"
         ]
     },
     compoundSlots: [
         {
             slots: [
-                'branch',
-                'item'
+                "branch",
+                "item"
             ],
             class: [
-                'relative',
-                'ms-[calc(var(--depth)*var(--tree-indent-per-level))]',
-                'data-[depth=1]:ms-0'
+                "relative",
+                "ms-[calc(var(--depth)*var(--tree-indent-per-level))]",
+                "data-[depth=1]:ms-0"
             ]
         },
         {
             slots: [
-                'branchControl',
-                'item'
+                "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'
+                "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"
             ]
         }
     ],
     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'
+                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'
+                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'
+                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'
+        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');
+    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');
+    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 }) {
+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: '',
+            id: "ROOT",
+            name: "",
             children: data
         }
     });
@@ -243,11 +249,11 @@ TreeView.BranchControl = function({ children, className, ...props }) {
     const { node, nodeProps, nodeState } = useTreeViewNodeContext();
     const isSelectable = (()=>{
         switch(selectionBehavior){
-            case 'all':
+            case "all":
                 return true;
-            case 'leaf-only':
+            case "leaf-only":
                 return false;
-            case 'custom':
+            case "custom":
                 return false !== node.selectable;
             default:
                 return true;
@@ -266,8 +272,8 @@ TreeView.BranchControl = function({ children, className, ...props }) {
                 node.id
             ]);
         },
-        'aria-selected': void 0,
-        'data-disabled': !isSelectable || nodeState.disabled || void 0
+        "aria-selected": void 0,
+        "data-disabled": !isSelectable || nodeState.disabled || void 0
     };
     return /*#__PURE__*/ jsx("div", {
         className: styles.branchControl({
@@ -289,7 +295,7 @@ TreeView.BranchText = function({ children, className }) {
         children: children || node.name
     });
 };
-TreeView.BranchIndicator = function({ icon = 'token-icon-tree-indicator', className }) {
+TreeView.BranchIndicator = function({ icon = "token-icon-tree-indicator", className }) {
     const { api, styles } = useTreeViewContext();
     const { node, nodeProps, nodeState } = useTreeViewNodeContext();
     const handleToggle = (id)=>{
@@ -301,10 +307,10 @@ TreeView.BranchIndicator = function({ icon = 'token-icon-tree-indicator', classN
         ]);
     };
     return /*#__PURE__*/ jsx(Icon, {
-        icon: icon,
         className: styles.branchIndicator({
             className
         }),
+        icon: icon,
         ...api.getBranchIndicatorProps(nodeProps),
         onClick: (e)=>{
             e.preventDefault();
@@ -340,10 +346,10 @@ TreeView.Item = function({ children, className, ...props }) {
     const { node, nodeProps, nodeState } = useTreeViewNodeContext();
     const isSelectable = (()=>{
         switch(selectionBehavior){
-            case 'all':
-            case 'leaf-only':
+            case "all":
+            case "leaf-only":
                 return true;
-            case 'custom':
+            case "custom":
                 return false !== node.selectable;
             default:
                 return true;
@@ -356,8 +362,8 @@ TreeView.Item = function({ children, className, ...props }) {
             e.preventDefault();
             e.stopPropagation();
         },
-        'aria-selected': void 0,
-        'data-disabled': !isSelectable || nodeState.disabled || void 0
+        "aria-selected": void 0,
+        "data-disabled": !isSelectable || nodeState.disabled || void 0
     };
     return /*#__PURE__*/ jsx("div", {
         className: styles.item({
@@ -383,12 +389,12 @@ TreeView.ItemText = function({ children, className }) {
 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');
+    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',
+        "data-state": nodeState.expanded ? "open" : "closed",
         ...props,
         children: /*#__PURE__*/ jsx(Icon, {
             icon: iconToShow
@@ -403,8 +409,8 @@ TreeView.Node = function({ node, indexPath, showIndentGuides = true, showNodeIco
     };
     const nodeState = api.getNodeState(nodeProps);
     return /*#__PURE__*/ jsx(TreeView.NodeProvider, {
-        node: node,
         indexPath: indexPath,
+        node: node,
         children: nodeState.isBranch ? /*#__PURE__*/ jsxs(TreeView.Branch, {
             children: [
                 /*#__PURE__*/ jsxs(TreeView.BranchTrigger, {
@@ -424,15 +430,15 @@ TreeView.Node = function({ node, indexPath, showIndentGuides = true, showNodeIco
                     children: [
                         showIndentGuides && /*#__PURE__*/ jsx(TreeView.IndentGuide, {}),
                         node.children?.map((childNode, index)=>/*#__PURE__*/ jsx(TreeView.Node, {
-                                node: childNode,
                                 indexPath: [
                                     ...indexPath,
                                     index
                                 ],
-                                showIndentGuides: showIndentGuides,
-                                showNodeIcons: showNodeIcons,
+                                node: childNode,
                                 onNodeHover: onNodeHover,
-                                onNodeLeave: onNodeLeave
+                                onNodeLeave: onNodeLeave,
+                                showIndentGuides: showIndentGuides,
+                                showNodeIcons: showNodeIcons
                             }, childNode.id))
                     ]
                 })
@@ -447,5 +453,5 @@ TreeView.Node = function({ node, indexPath, showIndentGuides = true, showNodeIco
         })
     });
 };
-TreeView.displayName = 'TreeView';
+TreeView.displayName = "TreeView";
 export { TreeView };

package/dist/organisms/footer.js

@@ -4,82 +4,82 @@ 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'
+        root: "flex w-full items-center justify-center rounded-footer bg-footer-bg",
+        container: "w-full max-w-footer-max bg-footer-container-bg",
+        section: "bg-footer-section-bg",
+        list: "flex list-none flex-col gap-footer-list-gap bg-footer-list-bg",
+        bottom: "flex w-full items-center justify-between border-t-(--border-width-footer) bg-footer-bottom-bg pt-footer-bottom",
+        title: "font-footer-title text-footer-title-fg transition-footer-title hover:text-footer-title-fg-hover",
+        link: "font-footer-link text-footer-link-fg transition-footer-link hover:text-footer-link-fg-hover",
+        text: "text-footer-text-fg",
+        divider: "flex h-footer-divider w-full border-0 bg-footer-divider-bg"
     },
     variants: {
         direction: {
             vertical: {
-                root: 'flex-col'
+                root: "flex-col"
             },
             horizontal: {
-                root: 'flex-row'
+                root: "flex-row"
             }
         },
         layout: {
             col: {
-                container: 'grid grid-cols-(--footer-cols)'
+                container: "grid grid-cols-(--footer-cols)"
             },
             row: {
-                container: 'flex flex-row'
+                container: "flex flex-row"
             }
         },
         sectionFlow: {
             col: {
-                section: 'flex flex-col'
+                section: "flex flex-col"
             },
             row: {
-                section: 'flex flex-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'
+                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'
+                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'
+                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'
+        size: "md",
+        direction: "horizontal",
+        layout: "col",
+        sectionFlow: "col"
     }
 });
 const FooterContext = /*#__PURE__*/ createContext({});
@@ -140,22 +140,20 @@ Footer.Title = function({ children, className }) {
         children: children
     });
 };
-Footer.Link = function({ children, className, href, external, ...props }) {
+function FooterLink({ children, className, ...linkProps }) {
     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,
+        ...linkProps,
         children: children
     });
-};
+}
+Footer.Link = FooterLink;
 Footer.Text = function({ children, className }) {
     const { size } = useContext(FooterContext);
     const { text } = footerVariants({