@moduix/react 2.4.0 → 2.5.1

package/dist/components/sidebar/Sidebar_module.css

@@ -24,6 +24,7 @@
     display: flex;
     position: relative;
     overflow: hidden;
+    container-type: inline-size;
   }
 
   .panel-l44YAX[data-state="collapsed"] .header-YkNEAV, .panel-l44YAX[data-state="collapsed"] .footer-RydM38, .panel-l44YAX[data-state="collapsed"] .group-cwd3z7 {
@@ -34,6 +35,10 @@
     justify-content: center;
   }
 
+  .panel-l44YAX[data-state="collapsed"] .header-YkNEAV > :only-child {
+    width: auto;
+  }
+
   .panel-l44YAX[data-state="collapsed"] .content-v0UxPJ {
     scrollbar-gutter: auto;
     scrollbar-width: none;
@@ -95,28 +100,39 @@
 
   .trigger-_fUcgc {
     box-sizing: border-box;
+    z-index: 4;
     width: var(--moduix-sidebar-trigger-size, var(--moduix-spacing-7));
     min-width: var(--moduix-sidebar-trigger-size, var(--moduix-spacing-7));
     height: var(--moduix-sidebar-trigger-size, var(--moduix-spacing-7));
+    margin-inline: calc(var(--moduix-sidebar-trigger-size, var(--moduix-spacing-7)) * -.5);
+    border: var(--moduix-sidebar-trigger-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-sidebar-trigger-border-color, var(--moduix-color-border));
     border-radius: var(--moduix-sidebar-trigger-radius, var(--moduix-radius-full));
+    background-color: var(--moduix-sidebar-trigger-bg, var(--moduix-color-background));
     color: var(--moduix-sidebar-muted-color, var(--moduix-color-muted-foreground));
     appearance: none;
     cursor: pointer;
+    translate: 0 var(--moduix-sidebar-trigger-offset-y, 40px);
+    box-shadow: var(--moduix-sidebar-trigger-shadow, var(--moduix-shadow-sm));
     transition: background-color var(--moduix-sidebar-transition, var(--moduix-transition-default)),
       color var(--moduix-sidebar-transition, var(--moduix-transition-default)),
       box-shadow var(--moduix-sidebar-transition, var(--moduix-transition-default));
-    background-color: #0000;
-    border: 0;
     flex: none;
     justify-content: center;
     align-items: center;
     padding: 0;
     display: inline-flex;
+    position: relative;
   }
 
   .trigger-_fUcgc > svg {
     width: var(--moduix-sidebar-icon-size, var(--moduix-spacing-4));
     height: var(--moduix-sidebar-icon-size, var(--moduix-spacing-4));
+    transition: transform var(--moduix-sidebar-transition, var(--moduix-transition-default));
+  }
+
+  .trigger-_fUcgc[data-side="left"][data-state="collapsed"] > svg, .trigger-_fUcgc[data-side="right"][data-state="expanded"] > svg {
+    transform: rotate(180deg);
   }
 
   .trigger-_fUcgc:focus-visible {
@@ -137,30 +153,6 @@
     }
   }
 
-  .trigger-_fUcgc {
-    z-index: 4;
-    margin-block-start: 0;
-    margin-inline: calc(var(--moduix-sidebar-trigger-size, var(--moduix-spacing-7)) * -.5);
-    border: var(--moduix-sidebar-trigger-border-width, var(--moduix-border-width-sm)) solid
-      var(--moduix-sidebar-trigger-border-color, var(--moduix-color-border));
-    border-radius: var(--moduix-sidebar-trigger-radius, var(--moduix-radius-full));
-    background-color: var(--moduix-sidebar-trigger-bg, var(--moduix-color-background));
-    box-shadow: var(--moduix-sidebar-trigger-shadow, var(--moduix-shadow-sm));
-    position: relative;
-  }
-
-  .trigger-_fUcgc[data-side="left"][data-state="collapsed"] > svg, .trigger-_fUcgc[data-side="right"][data-state="expanded"] > svg {
-    transform: rotate(180deg);
-  }
-
-  .trigger-_fUcgc > svg {
-    transition: transform var(--moduix-sidebar-transition, var(--moduix-transition-default));
-  }
-
-  .trigger-_fUcgc {
-    translate: 0 var(--moduix-sidebar-trigger-offset-y, 40px);
-  }
-
   .label-trHnso, .groupLabel-IvBtsR {
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -181,6 +173,10 @@
       var(--moduix-sidebar-border-color, var(--moduix-color-border));
   }
 
