twenty-ui 2.50.0 → 2.51.1

package/dist/components/input/DatePicker/types/DatePickerProps.d.ts

@@ -0,0 +1,42 @@
+import { useRender } from '@base-ui/react/use-render';
+import { ReactNode } from 'react';
+import { DatePickerHeaderProps } from './DatePickerHeaderProps';
+import { SelectPortalProps } from '../../../../primitives/input/Select/types/SelectPortalProps';
+export type DatePickerProps = Omit<useRender.ComponentProps<'div'>, 'children' | 'onChange' | 'defaultValue'> & {
+    value: string | null;
+    onValueChange: (date: string) => void;
+    onValueSelect?: (date: string) => void;
+    viewedMonth: string;
+    onViewedMonthChange: (month: string) => void;
+    highlightedRange?: {
+        start: string;
+        end: string;
+    };
+    readOnly?: boolean;
+    isGridHidden?: boolean;
+    weekStart: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    locale: string;
+    weekdayLabels?: readonly [
+        string,
+        string,
+        string,
+        string,
+        string,
+        string,
+        string
+    ];
+    previousMonthLabel: string;
+    nextMonthLabel: string;
+    monthLabel: string;
+    yearLabel: string;
+    portalContainer?: SelectPortalProps['container'];
+    onNavigationOpenChange?: (args: {
+        open: boolean;
+        control: 'month' | 'year';
+    }) => void;
+    isDateUnavailable?: (date: string) => boolean;
+    disabled?: boolean;
+    isKeyboardNavigationDisabled?: boolean;
+    loadingFallback?: ReactNode;
+    renderHeader?: (props: DatePickerHeaderProps) => ReactNode;
+};

package/dist/components/input/EmojiPicker/EmojiPicker.d.ts

@@ -0,0 +1,2 @@
+import { EmojiPickerProps } from './types/EmojiPickerProps';
+export declare const EmojiPicker: ({ emojibaseUrl, locale, searchLabel, searchPlaceholder, loadingLabel, emptyLabel, onEmojiSelect, autoFocus, className, ref, ...props }: EmojiPickerProps) => import("react").JSX.Element;

package/dist/components/input/EmojiPicker/__stories__/EmojiPickerExample.d.ts

@@ -0,0 +1,4 @@
+import { EmojiPickerProps } from '../types/EmojiPickerProps';
+type EmojiPickerExampleProps = Partial<Pick<EmojiPickerProps, 'emojibaseUrl' | 'searchLabel' | 'searchPlaceholder' | 'loadingLabel' | 'emptyLabel' | 'autoFocus' | 'onEmojiSelect'>>;
+export declare const EmojiPickerExample: ({ emojibaseUrl, searchLabel, searchPlaceholder, loadingLabel, emptyLabel, autoFocus, onEmojiSelect, }: EmojiPickerExampleProps) => import("react").JSX.Element;
+export {};

package/dist/components/input/EmojiPicker/__stories__/emojiPickerStoryData.d.ts

@@ -0,0 +1,30 @@
+export declare const EMOJI_PICKER_STORY_DATA: {
+    emojis: {
+        emoji: string;
+        label: string;
+        hexcode: string;
+        group: number;
+        subgroup: number;
+        version: number;
+        type: number;
+        order: number;
+        text: string;
+        tags: string[];
+    }[];
+    messages: {
+        groups: {
+            key: string;
+            message: string;
+            order: number;
+        }[];
+        subgroups: {
+            key: string;
+            message: string;
+            order: number;
+        }[];
+        skinTones: {
+            key: string;
+            message: string;
+        }[];
+    };
+};

package/dist/components/input/EmojiPicker/__stories__/emojiPickerStoryEmojibaseUrl.d.ts

@@ -0,0 +1 @@
+export declare const EMOJI_PICKER_STORY_EMOJIBASE_URL = "/emoji-picker-story";

package/dist/components/input/EmojiPicker/__stories__/mockEmojiPickerStoryData.d.ts

@@ -0,0 +1,5 @@
+import { EMOJI_PICKER_STORY_DATA } from './emojiPickerStoryData';
+export declare const mockEmojiPickerStoryData: ({ emojibaseUrl, emojis, }?: {
+    emojibaseUrl?: string;
+    emojis?: typeof EMOJI_PICKER_STORY_DATA.emojis;
+}) => () => void;

package/dist/components/input/EmojiPicker/internal/EmojiPickerEmoji.d.ts

@@ -0,0 +1,2 @@
+import { EmojiPickerListEmojiProps } from 'frimousse';
+export declare const EmojiPickerEmoji: ({ emoji, "aria-colindex": columnIndex, ...props }: EmojiPickerListEmojiProps) => import("react").JSX.Element;

package/dist/components/input/EmojiPicker/internal/EmojiPickerRow.d.ts

