@moul-dev/ui 2026.9.13 → 2026.9.23

package/dist/src/components/Drawer/Drawer.d.ts

@@ -1,8 +1,17 @@
 import { StyleXStyles } from '@stylexjs/stylex';
+import { DragControls } from 'motion/react';
 import { ButtonProps as AriaButtonProps, DialogProps as AriaDialogProps, HeadingProps as AriaHeadingProps, ModalOverlayProps as AriaModalOverlayProps } from 'react-aria-components';
 import * as React from 'react';
 export type DrawerPlacement = 'top' | 'bottom' | 'left' | 'right';
 export type DrawerSize = 'sm' | 'md' | 'lg' | 'full';
+export interface DrawerContextValue {
+    placement: DrawerPlacement;
+    size: DrawerSize;
+    onClose?: () => void;
+    onOpenChange?: (isOpen: boolean) => void;
+    dragControls?: DragControls;
+}
+export declare function useDrawer(): DrawerContextValue;
 export interface DrawerOverlayProps extends Omit<AriaModalOverlayProps, 'style' | 'className'> {
     style?: StyleXStyles;
     className?: string;
@@ -15,8 +24,24 @@ export interface DrawerProps extends Omit<AriaModalOverlayProps, 'style' | 'clas
     className?: string;
     placement?: DrawerPlacement;
     size?: DrawerSize;
+    /**
+     * Whether to enable drag-to-dismiss gesture on bottom drawers.
+     * @default true for placement="bottom"
+     */
+    dragToClose?: boolean;
 }
 export declare const Drawer: React.ForwardRefExoticComponent<DrawerProps & React.RefAttributes<HTMLDivElement>>;
