@moduix/solid-tailwind 1.0.0 → 1.1.0

package/dist/components/tree-view/TreeView.jsx

@@ -9,7 +9,7 @@ const TreeView_TreeViewRoot = function(props) {
         'children',
         'class'
     ]);
-    return <TreeView.Root asChild={local.asChild} data-slot="tree-view-root" class={cn('box-border flex w-80 max-w-full min-w-0 flex-col gap-2 text-foreground data-disabled:opacity-50', local.class)} {...others}>
+    return <TreeView.Root asChild={local.asChild} class={cn('box-border flex w-80 max-w-full min-w-0 flex-col gap-2 text-foreground data-disabled:opacity-50', local.class)} {...others} data-slot="tree-view-root">
       {local.children}
     </TreeView.Root>;
 };
@@ -19,7 +19,7 @@ const TreeView_TreeViewRootProvider = function(props) {
         'children',
         'class'
     ]);
-    return <TreeView.RootProvider asChild={local.asChild} data-slot="tree-view-root-provider" class={cn('box-border flex w-80 max-w-full min-w-0 flex-col gap-2 text-foreground data-disabled:opacity-50', local.class)} {...others}>
+    return <TreeView.RootProvider asChild={local.asChild} class={cn('box-border flex w-80 max-w-full min-w-0 flex-col gap-2 text-foreground data-disabled:opacity-50', local.class)} {...others} data-slot="tree-view-root-provider">
       {local.children}
     </TreeView.RootProvider>;
 };
