@moduix/react 1.1.1 → 2.0.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__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValueText, { placeholder }) }), /* @__PURE__ */ jsxs(SelectIndicators, { children: [clearLabel && /* @__PURE__ */ jsx(SelectClearTrigger, { "aria-label": clearLabel }), /* @__PURE__ */ jsx(SelectIndicator, { children: indicator })] })]
+	});
+});
 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.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

@@ -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;
       }
 
@@ -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, 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;
@@ -314,7 +374,79 @@
     justify-content: flex-start;
   }
 
+  ._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));
@@ -330,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) {
-    ._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 & {

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