@moduix/react 1.1.0 → 2.0.0

package/dist/components/sidebar/Sidebar.css

@@ -1,5 +1,5 @@
 @layer ui.components {
-  .gCbFta_root {
+  ._3sukta_root {
     --splitter-width: var(--sidebar-width, 100%);
     --splitter-height: var(--sidebar-height, 100dvh);
     --splitter-min-height: var(--sidebar-min-height, 24rem);
@@ -11,38 +11,36 @@
     --splitter-panel-padding: 0;
     --splitter-panel-min-height: 0;
     --splitter-resize-trigger-line-color: var(--sidebar-border-color, var(--color-border));
-    --splitter-resize-trigger-line-color-hover: var(--sidebar-resize-color-hover, color-mix(in oklab, var(--color-border) 72%, var(--color-muted-foreground)));
-    --splitter-resize-trigger-line-color-focus: var(--sidebar-resize-color-focus, color-mix(in oklab, var(--color-border) 72%, var(--color-muted-foreground)));
-    --splitter-resize-trigger-line-color-dragging: var(--sidebar-resize-color-dragging, color-mix(in oklab, var(--color-border) 72%, var(--color-muted-foreground)));
     --splitter-resize-trigger-size: var(--sidebar-resize-hit-area, .75rem);
     isolation: isolate;
   }
 
-  .gCbFta_panel {
+  ._3sukta_panel {
     background-color: var(--sidebar-bg, var(--color-card));
     color: var(--sidebar-color, var(--color-card-foreground));
     transition: background-color var(--sidebar-transition, var(--transition-default)),
       color var(--sidebar-transition, var(--transition-default));
     flex-direction: column;
     display: flex;
+    position: relative;
     overflow: hidden;
 
     &[data-state="collapsed"] {
-      & .gCbFta_header, & .gCbFta_footer, & .gCbFta_group {
+      & ._3sukta_header, & ._3sukta_footer, & ._3sukta_group {
         padding-inline: var(--sidebar-collapsed-padding-x, var(--spacing-1));
       }
 
-      & .gCbFta_header, & .gCbFta_footer {
+      & ._3sukta_header, & ._3sukta_footer {
         justify-content: center;
       }
 
-      & .gCbFta_content {
+      & ._3sukta_content {
         scrollbar-gutter: auto;
         scrollbar-width: none;
-        overflow: hidden;
+        overflow: hidden auto;
       }
 
-      & .gCbFta_label, & .gCbFta_groupLabel {
+      & ._3sukta_label, & ._3sukta_groupLabel {
         white-space: nowrap;
         clip-path: inset(50%);
         border: 0;
@@ -54,11 +52,11 @@
         overflow: hidden;
       }
 
-      & .gCbFta_menuSub {
+      & ._3sukta_menuSub, & ._3sukta_groupAction, & ._3sukta_menuAction, & ._3sukta_menuBadge {
         display: none;
       }
 
-      & .gCbFta_menuButton {
+      & ._3sukta_menuButton {
         width: var(--sidebar-collapsed-item-size, var(--size-md));
         min-height: var(--sidebar-collapsed-item-size, var(--size-md));
         box-shadow: none;
@@ -85,7 +83,7 @@
     }
   }
 
-  .gCbFta_inset {
+  ._3sukta_inset {
     background-color: var(--sidebar-inset-bg, var(--color-background));
     min-width: 0;
     color: var(--sidebar-inset-color, var(--color-foreground));
@@ -93,11 +91,11 @@
     overflow: auto;
   }
 
-  .gCbFta_resizeTrigger {
+  ._3sukta_resizeTrigger {
     z-index: 2;
   }
 
-  .gCbFta_trigger {
+  ._3sukta_trigger {
     box-sizing: border-box;
     width: var(--sidebar-trigger-size, 1.75rem);
     min-width: var(--sidebar-trigger-size, 1.75rem);
@@ -141,7 +139,7 @@
     }
   }
 
-  .gCbFta_trigger {
+  ._3sukta_trigger {
     z-index: 4;
     margin-block-start: var(--sidebar-trigger-offset-y, var(--spacing-4));
     margin-inline: calc(var(--sidebar-trigger-size, 1.75rem) * -.5);
@@ -162,11 +160,11 @@
     }
   }
 
-  .gCbFta_label {
+  ._3sukta_label {
     min-width: 0;
   }
 
-  .gCbFta_header, .gCbFta_footer {
+  ._3sukta_header, ._3sukta_footer {
     align-items: center;
     gap: var(--sidebar-gap, var(--spacing-2));
     padding: var(--sidebar-header-footer-padding, var(--spacing-3));
@@ -174,17 +172,17 @@
     display: flex;
   }
 
-  .gCbFta_header {
+  ._3sukta_header {
     border-block-end: var(--sidebar-section-border-width, 0) solid
       var(--sidebar-border-color, var(--color-border));
   }
 
-  .gCbFta_footer {
+  ._3sukta_footer {
     border-block-start: var(--sidebar-section-border-width, 0) solid
       var(--sidebar-border-color, var(--color-border));
   }
 
-  .gCbFta_content {
+  ._3sukta_content {
     overscroll-behavior: contain;
     scrollbar-gutter: stable;
     flex-direction: column;
@@ -194,15 +192,14 @@
     overflow: auto;
   }
 
-  .gCbFta_group {
+  ._3sukta_group {
     gap: var(--sidebar-group-gap, var(--spacing-1));
     padding: var(--sidebar-group-padding, var(--spacing-3));
     flex-direction: column;
     display: flex;
-    position: relative;
   }
 
-  .gCbFta_groupLabel {
+  ._3sukta_groupLabel {
     min-width: 0;
     padding-inline: var(--sidebar-group-label-padding-x, var(--spacing-2));
     color: var(--sidebar-muted-color, var(--color-muted-foreground));
@@ -213,7 +210,67 @@
     margin: 0;
   }
 
-  .gCbFta_menu, .gCbFta_menuSub {
+  ._3sukta_groupAction {
+    width: var(--sidebar-group-action-size, 1.5rem);
+    height: var(--sidebar-group-action-size, 1.5rem);
+    border-radius: var(--sidebar-menu-button-radius, var(--radius-md));
+    color: var(--sidebar-muted-color, var(--color-muted-foreground));
+    appearance: none;
+    cursor: pointer;
+    transition: background-color var(--sidebar-transition, var(--transition-default)),
+      color var(--sidebar-transition, var(--transition-default));
+    background-color: #0000;
+    border: 0;
+    justify-content: center;
+    align-items: center;
+    padding: 0;
+    display: inline-flex;
+
+    & > svg {
+      width: var(--sidebar-icon-size, 1rem);
+      height: var(--sidebar-icon-size, 1rem);
+    }
+
+    &:focus-visible {
+      outline: var(--sidebar-focus-ring-width, var(--border-width-md)) solid
+        var(--sidebar-focus-ring-color, var(--color-ring));
+      outline-offset: var(--sidebar-focus-ring-offset, var(--spacing-1));
+    }
+
+    @media (hover: hover) {
+      &:hover {
+        background-color: var(--sidebar-accent-bg, var(--color-accent));
+        color: var(--sidebar-accent-color, var(--color-accent-foreground));
+      }
+    }
+  }
+
+  ._3sukta_group:has(._3sukta_groupAction) {
+    column-gap: var(--sidebar-gap, var(--spacing-2));
+    row-gap: var(--sidebar-group-gap, var(--spacing-1));
+    grid-template-columns: minmax(0, 1fr) auto;
+    display: grid;
+  }
+
+  ._3sukta_group:has(._3sukta_groupAction) ._3sukta_groupLabel {
+    grid-column: 1;
+  }
+
+  ._3sukta_group:has(._3sukta_groupAction) ._3sukta_groupAction {
+    grid-column: 2;
+    align-self: center;
+  }
+
+  ._3sukta_groupContent {
+    width: 100%;
+    min-width: 0;
+  }
+
+  ._3sukta_group:has(._3sukta_groupAction) ._3sukta_groupContent {
+    grid-column: 1 / -1;
+  }
+
+  ._3sukta_menu, ._3sukta_menuSub {
     gap: var(--sidebar-menu-gap, var(--spacing-1));
     flex-direction: column;
     width: 100%;
@@ -224,12 +281,12 @@
     display: flex;
   }
 
-  .gCbFta_menuItem, .gCbFta_menuSubItem {
+  ._3sukta_menuItem, ._3sukta_menuSubItem {
     min-width: 0;
     position: relative;
   }
 
-  .gCbFta_menuButton, .gCbFta_menuSubButton {
+  ._3sukta_menuButton, ._3sukta_menuSubButton {
     box-sizing: border-box;
     border: var(--sidebar-menu-button-border-width, 0) solid transparent;
     border-radius: var(--sidebar-menu-button-radius, var(--radius-md));
@@ -291,7 +348,7 @@
     }
   }
 
-  .gCbFta_menuButton {
+  ._3sukta_menuButton {
     gap: var(--sidebar-menu-button-gap, var(--spacing-2));
     min-height: var(--sidebar-menu-button-height, var(--size-md));
     padding-block: var(--sidebar-menu-button-padding-y, var(--spacing-1));
@@ -313,11 +370,83 @@
     }
   }
 
-  .gCbFta_panel .gCbFta_menuButton {
+  ._3sukta_panel ._3sukta_menuButton {
     justify-content: flex-start;
   }
 
-  .gCbFta_menuSub {
+  ._3sukta_menuAction {
+    z-index: 1;
+    width: var(--sidebar-menu-action-size, 1.5rem);
+    height: var(--sidebar-menu-action-size, 1.5rem);
+    border-radius: var(--sidebar-menu-button-radius, var(--radius-md));
+    color: var(--sidebar-muted-color, var(--color-muted-foreground));
+    appearance: none;
+    cursor: pointer;
+    transition: background-color var(--sidebar-transition, var(--transition-default)),
+      color var(--sidebar-transition, var(--transition-default));
+    background-color: #0000;
+    border: 0;
+    justify-content: center;
+    align-items: center;
+    padding: 0;
+    display: inline-flex;
+    position: absolute;
+    inset-block-start: calc((var(--sidebar-menu-button-height, var(--size-md)) - var(--sidebar-menu-action-size, 1.5rem)) /
+        2);
+    inset-inline-end: var(--sidebar-menu-button-padding-x, var(--spacing-2));
+
+    & > svg {
+      width: var(--sidebar-icon-size, 1rem);
+      height: var(--sidebar-icon-size, 1rem);
+    }
+
+    &:focus-visible {
+      outline: var(--sidebar-focus-ring-width, var(--border-width-md)) solid
+        var(--sidebar-focus-ring-color, var(--color-ring));
+      outline-offset: var(--sidebar-focus-ring-offset, var(--spacing-1));
+    }
+
+    @media (hover: hover) {
+      &:hover {
+        background-color: var(--sidebar-accent-bg, var(--color-accent));
+        color: var(--sidebar-accent-color, var(--color-accent-foreground));
+      }
+    }
+  }
+
+  ._3sukta_menuBadge {
+    z-index: 1;
+    min-width: var(--sidebar-menu-badge-min-width, 1.5rem);
+    min-height: var(--sidebar-menu-badge-min-width, 1.5rem);
+    padding-inline: var(--sidebar-menu-badge-padding-x, var(--spacing-1));
+    border-radius: var(--radius-full);
+    background-color: var(--sidebar-accent-bg, var(--color-accent));
+    color: var(--sidebar-accent-color, var(--color-accent-foreground));
+    font-size: var(--text-xs);
+    font-variant-numeric: tabular-nums;
+    justify-content: center;
+    align-items: center;
+    line-height: 1;
+    display: inline-flex;
+    position: absolute;
+    inset-block-start: calc((var(--sidebar-menu-button-height, var(--size-md)) -
+          var(--sidebar-menu-badge-min-width, 1.5rem)) /
+        2);
+    inset-inline-end: var(--sidebar-menu-button-padding-x, var(--spacing-2));
+  }
+
+  ._3sukta_menuItem:has(._3sukta_menuAction) ._3sukta_menuButton, ._3sukta_menuItem:has(._3sukta_menuBadge) ._3sukta_menuButton {
+    padding-inline-end: calc(var(--sidebar-menu-action-size, 1.5rem) +
+        var(--sidebar-menu-button-padding-x, var(--spacing-2)) * 2);
+  }
+
+  ._3sukta_panel[data-state="collapsed"] ._3sukta_menuItem:has(._3sukta_menuAction) ._3sukta_menuButton, ._3sukta_panel[data-state="collapsed"] ._3sukta_menuItem:has(._3sukta_menuBadge) ._3sukta_menuButton {
+    padding-inline-end: 0;
+  }
+
+  ._3sukta_menuSub {
+    box-sizing: border-box;
+    width: auto;
     border-inline-start: var(--sidebar-menu-sub-border-width, var(--border-width-sm)) solid
       var(--sidebar-border-color, var(--color-border));
     margin-block-start: var(--sidebar-menu-sub-margin-y, var(--spacing-1));
@@ -325,7 +454,7 @@
     padding-inline-start: var(--sidebar-menu-sub-padding-x, var(--spacing-2));
   }
 
-  .gCbFta_menuSubButton {
+  ._3sukta_menuSubButton {
     gap: var(--sidebar-menu-sub-button-gap, var(--spacing-2));
     min-height: var(--sidebar-menu-sub-button-height, var(--size-sm));
     padding-inline: var(--sidebar-menu-sub-button-padding-x, var(--spacing-2));
@@ -333,8 +462,16 @@
     line-height: var(--sidebar-menu-sub-button-line-height, var(--line-height-text-sm));
   }
 
+  ._3sukta_input {
+    width: 100%;
+  }
+
+  ._3sukta_separator {
+    --separator-color: var(--sidebar-border-color, var(--color-border));
+  }
+
   @media (prefers-reduced-motion: reduce) {
-    .gCbFta_panel, .gCbFta_trigger, .gCbFta_menuButton, .gCbFta_menuSubButton {
+    ._3sukta_panel, ._3sukta_trigger, ._3sukta_groupAction, ._3sukta_menuButton, ._3sukta_menuAction, ._3sukta_menuSubButton {
       transition: none;
     }
   }

package/dist/components/sidebar/Sidebar.d.ts

@@ -1,4 +1,5 @@
 import { Splitter } from "../splitter/Splitter.js";
+import { Tooltip } from "../tooltip/Tooltip.js";
 import { ComponentProps } from "react";
 
 //#region src/components/sidebar/Sidebar.d.ts
@@ -27,17 +28,42 @@ declare const Sidebar: import("react").ForwardRefExoticComponent<Omit<SidebarRoo
   ResizeTrigger: import("react").ForwardRefExoticComponent<Omit<SidebarResizeTriggerProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
   Trigger: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLButtonElement>>;
   Label: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLSpanElement>>;
+  Input: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("@ark-ui/react/field").FieldInputProps & import("react").RefAttributes<HTMLInputElement>, "size"> & {
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
+    htmlSize?: ComponentProps<"input">["size"];
+  }, "ref"> & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
   Header: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLElement>>;
   Content: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
   Footer: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLElement>>;
+  Separator: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
+    orientation?: "horizontal" | "vertical";
+    size?: "xs" | "sm" | "md" | "lg";
+    variant?: "solid" | "dashed" | "dotted";
+  } & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
   Group: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLElement>>;
   GroupLabel: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLHeadingElement>>;
+  GroupAction: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLButtonElement>>;
+  GroupContent: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
   Menu: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLUListElement>>;
   MenuItem: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLLIElement>>;
+  Tooltip: ({
+    children,
+    content,
+    openDelay,
+    closeDelay,
+    positioning,
+    ...props
+  }: Omit<ComponentProps<typeof Tooltip>, "children" | "disabled" | "positioning"> & {
+    children: ComponentProps<typeof Tooltip.Trigger>["children"];
+    content: ComponentProps<typeof Tooltip.Content>["children"];
+    positioning?: ComponentProps<typeof Tooltip>["positioning"];
+  }) => import("react").JSX.Element;
   MenuButton: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
     active?: boolean;
     size?: "sm" | "md" | "lg";
   } & import("react").RefAttributes<HTMLButtonElement>>;
+  MenuAction: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLButtonElement>>;
+  MenuBadge: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
   MenuSub: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLUListElement>>;
   MenuSubItem: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLLIElement>>;
   MenuSubButton: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {

package/dist/components/sidebar/Sidebar.js

@@ -1,12 +1,14 @@
-import { ChevronLeftIcon } from "../../lib/moduix/icons/ui/Icons.js";
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
-import { Splitter as Splitter$1 } from "../splitter/Splitter.js";
+import { ChevronLeftIcon } from "../../lib/moduix/icons/ui/Icons.js";
+import { Input } from "../input/Input.js";
+import { Separator } from "../separator/Separator.js";
+import { Splitter, useSplitterContext } from "../splitter/Splitter.js";
+import { Tooltip } from "../tooltip/Tooltip.js";
 import Sidebar_module_default from "./Sidebar.module.js";
-import { jsx } from "react/jsx-runtime";
 import { ark } from "@ark-ui/react/factory";
 import { clsx } from "clsx";
 import { createContext, forwardRef, useContext } from "react";
-import { useSplitterContext } from "@ark-ui/react/splitter";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/sidebar/Sidebar.tsx
 const sidebarPanel = {
 	id: "sidebar",
@@ -30,6 +32,12 @@ function getDefaultSidebarSize(side) {
 	defaultSize[1] = "16rem";
 	return defaultSize;
 }
+function getDefaultPanels(side, panelId) {
+	return defaultPanelsBySide[side].map((panel) => panel.id === "sidebar" ? {
+		...panel,
+		id: panelId
+	} : panel);
+}
 function toggleSidebarPanel(splitter, panelId) {
 	if (splitter.isPanelCollapsed(panelId)) {
 		splitter.expandPanel(panelId);
@@ -43,10 +51,10 @@ const SidebarRoot = forwardRef(function SidebarRoot({ className, panels, default
 			panelId,
 			side
 		},
-		children: /* @__PURE__ */ jsx(Splitter$1.Root, {
+		children: /* @__PURE__ */ jsx(Splitter.Root, {
 			...props,
 			ref,
-			panels: panels ?? defaultPanelsBySide[side],
+			panels: panels ?? getDefaultPanels(side, panelId),
 			defaultSize: defaultSize ?? getDefaultSidebarSize(side),
 			orientation: "horizontal",
 			"data-side": side,
@@ -71,7 +79,7 @@ const SidebarPanel = forwardRef(function SidebarPanel({ className, id, ...props
 	const splitter = useSplitterContext();
 	const panelId = id ?? config.panelId;
 	const collapsed = splitter.isPanelCollapsed(panelId);
-	return /* @__PURE__ */ jsx(Splitter$1.Panel, {
+	return /* @__PURE__ */ jsx(Splitter.Panel, {
 		...props,
 		ref,
 		id: panelId,
@@ -83,7 +91,7 @@ const SidebarPanel = forwardRef(function SidebarPanel({ className, id, ...props
 });
 const SidebarInset = forwardRef(function SidebarInset({ className, id = "content", ...props }, ref) {
 	const { side } = useContext(SidebarConfigContext);
-	return /* @__PURE__ */ jsx(Splitter$1.Panel, {
+	return /* @__PURE__ */ jsx(Splitter.Panel, {
 		ref,
 		id,
 		"data-side": side,
@@ -92,17 +100,18 @@ const SidebarInset = forwardRef(function SidebarInset({ className, id = "content
 		...props
 	});
 });
-const SidebarResizeTrigger = forwardRef(function SidebarResizeTrigger({ className, id, "aria-label": ariaLabel = "Resize sidebar", ...props }, ref) {
-	const { side } = useContext(SidebarConfigContext);
-	const resolvedId = id ?? (side === "left" ? "sidebar:content" : "content:sidebar");
-	return /* @__PURE__ */ jsx(Splitter$1.ResizeTrigger, {
+const SidebarResizeTrigger = forwardRef(function SidebarResizeTrigger({ children, className, id, "aria-label": ariaLabel = "Resize sidebar", ...props }, ref) {
+	const { panelId, side } = useContext(SidebarConfigContext);
+	const resolvedId = id ?? (side === "left" ? `${panelId}:content` : `content:${panelId}`);
+	return /* @__PURE__ */ jsx(Splitter.ResizeTrigger, {
 		...props,
 		ref,
 		id: resolvedId,
 		"aria-label": ariaLabel,
 		"data-side": side,
 		"data-slot": "sidebar-resize-trigger",
-		className: clsx(Sidebar_module_default.resizeTrigger, normalizeClassName(className))
+		className: clsx(Sidebar_module_default.resizeTrigger, normalizeClassName(className)),
+		children: children === void 0 ? null : children
 	});
 });
 const SidebarTrigger = forwardRef(function SidebarTrigger({ className, children, onClick, type = "button", "aria-label": ariaLabel = "Toggle sidebar", ...props }, ref) {
@@ -190,6 +199,27 @@ const SidebarGroupLabel = forwardRef(function SidebarGroupLabel({ className, ...
 		...props
 	});
 });
+const SidebarGroupAction = forwardRef(function SidebarGroupAction({ className, type = "button", ...props }, ref) {
+	return /* @__PURE__ */ jsx(ark.button, {
+		ref,
+		type,
+		"data-scope": "sidebar",
+		"data-part": "group-action",
+		"data-slot": "sidebar-group-action",
+		className: clsx(Sidebar_module_default.groupAction, normalizeClassName(className)),
+		...props
+	});
+});
+const SidebarGroupContent = forwardRef(function SidebarGroupContent({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ark.div, {
+		ref,
+		"data-scope": "sidebar",
+		"data-part": "group-content",
+		"data-slot": "sidebar-group-content",
+		className: clsx(Sidebar_module_default.groupContent, normalizeClassName(className)),
+		...props
+	});
+});
 const SidebarMenu = forwardRef(function SidebarMenu({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(ark.ul, {
 		ref,
@@ -224,6 +254,27 @@ const SidebarMenuButton = forwardRef(function SidebarMenuButton({ active = false
 		...props
 	});
 });
+const SidebarMenuAction = forwardRef(function SidebarMenuAction({ className, type = "button", ...props }, ref) {
+	return /* @__PURE__ */ jsx(ark.button, {
+		ref,
+		type,
+		"data-scope": "sidebar",
+		"data-part": "menu-action",
+		"data-slot": "sidebar-menu-action",
+		className: clsx(Sidebar_module_default.menuAction, normalizeClassName(className)),
+		...props
+	});
+});
+const SidebarMenuBadge = forwardRef(function SidebarMenuBadge({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ark.div, {
+		ref,
+		"data-scope": "sidebar",
+		"data-part": "menu-badge",
+		"data-slot": "sidebar-menu-badge",
+		className: clsx(Sidebar_module_default.menuBadge, normalizeClassName(className)),
+		...props
+	});
+});
 const SidebarMenuSub = forwardRef(function SidebarMenuSub({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(ark.ul, {
 		ref,
@@ -256,6 +307,40 @@ const SidebarMenuSubButton = forwardRef(function SidebarMenuSubButton({ active =
 		...props
 	});
 });
+const SidebarTooltip = function SidebarTooltip({ children, content, openDelay = 200, closeDelay = 0, positioning, ...props }) {
+	const { collapsed, side } = useSidebar();
+	return /* @__PURE__ */ jsxs(Tooltip, {
+		...props,
+		openDelay,
+		closeDelay,
+		disabled: !collapsed,
+		positioning: {
+			placement: side === "left" ? "right" : "left",
+			gutter: 8,
+			...positioning
+		},
+		children: [/* @__PURE__ */ jsx(Tooltip.Trigger, {
+			asChild: true,
+			children
+		}), /* @__PURE__ */ jsx(Tooltip.Positioner, { children: /* @__PURE__ */ jsx(Tooltip.Content, { children: content }) })]
+	});
+};
+const SidebarInput = forwardRef(function SidebarInput({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Input.Root, {
+		ref,
+		"data-slot": "sidebar-input",
+		className: clsx(Sidebar_module_default.input, normalizeClassName(className)),
+		...props
+	});
+});
+const SidebarSeparator = forwardRef(function SidebarSeparator({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Separator.Root, {
+		ref,
+		"data-slot": "sidebar-separator",
+		className: clsx(Sidebar_module_default.separator, normalizeClassName(className)),
+		...props
+	});
+});
 const Sidebar = Object.assign(SidebarRoot, {
 	Root: SidebarRoot,
 	Panel: SidebarPanel,
@@ -263,14 +348,21 @@ const Sidebar = Object.assign(SidebarRoot, {
 	ResizeTrigger: SidebarResizeTrigger,
 	Trigger: SidebarTrigger,
 	Label: SidebarLabel,
+	Input: SidebarInput,
 	Header: SidebarHeader,
 	Content: SidebarContent,
 	Footer: SidebarFooter,
+	Separator: SidebarSeparator,
 	Group: SidebarGroup,
 	GroupLabel: SidebarGroupLabel,
+	GroupAction: SidebarGroupAction,
+	GroupContent: SidebarGroupContent,
 	Menu: SidebarMenu,
 	MenuItem: SidebarMenuItem,
+	Tooltip: SidebarTooltip,
 	MenuButton: SidebarMenuButton,
+	MenuAction: SidebarMenuAction,
+	MenuBadge: SidebarMenuBadge,
 	MenuSub: SidebarMenuSub,
 	MenuSubItem: SidebarMenuSubItem,
 	MenuSubButton: SidebarMenuSubButton

package/dist/components/sidebar/Sidebar.module.js

@@ -1,23 +1,29 @@
 import './Sidebar.css';
 //#region src/components/sidebar/Sidebar.module.css
 var Sidebar_module_default = {
-	"content": "gCbFta_content",
-	"footer": "gCbFta_footer",
-	"group": "gCbFta_group",
-	"groupLabel": "gCbFta_groupLabel",
-	"header": "gCbFta_header",
-	"inset": "gCbFta_inset",
-	"label": "gCbFta_label",
-	"menu": "gCbFta_menu",
-	"menuButton": "gCbFta_menuButton",
-	"menuItem": "gCbFta_menuItem",
-	"menuSub": "gCbFta_menuSub",
-	"menuSubButton": "gCbFta_menuSubButton",
-	"menuSubItem": "gCbFta_menuSubItem",
-	"panel": "gCbFta_panel",
-	"resizeTrigger": "gCbFta_resizeTrigger",
-	"root": "gCbFta_root",
-	"trigger": "gCbFta_trigger"
+	"content": "_3sukta_content",
+	"footer": "_3sukta_footer",
+	"group": "_3sukta_group",
+	"groupAction": "_3sukta_groupAction",
+	"groupContent": "_3sukta_groupContent",
+	"groupLabel": "_3sukta_groupLabel",
+	"header": "_3sukta_header",
+	"input": "_3sukta_input",
+	"inset": "_3sukta_inset",
+	"label": "_3sukta_label",
+	"menu": "_3sukta_menu",
+	"menuAction": "_3sukta_menuAction",
+	"menuBadge": "_3sukta_menuBadge",
+	"menuButton": "_3sukta_menuButton",
+	"menuItem": "_3sukta_menuItem",
+	"menuSub": "_3sukta_menuSub",
+	"menuSubButton": "_3sukta_menuSubButton",
+	"menuSubItem": "_3sukta_menuSubItem",
+	"panel": "_3sukta_panel",
+	"resizeTrigger": "_3sukta_resizeTrigger",
+	"root": "_3sukta_root",
+	"separator": "_3sukta_separator",
+	"trigger": "_3sukta_trigger"
 };
 //#endregion
 export { Sidebar_module_default as default };