@yamada-ui/react 2.1.8-dev-20260409043924 → 2.2.0-dev-20260409110358

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

@@ -0,0 +1,289 @@
+import { ReactNodeOrFunction } from "../../utils/index.types.js";
+import { Breakpoint, LoadingScheme, ThemeProps } from "../../core/system/index.types.js";
+import { Component, HTMLStyledProps } from "../../core/components/index.types.js";
+import "../../core/index.js";
+import { WithTransitionProps } from "../motion/index.types.js";
+import "../motion/index.js";
+import "../loading/index.js";
+import { CollapseProps } from "../collapse/collapse.js";
+import "../collapse/index.js";
+import { DrawerRootProps } from "../drawer/drawer.js";
+import "../drawer/index.js";
+import { SidebarStyle } from "./sidebar.style.js";
+import { UseSidebarGroupProps, UseSidebarItemProps, UseSidebarItemReturn, UseSidebarProps } from "./use-sidebar.js";
+import { TooltipProps } from "../tooltip/tooltip.js";
+import "../tooltip/index.js";
+import "../../index.js";
+import * as react465 from "react";
+import { PropsWithChildren, ReactNode } from "react";
+
+//#region src/components/sidebar/sidebar.d.ts
+interface SidebarItemCallBackProps {
+  disabled?: boolean;
+  expanded?: boolean;
+}
+type SidebarItemReactNode = ReactNodeOrFunction<SidebarItemCallBackProps> | {
+  group: ReactNodeOrFunction<SidebarItemCallBackProps>;
+  item?: ReactNodeOrFunction<SidebarItemCallBackProps>;
+} | {
+  item: ReactNodeOrFunction<SidebarItemCallBackProps>;
+  group?: ReactNodeOrFunction<SidebarItemCallBackProps>;
+};
+interface SidebarItemSharedRenderProps extends Pick<SidebarItemProps, "label">, Pick<UseSidebarItemReturn, "expanded" | "expandedValue" | "onExpandedChange" | "onSelectedChange" | "selected" | "selectedValue" | "value"> {
+  itemProps: HTMLStyledProps<"li">;
+  linkProps: HTMLStyledProps<"a">;
+  triggerProps: HTMLStyledProps<"button">;
+  endElement?: ReactNode;
+  startElement?: ReactNode;
+}
+interface SidebarItemRenderProps extends PropsWithChildren, Omit<SidebarItemSharedRenderProps, "endElement" | "startElement">, Pick<UseSidebarItemReturn, "group" | "groupLoading" | "groupOpen" | "onGroupClose" | "onGroupOpen" | "onGroupToggle"> {
+  endElement: {
+    group?: ReactNode;
+    item?: ReactNode;
+  };
+  startElement: {
+    group?: ReactNode;
+    item?: ReactNode;
+  };
+  indicator?: ReactNode;
+  link?: ReactNode;
+  trigger?: ReactNode;
+}
+interface SidebarItemLinkRenderProps extends Omit<SidebarItemSharedRenderProps, "itemProps" | "triggerProps"> {}
+interface SidebarItemTriggerRenderProps extends Omit<SidebarItemSharedRenderProps, "itemProps" | "linkProps">, Pick<UseSidebarItemReturn, "groupLoading" | "groupOpen" | "onGroupClose" | "onGroupOpen" | "onGroupToggle"> {
+  indicator?: ReactNode;
+}
+interface SidebarItemRender {
+  item?: ReactNodeOrFunction<SidebarItemRenderProps>;
+  link?: ReactNodeOrFunction<SidebarItemLinkRenderProps>;
+  trigger?: ReactNodeOrFunction<SidebarItemTriggerRenderProps>;
+}
+interface SidebarGroup extends Omit<SidebarGroupProps, "children" | "value"> {
+  children: SidebarItemWithValue[];
+  group: true;
+}
+interface SidebarItemWithValue extends Omit<SidebarItemProps, "children"> {
+  children?: SidebarItemWithValue[];
+}
+type SidebarItem = SidebarGroup | SidebarItemWithValue;
+interface SidebarRootProps extends HTMLStyledProps<"div">, ThemeProps<SidebarStyle>, Omit<UseSidebarProps, "mobile"> {
+  /**
+   * The breakpoint to use for the sidebar. If `false`, the sidebar will be always visible.
+   *
+   * @default 'md'
+   */
+  breakpoint?: Exclude<Breakpoint, "base"> | false;
+}
+declare const SidebarPropsContext: react465.Context<Partial<SidebarRootProps> | undefined>, useSidebarPropsContext: () => Partial<SidebarRootProps> | undefined;
+/**
+ * `Sidebar` is a component that is used to display a list of items in a sidebar.
+ *
+ * @see https://yamada-ui.com/docs/components/sidebar
+ */
+declare const SidebarRoot: Component<"div", SidebarRootProps>;
+interface SidebarMainPanelProps extends HTMLStyledProps {}
+declare const SidebarMainPanel: Component<"div", SidebarMainPanelProps>;
+interface SidebarTriggerProps extends HTMLStyledProps<"button"> {}
+declare const SidebarTrigger: Component<"button", SidebarTriggerProps>;
+interface SidebarSidePanelProps extends Omit<HTMLStyledProps<"aside">, "content">, Pick<SidebarContentProps, "items">, Pick<SidebarItemProps, "animated" | "endElement" | "endElementProps" | "indicator" | "indicatorProps" | "labelProps" | "linkProps" | "loadingScheme" | "render" | "startElement" | "startElementProps" | "tooltipProps" | "triggerProps"> {
+  /**
+   * The content of the sidebar.
+   */
+  content?: ReactNode;
+  /**
+   * The footer of the sidebar.
+   */
+  footer?: ReactNode;
+  /**
+   * The header of the sidebar.
+   */
+  header?: ReactNode;
+  /**
+   * If `true`, hide the tree indicator icon for all items.
+   *
+   * @default false
+   */
+  indicatorHidden?: boolean;
+  /**
+   * If `true`, the sidebar will be rendered with a handle.
+   *
+   * @default true
+   */
+  withHandle?: boolean;
+  /**
+   * Props for the content component.
+   */
+  contentProps?: SidebarContentProps;
+  /**
+   * Props for the drawer component.
+   */
+  drawerProps?: Omit<DrawerRootProps, "body" | "cancel" | "children" | "footer" | "header" | "middle" | "onCancel" | "onClose" | "onMiddle" | "onOpen" | "onSuccess" | "open" | "success" | "title" | "trigger">;
+  /**
+   * Props for the footer component.
+   */
+  footerProps?: SidebarFooterProps;
+  /**
+   * Props for the group content component.
+   */
+  groupContentProps?: Omit<SidebarGroupContentProps, "children">;
+  /**
+   * Props for the group component.
+   */
+  groupProps?: Omit<SidebarGroupProps, "children" | "label" | "value">;
+  /**
+   * Props for the handle component.
+   */
+  handleProps?: SidebarHandleProps;
+  /**
+   * Props for the header component.
+   */
+  headerProps?: SidebarHeaderProps;
+  /**
+   * Props for the item content component.
+   */
+  itemContentProps?: SidebarItemContentProps;
+  /**
+   * Props for the item component.
+   */
+  itemProps?: Omit<SidebarItemProps, "children" | "items" | "label" | "open" | "value">;
+  /**
+   * Props for the menu component.
+   *
+   * @default 'md'
+   */
+  menuProps?: SidebarMenuProps;
+}
+declare const SidebarSidePanel: Component<"aside", SidebarSidePanelProps>;
+interface SidebarHeaderProps extends HTMLStyledProps<"header"> {}
+declare const SidebarHeader: Component<"header", SidebarHeaderProps>;
+interface SidebarFooterProps extends HTMLStyledProps<"footer"> {}
+declare const SidebarFooter: Component<"footer", SidebarFooterProps>;
+interface SidebarContentProps extends HTMLStyledProps<"ul"> {
+  /**
+   * If provided, generate elements based on items.
+   */
+  items?: SidebarItem[];
+}
+declare const SidebarContent: Component<"ul", SidebarContentProps>;
+interface SidebarHandleProps extends HTMLStyledProps<"button"> {}
+declare const SidebarHandle: Component<"button", SidebarHandleProps>;
+interface SidebarGroupProps extends Omit<HTMLStyledProps<"li">, "content" | "value">, UseSidebarGroupProps {
+  /**
+   * If provided, generate elements based on items.
+   */
+  items?: SidebarItemWithValue[];
+  /**
+   * The label of the group.
+   */
+  label?: ReactNode;
+  /**
+   * Props for the content component.
+   */
+  contentProps?: Omit<SidebarGroupContentProps, "children">;
+  /**
+   * Props for the label component.
+   */
+  labelProps?: HTMLStyledProps<"span">;
+}
+declare const SidebarGroup: Component<"li", SidebarGroupProps>;
+interface SidebarGroupLabelProps extends HTMLStyledProps<"span"> {}
+declare const SidebarGroupLabel: Component<"span", SidebarGroupLabelProps>;
+interface SidebarGroupContentProps extends HTMLStyledProps<"div"> {}
+declare const SidebarGroupContent: Component<"div", SidebarGroupContentProps>;
+interface SidebarMenuProps extends HTMLStyledProps<"div"> {}
+declare const SidebarMenu: Component<"div", SidebarMenuProps>;
+interface SidebarMenuButtonProps extends HTMLStyledProps<"button"> {}
+declare const SidebarMenuButton: Component<"button", SidebarMenuButtonProps>;
+interface SidebarItemProps extends Omit<HTMLStyledProps<"li">, "value">, Omit<UseSidebarItemProps, "asyncChildren"> {
+  /**
+   * The label to display in the item.
+   */
+  label: ReactNode;
+  /**
+   * If `true`, the sidebar item will be animated.
+   *
+   * @default true
+   */
+  animated?: boolean;
+  /**
+   * The element to display at the end of the item.
+   */
+  endElement?: SidebarItemReactNode;
+  /**
+   * The sidebar item indicator icon to use.
+   */
+  indicator?: ReactNodeOrFunction<SidebarItemCallBackProps>;
+  /**
+   * If provided, generate elements based on items.
+   */
+  items?: SidebarItemWithValue[];
+  /**
+   * The loading scheme.
+   *
+   * @default 'oval'
+   */
+  loadingScheme?: LoadingScheme;
+  /**
+   * If provided, the sidebar item will be rendered with custom components.
+   */
+  render?: SidebarItemRender;
+  /**
+   * The element to display at the start of the item.
+   */
+  startElement?: SidebarItemReactNode;
+  /**
+   * Props for the content component.
+   */
+  contentProps?: Omit<SidebarItemContentProps, "children">;
+  /**
+   * Props for the end component.
+   */
+  endElementProps?: SidebarItemEndElementProps;
+  /**
+   * Props for the indicator component.
+   */
+  indicatorProps?: SidebarItemIndicatorProps;
+  /**
+   * Props for the label component.
+   */
+  labelProps?: SidebarItemLabelProps;
+  /**
+   * Props for the link component.
+   */
+  linkProps?: SidebarItemLinkProps;
+  /**
+   * Props for the start component.
+   */
+  startElementProps?: SidebarItemStartElementProps;
+  /**
+   * Props for the tooltip component.
+   */
+  tooltipProps?: Omit<SidebarItemTooltipProps, "children" | "content">;
+  /**
+   * Props for the trigger component.
+   */
+  triggerProps?: SidebarItemTriggerProps;
+  /**
+   * If provided, the sidebar item will be rendered as an async sidebar item.
+   */
+  asyncChildren?: () => Promise<SidebarItemWithValue[]>;
+}
+declare const SidebarItem: Component<"li", SidebarItemProps>;
+interface SidebarItemTooltipProps extends TooltipProps {}
+interface SidebarItemTriggerProps extends HTMLStyledProps<"button"> {}
+declare const SidebarItemTrigger: Component<"button", SidebarItemTriggerProps>;
+interface SidebarItemLinkProps extends HTMLStyledProps<"a"> {}
+declare const SidebarItemLink: Component<"a", SidebarItemLinkProps>;
+interface SidebarItemContentProps extends Omit<HTMLStyledProps<"ul">, "transition">, Pick<CollapseProps, "animationOpacity" | keyof WithTransitionProps> {}
+declare const SidebarItemContent: Component<"ul", SidebarItemContentProps>;
+interface SidebarItemIndicatorProps extends HTMLStyledProps<"svg"> {}
+declare const SidebarItemIndicator: Component<"svg", SidebarItemIndicatorProps>;
+interface SidebarItemStartElementProps extends HTMLStyledProps {}
+declare const SidebarItemStartElement: Component<"div", SidebarItemStartElementProps>;
+interface SidebarItemEndElementProps extends HTMLStyledProps {}
+declare const SidebarItemEndElement: Component<"div", SidebarItemEndElementProps>;
+interface SidebarItemLabelProps extends HTMLStyledProps<"span"> {}
+declare const SidebarItemLabel: Component<"span", SidebarItemLabelProps>;
+//#endregion
+export { SidebarContent, SidebarContentProps, SidebarFooter, SidebarFooterProps, SidebarGroup, SidebarGroupContent, SidebarGroupContentProps, SidebarGroupLabel, SidebarGroupLabelProps, SidebarGroupProps, SidebarHandle, SidebarHandleProps, SidebarHeader, SidebarHeaderProps, SidebarItem, SidebarItemContent, SidebarItemContentProps, SidebarItemEndElement, SidebarItemEndElementProps, SidebarItemIndicator, SidebarItemIndicatorProps, SidebarItemLabel, SidebarItemLabelProps, SidebarItemLink, SidebarItemLinkProps, SidebarItemProps, SidebarItemStartElement, SidebarItemStartElementProps, SidebarItemTrigger, SidebarItemTriggerProps, SidebarMainPanel, SidebarMainPanelProps, SidebarMenu, SidebarMenuButton, SidebarMenuButtonProps, SidebarMenuProps, SidebarPropsContext, SidebarRoot, SidebarRootProps, SidebarSidePanel, SidebarSidePanelProps, SidebarTrigger, SidebarTriggerProps, useSidebarPropsContext };
+//# sourceMappingURL=sidebar.d.ts.map