+  .header-YkNEAV > :only-child {
+    width: 100%;
+  }
+
   .footer-RydM38 {
     border-block-start: var(--moduix-sidebar-section-border-width, 0) solid
       var(--moduix-sidebar-border-color, var(--moduix-color-border));
@@ -216,7 +212,7 @@
   .groupAction-aoQPc4 {
     width: var(--moduix-sidebar-group-action-size, var(--moduix-size-xs));
     height: var(--moduix-sidebar-group-action-size, var(--moduix-size-xs));
-    border-radius: var(--moduix-sidebar-menu-button-radius, var(--moduix-radius-md));
+    border-radius: var(--moduix-sidebar-navigation-button-radius, var(--moduix-radius-md));
     color: var(--moduix-sidebar-muted-color, var(--moduix-color-muted-foreground));
     appearance: none;
     cursor: pointer;
@@ -256,12 +252,16 @@
   }
 
   .group-cwd3z7:has(.groupAction-aoQPc4) .groupLabel-IvBtsR {
+    min-height: var(--moduix-sidebar-group-action-size, var(--moduix-size-xs));
     grid-column: 1;
+    align-items: center;
+    display: flex;
   }
 
   .group-cwd3z7:has(.groupAction-aoQPc4) .groupAction-aoQPc4 {
     grid-column: 2;
     align-self: center;
+    margin-inline-end: var(--moduix-sidebar-navigation-button-padding-x, var(--moduix-spacing-2));
   }
 
   .groupContent-_s9yul {
@@ -273,8 +273,12 @@
     grid-column: 1 / -1;
   }
 
+  .group-cwd3z7:has(.groupAction-aoQPc4) .menu-UwagMF {
+    grid-column: 1 / -1;
+  }
+
   .menu-UwagMF, .menuSub-xn2r86 {
-    gap: var(--moduix-sidebar-menu-gap, var(--moduix-spacing-1));
+    gap: var(--moduix-sidebar-navigation-gap, var(--moduix-spacing-1));
     flex-direction: column;
     width: 100%;
     min-width: 0;
@@ -284,21 +288,31 @@
     display: flex;
   }
 
-  .menuItem-ktGhRk, .menuSubItem-NeKVH5 {
+  .menuItem-ktGhRk {
     min-width: 0;
     position: relative;
   }
 
+  .menuSubItem-NeKVH5 {
+    min-width: 0;
+  }
+
+  .menuItem-ktGhRk > [data-scope="select"][data-part="root"] {
+    --moduix-select-width: 100%;
+  }
+
   .menuButton-OAl6eQ, .menuSubButton-MjeEfX {
     box-sizing: border-box;
-    border: var(--moduix-sidebar-menu-button-border-width, 0) solid transparent;
-    border-radius: var(--moduix-sidebar-menu-button-radius, var(--moduix-radius-md));
+    border: var(--moduix-sidebar-navigation-button-border-width, 0) solid transparent;
+    border-radius: var(--moduix-sidebar-navigation-button-radius, var(--moduix-radius-md));
     width: 100%;
     min-width: 0;
     color: var(--moduix-sidebar-color, var(--moduix-color-card-foreground));
     appearance: none;
     font: inherit;
     text-align: start;
+    text-overflow: ellipsis;
+    white-space: nowrap;
     cursor: pointer;
     transition: background-color var(--moduix-sidebar-transition, var(--moduix-transition-default)),
       border-color var(--moduix-sidebar-transition, var(--moduix-transition-default)),
@@ -308,6 +322,7 @@
     align-items: center;
     text-decoration: none;
     display: flex;
+    overflow: hidden;
   }
 
   :is(.menuButton-OAl6eQ, .menuSubButton-MjeEfX) > svg {
@@ -352,36 +367,32 @@
   }
 
   .menuButton-OAl6eQ {
-    gap: var(--moduix-sidebar-menu-button-gap, var(--moduix-spacing-2));
-    min-height: var(--moduix-sidebar-menu-button-height, var(--moduix-size-md));
-    padding-block: var(--moduix-sidebar-menu-button-padding-y, var(--moduix-spacing-1));
-    padding-inline: var(--moduix-sidebar-menu-button-padding-x, var(--moduix-spacing-2));
-    font-size: var(--moduix-sidebar-menu-button-font-size, var(--moduix-text-sm));
-    line-height: var(--moduix-sidebar-menu-button-line-height, var(--moduix-line-height-text-sm));
+    gap: var(--moduix-sidebar-navigation-button-gap, var(--moduix-spacing-2));
+    min-height: var(--moduix-sidebar-navigation-button-height, var(--moduix-size-md));
+    padding-block: var(--moduix-sidebar-navigation-button-padding-y, var(--moduix-spacing-1));
+    padding-inline: var(--moduix-sidebar-navigation-button-padding-x, var(--moduix-spacing-2));
+    font-size: var(--moduix-sidebar-navigation-button-font-size, var(--moduix-text-sm));
+    line-height: var(--moduix-sidebar-navigation-button-line-height, var(--moduix-line-height-text-sm));
   }
 
   .menuButton-OAl6eQ[data-size="sm"] {
-    min-height: var(--moduix-sidebar-menu-button-height-sm, var(--moduix-size-sm));
-    font-size: var(--moduix-sidebar-menu-button-font-size-sm, var(--moduix-text-xs));
+    min-height: var(--moduix-sidebar-navigation-button-height-sm, var(--moduix-size-sm));
+    font-size: var(--moduix-sidebar-navigation-button-font-size-sm, var(--moduix-text-xs));
   }
 
   .menuButton-OAl6eQ[data-size="lg"] {
-    min-height: var(--moduix-sidebar-menu-button-height-lg, var(--moduix-size-lg));
+    min-height: var(--moduix-sidebar-navigation-button-height-lg, var(--moduix-size-lg));
   }
 
-  .menuButton-OAl6eQ > [data-slot="collapsible-indicator"], .menuButton-OAl6eQ > [data-slot="menu-indicator"] {
+  .menuButton-OAl6eQ > [data-slot="collapsible-indicator"], .menuButton-OAl6eQ > [data-slot="menu-indicator"], .menuButton-OAl6eQ > [data-scope="select"][data-part="indicator"] {
     margin-inline-start: auto;
   }
 
-  .panel-l44YAX .menuButton-OAl6eQ {
-    justify-content: flex-start;
-  }
-
   .menuAction-_BDfHY {
     z-index: 1;
-    width: var(--moduix-sidebar-menu-action-size, var(--moduix-size-xs));
-    height: var(--moduix-sidebar-menu-action-size, var(--moduix-size-xs));
-    border-radius: var(--moduix-sidebar-menu-button-radius, var(--moduix-radius-md));
+    width: var(--moduix-sidebar-navigation-action-size, var(--moduix-size-xs));
+    height: var(--moduix-sidebar-navigation-action-size, var(--moduix-size-xs));
+    border-radius: var(--moduix-sidebar-navigation-button-radius, var(--moduix-radius-md));
     color: var(--moduix-sidebar-muted-color, var(--moduix-color-muted-foreground));
     appearance: none;
     cursor: pointer;
@@ -394,10 +405,10 @@
     padding: 0;
     display: inline-flex;
     position: absolute;
-    inset-block-start: calc((var(--moduix-sidebar-menu-button-height, var(--moduix-size-md)) -
-          var(--moduix-sidebar-menu-action-size, var(--moduix-size-xs))) /
+    inset-block-start: calc((var(--moduix-sidebar-navigation-button-height, var(--moduix-size-md)) -
+          var(--moduix-sidebar-navigation-action-size, var(--moduix-size-xs))) /
         2);
-    inset-inline-end: var(--moduix-sidebar-menu-button-padding-x, var(--moduix-spacing-2));
+    inset-inline-end: var(--moduix-sidebar-navigation-button-padding-x, var(--moduix-spacing-2));
   }
 
   .menuAction-_BDfHY > svg {
@@ -420,28 +431,57 @@
 
   .menuBadge-GKf4u4 {
     z-index: 1;
-    min-width: var(--moduix-sidebar-menu-badge-min-width, 1.5rem);
-    min-height: var(--moduix-sidebar-menu-badge-min-width, 1.5rem);
-    padding-inline: var(--moduix-sidebar-menu-badge-padding-x, var(--moduix-spacing-1));
+    min-width: var(--moduix-sidebar-navigation-badge-min-width, 1.125rem);
+    min-height: var(--moduix-sidebar-navigation-badge-min-width, 1.125rem);
+    padding-inline: var(--moduix-sidebar-navigation-badge-padding-x, var(--moduix-spacing-0-5));
     border-radius: var(--moduix-radius-full);
     background-color: var(--moduix-sidebar-accent-bg, var(--moduix-color-accent));
     color: var(--moduix-sidebar-accent-color, var(--moduix-color-accent-foreground));
-    font-size: var(--moduix-text-xs);
+    font-size: var(--moduix-sidebar-navigation-badge-font-size, .625rem);
+    font-weight: var(--moduix-sidebar-navigation-badge-font-weight, var(--moduix-weight-medium));
     font-variant-numeric: tabular-nums;
     justify-content: center;
     align-items: center;
     line-height: 1;
     display: inline-flex;
     position: absolute;
-    inset-block-start: calc((var(--moduix-sidebar-menu-button-height, var(--moduix-size-md)) -
-          var(--moduix-sidebar-menu-badge-min-width, 1.5rem)) /
+    inset-block-start: calc((var(--moduix-sidebar-navigation-button-height, var(--moduix-size-md)) -
+          var(--moduix-sidebar-navigation-badge-min-width, 1.125rem)) /
+        2);
+    inset-inline-end: calc(var(--moduix-sidebar-navigation-button-padding-x, var(--moduix-spacing-2)) +
+        (var(--moduix-sidebar-navigation-action-size, var(--moduix-size-xs)) -
+          var(--moduix-sidebar-navigation-badge-min-width, 1.125rem)) /
+        2);
+  }
+
+  .menuItem-ktGhRk:has(.menuAction-_BDfHY) .menuButton-OAl6eQ {
+    padding-inline-end: calc(var(--moduix-sidebar-navigation-action-size, var(--moduix-size-xs)) +
+        var(--moduix-sidebar-navigation-button-padding-x, var(--moduix-spacing-2)) * 2);
+  }
+
+  .menuItem-ktGhRk:has(.menuBadge-GKf4u4) .menuButton-OAl6eQ {
+    padding-inline-end: calc(var(--moduix-sidebar-navigation-badge-min-width, 1.125rem) +
+        var(--moduix-sidebar-navigation-button-padding-x, var(--moduix-spacing-2)) * 2 +
+        (var(--moduix-sidebar-navigation-action-size, var(--moduix-size-xs)) -
+          var(--moduix-sidebar-navigation-badge-min-width, 1.125rem)) /
         2);
-    inset-inline-end: var(--moduix-sidebar-menu-button-padding-x, var(--moduix-spacing-2));
   }
 
-  :is(.menuItem-ktGhRk:has(.menuAction-_BDfHY) .menuButton-OAl6eQ, .menuItem-ktGhRk:has(.menuBadge-GKf4u4) .menuButton-OAl6eQ) {
-    padding-inline-end: calc(var(--moduix-sidebar-menu-action-size, var(--moduix-size-xs)) +
-        var(--moduix-sidebar-menu-button-padding-x, var(--moduix-spacing-2)) * 2);
+  .menuItem-ktGhRk:has(.menuAction-_BDfHY):has(.menuBadge-GKf4u4) .menuButton-OAl6eQ {
+    padding-inline-end: calc(var(--moduix-sidebar-navigation-action-size, var(--moduix-size-xs)) +
+          var(--moduix-sidebar-navigation-badge-min-width, 1.125rem) +
+          var(--moduix-sidebar-navigation-button-padding-x, var(--moduix-spacing-2)) * 3 +
+          (var(--moduix-sidebar-navigation-action-size, var(--moduix-size-xs)) -
+            var(--moduix-sidebar-navigation-badge-min-width, 1.125rem)) /
+          2);
+  }
+
+  .menuItem-ktGhRk:has(.menuAction-_BDfHY):has(.menuBadge-GKf4u4) .menuAction-_BDfHY {
+    inset-inline-end: calc(var(--moduix-sidebar-navigation-badge-min-width, 1.125rem) +
+          var(--moduix-sidebar-navigation-button-padding-x, var(--moduix-spacing-2)) * 2 +
+          (var(--moduix-sidebar-navigation-action-size, var(--moduix-size-xs)) -
+            var(--moduix-sidebar-navigation-badge-min-width, 1.125rem)) /
+          2);
   }
 
   :is(.panel-l44YAX[data-state="collapsed"] .menuItem-ktGhRk:has(.menuAction-_BDfHY) .menuButton-OAl6eQ, .panel-l44YAX[data-state="collapsed"] .menuItem-ktGhRk:has(.menuBadge-GKf4u4) .menuButton-OAl6eQ) {
@@ -451,19 +491,29 @@
   .menuSub-xn2r86 {
     box-sizing: border-box;
     width: auto;
-    border-inline-start: var(--moduix-sidebar-menu-sub-border-width, var(--moduix-border-width-sm))
+    border-inline-start: var(--moduix-sidebar-navigation-sub-border-width, var(--moduix-border-width-sm))
       solid var(--moduix-sidebar-border-color, var(--moduix-color-border));
-    margin-block-start: var(--moduix-sidebar-menu-sub-margin-y, var(--moduix-spacing-1));
-    margin-inline-start: var(--moduix-sidebar-menu-sub-margin-x, var(--moduix-spacing-4));
-    padding-inline-start: var(--moduix-sidebar-menu-sub-padding-x, var(--moduix-spacing-2));
+    margin-block-start: var(--moduix-sidebar-navigation-sub-margin-y, var(--moduix-spacing-1));
+    margin-inline-start: var(--moduix-sidebar-navigation-sub-margin-x, var(--moduix-spacing-4));
+    padding-inline-start: var(--moduix-sidebar-navigation-sub-padding-x, var(--moduix-spacing-2));
   }
 
   .menuSubButton-MjeEfX {
-    gap: var(--moduix-sidebar-menu-sub-button-gap, var(--moduix-spacing-2));
-    min-height: var(--moduix-sidebar-menu-sub-button-height, var(--moduix-size-sm));
-    padding-inline: var(--moduix-sidebar-menu-sub-button-padding-x, var(--moduix-spacing-2));
-    font-size: var(--moduix-sidebar-menu-sub-button-font-size, var(--moduix-text-sm));
-    line-height: var(--moduix-sidebar-menu-sub-button-line-height, var(--moduix-line-height-text-sm));
+    gap: var(--moduix-sidebar-navigation-sub-button-gap, var(--moduix-spacing-2));
+    min-height: var(--moduix-sidebar-navigation-sub-button-height, var(--moduix-size-sm));
+    padding-inline: var(--moduix-sidebar-navigation-sub-button-padding-x, var(--moduix-spacing-2));
+    font-size: var(--moduix-sidebar-navigation-sub-button-font-size, var(--moduix-text-sm));
+    line-height: var(--moduix-sidebar-navigation-sub-button-line-height, var(--moduix-line-height-text-sm));
+  }
+
+  @container (width <= 7rem) {
+    .groupAction-aoQPc4, .menuAction-_BDfHY, .menuBadge-GKf4u4, [data-slot="collapsible-indicator"], [data-slot="menu-indicator"], [data-slot="select-indicator"] {
+      display: none;
+    }
+
+    :is(.menuItem-ktGhRk:has(.menuAction-_BDfHY) .menuButton-OAl6eQ, .menuItem-ktGhRk:has(.menuBadge-GKf4u4) .menuButton-OAl6eQ) {
+      padding-inline-end: var(--moduix-sidebar-navigation-button-padding-x, var(--moduix-spacing-2));
+    }
   }
 
   .input-nqDU3w {

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

@@ -0,0 +1,23 @@
+import { Toc as TocPrimitive, type UseTocProps } from '@ark-ui/react/toc';
+import type { ComponentProps } from 'react';
+declare const useToc: ({ autoScroll, ...props }: UseTocProps) => import("@ark-ui/react/toc").UseTocReturn;
+declare const useTocContext: () => import("@ark-ui/react/toc").UseTocContext;
+type TocRailProps = ComponentProps<'svg'> & {
+    depth: number;
+    previousDepth?: number;
+    nextDepth?: number;
+};
+declare const Toc: import("react").ForwardRefExoticComponent<Omit<TocPrimitive.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
+    Root: import("react").ForwardRefExoticComponent<Omit<TocPrimitive.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    RootProvider: import("react").ForwardRefExoticComponent<Omit<TocPrimitive.RootProviderProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Context: (props: TocPrimitive.ContextProps) => import("react").ReactNode;
+    Content: import("react").ForwardRefExoticComponent<Omit<TocPrimitive.ContentProps & import("react").RefAttributes<HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>>;
+    Nav: import("react").ForwardRefExoticComponent<Omit<TocPrimitive.NavProps & import("react").RefAttributes<HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>>;
+    Title: import("react").ForwardRefExoticComponent<Omit<TocPrimitive.TitleProps & import("react").RefAttributes<HTMLHeadingElement>, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
+    List: import("react").ForwardRefExoticComponent<Omit<TocPrimitive.ListProps & import("react").RefAttributes<HTMLUListElement>, "ref"> & import("react").RefAttributes<HTMLUListElement>>;
+    Item: import("react").ForwardRefExoticComponent<Omit<TocPrimitive.ItemProps & import("react").RefAttributes<HTMLLIElement>, "ref"> & import("react").RefAttributes<HTMLLIElement>>;
+    Link: import("react").ForwardRefExoticComponent<Omit<TocPrimitive.LinkProps & import("react").RefAttributes<HTMLAnchorElement>, "ref"> & import("react").RefAttributes<HTMLAnchorElement>>;
+    Indicator: import("react").ForwardRefExoticComponent<Omit<TocPrimitive.IndicatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Rail: import("react").ForwardRefExoticComponent<Omit<TocRailProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+};
+export { Toc, useToc, useTocContext };

package/dist/components/toc/Toc.js

@@ -0,0 +1,144 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Toc, useToc, useTocContext } from "@ark-ui/react/toc";
+import { clsx } from "clsx";
+import { forwardRef } from "react";
+import { normalizeClassName } from "../../internal/normalizeClassName.js";
+import Toc_module from "./Toc.module.js";
+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 = ({ autoScroll = false, ...props })=>useToc({
+        autoScroll,
+        ...props
+    });
+const Toc_useTocContext = useTocContext;
+const Toc_TocRoot = /*#__PURE__*/ forwardRef(function({ autoScroll = false, className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Toc.Root, {
+        ref: ref,
+        autoScroll: autoScroll,
+        "data-slot": "toc-root",
+        className: clsx(Toc_module.root, normalizeClassName(className)),
+        ...props
+    });
+});
+const Toc_TocRootProvider = /*#__PURE__*/ forwardRef(function({ className, style, value, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Toc.RootProvider, {
+        ref: ref,
+        value: value,
+        "data-slot": "toc-root-provider",
+        className: clsx(Toc_module.root, normalizeClassName(className)),
+        style: {
+            ...value.getRootProps().style,
+            ...style
+        },
+        ...props
+    });
+});
+const Toc_TocContent = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Toc.Content, {
+        ref: ref,
+        "data-slot": "toc-content",
+        className: clsx(Toc_module.content, normalizeClassName(className)),
+        ...props
+    });
+});
+const Toc_TocNav = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Toc.Nav, {
+        ref: ref,
+        "data-slot": "toc-nav",
+        className: clsx(Toc_module.nav, normalizeClassName(className)),
+        ...props
+    });
+});
+const Toc_TocTitle = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Toc.Title, {
+        ref: ref,
+        "data-slot": "toc-title",
+        className: clsx(Toc_module.title, normalizeClassName(className)),
+        ...props
+    });
+});
+const Toc_TocList = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Toc.List, {
+        ref: ref,
+        "data-slot": "toc-list",
+        className: clsx(Toc_module.list, normalizeClassName(className)),
+        ...props
+    });
+});
+const Toc_TocItem = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Toc.Item, {
+        ref: ref,
+        "data-slot": "toc-item",
+        className: clsx(Toc_module.item, normalizeClassName(className)),
+        ...props
+    });
+});
+const Toc_TocLink = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Toc.Link, {
+        ref: ref,
+        "data-slot": "toc-link",
+        className: clsx(Toc_module.link, normalizeClassName(className)),
+        ...props
+    });
+});
+const Toc_TocIndicator = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Toc.Indicator, {
+        ref: ref,
+        "data-slot": "toc-indicator",
+        className: clsx(Toc_module.indicator, normalizeClassName(className)),
+        ...props
+    });
+});
+const Toc_TocRail = /*#__PURE__*/ forwardRef(function({ className, depth, nextDepth = depth, previousDepth = depth, style, ...props }, ref) {
+    const lineOffset = getRailOffset(depth);
+    const previousLineOffset = getRailOffset(previousDepth);
+    const nextLineOffset = getRailOffset(nextDepth);
+    const hasTurn = previousLineOffset !== lineOffset;
+    const width = Math.max(previousLineOffset, lineOffset, nextLineOffset) + 2;
+    return /*#__PURE__*/ jsxs("svg", {
+        ref: ref,
+        "aria-hidden": "true",
+        "data-slot": "toc-rail",
+        className: clsx(Toc_module.rail, normalizeClassName(className)),
+        style: {
+            width,
+            height: lineOffset === nextLineOffset ? `calc(100% + ${railBridge}px + var(--moduix-table-of-contents-list-gap, var(--moduix-spacing-0-5)))` : '100%',
+            ...style
+        },
+        ...props,
+        children: [
+            hasTurn && /*#__PURE__*/ jsx("path", {
+                d: `M ${previousLineOffset + 0.5} 0 C ${previousLineOffset + 0.5} 8 ${lineOffset + 0.5} 4 ${lineOffset + 0.5} ${2 * railBridge}`,
+                fill: "none",
+                vectorEffect: "non-scaling-stroke",
+                stroke: "currentColor"
+            }),
+            /*#__PURE__*/ jsx("line", {
+                x1: lineOffset + 0.5,
+                y1: hasTurn ? 2 * railBridge : railBridge,
+                x2: lineOffset + 0.5,
+                y2: "100%",
+                vectorEffect: "non-scaling-stroke",
+                stroke: "currentColor"
+            })
+        ]
+    });
+});
+const Toc_Toc = Object.assign(Toc_TocRoot, {
+    Root: Toc_TocRoot,
+    RootProvider: Toc_TocRootProvider,
+    Context: Toc.Context,
+    Content: Toc_TocContent,
+    Nav: Toc_TocNav,
+    Title: Toc_TocTitle,
+    List: Toc_TocList,
+    Item: Toc_TocItem,
+    Link: Toc_TocLink,
+    Indicator: Toc_TocIndicator,
+    Rail: Toc_TocRail
+});
+export { Toc_Toc as Toc, Toc_useToc as useToc, Toc_useTocContext as useTocContext };

package/dist/components/toc/Toc.module.js

@@ -0,0 +1,13 @@
+import "./Toc_module.css";
+const Toc_module = {
+    root: "root-VBggED",
+    content: "content-AHeziM",
+    nav: "nav-q0EDqs",
+    title: "title-RjjR4J",
+    list: "list-KZD4Qg",
+    indicator: "indicator-Zeit8l",
+    item: "item-xFlCTb",
+    link: "link-L4LQA0",
+    rail: "rail-BwE9eo"
+};
+export default Toc_module;