+export interface DrawerHandleProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'style'> {
+    style?: StyleXStyles;
+    className?: string;
+    /**
+     * Accessible label for screen readers.
+     * @default 'Drag down or press to close drawer'
+     */
+    'aria-label'?: string;
+}
+export declare const DrawerHandle: React.ForwardRefExoticComponent<DrawerHandleProps & React.RefAttributes<HTMLDivElement>>;
+export declare const DrawerGrabHandle: React.ForwardRefExoticComponent<DrawerHandleProps & React.RefAttributes<HTMLDivElement>>;
 export interface DrawerDialogProps extends Omit<AriaDialogProps, 'style' | 'className'> {
     style?: StyleXStyles;
     className?: string;
@@ -25,6 +50,11 @@ export declare const DrawerDialog: React.ForwardRefExoticComponent<DrawerDialogP
 export interface DrawerHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'style'> {
     style?: StyleXStyles;
     className?: string;
+    /**
+     * Whether to render the drag handle on top when placement="bottom".
+     * @default true for placement="bottom"
+     */
+    showHandle?: boolean;
 }
 export declare const DrawerHeader: React.ForwardRefExoticComponent<DrawerHeaderProps & React.RefAttributes<HTMLDivElement>>;
 export interface DrawerTitleProps extends Omit<AriaHeadingProps, 'style' | 'className'> {
@@ -35,6 +65,12 @@ export declare const DrawerTitle: React.ForwardRefExoticComponent<DrawerTitlePro
 export interface DrawerCloseButtonProps extends Omit<AriaButtonProps, 'style' | 'className'> {
     style?: StyleXStyles;
     className?: string;
+    /**
+     * Whether to hide the close button when placed inside a bottom drawer.
+     * Bottom drawers use the top drag handle to dismiss by default.
+     * @default true
+     */
+    hiddenOnBottom?: boolean;
 }
 export declare const DrawerCloseButton: React.ForwardRefExoticComponent<DrawerCloseButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export interface DrawerBodyProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'style'> {

package/dist/src/components/Drawer/Drawer.styles.d.ts

@@ -81,17 +81,50 @@ export declare const styles: Readonly<{
         readonly borderColor: stylex.StyleXClassNameFor<"borderColor", string>;
         readonly animationName: stylex.StyleXClassNameFor<"animationName", string>;
     }>;
+    readonly modalReset: Readonly<{
+        readonly outline: stylex.StyleXClassNameFor<"outline", "none">;
+        readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", 0>;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "transparent">;
+        readonly boxShadow: stylex.StyleXClassNameFor<"boxShadow", "none">;
+        readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+        readonly flexDirection: stylex.StyleXClassNameFor<"flexDirection", "column">;
+        readonly boxSizing: stylex.StyleXClassNameFor<"boxSizing", "border-box">;
+        readonly overflow: stylex.StyleXClassNameFor<"overflow", "visible">;
+        readonly margin: stylex.StyleXClassNameFor<"margin", 0>;
+        readonly padding: stylex.StyleXClassNameFor<"padding", 0>;
+    }>;
     readonly placementBottom: Readonly<{
         readonly width: stylex.StyleXClassNameFor<"width", `calc(100vw - ${stylex.StyleXVar<string>} * 2)` | "100vw">;
         readonly maxWidth: stylex.StyleXClassNameFor<"maxWidth", `calc(100vw - ${stylex.StyleXVar<string>} * 2)` | "100vw">;
         readonly marginBlockEnd: stylex.StyleXClassNameFor<"marginBlockEnd", string | 0>;
         readonly marginBlockStart: stylex.StyleXClassNameFor<"marginBlockStart", 0>;
         readonly marginInline: stylex.StyleXClassNameFor<"marginInline", string | 0>;
-        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
-        readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", 0 | "1px">;
+        readonly borderTopLeftRadius: stylex.StyleXClassNameFor<"borderTopLeftRadius", string>;
+        readonly borderTopRightRadius: stylex.StyleXClassNameFor<"borderTopRightRadius", string>;
+        readonly borderBottomLeftRadius: stylex.StyleXClassNameFor<"borderBottomLeftRadius", 0>;
+        readonly borderBottomRightRadius: stylex.StyleXClassNameFor<"borderBottomRightRadius", 0>;
+        readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", "1px">;
         readonly borderStyle: stylex.StyleXClassNameFor<"borderStyle", "solid">;
         readonly borderColor: stylex.StyleXClassNameFor<"borderColor", string>;
-        readonly animationName: stylex.StyleXClassNameFor<"animationName", string>;
+    }>;
+    readonly handleWrapper: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+        readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "center">;
+        readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+        readonly width: stylex.StyleXClassNameFor<"width", "100%">;
+        readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", string>;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "transparent">;
+        readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", 0>;
+        readonly outline: stylex.StyleXClassNameFor<"outline", "none">;
+        readonly boxSizing: stylex.StyleXClassNameFor<"boxSizing", "border-box">;
+        readonly userSelect: stylex.StyleXClassNameFor<"userSelect", "none">;
+        readonly touchAction: stylex.StyleXClassNameFor<"touchAction", "none">;
+    }>;
+    readonly handleBar: Readonly<{
+        readonly width: stylex.StyleXClassNameFor<"width", "36px">;
+        readonly height: stylex.StyleXClassNameFor<"height", "4px">;
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
     }>;
     readonly sideSm: Readonly<{
         readonly width: stylex.StyleXClassNameFor<"width", "100vw" | "400px">;
@@ -138,7 +171,7 @@ export declare const styles: Readonly<{
     }>;
     readonly header: Readonly<{
         readonly position: stylex.StyleXClassNameFor<"position", "sticky">;
-        readonly top: stylex.StyleXClassNameFor<"top", 0>;
+        readonly insetBlockStart: stylex.StyleXClassNameFor<"insetBlockStart", 0>;
         readonly zIndex: stylex.StyleXClassNameFor<"zIndex", 10>;
         readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
         readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", string>;
@@ -153,6 +186,14 @@ export declare const styles: Readonly<{
         readonly flexShrink: stylex.StyleXClassNameFor<"flexShrink", 0>;
         readonly boxSizing: stylex.StyleXClassNameFor<"boxSizing", "border-box">;
     }>;
+    readonly headerBottom: Readonly<{
+        readonly flexDirection: stylex.StyleXClassNameFor<"flexDirection", "column">;
+        readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+        readonly paddingBlockStart: stylex.StyleXClassNameFor<"paddingBlockStart", string>;
+        readonly paddingBlockEnd: stylex.StyleXClassNameFor<"paddingBlockEnd", string>;
+        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
+        readonly gap: stylex.StyleXClassNameFor<"gap", string>;
+    }>;
     readonly title: Readonly<{
         readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
         readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", string>;
@@ -173,7 +214,7 @@ export declare const styles: Readonly<{
     }>;
     readonly footer: Readonly<{
         readonly position: stylex.StyleXClassNameFor<"position", "sticky">;
-        readonly bottom: stylex.StyleXClassNameFor<"bottom", 0>;
+        readonly insetBlockEnd: stylex.StyleXClassNameFor<"insetBlockEnd", 0>;
         readonly zIndex: stylex.StyleXClassNameFor<"zIndex", 10>;
         readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
         readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", string>;

package/dist/src/components/Drawer/index.d.ts

@@ -1,2 +1,2 @@
-export type { DrawerBodyProps, DrawerCloseButtonProps, DrawerDialogProps, DrawerFooterProps, DrawerHeaderProps, DrawerOverlayProps, DrawerPlacement, DrawerProps, DrawerSize, DrawerTitleProps, } from './Drawer';
-export { Drawer, DrawerBody, DrawerCloseButton, DrawerDialog, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerTitle, } from './Drawer';
+export type { DrawerBodyProps, DrawerCloseButtonProps, DrawerDialogProps, DrawerFooterProps, DrawerHandleProps, DrawerHeaderProps, DrawerOverlayProps, DrawerPlacement, DrawerProps, DrawerSize, DrawerTitleProps, } from './Drawer';
+export { Drawer, DrawerBody, DrawerCloseButton, DrawerDialog, DrawerFooter, DrawerGrabHandle, DrawerHandle, DrawerHeader, DrawerOverlay, DrawerTitle, useDrawer, } from './Drawer';

package/dist/src/components/ListBox/ListBox.d.ts

@@ -0,0 +1,44 @@
+import { StyleXStyles } from '@stylexjs/stylex';
+import { DropIndicatorProps as AriaDropIndicatorProps, Header as AriaHeader, ListBoxItemProps as AriaListBoxItemProps, ListBoxLoadMoreItemProps as AriaListBoxLoadMoreItemProps, ListBoxProps as AriaListBoxProps, ListBoxSectionProps as AriaListBoxSectionProps, Text as AriaText, DropTarget } from 'react-aria-components';
+import * as React from 'react';
+export type ListBoxSize = 'sm' | 'md' | 'lg';
+export type ListBoxVariant = 'bordered' | 'flat' | 'plain';
+export type ListBoxLayout = 'stack' | 'grid';
+export type ListBoxOrientation = 'vertical' | 'horizontal';
+export interface DropIndicatorProps extends Omit<AriaDropIndicatorProps, 'style' | 'className'> {
+    style?: StyleXStyles;
+    className?: string;
+}
+export declare const DropIndicator: React.ForwardRefExoticComponent<DropIndicatorProps & React.RefAttributes<HTMLElement>>;
+export interface ListBoxLoadMoreItemProps extends Omit<AriaListBoxLoadMoreItemProps, 'style' | 'className'> {
+    style?: StyleXStyles;
+    className?: string;
+    children?: React.ReactNode;
+}
+export declare const ListBoxLoadMoreItem: React.ForwardRefExoticComponent<ListBoxLoadMoreItemProps & React.RefAttributes<HTMLDivElement>>;
+export interface ListBoxSectionProps<T extends object = object> extends Omit<AriaListBoxSectionProps<T>, 'style' | 'className'> {
+    title?: string;
+    isSticky?: boolean;
+    style?: StyleXStyles;
+    className?: string;
+}
+export declare const ListBoxSection: React.ForwardRefExoticComponent<ListBoxSectionProps<any> & React.RefAttributes<HTMLElement>>;
+export interface ListBoxItemProps<T extends object = object> extends Omit<AriaListBoxItemProps<T>, 'style' | 'className'> {
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    showCheckmark?: boolean;
+    style?: StyleXStyles;
+    className?: string;
+}
+export declare const ListBoxItem: React.ForwardRefExoticComponent<ListBoxItemProps<any> & React.RefAttributes<HTMLDivElement>>;
+export interface ListBoxProps<T extends object = object> extends Omit<AriaListBoxProps<T>, 'style' | 'className'> {
+    size?: ListBoxSize;
+    variant?: ListBoxVariant;
+    style?: StyleXStyles;
+    className?: string;
+    renderDropIndicator?: (target: DropTarget) => React.ReactNode;
+}
+export declare const ListBox: <T extends object = object>(props: ListBoxProps<T> & {
+    ref?: React.ForwardedRef<HTMLDivElement>;
+}) => React.ReactElement | null;
+export { AriaHeader as Header, AriaText as Text };

package/dist/src/components/ListBox/ListBox.styles.d.ts

@@ -0,0 +1,260 @@
+import * as stylex from '@stylexjs/stylex';
+export declare const styles: Readonly<{
+    readonly container: Readonly<{
+        readonly position: stylex.StyleXClassNameFor<"position", "relative">;
+        readonly outline: stylex.StyleXClassNameFor<"outline", "none">;
+        readonly overflow: stylex.StyleXClassNameFor<"overflow", "auto">;
+        readonly boxSizing: stylex.StyleXClassNameFor<"boxSizing", "border-box">;
+        readonly fontFamily: stylex.StyleXClassNameFor<"fontFamily", string>;
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly forcedColorAdjust: stylex.StyleXClassNameFor<"forcedColorAdjust", "none">;
+        readonly maxHeight: stylex.StyleXClassNameFor<"maxHeight", "inherit">;
+    }>;
+    readonly bordered: Readonly<{
+        readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", "1px">;
+        readonly borderStyle: stylex.StyleXClassNameFor<"borderStyle", "solid">;
+        readonly borderColor: stylex.StyleXClassNameFor<"borderColor", string>;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
+        readonly boxShadow: stylex.StyleXClassNameFor<"boxShadow", string>;
+    }>;
+    readonly flat: Readonly<{
+        readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", "0px">;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
+    }>;
+    readonly plain: Readonly<{
+        readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", "0px">;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "transparent">;
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
+    }>;
+    readonly containerSm: Readonly<{
+        readonly padding: stylex.StyleXClassNameFor<"padding", string>;
+    }>;
+    readonly containerMd: Readonly<{
+        readonly padding: stylex.StyleXClassNameFor<"padding", string>;
+    }>;
+    readonly containerLg: Readonly<{
+        readonly padding: stylex.StyleXClassNameFor<"padding", string>;
+    }>;
+    readonly stackVertical: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+        readonly flexDirection: stylex.StyleXClassNameFor<"flexDirection", "column">;
+        readonly gap: stylex.StyleXClassNameFor<"gap", "2px">;
+    }>;
+    readonly stackHorizontal: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+        readonly flexDirection: stylex.StyleXClassNameFor<"flexDirection", "row">;
+        readonly gap: stylex.StyleXClassNameFor<"gap", string>;
+        readonly overflowX: stylex.StyleXClassNameFor<"overflowX", "auto">;
+    }>;
+    readonly grid: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "grid">;
+        readonly gap: stylex.StyleXClassNameFor<"gap", string>;
+        readonly gridTemplateColumns: stylex.StyleXClassNameFor<"gridTemplateColumns", "repeat(auto-fill, minmax(140px, 1fr))">;
+    }>;
+    readonly containerFocusVisible: Readonly<{
+        readonly outlineWidth: stylex.StyleXClassNameFor<"outlineWidth", "2px">;
+        readonly outlineStyle: stylex.StyleXClassNameFor<"outlineStyle", "solid">;
+        readonly outlineColor: stylex.StyleXClassNameFor<"outlineColor", string>;
+        readonly outlineOffset: stylex.StyleXClassNameFor<"outlineOffset", "-1px">;
+    }>;
+    readonly containerDropTarget: Readonly<{
+        readonly outlineWidth: stylex.StyleXClassNameFor<"outlineWidth", "2px">;
+        readonly outlineStyle: stylex.StyleXClassNameFor<"outlineStyle", "solid">;
+        readonly outlineColor: stylex.StyleXClassNameFor<"outlineColor", string>;
+        readonly outlineOffset: stylex.StyleXClassNameFor<"outlineOffset", "-1px">;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+    }>;
+    readonly empty: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+        readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+        readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "center">;
+        readonly padding: stylex.StyleXClassNameFor<"padding", string>;
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
+        readonly fontStyle: stylex.StyleXClassNameFor<"fontStyle", "italic">;
+    }>;
+    readonly item: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+        readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+        readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "space-between">;
+        readonly position: stylex.StyleXClassNameFor<"position", "relative">;
+        readonly cursor: stylex.StyleXClassNameFor<"cursor", "pointer">;
+        readonly outline: stylex.StyleXClassNameFor<"outline", "none">;
+        readonly userSelect: stylex.StyleXClassNameFor<"userSelect", "none">;
+        readonly boxSizing: stylex.StyleXClassNameFor<"boxSizing", "border-box">;
+        readonly fontFamily: stylex.StyleXClassNameFor<"fontFamily", string>;
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "transparent">;
+        readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "background-color, color, border-color, box-shadow">;
+        readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "0.15s">;
+        readonly transitionTimingFunction: stylex.StyleXClassNameFor<"transitionTimingFunction", "ease-in-out">;
+        readonly textDecoration: stylex.StyleXClassNameFor<"textDecoration", "none">;
+    }>;
+    readonly itemSm: Readonly<{
+        readonly minHeight: stylex.StyleXClassNameFor<"minHeight", "28px">;
+        readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", string>;
+        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
+        readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
+        readonly gap: stylex.StyleXClassNameFor<"gap", string>;
+    }>;
+    readonly itemMd: Readonly<{
+        readonly minHeight: stylex.StyleXClassNameFor<"minHeight", "36px">;
+        readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", string>;
+        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
+        readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
+        readonly gap: stylex.StyleXClassNameFor<"gap", string>;
+    }>;
+    readonly itemLg: Readonly<{
+        readonly minHeight: stylex.StyleXClassNameFor<"minHeight", "44px">;
+        readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", string>;
+        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
+        readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
+        readonly gap: stylex.StyleXClassNameFor<"gap", string>;
+    }>;
+    readonly itemHovered: Readonly<{
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+    }>;
+    readonly itemFocused: Readonly<{
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+    }>;
+    readonly itemFocusVisible: Readonly<{
+        readonly outlineWidth: stylex.StyleXClassNameFor<"outlineWidth", "2px">;
+        readonly outlineStyle: stylex.StyleXClassNameFor<"outlineStyle", "solid">;
+        readonly outlineColor: stylex.StyleXClassNameFor<"outlineColor", string>;
+        readonly outlineOffset: stylex.StyleXClassNameFor<"outlineOffset", "-2px">;
+        readonly zIndex: stylex.StyleXClassNameFor<"zIndex", 1>;
+    }>;
+    readonly itemPressed: Readonly<{
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+    }>;
+    readonly itemSelected: Readonly<{
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", string>;
+    }>;
+    readonly itemSelectedFocusVisible: Readonly<{
+        readonly outlineColor: stylex.StyleXClassNameFor<"outlineColor", string>;
+    }>;
+    readonly itemDisabled: Readonly<{
+        readonly opacity: stylex.StyleXClassNameFor<"opacity", 0.4>;
+        readonly cursor: stylex.StyleXClassNameFor<"cursor", "not-allowed">;
+        readonly pointerEvents: stylex.StyleXClassNameFor<"pointerEvents", "none">;
+    }>;
+    readonly itemDragging: Readonly<{
+        readonly opacity: stylex.StyleXClassNameFor<"opacity", 0.5>;
+    }>;
+    readonly itemDropTarget: Readonly<{
+        readonly outlineWidth: stylex.StyleXClassNameFor<"outlineWidth", "2px">;
+        readonly outlineStyle: stylex.StyleXClassNameFor<"outlineStyle", "solid">;
+        readonly outlineColor: stylex.StyleXClassNameFor<"outlineColor", string>;
+        readonly outlineOffset: stylex.StyleXClassNameFor<"outlineOffset", "-1px">;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+    }>;
+    readonly itemContent: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+        readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+        readonly flex: stylex.StyleXClassNameFor<"flex", 1>;
+        readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 0>;
+        readonly gap: stylex.StyleXClassNameFor<"gap", string>;
+    }>;
+    readonly itemTextContainer: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+        readonly flexDirection: stylex.StyleXClassNameFor<"flexDirection", "column">;
+        readonly flex: stylex.StyleXClassNameFor<"flex", 1>;
+        readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 0>;
+        readonly textAlign: stylex.StyleXClassNameFor<"textAlign", "start">;
+    }>;
+    readonly itemLabel: Readonly<{
+        readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", string>;
+        readonly overflow: stylex.StyleXClassNameFor<"overflow", "hidden">;
+        readonly textOverflow: stylex.StyleXClassNameFor<"textOverflow", "ellipsis">;
+        readonly whiteSpace: stylex.StyleXClassNameFor<"whiteSpace", "nowrap">;
+    }>;
+    readonly itemDescription: Readonly<{
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
+        readonly overflow: stylex.StyleXClassNameFor<"overflow", "hidden">;
+        readonly textOverflow: stylex.StyleXClassNameFor<"textOverflow", "ellipsis">;
+    }>;
+    readonly itemCheckmark: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "inline-flex">;
+        readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+        readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "center">;
+        readonly flexShrink: stylex.StyleXClassNameFor<"flexShrink", 0>;
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly marginInlineStart: stylex.StyleXClassNameFor<"marginInlineStart", string>;
+    }>;
+    readonly section: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+        readonly flexDirection: stylex.StyleXClassNameFor<"flexDirection", "column">;
+        readonly gap: stylex.StyleXClassNameFor<"gap", "2px">;
+    }>;
+    readonly sectionHeader: Readonly<{
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
+        readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", string>;
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", string>;
+        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
+        readonly textTransform: stylex.StyleXClassNameFor<"textTransform", "uppercase">;
+        readonly letterSpacing: stylex.StyleXClassNameFor<"letterSpacing", "0.05em">;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+        readonly userSelect: stylex.StyleXClassNameFor<"userSelect", "none">;
+        readonly cursor: stylex.StyleXClassNameFor<"cursor", "default">;
+    }>;
+    readonly sectionHeaderSticky: Readonly<{
+        readonly position: stylex.StyleXClassNameFor<"position", "sticky">;
+        readonly top: stylex.StyleXClassNameFor<"top", 0>;
+        readonly zIndex: stylex.StyleXClassNameFor<"zIndex", 2>;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+        readonly borderBlockEndWidth: stylex.StyleXClassNameFor<"borderBlockEndWidth", "1px">;
+        readonly borderBlockEndStyle: stylex.StyleXClassNameFor<"borderBlockEndStyle", "solid">;
+        readonly borderBlockEndColor: stylex.StyleXClassNameFor<"borderBlockEndColor", string>;
+        readonly backdropFilter: stylex.StyleXClassNameFor<"backdropFilter", "blur(8px)">;
+        readonly WebkitBackdropFilter: stylex.StyleXClassNameFor<"WebkitBackdropFilter", "blur(8px)">;
+    }>;
+    readonly loadMore: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+        readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+        readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "center">;
+        readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", string>;
+        readonly width: stylex.StyleXClassNameFor<"width", "100%">;
+        readonly minHeight: stylex.StyleXClassNameFor<"minHeight", "36px">;
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+    }>;
+    readonly dropIndicator: Readonly<{
+        readonly position: stylex.StyleXClassNameFor<"position", "relative">;
+        readonly boxSizing: stylex.StyleXClassNameFor<"boxSizing", "border-box">;
+        readonly outline: stylex.StyleXClassNameFor<"outline", "none">;
+        readonly zIndex: stylex.StyleXClassNameFor<"zIndex", 5>;
+        readonly opacity: stylex.StyleXClassNameFor<"opacity", 0>;
+        readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "opacity">;
+        readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "0.15s">;
+        readonly transitionTimingFunction: stylex.StyleXClassNameFor<"transitionTimingFunction", "ease-in-out">;
+    }>;
+    readonly dropIndicatorHorizontal: Readonly<{
+        readonly width: stylex.StyleXClassNameFor<"width", "100%">;
+        readonly height: stylex.StyleXClassNameFor<"height", "2px">;
+        readonly marginBlock: stylex.StyleXClassNameFor<"marginBlock", "-1px">;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
+    }>;
+    readonly dropIndicatorVertical: Readonly<{
+        readonly height: stylex.StyleXClassNameFor<"height", "100%">;
+        readonly width: stylex.StyleXClassNameFor<"width", "2px">;
+        readonly marginInline: stylex.StyleXClassNameFor<"marginInline", "-1px">;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
+    }>;
+    readonly dropIndicatorTarget: Readonly<{
+        readonly opacity: stylex.StyleXClassNameFor<"opacity", 1>;
+    }>;
+}>;