package/dist/types/components/sidebar/sidebar.style.d.ts

@@ -0,0 +1,18 @@
+import { ComponentSlotStyle } from "../../core/system/index.types.js";
+import { DefineComponentStyleSlotModifiers, DefineComponentStyleSlotProps } from "../../core/system/config.js";
+import "../../core/index.js";
+import "../../index.js";
+
+//#region src/components/sidebar/sidebar.style.d.ts
+type Slot = "button" | "content" | "footer" | "gap" | "group" | "groupContent" | "groupLabel" | "handle" | "header" | "item" | "itemContent" | "itemElement" | "itemIndicator" | "itemLabel" | "itemLink" | "itemTrigger" | "mainPanel" | "menu" | "root" | "sidePanel";
+declare const sidebarStyle: ComponentSlotStyle<Slot, DefineComponentStyleSlotProps<Slot, {
+  mode: "icon" | "offcanvas";
+  placement: "end" | "start";
+  shape: "circle" | "rounded" | "square";
+  withGroupGuideLine: "true";
+  withGuideLine: "false" | "true";
+}>, DefineComponentStyleSlotModifiers<Slot>, DefineComponentStyleSlotModifiers<Slot, "outline" | "solid" | "subtle" | "surface">>;
+type SidebarStyle = typeof sidebarStyle;
+//#endregion
+export { SidebarStyle, sidebarStyle };
+//# sourceMappingURL=sidebar.style.d.ts.map

