twenty-ui 2.49.0 → 2.51.1

package/dist/components/data-display.mjs

@@ -1,11 +1,11 @@
-import { a, i as r, n as t, r as e, t as s } from "../data-display-BtXCGOGw.js";
-import { n as i, t as c } from "../TintedIconTile-B1XDtGrF.js";
+import { a as o, c as s, i as e, n as r, o as t, r as c, s as i, t as n } from "../data-display-b-9s0RTe.js";
 export {
-  a as AvatarGroup,
-  r as CommandBlock,
-  e as JsonTree,
-  t as MetricRow,
-  s as StackIcon,
-  c as TintedIconTile,
-  i as getIconTileColorShades
+  s as AvatarGroup,
+  i as CommandBlock,
+  t as DetailsRow,
+  o as JsonTree,
+  e as MetricRow,
+  c as StackIcon,
+  n as TintedIconTile,
+  r as getIconTileColorShades
 };

package/dist/components/feedback/InlineBanner/InlineBanner.d.ts

@@ -1,3 +1,3 @@
-export declare const InlineBanner: (({ children, layout, variant, embedded, icon, className, ...props }: import('..').InlineBannerProps) => import("react").JSX.Element) & {
-    Action: ({ className, ...props }: import('../../..').BannerActionProps) => import("react").JSX.Element;
+export declare const InlineBanner: (({ children, layout, variant, embedded, fullWidth, icon, className, ...props }: import('..').InlineBannerProps) => import("react").JSX.Element) & {
+    Action: (props: import('../../..').BannerActionProps) => import("react").JSX.Element;
 };

package/dist/components/feedback/InlineBanner/internal/InlineBannerComponent.d.ts

@@ -1,2 +1,2 @@
 import { InlineBannerProps } from '../types/InlineBannerProps';
-export declare const InlineBannerComponent: ({ children, layout, variant, embedded, icon, className, ...props }: InlineBannerProps) => import("react").JSX.Element;
+export declare const InlineBannerComponent: ({ children, layout, variant, embedded, fullWidth, icon, className, ...props }: InlineBannerProps) => import("react").JSX.Element;

package/dist/components/feedback/InlineBanner/types/InlineBannerProps.d.ts

@@ -1,6 +1,7 @@
 import { BannerProps } from '../../../../primitives/feedback/Banner/types/BannerProps';
 import { InlineBannerLayout } from './InlineBannerLayout';
-export type InlineBannerProps = BannerProps & {
+export type InlineBannerProps = Omit<BannerProps, 'onDismiss' | 'closeLabel'> & {
     layout?: InlineBannerLayout;
     embedded?: boolean;
+    fullWidth?: boolean;
 };

package/dist/components/feedback.cjs

@@ -1 +1 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../feedback-Cs-38OH4.cjs");exports.Callout=e.Callout;exports.InlineBanner=e.InlineBanner;exports.Toast=e.Toast;exports.ToastProvider=e.ToastProvider;exports.Toaster=e.Toaster;exports.useToast=e.useToast;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../feedback-BzR4ggrP.cjs");exports.Callout=e.Callout;exports.InlineBanner=e.InlineBanner;exports.Toast=e.Toast;exports.ToastProvider=e.ToastProvider;exports.Toaster=e.Toaster;exports.useToast=e.useToast;

package/dist/components/feedback.mjs

@@ -1,4 +1,4 @@
-import { a as s, i as o, n as r, o as t, r as e, t as n } from "../feedback-DTyVVcTb.js";
+import { a as s, i as o, n as r, o as t, r as e, t as n } from "../feedback-EaZszoXf.js";
 export {
   t as Callout,
   s as InlineBanner,

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

@@ -0,0 +1,2 @@
+import { DatePickerProps } from './types/DatePickerProps';
+export declare const DatePicker: ({ value, onValueChange, onValueSelect, viewedMonth, onViewedMonthChange, highlightedRange, readOnly, isGridHidden, weekStart, locale, weekdayLabels, previousMonthLabel, nextMonthLabel, monthLabel, yearLabel, portalContainer, onNavigationOpenChange, isDateUnavailable, disabled, isKeyboardNavigationDisabled, renderHeader, loadingFallback, dir, render, ref, className, ...props }: DatePickerProps) => import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;

package/dist/components/input/DatePicker/__stories__/DatePickerCssVariableThemeExample.d.ts

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

package/dist/components/input/DatePicker/__stories__/DatePickerExample.d.ts

@@ -0,0 +1,5 @@
+import { DatePickerProps } from '../types/DatePickerProps';
+export declare const DatePickerExample: ({ initialValue, initialViewedMonth, highlightedRange, readOnly, isGridHidden, disabled, isDateUnavailable, onValueChange, onValueSelect, onViewedMonthChange, onNavigationOpenChange, }: Partial<Pick<DatePickerProps, "highlightedRange" | "readOnly" | "isGridHidden" | "disabled" | "isDateUnavailable" | "onValueChange" | "onValueSelect" | "onViewedMonthChange" | "onNavigationOpenChange">> & {
+    initialValue?: string | null;
+    initialViewedMonth?: string;
+}) => import("react").JSX.Element;

package/dist/components/input/DatePicker/__stories__/DatePickerExternalMonthExample.d.ts

@@ -0,0 +1,4 @@
+export declare const DatePickerExternalMonthExample: ({ onValueChange, onViewedMonthChange, }: {
+    onValueChange: (date: string) => void;
+    onViewedMonthChange: (month: string) => void;
+}) => import("react").JSX.Element;

package/dist/components/input/DatePicker/__stories__/DatePickerNavigationUnmountExample.d.ts

@@ -0,0 +1,2 @@
+import { DatePickerProps } from '../types/DatePickerProps';
+export declare const DatePickerNavigationUnmountExample: ({ onNavigationOpenChange, }: Pick<DatePickerProps, "onNavigationOpenChange">) => import("react").JSX.Element;

package/dist/components/input/DatePicker/__stories__/datePickerWeekdayLabels.d.ts

@@ -0,0 +1 @@
+export declare const DATE_PICKER_WEEKDAY_LABELS: readonly ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];

package/dist/components/input/DatePicker/internal/DatePickerException.d.ts

@@ -0,0 +1,5 @@
+export declare class DatePickerException extends RangeError {
+    constructor({ message }: {
+        message: string;
+    });
+}

package/dist/components/input/DatePicker/internal/DatePickerHeader.d.ts

@@ -0,0 +1,3 @@
+import { DatePickerProps } from '../types/DatePickerProps';
+import { DatePickerHeaderProps } from '../types/DatePickerHeaderProps';
+export declare const DatePickerHeader: ({ viewedMonth, onPreviousMonth, onNextMonth, onMonthChange, onYearChange, isPreviousMonthDisabled, isNextMonthDisabled, locale, previousMonthLabel, nextMonthLabel, monthLabel, yearLabel, portalContainer, onNavigationOpenChange, disabled, }: DatePickerHeaderProps & Pick<DatePickerProps, "locale" | "previousMonthLabel" | "nextMonthLabel" | "monthLabel" | "yearLabel" | "portalContainer" | "onNavigationOpenChange" | "disabled">) => import("react").JSX.Element;

package/dist/components/input/DatePicker/internal/DatePickerSelect.d.ts

@@ -0,0 +1,15 @@
+import { DatePickerProps } from '../types/DatePickerProps';
+type DatePickerSelectProps = {
+    value: number;
+    items: {
+        value: number;
+        label: string;
+    }[];
+    onValueChange: (value: number) => void;
+    label: string;
+    disabled?: boolean;
+    portalContainer?: DatePickerProps['portalContainer'];
+    onOpenChange?: (open: boolean) => void;
+};
+export declare const DatePickerSelect: ({ value, items, onValueChange, label, disabled, portalContainer, onOpenChange, }: DatePickerSelectProps) => import("react").JSX.Element;
+export {};

package/dist/components/input/DatePicker/internal/DatePickerSelectLifecycleEffect.d.ts

@@ -0,0 +1,7 @@
+import { RefObject } from 'react';
+type DatePickerSelectLifecycleEffectProps = {
+    isOpenRef: RefObject<boolean>;
+    onOpenChange?: (open: boolean) => void;
+};
+export declare const DatePickerSelectLifecycleEffect: ({ isOpenRef, onOpenChange, }: DatePickerSelectLifecycleEffectProps) => null;
+export {};

package/dist/components/input/DatePicker/internal/DatePickerViewedMonthEffect.d.ts

@@ -0,0 +1,9 @@
+import { RefObject } from 'react';
+import { default as ReactDatePicker } from 'react-datepicker';
+type DatePickerViewedMonthEffectProps = {
+    calendarRef: RefObject<ReactDatePicker | null>;
+    engineViewedMonthRef: RefObject<string>;
+    viewedMonth: string;
+};
+export declare const DatePickerViewedMonthEffect: ({ calendarRef, engineViewedMonthRef, viewedMonth, }: DatePickerViewedMonthEffectProps) => null;
+export {};

package/dist/components/input/DatePicker/internal/ReactDatePickerLibrary.d.ts

@@ -0,0 +1,2 @@
+import { default as ReactDatePicker } from 'react-datepicker';
+export declare const ReactDatePickerLibrary: import('react').LazyExoticComponent<typeof ReactDatePicker>;

package/dist/components/input/DatePicker/internal/datePickerConstants.d.ts

@@ -0,0 +1,6 @@
+export declare const DATE_PICKER_CONSTANTS: {
+    readonly MIN_YEAR: 1;
+    readonly MAX_YEAR: 9999;
+    readonly DAYS_PER_WEEK: 7;
+    readonly MONTHS_PER_YEAR: 12;
+};

package/dist/components/input/DatePicker/internal/formatDatePickerLocalDate.d.ts

@@ -0,0 +1 @@
+export declare const formatDatePickerLocalDate: (date: Date) => string;

package/dist/components/input/DatePicker/internal/parseDatePickerDateOrThrow.d.ts

@@ -0,0 +1 @@
+export declare const parseDatePickerDateOrThrow: (value: string) => Date;

package/dist/components/input/DatePicker/internal/parseDatePickerLocalDateOrThrow.d.ts

@@ -0,0 +1 @@
+export declare const parseDatePickerLocalDateOrThrow: (value: string) => Date;

package/dist/components/input/DatePicker/internal/validateDatePickerHighlightedRangeOrThrow.d.ts

@@ -0,0 +1,4 @@
+export declare const validateDatePickerHighlightedRangeOrThrow: ({ start, end, }: {
+    start: string;
+    end: string;
+}) => void;

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

@@ -0,0 +1,9 @@
+export type DatePickerHeaderProps = {
+    viewedMonth: string;
+    onPreviousMonth: () => void;
+    onNextMonth: () => void;
+    onMonthChange: (month: number) => void;
+    onYearChange: (year: number) => void;
+    isPreviousMonthDisabled: boolean;
+    isNextMonthDisabled: boolean;
+};

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';
-export type SegmentedControlProps<TValue extends string = string> = Omit<RadioGroupProps<TValue>, 'aria-label' | 'aria-labelledby' | 'children' | 'role'> & {
+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-ChlFcqIS.cjs"),t=require("../Dropdown-Bl4OXCf9.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-BrjD91wv.js";
-import { a as p, i as I } from "../Dropdown-1OAJvS1f.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-CthYckvl.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-DQcjBu08.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, className, ...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;