@@ -27,25 +27,25 @@ function TreeViewLabel(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <TreeView.Label data-slot="tree-view-label" class={cn('text-sm leading-5 font-medium text-foreground select-none', local.class)} {...others}/>;
+    return <TreeView.Label class={cn('text-sm leading-5 font-medium text-foreground select-none', local.class)} {...others} data-slot="tree-view-label"/>;
 }
 function TreeViewTree(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <TreeView.Tree data-slot="tree-view-tree" class={cn('flex min-w-0 flex-col gap-1 text-sm leading-5 text-foreground', local.class)} {...others}/>;
+    return <TreeView.Tree class={cn('flex min-w-0 flex-col gap-1 text-sm leading-5 text-foreground', local.class)} {...others} data-slot="tree-view-tree"/>;
 }
 function TreeViewBranch(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <TreeView.Branch data-slot="tree-view-branch" class={cn('relative flex min-w-0 flex-col gap-1', local.class)} {...others}/>;
+    return <TreeView.Branch class={cn('relative flex min-w-0 flex-col gap-1', local.class)} {...others} data-slot="tree-view-branch"/>;
 }
 function TreeViewBranchControl(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <TreeView.BranchControl data-slot="tree-view-branch-control" class={cn("relative z-0 box-border flex min-h-8 w-full min-w-0 cursor-pointer items-center gap-2 rounded-sm bg-transparent py-1 ps-[calc(0.5rem+((var(--depth,1)-1)*1rem))] pe-2 text-start text-foreground no-underline transition-[color,opacity] duration-200 ease-in-out outline-none select-none [font:inherit] before:pointer-events-none before:absolute before:inset-y-0 before:start-[calc(0.5rem+((var(--depth,1)-1)*1rem))] before:end-0 before:-z-1 before:rounded-sm before:bg-transparent before:ring-1 before:ring-transparent before:transition-[background-color,box-shadow] before:duration-200 before:ease-in-out before:content-[''] before:ring-inset focus-visible:before:ring-ring data-disabled:cursor-default data-disabled:text-muted-foreground data-disabled:opacity-50 data-focus:before:ring-ring data-selected:text-accent-foreground data-selected:before:bg-accent motion-reduce:before:transition-none [@media(hover:hover)]:[&:not([data-disabled]):hover]:text-accent-foreground [@media(hover:hover)]:[&:not([data-disabled]):hover]:before:bg-accent", local.class)} {...others}/>;
+    return <TreeView.BranchControl class={cn("relative z-0 box-border flex min-h-8 w-full min-w-0 cursor-pointer items-center gap-2 rounded-sm bg-transparent py-1 ps-[calc(0.5rem+((var(--depth,1)-1)*1rem))] pe-2 text-start text-foreground no-underline transition-[color,opacity] duration-200 ease-in-out outline-none select-none [font:inherit] before:pointer-events-none before:absolute before:inset-y-0 before:start-[calc(0.5rem+((var(--depth,1)-1)*1rem))] before:end-0 before:-z-1 before:rounded-sm before:bg-transparent before:ring-1 before:ring-transparent before:transition-[background-color,box-shadow] before:duration-200 before:ease-in-out before:content-[''] before:ring-inset focus-visible:before:ring-ring data-disabled:cursor-default data-disabled:text-muted-foreground data-disabled:opacity-50 data-focus:before:ring-ring data-selected:text-accent-foreground data-selected:before:bg-accent motion-reduce:before:transition-none [@media(hover:hover)]:[&:not([data-disabled]):hover]:text-accent-foreground [@media(hover:hover)]:[&:not([data-disabled]):hover]:before:bg-accent", local.class)} {...others} data-slot="tree-view-branch-control"/>;
 }
 function TreeViewBranchTrigger(props) {
     const [local, others] = splitProps(props, [
@@ -53,7 +53,7 @@ function TreeViewBranchTrigger(props) {
         'class'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <TreeView.BranchTrigger data-slot="tree-view-branch-trigger" class={cn('inline-flex size-4 shrink-0 items-center justify-center transition-transform duration-200 ease-in-out data-[state=open]:rotate-90 motion-reduce:transition-none [&_svg]:size-3.5', local.class)} {...others}>
+    return <TreeView.BranchTrigger class={cn('inline-flex size-4 shrink-0 items-center justify-center transition-transform duration-200 ease-in-out data-[state=open]:rotate-90 motion-reduce:transition-none [&_svg]:size-3.5', local.class)} {...others} data-slot="tree-view-branch-trigger">
       {resolvedChildren() ?? <ChevronRightIcon/>}
     </TreeView.BranchTrigger>;
 }
@@ -63,7 +63,7 @@ function TreeViewBranchIndicator(props) {
         'class'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <TreeView.BranchIndicator data-slot="tree-view-branch-indicator" class={cn('inline-flex size-4 shrink-0 items-center justify-center transition-transform duration-200 ease-in-out data-[state=open]:rotate-90 motion-reduce:transition-none [&_svg]:size-3.5', local.class)} {...others}>
+    return <TreeView.BranchIndicator class={cn('inline-flex size-4 shrink-0 items-center justify-center transition-transform duration-200 ease-in-out data-[state=open]:rotate-90 motion-reduce:transition-none [&_svg]:size-3.5', local.class)} {...others} data-slot="tree-view-branch-indicator">
       {resolvedChildren() ?? <ChevronRightIcon/>}
     </TreeView.BranchIndicator>;
 }
@@ -71,31 +71,31 @@ function TreeViewBranchText(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <TreeView.BranchText data-slot="tree-view-branch-text" class={cn('inline-flex min-w-0 flex-1 items-center gap-2 overflow-hidden text-ellipsis whitespace-nowrap [&_svg]:size-4 [&_svg]:shrink-0', local.class)} {...others}/>;
+    return <TreeView.BranchText class={cn('inline-flex min-w-0 flex-1 items-center gap-2 overflow-hidden text-ellipsis whitespace-nowrap [&_svg]:size-4 [&_svg]:shrink-0', local.class)} {...others} data-slot="tree-view-branch-text"/>;
 }
 function TreeViewBranchContent(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <TreeView.BranchContent data-slot="tree-view-branch-content" class={cn('relative flex min-w-0 flex-col gap-1 overflow-hidden data-[state=closed]:animate-[moduix-collapsible-content-closed_150ms_ease-out] data-[state=open]:animate-[moduix-collapsible-content-open_150ms_ease-out] motion-reduce:animate-none', local.class)} {...others}/>;
+    return <TreeView.BranchContent class={cn('relative flex min-w-0 flex-col gap-1 overflow-hidden data-[state=closed]:animate-[moduix-collapsible-content-closed_150ms_ease-out] data-[state=open]:animate-[moduix-collapsible-content-open_150ms_ease-out] motion-reduce:animate-none', local.class)} {...others} data-slot="tree-view-branch-content"/>;
 }
 function TreeViewBranchIndentGuide(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <TreeView.BranchIndentGuide data-slot="tree-view-branch-indent-guide" class={cn('pointer-events-none absolute inset-y-0 start-[calc(1rem+((var(--depth,1)-1)*1rem))] z-1 w-px bg-border', local.class)} {...others}/>;
+    return <TreeView.BranchIndentGuide class={cn('pointer-events-none absolute inset-y-0 start-[calc(1rem+((var(--depth,1)-1)*1rem))] z-1 w-px bg-border', local.class)} {...others} data-slot="tree-view-branch-indent-guide"/>;
 }
 function TreeViewItem(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <TreeView.Item data-slot="tree-view-item" class={cn("relative z-0 box-border flex min-h-8 w-full min-w-0 cursor-pointer items-center gap-2 rounded-sm bg-transparent py-1 ps-[calc(1rem+((var(--depth,1)-1)*1rem))] pe-2 text-start text-foreground no-underline transition-[color,opacity] duration-200 ease-in-out outline-none select-none [font:inherit] before:pointer-events-none before:absolute before:inset-y-0 before:start-[calc(0.5rem+((var(--depth,1)-1)*1rem))] before:end-0 before:-z-1 before:rounded-sm before:bg-transparent before:ring-1 before:ring-transparent before:transition-[background-color,box-shadow] before:duration-200 before:ease-in-out before:content-[''] before:ring-inset focus-visible:before:ring-ring data-disabled:cursor-default data-disabled:text-muted-foreground data-disabled:opacity-50 data-focus:before:ring-ring data-selected:text-accent-foreground data-selected:before:bg-accent motion-reduce:before:transition-none [@media(hover:hover)]:[&:not([data-disabled]):hover]:text-accent-foreground [@media(hover:hover)]:[&:not([data-disabled]):hover]:before:bg-accent", local.class)} {...others}/>;
+    return <TreeView.Item class={cn("relative z-0 box-border flex min-h-8 w-full min-w-0 cursor-pointer items-center gap-2 rounded-sm bg-transparent py-1 ps-[calc(1rem+((var(--depth,1)-1)*1rem))] pe-2 text-start text-foreground no-underline transition-[color,opacity] duration-200 ease-in-out outline-none select-none [font:inherit] before:pointer-events-none before:absolute before:inset-y-0 before:start-[calc(0.5rem+((var(--depth,1)-1)*1rem))] before:end-0 before:-z-1 before:rounded-sm before:bg-transparent before:ring-1 before:ring-transparent before:transition-[background-color,box-shadow] before:duration-200 before:ease-in-out before:content-[''] before:ring-inset focus-visible:before:ring-ring data-disabled:cursor-default data-disabled:text-muted-foreground data-disabled:opacity-50 data-focus:before:ring-ring data-selected:text-accent-foreground data-selected:before:bg-accent motion-reduce:before:transition-none [@media(hover:hover)]:[&:not([data-disabled]):hover]:text-accent-foreground [@media(hover:hover)]:[&:not([data-disabled]):hover]:before:bg-accent", local.class)} {...others} data-slot="tree-view-item"/>;
 }
 function TreeViewItemText(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <TreeView.ItemText data-slot="tree-view-item-text" class={cn('inline-flex min-w-0 flex-1 items-center gap-2 overflow-hidden text-ellipsis whitespace-nowrap [&_svg]:size-4 [&_svg]:shrink-0', local.class)} {...others}/>;
+    return <TreeView.ItemText class={cn('inline-flex min-w-0 flex-1 items-center gap-2 overflow-hidden text-ellipsis whitespace-nowrap [&_svg]:size-4 [&_svg]:shrink-0', local.class)} {...others} data-slot="tree-view-item-text"/>;
 }
 function TreeViewItemIndicator(props) {
     const [local, others] = splitProps(props, [
@@ -103,7 +103,7 @@ function TreeViewItemIndicator(props) {
         'class'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <TreeView.ItemIndicator data-slot="tree-view-item-indicator" class={cn('inline-flex size-4 shrink-0 items-center justify-center [&_svg]:size-3.5', local.class)} {...others}>
+    return <TreeView.ItemIndicator class={cn('inline-flex size-4 shrink-0 items-center justify-center [&_svg]:size-3.5', local.class)} {...others} data-slot="tree-view-item-indicator">
       {resolvedChildren() ?? <CheckIcon/>}
     </TreeView.ItemIndicator>;
 }
@@ -111,7 +111,7 @@ function TreeViewNodeCheckbox(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <TreeView.NodeCheckbox data-slot="tree-view-node-checkbox" class={cn('inline-flex size-4 shrink-0 items-center justify-center rounded-xs border border-border bg-background text-primary-foreground outline-1 outline-offset-1 outline-transparent transition-[background-color,border-color,outline-color] duration-200 ease-in-out focus-visible:outline-ring data-disabled:cursor-default data-disabled:opacity-50 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary motion-reduce:transition-none [&_svg]:size-3', local.class)} {...others}/>;
+    return <TreeView.NodeCheckbox class={cn('inline-flex size-4 shrink-0 items-center justify-center rounded-xs border border-border bg-background text-primary-foreground outline-1 outline-offset-1 outline-transparent transition-[background-color,border-color,outline-color] duration-200 ease-in-out focus-visible:outline-ring data-disabled:cursor-default data-disabled:opacity-50 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary motion-reduce:transition-none [&_svg]:size-3', local.class)} {...others} data-slot="tree-view-node-checkbox"/>;
 }
 function TreeViewNodeCheckboxIndicator(props) {
     const [local, others] = splitProps(props, [
@@ -122,7 +122,7 @@ function TreeViewNodeCheckboxIndicator(props) {
         'indeterminate'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <ark.span asChild={local.asChild} data-slot="tree-view-node-checkbox-indicator" class={cn('inline-flex items-center justify-center', local.class)} {...others}>
+    return <ark.span asChild={local.asChild} class={cn('inline-flex items-center justify-center', local.class)} {...others} data-slot="tree-view-node-checkbox-indicator">
       <TreeView.NodeCheckboxIndicator fallback={local.fallback} indeterminate={local.indeterminate ?? <IndeterminateIcon/>}>
         {resolvedChildren() ?? <CheckIcon/>}
       </TreeView.NodeCheckboxIndicator>
@@ -132,7 +132,7 @@ function TreeViewNodeRenameInput(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <TreeView.NodeRenameInput data-slot="tree-view-node-rename-input" class={cn('box-border min-w-0 flex-1 rounded-xs border border-ring bg-background px-1 py-0 text-foreground outline-1 -outline-offset-1 outline-transparent [font:inherit] focus-visible:outline-ring', local.class)} {...others}/>;
+    return <TreeView.NodeRenameInput class={cn('box-border min-w-0 flex-1 rounded-xs border border-ring bg-background px-1 py-0 text-foreground outline-1 -outline-offset-1 outline-transparent [font:inherit] focus-visible:outline-ring', local.class)} {...others} data-slot="tree-view-node-rename-input"/>;
 }
 const TreeViewNodeProvider = TreeView.NodeProvider;
 function TreeViewNodeContent(props) {

package/dist/styles/animations.css

@@ -124,44 +124,44 @@
 @keyframes moduix-accordion-item-content-open {
   from {
     height: 0;
-    opacity: var(--moduix-accordion-item-content-closed-opacity, 0.01);
+    opacity: 0.01;
   }
   to {
     height: var(--height);
-    opacity: var(--moduix-accordion-item-content-open-opacity, 1);
+    opacity: 1;
   }
 }
 
 @keyframes moduix-accordion-item-content-closed {
   from {
     height: var(--height);
-    opacity: var(--moduix-accordion-item-content-open-opacity, 1);
+    opacity: 1;
   }
   to {
     height: 0;
-    opacity: var(--moduix-accordion-item-content-closed-opacity, 0.01);
+    opacity: 0.01;
   }
 }
 
 @keyframes moduix-accordion-item-content-open-horizontal {
   from {
     width: 0;
-    opacity: var(--moduix-accordion-item-content-closed-opacity, 0.01);
+    opacity: 0.01;
   }
   to {
     width: var(--width);
-    opacity: var(--moduix-accordion-item-content-open-opacity, 1);
+    opacity: 1;
   }
 }
 
 @keyframes moduix-accordion-item-content-closed-horizontal {
   from {
     width: var(--width);
-    opacity: var(--moduix-accordion-item-content-open-opacity, 1);
+    opacity: 1;
   }
   to {
     width: 0;
-    opacity: var(--moduix-accordion-item-content-closed-opacity, 0.01);
+    opacity: 0.01;
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moduix/solid-tailwind",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Tailwind CSS implementation of the moduix Solid component system, built on Ark UI primitives.",
   "keywords": [
     "accessible",