@moduix/react 1.1.1 → 2.1.0

package/dist/components/select/Select.d.ts

@@ -1,10 +1,19 @@
 import { OverlayPortalProps } from "../../lib/moduix/overlayPortal.js";
-import { ComponentProps } from "react";
+import { ComponentProps, ReactNode } from "react";
 import { Select, SelectRootComponent, SelectRootProviderComponent } from "@ark-ui/react/select";
 
 //#region src/components/select/Select.d.ts
-type SelectRootComponent$1 = SelectRootComponent<OverlayPortalProps>;
-type SelectRootProviderComponent$1 = SelectRootProviderComponent<OverlayPortalProps>;
+type SelectNativeFormControl = 'select' | 'input';
+type SelectRootOwnProps = OverlayPortalProps & {
+  nativeFormControl?: SelectNativeFormControl;
+};
+type SelectRootComponent$1 = SelectRootComponent<SelectRootOwnProps>;
+type SelectRootProviderComponent$1 = SelectRootProviderComponent<SelectRootOwnProps>;
+type SelectFieldProps = Omit<ComponentProps<typeof Select.Control>, 'asChild' | 'children'> & {
+  clearLabel?: string;
+  indicator?: ReactNode;
+  placeholder?: ComponentProps<typeof Select.ValueText>['placeholder'];
+};
 declare function SelectIndicators({
   className,
   ...props
@@ -24,8 +33,14 @@ declare function SelectItemTextLabel({
 declare const Select$1: SelectRootComponent$1 & {
   Root: SelectRootComponent$1;
   RootProvider: SelectRootProviderComponent$1;
+  Context: <T extends unknown>(props: Select.ContextProps<T>) => ReactNode;
+  ItemContext: (props: Select.ItemContextProps) => ReactNode;
+  useSelect: <T extends unknown>(props: import("@ark-ui/react/select").UseSelectProps<T>) => import("@ark-ui/react/select").UseSelectReturn<T>;
+  useSelectContext: () => import("@ark-ui/react/select").UseSelectContext<any>;
+  useSelectItemContext: () => import("@ark-ui/react/select").UseSelectItemContext;
   Label: import("react").ForwardRefExoticComponent<Omit<Select.LabelProps & import("react").RefAttributes<HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
   Control: import("react").ForwardRefExoticComponent<Omit<Select.ControlProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Field: import("react").ForwardRefExoticComponent<Omit<SelectFieldProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Trigger: import("react").ForwardRefExoticComponent<Omit<Select.TriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
   ValueText: import("react").ForwardRefExoticComponent<Omit<Select.ValueTextProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
   ClearTrigger: import("react").ForwardRefExoticComponent<Omit<Select.ClearTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
@@ -39,7 +54,6 @@ declare const Select$1: SelectRootComponent$1 & {
   Item: import("react").ForwardRefExoticComponent<Omit<Select.ItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   ItemText: import("react").ForwardRefExoticComponent<Omit<Select.ItemTextProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   ItemIndicator: import("react").ForwardRefExoticComponent<Omit<Select.ItemIndicatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  HiddenSelect: import("react").ForwardRefExoticComponent<Omit<Select.HiddenSelectProps & import("react").RefAttributes<HTMLSelectElement>, "ref"> & import("react").RefAttributes<HTMLSelectElement>>;
   ItemTextContent: typeof SelectItemTextContent;
   ItemTextIcon: typeof SelectItemTextIcon;
   ItemTextLabel: typeof SelectItemTextLabel;

package/dist/components/select/Select.js

@@ -1,13 +1,14 @@
-import { CheckIcon, ChevronUpDownIcon, CloseIcon } from "../../lib/moduix/icons/ui/Icons.js";
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import { CheckIcon, ChevronUpDownIcon } from "../../lib/moduix/icons/ui/Icons.js";
+import { CloseButton } from "../close-button/CloseButton.js";
 import { OverlayPortal, OverlayPortalProvider } from "../../lib/moduix/overlayPortal.js";
 import Select_module_default from "./Select.module.js";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { forwardRef } from "react";
-import { Select } from "@ark-ui/react/select";
+import { Children, cloneElement, forwardRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Select, useSelect, useSelectContext, useSelectItemContext } from "@ark-ui/react/select";
 //#region src/components/select/Select.tsx
-const SelectRoot = forwardRef(function SelectRoot({ className, portalled, portalRef, ...props }, ref) {
+const SelectRoot = forwardRef(function SelectRoot({ asChild, children, className, nativeFormControl = "select", portalled, portalRef, ...props }, ref) {
 	return /* @__PURE__ */ jsx(OverlayPortalProvider, {
 		portalled,
 		portalRef,
@@ -15,11 +16,13 @@ const SelectRoot = forwardRef(function SelectRoot({ className, portalled, portal
 			ref,
 			"data-slot": "select-root",
 			className: clsx(Select_module_default.root, normalizeClassName(className)),
-			...props
+			asChild,
+			...props,
+			children: withNativeFormControl(children, asChild, nativeFormControl)
 		})
 	});
 });
-const SelectRootProvider = forwardRef(function SelectRootProvider({ className, portalled, portalRef, ...props }, ref) {
+const SelectRootProvider = forwardRef(function SelectRootProvider({ asChild, children, className, nativeFormControl = "select", portalled, portalRef, ...props }, ref) {
 	return /* @__PURE__ */ jsx(OverlayPortalProvider, {
 		portalled,
 		portalRef,
@@ -27,7 +30,9 @@ const SelectRootProvider = forwardRef(function SelectRootProvider({ className, p
 			ref,
 			"data-slot": "select-root-provider",
 			className: clsx(Select_module_default.root, normalizeClassName(className)),
-			...props
+			asChild,
+			...props,
+			children: withNativeFormControl(children, asChild, nativeFormControl)
 		})
 	});
 });
@@ -64,13 +69,29 @@ const SelectValueText = forwardRef(function SelectValueText({ className, ...prop
 		...props
 	});
 });
-const SelectClearTrigger = forwardRef(function SelectClearTrigger({ className, children, ...props }, ref) {
+const SelectClearTrigger = forwardRef(function SelectClearTrigger({ asChild, className, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }, ref) {
+	const triggerClassName = clsx(Select_module_default.clearTrigger, normalizeClassName(className));
+	if (asChild) return /* @__PURE__ */ jsx(Select.ClearTrigger, {
+		ref,
+		asChild: true,
+		"data-slot": "select-clear-trigger",
+		className: triggerClassName,
+		"aria-label": ariaLabel,
+		"aria-labelledby": ariaLabelledBy,
+		...props,
+		children
+	});
 	return /* @__PURE__ */ jsx(Select.ClearTrigger, {
 		ref,
+		asChild: true,
 		"data-slot": "select-clear-trigger",
-		className: clsx(Select_module_default.clearTrigger, normalizeClassName(className)),
+		className: triggerClassName,
 		...props,
-		children: children ?? /* @__PURE__ */ jsx(CloseIcon, {})
+		children: /* @__PURE__ */ jsx(CloseButton.Root, {
+			"aria-label": ariaLabel ?? (ariaLabelledBy == null ? "Clear selection" : void 0),
+			"aria-labelledby": ariaLabelledBy,
+			children
+		})
 	});
 });
 const SelectIndicator = forwardRef(function SelectIndicator({ className, children, ...props }, ref) {
@@ -89,6 +110,13 @@ function SelectIndicators({ className, ...props }) {
 		...props
 	});
 }
+const SelectField = forwardRef(function SelectField({ clearLabel, indicator, placeholder, ...props }, ref) {
+	return /* @__PURE__ */ jsxs(SelectControl, {
+		ref,
+		...props,
+		children: [/* @__PURE__ */ jsxs(SelectTrigger, { children: [/* @__PURE__ */ jsx(SelectValueText, { placeholder }), /* @__PURE__ */ jsx(SelectIndicator, { children: indicator })] }), clearLabel && /* @__PURE__ */ jsx(SelectClearTrigger, { "aria-label": clearLabel })]
+	});
+});
 const SelectPositioner = forwardRef(function SelectPositioner({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(OverlayPortal, { children: /* @__PURE__ */ jsx(Select.Positioner, {
 		ref,
@@ -154,14 +182,26 @@ const SelectItemIndicator = forwardRef(function SelectItemIndicator({ className,
 		children: children ?? /* @__PURE__ */ jsx(CheckIcon, {})
 	});
 });
-const SelectHiddenSelect = forwardRef(function SelectHiddenSelect({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Select.HiddenSelect, {
-		ref,
-		"data-slot": "select-hidden-select",
-		className: normalizeClassName(className),
-		...props
-	});
-});
+function withNativeFormControl(children, asChild, nativeFormControl) {
+	const formControl = /* @__PURE__ */ jsx(SelectFormControl, { nativeFormControl });
+	if (!asChild) return /* @__PURE__ */ jsxs(Fragment$1, { children: [children, formControl] });
+	const child = Children.only(children);
+	return cloneElement(child, {}, child.props.children, formControl);
+}
+function SelectFormControl({ nativeFormControl }) {
+	const select = useSelectContext();
+	if (nativeFormControl === "select") return /* @__PURE__ */ jsx(Select.HiddenSelect, { "data-slot": "select-hidden-select" });
+	const hiddenSelectProps = select.getHiddenSelectProps();
+	return /* @__PURE__ */ jsx(Fragment$1, { children: select.value.map((value) => /* @__PURE__ */ jsx("input", {
+		type: "hidden",
+		"data-slot": "select-hidden-input",
+		name: hiddenSelectProps.name,
+		form: hiddenSelectProps.form,
+		autoComplete: hiddenSelectProps.autoComplete,
+		disabled: hiddenSelectProps.disabled,
+		value
+	}, value)) });
+}
 function SelectItemTextContent({ className, ...props }) {
 	return /* @__PURE__ */ jsx("span", {
 		"data-slot": "select-item-text-content",
@@ -186,8 +226,14 @@ function SelectItemTextLabel({ className, ...props }) {
 const Select$1 = Object.assign(SelectRoot, {
 	Root: SelectRoot,
 	RootProvider: SelectRootProvider,
+	Context: Select.Context,
+	ItemContext: Select.ItemContext,
+	useSelect,
+	useSelectContext,
+	useSelectItemContext,
 	Label: SelectLabel,
 	Control: SelectControl,
+	Field: SelectField,
 	Trigger: SelectTrigger,
 	ValueText: SelectValueText,
 	ClearTrigger: SelectClearTrigger,
@@ -201,7 +247,6 @@ const Select$1 = Object.assign(SelectRoot, {
 	Item: SelectItem,
 	ItemText: SelectItemText,
 	ItemIndicator: SelectItemIndicator,
-	HiddenSelect: SelectHiddenSelect,
 	ItemTextContent: SelectItemTextContent,
 	ItemTextIcon: SelectItemTextIcon,
 	ItemTextLabel: SelectItemTextLabel

package/dist/components/separator/Separator.css

@@ -7,19 +7,19 @@
     display: block;
 
     &[data-size="xs"] {
-      --separator-size-thickness: .5px;
+      --separator-size-thickness: var(--separator-thickness-xs, .5px);
     }
 
     &[data-size="sm"] {
-      --separator-size-thickness: 1px;
+      --separator-size-thickness: var(--separator-thickness-sm, var(--border-width-sm));
     }
 
     &[data-size="md"] {
-      --separator-size-thickness: 2px;
+      --separator-size-thickness: var(--separator-thickness-md, var(--border-width-md));
     }
 
     &[data-size="lg"] {
-      --separator-size-thickness: 3px;
+      --separator-size-thickness: var(--separator-thickness-lg, 3px);
     }
 
     &[data-variant="dashed"] {
@@ -32,14 +32,14 @@
 
     &[data-orientation="horizontal"] {
       width: var(--separator-length-horizontal, 100%);
-      border-block-start-width: var(--separator-thickness, var(--separator-size-thickness, 1px));
+      border-block-start-width: var(--separator-thickness, var(--separator-size-thickness, var(--border-width-sm)));
       height: 0;
     }
 
     &[data-orientation="vertical"] {
       width: 0;
       height: var(--separator-length-vertical, 1em);
-      border-inline-start-width: var(--separator-thickness, var(--separator-size-thickness, 1px));
+      border-inline-start-width: var(--separator-thickness, var(--separator-size-thickness, var(--border-width-sm)));
     }
   }
 }

package/dist/components/separator/Separator.js

@@ -1,9 +1,9 @@
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
 import Separator_module_default from "./Separator.module.js";
-import { jsx } from "react/jsx-runtime";
 import { ark } from "@ark-ui/react/factory";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/separator/Separator.tsx
 const SeparatorRoot = forwardRef(function SeparatorRoot({ asChild, className, orientation = "horizontal", role, size = "sm", variant = "solid", "aria-orientation": ariaOrientation, ...props }, ref) {
 	const resolvedRole = role ?? "separator";

package/dist/components/sidebar/Sidebar.css

@@ -11,7 +11,7 @@
     --splitter-panel-padding: 0;
     --splitter-panel-min-height: 0;
     --splitter-resize-trigger-line-color: var(--sidebar-border-color, var(--color-border));
-    --splitter-resize-trigger-size: var(--sidebar-resize-hit-area, .75rem);
+    --splitter-resize-trigger-size: var(--sidebar-resize-hit-area, var(--spacing-3));
     isolation: isolate;
   }
 
@@ -22,6 +22,7 @@
       color var(--sidebar-transition, var(--transition-default));
     flex-direction: column;
     display: flex;
+    position: relative;
     overflow: hidden;
 
     &[data-state="collapsed"] {
@@ -36,7 +37,7 @@
       & ._3sukta_content {
         scrollbar-gutter: auto;
         scrollbar-width: none;
-        overflow: hidden;
+        overflow: hidden auto;
       }
 
       & ._3sukta_label, & ._3sukta_groupLabel {
@@ -51,7 +52,7 @@
         overflow: hidden;
       }
 
-      & ._3sukta_menuSub {
+      & ._3sukta_menuSub, & ._3sukta_groupAction, & ._3sukta_menuAction, & ._3sukta_menuBadge {
         display: none;
       }
 
@@ -96,9 +97,9 @@
 
   ._3sukta_trigger {
     box-sizing: border-box;
-    width: var(--sidebar-trigger-size, 1.75rem);
-    min-width: var(--sidebar-trigger-size, 1.75rem);
-    height: var(--sidebar-trigger-size, 1.75rem);
+    width: var(--sidebar-trigger-size, var(--spacing-7));
+    min-width: var(--sidebar-trigger-size, var(--spacing-7));
+    height: var(--sidebar-trigger-size, var(--spacing-7));
     border-radius: var(--sidebar-trigger-radius, var(--radius-full));
     color: var(--sidebar-muted-color, var(--color-muted-foreground));
     appearance: none;
@@ -115,14 +116,14 @@
     display: inline-flex;
 
     & > svg {
-      width: var(--sidebar-icon-size, 1rem);
-      height: var(--sidebar-icon-size, 1rem);
+      width: var(--sidebar-icon-size, var(--spacing-4));
+      height: var(--sidebar-icon-size, var(--spacing-4));
     }
 
     &: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));
+      outline: var(--sidebar-focus-ring-width, var(--focus-ring-width, var(--border-width-md)))
+        solid var(--sidebar-focus-ring-color, var(--color-ring));
+      outline-offset: var(--sidebar-focus-ring-offset, var(--focus-ring-offset));
     }
 
     &:disabled, &[aria-disabled="true"] {
@@ -141,7 +142,7 @@
   ._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);
+    margin-inline: calc(var(--sidebar-trigger-size, var(--spacing-7)) * -.5);
     border: var(--sidebar-trigger-border-width, var(--border-width-sm)) solid
       var(--sidebar-trigger-border-color, var(--color-border));
     border-radius: var(--sidebar-trigger-radius, var(--radius-full));
@@ -196,7 +197,6 @@
     padding: var(--sidebar-group-padding, var(--spacing-3));
     flex-direction: column;
     display: flex;
-    position: relative;
   }
 
   ._3sukta_groupLabel {
@@ -210,6 +210,66 @@
     margin: 0;
   }
 
+  ._3sukta_groupAction {
+    width: var(--sidebar-group-action-size, var(--size-xs));
+    height: var(--sidebar-group-action-size, var(--size-xs));
+    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, var(--spacing-4));
+      height: var(--sidebar-icon-size, var(--spacing-4));
+    }
+
+    &:focus-visible {
+      outline: var(--sidebar-focus-ring-width, var(--focus-ring-width, var(--border-width-md)))
+        solid var(--sidebar-focus-ring-color, var(--color-ring));
+      outline-offset: var(--sidebar-focus-ring-offset, var(--focus-ring-offset));
+    }
+
+    @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;
@@ -247,8 +307,8 @@
     display: flex;
 
     & > svg {
-      width: var(--sidebar-icon-size, 1rem);
-      height: var(--sidebar-icon-size, 1rem);
+      width: var(--sidebar-icon-size, var(--spacing-4));
+      height: var(--sidebar-icon-size, var(--spacing-4));
       flex: none;
     }
 
@@ -264,9 +324,9 @@
     }
 
     &: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));
+      outline: var(--sidebar-focus-ring-width, var(--focus-ring-width, var(--border-width-md)))
+        solid var(--sidebar-focus-ring-color, var(--color-ring));
+      outline-offset: var(--sidebar-focus-ring-offset, var(--focus-ring-offset));
     }
 
     &:disabled, &[aria-disabled="true"] {
@@ -305,7 +365,7 @@
       min-height: var(--sidebar-menu-button-height-lg, var(--size-lg));
     }
 
-    & > [data-slot="collapsible-indicator"] {
+    & > [data-slot="collapsible-indicator"], & > [data-slot="menu-indicator"] {
       margin-inline-start: auto;
     }
   }
@@ -314,7 +374,80 @@
     justify-content: flex-start;
   }
 
+  ._3sukta_menuAction {
+    z-index: 1;
+    width: var(--sidebar-menu-action-size, var(--size-xs));
+    height: var(--sidebar-menu-action-size, var(--size-xs));
+    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, var(--size-xs))) /
+        2);
+    inset-inline-end: var(--sidebar-menu-button-padding-x, var(--spacing-2));
+
+    & > svg {
+      width: var(--sidebar-icon-size, var(--spacing-4));
+      height: var(--sidebar-icon-size, var(--spacing-4));
+    }
+
+    &:focus-visible {
+      outline: var(--sidebar-focus-ring-width, var(--focus-ring-width, var(--border-width-md)))
+        solid var(--sidebar-focus-ring-color, var(--color-ring));
+      outline-offset: var(--sidebar-focus-ring-offset, var(--focus-ring-offset));
+    }
+
+    @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, var(--size-xs)) +
+        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));
@@ -330,8 +463,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) {
-    ._3sukta_panel, ._3sukta_trigger, ._3sukta_menuButton, ._3sukta_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 & {