package/dist/types/components/sidebar/use-sidebar.d.ts

@@ -0,0 +1,255 @@
+import { HTMLProps, PropGetter } from "../../core/components/index.types.js";
+import "../../core/index.js";
+import { UseDisclosureProps } from "../../hooks/use-disclosure/use-disclosure.js";
+import { Descendant, DescendantProps } from "../../hooks/use-descendants/index.js";
+import "../../index.js";
+import * as react457 from "react";
+import { ReactNode, RefObject } from "react";
+
+//#region src/components/sidebar/use-sidebar.d.ts
+interface SidebarControl {
+  collapse: () => void;
+  expand: () => void;
+}
+interface SidebarDescendantProps {
+  expanded: boolean;
+  group: boolean;
+  id: string;
+  value: string;
+}
+declare const SidebarDescendantsContext: react457.Context<{
+    active: (target?: HTMLElement | Descendant<HTMLElement, SidebarDescendantProps> | null | undefined, options?: FocusOptions) => void;
+    count: (props?: Partial<SidebarDescendantProps> | undefined) => number;
+    destroy: () => void;
+    enabledCount: (props?: Partial<SidebarDescendantProps> | undefined) => number;
+    enabledFirstValue: (props?: Partial<SidebarDescendantProps> | undefined) => Descendant<HTMLElement, SidebarDescendantProps> | undefined;
+    enabledIndexOf: (target?: HTMLElement | Descendant<HTMLElement, SidebarDescendantProps> | null | undefined) => number;
+    enabledLastValue: (props?: Partial<SidebarDescendantProps> | undefined) => Descendant<HTMLElement, SidebarDescendantProps> | undefined;
+    enabledNextValue: (indexOrNode: number | HTMLElement | Descendant<HTMLElement, SidebarDescendantProps> | null, loop?: boolean, props?: Partial<SidebarDescendantProps> | undefined) => Descendant<HTMLElement, SidebarDescendantProps> | undefined;
+    enabledPrevValue: (indexOrNode: number | HTMLElement | Descendant<HTMLElement, SidebarDescendantProps> | null, loop?: boolean, props?: Partial<SidebarDescendantProps> | undefined) => Descendant<HTMLElement, SidebarDescendantProps> | undefined;
+    enabledValue: (indexOrNode: number | HTMLElement | null) => Descendant<HTMLElement, SidebarDescendantProps> | undefined;
+    enabledValues: (props?: Partial<SidebarDescendantProps> | undefined) => Descendant<HTMLElement, SidebarDescendantProps>[];
+    firstValue: (props?: Partial<SidebarDescendantProps> | undefined) => Descendant<HTMLElement, SidebarDescendantProps> | undefined;
+    indexOf: (target?: HTMLElement | Descendant<HTMLElement, SidebarDescendantProps> | null | undefined) => number;
+    lastValue: (props?: Partial<SidebarDescendantProps> | undefined) => Descendant<HTMLElement, SidebarDescendantProps> | undefined;
+    nextValue: (indexOrNode: number | HTMLElement | Descendant<HTMLElement, SidebarDescendantProps> | null, loop?: boolean, props?: Partial<SidebarDescendantProps> | undefined) => Descendant<HTMLElement, SidebarDescendantProps> | undefined;
+    prevValue: (indexOrNode: number | HTMLElement | Descendant<HTMLElement, SidebarDescendantProps> | null, loop?: boolean, props?: Partial<SidebarDescendantProps> | undefined) => Descendant<HTMLElement, SidebarDescendantProps> | undefined;
+    register: (props?: DescendantProps<HTMLElement, SidebarDescendantProps> | undefined) => react457.RefCallback<HTMLElement>;
+    unregister: (node?: HTMLElement | null | undefined) => void;
+    value: (indexOrNode: number | HTMLElement | null) => Descendant<HTMLElement, SidebarDescendantProps> | undefined;
+    values: (props?: Partial<SidebarDescendantProps> | undefined) => Descendant<HTMLElement, SidebarDescendantProps>[];
+  }>, useSidebarDescendant: (props?: DescendantProps<HTMLElement, SidebarDescendantProps> | undefined) => {
+    descendants: {
+      active: (target?: HTMLElement | Descendant<HTMLElement, SidebarDescendantProps> | null | undefined, options?: FocusOptions) => void;
+      count: (props?: Partial<SidebarDescendantProps> | undefined) => number;
+      destroy: () => void;
+      enabledCount: (props?: Partial<SidebarDescendantProps> | undefined) => number;
+      enabledFirstValue: (props?: Partial<SidebarDescendantProps> | undefined) => Descendant<HTMLElement, SidebarDescendantProps> | undefined;
+      enabledIndexOf: (target?: HTMLElement | Descendant<HTMLElement, SidebarDescendantProps> | null | undefined) => number;
+      enabledLastValue: (props?: Partial<SidebarDescendantProps> | undefined) => Descendant<HTMLElement, SidebarDescendantProps> | undefined;
+      enabledNextValue: (indexOrNode: number | HTMLElement | Descendant<HTMLElement, SidebarDescendantProps> | null, loop?: boolean, props?: Partial<SidebarDescendantProps> | undefined) => Descendant<HTMLElement, SidebarDescendantProps> | undefined;
+      enabledPrevValue: (indexOrNode: number | HTMLElement | Descendant<HTMLElement, SidebarDescendantProps> | null, loop?: boolean, props?: Partial<SidebarDescendantProps> | undefined) => Descendant<HTMLElement, SidebarDescendantProps> | undefined;
+      enabledValue: (indexOrNode: number | HTMLElement | null) => Descendant<HTMLElement, SidebarDescendantProps> | undefined;
+      enabledValues: (props?: Partial<SidebarDescendantProps> | undefined) => Descendant<HTMLElement, SidebarDescendantProps>[];
+      firstValue: (props?: Partial<SidebarDescendantProps> | undefined) => Descendant<HTMLElement, SidebarDescendantProps> | undefined;
+      indexOf: (target?: HTMLElement | Descendant<HTMLElement, SidebarDescendantProps> | null | undefined) => number;
+      lastValue: (props?: Partial<SidebarDescendantProps> | undefined) => Descendant<HTMLElement, SidebarDescendantProps> | undefined;
+      nextValue: (indexOrNode: number | HTMLElement | Descendant<HTMLElement, SidebarDescendantProps> | null, loop?: boolean, props?: Partial<SidebarDescendantProps> | undefined) => Descendant<HTMLElement, SidebarDescendantProps> | undefined;
+      prevValue: (indexOrNode: number | HTMLElement | Descendant<HTMLElement, SidebarDescendantProps> | null, loop?: boolean, props?: Partial<SidebarDescendantProps> | undefined) => Descendant<HTMLElement, SidebarDescendantProps> | undefined;
+      register: (props?: DescendantProps<HTMLElement, SidebarDescendantProps> | undefined) => react457.RefCallback<HTMLElement>;
+      unregister: (node?: HTMLElement | null | undefined) => void;
+      value: (indexOrNode: number | HTMLElement | null) => Descendant<HTMLElement, SidebarDescendantProps> | undefined;
+      values: (props?: Partial<SidebarDescendantProps> | undefined) => Descendant<HTMLElement, SidebarDescendantProps>[];
+    };
+    register: react457.RefCallback<HTMLElement>;
+  }, useSidebarDescendants: () => {
+    active: (target?: HTMLElement | Descendant<HTMLElement, SidebarDescendantProps> | null | undefined, options?: FocusOptions) => void;
+    count: (props?: Partial<SidebarDescendantProps> | undefined) => number;
+    destroy: () => void;
+    enabledCount: (props?: Partial<SidebarDescendantProps> | undefined) => number;
+    enabledFirstValue: (props?: Partial<SidebarDescendantProps> | undefined) => Descendant<HTMLElement, SidebarDescendantProps> | undefined;
+    enabledIndexOf: (target?: HTMLElement | Descendant<HTMLElement, SidebarDescendantProps> | null | undefined) => number;
+    enabledLastValue: (props?: Partial<SidebarDescendantProps> | undefined) => Descendant<HTMLElement, SidebarDescendantProps> | undefined;
+    enabledNextValue: (indexOrNode: number | HTMLElement | Descendant<HTMLElement, SidebarDescendantProps> | null, loop?: boolean, props?: Partial<SidebarDescendantProps> | undefined) => Descendant<HTMLElement, SidebarDescendantProps> | undefined;
+    enabledPrevValue: (indexOrNode: number | HTMLElement | Descendant<HTMLElement, SidebarDescendantProps> | null, loop?: boolean, props?: Partial<SidebarDescendantProps> | undefined) => Descendant<HTMLElement, SidebarDescendantProps> | undefined;
+    enabledValue: (indexOrNode: number | HTMLElement | null) => Descendant<HTMLElement, SidebarDescendantProps> | undefined;
+    enabledValues: (props?: Partial<SidebarDescendantProps> | undefined) => Descendant<HTMLElement, SidebarDescendantProps>[];
+    firstValue: (props?: Partial<SidebarDescendantProps> | undefined) => Descendant<HTMLElement, SidebarDescendantProps> | undefined;
+    indexOf: (target?: HTMLElement | Descendant<HTMLElement, SidebarDescendantProps> | null | undefined) => number;
+    lastValue: (props?: Partial<SidebarDescendantProps> | undefined) => Descendant<HTMLElement, SidebarDescendantProps> | undefined;
+    nextValue: (indexOrNode: number | HTMLElement | Descendant<HTMLElement, SidebarDescendantProps> | null, loop?: boolean, props?: Partial<SidebarDescendantProps> | undefined) => Descendant<HTMLElement, SidebarDescendantProps> | undefined;
+    prevValue: (indexOrNode: number | HTMLElement | Descendant<HTMLElement, SidebarDescendantProps> | null, loop?: boolean, props?: Partial<SidebarDescendantProps> | undefined) => Descendant<HTMLElement, SidebarDescendantProps> | undefined;
+    register: (props?: DescendantProps<HTMLElement, SidebarDescendantProps> | undefined) => react457.RefCallback<HTMLElement>;
+    unregister: (node?: HTMLElement | null | undefined) => void;
+    value: (indexOrNode: number | HTMLElement | null) => Descendant<HTMLElement, SidebarDescendantProps> | undefined;
+    values: (props?: Partial<SidebarDescendantProps> | undefined) => Descendant<HTMLElement, SidebarDescendantProps>[];
+  };
+interface SidebarContext extends Pick<UseSidebarReturn, "expandedValue" | "mobile" | "onClose" | "onExpandedChange" | "onOpen" | "onSelectedChange" | "onToggle" | "open" | "selectedValue"> {}
+declare const SidebarContext: react457.Context<SidebarContext>, useSidebarContext: () => SidebarContext;
+interface SidebarItemContext extends Pick<UseSidebarItemReturn, "branchOpen" | "groupOpen"> {}
+declare const SidebarItemContext: react457.Context<SidebarItemContext | undefined>, useSidebarItemContext: () => SidebarItemContext | undefined;
+interface UseSidebarProps extends HTMLProps<"div"> {
+  /**
+   * Ref of the sidebar callbacks.
+   */
+  controlRef?: RefObject<null | SidebarControl>;
+  /**
+   * The initial expanded value of the sidebar.
+   */
+  defaultExpandedValue?: string[];
+  /**
+   * The initial selected value of the sidebar.
+   */
+  defaultSelectedValue?: string;
+  /**
+   * The disclosure props for the desktop and mobile.
+   */
+  disclosure?: {
+    desktop?: Omit<UseDisclosureProps, "timing">;
+    mobile?: Omit<UseDisclosureProps, "timing">;
+  };
+  /**
+   * The expanded value of the sidebar.
+   */
+  expandedValue?: string[];
+  /**
+   * If `true`, the trigger click event will be switched to mobile.
+   *
+   * @default false
+   */
+  mobile?: boolean;
+  /**
+   * The selected value of the sidebar.
+   */
+  selectedValue?: string;
+  /**
+   * The callback invoked when expanded value changes.
+   */
+  onExpandedChange?: (value: string[]) => void;
+  /**
+   * The callback invoked when selected value changes.
+   */
+  onSelectedChange?: (value: string) => void;
+}
+declare const useSidebar: ({
+  controlRef,
+  defaultExpandedValue,
+  defaultSelectedValue,
+  disclosure,
+  expandedValue: expandedValueProp,
+  mobile,
+  selectedValue: selectedValueProp,
+  onExpandedChange: onExpandedChangeProp,
+  onSelectedChange: onSelectedChangeProp,
+  ...rest
+}?: UseSidebarProps) => {
+  descendants: {
+    active: (target?: HTMLElement | Descendant<HTMLElement, SidebarDescendantProps> | null | undefined, options?: FocusOptions) => void;
+    count: (props?: Partial<SidebarDescendantProps> | undefined) => number;
+    destroy: () => void;
+    enabledCount: (props?: Partial<SidebarDescendantProps> | undefined) => number;
+    enabledFirstValue: (props?: Partial<SidebarDescendantProps> | undefined) => Descendant<HTMLElement, SidebarDescendantProps> | undefined;
+    enabledIndexOf: (target?: HTMLElement | Descendant<HTMLElement, SidebarDescendantProps> | null | undefined) => number;
+    enabledLastValue: (props?: Partial<SidebarDescendantProps> | undefined) => Descendant<HTMLElement, SidebarDescendantProps> | undefined;
+    enabledNextValue: (indexOrNode: number | HTMLElement | Descendant<HTMLElement, SidebarDescendantProps> | null, loop?: boolean, props?: Partial<SidebarDescendantProps> | undefined) => Descendant<HTMLElement, SidebarDescendantProps> | undefined;
+    enabledPrevValue: (indexOrNode: number | HTMLElement | Descendant<HTMLElement, SidebarDescendantProps> | null, loop?: boolean, props?: Partial<SidebarDescendantProps> | undefined) => Descendant<HTMLElement, SidebarDescendantProps> | undefined;
+    enabledValue: (indexOrNode: number | HTMLElement | null) => Descendant<HTMLElement, SidebarDescendantProps> | undefined;
+    enabledValues: (props?: Partial<SidebarDescendantProps> | undefined) => Descendant<HTMLElement, SidebarDescendantProps>[];
+    firstValue: (props?: Partial<SidebarDescendantProps> | undefined) => Descendant<HTMLElement, SidebarDescendantProps> | undefined;
+    indexOf: (target?: HTMLElement | Descendant<HTMLElement, SidebarDescendantProps> | null | undefined) => number;
+    lastValue: (props?: Partial<SidebarDescendantProps> | undefined) => Descendant<HTMLElement, SidebarDescendantProps> | undefined;
+    nextValue: (indexOrNode: number | HTMLElement | Descendant<HTMLElement, SidebarDescendantProps> | null, loop?: boolean, props?: Partial<SidebarDescendantProps> | undefined) => Descendant<HTMLElement, SidebarDescendantProps> | undefined;
+    prevValue: (indexOrNode: number | HTMLElement | Descendant<HTMLElement, SidebarDescendantProps> | null, loop?: boolean, props?: Partial<SidebarDescendantProps> | undefined) => Descendant<HTMLElement, SidebarDescendantProps> | undefined;
+    register: (props?: DescendantProps<HTMLElement, SidebarDescendantProps> | undefined) => react457.RefCallback<HTMLElement>;
+    unregister: (node?: HTMLElement | null | undefined) => void;
+    value: (indexOrNode: number | HTMLElement | null) => Descendant<HTMLElement, SidebarDescendantProps> | undefined;
+    values: (props?: Partial<SidebarDescendantProps> | undefined) => Descendant<HTMLElement, SidebarDescendantProps>[];
+  };
+  expandedValue: string[];
+  mobile: boolean;
+  open: boolean;
+  selectedValue: string;
+  getContentProps: PropGetter<"ul", undefined, undefined>;
+  getFooterProps: PropGetter<"footer", undefined, undefined>;
+  getHeaderProps: PropGetter<"header", undefined, undefined>;
+  getRootProps: PropGetter<"div", undefined, undefined>;
+  getSidePanelProps: PropGetter<"aside", undefined, undefined>;
+  getTriggerProps: PropGetter<"button", undefined, undefined>;
+  onClose: () => void | Promise<void>;
+  onExpandedChange: (value: string) => void;
+  onOpen: () => void | Promise<void>;
+  onSelectedChange: (value: string) => void;
+  onToggle: () => void | Promise<void>;
+};
+type UseSidebarReturn = ReturnType<typeof useSidebar>;
+interface UseSidebarGroupProps extends HTMLProps<"li"> {}
+declare const useSidebarGroup: ({
+  ...rest
+}?: UseSidebarGroupProps) => {
+  getContentProps: PropGetter<"div", undefined, undefined>;
+  getLabelProps: PropGetter<"span", undefined, undefined>;
+  getRootProps: PropGetter<"li", undefined, undefined>;
+};
+type UseSidebarGroupReturn = ReturnType<typeof useSidebarGroup>;
+interface UseSidebarItemProps extends HTMLProps<"li">, Omit<UseDisclosureProps, "timing"> {
+  /**
+   * The value of the item.
+   */
+  value: string;
+  /**
+   * If `true`, the tree item will be disabled.
+   *
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, the link will open in new tab.
+   *
+   * @default false
+   */
+  external?: boolean;
+  /**
+   * If provided, the sidebar item will be rendered as an async sidebar item.
+   */
+  asyncChildren?: () => Promise<ReactNode>;
+}
+declare const useSidebarItem: ({
+  asyncChildren,
+  children: childrenProp,
+  defaultOpen,
+  disabled,
+  external,
+  open: openProp,
+  value,
+  onClose: onCloseProp,
+  onOpen: onOpenProp,
+  ...rest
+}: UseSidebarItemProps) => {
+  branchOpen: boolean[];
+  children: ReactNode;
+  disabled: boolean;
+  expanded: boolean;
+  expandedValue: string[];
+  group: boolean;
+  groupLoading: boolean;
+  groupOpen: boolean;
+  open: boolean;
+  selected: boolean;
+  selectedValue: string;
+  value: string;
+  getContentProps: PropGetter<"ul", undefined, undefined>;
+  getIndicatorProps: PropGetter<"svg", undefined, undefined>;
+  getItemProps: PropGetter<"li", undefined, undefined>;
+  getLabelProps: PropGetter<"span", undefined, undefined>;
+  getLinkProps: PropGetter<"a", undefined, undefined>;
+  getTriggerProps: PropGetter<"button", undefined, undefined>;
+  onExpandedChange: (value: string) => void;
+  onGroupClose: () => void;
+  onGroupOpen: () => void;
+  onGroupToggle: () => void;
+  onSelectedChange: (value: string) => void;
+};
+type UseSidebarItemReturn = ReturnType<typeof useSidebarItem>;
+//#endregion
+export { SidebarContext, SidebarControl, SidebarDescendantsContext, SidebarItemContext, UseSidebarGroupProps, UseSidebarGroupReturn, UseSidebarItemProps, UseSidebarItemReturn, UseSidebarProps, UseSidebarReturn, useSidebar, useSidebarContext, useSidebarDescendant, useSidebarDescendants, useSidebarGroup, useSidebarItem, useSidebarItemContext };
+//# sourceMappingURL=use-sidebar.d.ts.map

