@konstructio/ui 0.1.2-alpha.119 → 0.1.2-alpha.120

package/dist/index.js

@@ -1,17 +1,17 @@
-import { t as o } from "./Checkbox-DRdyrKjk.js";
-import { t as m } from "./DropdownButton-JilCRLJY.js";
-import { t as p } from "./Breadcrumb-CpXRb08J.js";
-import { t as a } from "./Input-2M2I_H60.js";
-import { t as s } from "./Counter-DMkXIsOO.js";
+import { t as o } from "./Checkbox-DrounE52.js";
+import { t as m } from "./DropdownButton-BWfWN4fg.js";
+import { t as e } from "./Breadcrumb-DDRmDlWK.js";
+import { t as a } from "./Input-O2bqyJKW.js";
+import { t as s } from "./Counter-LQ5_uh06.js";
 import { a as l, t as d } from "./utils-DnIJruo0.js";
 import { Alert as T } from "./components/Alert/Alert.js";
-import { Button as C } from "./components/Button/Button.js";
+import { Button as S } from "./components/Button/Button.js";
 import { AlertDialog as c } from "./components/AlertDialog/AlertDialog.js";
 import { useClickOutside as R } from "./hooks/useClickOutside.js";
 import { useIsHydrated as A } from "./hooks/useIsHydrated/useIsHydrated.js";
 import { useMediaQuery as b } from "./hooks/useMediaQuery.js";
 import { useToggle as I } from "./hooks/useToggle.js";
-import { Autocomplete as h } from "./components/Autocomplete/Autocomplete.js";
+import { Autocomplete as w } from "./components/Autocomplete/Autocomplete.js";
 import { Avatar as B } from "./components/Avatar/Avatar.js";
 import { AvatarGroup as P } from "./components/AvatarGroup/AvatarGroup.js";
 import { t as y } from "./Loading-u8hXrFJR.js";
@@ -24,193 +24,195 @@ import { Card as X } from "./components/Card/Card.js";
 import { CheckboxCard as q } from "./components/CheckboxCard/CheckboxCard.js";
 import { Collapse as K } from "./components/Collapse/Collapse.js";
 import { CopyButton as Z } from "./components/CopyButton/CopyButton.js";
-import { t as rr } from "./Modal-0Wp5szX4.js";
+import { t as rr } from "./Modal-B-l4ii6w.js";
 import { ConfirmDialog as tr } from "./components/ConfirmDialog/ConfirmDialog.js";
 import { DatePicker as ir } from "./components/Datepicker/DatePicker.js";
-import { Radio as er } from "./components/Radio/Radio.js";
+import { Radio as pr } from "./components/Radio/Radio.js";
 import { RadioGroup as fr } from "./components/RadioGroup/RadioGroup.js";
 import { TimePicker as nr } from "./components/TimePicker/TimePicker.js";
 import { DateRangePicker as dr } from "./components/DateRangePicker/DateRangePicker.js";
 import { Divider as Tr } from "./components/Divider/Divider.js";
