@soroush.tech/design-system 2.1.1 → 2.1.2-rc.0

package/dist/Modal.d.cts

@@ -1,2 +1,91 @@
-import { a as hideFromAria, c as ModalScroll, d as UseModalReturnValue, f as useModal, i as exposeToAria, l as ModalCloseReason, n as ManagedModalProps, o as Modal, r as ModalManager, s as ModalProps, t as ManagedModal, u as UseModalParameters } from "./index-vls8Jhdl.cjs";
-export { ManagedModal, ManagedModalProps, Modal, ModalCloseReason, ModalManager, ModalProps, ModalScroll, UseModalParameters, UseModalReturnValue, exposeToAria, hideFromAria, useModal };
+import { nt as Theme } from "./index-MipJMh6w.cjs";
+import { KeyboardEvent, MouseEvent, ReactNode, Ref, RefCallback, SyntheticEvent } from "react";
+export type ModalCloseReason = 'escapeKey' | 'backdropClick';
+type EventHandlers = Record<string, ((event: SyntheticEvent) => void) | undefined>;
+export interface UseModalParameters {
+  /** Whether the modal is shown. */
+  isOpen: boolean;
+  /** Fired on Escape (top modal only) or backdrop click. */
+  onClose?: (event: KeyboardEvent | MouseEvent, reason: ModalCloseReason) => void;
+  /** Portal container, or a function returning one. Defaults to the document body. */
+  container?: HTMLElement | (() => HTMLElement | null) | null;
+  /** Disable body scroll-lock while open. */
+  disableScrollLock?: boolean;
+  /** Skip `aria-hidden` on background siblings (for non-modal popovers). */
+  disableAriaHidden?: boolean;
+  /** Forwarded ref for the modal root element. */
+  rootRef?: Ref<Element>;
+}
+export interface UseModalReturnValue {
+  getRootProps: (otherHandlers?: EventHandlers) => Record<string, unknown>;
+  getBackdropProps: (otherHandlers?: EventHandlers) => Record<string, unknown>;
+  rootRef: RefCallback<Element> | null;
+  portalRef: (node: HTMLElement | null) => void;
+  isTopModal: () => boolean;
+}
+export declare function useModal(parameters: UseModalParameters): UseModalReturnValue;
+export type ModalScroll = 'paper' | 'body';
+export interface ModalProps {
+  /** If true, the modal is shown. */
+  isOpen: boolean;
+  /** A single content element. */
+  children: ReactNode;
+  /** Fired on Escape (top modal only) or backdrop click. */
+  onClose?: (event: Event | React.SyntheticEvent, reason: ModalCloseReason) => void;
+  /** Render the dimmed backdrop. Default: true. */
+  hasBackdrop?: boolean;
+  /** Keep the children mounted while closed. Default: false. */
+  shouldKeepMounted?: boolean;
+  /** Portal the modal into `portalContainer`. Default: true. */
+  shouldUsePortal?: boolean;
+  /** Portal target, or a function returning one. Defaults to the document body. */
+  portalContainer?: HTMLElement | (() => HTMLElement | null) | null;
+  /** Lock body scroll while open. Default: true. */
+  shouldLockScroll?: boolean;
+  /** Skip `aria-hidden` on background content - for non-modal popovers whose trigger stays focused. Default: false. */
+  disableAriaHidden?: boolean;
+  /** Move focus into the modal on open. Default: true. */
+  shouldAutoFocus?: boolean;
+  /** Trap Tab focus within the modal. Default: true. */
+  shouldTrapFocus?: boolean;
+  /** Pull focus back into the modal whenever it escapes. Default: true. */
+  shouldEnforceFocus?: boolean;
+  /** Restore focus to the trigger on close. Default: true. */
+  shouldRestoreFocus?: boolean;
+  /** How long content scrolls: within the content (`'paper'`) or the whole root (`'body'`). Default: 'paper'. */
+  scroll?: ModalScroll;
+  /** Stacking layer from `theme.zOrder`. Default: 'modal'. */
+  layer?: keyof Theme['zOrder'];
+}
+/**
+ * @description Accessible overlay primitive: portals its content, dims the page,
+ * traps focus, locks scroll, and closes on Escape or backdrop click. The base for
+ * higher-level overlays such as Drawer.
+ */
+export declare function Modal({ isOpen, children, onClose, hasBackdrop, shouldKeepMounted, shouldUsePortal, portalContainer, shouldLockScroll, disableAriaHidden, shouldAutoFocus, shouldTrapFocus, shouldEnforceFocus, shouldRestoreFocus, scroll, layer }: Readonly<ModalProps>): import("react").JSX.Element | null;
+/** A modal tracked by the manager: its portal mount node and its root element. */
+export interface ManagedModal {
+  mount: Element;
+  modalRef: Element;
+}
+export interface ManagedModalProps {
+  disableScrollLock?: boolean;
+}
+/** Hides an element from assistive tech. */
+export declare function hideFromAria(element: Element): void;
+/** Reveals an element to assistive tech again. */
+export declare function exposeToAria(element: Element): void;
+/**
+ * Tracks every open modal and the containers they live in. A single shared
+ * instance coordinates stacking (`isTopModal`), scroll-lock, and `aria-hidden`
+ * on background siblings so assistive tech only sees the active modal.
+ */
+export declare class ModalManager {
+  private readonly modals;
+  private readonly containers;
+  add(modal: ManagedModal, container: HTMLElement, disableAriaHidden?: boolean): number;
+  mount(modal: ManagedModal, props: ManagedModalProps): void;
+  remove(modal: ManagedModal, ariaHiddenState?: boolean): number;
+  isTopModal(modal: ManagedModal): boolean;
+}
+export {};