package/dist/types/components/simple-grid/simple-grid.d.ts

@@ -6,7 +6,7 @@ import { GridProps } from "../grid/grid.js";
 import "../grid/index.js";
 import { SimpleGridStyle } from "./simple-grid.style.js";
 import "../../index.js";
-import * as react829 from "react";
+import * as react456 from "react";
 
 //#region src/components/simple-grid/simple-grid.d.ts
 interface SimpleGridProps extends Omit<WithoutThemeProps<GridProps, SimpleGridStyle>, "columns">, ThemeProps<SimpleGridStyle> {
@@ -20,7 +20,7 @@ interface SimpleGridProps extends Omit<WithoutThemeProps<GridProps, SimpleGridSt
    */
   minChildWidth?: CSSProps["minWidth"];
 }
-declare const SimpleGridPropsContext: react829.Context<Partial<SimpleGridProps> | undefined>, useSimpleGridPropsContext: () => Partial<SimpleGridProps> | undefined;
+declare const SimpleGridPropsContext: react456.Context<Partial<SimpleGridProps> | undefined>, useSimpleGridPropsContext: () => Partial<SimpleGridProps> | undefined;
 /**
  * `SimpleGrid` is a component that makes `Grid` simpler and more user-friendly.
  *

package/dist/types/components/skeleton/skeleton.d.ts

@@ -4,7 +4,7 @@ import { Component, HTMLStyledProps } from "../../core/components/index.types.js
 import "../../core/index.js";
 import { SkeletonStyle } from "./skeleton.style.js";
 import "../../index.js";
-import * as react827 from "react";
+import * as react455 from "react";
 
 //#region src/components/skeleton/skeleton.d.ts
 interface SkeletonProps extends HTMLStyledProps, ThemeProps<SkeletonStyle> {
@@ -31,7 +31,7 @@ interface SkeletonProps extends HTMLStyledProps, ThemeProps<SkeletonStyle> {
    */
   startColor?: CSSProps["color"];
 }