-import { Drawer as Cr } from "./components/Drawer/Drawer.js";
-import { BadgeMultiSelect as cr } from "./components/Filter/components/BadgeDropdown/BadgeMultiSelect.js";
-import { CustomDateRangeFilterDropdown as Rr } from "./components/Filter/components/CustomDateRangeFilterDropdown/CustomDateRangeFilterDropdown.js";
-import { DateFilterDropdown as Ar } from "./components/Filter/components/DateFilterDropdown/DateFilterDropdown.js";
-import { DateRangeFilterDropdown as br } from "./components/Filter/components/DateRangeFilterDropdown/DateRangeFilterDropdown.js";
-import { TextMultiSelect as Ir } from "./components/Filter/components/TextMultiSelect/TextMultiSelect.js";
-import { TimeFilterDropdown as hr } from "./components/Filter/components/TimeFilterDropdown/TimeFilterDropdown.js";
-import { Filter as Br } from "./components/Filter/Filter.js";
-import { t as Pr } from "./ImageUpload-BNZjCUTX.js";
-import { LineChart as yr } from "./components/LineChart/LineChart.js";
-import { OtpInput as Mr } from "./components/OtpInput/OtpInput.js";
-import { PasswordRules as Or } from "./components/PasswordRules/PasswordRules.js";
-import { t as Gr } from "./components-B_SWqhCL.js";
-import { PhoneNumberInput as Ur } from "./components/PhoneNumberInput/PhoneNumberInput.js";
-import { PieChart as Qr } from "./components/PieChart/PieChart.js";
-import { ProgressBar as Xr } from "./components/ProgressBar/ProgressBar.js";
-import { RadioCard as qr } from "./components/RadioCard/RadioCard.js";
-import { RadioCardGroup as Kr } from "./components/RadioCardGroup/RadioCardGroup.js";
-import { Range as Zr } from "./components/Range/Range.js";
-import { Select as ro } from "./components/Select/Select.js";
-import { CollapseTrigger as to } from "./components/Sidebar/components/CollapseTrigger/CollapseTrigger.js";
-import { Footer as io } from "./components/Sidebar/components/Footer/Footer.js";
-import { Label as eo } from "./components/Sidebar/components/Label/Label.js";
-import { Logo as fo } from "./components/Sidebar/components/Logo/Logo.js";
-import { NavigationGroup as no } from "./components/Sidebar/components/NavigationGroup/NavigationGroup.js";
-import { NavigationOption as uo } from "./components/Sidebar/components/NavigationOption/NavigationOption.js";
-import { NavigationSeparator as go } from "./components/Sidebar/components/NavigationSeparator/NavigationSeparator.js";
-import { Navigation as So } from "./components/Sidebar/components/Navigation/Navigation.js";
-import { Sidebar as Do } from "./components/Sidebar/Sidebar.js";
-import { Skeleton as vo } from "./components/Skeleton/Skeleton.js";
-import { Slider as Vo } from "./components/Slider/Slider.js";
-import { t as Eo } from "./Spinner-CTonkSzG.js";
-import { horizontalConnectorWrapperVariants as wo, stepConnectorVariants as ho, stepContentVariants as Lo, stepDescriptionVariants as Bo, stepIndicatorVariants as Fo, stepItemVariants as Po, stepLabelVariants as xo, stepListVariants as yo, stepVariants as ko, stepperVariants as Mo } from "./components/Stepper/Stepper.variants.js";
-import { Stepper as Oo } from "./components/Stepper/Stepper.js";
-import { t as Go } from "./Switch-5cdUxbhX.js";
-import { Table as Uo } from "./components/Table/Table.js";
-import { Content as Qo } from "./components/Tabs/components/Content.js";
-import { List as Xo } from "./components/Tabs/components/List.js";
-import { Trigger as qo } from "./components/Tabs/components/Trigger.js";
-import { Tabs as Ko } from "./components/Tabs/Tabs.js";
-import { Tag as Zo } from "./components/Tag/Tag.js";
-import { TagSelect as rt } from "./components/TagSelect/TagSelect.js";
-import { TagsInput as tt } from "./components/TagsInput/TagsInput.js";
-import { TextArea as it } from "./components/TextArea/TextArea.js";
-import { DEFAULT_MAX_VISIBLE_TOASTS as et, DEFAULT_TOAST_DURATION as at, DEFAULT_TOAST_LIMIT as ft } from "./components/Toast/constants/index.js";
-import { createToastStore as nt } from "./components/Toast/store/create-toast-store.js";
-import { useToastStore as dt, useToastStoreApi as ut } from "./components/Toast/hooks/useToastStore/useToastStore.js";
-import { useToast as gt } from "./components/Toast/hooks/useToast/useToast.js";
-import { Toast as St } from "./components/Toast/Toast.js";
-import { ToastProvider as Dt } from "./components/Toast/ToastProvider.js";
-import { t as vt } from "./events.types-BG1Uh8i6.js";
-import { sendResetFiltersEvent as Vt } from "./components/VirtualizedTable/events/filters/filters.js";
-import { sendRefreshEvent as Et } from "./components/VirtualizedTable/events/refresh/refresh.js";
-import { sendCollapseRowEvent as wt, sendExpandRowEvent as ht, sendToggleRowEvent as Lt } from "./components/VirtualizedTable/events/row/row.js";
-import { EmptyState as Ft } from "./components/VirtualizedTable/components/EmptyState/EmptyState.js";
-import { EmptyResults as xt } from "./components/VirtualizedTable/components/EmptyResults/EmptyResults.js";
-import { ErrorState as kt } from "./components/VirtualizedTable/components/ErrorState/ErrorState.js";
-import { TruncateText as Nt } from "./components/VirtualizedTable/components/TruncateText/TruncateText.js";
-import { preloadVirtualizedTable as _t } from "./components/VirtualizedTable/utils/load-content/load-content.js";
-import { VirtualizedTable as zt } from "./components/VirtualizedTable/VirtualizedTable.js";
-import { useVirtualizedTableReady as Ht } from "./components/VirtualizedTable/hooks/useVirtualizedTableReady/useVirtualizedTableReady.js";
-import { ThemeContext as Wt } from "./contexts/theme.context.js";
-import { useTheme as jt } from "./contexts/theme.hook.js";
-import { t as Jt } from "./theme.provider-CvL6sqHq.js";
+import { Drawer as Sr } from "./components/Drawer/Drawer.js";
+import { Sheet as cr } from "./components/Sheet/Sheet.js";
+import { BadgeMultiSelect as Rr } from "./components/Filter/components/BadgeDropdown/BadgeMultiSelect.js";
+import { CustomDateRangeFilterDropdown as Ar } from "./components/Filter/components/CustomDateRangeFilterDropdown/CustomDateRangeFilterDropdown.js";
+import { DateFilterDropdown as br } from "./components/Filter/components/DateFilterDropdown/DateFilterDropdown.js";
+import { DateRangeFilterDropdown as Ir } from "./components/Filter/components/DateRangeFilterDropdown/DateRangeFilterDropdown.js";
+import { TextMultiSelect as wr } from "./components/Filter/components/TextMultiSelect/TextMultiSelect.js";
+import { TimeFilterDropdown as Br } from "./components/Filter/components/TimeFilterDropdown/TimeFilterDropdown.js";
+import { Filter as Pr } from "./components/Filter/Filter.js";
+import { t as yr } from "./ImageUpload-BNZjCUTX.js";
+import { LineChart as Mr } from "./components/LineChart/LineChart.js";
+import { OtpInput as Or } from "./components/OtpInput/OtpInput.js";
+import { PasswordRules as Gr } from "./components/PasswordRules/PasswordRules.js";
+import { t as Ur } from "./components-Bq71eyUH.js";
+import { PhoneNumberInput as Qr } from "./components/PhoneNumberInput/PhoneNumberInput.js";
+import { PieChart as Xr } from "./components/PieChart/PieChart.js";
+import { ProgressBar as qr } from "./components/ProgressBar/ProgressBar.js";
+import { RadioCard as Kr } from "./components/RadioCard/RadioCard.js";
+import { RadioCardGroup as Zr } from "./components/RadioCardGroup/RadioCardGroup.js";
+import { Range as ro } from "./components/Range/Range.js";
+import { Select as to } from "./components/Select/Select.js";
+import { CollapseTrigger as io } from "./components/Sidebar/components/CollapseTrigger/CollapseTrigger.js";
+import { Footer as po } from "./components/Sidebar/components/Footer/Footer.js";
+import { Label as fo } from "./components/Sidebar/components/Label/Label.js";
+import { Logo as no } from "./components/Sidebar/components/Logo/Logo.js";
+import { NavigationGroup as uo } from "./components/Sidebar/components/NavigationGroup/NavigationGroup.js";
+import { NavigationOption as go } from "./components/Sidebar/components/NavigationOption/NavigationOption.js";
+import { NavigationSeparator as Co } from "./components/Sidebar/components/NavigationSeparator/NavigationSeparator.js";
+import { Navigation as Do } from "./components/Sidebar/components/Navigation/Navigation.js";
+import { Sidebar as vo } from "./components/Sidebar/Sidebar.js";
+import { Skeleton as Vo } from "./components/Skeleton/Skeleton.js";
+import { Slider as Eo } from "./components/Slider/Slider.js";
+import { t as ho } from "./Spinner-CTonkSzG.js";
+import { horizontalConnectorWrapperVariants as Lo, stepConnectorVariants as Bo, stepContentVariants as Fo, stepDescriptionVariants as Po, stepIndicatorVariants as xo, stepItemVariants as yo, stepLabelVariants as ko, stepListVariants as Mo, stepVariants as No, stepperVariants as Oo } from "./components/Stepper/Stepper.variants.js";
+import { Stepper as Go } from "./components/Stepper/Stepper.js";
+import { t as Uo } from "./Switch-5cdUxbhX.js";
+import { Table as Qo } from "./components/Table/Table.js";
+import { Content as Xo } from "./components/Tabs/components/Content.js";
+import { List as qo } from "./components/Tabs/components/List.js";
+import { Trigger as Ko } from "./components/Tabs/components/Trigger.js";
+import { Tabs as Zo } from "./components/Tabs/Tabs.js";
+import { Tag as rt } from "./components/Tag/Tag.js";
+import { TagSelect as tt } from "./components/TagSelect/TagSelect.js";
+import { TagsInput as it } from "./components/TagsInput/TagsInput.js";
+import { TextArea as pt } from "./components/TextArea/TextArea.js";
+import { DEFAULT_MAX_VISIBLE_TOASTS as ft, DEFAULT_TOAST_DURATION as st, DEFAULT_TOAST_LIMIT as nt } from "./components/Toast/constants/index.js";
+import { createToastStore as dt } from "./components/Toast/store/create-toast-store.js";
+import { useToastStore as Tt, useToastStoreApi as gt } from "./components/Toast/hooks/useToastStore/useToastStore.js";
+import { useToast as Ct } from "./components/Toast/hooks/useToast/useToast.js";
+import { Toast as Dt } from "./components/Toast/Toast.js";
+import { ToastProvider as vt } from "./components/Toast/ToastProvider.js";
+import { t as Vt } from "./events.types-BG1Uh8i6.js";
+import { sendResetFiltersEvent as Et } from "./components/VirtualizedTable/events/filters/filters.js";
+import { sendRefreshEvent as ht } from "./components/VirtualizedTable/events/refresh/refresh.js";
+import { sendCollapseRowEvent as Lt, sendExpandRowEvent as Bt, sendToggleRowEvent as Ft } from "./components/VirtualizedTable/events/row/row.js";
+import { EmptyState as xt } from "./components/VirtualizedTable/components/EmptyState/EmptyState.js";
+import { EmptyResults as kt } from "./components/VirtualizedTable/components/EmptyResults/EmptyResults.js";
+import { ErrorState as Nt } from "./components/VirtualizedTable/components/ErrorState/ErrorState.js";
+import { TruncateText as _t } from "./components/VirtualizedTable/components/TruncateText/TruncateText.js";
+import { preloadVirtualizedTable as zt } from "./components/VirtualizedTable/utils/load-content/load-content.js";
+import { VirtualizedTable as Ht } from "./components/VirtualizedTable/VirtualizedTable.js";
+import { useVirtualizedTableReady as Wt } from "./components/VirtualizedTable/hooks/useVirtualizedTableReady/useVirtualizedTableReady.js";
+import { ThemeContext as jt } from "./contexts/theme.context.js";
+import { useTheme as Jt } from "./contexts/theme.hook.js";
+import { t as Yt } from "./theme.provider-CvL6sqHq.js";
 import "./contexts/index.js";
 export {
   T as Alert,
   c as AlertDialog,
-  h as Autocomplete,
+  w as Autocomplete,
   B as Avatar,
   P as AvatarGroup,
   M as Badge,
   G as BadgeGroup,
-  cr as BadgeMultiSelect,
-  p as Breadcrumb,
-  C as Button,
+  Rr as BadgeMultiSelect,
+  e as Breadcrumb,
+  S as Button,
   Q as ButtonGroup,
   X as Card,
   o as Checkbox,
   q as CheckboxCard,
   K as Collapse,
-  to as CollapseTrigger,
+  io as CollapseTrigger,
   tr as ConfirmDialog,
-  Qo as Content,
+  Xo as Content,
   Z as CopyButton,
   s as Counter,
-  Rr as CustomDateRangeFilterDropdown,
-  et as DEFAULT_MAX_VISIBLE_TOASTS,
-  at as DEFAULT_TOAST_DURATION,
-  ft as DEFAULT_TOAST_LIMIT,
-  Ar as DateFilterDropdown,
+  Ar as CustomDateRangeFilterDropdown,
+  ft as DEFAULT_MAX_VISIBLE_TOASTS,
+  st as DEFAULT_TOAST_DURATION,
+  nt as DEFAULT_TOAST_LIMIT,
+  br as DateFilterDropdown,
   ir as DatePicker,
-  br as DateRangeFilterDropdown,
+  Ir as DateRangeFilterDropdown,
   dr as DateRangePicker,
   Tr as Divider,
-  Cr as Drawer,
-  ro as Dropdown,
+  Sr as Drawer,
+  to as Dropdown,
   m as DropdownButton,
-  xt as EmptyResults,
-  Ft as EmptyState,
-  kt as ErrorState,
-  Br as Filter,
-  io as Footer,
-  Pr as ImageUpload,
+  kt as EmptyResults,
+  xt as EmptyState,
+  Nt as ErrorState,
+  Pr as Filter,
+  po as Footer,
+  yr as ImageUpload,
   a as Input,
-  eo as Label,
-  yr as LineChart,
-  Xo as List,
+  fo as Label,
+  Mr as LineChart,
+  qo as List,
   y as Loading,
-  fo as Logo,
+  no as Logo,
   rr as Modal,
-  Gr as MultiSelectDropdown,
-  So as Navigation,
-  no as NavigationGroup,
-  uo as NavigationOption,
-  go as NavigationSeparator,
+  Ur as MultiSelectDropdown,
+  Do as Navigation,
+  uo as NavigationGroup,
+  go as NavigationOption,
+  Co as NavigationSeparator,
   s as NumberInput,
-  Mr as OtpInput,
-  Or as PasswordRules,
-  Ur as PhoneNumberInput,
-  Qr as PieChart,
-  Xr as ProgressBar,
-  er as Radio,
-  qr as RadioCard,
-  Kr as RadioCardGroup,
+  Or as OtpInput,
+  Gr as PasswordRules,
+  Qr as PhoneNumberInput,
+  Xr as PieChart,
+  qr as ProgressBar,
+  pr as Radio,
+  Kr as RadioCard,
+  Zr as RadioCardGroup,
   fr as RadioGroup,
-  Zr as Range,
-  ro as Select,
-  Do as Sidebar,
-  vo as Skeleton,
-  Vo as Slider,
-  Eo as Spinner,
-  Oo as Stepper,
-  Go as Switch,
-  Uo as Table,
-  Ko as Tabs,
-  Zo as Tag,
-  rt as TagSelect,
-  tt as TagsInput,
-  it as TextArea,
-  Ir as TextMultiSelect,
-  Wt as ThemeContext,
-  Jt as ThemeProvider,
-  hr as TimeFilterDropdown,
+  ro as Range,
+  to as Select,
+  cr as Sheet,
+  vo as Sidebar,
+  Vo as Skeleton,
+  Eo as Slider,
+  ho as Spinner,
+  Go as Stepper,
+  Uo as Switch,
+  Qo as Table,
+  Zo as Tabs,
+  rt as Tag,
+  tt as TagSelect,
+  it as TagsInput,
+  pt as TextArea,
+  wr as TextMultiSelect,
+  jt as ThemeContext,
+  Yt as ThemeProvider,
+  Br as TimeFilterDropdown,
   nr as TimePicker,
-  St as Toast,
-  Dt as ToastProvider,
+  Dt as Toast,
+  vt as ToastProvider,
   O as Tooltip,
-  qo as Trigger,
-  Nt as TruncateText,
+  Ko as Trigger,
+  _t as TruncateText,
   U as Typography,
-  zt as VirtualizedTable,
-  vt as VirtualizedTableEvent,
+  Ht as VirtualizedTable,
+  Vt as VirtualizedTableEvent,
   d as cn,
-  nt as createToastStore,
-  wo as horizontalConnectorWrapperVariants,
-  _t as preloadVirtualizedTable,
+  dt as createToastStore,
+  Lo as horizontalConnectorWrapperVariants,
+  zt as preloadVirtualizedTable,
   l as resolveColor,
-  wt as sendCollapseRowEvent,
-  ht as sendExpandRowEvent,
-  Et as sendRefreshEvent,
-  Vt as sendResetFiltersEvent,
-  Lt as sendToggleRowEvent,
-  ho as stepConnectorVariants,
-  Lo as stepContentVariants,
-  Bo as stepDescriptionVariants,
-  Fo as stepIndicatorVariants,
-  Po as stepItemVariants,
-  xo as stepLabelVariants,
-  yo as stepListVariants,
-  ko as stepVariants,
-  Mo as stepperVariants,
+  Lt as sendCollapseRowEvent,
+  Bt as sendExpandRowEvent,
+  ht as sendRefreshEvent,
+  Et as sendResetFiltersEvent,
+  Ft as sendToggleRowEvent,
+  Bo as stepConnectorVariants,
+  Fo as stepContentVariants,
+  Po as stepDescriptionVariants,
+  xo as stepIndicatorVariants,
+  yo as stepItemVariants,
+  ko as stepLabelVariants,
+  Mo as stepListVariants,
+  No as stepVariants,
+  Oo as stepperVariants,
   R as useClickOutside,
   A as useIsHydrated,
   b as useMediaQuery,
-  jt as useTheme,
-  gt as useToast,
-  dt as useToastStore,
-  ut as useToastStoreApi,
+  Jt as useTheme,
+  Ct as useToast,
+  Tt as useToastStore,
+  gt as useToastStoreApi,
   I as useToggle,
-  Ht as useVirtualizedTableReady
+  Wt as useVirtualizedTableReady
 };