package/dist/Modal.d.mts

@@ -1,2 +1,2 @@
-import { a as hideFromAria, c as ModalScroll, d as UseModalReturnValue, f as useModal, i as exposeToAria, l as ModalCloseReason, n as ManagedModalProps, o as Modal, r as ModalManager, s as ModalProps, t as ManagedModal, u as UseModalParameters } from "./index-COGZ6LV4.mjs";
+import { a as hideFromAria, c as ModalScroll, d as UseModalReturnValue, f as useModal, i as exposeToAria, l as ModalCloseReason, n as ManagedModalProps, o as Modal, r as ModalManager, s as ModalProps, t as ManagedModal, u as UseModalParameters } from "./index-CF6cynkC.mjs";
 export { ManagedModal, ManagedModalProps, Modal, ModalCloseReason, ModalManager, ModalProps, ModalScroll, UseModalParameters, UseModalReturnValue, exposeToAria, hideFromAria, useModal };

package/dist/Modal.mjs

@@ -1 +1 @@
-export { t as Modal, r as ModalManager, i as exposeToAria, a as hideFromAria, n as useModal } from "./Modal-DR4TRQSH.mjs";
+export { t as Modal, r as ModalManager, i as exposeToAria, a as hideFromAria, n as useModal } from "./Modal-EH6RduGc.mjs";

package/dist/NativeSelect.cjs

@@ -1,10 +1,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("./src-yC1f5WR2.cjs");
+const require_FormControl = require("./FormControl.cjs");
+const require_Icon = require("./Icon-C4QMiNHJ.cjs");
+const require_src = require("./src-B1PmaZ-2.cjs");
 const require_theme = require("./theme-XJvMdOnY.cjs");
+const require_inputVariantStyles = require("./inputVariantStyles-GsJaknFt.cjs");
 const require_themeDefault = require("./themeDefault-DbPHBbNO.cjs");
-const require_Icon = require("./Icon-C5Iz5ekp.cjs");
-const require_inputVariantStyles = require("./inputVariantStyles-DhClkDHY.cjs");
-const require_FormControl = require("./FormControl.cjs");
 require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _soroush_tech_styled_system_should_forward_prop = require("@soroush.tech/styled-system/should-forward-prop");

package/dist/NativeSelect.d.cts

@@ -1,17 +1,17 @@
-import { nt as Theme } from "./index-CK-uaK5U.cjs";
-import { n as IconProps, r as IconName } from "./index-CLTH0nFB.cjs";
+import { n as IconProps, r as IconName } from "./index-CjIlieUz.cjs";
+import { nt as Theme } from "./index-MipJMh6w.cjs";
 import { SelectHTMLAttributes } from "react";
 import { LayoutProps, SpaceProps } from "@soroush.tech/styled-system";