package/dist/src/components/ListBox/index.d.ts

@@ -0,0 +1,2 @@
+export type { DropIndicatorProps, ListBoxItemProps, ListBoxLayout, ListBoxLoadMoreItemProps, ListBoxOrientation, ListBoxProps, ListBoxSectionProps, ListBoxSize, ListBoxVariant, } from './ListBox';
+export { DropIndicator, Header, ListBox, ListBoxItem, ListBoxLoadMoreItem, ListBoxSection, Text, } from './ListBox';

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

@@ -11,8 +11,21 @@ interface SidebarContextValue {
     onCollapseToggle: () => void;
     showCollapseToggle?: boolean;
     dense?: boolean;
+    isMobile: boolean;
+    enableMobileNav: boolean;
+    mobileBreakpoint?: number;
+    mobileNavScaleOnScroll: boolean;
+    maxMobileItems: number;
+    isScrolledDown: boolean;
+    setIsScrolledDown: React.Dispatch<React.SetStateAction<boolean>>;
+    isMoreOpen: boolean;
+    setIsMoreOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    hasMobileHeader: boolean;
+    setHasMobileHeader: React.Dispatch<React.SetStateAction<boolean>>;
+    registerScrollContainer?: (node: HTMLElement | null) => void;
 }
 export declare function useSidebar(): SidebarContextValue;
+export declare function useIsMobile(breakpoint?: number): boolean;
 export interface SidebarProps {
     isCollapsed?: boolean;
     defaultCollapsed?: boolean;
@@ -24,6 +37,11 @@ export interface SidebarProps {
     layout?: SidebarLayout;
     showCollapseToggle?: boolean;
     dense?: boolean;
+    isMobile?: boolean;
+    enableMobileNav?: boolean;
+    mobileBreakpoint?: number;
+    mobileNavScaleOnScroll?: boolean;
+    maxMobileItems?: number;
     style?: React.CSSProperties;
     className?: string;
     children?: React.ReactNode;