@moduix/solid-tailwind 1.1.0 → 2.0.0

package/dist/components/tag/Tag.js

@@ -130,7 +130,7 @@ function TagCloseTrigger(props) {
             return local['aria-labelledby'];
         },
         get ["class"] () {
-            return cn('size-4 rounded-full bg-transparent p-0 text-inherit focus-visible:outline-1 focus-visible:outline-offset-0 [&>svg]:size-2.5 [@media(hover:hover)]:[&:not([data-disabled]):hover]:bg-current/10 [@media(hover:hover)]:[&:not([data-disabled]):hover]:text-inherit', local.class);
+            return cn('size-4 rounded-full bg-transparent p-0 text-inherit focus-visible:outline-1 focus-visible:outline-offset-0 [&>svg]:size-2.5 [@media(hover:hover)]:[&:not([data-disabled]):hover]:bg-current/12 [@media(hover:hover)]:[&:not([data-disabled]):hover]:text-inherit', local.class);
         },
         get children () {
             return local.children;

package/dist/components/tag/Tag.jsx

@@ -64,7 +64,7 @@ function TagCloseTrigger(props) {
         'class'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <CloseButton.Root asChild={local.asChild} {...others} data-scope="tag" data-part="close-trigger" data-slot="tag-close-trigger" aria-label={local['aria-label'] ?? (!local.asChild && null == resolvedChildren() && null == local['aria-labelledby'] ? 'Remove tag' : void 0)} aria-labelledby={local['aria-labelledby']} class={cn('size-4 rounded-full bg-transparent p-0 text-inherit focus-visible:outline-1 focus-visible:outline-offset-0 [&>svg]:size-2.5 [@media(hover:hover)]:[&:not([data-disabled]):hover]:bg-current/10 [@media(hover:hover)]:[&:not([data-disabled]):hover]:text-inherit', local.class)}>
+    return <CloseButton.Root asChild={local.asChild} {...others} data-scope="tag" data-part="close-trigger" data-slot="tag-close-trigger" aria-label={local['aria-label'] ?? (!local.asChild && null == resolvedChildren() && null == local['aria-labelledby'] ? 'Remove tag' : void 0)} aria-labelledby={local['aria-labelledby']} class={cn('size-4 rounded-full bg-transparent p-0 text-inherit focus-visible:outline-1 focus-visible:outline-offset-0 [&>svg]:size-2.5 [@media(hover:hover)]:[&:not([data-disabled]):hover]:bg-current/12 [@media(hover:hover)]:[&:not([data-disabled]):hover]:text-inherit', local.class)}>
       {local.children}
     </CloseButton.Root>;
 }

package/dist/components/tags-input/TagsInput.js

@@ -62,7 +62,7 @@ function TagsInputControl(props) {
     ]);
     return createComponent(TagsInput.Control, mergeProps({
         get ["class"] () {
-            return cn('flex min-h-control-md w-full flex-wrap items-center gap-1 rounded-md border border-border bg-background px-2 py-[0.3125rem] text-foreground outline-1 -outline-offset-1 outline-transparent transition-[border-color,outline-color,background-color,opacity] duration-200 ease-in-out data-disabled:pointer-events-none data-focus:outline-ring data-invalid:border-destructive data-invalid:data-focus:outline-destructive data-readonly:bg-background data-readonly:text-foreground motion-reduce:transition-none', local.class);
+            return cn('group flex min-h-control-md w-full flex-wrap items-center gap-1 rounded-md border border-border bg-background px-2 py-[0.3125rem] text-foreground outline-1 -outline-offset-1 outline-transparent transition-[border-color,outline-color,background-color,opacity] duration-200 ease-in-out data-disabled:pointer-events-none data-focus:outline-ring data-invalid:border-destructive data-invalid:data-focus:outline-destructive data-readonly:bg-background data-readonly:text-foreground motion-reduce:transition-none', local.class);
         }
     }, others, {
         "data-slot": "tags-input-control"
@@ -112,7 +112,7 @@ function TagsInputItemDeleteTrigger(props) {
     const resolvedChildren = children(()=>local.children);
     return createComponent(TagsInput.ItemDeleteTrigger, mergeProps({
         get ["class"] () {
-            return cn('inline-flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-full border-0 bg-transparent p-0 text-inherit outline-0 transition-[background-color,color,opacity,box-shadow] duration-200 ease-in-out focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:cursor-default disabled:opacity-50 data-disabled:pointer-events-none data-disabled:cursor-default data-disabled:opacity-50 motion-reduce:transition-none [&>svg]:pointer-events-none [&>svg]:size-2.5 [&>svg]:shrink-0 [@media(hover:hover)]:hover:bg-current/10', local.class);
+            return cn('inline-flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-full border-0 bg-transparent p-0 text-inherit outline-0 transition-[background-color,color,opacity,box-shadow] duration-200 ease-in-out group-data-readonly:hidden focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:cursor-default disabled:opacity-50 data-disabled:pointer-events-none data-disabled:cursor-default data-disabled:opacity-50 motion-reduce:transition-none [&>svg]:pointer-events-none [&>svg]:size-2.5 [&>svg]:shrink-0 [@media(hover:hover)]:hover:bg-current/12', local.class);
         }
     }, others, {
         "data-slot": "tags-input-item-delete-trigger",
@@ -191,7 +191,7 @@ function TagsInputClearTrigger(props) {
                 }
             })),
         get ["class"] () {
-            return cn('ms-auto size-control-xs shrink-0 self-center rounded-sm bg-transparent text-muted-foreground transition-[background-color,color,opacity] duration-200 ease-in-out focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-ring data-readonly:hidden motion-reduce:transition-none [&>svg]:size-3 [@media(hover:hover)]:hover:bg-muted [@media(hover:hover)]:hover:text-foreground', local.class);
+            return cn('ms-auto size-control-xs shrink-0 self-center focus-visible:outline-1 data-readonly:hidden motion-reduce:transition-none [&>svg]:size-3', local.class);
         }
     }, others, {
         "data-slot": "tags-input-clear-trigger"

package/dist/components/tags-input/TagsInput.jsx

@@ -33,7 +33,7 @@ function TagsInputControl(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <TagsInput.Control class={cn('flex min-h-control-md w-full flex-wrap items-center gap-1 rounded-md border border-border bg-background px-2 py-[0.3125rem] text-foreground outline-1 -outline-offset-1 outline-transparent transition-[border-color,outline-color,background-color,opacity] duration-200 ease-in-out data-disabled:pointer-events-none data-focus:outline-ring data-invalid:border-destructive data-invalid:data-focus:outline-destructive data-readonly:bg-background data-readonly:text-foreground motion-reduce:transition-none', local.class)} {...others} data-slot="tags-input-control"/>;
+    return <TagsInput.Control class={cn('group flex min-h-control-md w-full flex-wrap items-center gap-1 rounded-md border border-border bg-background px-2 py-[0.3125rem] text-foreground outline-1 -outline-offset-1 outline-transparent transition-[border-color,outline-color,background-color,opacity] duration-200 ease-in-out data-disabled:pointer-events-none data-focus:outline-ring data-invalid:border-destructive data-invalid:data-focus:outline-destructive data-readonly:bg-background data-readonly:text-foreground motion-reduce:transition-none', local.class)} {...others} data-slot="tags-input-control"/>;
 }
 function TagsInputItem(props) {
     const [local, others] = splitProps(props, [
@@ -59,7 +59,7 @@ function TagsInputItemDeleteTrigger(props) {
         'class'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <TagsInput.ItemDeleteTrigger class={cn('inline-flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-full border-0 bg-transparent p-0 text-inherit outline-0 transition-[background-color,color,opacity,box-shadow] duration-200 ease-in-out focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:cursor-default disabled:opacity-50 data-disabled:pointer-events-none data-disabled:cursor-default data-disabled:opacity-50 motion-reduce:transition-none [&>svg]:pointer-events-none [&>svg]:size-2.5 [&>svg]:shrink-0 [@media(hover:hover)]:hover:bg-current/10', local.class)} {...others} data-slot="tags-input-item-delete-trigger">
+    return <TagsInput.ItemDeleteTrigger class={cn('inline-flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-full border-0 bg-transparent p-0 text-inherit outline-0 transition-[background-color,color,opacity,box-shadow] duration-200 ease-in-out group-data-readonly:hidden focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:cursor-default disabled:opacity-50 data-disabled:pointer-events-none data-disabled:cursor-default data-disabled:opacity-50 motion-reduce:transition-none [&>svg]:pointer-events-none [&>svg]:size-2.5 [&>svg]:shrink-0 [@media(hover:hover)]:hover:bg-current/12', local.class)} {...others} data-slot="tags-input-item-delete-trigger">
       {resolvedChildren() ?? <CloseIcon/>}
     </TagsInput.ItemDeleteTrigger>;
 }
@@ -91,7 +91,7 @@ function TagsInputClearTrigger(props) {
       </TagsInput.ClearTrigger>;
     return <TagsInput.ClearTrigger asChild={(triggerProps)=><CloseButton.Root {...triggerProps()} aria-label={local['aria-label'] ?? clearTriggerLabel()} aria-labelledby={local['aria-labelledby']} data-part="clear-trigger" data-scope="tags-input" data-slot="tags-input-clear-trigger">
           {resolvedChildren()}
-        </CloseButton.Root>} class={cn('ms-auto size-control-xs shrink-0 self-center rounded-sm bg-transparent text-muted-foreground transition-[background-color,color,opacity] duration-200 ease-in-out focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-ring data-readonly:hidden motion-reduce:transition-none [&>svg]:size-3 [@media(hover:hover)]:hover:bg-muted [@media(hover:hover)]:hover:text-foreground', local.class)} {...others} data-slot="tags-input-clear-trigger"/>;
+        </CloseButton.Root>} class={cn('ms-auto size-control-xs shrink-0 self-center focus-visible:outline-1 data-readonly:hidden motion-reduce:transition-none [&>svg]:size-3', local.class)} {...others} data-slot="tags-input-clear-trigger"/>;
 }
 const TagsInputContext = TagsInput.Context;
 function TagsInputItems() {

package/dist/components/text/Text.js

@@ -113,7 +113,7 @@ function TextRoot(props) {
                 weight: local.weight ?? defaultWeight(),
                 tone: local.tone ?? 'default',
                 align: local.align ?? 'start'
-            }), local.truncate && 'overflow-hidden text-ellipsis whitespace-nowrap', void 0 !== resolvedLineClamp() && '[display:-webkit-box] overflow-hidden [white-space:normal] [-webkit-box-orient:vertical]', local.class);
+            }), local.truncate && 'overflow-hidden text-ellipsis whitespace-nowrap', void 0 !== resolvedLineClamp() && '[display:-webkit-box] overflow-hidden whitespace-normal [-webkit-box-orient:vertical]', local.class);
         },
         get style () {
             return lineClampStyle();

package/dist/components/text/Text.jsx

@@ -83,7 +83,7 @@ function TextRoot(props) {
         weight: local.weight ?? defaultWeight(),
         tone: local.tone ?? 'default',
         align: local.align ?? 'start'
-    }), local.truncate && 'overflow-hidden text-ellipsis whitespace-nowrap', void 0 !== resolvedLineClamp() && '[display:-webkit-box] overflow-hidden [white-space:normal] [-webkit-box-orient:vertical]', local.class)} style={lineClampStyle()}/>;
+    }), local.truncate && 'overflow-hidden text-ellipsis whitespace-nowrap', void 0 !== resolvedLineClamp() && '[display:-webkit-box] overflow-hidden whitespace-normal [-webkit-box-orient:vertical]', local.class)} style={lineClampStyle()}/>;
 }
 const Text = Object.assign(TextRoot, {
     Root: TextRoot

package/dist/components/timer/Timer.js

@@ -80,7 +80,7 @@ function TimerActionTrigger(props) {
     ]);
     return createComponent(Timer.ActionTrigger, mergeProps({
         get ["class"] () {
-            return cn('inline-flex min-h-control-md cursor-pointer appearance-none items-center justify-center gap-2 rounded-md border border-border bg-background px-3 py-1.5 text-sm leading-5 font-medium whitespace-nowrap text-foreground transition-[background-color,border-color,color,opacity,box-shadow] duration-200 ease-in-out focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:cursor-default disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:cursor-default aria-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', local.class);
+            return cn('inline-flex min-h-control-md cursor-pointer appearance-none items-center justify-center gap-2 rounded-md border border-border bg-background px-3 py-1.5 text-sm leading-5 font-medium whitespace-nowrap text-foreground transition-[background-color,border-color,color,opacity,box-shadow] duration-200 ease-in-out focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:cursor-default disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:cursor-default aria-disabled:opacity-50 motion-reduce:transition-none [&_svg]:size-4 [&_svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', local.class);
         }
     }, others, {
         "data-slot": "timer-action-trigger"

package/dist/components/timer/Timer.jsx

@@ -41,7 +41,7 @@ function TimerActionTrigger(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Timer.ActionTrigger class={cn('inline-flex min-h-control-md cursor-pointer appearance-none items-center justify-center gap-2 rounded-md border border-border bg-background px-3 py-1.5 text-sm leading-5 font-medium whitespace-nowrap text-foreground transition-[background-color,border-color,color,opacity,box-shadow] duration-200 ease-in-out focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:cursor-default disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:cursor-default aria-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', local.class)} {...others} data-slot="timer-action-trigger"/>;
+    return <Timer.ActionTrigger class={cn('inline-flex min-h-control-md cursor-pointer appearance-none items-center justify-center gap-2 rounded-md border border-border bg-background px-3 py-1.5 text-sm leading-5 font-medium whitespace-nowrap text-foreground transition-[background-color,border-color,color,opacity,box-shadow] duration-200 ease-in-out focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:cursor-default disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:cursor-default aria-disabled:opacity-50 motion-reduce:transition-none [&_svg]:size-4 [&_svg]:shrink-0 [@media(hover:hover)]:hover:bg-accent', local.class)} {...others} data-slot="timer-action-trigger"/>;
 }
 const defaultTimerSegmentTypes = [
     'hours',

package/dist/components/toast/Toast.js

@@ -24,7 +24,7 @@ function Toast_Toaster(props) {
                 get children () {
                     return createComponent(Toaster, mergeProps({
                         get ["class"] () {
-                            return cn('z-70 max-[40rem]:w-full', local.class);
+                            return cn('max-[40rem]:w-full', local.class);
                         }
                     }, others, {
                         "data-slot": "toast-toaster",
@@ -63,7 +63,7 @@ function ToastRoot(props) {
     ]);
     return createComponent(Toast.Root, mergeProps({
         get ["class"] () {
-            return cn('group/toast pointer-events-auto [z-index:var(--z-index)] box-border grid [height:var(--height)] min-h-0 w-80 max-w-[calc(100vw-2rem)] min-w-0 [translate:var(--x)_var(--y)] [scale:var(--scale)] items-start gap-1 rounded-lg border border-border bg-card bg-clip-padding p-4 pe-11 text-card-foreground [opacity:var(--opacity)] shadow-lg transition-[translate,scale,opacity,height,box-shadow] duration-350 ease-[cubic-bezier(0.21,1.02,0.73,1)] [will-change:translate,opacity,scale] data-[state=closed]:ease-[cubic-bezier(0.06,0.71,0.55,1)] data-[state=closed]:[transition:translate_350ms,scale_350ms,opacity_200ms] data-[type=error]:border-destructive/35 data-[type=error]:bg-destructive/9 data-[type=error]:text-foreground data-[type=success]:border-success/34 data-[type=success]:bg-success/10 data-[type=success]:text-foreground data-[type=warning]:border-warning/38 data-[type=warning]:bg-warning/13 data-[type=warning]:text-foreground motion-reduce:transition-none max-[40rem]:inset-x-0 max-[40rem]:w-[calc(100%_-_(var(--gap)*2))] max-[40rem]:max-w-none', local.class);
+            return cn('group/toast pointer-events-auto [z-index:var(--z-index)] box-border grid [height:var(--height)] min-h-0 w-80 max-w-[calc(100vw-2rem)] min-w-0 [translate:var(--x)_var(--y)] [scale:var(--scale)] items-start gap-1 rounded-lg border border-border bg-card bg-clip-padding p-4 pe-11 text-card-foreground [opacity:var(--opacity)] shadow-lg transition-[translate,scale,opacity,height,box-shadow] duration-350 ease-[cubic-bezier(0.21,1.02,0.73,1)] [will-change:translate,opacity,scale] data-[state=closed]:[transition:translate_350ms_cubic-bezier(0.06,0.71,0.55,1),scale_350ms_cubic-bezier(0.06,0.71,0.55,1),opacity_200ms_cubic-bezier(0.06,0.71,0.55,1)] data-[type=error]:border-destructive/35 data-[type=error]:bg-destructive/9 data-[type=error]:text-foreground data-[type=success]:border-success/34 data-[type=success]:bg-success/10 data-[type=success]:text-foreground data-[type=warning]:border-warning/38 data-[type=warning]:bg-warning/13 data-[type=warning]:text-foreground motion-reduce:transition-none motion-reduce:data-[state=closed]:[transition:none] max-[40rem]:inset-x-0 max-[40rem]:w-[calc(100%_-_(var(--gap)*2))] max-[40rem]:max-w-none', local.class);
         }
     }, others, {
         "data-slot": "toast-root"

package/dist/components/toast/Toast.jsx

@@ -13,7 +13,7 @@ function Toast_Toaster(props) {
     ]);
     return <OverlayPortalProvider portalled={local.portalled} portalRef={local.portalRef}>
       <OverlayPortal>
-        <Toaster class={cn('z-70 max-[40rem]:w-full', local.class)} {...others} data-slot="toast-toaster" children={local.children ?? ((toast)=><DefaultToast toast={toast}/>)}/>
+        <Toaster class={cn('max-[40rem]:w-full', local.class)} {...others} data-slot="toast-toaster" children={local.children ?? ((toast)=><DefaultToast toast={toast}/>)}/>
       </OverlayPortal>
     </OverlayPortalProvider>;
 }
@@ -31,7 +31,7 @@ function ToastRoot(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Toast.Root class={cn('group/toast pointer-events-auto [z-index:var(--z-index)] box-border grid [height:var(--height)] min-h-0 w-80 max-w-[calc(100vw-2rem)] min-w-0 [translate:var(--x)_var(--y)] [scale:var(--scale)] items-start gap-1 rounded-lg border border-border bg-card bg-clip-padding p-4 pe-11 text-card-foreground [opacity:var(--opacity)] shadow-lg transition-[translate,scale,opacity,height,box-shadow] duration-350 ease-[cubic-bezier(0.21,1.02,0.73,1)] [will-change:translate,opacity,scale] data-[state=closed]:ease-[cubic-bezier(0.06,0.71,0.55,1)] data-[state=closed]:[transition:translate_350ms,scale_350ms,opacity_200ms] data-[type=error]:border-destructive/35 data-[type=error]:bg-destructive/9 data-[type=error]:text-foreground data-[type=success]:border-success/34 data-[type=success]:bg-success/10 data-[type=success]:text-foreground data-[type=warning]:border-warning/38 data-[type=warning]:bg-warning/13 data-[type=warning]:text-foreground motion-reduce:transition-none max-[40rem]:inset-x-0 max-[40rem]:w-[calc(100%_-_(var(--gap)*2))] max-[40rem]:max-w-none', local.class)} {...others} data-slot="toast-root"/>;
+    return <Toast.Root class={cn('group/toast pointer-events-auto [z-index:var(--z-index)] box-border grid [height:var(--height)] min-h-0 w-80 max-w-[calc(100vw-2rem)] min-w-0 [translate:var(--x)_var(--y)] [scale:var(--scale)] items-start gap-1 rounded-lg border border-border bg-card bg-clip-padding p-4 pe-11 text-card-foreground [opacity:var(--opacity)] shadow-lg transition-[translate,scale,opacity,height,box-shadow] duration-350 ease-[cubic-bezier(0.21,1.02,0.73,1)] [will-change:translate,opacity,scale] data-[state=closed]:[transition:translate_350ms_cubic-bezier(0.06,0.71,0.55,1),scale_350ms_cubic-bezier(0.06,0.71,0.55,1),opacity_200ms_cubic-bezier(0.06,0.71,0.55,1)] data-[type=error]:border-destructive/35 data-[type=error]:bg-destructive/9 data-[type=error]:text-foreground data-[type=success]:border-success/34 data-[type=success]:bg-success/10 data-[type=success]:text-foreground data-[type=warning]:border-warning/38 data-[type=warning]:bg-warning/13 data-[type=warning]:text-foreground motion-reduce:transition-none motion-reduce:data-[state=closed]:[transition:none] max-[40rem]:inset-x-0 max-[40rem]:w-[calc(100%_-_(var(--gap)*2))] max-[40rem]:max-w-none', local.class)} {...others} data-slot="toast-root"/>;
 }
 function ToastTitle(props) {
     const [local, others] = splitProps(props, [

package/dist/components/toc/Toc.d.ts

@@ -1,7 +1,7 @@
 import { Toc as TocPrimitive, type UseTocProps } from '@ark-ui/solid/toc';
 import type { ComponentProps, JSX } from 'solid-js';
-declare const useToc: (props: UseTocProps) => import("@ark-ui/solid").UseTocReturn;
-declare const useTocContext: () => import("@ark-ui/solid").UseTocContext;
+declare const useToc: (props: UseTocProps) => import("@ark-ui/solid/toc").UseTocReturn;
+declare const useTocContext: () => import("@ark-ui/solid/toc").UseTocContext;
 declare function TocRoot(props: ComponentProps<typeof TocPrimitive.Root>): JSX.Element;
 declare function TocRootProvider(props: ComponentProps<typeof TocPrimitive.RootProvider>): JSX.Element;
 declare function TocContent(props: ComponentProps<typeof TocPrimitive.Content>): JSX.Element;

package/dist/components/toc/Toc.js

@@ -1,6 +1,6 @@
 import { createComponent, insert, memo, mergeProps, spread, template } from "solid-js/web";
 import { Toc, useToc, useTocContext } from "@ark-ui/solid/toc";
-import { splitProps } from "solid-js";
+import { mergeProps as external_solid_js_mergeProps, splitProps } from "solid-js";
 import { cn } from "../../internal/cn.js";
 var _tmpl$ = /*#__PURE__*/ template("<svg aria-hidden=true><line y2=100%>"), _tmpl$2 = /*#__PURE__*/ template("<svg><path fill=none></svg>", false, true, false);
 const railBaseOffset = 0;
@@ -8,10 +8,9 @@ const railStep = 12;
 const railBridge = 6;
 const maxRailLevel = 2;
 const getRailOffset = (depth)=>railBaseOffset + Math.min(Math.max(depth - 2, 0), maxRailLevel) * railStep;
-const Toc_useToc = (props)=>useToc({
-        autoScroll: false,
-        ...props
-    });
+const Toc_useToc = (props)=>useToc(external_solid_js_mergeProps({
+        autoScroll: false
+    }, props));
 const Toc_useTocContext = useTocContext;
 function TocRoot(props) {
     const [local, others] = splitProps(props, [
@@ -116,7 +115,7 @@ function TocLink(props) {
     ]);
     return createComponent(Toc.Link, mergeProps({
         get ["class"] () {
-            return cn('group/toc-link relative block min-w-0 overflow-hidden rounded-sm py-1 ps-[calc(0.875rem+max(0px,((var(--depth)-2)*0.5rem)))] pe-1 text-sm leading-5 text-ellipsis whitespace-nowrap text-muted-foreground no-underline outline-0 transition-colors duration-200 ring-inset focus-visible:ring-1 focus-visible:ring-ring has-[[data-slot=toc-rail]]:overflow-visible data-active:font-medium data-active:text-foreground motion-reduce:transition-none [@media(hover:hover)]:hover:text-foreground', local.class);
+            return cn('group/toc-link relative block min-w-0 overflow-hidden rounded-sm py-1 ps-[calc(0.875rem+max(0px,((var(--depth)-2)*0.5rem)))] pe-1 text-sm leading-5 text-ellipsis whitespace-nowrap text-muted-foreground no-underline outline-0 transition-colors duration-200 focus-visible:ring-1 focus-visible:ring-ring has-[[data-slot=toc-rail]]:overflow-visible data-active:font-medium data-active:text-foreground motion-reduce:transition-none [@media(hover:hover)]:hover:text-foreground', local.class);
         }
     }, others, {
         "data-slot": "toc-link"

package/dist/components/toc/Toc.jsx

@@ -1,15 +1,14 @@
 import { Toc, useToc, useTocContext } from "@ark-ui/solid/toc";
-import { splitProps } from "solid-js";
+import { mergeProps, splitProps } from "solid-js";
 import { cn } from "../../internal/cn.jsx";
 const railBaseOffset = 0;
 const railStep = 12;
 const railBridge = 6;
 const maxRailLevel = 2;
 const getRailOffset = (depth)=>railBaseOffset + Math.min(Math.max(depth - 2, 0), maxRailLevel) * railStep;
-const Toc_useToc = (props)=>useToc({
-        autoScroll: false,
-        ...props
-    });
+const Toc_useToc = (props)=>useToc(mergeProps({
+        autoScroll: false
+    }, props));
 const Toc_useTocContext = useTocContext;
 function TocRoot(props) {
     const [local, others] = splitProps(props, [
@@ -61,7 +60,7 @@ function TocLink(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Toc.Link class={cn('group/toc-link relative block min-w-0 overflow-hidden rounded-sm py-1 ps-[calc(0.875rem+max(0px,((var(--depth)-2)*0.5rem)))] pe-1 text-sm leading-5 text-ellipsis whitespace-nowrap text-muted-foreground no-underline outline-0 transition-colors duration-200 ring-inset focus-visible:ring-1 focus-visible:ring-ring has-[[data-slot=toc-rail]]:overflow-visible data-active:font-medium data-active:text-foreground motion-reduce:transition-none [@media(hover:hover)]:hover:text-foreground', local.class)} {...others} data-slot="toc-link"/>;
+    return <Toc.Link class={cn('group/toc-link relative block min-w-0 overflow-hidden rounded-sm py-1 ps-[calc(0.875rem+max(0px,((var(--depth)-2)*0.5rem)))] pe-1 text-sm leading-5 text-ellipsis whitespace-nowrap text-muted-foreground no-underline outline-0 transition-colors duration-200 focus-visible:ring-1 focus-visible:ring-ring has-[[data-slot=toc-rail]]:overflow-visible data-active:font-medium data-active:text-foreground motion-reduce:transition-none [@media(hover:hover)]:hover:text-foreground', local.class)} {...others} data-slot="toc-link"/>;
 }
 function TocIndicator(props) {
     const [local, others] = splitProps(props, [

package/dist/components/toggle/Toggle.d.ts

@@ -6,6 +6,10 @@ type ToggleRootProps = ComponentProps<typeof TogglePrimitive.Root> & {
     variant?: ToggleVariant;
     size?: ToggleSize;
 };
+declare const toggleVariants: (props?: ({
+    variant?: "default" | "ghost" | "outline" | null | undefined;
+    size?: "icon-lg" | "icon-md" | "icon-sm" | "lg" | "md" | "sm" | "xs" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function ToggleRoot(props: ToggleRootProps): import("solid-js").JSX.Element;
 declare function ToggleIndicator(props: ComponentProps<typeof TogglePrimitive.Indicator>): import("solid-js").JSX.Element;
 declare const Toggle: typeof ToggleRoot & {
@@ -13,5 +17,5 @@ declare const Toggle: typeof ToggleRoot & {
     Indicator: typeof ToggleIndicator;
     Context: (props: TogglePrimitive.ContextProps) => import("solid-js").JSX.Element;
 };
-export { Toggle, useToggleContext };
+export { Toggle, toggleVariants, useToggleContext };
 export type { ToggleRootProps, ToggleSize, ToggleVariant };

package/dist/components/toggle/Toggle.js

@@ -3,7 +3,7 @@ import { Toggle, ToggleContext, useToggleContext } from "@ark-ui/solid/toggle";
 import { cva } from "class-variance-authority";
 import { splitProps } from "solid-js";
 import { cn } from "../../internal/cn.js";
-const toggleVariants = cva('box-border inline-flex min-h-control-md cursor-pointer items-center justify-center gap-2 rounded-md border text-sm font-medium appearance-none transition-[background-color,border-color,color,opacity] duration-200 ease-in-out select-none whitespace-nowrap data-focus-visible:outline-2 data-focus-visible:-outline-offset-1 data-focus-visible:outline-ring data-disabled:pointer-events-none data-disabled:cursor-default data-disabled:opacity-50 motion-reduce:transition-none data-[state=off]:active:bg-accent [@media(hover:hover)]:data-[state=off]:hover:bg-accent [&>svg]:block [&>svg]:size-4 [&>svg]:shrink-0', {
+const toggleVariants = cva('box-border inline-flex cursor-pointer items-center justify-center gap-2 rounded-md border text-sm font-medium appearance-none transition-[background-color,border-color,color,opacity] duration-200 ease-in-out select-none whitespace-nowrap focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring data-disabled:pointer-events-none data-disabled:cursor-default data-disabled:opacity-50 motion-reduce:transition-none data-[state=off]:active:bg-accent [@media(hover:hover)]:data-[state=off]:hover:bg-accent [&>svg]:block [&>svg]:size-4 [&>svg]:shrink-0', {
     variants: {
         variant: {
             default: 'border-secondary bg-secondary text-secondary-foreground data-[state=on]:border-primary data-[state=on]:bg-primary data-[state=on]:text-primary-foreground',
@@ -73,4 +73,4 @@ const Toggle_Toggle = Object.assign(ToggleRoot, {
     Indicator: ToggleIndicator,
     Context: ToggleContext
 });
-export { Toggle_Toggle as Toggle, useToggleContext };
+export { Toggle_Toggle as Toggle, toggleVariants, useToggleContext };

package/dist/components/toggle/Toggle.jsx

@@ -2,7 +2,7 @@ import { Toggle, ToggleContext, useToggleContext } from "@ark-ui/solid/toggle";
 import { cva } from "class-variance-authority";
 import { splitProps } from "solid-js";
 import { cn } from "../../internal/cn.jsx";
-const toggleVariants = cva('box-border inline-flex min-h-control-md cursor-pointer items-center justify-center gap-2 rounded-md border text-sm font-medium appearance-none transition-[background-color,border-color,color,opacity] duration-200 ease-in-out select-none whitespace-nowrap data-focus-visible:outline-2 data-focus-visible:-outline-offset-1 data-focus-visible:outline-ring data-disabled:pointer-events-none data-disabled:cursor-default data-disabled:opacity-50 motion-reduce:transition-none data-[state=off]:active:bg-accent [@media(hover:hover)]:data-[state=off]:hover:bg-accent [&>svg]:block [&>svg]:size-4 [&>svg]:shrink-0', {
+const toggleVariants = cva('box-border inline-flex cursor-pointer items-center justify-center gap-2 rounded-md border text-sm font-medium appearance-none transition-[background-color,border-color,color,opacity] duration-200 ease-in-out select-none whitespace-nowrap focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring data-disabled:pointer-events-none data-disabled:cursor-default data-disabled:opacity-50 motion-reduce:transition-none data-[state=off]:active:bg-accent [@media(hover:hover)]:data-[state=off]:hover:bg-accent [&>svg]:block [&>svg]:size-4 [&>svg]:shrink-0', {
     variants: {
         variant: {
             default: 'border-secondary bg-secondary text-secondary-foreground data-[state=on]:border-primary data-[state=on]:bg-primary data-[state=on]:text-primary-foreground',
@@ -48,4 +48,4 @@ const Toggle_Toggle = Object.assign(ToggleRoot, {
     Indicator: ToggleIndicator,
     Context: ToggleContext
 });
-export { Toggle_Toggle as Toggle, useToggleContext };
+export { Toggle_Toggle as Toggle, toggleVariants, useToggleContext };

package/dist/components/toggle-group/ToggleGroup.d.ts

@@ -1,7 +1,6 @@
 import { ToggleGroup as ToggleGroupPrimitive, useToggleGroup, useToggleGroupContext } from '@ark-ui/solid/toggle-group';
 import type { ComponentProps } from 'solid-js';
-type ToggleVariant = 'default' | 'outline' | 'ghost';
-type ToggleSize = 'xs' | 'sm' | 'md' | 'lg' | 'icon-sm' | 'icon-md' | 'icon-lg';
+import type { ToggleSize, ToggleVariant } from '../toggle/Toggle.js';
 type ToggleGroupRootProps = ComponentProps<typeof ToggleGroupPrimitive.Root> & {
     variant?: ToggleVariant;
     size?: ToggleSize;

package/dist/components/toggle-group/ToggleGroup.js

@@ -3,12 +3,13 @@ import { ToggleGroup, useToggleGroup, useToggleGroupContext } from "@ark-ui/soli
 import { cva } from "class-variance-authority";
 import { createContext, splitProps, useContext } from "solid-js";
 import { cn } from "../../internal/cn.js";
+import { toggleVariants } from "../toggle/Toggle.js";
 const defaultToggleGroupStyles = {
     variant: ()=>'default',
     size: ()=>'md'
 };
 const ToggleGroupStyleContext = createContext(defaultToggleGroupStyles);
-const toggleGroupRootVariants = cva('group/toggle-group inline-flex max-w-full items-center gap-px overflow-x-auto rounded-lg border border-border bg-muted p-0.5 text-foreground [overscroll-behavior-inline:contain] [scrollbar-width:none] data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch [&::-webkit-scrollbar]:hidden', {
+const toggleGroupRootVariants = cva('group/toggle-group inline-flex max-w-full items-center gap-px overflow-x-auto overscroll-x-contain rounded-lg border border-border bg-muted p-0.5 text-foreground [scrollbar-width:none] data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch [&::-webkit-scrollbar]:hidden', {
     variants: {
         variant: {
             default: '',
@@ -20,28 +21,6 @@ const toggleGroupRootVariants = cva('group/toggle-group inline-flex max-w-full i
         variant: 'default'
     }
 });
-const toggleGroupItemVariants = cva('box-border inline-flex min-h-control-md flex-none cursor-pointer items-center justify-center gap-2 rounded-md border text-sm font-medium appearance-none transition-[background-color,border-color,color,opacity] duration-200 ease-in-out select-none whitespace-nowrap data-focus-visible:outline-2 data-focus-visible:-outline-offset-1 data-focus-visible:outline-ring group-data-[orientation=vertical]/toggle-group:w-full group-data-[orientation=vertical]/toggle-group:justify-start data-disabled:pointer-events-none data-disabled:cursor-default data-disabled:opacity-50 motion-reduce:transition-none data-[state=off]:active:bg-accent [@media(hover:hover)]:data-[state=off]:hover:bg-accent [&>svg]:block [&>svg]:size-4 [&>svg]:shrink-0', {
-    variants: {
-        variant: {
-            default: 'border-secondary bg-secondary text-secondary-foreground data-[state=on]:border-primary data-[state=on]:bg-primary data-[state=on]:text-primary-foreground',
-            outline: 'border-border bg-background text-foreground data-[state=on]:border-primary data-[state=on]:bg-primary data-[state=on]:text-primary-foreground',
-            ghost: 'border-transparent bg-transparent text-foreground data-[state=on]:bg-accent data-[state=on]:text-foreground'
-        },
-        size: {
-            xs: 'min-h-control-xs px-2.5 py-0.5 text-xs',
-            sm: 'min-h-control-sm px-3 py-1',
-            md: 'min-h-control-md px-4 py-1',
-            lg: 'min-h-control-lg px-5 py-1.5 text-md',
-            'icon-sm': 'size-control-sm min-w-control-sm gap-0 p-0',
-            'icon-md': 'size-control-md min-w-control-md gap-0 p-0',
-            'icon-lg': 'size-control-lg min-w-control-lg gap-0 p-0'
-        }
-    },
-    defaultVariants: {
-        variant: 'default',
-        size: 'md'
-    }
-});
 function ToggleGroupRoot(props) {
     const [local, others] = splitProps(props, [
         'asChild',
@@ -146,10 +125,10 @@ function ToggleGroupItem(props) {
             return size();
         },
         get ["class"] () {
-            return cn(toggleGroupItemVariants({
+            return cn(toggleVariants({
                 variant: variant(),
                 size: size()
-            }), local.class);
+            }), 'flex-none text-foreground group-data-[orientation=vertical]/toggle-group:w-full group-data-[orientation=vertical]/toggle-group:justify-start', local.class);
         },
         get children () {
             return local.children;

package/dist/components/toggle-group/ToggleGroup.jsx

@@ -2,12 +2,13 @@ import { ToggleGroup, useToggleGroup, useToggleGroupContext } from "@ark-ui/soli
 import { cva } from "class-variance-authority";
 import { createContext, splitProps, useContext } from "solid-js";
 import { cn } from "../../internal/cn.jsx";
+import { toggleVariants } from "../toggle/Toggle.jsx";
 const defaultToggleGroupStyles = {
     variant: ()=>'default',
     size: ()=>'md'
 };
 const ToggleGroupStyleContext = createContext(defaultToggleGroupStyles);
-const toggleGroupRootVariants = cva('group/toggle-group inline-flex max-w-full items-center gap-px overflow-x-auto rounded-lg border border-border bg-muted p-0.5 text-foreground [overscroll-behavior-inline:contain] [scrollbar-width:none] data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch [&::-webkit-scrollbar]:hidden', {
+const toggleGroupRootVariants = cva('group/toggle-group inline-flex max-w-full items-center gap-px overflow-x-auto overscroll-x-contain rounded-lg border border-border bg-muted p-0.5 text-foreground [scrollbar-width:none] data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch [&::-webkit-scrollbar]:hidden', {
     variants: {
         variant: {
             default: '',
@@ -19,28 +20,6 @@ const toggleGroupRootVariants = cva('group/toggle-group inline-flex max-w-full i
         variant: 'default'
     }
 });
-const toggleGroupItemVariants = cva('box-border inline-flex min-h-control-md flex-none cursor-pointer items-center justify-center gap-2 rounded-md border text-sm font-medium appearance-none transition-[background-color,border-color,color,opacity] duration-200 ease-in-out select-none whitespace-nowrap data-focus-visible:outline-2 data-focus-visible:-outline-offset-1 data-focus-visible:outline-ring group-data-[orientation=vertical]/toggle-group:w-full group-data-[orientation=vertical]/toggle-group:justify-start data-disabled:pointer-events-none data-disabled:cursor-default data-disabled:opacity-50 motion-reduce:transition-none data-[state=off]:active:bg-accent [@media(hover:hover)]:data-[state=off]:hover:bg-accent [&>svg]:block [&>svg]:size-4 [&>svg]:shrink-0', {
-    variants: {
-        variant: {
-            default: 'border-secondary bg-secondary text-secondary-foreground data-[state=on]:border-primary data-[state=on]:bg-primary data-[state=on]:text-primary-foreground',
-            outline: 'border-border bg-background text-foreground data-[state=on]:border-primary data-[state=on]:bg-primary data-[state=on]:text-primary-foreground',
-            ghost: 'border-transparent bg-transparent text-foreground data-[state=on]:bg-accent data-[state=on]:text-foreground'
-        },
-        size: {
-            xs: 'min-h-control-xs px-2.5 py-0.5 text-xs',
-            sm: 'min-h-control-sm px-3 py-1',
-            md: 'min-h-control-md px-4 py-1',
-            lg: 'min-h-control-lg px-5 py-1.5 text-md',
-            'icon-sm': 'size-control-sm min-w-control-sm gap-0 p-0',
-            'icon-md': 'size-control-md min-w-control-md gap-0 p-0',
-            'icon-lg': 'size-control-lg min-w-control-lg gap-0 p-0'
-        }
-    },
-    defaultVariants: {
-        variant: 'default',
-        size: 'md'
-    }
-});
 function ToggleGroupRoot(props) {
     const [local, others] = splitProps(props, [
         'asChild',
@@ -94,10 +73,10 @@ function ToggleGroupItem(props) {
     const inherited = useContext(ToggleGroupStyleContext);
     const variant = ()=>local.variant ?? inherited.variant();
     const size = ()=>local.size ?? inherited.size();
-    return <ToggleGroup.Item asChild={local.asChild} {...others} data-slot="toggle-group-item" data-variant={variant()} data-size={size()} class={cn(toggleGroupItemVariants({
+    return <ToggleGroup.Item asChild={local.asChild} {...others} data-slot="toggle-group-item" data-variant={variant()} data-size={size()} class={cn(toggleVariants({
         variant: variant(),
         size: size()
-    }), local.class)}>
+    }), 'flex-none text-foreground group-data-[orientation=vertical]/toggle-group:w-full group-data-[orientation=vertical]/toggle-group:justify-start', local.class)}>
       {local.children}
     </ToggleGroup.Item>;
 }

package/dist/components/tooltip/Tooltip.js

@@ -125,7 +125,7 @@ function TooltipPositioner(props) {
         get children () {
             return createComponent(Tooltip.Positioner, mergeProps({
                 get ["class"] () {
-                    return cn('z-[var(--z-index)] max-h-[var(--available-height)] max-w-[var(--available-width)] outline-0', local.class);
+                    return cn('z-[var(--z-index,var(--moduix-z-popup))] max-h-[var(--available-height)] max-w-[var(--available-width)] outline-0', local.class);
                 }
             }, others, {
                 "data-slot": "tooltip-positioner"
@@ -160,7 +160,7 @@ function TooltipArrow(props) {
     const resolvedChildren = children(()=>local.children);
     return createComponent(Tooltip.Arrow, mergeProps({
         get ["class"] () {
-            return cn('[--arrow-background:var(--color-popover)] [--arrow-size:0.625rem]', local.class);
+            return cn('[--arrow-background:var(--color-popover)] [--arrow-size:var(--spacing-2_5)]', local.class);
         }
     }, others, {
         "data-slot": "tooltip-arrow",

package/dist/components/tooltip/Tooltip.jsx

@@ -63,7 +63,7 @@ function TooltipPositioner(props) {
         'class'
     ]);
     return <OverlayPortal>
-      <Tooltip.Positioner class={cn('z-[var(--z-index)] max-h-[var(--available-height)] max-w-[var(--available-width)] outline-0', local.class)} {...others} data-slot="tooltip-positioner"/>
+      <Tooltip.Positioner class={cn('z-[var(--z-index,var(--moduix-z-popup))] max-h-[var(--available-height)] max-w-[var(--available-width)] outline-0', local.class)} {...others} data-slot="tooltip-positioner"/>
     </OverlayPortal>;
 }
 function TooltipContent(props) {
@@ -83,7 +83,7 @@ function TooltipArrow(props) {
         'class'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <Tooltip.Arrow class={cn('[--arrow-background:var(--color-popover)] [--arrow-size:0.625rem]', local.class)} {...others} data-slot="tooltip-arrow">
+    return <Tooltip.Arrow class={cn('[--arrow-background:var(--color-popover)] [--arrow-size:var(--spacing-2_5)]', local.class)} {...others} data-slot="tooltip-arrow">
       {resolvedChildren() ?? <TooltipArrowTip/>}
     </Tooltip.Arrow>;
 }

package/dist/components/tour/Tour.js

@@ -61,7 +61,7 @@ function TourSpotlight(props) {
         get children () {
             return createComponent(Tour.Spotlight, mergeProps({
                 get ["class"] () {
-                    return cn('z-[calc(50+var(--tour-layer,0))] ring-2 ring-ring', local.class);
+                    return cn('z-[calc(50+var(--tour-layer,0)+var(--layer-index,0))] ring-2 ring-ring', local.class);
                 }
             }, others, {
                 "data-slot": "tour-spotlight"

package/dist/components/tour/Tour.jsx

@@ -32,7 +32,7 @@ function TourSpotlight(props) {
         'class'
     ]);
     return <OverlayPortal>
-      <Tour.Spotlight class={cn('z-[calc(50+var(--tour-layer,0))] ring-2 ring-ring', local.class)} {...others} data-slot="tour-spotlight"/>
+      <Tour.Spotlight class={cn('z-[calc(50+var(--tour-layer,0)+var(--layer-index,0))] ring-2 ring-ring', local.class)} {...others} data-slot="tour-spotlight"/>
     </OverlayPortal>;
 }
 function TourPositioner(props) {

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

@@ -1,9 +1,11 @@
 import { createComponent, mergeProps } from "solid-js/web";
 import { ark } from "@ark-ui/solid/factory";
 import { TreeView, createFileTreeCollection, createTreeCollection, useTreeView, useTreeViewContext, useTreeViewNodeContext } from "@ark-ui/solid/tree-view";
+import { cva } from "class-variance-authority";
 import { children, splitProps } from "solid-js";
 import { cn } from "../../internal/cn.js";
 import { CheckIcon, ChevronRightIcon, IndeterminateIcon } from "../../internal/icons/ui/Icons.js";
+const treeViewRowVariants = cva("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 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");
 const TreeView_TreeViewRoot = function(props) {
     const [local, others] = splitProps(props, [
         'asChild',
@@ -86,7 +88,7 @@ function TreeViewBranchControl(props) {
     ]);
     return createComponent(TreeView.BranchControl, mergeProps({
         get ["class"] () {
-            return 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);
+            return cn(treeViewRowVariants(), 'ps-[calc(0.5rem+((var(--depth,1)-1)*1rem))]', local.class);
         }
     }, others, {
         "data-slot": "tree-view-branch-control"
@@ -168,7 +170,7 @@ function TreeViewItem(props) {
     ]);
     return createComponent(TreeView.Item, mergeProps({
         get ["class"] () {
-            return 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);
+            return cn(treeViewRowVariants(), 'ps-[calc(1rem+((var(--depth,1)-1)*1rem))]', local.class);
         }
     }, others, {
         "data-slot": "tree-view-item"

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

@@ -1,8 +1,10 @@
 import { ark } from "@ark-ui/solid/factory";
 import { TreeView, createFileTreeCollection, createTreeCollection, useTreeView, useTreeViewContext, useTreeViewNodeContext } from "@ark-ui/solid/tree-view";
+import { cva } from "class-variance-authority";
 import { children, splitProps } from "solid-js";
 import { cn } from "../../internal/cn.jsx";
 import { CheckIcon, ChevronRightIcon, IndeterminateIcon } from "../../internal/icons/ui/Icons.jsx";
+const treeViewRowVariants = cva("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 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");
 const TreeView_TreeViewRoot = function(props) {
     const [local, others] = splitProps(props, [
         'asChild',
@@ -45,7 +47,7 @@ function TreeViewBranchControl(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    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"/>;
+    return <TreeView.BranchControl class={cn(treeViewRowVariants(), 'ps-[calc(0.5rem+((var(--depth,1)-1)*1rem))]', local.class)} {...others} data-slot="tree-view-branch-control"/>;
 }
 function TreeViewBranchTrigger(props) {
     const [local, others] = splitProps(props, [
@@ -89,7 +91,7 @@ function TreeViewItem(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    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"/>;
+    return <TreeView.Item class={cn(treeViewRowVariants(), 'ps-[calc(1rem+((var(--depth,1)-1)*1rem))]', local.class)} {...others} data-slot="tree-view-item"/>;
 }
 function TreeViewItemText(props) {
     const [local, others] = splitProps(props, [

package/dist/components/typeset/Typeset_module.css

@@ -104,8 +104,9 @@
   }
 
   .root-DaHOOi :not(:where(.not-typeset, [data-not-typeset], .not-typeset *, [data-not-typeset] *)):where(a:focus-visible) {
-    outline: 2px solid var(--moduix-color-ring, currentColor);
-    outline-offset: 2px;
+    outline: var(--moduix-focus-ring-width, var(--moduix-border-width-md)) solid
+        var(--moduix-color-ring, currentColor);
+    outline-offset: var(--moduix-focus-ring-offset, var(--moduix-spacing-0-5));
     border-radius: .125em;
   }
 
@@ -118,9 +119,10 @@
   }
 
   .root-DaHOOi :not(:where(.not-typeset, [data-not-typeset], .not-typeset *, [data-not-typeset] *)):where(mark) {
+    background-color: color-mix(in oklab,
+        var(--moduix-color-warning, currentColor) 40%,
+        transparent);
     color: inherit;
-    background-color: #f4ce2366;
-    background-color: lab(84.3279% 2.77337 79.232 / .4);
     border-radius: .2em;
     padding: .05em .15em;
   }

package/dist/styles/animations.css

@@ -81,6 +81,16 @@
   }
 }
 
+@keyframes moduix-progress-circular-indeterminate {
+  from {
+    transform: rotate(-90deg);
+  }
+
+  to {
+    transform: rotate(270deg);
+  }
+}
+
 @keyframes moduix-progress-linear-indeterminate {
   from {
     transform: translateX(-100%);