package/dist/{isSymbol-BG9higgO.js → isSymbol-CcfkyZfq.js}

@@ -1,4 +1,4 @@
-import { t as i } from "./rolldown-runtime-Dw9YIBcH.js";
+import { t as i } from "./rolldown-runtime-B28h4lGi.js";
 var m = /* @__PURE__ */ i(((n, t) => {
   function r(e) {
     var o = typeof e;

package/dist/lib/components/Drawer/Drawer.types.d.ts

@@ -60,6 +60,16 @@ export type Props = PropsWithChildren & VariantProps<typeof drawerVariants> & {
     position?: 'left' | 'right';
     /** Show the X close button in the corner */
     showCloseButton?: boolean;
+    /** Close on a horizontal swipe towards the edge the panel came from (default: true) */
+    closeOnSwipe?: boolean;
+    /** Take the whole screen below 768px, whatever `defaultWidth` says (default: true) */
+    fullScreenOnMobile?: boolean;
+    /**
+     * Where focus lands on open: the first focusable element (default) or the
+     * panel itself, for drawers opened by a tap that should not start with a
+     * focus ring on their first control.
+     */
+    initialFocus?: 'first' | 'panel';
     /** Theme override for this component */
     theme?: Theme;
     /** Callback when drawer is closed (Escape key, overlay click, or close button) */

package/dist/lib/components/Drawer/Drawer.variants.d.ts

@@ -1,4 +1,5 @@
 export declare const drawerVariants: (props?: ({
+    fullScreenOnMobile?: boolean | null | undefined;
     position?: "left" | "right" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export declare const overlayVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

package/dist/lib/components/Drawer/constants/index.d.ts

@@ -4,3 +4,4 @@ export declare const DEFAULT_MAX_WIDTH = 800;
 export declare const ANIMATION_DELAY_MS = 10;
 export declare const ANIMATION_DURATION_MS = 300;
 export declare const KEYBOARD_RESIZE_STEP = 20;
+export declare const SWIPE_THRESHOLD = 60;

package/dist/lib/components/DropdownButton/DropdownButton.d.ts

@@ -3,7 +3,8 @@ import { Props } from './DropdownButton.types';
 /**
  * A button with an attached dropdown menu for selecting actions.
  * Built on Radix DropdownMenu: closes on outside click or Escape, and
- * supports full keyboard navigation.
+ * supports full keyboard navigation. With `sheetTitle` the menu becomes an
+ * action sheet docked to the bottom of the screen on touch devices.
  *
  * @example
  * ```tsx

package/dist/lib/components/DropdownButton/DropdownButton.types.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { Theme } from '../../domain/theme';
 import { Props as ButtonProps } from '../Button/Button.types';
 /**
  * Configuration for a dropdown menu option.
@@ -8,6 +9,14 @@ export type Option = {
     label: string | ReactNode;
     /** Callback fired when this option is selected */
     onClick?: VoidFunction;
+    /** Keep the option visible but inert */
+    disabled?: boolean;
+    /** Why the option is disabled; rendered beside the label and implies `disabled` */
+    disabledReason?: ReactNode;
+    /** Style the option as a destructive action */
+    destructive?: boolean;
+    /** Draw a divider above this option */
+    separator?: boolean;
 };
 /**
  * Props for the DropdownButton component.
@@ -24,6 +33,8 @@ export type Option = {
  * ```
  */
 export type Props = {
+    /** Edge of the trigger the menu aligns to (default: 'start') */
+    align?: 'start' | 'end';
     /** Appearance of the trigger button */
     appearance?: ButtonProps['appearance'];
     /** Additional CSS classes for the trigger button */
@@ -42,6 +53,20 @@ export type Props = {
     listClassName?: string;
     /** Array of options to display in the dropdown */
     options: Option[];
+    /**
+     * Render the options as an action sheet docked to the bottom of the screen
+     * instead of a dropdown while `sheetQuery` matches. The title heads the sheet.
+     */
+    sheetTitle?: ReactNode;
+    /**
+     * Media query that switches to the action sheet (default: touch pointers and
+     * viewports under 768px).
+     */
+    sheetQuery?: string;
+    /** Screen edge the action sheet docks to (default: 'bottom') */
+    sheetPosition?: 'bottom' | 'top';
+    /** Theme override for the dropdown and the sheet */
+    theme?: Theme;
     /** Variant of the trigger button */
     variant?: ButtonProps['variant'];
     /** Version of the trigger button */

package/dist/lib/components/DropdownButton/components/ActionSheet/ActionSheet.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import { Props } from './ActionSheet.types';
+/**
+ * The touch-screen counterpart of the dropdown menu: a Sheet with one 44px
+ * button per option.
+ */
+export declare const ActionSheet: FC<Props>;

package/dist/lib/components/DropdownButton/components/ActionSheet/ActionSheet.types.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import { Theme } from '../../../../domain/theme';
+import { Option } from '../../DropdownButton.types';
+export type Props = {
+    isOpen: boolean;
+    onClose: () => void;
+    title: ReactNode;
+    options: Option[];
+    itemClassName?: string;
+    position?: 'bottom' | 'top';
+    theme?: Theme;
+};

package/dist/lib/components/Modal/Modal.types.d.ts

@@ -34,6 +34,8 @@ export type Props = PropsWithChildren & VariantProps<typeof modalVariants> & {
     container?: Element | DocumentFragment;
     /** Whether the modal is open */
     isOpen?: boolean;
+    /** Close when the overlay behind the modal is clicked. Defaults to true */
+    closeOnOverlayClick?: boolean;
     /** Show the X close button in the corner */
     showCloseButton?: boolean;
     /** Theme override for this component */

package/dist/lib/components/Modal/components/Wrapper/Wrapper.types.d.ts

@@ -10,6 +10,7 @@ export type Props = PropsWithChildren & VariantProps<typeof modalVariants> & {
     autoFocus?: boolean;
     buttonCloseClassName?: string;
     className?: string;
+    closeOnOverlayClick?: boolean;
     containerClassName?: string;
     showCloseButton?: boolean;
     theme?: Theme;

package/dist/lib/components/Sheet/Sheet.d.ts

@@ -0,0 +1,21 @@
+import { FC } from 'react';
+import { Props } from './Sheet.types';
+/**
+ * A dialog docked to the bottom (or top) edge of the screen, full width: the
+ * touch-screen counterpart of a dropdown or a popover menu. It slides in and
+ * out, dims the page behind a scrim, and keeps its content scrollable within
+ * the viewport. Radix unmounts closed dialogs, so the portal is force-mounted
+ * and AnimatePresence keeps it around for the exit animation.
+ *
+ * Multi-step sheets pass a `step`: when it changes the content slides across
+ * (forward for a higher step, back for a lower one) and the panel height
+ * animates to the new content.
+ *
+ * @example
+ * ```tsx
+ * <Sheet isOpen={isOpen} onClose={() => setIsOpen(false)} title="Region">
+ *   <button type="button">London</button>
+ * </Sheet>
+ * ```
+ */
+export declare const Sheet: FC<Props>;

package/dist/lib/components/Sheet/Sheet.types.d.ts

@@ -0,0 +1,39 @@
+import { PropsWithChildren, ReactNode } from 'react';
+import { Theme } from '../../domain/theme';
+export type SheetPosition = 'bottom' | 'top';
+/**
+ * Props for the Sheet component.
+ *
+ * @example
+ * ```tsx
+ * <Sheet isOpen={isOpen} onClose={() => setIsOpen(false)} title="Region">
+ *   <button type="button">London</button>
+ * </Sheet>
+ * ```
+ */
+export type Props = PropsWithChildren<{
+    /** Whether the sheet is open */
+    isOpen: boolean;
+    /** Called when the sheet asks to close: scrim tap, Escape, or `closeOnSelect` */
+    onClose: () => void;
+    /** Heading of the sheet; also its accessible name */
+    title: ReactNode;
+    /** Keep the title for assistive technology only */
+    hideTitle?: boolean;
+    /** Rendered before the title, e.g. a back button for a nested step */
+    leading?: ReactNode;
+    /** Screen edge the sheet docks to (default: 'bottom') */
+    position?: SheetPosition;
+    /**
+     * Index of the step the content shows. Changing it slides the content across
+     * (forward for a higher index, back for a lower one) and animates the panel
+     * height to the new content.
+     */
+    step?: number;
+    /** Additional CSS classes for the panel */
+    className?: string;
+    /** Additional CSS classes for the scrolling body */
+    bodyClassName?: string;
+    /** Theme override for the sheet */
+    theme?: Theme;
+}>;

package/dist/lib/components/Sidebar/Sidebar.types.d.ts

@@ -72,6 +72,15 @@ export interface Props extends Omit<VariantProps<typeof wrapperSiderbarVariants>
     triggerClassName?: string;
     /** Accessible label for the mobile navigation trigger */
     openNavigationLabel?: string;
+    /**
+     * In `collapsed` mode, expanding through the CollapseTrigger floats the
+     * expanded sidebar over the page behind a scrim instead of pushing the
+     * content. Tapping the scrim, pressing Escape or choosing a destination
+     * collapses it again. The `<aside>` carries `data-overlay` while floating.
+     */
+    expandAsOverlay?: boolean;
+    /** Additional CSS classes for the scrim rendered behind the floating sidebar */
+    overlayClassName?: string;
     /**
      * Per-slot class overrides for the underlying `Drawer` rendered in
      * `drawer` mode. Mirrors `Drawer`'s `classNames` shape: `root`, `overlay`,