-declare const SkeletonPropsContext: react827.Context<Partial<SkeletonProps> | undefined>, useSkeletonPropsContext: () => Partial<SkeletonProps> | undefined;
+declare const SkeletonPropsContext: react455.Context<Partial<SkeletonProps> | undefined>, useSkeletonPropsContext: () => Partial<SkeletonProps> | undefined;
 /**
  * `Skeleton` is a component that acts as a placeholder until content is loaded.
  *

package/dist/types/components/slide/slide.d.ts

@@ -5,13 +5,13 @@ import { HTMLMotionProps as HTMLMotionProps$1, WithTransitionProps } from "../mo
 import "../motion/index.js";
 import { SlideStyle } from "./slide.style.js";
 import "../../index.js";
-import * as react828 from "react";
+import * as react454 from "react";
 import { Variants } from "motion/react";
 
 //#region src/components/slide/slide.d.ts
 declare const slideVariants: Variants;
 interface SlideProps extends WithTransitionProps<HTMLMotionProps$1>, ThemeProps<SlideStyle> {}
-declare const SlidePropsContext: react828.Context<Partial<SlideProps> | undefined>, useSlidePropsContext: () => Partial<SlideProps> | undefined;
+declare const SlidePropsContext: react454.Context<Partial<SlideProps> | undefined>, useSlidePropsContext: () => Partial<SlideProps> | undefined;
 /**
  * `Slide` is a component that shows or hides an element from the corners of the page.
  *

package/dist/types/components/slide-fade/slide-fade.d.ts

@@ -5,7 +5,7 @@ import { HTMLMotionProps as HTMLMotionProps$1, WithTransitionProps } from "../mo
 import "../motion/index.js";
 import { SlideFadeStyle } from "./slide-fade.style.js";
 import "../../index.js";
-import * as react826 from "react";
+import * as react453 from "react";
 import { Variants } from "motion/react";
 
 //#region src/components/slide-fade/slide-fade.d.ts
@@ -30,7 +30,7 @@ interface SlideFadeProps extends WithTransitionProps<HTMLMotionProps$1>, ThemePr
    */
   reverse?: boolean;
 }