@@ -0,0 +1,2 @@
+import { EmojiPickerListRowProps } from 'frimousse';
+export declare const EmojiPickerRow: ({ "aria-rowindex": rowIndex, ...props }: EmojiPickerListRowProps) => import("react").JSX.Element;

package/dist/components/input/EmojiPicker/internal/EmojiPickerScrollEffect.d.ts

@@ -0,0 +1,6 @@
+import { RefObject } from 'react';
+type EmojiPickerScrollEffectProps = {
+    rootRef: RefObject<HTMLDivElement | null>;
+};
+export declare const EmojiPickerScrollEffect: ({ rootRef, }: EmojiPickerScrollEffectProps) => null;
+export {};

package/dist/components/input/EmojiPicker/internal/scrollActiveEmojiIntoView.d.ts

@@ -0,0 +1 @@
+export declare const scrollActiveEmojiIntoView: (rootElement: HTMLElement) => void;

package/dist/components/input/EmojiPicker/types/EmojiPickerProps.d.ts

@@ -0,0 +1,11 @@
+import { ComponentPropsWithRef } from 'react';
+export type EmojiPickerProps = Omit<ComponentPropsWithRef<'div'>, 'children'> & {
+    emojibaseUrl: string;
+    locale?: string;
+    searchLabel: string;
+    searchPlaceholder?: string;
+    loadingLabel: string;
+    emptyLabel: string;
+    onEmojiSelect: (emoji: string) => void;
+    autoFocus?: boolean;
+};

package/dist/components/input/FormFieldRow/FormFieldRow.d.ts

@@ -0,0 +1,2 @@
+import { FormFieldRowProps } from './types/FormFieldRowProps';
+export declare const FormFieldRow: ({ label, startIcon, trailing, trailingProps, children, labelWidth, isHoverable, hasDivider, render, ref, className, style, ...props }: FormFieldRowProps) => import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;

package/dist/components/input/FormFieldRow/types/FormFieldRowProps.d.ts

@@ -0,0 +1,12 @@
+import { useRender } from '@base-ui/react/use-render';
+import { ComponentProps, CSSProperties, ReactNode } from 'react';
+export type FormFieldRowProps = Omit<useRender.ComponentProps<'div'>, 'children'> & {
+    label?: string;
+    startIcon?: ReactNode;
+    trailing?: ReactNode;
+    trailingProps?: Omit<ComponentProps<'div'>, 'children'>;
+    children: ReactNode;
+    labelWidth?: CSSProperties['width'];
+    isHoverable?: boolean;
+    hasDivider?: boolean;
+};

package/dist/components/input/ReactionButton/ReactionButton.d.ts

@@ -0,0 +1,2 @@
+import { ReactionButtonProps } from './types/ReactionButtonProps';
+export declare const ReactionButton: ({ emoji, count, pressed, onPressedChange, onClick, className, ...props }: ReactionButtonProps) => import("react").JSX.Element;

package/dist/components/input/ReactionButton/__stories__/ReactionButtonExample.d.ts

@@ -0,0 +1,2 @@
+import { ReactionButtonProps } from '../types/ReactionButtonProps';
+export declare const ReactionButtonExample: ({ emoji, disabled, loading, }: Partial<Pick<ReactionButtonProps, "emoji" | "disabled" | "loading">>) => import("react").JSX.Element;

package/dist/components/input/ReactionButton/types/ReactionButtonProps.d.ts

@@ -0,0 +1,14 @@
+import { ComponentPropsWithRef } from 'react';
+import { ButtonProps } from '../../../../primitives/input/Button/types/ButtonProps';
+export type ReactionButtonProps = Omit<ComponentPropsWithRef<'button'>, 'aria-label' | 'aria-labelledby' | 'aria-pressed' | 'children' | 'color' | 'type'> & Pick<ButtonProps, 'loading'> & {
+    emoji: string;
+    count: number | string;
+    pressed: boolean;
+    onPressedChange: (pressed: boolean) => void;
+} & ({
+    'aria-label': string;
+    'aria-labelledby'?: string;
+} | {
+    'aria-label'?: string;
+    'aria-labelledby': string;
+});

package/dist/components/input/SearchInput/SearchInput.d.ts

@@ -1,2 +1,2 @@
 import { SearchInputProps } from './types/SearchInputProps';
-export declare const SearchInput: ({ placeholder, actions, size, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...props }: SearchInputProps) => import("react").JSX.Element;
+export declare const SearchInput: ({ placeholder, actions, size, hasFocusRing, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...props }: SearchInputProps) => import("react").JSX.Element;

package/dist/components/input/SearchInput/types/SearchInputProps.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
 import { InputProps } from '../../../../primitives/input/Input/types/InputProps';