-type NativeSelectColor = keyof Theme['palette'];
-type NativeSelectTextColor = keyof Theme['text'];
-type NativeSelectBackgroundToken = keyof Theme['background'];
-type NativeSelectVariant = 'default' | 'outlined' | 'text' | 'underline';
-type NativeSelectSize = keyof Theme['sizes'];
-interface NativeSelectOption {
+export type NativeSelectColor = keyof Theme['palette'];
+export type NativeSelectTextColor = keyof Theme['text'];
+export type NativeSelectBackgroundToken = keyof Theme['background'];
+export type NativeSelectVariant = 'default' | 'outlined' | 'text' | 'underline';
+export type NativeSelectSize = keyof Theme['sizes'];
+export interface NativeSelectOption {
   label: string;
   value: string | number;
 }
-interface NativeSelectProps extends SpaceProps<Theme>, Pick<LayoutProps<Theme>, 'width' | 'minWidth' | 'maxWidth'> {
+export interface NativeSelectProps extends SpaceProps<Theme>, Pick<LayoutProps<Theme>, 'width' | 'minWidth' | 'maxWidth'> {
   /** The options to populate the select with. */
   options: NativeSelectOption[];
   /** Controlled value - matches an option's `value`. */
@@ -57,5 +57,4 @@ interface NativeSelectProps extends SpaceProps<Theme>, Pick<LayoutProps<Theme>,
   className?: string;
   'data-testid'?: string;
 }
-declare function NativeSelect({ options, value, defaultValue, onChange, placeholder, borderRadius, color: colorProp, textColor: textColorProp, bg, disabled: disabledProp, error: errorProp, fullWidth: fullWidthProp, iconName, iconProps, selectProps, id: idProp, name, required: requiredProp, size: sizeProp, variant: variantProp, className, 'data-testid': dataTestid, ...spaceProps }: Readonly<NativeSelectProps>): import("react").JSX.Element;
-export { NativeSelect, NativeSelectBackgroundToken, NativeSelectColor, NativeSelectOption, NativeSelectProps, NativeSelectSize, NativeSelectTextColor, NativeSelectVariant };
+export declare function NativeSelect({ options, value, defaultValue, onChange, placeholder, borderRadius, color: colorProp, textColor: textColorProp, bg, disabled: disabledProp, error: errorProp, fullWidth: fullWidthProp, iconName, iconProps, selectProps, id: idProp, name, required: requiredProp, size: sizeProp, variant: variantProp, className, 'data-testid': dataTestid, ...spaceProps }: Readonly<NativeSelectProps>): import("react").JSX.Element;

package/dist/NativeSelect.d.mts

@@ -1,17 +1,17 @@
-import { nt as Theme } from "./index-B-1sp9oV.mjs";
-import { n as IconProps, r as IconName } from "./index-BDVi1DNs.mjs";
+import { n as IconProps, r as IconName } from "./index-Dv-JacXL.mjs";
+import { nt as Theme } from "./index-nw0pvCoK.mjs";
 import { LayoutProps, SpaceProps } from "@soroush.tech/styled-system";
 import { SelectHTMLAttributes } from "react";
-type NativeSelectColor = keyof Theme['palette'];
-type NativeSelectTextColor = keyof Theme['text'];
-type NativeSelectBackgroundToken = keyof Theme['background'];
-type NativeSelectVariant = 'default' | 'outlined' | 'text' | 'underline';
-type NativeSelectSize = keyof Theme['sizes'];
-interface NativeSelectOption {
+export type NativeSelectColor = keyof Theme['palette'];
+export type NativeSelectTextColor = keyof Theme['text'];
+export type NativeSelectBackgroundToken = keyof Theme['background'];
+export type NativeSelectVariant = 'default' | 'outlined' | 'text' | 'underline';
+export type NativeSelectSize = keyof Theme['sizes'];
+export interface NativeSelectOption {
   label: string;
   value: string | number;
 }
-interface NativeSelectProps extends SpaceProps<Theme>, Pick<LayoutProps<Theme>, 'width' | 'minWidth' | 'maxWidth'> {
+export interface NativeSelectProps extends SpaceProps<Theme>, Pick<LayoutProps<Theme>, 'width' | 'minWidth' | 'maxWidth'> {
   /** The options to populate the select with. */
   options: NativeSelectOption[];
   /** Controlled value - matches an option's `value`. */
@@ -57,5 +57,4 @@ interface NativeSelectProps extends SpaceProps<Theme>, Pick<LayoutProps<Theme>,
   className?: string;
   'data-testid'?: string;
 }
-declare function NativeSelect({ options, value, defaultValue, onChange, placeholder, borderRadius, color: colorProp, textColor: textColorProp, bg, disabled: disabledProp, error: errorProp, fullWidth: fullWidthProp, iconName, iconProps, selectProps, id: idProp, name, required: requiredProp, size: sizeProp, variant: variantProp, className, 'data-testid': dataTestid, ...spaceProps }: Readonly<NativeSelectProps>): import("react").JSX.Element;
-export { NativeSelect, NativeSelectBackgroundToken, NativeSelectColor, NativeSelectOption, NativeSelectProps, NativeSelectSize, NativeSelectTextColor, NativeSelectVariant };
+export declare function NativeSelect({ options, value, defaultValue, onChange, placeholder, borderRadius, color: colorProp, textColor: textColorProp, bg, disabled: disabledProp, error: errorProp, fullWidth: fullWidthProp, iconName, iconProps, selectProps, id: idProp, name, required: requiredProp, size: sizeProp, variant: variantProp, className, 'data-testid': dataTestid, ...spaceProps }: Readonly<NativeSelectProps>): import("react").JSX.Element;

package/dist/NativeSelect.mjs

@@ -1,9 +1,9 @@
-import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-B-rNjHIL.mjs";
-import { r as useTheme } from "./theme-DyyZQFzQ.mjs";
-import { t as themeDefault } from "./themeDefault-BeZJzqJj.mjs";
-import { t as Icon } from "./Icon-XpXU-SuF.mjs";
-import { n as getFocusRing, r as getInputMinWidth, t as inputVariantStyles } from "./inputVariantStyles-DCGRUY9c.mjs";
 import { useFormControl } from "./FormControl.mjs";
+import { t as Icon } from "./Icon-gVHlFgdH.mjs";
+import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-BSo7bM2g.mjs";
+import { r as useTheme } from "./theme-B6LFWZ98.mjs";
+import { n as getFocusRing, r as getInputMinWidth, t as inputVariantStyles } from "./inputVariantStyles-GEyyFeaq.mjs";
+import { t as themeDefault } from "./themeDefault-BeZJzqJj.mjs";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 // src/NativeSelect/NativeSelect.tsx

package/dist/NavTree/NavGroup.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("../src-yC1f5WR2.cjs");
+const require_src = require("../src-B1PmaZ-2.cjs");
 const require_utils = require("../utils.cjs");
 const require_Typography = require("../Typography.cjs");
 let react = require("react");

package/dist/NavTree/NavGroup.d.cts

@@ -1,5 +1,5 @@
 import { HTMLAttributes, ReactNode } from "react";
-interface NavGroupProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+export interface NavGroupProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
   /** The group's name - a heading over its links, or the button that folds it. */
   label: ReactNode;
   /** The `NavLink`s of the group - each is put in a list item of the group's list. */
@@ -17,5 +17,4 @@ interface NavGroupProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
  * heading and the links always show; collapsible, the name is a `summary` and the links fold under
  * it - a native `details`, so it folds and opens with scripts off.
  */
-declare function NavGroup({ label, children, isCollapsible, isOpen, ...rest }: Readonly<NavGroupProps>): import("react").JSX.Element;
-export { NavGroup, NavGroupProps };
+export declare function NavGroup({ label, children, isCollapsible, isOpen, ...rest }: Readonly<NavGroupProps>): import("react").JSX.Element;

package/dist/NavTree/NavGroup.d.mts

@@ -1,5 +1,5 @@
 import { HTMLAttributes, ReactNode } from "react";
-interface NavGroupProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+export interface NavGroupProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
   /** The group's name - a heading over its links, or the button that folds it. */
   label: ReactNode;
   /** The `NavLink`s of the group - each is put in a list item of the group's list. */
@@ -17,5 +17,4 @@ interface NavGroupProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
  * heading and the links always show; collapsible, the name is a `summary` and the links fold under
  * it - a native `details`, so it folds and opens with scripts off.
  */
-declare function NavGroup({ label, children, isCollapsible, isOpen, ...rest }: Readonly<NavGroupProps>): import("react").JSX.Element;
-export { NavGroup, NavGroupProps };
+export declare function NavGroup({ label, children, isCollapsible, isOpen, ...rest }: Readonly<NavGroupProps>): import("react").JSX.Element;

package/dist/NavTree/NavGroup.mjs

@@ -1,4 +1,4 @@
-import { a as src_exports, o as styled } from "../src-B-rNjHIL.mjs";
+import { a as src_exports, o as styled } from "../src-BSo7bM2g.mjs";
 import { alpha } from "../utils.mjs";
 import { Typography } from "../Typography.mjs";
 import { Children, useId } from "react";

package/dist/NavTree/NavLink.cjs

@@ -1,7 +1,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("../src-yC1f5WR2.cjs");
+const require_src = require("../src-B1PmaZ-2.cjs");
+const require_Icon = require("../Icon-C4QMiNHJ.cjs");
 const require_utils = require("../utils.cjs");
-const require_Icon = require("../Icon-C5Iz5ekp.cjs");
 const require_NavTreeContext = require("../NavTreeContext-DrxNyII8.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/NavTree/NavLink.d.cts

@@ -1,6 +1,6 @@
-import { nt as Theme } from "../index-CK-uaK5U.cjs";
+import { nt as Theme } from "../index-MipJMh6w.cjs";
 import { AnchorHTMLAttributes, ReactNode } from "react";
-interface NavLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'color'> {
+export interface NavLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'color'> {
   /** Where it goes. */
   href: string;
   /** The name of the page. */
@@ -20,5 +20,4 @@ interface NavLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'co
  * as any link - with `aria-current="page"` for the current one. An external link opens in a tab
  * of its own, `noopener noreferrer`, and carries an arrow so it is not taken for a page here.
  */
-declare function NavLink({ children, isCurrent, note, isExternal, color, ...rest }: Readonly<NavLinkProps>): import("react").JSX.Element;
-export { NavLink, NavLinkProps };
+export declare function NavLink({ children, isCurrent, note, isExternal, color, ...rest }: Readonly<NavLinkProps>): import("react").JSX.Element;

package/dist/NavTree/NavLink.d.mts

@@ -1,6 +1,6 @@
-import { nt as Theme } from "../index-B-1sp9oV.mjs";
+import { nt as Theme } from "../index-nw0pvCoK.mjs";
 import { AnchorHTMLAttributes, ReactNode } from "react";
-interface NavLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'color'> {
+export interface NavLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'color'> {
   /** Where it goes. */
   href: string;
   /** The name of the page. */
@@ -20,5 +20,4 @@ interface NavLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'co
  * as any link - with `aria-current="page"` for the current one. An external link opens in a tab
  * of its own, `noopener noreferrer`, and carries an arrow so it is not taken for a page here.
  */
-declare function NavLink({ children, isCurrent, note, isExternal, color, ...rest }: Readonly<NavLinkProps>): import("react").JSX.Element;
-export { NavLink, NavLinkProps };
+export declare function NavLink({ children, isCurrent, note, isExternal, color, ...rest }: Readonly<NavLinkProps>): import("react").JSX.Element;

package/dist/NavTree/NavLink.mjs

@@ -1,6 +1,6 @@
-import { a as src_exports, o as styled, t as createShouldForwardProp } from "../src-B-rNjHIL.mjs";
+import { a as src_exports, o as styled, t as createShouldForwardProp } from "../src-BSo7bM2g.mjs";
+import { t as Icon } from "../Icon-gVHlFgdH.mjs";
 import { alpha } from "../utils.mjs";
-import { t as Icon } from "../Icon-XpXU-SuF.mjs";
 import { t as NavTreeContext } from "../NavTreeContext-Cs0zC5hK.mjs";
 import { useContext } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/NavTree/NavTree.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("../src-yC1f5WR2.cjs");
+const require_src = require("../src-B1PmaZ-2.cjs");
 const require_Flex = require("../Flex.cjs");
 const require_NavTreeContext = require("../NavTreeContext-DrxNyII8.cjs");
 let react = require("react");

package/dist/NavTree/NavTree.d.cts

@@ -1,5 +1,5 @@
-import { dn as FlexProps, nt as Theme } from "../index-CK-uaK5U.cjs";
-interface NavTreeProps extends FlexProps {
+import { dn as FlexProps, nt as Theme } from "../index-MipJMh6w.cjs";
+export interface NavTreeProps extends FlexProps {
   /** Palette color of the current page's pill, a hovered link and the focus ring - resolves to `theme.palette`. Default: `'primary'`. */
   color?: keyof Theme['palette'];
 }
@@ -10,5 +10,4 @@ interface NavTreeProps extends FlexProps {
  * folds is a native `details`. Put it in a landmark of your own - a `nav`, or the panel of a
  * `Sidebar`. Any `Flex` prop applies.
  */
-declare function NavTree({ color, ...rest }: Readonly<NavTreeProps>): import("react").JSX.Element;
-export { NavTree, NavTreeProps };
+export declare function NavTree({ color, ...rest }: Readonly<NavTreeProps>): import("react").JSX.Element;

package/dist/NavTree/NavTree.d.mts

@@ -1,5 +1,5 @@
-import { dn as FlexProps, nt as Theme } from "../index-B-1sp9oV.mjs";
-interface NavTreeProps extends FlexProps {
+import { dn as FlexProps, nt as Theme } from "../index-nw0pvCoK.mjs";
+export interface NavTreeProps extends FlexProps {
   /** Palette color of the current page's pill, a hovered link and the focus ring - resolves to `theme.palette`. Default: `'primary'`. */
   color?: keyof Theme['palette'];
 }
@@ -10,5 +10,4 @@ interface NavTreeProps extends FlexProps {
  * folds is a native `details`. Put it in a landmark of your own - a `nav`, or the panel of a
  * `Sidebar`. Any `Flex` prop applies.
  */
-declare function NavTree({ color, ...rest }: Readonly<NavTreeProps>): import("react").JSX.Element;
-export { NavTree, NavTreeProps };
+export declare function NavTree({ color, ...rest }: Readonly<NavTreeProps>): import("react").JSX.Element;

package/dist/NavTree/NavTree.mjs

@@ -1,4 +1,4 @@
-import { o as styled } from "../src-B-rNjHIL.mjs";
+import { o as styled } from "../src-BSo7bM2g.mjs";
 import { Flex } from "../Flex.mjs";
 import { t as NavTreeContext } from "../NavTreeContext-Cs0zC5hK.mjs";
 import { useMemo } from "react";

package/dist/NavTree.d.cts

@@ -1,4 +1,4 @@
+import { NavTree, NavTreeProps } from "./NavTree/NavTree.cjs";
 import { NavGroup, NavGroupProps } from "./NavTree/NavGroup.cjs";
 import { NavLink, NavLinkProps } from "./NavTree/NavLink.cjs";
-import { NavTree, NavTreeProps } from "./NavTree/NavTree.cjs";
 export { NavGroup, NavGroupProps, NavLink, NavLinkProps, NavTree, NavTreeProps };

package/dist/NavTree.d.mts

@@ -1,4 +1,4 @@
+import { NavTree, NavTreeProps } from "./NavTree/NavTree.mjs";
 import { NavGroup, NavGroupProps } from "./NavTree/NavGroup.mjs";
 import { NavLink, NavLinkProps } from "./NavTree/NavLink.mjs";
-import { NavTree, NavTreeProps } from "./NavTree/NavTree.mjs";
 export { NavGroup, NavGroupProps, NavLink, NavLinkProps, NavTree, NavTreeProps };

package/dist/NumberInput.cjs

@@ -1,13 +1,13 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("./src-yC1f5WR2.cjs");
-const require_utils = require("./utils.cjs");
+const require_src = require("./src-B1PmaZ-2.cjs");
 const require_theme = require("./theme-XJvMdOnY.cjs");
+const require_FormControl = require("./FormControl.cjs");
+const require_FormControlContext = require("./FormControlContext-DvEyxrdM.cjs");
+const require_Icon = require("./Icon-C4QMiNHJ.cjs");
 const require_themeDefault = require("./themeDefault-DbPHBbNO.cjs");
+const require_inputVariantStyles = require("./inputVariantStyles-GsJaknFt.cjs");
+const require_utils = require("./utils.cjs");
 const require_useControlled = require("./useControlled-CzCxM4J3.cjs");
-const require_Icon = require("./Icon-C5Iz5ekp.cjs");
-const require_inputVariantStyles = require("./inputVariantStyles-DhClkDHY.cjs");
-const require_FormControlContext = require("./FormControlContext-DvEyxrdM.cjs");
-const require_FormControl = require("./FormControl.cjs");
 const require_precision = require("./precision-DbF9gToz.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/NumberInput.d.cts

@@ -1,9 +1,9 @@
-import { nt as Theme } from "./index-CK-uaK5U.cjs";
+import { nt as Theme } from "./index-MipJMh6w.cjs";
 import { ReactNode } from "react";
 import { LayoutProps, SpaceProps } from "@soroush.tech/styled-system";
-type NumberInputVariant = 'default' | 'outlined' | 'text' | 'underline';
-type NumberInputSpinButtons = 'stacked' | 'sides' | 'none';
-interface NumberInputProps extends SpaceProps<Theme>, Pick<LayoutProps<Theme>, 'width' | 'minWidth' | 'maxWidth'> {
+export type NumberInputVariant = 'default' | 'outlined' | 'text' | 'underline';
+export type NumberInputSpinButtons = 'stacked' | 'sides' | 'none';
+export interface NumberInputProps extends SpaceProps<Theme>, Pick<LayoutProps<Theme>, 'width' | 'minWidth' | 'maxWidth'> {
   /** The number - `null` for none. Controlled with `onChange`. */
   value?: number | null;
   /** The number at first, when uncontrolled. */
@@ -73,5 +73,4 @@ interface NumberInputProps extends SpaceProps<Theme>, Pick<LayoutProps<Theme>, '
  * number to a form. In a `FormControl` it takes the field's size, color, error, disabled and
  * required state, and its `FormLabel` targets the field.
  */
-declare function NumberInput({ value, defaultValue, onChange, onChangeCommitted, min, max, step: stepProp, smallStep: smallStepProp, largeStep: largeStepProp, format, locale, shouldSnapOnStep: shouldSnapProp, shouldScrubOnWheel: shouldScrubProp, spinButtons: spinButtonsProp, incrementLabel: incrementLabelProp, decrementLabel: decrementLabelProp, variant: variantProp, size: sizeProp, color: colorProp, textColor: textColorProp, error: errorProp, disabled: disabledProp, readOnly, required: requiredProp, fullWidth: fullWidthProp, name, id: idProp, placeholder, autoFocus, startContent, endContent, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, 'data-testid': dataTestid, ...rest }: Readonly<NumberInputProps>): import("react").JSX.Element;
-export { NumberInput, NumberInputProps, NumberInputSpinButtons, NumberInputVariant };
+export declare function NumberInput({ value, defaultValue, onChange, onChangeCommitted, min, max, step: stepProp, smallStep: smallStepProp, largeStep: largeStepProp, format, locale, shouldSnapOnStep: shouldSnapProp, shouldScrubOnWheel: shouldScrubProp, spinButtons: spinButtonsProp, incrementLabel: incrementLabelProp, decrementLabel: decrementLabelProp, variant: variantProp, size: sizeProp, color: colorProp, textColor: textColorProp, error: errorProp, disabled: disabledProp, readOnly, required: requiredProp, fullWidth: fullWidthProp, name, id: idProp, placeholder, autoFocus, startContent, endContent, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, 'data-testid': dataTestid, ...rest }: Readonly<NumberInputProps>): import("react").JSX.Element;

package/dist/NumberInput.d.mts

@@ -1,9 +1,9 @@
-import { nt as Theme } from "./index-B-1sp9oV.mjs";
+import { nt as Theme } from "./index-nw0pvCoK.mjs";
 import { LayoutProps, SpaceProps } from "@soroush.tech/styled-system";
 import { ReactNode } from "react";
-type NumberInputVariant = 'default' | 'outlined' | 'text' | 'underline';
-type NumberInputSpinButtons = 'stacked' | 'sides' | 'none';
-interface NumberInputProps extends SpaceProps<Theme>, Pick<LayoutProps<Theme>, 'width' | 'minWidth' | 'maxWidth'> {
+export type NumberInputVariant = 'default' | 'outlined' | 'text' | 'underline';
+export type NumberInputSpinButtons = 'stacked' | 'sides' | 'none';
+export interface NumberInputProps extends SpaceProps<Theme>, Pick<LayoutProps<Theme>, 'width' | 'minWidth' | 'maxWidth'> {
   /** The number - `null` for none. Controlled with `onChange`. */
   value?: number | null;
   /** The number at first, when uncontrolled. */
@@ -73,5 +73,4 @@ interface NumberInputProps extends SpaceProps<Theme>, Pick<LayoutProps<Theme>, '
  * number to a form. In a `FormControl` it takes the field's size, color, error, disabled and
  * required state, and its `FormLabel` targets the field.
  */
-declare function NumberInput({ value, defaultValue, onChange, onChangeCommitted, min, max, step: stepProp, smallStep: smallStepProp, largeStep: largeStepProp, format, locale, shouldSnapOnStep: shouldSnapProp, shouldScrubOnWheel: shouldScrubProp, spinButtons: spinButtonsProp, incrementLabel: incrementLabelProp, decrementLabel: decrementLabelProp, variant: variantProp, size: sizeProp, color: colorProp, textColor: textColorProp, error: errorProp, disabled: disabledProp, readOnly, required: requiredProp, fullWidth: fullWidthProp, name, id: idProp, placeholder, autoFocus, startContent, endContent, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, 'data-testid': dataTestid, ...rest }: Readonly<NumberInputProps>): import("react").JSX.Element;
-export { NumberInput, NumberInputProps, NumberInputSpinButtons, NumberInputVariant };
+export declare function NumberInput({ value, defaultValue, onChange, onChangeCommitted, min, max, step: stepProp, smallStep: smallStepProp, largeStep: largeStepProp, format, locale, shouldSnapOnStep: shouldSnapProp, shouldScrubOnWheel: shouldScrubProp, spinButtons: spinButtonsProp, incrementLabel: incrementLabelProp, decrementLabel: decrementLabelProp, variant: variantProp, size: sizeProp, color: colorProp, textColor: textColorProp, error: errorProp, disabled: disabledProp, readOnly, required: requiredProp, fullWidth: fullWidthProp, name, id: idProp, placeholder, autoFocus, startContent, endContent, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, 'data-testid': dataTestid, ...rest }: Readonly<NumberInputProps>): import("react").JSX.Element;

package/dist/NumberInput.mjs

@@ -1,12 +1,12 @@
-import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-B-rNjHIL.mjs";
-import { clamp } from "./utils.mjs";
-import { n as useDefaultProps, r as useTheme } from "./theme-DyyZQFzQ.mjs";
+import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-BSo7bM2g.mjs";
+import { n as useDefaultProps, r as useTheme } from "./theme-B6LFWZ98.mjs";
+import { useFormControl } from "./FormControl.mjs";
+import { t as FormControlContext } from "./FormControlContext-Dg_ommiF.mjs";
+import { t as Icon } from "./Icon-gVHlFgdH.mjs";
 import { t as themeDefault } from "./themeDefault-BeZJzqJj.mjs";
+import { n as getFocusRing, r as getInputMinWidth, t as inputVariantStyles } from "./inputVariantStyles-GEyyFeaq.mjs";
+import { clamp } from "./utils.mjs";
 import { t as useControlled } from "./useControlled-B4uQ9Bj6.mjs";
-import { t as Icon } from "./Icon-XpXU-SuF.mjs";
-import { n as getFocusRing, r as getInputMinWidth, t as inputVariantStyles } from "./inputVariantStyles-DCGRUY9c.mjs";
-import { t as FormControlContext } from "./FormControlContext-Dg_ommiF.mjs";
-import { useFormControl } from "./FormControl.mjs";
 import { i as snapToStep, n as getDecimalPrecision, t as addExact } from "./precision-DrmFmgMd.mjs";
 import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/Pagination/PaginationItem.cjs

@@ -1,8 +1,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("../src-yC1f5WR2.cjs");
+const require_Icon = require("../Icon-C4QMiNHJ.cjs");
+const require_src = require("../src-B1PmaZ-2.cjs");
 const require_utils = require("../utils.cjs");
 const require_themeDefault = require("../themeDefault-DbPHBbNO.cjs");
-const require_Icon = require("../Icon-C5Iz5ekp.cjs");
 require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _soroush_tech_styled_system_should_forward_prop = require("@soroush.tech/styled-system/should-forward-prop");

package/dist/Pagination/PaginationItem.d.cts

@@ -1,2 +1,2 @@
-import { a as PaginationItemSize, i as PaginationItemShape, n as PaginationItemColor, o as PaginationItemVariant, r as PaginationItemProps, t as PaginationItem } from "../index-CwWM6Xfz.cjs";
+import { a as PaginationItemSize, i as PaginationItemShape, n as PaginationItemColor, o as PaginationItemVariant, r as PaginationItemProps, t as PaginationItem } from "../index-Ck1kZGKo.cjs";
 export { PaginationItem, PaginationItemColor, PaginationItemProps, PaginationItemShape, PaginationItemSize, PaginationItemVariant };

package/dist/Pagination/PaginationItem.d.mts

@@ -1,2 +1,2 @@
-import { a as PaginationItemSize, i as PaginationItemShape, n as PaginationItemColor, o as PaginationItemVariant, r as PaginationItemProps, t as PaginationItem } from "../index-C9jnQ-mQ.mjs";
+import { a as PaginationItemSize, i as PaginationItemShape, n as PaginationItemColor, o as PaginationItemVariant, r as PaginationItemProps, t as PaginationItem } from "../index-CRopLcd3.mjs";
 export { PaginationItem, PaginationItemColor, PaginationItemProps, PaginationItemShape, PaginationItemSize, PaginationItemVariant };

package/dist/Pagination/PaginationItem.mjs

@@ -1,7 +1,7 @@
-import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "../src-B-rNjHIL.mjs";
+import { t as Icon } from "../Icon-gVHlFgdH.mjs";
+import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "../src-BSo7bM2g.mjs";
 import { alpha } from "../utils.mjs";
 import { t as themeDefault } from "../themeDefault-BeZJzqJj.mjs";
-import { t as Icon } from "../Icon-XpXU-SuF.mjs";
 import "react";
 import { jsx } from "react/jsx-runtime";
 // src/Pagination/PaginationItem/PaginationItem.tsx

package/dist/Pagination.cjs

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("./src-yC1f5WR2.cjs");
 const require_Pagination_PaginationItem = require("./Pagination/PaginationItem.cjs");
+const require_src = require("./src-B1PmaZ-2.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _soroush_tech_styled_system_should_forward_prop = require("@soroush.tech/styled-system/should-forward-prop");

package/dist/Pagination.d.cts

@@ -1,3 +1,22 @@
-import { a as PaginationItemSize, c as UsePaginationItem, i as PaginationItemShape, l as UsePaginationProps, n as PaginationItemColor, o as PaginationItemVariant, r as PaginationItemProps, s as PaginationItemType, t as PaginationItem, u as usePagination } from "./index-CwWM6Xfz.cjs";
-import { a as PaginationSize, i as PaginationShape, n as PaginationColor, o as PaginationVariant, r as PaginationProps, t as Pagination } from "./index-BhWBXIkH.cjs";
-export { Pagination, PaginationColor, PaginationItem, PaginationItemColor, PaginationItemProps, PaginationItemShape, PaginationItemSize, PaginationItemType, PaginationItemVariant, PaginationProps, PaginationShape, PaginationSize, PaginationVariant, UsePaginationItem, UsePaginationProps, usePagination };
+import { a as PaginationItemSize, c as UsePaginationItem, i as PaginationItemShape, l as UsePaginationProps, n as PaginationItemColor, o as PaginationItemVariant, r as PaginationItemProps, s as PaginationItemType, t as PaginationItem, u as usePagination } from "./index-Ck1kZGKo.cjs";
+import { nt as Theme } from "./index-MipJMh6w.cjs";
+import { HTMLAttributes } from "react";
+import { SpaceProps } from "@soroush.tech/styled-system";
+export type PaginationColor = PaginationItemColor;
+export type PaginationVariant = PaginationItemVariant;
+export type PaginationShape = PaginationItemShape;
+export type PaginationSize = PaginationItemSize;
+export interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'color' | 'onChange'>, UsePaginationProps, SpaceProps<Theme> {
+  /** Selected-item color - resolves against `theme.palette`. Default: 'primary', overridable via `theme.defaults.color`. */
+  color?: PaginationColor;
+  /** Item style - `text` or `outlined`. Default: `'text'`. */
+  variant?: PaginationVariant;
+  /** Item corner shape. Default: `'circular'`. */
+  shape?: PaginationShape;
+  /** Item density - resolves against `theme.sizes`. Default: 'md', overridable via `theme.defaults.size`. */
+  size?: PaginationSize;
+  /** Accessible name per item - important for screen readers. A sensible default is provided. */
+  getItemAriaLabel?: (type: PaginationItemType, page: number | null, isSelected: boolean) => string;
+}
+export declare function Pagination({ count, page, defaultPage, siblingCount, boundaryCount, disabled, shouldShowFirstButton, shouldShowLastButton, shouldHidePrevButton, shouldHideNextButton, onChange, color, variant, shape, size, getItemAriaLabel, 'aria-label': ariaLabel, ...rest }: Readonly<PaginationProps>): import("react").JSX.Element;
+export { PaginationItem, PaginationItemColor, PaginationItemProps, PaginationItemShape, PaginationItemSize, PaginationItemType, PaginationItemVariant, UsePaginationItem, UsePaginationProps, usePagination };

package/dist/Pagination.d.mts

@@ -1,3 +1,3 @@
-import { a as PaginationItemSize, c as UsePaginationItem, i as PaginationItemShape, l as UsePaginationProps, n as PaginationItemColor, o as PaginationItemVariant, r as PaginationItemProps, s as PaginationItemType, t as PaginationItem, u as usePagination } from "./index-C9jnQ-mQ.mjs";
-import { a as PaginationSize, i as PaginationShape, n as PaginationColor, o as PaginationVariant, r as PaginationProps, t as Pagination } from "./index-Bwry7fNj.mjs";
+import { a as PaginationItemSize, c as UsePaginationItem, i as PaginationItemShape, l as UsePaginationProps, n as PaginationItemColor, o as PaginationItemVariant, r as PaginationItemProps, s as PaginationItemType, t as PaginationItem, u as usePagination } from "./index-CRopLcd3.mjs";
+import { a as PaginationSize, i as PaginationShape, n as PaginationColor, o as PaginationVariant, r as PaginationProps, t as Pagination } from "./index-fiGzE2_0.mjs";
 export { Pagination, PaginationColor, PaginationItem, PaginationItemColor, PaginationItemProps, PaginationItemShape, PaginationItemSize, PaginationItemType, PaginationItemVariant, PaginationProps, PaginationShape, PaginationSize, PaginationVariant, UsePaginationItem, UsePaginationProps, usePagination };

package/dist/Pagination.mjs

@@ -1,5 +1,5 @@
-import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-B-rNjHIL.mjs";
 import { PaginationItem } from "./Pagination/PaginationItem.mjs";
+import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-BSo7bM2g.mjs";
 import { useState } from "react";
 import { jsx } from "react/jsx-runtime";
 // src/Pagination/hooks/usePagination.ts

package/dist/Paper.cjs

@@ -1,8 +1,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("./src-yC1f5WR2.cjs");
+const require_src = require("./src-B1PmaZ-2.cjs");
 const require_theme = require("./theme-XJvMdOnY.cjs");
-const require_themeDefault = require("./themeDefault-DbPHBbNO.cjs");
 const require_Flex = require("./Flex.cjs");
+const require_themeDefault = require("./themeDefault-DbPHBbNO.cjs");
 require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/Paper/Paper.tsx

package/dist/Paper.d.cts

@@ -1,3 +1,2 @@
-import { cn as PaperElevation, ln as PaperProps, sn as Paper } from "./index-CK-uaK5U.cjs";
-import "./index-fwRQcB91.cjs";
+import { cn as PaperElevation, ln as PaperProps, sn as Paper } from "./index-MipJMh6w.cjs";
 export { Paper, PaperElevation, PaperProps };

package/dist/Paper.d.mts

@@ -1,3 +1,3 @@
-import { cn as PaperElevation, ln as PaperProps, sn as Paper } from "./index-B-1sp9oV.mjs";
-import "./index-C_n4ZPpQ.mjs";
+import { cn as PaperElevation, ln as PaperProps, sn as Paper } from "./index-nw0pvCoK.mjs";
+import "./index-BzWmnUjW.mjs";
 export { Paper, PaperElevation, PaperProps };

package/dist/Paper.mjs

@@ -1,7 +1,7 @@
-import { a as src_exports, o as styled, t as createShouldForwardProp } from "./src-B-rNjHIL.mjs";
-import { r as useTheme } from "./theme-DyyZQFzQ.mjs";
-import { t as themeDefault } from "./themeDefault-BeZJzqJj.mjs";
+import { a as src_exports, o as styled, t as createShouldForwardProp } from "./src-BSo7bM2g.mjs";
+import { r as useTheme } from "./theme-B6LFWZ98.mjs";
 import { Flex } from "./Flex.mjs";
+import { t as themeDefault } from "./themeDefault-BeZJzqJj.mjs";
 import "react";
 import { jsx } from "react/jsx-runtime";
 // src/Paper/Paper.tsx

package/dist/{Popover-BniabG7D.cjs → Popover-CPB9wIFY.cjs}

@@ -1,8 +1,8 @@
-const require_src = require("./src-yC1f5WR2.cjs");
+const require_src = require("./src-B1PmaZ-2.cjs");
 const require_theme = require("./theme-XJvMdOnY.cjs");
-const require_computePopoverPosition = require("./computePopoverPosition-C2W1FcYE.cjs");
+const require_Modal = require("./Modal-6SWc5gG5.cjs");
 const require_Paper = require("./Paper.cjs");
-const require_Modal = require("./Modal-gQcAJAKH.cjs");
+const require_computePopoverPosition = require("./computePopoverPosition-C2W1FcYE.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _soroush_tech_styled_system_should_forward_prop = require("@soroush.tech/styled-system/should-forward-prop");