-declare const SlideFadePropsContext: react826.Context<Partial<SlideFadeProps> | undefined>, useSlideFadePropsContext: () => Partial<SlideFadeProps> | undefined;
+declare const SlideFadePropsContext: react453.Context<Partial<SlideFadeProps> | undefined>, useSlideFadePropsContext: () => Partial<SlideFadeProps> | undefined;
 /**
  * `SlideFade` is a component that gradually shows or hides an element while moving it from a specified position.
  *

package/dist/types/components/slider/slider.d.ts

@@ -5,7 +5,7 @@ import "../../core/index.js";
 import { SliderStyle } from "./slider.style.js";
 import { UseSliderProps } from "./use-slider.js";
 import "../../index.js";
-import * as react825 from "react";
+import * as react452 from "react";
 import { FC, ReactElement, ReactNode } from "react";
 
 //#region src/components/slider/slider.d.ts
@@ -75,7 +75,7 @@ interface SliderRootProps<Y extends [number, number] | number = number> extends
    */
   trackProps?: SliderTrackProps;
 }
-declare const SliderPropsContext: react825.Context<Partial<SliderRootProps<number>> | undefined>, useSliderPropsContext: () => Partial<SliderRootProps<number>> | undefined;
+declare const SliderPropsContext: react452.Context<Partial<SliderRootProps<number>> | undefined>, useSliderPropsContext: () => Partial<SliderRootProps<number>> | undefined;
 /**
  * `Slider` is a component used for allowing users to select a value from a range.
  *