-export type SearchInputProps = InputProps & {
+export type SearchInputProps = Omit<InputProps, 'variant'> & {
     actions?: ReactNode;
 };

package/dist/components/input/SegmentedControl/SegmentedControl.d.ts

@@ -1,2 +1,2 @@
 import { SegmentedControlProps } from './types/SegmentedControlProps';
-export declare const SegmentedControl: <TValue extends string>({ className, itemWidth, options, size, ...props }: SegmentedControlProps<TValue>) => import("react").JSX.Element;
+export declare const SegmentedControl: <TValue extends string>({ className, itemWidth, options, size, variant, ...props }: SegmentedControlProps<TValue>) => import("react").JSX.Element;

package/dist/components/input/SegmentedControl/types/SegmentedControlProps.d.ts

@@ -1,10 +1,12 @@
 import { RadioGroupProps } from '../../../../primitives/input/RadioGroup/types/RadioGroupProps';
 import { SegmentedControlOption } from './SegmentedControlOption';
 import { SegmentedControlSize } from './SegmentedControlSize';
+import { SegmentedControlVariant } from './SegmentedControlVariant';
 export type SegmentedControlProps<TValue extends string = string> = Omit<RadioGroupProps<TValue>, 'aria-label' | 'aria-labelledby' | 'children' | 'orientation' | 'role'> & {
     itemWidth?: 'content' | 'equal';
     options: readonly SegmentedControlOption<TValue>[];
     size?: SegmentedControlSize;
+    variant?: SegmentedControlVariant;
 } & ({
     'aria-label': string;
 } | {

package/dist/components/input/SegmentedControl/types/SegmentedControlVariant.d.ts

@@ -0,0 +1 @@
+export type SegmentedControlVariant = 'round' | 'rectangle';

package/dist/components/input/index.d.ts

@@ -13,6 +13,13 @@ export type { CurrencyPickerProps } from './CurrencyPicker/types/CurrencyPickerP
 export type { CurrencyPickerRootProps } from './CurrencyPicker/types/CurrencyPickerRootProps';
 export type { CurrencyPickerState } from './CurrencyPicker/types/CurrencyPickerState';
 export type { CurrencyPickerTriggerProps } from './CurrencyPicker/types/CurrencyPickerTriggerProps';
+export { DatePicker } from './DatePicker/DatePicker';
+export type { DatePickerHeaderProps } from './DatePicker/types/DatePickerHeaderProps';
+export type { DatePickerProps } from './DatePicker/types/DatePickerProps';
+export { EmojiPicker } from './EmojiPicker/EmojiPicker';
+export type { EmojiPickerProps } from './EmojiPicker/types/EmojiPickerProps';
+export { FormFieldRow } from './FormFieldRow/FormFieldRow';
+export type { FormFieldRowProps } from './FormFieldRow/types/FormFieldRowProps';
 export { IconButton } from './IconButton/IconButton';
 export type { IconButtonProps } from './IconButton/types/IconButtonProps';
 export type { IconButtonSize } from './IconButton/types/IconButtonSize';
@@ -31,9 +38,12 @@ export type { PhoneCountryPickerOptionsProps } from './PhoneCountryPicker/types/
 export type { PhoneCountryPickerProps } from './PhoneCountryPicker/types/PhoneCountryPickerProps';
 export type { PhoneCountryPickerRootProps } from './PhoneCountryPicker/types/PhoneCountryPickerRootProps';
 export type { PhoneCountryPickerTriggerProps } from './PhoneCountryPicker/types/PhoneCountryPickerTriggerProps';
+export { ReactionButton } from './ReactionButton/ReactionButton';
+export type { ReactionButtonProps } from './ReactionButton/types/ReactionButtonProps';
 export { SearchInput } from './SearchInput/SearchInput';
 export type { SearchInputProps } from './SearchInput/types/SearchInputProps';
 export { SegmentedControl } from './SegmentedControl/SegmentedControl';
 export type { SegmentedControlOption } from './SegmentedControl/types/SegmentedControlOption';
 export type { SegmentedControlProps } from './SegmentedControl/types/SegmentedControlProps';
 export type { SegmentedControlSize } from './SegmentedControl/types/SegmentedControlSize';
+export type { SegmentedControlVariant } from './SegmentedControl/types/SegmentedControlVariant';

package/dist/components/input.cjs

@@ -1 +1 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../input-CvZ_uB_9.cjs"),t=require("../Dropdown-DlItz8Gh.cjs");exports.CountrySelect=e.CountrySelect;exports.CurrencyPicker=e.CurrencyPicker;exports.IconButton=t.IconButton;exports.ImageInput=e.ImageInput;exports.LightButton=e.LightButton;exports.LightIconButton=t.LightIconButton;exports.MainButton=e.MainButton;exports.NumberStepper=e.NumberStepper;exports.PhoneCountryPicker=e.PhoneCountryPicker;exports.SearchInput=e.SearchInput;exports.SegmentedControl=e.SegmentedControl;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../input-BQABEELu.cjs"),t=require("../Dropdown-D_hFndP5.cjs");exports.CountrySelect=e.CountrySelect;exports.CurrencyPicker=e.CurrencyPicker;exports.DatePicker=e.DatePicker;exports.EmojiPicker=e.EmojiPicker;exports.FormFieldRow=e.FormFieldRow;exports.IconButton=t.IconButton;exports.ImageInput=e.ImageInput;exports.LightButton=e.LightButton;exports.LightIconButton=t.LightIconButton;exports.MainButton=e.MainButton;exports.NumberStepper=e.NumberStepper;exports.PhoneCountryPicker=e.PhoneCountryPicker;exports.ReactionButton=e.ReactionButton;exports.SearchInput=e.SearchInput;exports.SegmentedControl=e.SegmentedControl;

package/dist/components/input.mjs

@@ -1,15 +1,19 @@
-import { a as o, c as a, i as n, l as r, n as e, o as s, r as u, s as i, t as c } from "../input-Qn5_aFYU.js";
-import { a as p, i as I } from "../Dropdown-ChTVyesF.js";
+import { a, c as o, d as e, f as r, i as n, l as s, n as i, o as u, p as c, r as m, s as p, t as B, u as I } from "../input-CuySKbhm.js";
+import { a as g, i as h } from "../Dropdown-xXsGBv57.js";
 export {
-  r as CountrySelect,
-  a as CurrencyPicker,
-  p as IconButton,
-  i as ImageInput,
-  s as LightButton,
-  I as LightIconButton,
-  o as MainButton,
-  n as NumberStepper,
-  u as PhoneCountryPicker,
-  e as SearchInput,
-  c as SegmentedControl
+  c as CountrySelect,
+  r as CurrencyPicker,
+  e as DatePicker,
+  I as EmojiPicker,
+  s as FormFieldRow,
+  g as IconButton,
+  o as ImageInput,
+  p as LightButton,
+  h as LightIconButton,
+  u as MainButton,
+  a as NumberStepper,
+  n as PhoneCountryPicker,
+  m as ReactionButton,
+  i as SearchInput,
+  B as SegmentedControl
 };

package/dist/components/layout/LabeledSeparator/LabeledSeparator.d.ts

@@ -0,0 +1,2 @@
+import { LabeledSeparatorProps } from './types/LabeledSeparatorProps';
+export declare const LabeledSeparator: ({ children, labelPosition, tone, hasStartMarker, className, render, ref, ...props }: LabeledSeparatorProps) => import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;

package/dist/components/layout/LabeledSeparator/types/LabeledSeparatorProps.d.ts

@@ -0,0 +1,7 @@
+import { useRender } from '@base-ui/react/use-render';
+export type LabeledSeparatorProps = Omit<useRender.ComponentProps<'div'>, 'children'> & {
+    children: string;
+    labelPosition?: 'center' | 'end';
+    tone?: 'neutral' | 'danger';
+    hasStartMarker?: boolean;
+};

package/dist/components/layout/index.d.ts

@@ -1,5 +1,7 @@
 export { AnimatedIconCrossfade } from './AnimatedIconCrossfade/AnimatedIconCrossfade';
 export type { AnimatedIconCrossfadeProps } from './AnimatedIconCrossfade/types/AnimatedIconCrossfadeProps';
+export { LabeledSeparator } from './LabeledSeparator/LabeledSeparator';
+export type { LabeledSeparatorProps } from './LabeledSeparator/types/LabeledSeparatorProps';
 export { OverflowingList } from './OverflowingList/OverflowingList';
 export type { OverflowingListProps } from './OverflowingList/types/OverflowingListProps';
 export { Section } from './Section/Section';

package/dist/components/layout.cjs

@@ -1 +1 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../layout-iSfGrMrH.cjs");exports.AnimatedIconCrossfade=e.AnimatedIconCrossfade;exports.OverflowingList=e.OverflowingList;exports.Section=e.Section;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../layout-B1Iwc9ku.cjs");exports.AnimatedIconCrossfade=e.AnimatedIconCrossfade;exports.LabeledSeparator=e.LabeledSeparator;exports.OverflowingList=e.OverflowingList;exports.Section=e.Section;

package/dist/components/layout.mjs

@@ -1,6 +1,7 @@
-import { n as r, r as s, t } from "../layout-DDqeMgFv.js";
+import { i as e, n as o, r, t as s } from "../layout-B2KvJ900.js";
 export {
-  s as AnimatedIconCrossfade,
-  r as OverflowingList,
-  t as Section
+  e as AnimatedIconCrossfade,
+  r as LabeledSeparator,
+  o as OverflowingList,
+  s as Section
 };

package/dist/components/navigation/CountPager/CountPager.d.ts

@@ -0,0 +1,2 @@
+import { CountPagerProps } from './types/CountPagerProps';
+export declare const CountPager: ({ index, count, onIndexChange, positionText, previousLabel, nextLabel, disabled, positionPlacement, render, ref, className, ...props }: CountPagerProps) => import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;

package/dist/components/navigation/CountPager/__stories__/CountPagerCollectionExample.d.ts

@@ -0,0 +1,3 @@
+export declare const CountPagerCollectionExample: ({ onIndexChange, }: {
+    onIndexChange: (index: number) => void;
+}) => import("react").JSX.Element;

package/dist/components/navigation/CountPager/__stories__/CountPagerExample.d.ts

@@ -0,0 +1,2 @@
+import { CountPagerProps } from '../types/CountPagerProps';
+export declare const CountPagerExample: ({ disabled, positionPlacement, }: Pick<CountPagerProps, "disabled" | "positionPlacement">) => import("react").JSX.Element;

package/dist/components/navigation/CountPager/types/CountPagerProps.d.ts

@@ -0,0 +1,11 @@
+import { useRender } from '@base-ui/react/use-render';
+export type CountPagerProps = Omit<useRender.ComponentProps<'div'>, 'children'> & {
+    index: number;
+    count: number;
+    onIndexChange: (index: number) => void;
+    positionText: string;
+    previousLabel: string;
+    nextLabel: string;
+    disabled?: boolean;
+    positionPlacement?: 'between' | 'start';
+};

package/dist/components/navigation/Dropdown/Dropdown.d.ts

@@ -3,11 +3,11 @@ import { DropdownRootProps } from './types/DropdownRootProps';
 export declare const Dropdown: {
     Root: (props: DropdownRootProps) => ReactElement;
     Trigger: ({ onKeyDown, onClick, ref, ...props }: import('..').DropdownTriggerProps) => import("react").JSX.Element;
-    Content: ({ side, align, sideOffset, alignOffset, anchor, collisionPadding, container, keepMounted, width, className, style, children, initialFocus, onKeyDown, onFocus, onInput, onClick, onMouseDown, onPointerDown, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ref, ...props }: import('..').DropdownContentProps) => import("react").JSX.Element;
+    Content: ({ side, align, sideOffset, alignOffset, anchor, collisionPadding, container, keepMounted, width, className, style, children, initialFocus, finalFocus, onKeyDown, onFocus, onInput, onClick, onMouseDown, onPointerDown, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ref, ...props }: import('..').DropdownContentProps) => import("react").JSX.Element;
     ActionItem: ({ color, startIcon, endIcon, description, descriptionPlacement, shortcut, shortcutJoinLabel, hasSubmenu, actions, actionsVisibility, children, render, disabled, nativeButton, closeOnClick, onClick, page, id, ...props }: import('..').DropdownActionItemProps) => import("react").JSX.Element;
     OptionItem: ({ value, selected: standaloneSelected, indicator, onSelect, closeOnSelect, color, startIcon, endIcon, description, descriptionPlacement, shortcut, shortcutJoinLabel, hasSubmenu, actions, actionsVisibility, children, render, disabled, nativeButton, onClick, id, ...props }: import('..').DropdownOptionItemProps) => import("react").JSX.Element;
     SelectionGroup: (props: import('..').DropdownSelectionGroupProps) => import("react").JSX.Element;
-    Search: ({ onValueChange, onBlur, className, value, ref, ...props }: import('..').DropdownSearchProps) => import("react").JSX.Element;
+    Search: ({ onValueChange, onBlur, className, hasFocusRing, value, ref, ...props }: import('..').DropdownSearchProps) => import("react").JSX.Element;
     Header: ({ render, ref, className, ...props }: import('..').DropdownHeaderProps) => ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
     Title: ({ className, render, ref, ...props }: import('..').DropdownTitleProps) => import("react").JSX.Element;
     Close: ({ render, children, "aria-label": ariaLabel, ...props }: import('..').DropdownCloseProps) => import("react").JSX.Element;
@@ -17,6 +17,6 @@ export declare const Dropdown: {
     SubmenuTrigger: ({ color, startIcon, endIcon, description, descriptionPlacement, shortcut, shortcutJoinLabel, hasSubmenu, children, render, disabled, nativeButton, openOnHover, onKeyDown, id, ref, ...props }: import('..').DropdownSubmenuTriggerProps) => import("react").JSX.Element;
     Section: ({ label, scrollable, columns, style, className, children, ...props }: import('..').DropdownSectionProps) => import("react").JSX.Element;
     Separator: ({ className, ...props }: import('react').ComponentPropsWithRef<"div">) => import("react").JSX.Element;
-    Loading: ({ className, ...props }: import('react').ComponentPropsWithRef<"div">) => import("react").JSX.Element;
-    Empty: ({ className, ...props }: import('react').ComponentPropsWithRef<"div">) => import("react").JSX.Element;
+    Loading: ({ color: nativeColor, className, ...props }: import('react').ComponentPropsWithRef<"div">) => import("react").JSX.Element;
+    Empty: ({ color: nativeColor, className, ...props }: import('react').ComponentPropsWithRef<"div">) => import("react").JSX.Element;
 };

package/dist/components/navigation/Dropdown/__stories__/DropdownControlledPageSessionExample.d.ts

@@ -0,0 +1 @@
+export declare const DropdownControlledPageSessionExample: () => import("react").JSX.Element;

package/dist/components/navigation/Dropdown/__stories__/DropdownNestedPageSessionExample.d.ts

@@ -0,0 +1,6 @@
+type DropdownNestedPageSessionExampleProps = {
+    isNestedControlled?: boolean;
+    onNestedOpenChange?: (open: boolean) => void;
+};
+export declare const DropdownNestedPageSessionExample: ({ isNestedControlled, onNestedOpenChange, }: DropdownNestedPageSessionExampleProps) => import("react").JSX.Element;
+export {};

package/dist/components/navigation/Dropdown/__stories__/DropdownPageActivityExample.d.ts

@@ -0,0 +1 @@
+export declare const DropdownPageActivityExample: () => import("react").JSX.Element;

package/dist/components/navigation/Dropdown/__stories__/DropdownPageSessionExample.d.ts

@@ -0,0 +1,5 @@
+import { DropdownRootProps } from '../types/DropdownRootProps';
+export declare const DropdownPageSessionExample: ({ keepMounted, hasPages, open, onOpenChange, }: Pick<DropdownRootProps, "open" | "onOpenChange"> & {
+    keepMounted?: boolean;
+    hasPages?: boolean;
+}) => import("react").JSX.Element;

package/dist/components/navigation/Dropdown/__stories__/DropdownPickerPageSessionExample.d.ts

@@ -0,0 +1 @@
+export declare const DropdownPickerPageSessionExample: () => import("react").JSX.Element;

package/dist/components/navigation/Dropdown/hooks/useDropdownPage.d.ts

@@ -1,5 +1,6 @@
 export declare const useDropdownPage: () => {
     page: string | undefined;
+    isActive: boolean;
     goToPage: (page: string) => void;
     goBack: () => void;
     canGoBack: boolean;

package/dist/components/navigation/Dropdown/internal/DropdownContent.d.ts

@@ -1,2 +1,2 @@
 import { DropdownContentProps } from '../types/DropdownContentProps';
-export declare const DropdownContent: ({ side, align, sideOffset, alignOffset, anchor, collisionPadding, container, keepMounted, width, className, style, children, initialFocus, onKeyDown, onFocus, onInput, onClick, onMouseDown, onPointerDown, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ref, ...props }: DropdownContentProps) => import("react").JSX.Element;
+export declare const DropdownContent: ({ side, align, sideOffset, alignOffset, anchor, collisionPadding, container, keepMounted, width, className, style, children, initialFocus, finalFocus, onKeyDown, onFocus, onInput, onClick, onMouseDown, onPointerDown, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ref, ...props }: DropdownContentProps) => import("react").JSX.Element;

package/dist/components/navigation/Dropdown/internal/DropdownContextValue.d.ts

@@ -8,6 +8,9 @@ export type DropdownContextValue = ReturnType<typeof useDropdownSelections> & {
     type: DropdownType;
     rootType: DropdownType;
     open: boolean;
+    isPageActive: boolean;
+    isInsideContent: boolean;
+    sessionId: number;
     multiple: boolean;
     isSubmenu: boolean;
     parentType?: DropdownType;

package/dist/components/navigation/Dropdown/internal/DropdownEmpty.d.ts

@@ -1,2 +1,2 @@
 import { ComponentPropsWithRef } from 'react';
-export declare const DropdownEmpty: ({ className, ...props }: ComponentPropsWithRef<"div">) => import("react").JSX.Element;
+export declare const DropdownEmpty: ({ color: nativeColor, className, ...props }: ComponentPropsWithRef<"div">) => import("react").JSX.Element;

package/dist/components/navigation/Dropdown/internal/DropdownLoading.d.ts

@@ -1,2 +1,2 @@
 import { ComponentPropsWithRef } from 'react';
-export declare const DropdownLoading: ({ className, ...props }: ComponentPropsWithRef<"div">) => import("react").JSX.Element;
+export declare const DropdownLoading: ({ color: nativeColor, className, ...props }: ComponentPropsWithRef<"div">) => import("react").JSX.Element;

package/dist/components/navigation/Dropdown/internal/DropdownPageEffect.d.ts

@@ -0,0 +1,8 @@
+import { DropdownType } from '../types/DropdownType';
+type DropdownPageEffectProps = {
+    id: string;
+    type?: DropdownType;
+    isActive: boolean;
+};
+export declare const DropdownPageEffect: ({ id, type, isActive, }: DropdownPageEffectProps) => null;
+export {};

package/dist/components/navigation/Dropdown/internal/DropdownSearch.d.ts

@@ -1,2 +1,2 @@
 import { DropdownSearchProps } from '../types/DropdownSearchProps';
-export declare const DropdownSearch: ({ onValueChange, onBlur, className, value, ref, ...props }: DropdownSearchProps) => import("react").JSX.Element;
+export declare const DropdownSearch: ({ onValueChange, onBlur, className, hasFocusRing, value, ref, ...props }: DropdownSearchProps) => import("react").JSX.Element;

package/dist/components/navigation/Dropdown/internal/isActiveDropdownElement.d.ts

@@ -0,0 +1 @@
+export declare const isActiveDropdownElement: (element: HTMLElement) => boolean;

package/dist/components/navigation/Dropdown/types/DropdownSearchProps.d.ts

@@ -1,4 +1,4 @@
 import { InputProps } from '../../../../primitives/input/Input/types/InputProps';
-export type DropdownSearchProps = Omit<InputProps, 'onValueChange' | 'size'> & {
+export type DropdownSearchProps = Omit<InputProps, 'onValueChange' | 'size' | 'variant'> & {
     onValueChange?: (value: string) => void;
 };

package/dist/components/navigation/ListItemButton/ListItemButton.d.ts

@@ -1,2 +1,2 @@
 import { ListItemButtonProps } from './types/ListItemButtonProps';
-export declare const ListItemButton: ({ color, selected, focused, indicator, startIcon, endIcon, description, descriptionPlacement, shortcut, shortcutJoinLabel, hasSubmenu, disabled, type, children, ...buttonProps }: ListItemButtonProps) => import("react").JSX.Element;
+export declare const ListItemButton: ({ color, selected, selectionAppearance, active, focused, indicator, startIcon, endIcon, description, descriptionPlacement, shortcut, shortcutJoinLabel, hasSubmenu, disabled, type, children, ...buttonProps }: ListItemButtonProps) => import("react").JSX.Element;

package/dist/components/navigation/ListItemButton/types/ListItemButtonProps.d.ts

@@ -1,4 +1,4 @@
 import { Button as ButtonPrimitive } from '@base-ui/react/button';
 import { ComponentPropsWithRef } from 'react';
 import { ListItemProps } from '../../../../primitives/navigation/ListItem/types/ListItemProps';
-export type ListItemButtonProps = Omit<ComponentPropsWithRef<'button'>, 'color'> & Pick<ButtonPrimitive.Props, 'focusableWhenDisabled'> & Pick<ListItemProps, 'color' | 'selected' | 'focused' | 'indicator' | 'startIcon' | 'endIcon' | 'description' | 'descriptionPlacement' | 'shortcut' | 'shortcutJoinLabel' | 'hasSubmenu'>;
+export type ListItemButtonProps = Omit<ComponentPropsWithRef<'button'>, 'color'> & Pick<ButtonPrimitive.Props, 'focusableWhenDisabled'> & Pick<ListItemProps, 'color' | 'selected' | 'selectionAppearance' | 'active' | 'focused' | 'indicator' | 'startIcon' | 'endIcon' | 'description' | 'descriptionPlacement' | 'shortcut' | 'shortcutJoinLabel' | 'hasSubmenu'>;

package/dist/components/navigation/index.d.ts

@@ -1,3 +1,5 @@
+export { CountPager } from './CountPager/CountPager';
+export type { CountPagerProps } from './CountPager/types/CountPagerProps';
 export { Dropdown } from './Dropdown/Dropdown';
 export { useDropdownPage } from './Dropdown/hooks/useDropdownPage';
 export type { DropdownActionItemProps } from './Dropdown/types/DropdownActionItemProps';

package/dist/components/navigation.cjs

@@ -1 +1 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("../Dropdown-DlItz8Gh.cjs"),e=require("../navigation-7Y6gHFlj.cjs");exports.DEFAULT_COLOR_LABELS=e.DEFAULT_COLOR_LABELS;exports.Dropdown=o.Dropdown;exports.ListItemButton=e.ListItemButton;exports.TabButton=e.TabButton;exports.useDropdownPage=e.useDropdownPage;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("../Dropdown-D_hFndP5.cjs"),e=require("../navigation-DP5Edsq_.cjs");exports.CountPager=e.CountPager;exports.DEFAULT_COLOR_LABELS=e.DEFAULT_COLOR_LABELS;exports.Dropdown=o.Dropdown;exports.ListItemButton=e.ListItemButton;exports.TabButton=e.TabButton;exports.useDropdownPage=e.useDropdownPage;

package/dist/components/navigation.mjs

@@ -1,9 +1,10 @@
-import { t } from "../Dropdown-ChTVyesF.js";
-import { i as a, n as s, r as m, t as n } from "../navigation-BcXCiLE1.js";
+import { t } from "../Dropdown-xXsGBv57.js";
+import { a as r, i as s, n, r as e, t as m } from "../navigation-DXMjQMPm.js";
 export {
-  s as DEFAULT_COLOR_LABELS,
+  r as CountPager,
+  n as DEFAULT_COLOR_LABELS,
   t as Dropdown,
-  m as ListItemButton,
-  n as TabButton,
-  a as useDropdownPage
+  e as ListItemButton,
+  m as TabButton,
+  s as useDropdownPage
 };

package/dist/components/settings.cjs

@@ -1 +1 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../settings-DT5bEO6A.cjs");exports.SettingsRow=e.SettingsRow;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../settings-D_iT1ngl.cjs");exports.SettingsRow=e.SettingsRow;

package/dist/components/settings.mjs

@@ -1,4 +1,4 @@
-import { t as o } from "../settings-XGSJtobU.js";
+import { t as o } from "../settings-BTFAqYrD.js";
 export {
   o as SettingsRow
 };

package/dist/components.cjs

@@ -1 +1 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("./data-display-CM1yXpnE.cjs"),o=require("./feedback-DspXawf9.cjs"),e=require("./input-CvZ_uB_9.cjs"),r=require("./Dropdown-DlItz8Gh.cjs"),i=require("./layout-iSfGrMrH.cjs"),n=require("./navigation-7Y6gHFlj.cjs"),u=require("./settings-DT5bEO6A.cjs");exports.AnimatedIconCrossfade=i.AnimatedIconCrossfade;exports.AvatarGroup=t.AvatarGroup;exports.Callout=o.Callout;exports.CommandBlock=t.CommandBlock;exports.CountrySelect=e.CountrySelect;exports.CurrencyPicker=e.CurrencyPicker;exports.DEFAULT_COLOR_LABELS=n.DEFAULT_COLOR_LABELS;exports.Dropdown=r.Dropdown;exports.IconButton=r.IconButton;exports.ImageInput=e.ImageInput;exports.InlineBanner=o.InlineBanner;exports.JsonTree=t.JsonTree;exports.LightButton=e.LightButton;exports.LightIconButton=r.LightIconButton;exports.ListItemButton=n.ListItemButton;exports.MainButton=e.MainButton;exports.MetricRow=t.MetricRow;exports.NumberStepper=e.NumberStepper;exports.OverflowingList=i.OverflowingList;exports.PhoneCountryPicker=e.PhoneCountryPicker;exports.SearchInput=e.SearchInput;exports.Section=i.Section;exports.SegmentedControl=e.SegmentedControl;exports.SettingsRow=u.SettingsRow;exports.StackIcon=t.StackIcon;exports.TabButton=n.TabButton;exports.TintedIconTile=t.TintedIconTile;exports.Toast=o.Toast;exports.ToastProvider=o.ToastProvider;exports.Toaster=o.Toaster;exports.getIconTileColorShades=t.getIconTileColorShades;exports.useDropdownPage=n.useDropdownPage;exports.useToast=o.useToast;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("./data-display-D_kbXJJd.cjs"),o=require("./feedback-BzR4ggrP.cjs"),e=require("./input-BQABEELu.cjs"),i=require("./Dropdown-D_hFndP5.cjs"),n=require("./layout-B1Iwc9ku.cjs"),r=require("./navigation-DP5Edsq_.cjs"),a=require("./settings-D_iT1ngl.cjs");exports.AnimatedIconCrossfade=n.AnimatedIconCrossfade;exports.AvatarGroup=t.AvatarGroup;exports.Callout=o.Callout;exports.CommandBlock=t.CommandBlock;exports.CountPager=r.CountPager;exports.CountrySelect=e.CountrySelect;exports.CurrencyPicker=e.CurrencyPicker;exports.DEFAULT_COLOR_LABELS=r.DEFAULT_COLOR_LABELS;exports.DatePicker=e.DatePicker;exports.DetailsRow=t.DetailsRow;exports.Dropdown=i.Dropdown;exports.EmojiPicker=e.EmojiPicker;exports.FormFieldRow=e.FormFieldRow;exports.IconButton=i.IconButton;exports.ImageInput=e.ImageInput;exports.InlineBanner=o.InlineBanner;exports.JsonTree=t.JsonTree;exports.LabeledSeparator=n.LabeledSeparator;exports.LightButton=e.LightButton;exports.LightIconButton=i.LightIconButton;exports.ListItemButton=r.ListItemButton;exports.MainButton=e.MainButton;exports.MetricRow=t.MetricRow;exports.NumberStepper=e.NumberStepper;exports.OverflowingList=n.OverflowingList;exports.PhoneCountryPicker=e.PhoneCountryPicker;exports.ReactionButton=e.ReactionButton;exports.SearchInput=e.SearchInput;exports.Section=n.Section;exports.SegmentedControl=e.SegmentedControl;exports.SettingsRow=a.SettingsRow;exports.StackIcon=t.StackIcon;exports.TabButton=r.TabButton;exports.TintedIconTile=t.TintedIconTile;exports.Toast=o.Toast;exports.ToastProvider=o.ToastProvider;exports.Toaster=o.Toaster;exports.getIconTileColorShades=t.getIconTileColorShades;exports.useDropdownPage=r.useDropdownPage;exports.useToast=o.useToast;