@optiaxiom/react 1.4.4 → 1.5.0

package/dist/unstable.d.ts

@@ -1,7 +1,7 @@
 import * as react from 'react';
-import { ComponentPropsWithoutRef, ComponentPropsWithRef, ReactNode, ReactElement } from 'react';
-import { B as BoxProps, S as Sprinkles, v as Link, E as ExcludeProps, e as Checkbox, K as Text, f as Box, H as HeadingProps, I as Input, x as ListboxItemized, c as ExtendProps, p as DialogContent, P as PopoverContent, i as PopoverTrigger, R as RecipeVariants, F as Flex, a as ButtonProps } from './Link-BoYdGwic.js';
-export { C as Calendar, d as CalendarProps } from './Link-BoYdGwic.js';
+import { ComponentPropsWithoutRef, ReactNode, ReactElement, ComponentPropsWithRef } from 'react';
+import { B as BoxProps, S as Sprinkles, s as Link, A as ActionsContent, E as ExcludeProps, C as Checkbox, I as Input, u as ListboxItemized, J as TableHeaderCell, c as ExtendProps, n as DialogContent, P as PopoverContent, i as PopoverTrigger, R as RecipeVariants, F as Flex, a as ButtonProps } from './Link-CKWcnpT8.js';
+export { d as Calendar, e as CalendarProps } from './Link-CKWcnpT8.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { Header } from '@tanstack/react-table';
 import * as RadixPopover from '@radix-ui/react-popover';
@@ -33,9 +33,9 @@ declare const BreadcrumbLink: react.ForwardRefExoticComponent<Omit<NonNullable<S
 }>, never> & Omit<Omit<{
     appearance?: "default" | "inverse" | "subtle" | undefined;
 } & {
+    cover?: "inset" | boolean;
     disabled?: boolean;
     external?: boolean;
-    overlay?: "inset" | boolean;
 } & Omit<NonNullable<Sprinkles & {
     asChild?: boolean;
     className?: string;
@@ -47,47 +47,60 @@ declare const BreadcrumbPage: react.ForwardRefExoticComponent<Omit<NonNullable<S
     className?: string;
 }>, never> & Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "color" | "className"> & react.RefAttributes<HTMLSpanElement>>;
 
-type CardProps = BoxProps<"div", {
-    /**
-     * The orientation/layout of the elements inside the card.
-     */
-    orientation?: "horizontal" | "vertical";
-}>;
-declare const Card: react.ForwardRefExoticComponent<{
-    /**
-     * The orientation/layout of the elements inside the card.
-     */
-    orientation?: "horizontal" | "vertical";
-} & Omit<NonNullable<Sprinkles & {
+type CardProps = BoxProps<"div">;
+declare const Card: react.ForwardRefExoticComponent<Omit<NonNullable<Sprinkles & {
     asChild?: boolean;
     className?: string;
 }>, never> & Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "color" | "className"> & react.RefAttributes<HTMLDivElement>>;
 
-type CardActionProps = BoxProps<"div">;
-declare const CardAction: react.ForwardRefExoticComponent<Omit<NonNullable<Sprinkles & {
+type CardActionProps = ComponentPropsWithoutRef<typeof ActionsContent>;
+declare const CardAction: react.ForwardRefExoticComponent<Omit<{
+    visible?: "always" | "if-needed" | undefined;
+} & Omit<NonNullable<Sprinkles & {
     asChild?: boolean;
     className?: string;
-}>, never> & Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "color" | "className"> & react.RefAttributes<HTMLDivElement>>;
+}>, never> & Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "color" | "className"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
 
 type CardCheckboxProps = ExcludeProps<ComponentPropsWithoutRef<typeof Checkbox>, "description">;
 declare const CardCheckbox: react.ForwardRefExoticComponent<CardCheckboxProps & react.RefAttributes<HTMLInputElement>>;
 
-type CardContentProps = BoxProps<"div">;
-declare const CardContent: react.ForwardRefExoticComponent<Omit<NonNullable<Sprinkles & {
+type CardFooterProps = BoxProps<"div">;
+declare const CardFooter: react.ForwardRefExoticComponent<Omit<NonNullable<Sprinkles & {
     asChild?: boolean;
     className?: string;
 }>, never> & Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "color" | "className"> & react.RefAttributes<HTMLDivElement>>;
 
-type CardDescriptionProps = ComponentPropsWithRef<typeof Text>;
-declare const CardDescription: react.ForwardRefExoticComponent<Omit<Omit<Omit<{
-    lineClamp?: "1" | "2" | "3" | "4" | undefined;
-    truncate?: boolean | undefined;
-}, never> & Omit<NonNullable<Sprinkles & {
+type CardHeaderProps = BoxProps<"div", {
+    /**
+     * Display content inside the header after `children`.
+     */
+    addonAfter?: ReactNode;
+    /**
+     * Display content inside the header before `children`.
+     */
+    addonBefore?: ReactNode;
+    /**
+     * Add secondary text after the primary title.
+     */
+    description?: ReactNode;
+}>;
+declare const CardHeader: react.ForwardRefExoticComponent<{
+    /**
+     * Display content inside the header after `children`.
+     */
+    addonAfter?: ReactNode;
+    /**
+     * Display content inside the header before `children`.
+     */
+    addonBefore?: ReactNode;
+    /**
+     * Add secondary text after the primary title.
+     */
+    description?: ReactNode;
+} & Omit<NonNullable<Sprinkles & {
     asChild?: boolean;
     className?: string;
-}>, never> & Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref">, "color" | "className"> & react.RefAttributes<HTMLParagraphElement>, "ref"> & {
-    ref?: ((instance: HTMLParagraphElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLParagraphElement> | null | undefined;
-}, "ref"> & react.RefAttributes<HTMLParagraphElement>>;
+}>, never> & Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "color" | "className"> & react.RefAttributes<HTMLDivElement>>;
 
 type CardImageProps = BoxProps<"img">;
 declare const CardImage: react.ForwardRefExoticComponent<Omit<NonNullable<Sprinkles & {
@@ -99,32 +112,53 @@ type CardLinkProps = ComponentPropsWithoutRef<typeof Link>;
 declare const CardLink: react.ForwardRefExoticComponent<Omit<{
     appearance?: "default" | "inverse" | "subtle" | undefined;
 } & {
+    cover?: "inset" | boolean;
     disabled?: boolean;
     external?: boolean;
-    overlay?: "inset" | boolean;
 } & Omit<NonNullable<Sprinkles & {
     asChild?: boolean;
     className?: string;
 }>, never> & Omit<Omit<react.DetailedHTMLProps<react.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref">, "color" | "className"> & react.RefAttributes<HTMLAnchorElement>, "ref"> & react.RefAttributes<HTMLAnchorElement>>;
 
-type CardOverflowProps = ComponentPropsWithRef<typeof Box>;
-declare const CardOverflow: react.ForwardRefExoticComponent<Omit<Omit<Omit<NonNullable<Sprinkles & {
-    asChild?: boolean;
-    className?: string;
-}>, never> & Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "color" | "className"> & react.RefAttributes<HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLDivElement> | null | undefined;
-}, "ref"> & react.RefAttributes<HTMLDivElement>>;
-
-type CardTitleProps = HeadingProps<"h2">;
-declare const CardTitle: react.ForwardRefExoticComponent<Omit<{
-    level?: "1" | "2" | "3" | "4";
-}, never> & Omit<{
-    lineClamp?: "1" | "2" | "3" | "4" | undefined;
-    truncate?: boolean | undefined;
-}, never> & Omit<NonNullable<Sprinkles & {
+type CardPreviewProps = BoxProps<"div", {
+    /**
+     * Display content in the bottom-left corner of the preview panel.
+     */
+    addonBottomLeft?: ReactNode;
+    /**
+     * Display content in the bottom-right corner of the preview panel.
+     */
+    addonBottomRight?: ReactNode;
+    /**
+     * Display content in the top-left corner of the preview panel.
+     */
+    addonTopLeft?: ReactNode;
+    /**
+     * Display content in the top-right corner of the preview panel.
+     */
+    addonTopRight?: ReactNode;
+}>;
+declare const CardPreview: react.ForwardRefExoticComponent<{
+    /**
+     * Display content in the bottom-left corner of the preview panel.
+     */
+    addonBottomLeft?: ReactNode;
+    /**
+     * Display content in the bottom-right corner of the preview panel.
+     */
+    addonBottomRight?: ReactNode;
+    /**
+     * Display content in the top-left corner of the preview panel.
+     */
+    addonTopLeft?: ReactNode;
+    /**
+     * Display content in the top-right corner of the preview panel.
+     */
+    addonTopRight?: ReactNode;
+} & Omit<NonNullable<Sprinkles & {
     asChild?: boolean;
     className?: string;
-}>, never> & Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref">, "color" | "className"> & react.RefAttributes<HTMLDivElement>>;
+}>, never> & Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "color" | "className"> & react.RefAttributes<HTMLDivElement>>;
 
 type CommandOption = {
     /**
@@ -132,15 +166,15 @@ type CommandOption = {
      */
     addon?: ReactNode;
     /**
-     * Additional description on second line after the label.
+     * Add secondary text after the label.
      */
     description?: string;
     /**
      * Secondary text displayed next to the label.
      */
-    detail?: (context: {
+    detail?: ((context: {
         inputValue: string | undefined;
-    }) => string;
+    }) => string) | string;
     /**
      * Provide a reason why item needs to be marked as disabled and skipped from keyboard navigation.
      */
@@ -156,6 +190,11 @@ type CommandOption = {
      * Group item belongs to.
      */
     group?: CommandOptionGroup;
+    hiddenInSearchContext?: boolean;
+    /**
+     * Control the appearance by selecting between the different item types.
+     */
+    intent?: "danger" | "neutral";
     /**
      * Return a unique key for each item (otherwise label is used).
      */
@@ -189,7 +228,9 @@ type CommandOption = {
     /**
      * An array of sub items that will be displayed in a nested menu.
      */
-    subOptions?: CommandOption[];
+    subOptions?: ((context: {
+        inputValue: string | undefined;
+    }) => CommandOption[]) | CommandOption[];
     /**
      * Allow filtering through sub-options independent of the parent menu.
      */
@@ -203,8 +244,21 @@ type CommandOption = {
     }) => boolean | undefined) | boolean;
 };
 type CommandOptionGroup = {
+    /**
+     * Whether to hide the group label.
+     */
     hidden?: boolean;
+    /**
+     * Return a string representation of the group.
+     */
     label: string;
+    /**
+     * The sorting priority of the group (default: 0).
+     */
+    priority?: number;
+    /**
+     * Whether to show separators around the whole group.
+     */
     separator?: boolean;
 };
 
@@ -214,6 +268,10 @@ type CommandProps = {
      * Custom empty state content.
      */
     empty?: ReactNode;
+    /**
+     * Whether combobox should be active or not.
+     */
+    enabled?: boolean | number;
     /**
      * The input value in controlled mode.
      */
@@ -234,15 +292,17 @@ type CommandProps = {
      * Handler that is called when an item is selected either via keyboard or mouse.
      */
     onSelect?: (item: CommandOption, context: {
+        /**
+         * Whether to dismiss the associated popover or keep it open.
+         */
         dismiss: boolean;
     }) => void;
-    open?: boolean | number;
     /**
      * The items we want to render.
      */
     options: CommandOption[] | readonly CommandOption[];
 };
-declare function Command({ children, empty, inputValue: inputValueProp, loading, onHover, onInputValueChange, onSelect: onItemSelect, open, options, }: CommandProps): react_jsx_runtime.JSX.Element;
+declare function Command({ children, empty, enabled, inputValue: inputValueProp, loading, onHover, onInputValueChange, onSelect: onItemSelect, options, }: CommandProps): react_jsx_runtime.JSX.Element;
 declare namespace Command {
     var displayName: string;
 }
@@ -268,6 +328,7 @@ declare const CommandInput: react.ForwardRefExoticComponent<Omit<Pick<Omit<Pick<
 } & {
     disabled?: boolean;
     error?: boolean;
+    onValueChange?: (value: string) => void;
 }>, "size"> & Omit<NonNullable<Sprinkles & {
     asChild?: boolean;
     className?: string;
@@ -308,24 +369,47 @@ declare const CommandItem: react.ForwardRefExoticComponent<{
 type CommandListboxProps = ExcludeProps<ComponentPropsWithoutRef<typeof ListboxItemized>, "highlightedItem" | "items" | "itemToKey" | "onPlacedChange">;
 declare const CommandListbox: react.ForwardRefExoticComponent<CommandListboxProps & react.RefAttributes<HTMLDivElement>>;
 
-type DataTableHeaderCellProps = BoxProps<"th", {
+type DataTableHeaderCellProps = BoxProps<typeof TableHeaderCell, {
+    /**
+     * The Header instance to render.
+     */
     header: Header<unknown, unknown>;
 }>;
 declare const DataTableHeaderCell: react.ForwardRefExoticComponent<{
+    /**
+     * The Header instance to render.
+     */
     header: Header<unknown, unknown>;
 } & Omit<NonNullable<Sprinkles & {
     asChild?: boolean;
     className?: string;
-}>, never> & Omit<Omit<react.DetailedHTMLProps<react.ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, "ref">, "color" | "className"> & react.RefAttributes<HTMLTableCellElement>>;
+}>, never> & Omit<Omit<{
+    pinned?: boolean | undefined;
+} & Omit<NonNullable<Sprinkles & {
+    asChild?: boolean;
+    className?: string;
+}>, never> & Omit<Omit<react.DetailedHTMLProps<react.ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, "ref">, "color" | "className"> & react.RefAttributes<HTMLTableCellElement>, "ref">, "animation" | "fontFamily" | "fontSize" | "size" | "borderColor" | "color" | "cursor" | "fontWeight" | "objectFit" | "overflowX" | "overflowY" | "pointerEvents" | "textAlign" | "textTransform" | "transition" | "whiteSpace" | "bg" | "border" | "borderB" | "borderL" | "borderR" | "borderT" | "m" | "mx" | "my" | "mb" | "ml" | "mr" | "mt" | "overflow" | "p" | "px" | "py" | "pb" | "pl" | "pr" | "pt" | "rounded" | "shadow" | "z" | "gap" | "alignItems" | "alignSelf" | "display" | "flex" | "flexDirection" | "flexWrap" | "gridColumn" | "gridTemplateColumns" | "justifyContent" | "justifyItems" | "placeItems" | "maxH" | "maxW" | "h" | "w" | "asChild" | "className"> & react.RefAttributes<HTMLTableCellElement>>;
 
 type HighlightProps = BoxProps<"div", {
     children?: (chunk: ReactElement) => ReactNode;
+    /**
+     * The string content to display and highlight terms.
+     */
     content?: string;
+    /**
+     * The query terms to highlight in the text.
+     */
     query?: RegExp | RegExp[] | string | string[];
 }>;
 declare const Highlight: react.ForwardRefExoticComponent<{
     children?: (chunk: ReactElement) => ReactNode;
+    /**
+     * The string content to display and highlight terms.
+     */
     content?: string;
+    /**
+     * The query terms to highlight in the text.
+     */
     query?: RegExp | RegExp[] | string | string[];
 } & Omit<NonNullable<Sprinkles & {
     asChild?: boolean;
@@ -333,21 +417,63 @@ declare const Highlight: react.ForwardRefExoticComponent<{
 }>, never> & Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "color" | "className" | "content" | "children"> & react.RefAttributes<HTMLDivElement>>;
 
 type InlineInputProps = BoxProps<"div", {
+    /**
+     * The initial input value in uncontrolled mode.
+     */
     defaultValue?: string;
+    /**
+     * Whether the input is disabled and in read only mode.
+     */
     disabled?: boolean;
+    /**
+     * The label and placeholder of the input.
+     */
     label: string;
+    /**
+     * Whether to allow multiple lines of text.
+     */
     multiline?: boolean;
+    /**
+     * Handler that is called when the input value changes.
+     */
     onValueChange?: (value: string) => void;
+    /**
+     * Provide a custom placeholder instead of using the label when input has no value.
+     */
     placeholder?: string;
+    /**
+     * The input value in controlled mode.
+     */
     value?: string;
 }>;
 declare const InlineInput: react.ForwardRefExoticComponent<{
+    /**
+     * The initial input value in uncontrolled mode.
+     */
     defaultValue?: string;
+    /**
+     * Whether the input is disabled and in read only mode.
+     */
     disabled?: boolean;
+    /**
+     * The label and placeholder of the input.
+     */
     label: string;
+    /**
+     * Whether to allow multiple lines of text.
+     */
     multiline?: boolean;
+    /**
+     * Handler that is called when the input value changes.
+     */
     onValueChange?: (value: string) => void;
+    /**
+     * Provide a custom placeholder instead of using the label when input has no value.
+     */
     placeholder?: string;
+    /**
+     * The input value in controlled mode.
+     */
     value?: string;
 } & Omit<NonNullable<Sprinkles & {
     asChild?: boolean;
@@ -355,11 +481,23 @@ declare const InlineInput: react.ForwardRefExoticComponent<{
 }>, never> & Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "color" | "className" | "defaultValue"> & react.RefAttributes<HTMLDivElement>>;
 
 type LayoutProps = BoxProps<"div", {
+    /**
+     * Content for the header area of the layout.
+     */
     header?: ReactNode;
+    /**
+     * Content for the sidebar area of the layout.
+     */
     sidebar?: ReactNode;
 }>;
 declare const Layout: react.ForwardRefExoticComponent<{
+    /**
+     * Content for the header area of the layout.
+     */
     header?: ReactNode;
+    /**
+     * Content for the sidebar area of the layout.
+     */
     sidebar?: ReactNode;
 } & Omit<NonNullable<Sprinkles & {
     asChild?: boolean;
@@ -373,7 +511,10 @@ type MenuProps = ExcludeProps<ExtendProps<ComponentPropsWithoutRef<typeof Comman
      * The initial open state in uncontrolled mode.
      */
     defaultOpen?: boolean;
-    initialInputVisible?: boolean;
+    /**
+     * Whether to always show the input or only if there are selectable options and/or when user starts to type.
+     */
+    inputVisible?: "always" | "if-needed";
     /**
      * Handler that is called when the open state changes.
      */
@@ -382,15 +523,21 @@ type MenuProps = ExcludeProps<ExtendProps<ComponentPropsWithoutRef<typeof Comman
      * The open state in controlled mode.
      */
     open?: boolean;
+    /**
+     * The placeholder for the search input.
+     */
     placeholder?: string;
+    /**
+     * Whether to show a small popover or a dialog. Defaults to popover on large screens and dialog on mobile screens.
+     */
     size?: "lg" | "sm";
 }>, "onSelect">;
-declare function Menu({ children, defaultOpen, initialInputVisible, inputValue: inputValueProp, onInputValueChange, onOpenChange, open: openProp, options: optionsProp, placeholder, size: sizeProp, ...props }: MenuProps): react_jsx_runtime.JSX.Element;
+declare function Menu({ children, defaultOpen, inputValue: inputValueProp, inputVisible: inputVisibleProp, onInputValueChange, onOpenChange, open: openProp, options: optionsProp, placeholder, size: sizeProp, ...props }: MenuProps): react_jsx_runtime.JSX.Element;
 declare namespace Menu {
     var displayName: string;
 }
 
-type MenuContentProps = ExcludeProps<ComponentPropsWithoutRef<typeof DialogContent> & ComponentPropsWithoutRef<typeof PopoverContent>, "minW" | "size" | "transitionType" | "withArrow">;
+type MenuContentProps = ExcludeProps<ComponentPropsWithoutRef<typeof DialogContent> & ComponentPropsWithoutRef<typeof PopoverContent>, "minW" | "size">;
 declare const MenuContent: react.ForwardRefExoticComponent<MenuContentProps & react.RefAttributes<HTMLDivElement>>;
 
 type MenuTriggerProps = ComponentPropsWithoutRef<typeof PopoverTrigger>;
@@ -440,7 +587,75 @@ declare const PillGroup: react.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omi
     ref?: ((instance: HTMLDivElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLDivElement> | null | undefined;
 }, "ref"> & react.RefAttributes<HTMLDivElement>>;
 
-type SpotlightProps = ExcludeProps<ComponentPropsWithoutRef<typeof Menu>, "initialInputVisible" | "size">;
+type SortableProps = BoxProps<"div", {
+    children?: (item: string, index: number) => ReactNode;
+    /**
+     * An array of item IDs in controlled mode.
+     */
+    items: string[];
+    /**
+     * Event handler that is called when items are re-sorted with full information about the event.
+     */
+    onChange?: (data: {
+        /**
+         * The re-sorted item IDs.
+         */
+        items: string[];
+        /**
+         * ID of the item that was being dragged.
+         */
+        source: string;
+    }) => void;
+    /**
+     * Handler that is called when the item IDs are re-sorted.
+     */
+    onItemsChange?: (value: string[]) => void;
+}>;
+declare const Sortable: react.ForwardRefExoticComponent<{
+    children?: (item: string, index: number) => ReactNode;
+    /**
+     * An array of item IDs in controlled mode.
+     */
+    items: string[];
+    /**
+     * Event handler that is called when items are re-sorted with full information about the event.
+     */
+    onChange?: (data: {
+        /**
+         * The re-sorted item IDs.
+         */
+        items: string[];
+        /**
+         * ID of the item that was being dragged.
+         */
+        source: string;
+    }) => void;
+    /**
+     * Handler that is called when the item IDs are re-sorted.
+     */
+    onItemsChange?: (value: string[]) => void;
+} & Omit<NonNullable<Sprinkles & {
+    asChild?: boolean;
+    className?: string;
+}>, never> & Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "color" | "className" | "children" | "onChange"> & react.RefAttributes<HTMLDivElement>>;
+
+type SortableHandleProps = BoxProps;
+declare const SortableHandle: react.ForwardRefExoticComponent<Omit<NonNullable<Sprinkles & {
+    asChild?: boolean;
+    className?: string;
+}>, never> & Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "color" | "className"> & react.RefAttributes<HTMLDivElement>>;
+
+type SortableItemProps = BoxProps<"div", {
+    children?: (() => ReactNode) | ReactNode;
+}>;
+declare const SortableItem: react.ForwardRefExoticComponent<{
+    children?: (() => ReactNode) | ReactNode;
+} & Omit<NonNullable<Sprinkles & {
+    asChild?: boolean;
+    className?: string;
+}>, never> & Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "color" | "className" | "children"> & react.RefAttributes<HTMLDivElement>>;
+
+type SpotlightProps = ExcludeProps<ComponentPropsWithoutRef<typeof Menu>, "inputVisible" | "size">;
 declare function Spotlight({ children, ...props }: SpotlightProps): react_jsx_runtime.JSX.Element;
 declare namespace Spotlight {
     var displayName: string;
@@ -449,12 +664,8 @@ declare namespace Spotlight {
 type SpotlightContentProps = ComponentPropsWithoutRef<typeof MenuContent>;
 declare const SpotlightContent: react.ForwardRefExoticComponent<Omit<MenuContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
 
-type SpotlightTriggerProps = ButtonProps<typeof MenuTrigger, {
-    hotkey?: string;
-}>;
-declare const SpotlightTrigger: react.ForwardRefExoticComponent<{
-    hotkey?: string;
-} & Omit<{
+type SpotlightTriggerProps = ButtonProps<typeof MenuTrigger>;
+declare const SpotlightTrigger: react.ForwardRefExoticComponent<Omit<{
     addonAfter?: react.ReactNode;
     addonBefore?: react.ReactNode;
     icon?: react.ReactNode;
@@ -490,7 +701,7 @@ declare const SpotlightTrigger: react.ForwardRefExoticComponent<{
 }>, never> & Omit<NonNullable<Sprinkles & {
     asChild?: boolean;
     className?: string;
-}>, "size"> & Omit<Omit<RadixPopover.PopoverTriggerProps & react.RefAttributes<HTMLButtonElement>, "ref">, "color" | "disabled" | "asChild" | "className"> & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>, "ref">, "animation" | "fontFamily" | "fontSize" | "size" | "borderColor" | "color" | "cursor" | "fontWeight" | "objectFit" | "overflowX" | "overflowY" | "pointerEvents" | "textAlign" | "textTransform" | "transition" | "whiteSpace" | "bg" | "border" | "borderB" | "borderL" | "borderR" | "borderT" | "m" | "mx" | "my" | "mb" | "ml" | "mr" | "mt" | "overflow" | "p" | "px" | "py" | "pb" | "pl" | "pr" | "pt" | "rounded" | "shadow" | "z" | "disabled" | "gap" | "alignItems" | "alignSelf" | "display" | "flex" | "flexDirection" | "flexWrap" | "gridColumn" | "gridTemplateColumns" | "justifyContent" | "justifyItems" | "placeItems" | "maxH" | "maxW" | "h" | "w" | "asChild" | "className" | "appearance" | "loading" | "addonAfter" | "addonBefore" | "square" | "icon" | "iconPosition"> & react.RefAttributes<HTMLButtonElement>>;
+}>, "size"> & Omit<Omit<RadixPopover.PopoverTriggerProps & react.RefAttributes<HTMLButtonElement>, "ref">, "color" | "disabled" | "asChild" | "className"> & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>, "ref">, "animation" | "fontFamily" | "fontSize" | "size" | "borderColor" | "color" | "cursor" | "fontWeight" | "objectFit" | "overflowX" | "overflowY" | "pointerEvents" | "textAlign" | "textTransform" | "transition" | "whiteSpace" | "bg" | "border" | "borderB" | "borderL" | "borderR" | "borderT" | "m" | "mx" | "my" | "mb" | "ml" | "mr" | "mt" | "overflow" | "p" | "px" | "py" | "pb" | "pl" | "pr" | "pt" | "rounded" | "shadow" | "z" | "disabled" | "gap" | "alignItems" | "alignSelf" | "display" | "flex" | "flexDirection" | "flexWrap" | "gridColumn" | "gridTemplateColumns" | "justifyContent" | "justifyItems" | "placeItems" | "maxH" | "maxW" | "h" | "w" | "asChild" | "className" | "appearance" | "addonAfter" | "addonBefore" | "loading" | "square" | "icon" | "iconPosition"> & react.RefAttributes<HTMLButtonElement>>;
 
-export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, Card, CardAction, CardCheckbox, CardContent, CardDescription, CardImage, CardLink, CardOverflow, CardTitle, Command, CommandInput, CommandItem, CommandListbox, DataTableHeaderCell, Highlight, InlineInput, Layout, Menu, MenuContent, MenuTrigger, Pill, PillGroup, Spotlight, SpotlightContent, SpotlightTrigger };
-export type { BreadcrumbEllipsisProps, BreadcrumbItemProps, BreadcrumbLinkProps, BreadcrumbPageProps, BreadcrumbProps, CardActionProps, CardCheckboxProps, CardContentProps, CardDescriptionProps, CardImageProps, CardLinkProps, CardOverflowProps, CardProps, CardTitleProps, CommandInputProps, CommandItemProps, CommandListboxProps, CommandProps, DataTableHeaderCellProps, HighlightProps, InlineInputProps, LayoutProps, MenuContentProps, MenuOption, MenuProps, MenuTriggerProps, PillGroupProps, PillProps, SpotlightContentProps, SpotlightProps, SpotlightTriggerProps };
+export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, Card, CardAction, CardCheckbox, CardFooter, CardHeader, CardImage, CardLink, CardPreview, Command, CommandInput, CommandItem, CommandListbox, DataTableHeaderCell, Highlight, InlineInput, Layout, Menu, MenuContent, MenuTrigger, Pill, PillGroup, Sortable, SortableHandle, SortableItem, Spotlight, SpotlightContent, SpotlightTrigger };
+export type { BreadcrumbEllipsisProps, BreadcrumbItemProps, BreadcrumbLinkProps, BreadcrumbPageProps, BreadcrumbProps, CardActionProps, CardCheckboxProps, CardFooterProps, CardHeaderProps, CardImageProps, CardLinkProps, CardPreviewProps, CardProps, CommandInputProps, CommandItemProps, CommandListboxProps, CommandProps, DataTableHeaderCellProps, HighlightProps, InlineInputProps, LayoutProps, MenuContentProps, MenuOption, MenuProps, MenuTriggerProps, PillGroupProps, PillProps, SortableHandleProps, SortableItemProps, SortableProps, SpotlightContentProps, SpotlightProps, SpotlightTriggerProps };

package/package.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/optimizely-axiom/optiaxiom.git"
   },
   "type": "module",
-  "version": "1.4.4",
+  "version": "1.5.0",
   "files": [
     "dist/**",
     "LICENSE"
@@ -30,50 +30,52 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@radix-ui/react-alert-dialog": "^1.1.11",
-    "@radix-ui/react-arrow": "^1.1.4",
-    "@radix-ui/react-avatar": "^1.1.7",
-    "@radix-ui/react-collapsible": "^1.1.8",
+    "@dnd-kit/helpers": "^0.1.17",
+    "@dnd-kit/react": "^0.1.17",
+    "@radix-ui/react-alert-dialog": "^1.1.14",
+    "@radix-ui/react-arrow": "^1.1.7",
+    "@radix-ui/react-avatar": "^1.1.10",
+    "@radix-ui/react-collapsible": "^1.1.11",
     "@radix-ui/react-compose-refs": "^1.1.2",
     "@radix-ui/react-context": "^1.1.2",
-    "@radix-ui/react-dialog": "^1.1.11",
-    "@radix-ui/react-dismissable-layer": "^1.1.7",
-    "@radix-ui/react-dropdown-menu": "^2.1.12",
+    "@radix-ui/react-dialog": "^1.1.14",
+    "@radix-ui/react-dismissable-layer": "^1.1.10",
+    "@radix-ui/react-dropdown-menu": "^2.1.15",
     "@radix-ui/react-focus-guards": "^1.1.2",
     "@radix-ui/react-id": "^1.1.1",
-    "@radix-ui/react-label": "^2.1.4",
-    "@radix-ui/react-menu": "^2.1.12",
-    "@radix-ui/react-popover": "^1.1.11",
-    "@radix-ui/react-popper": "^1.2.4",
-    "@radix-ui/react-portal": "^1.1.6",
-    "@radix-ui/react-primitive": "^2.1.0",
-    "@radix-ui/react-progress": "^1.1.4",
-    "@radix-ui/react-separator": "^1.1.4",
-    "@radix-ui/react-slot": "^1.2.0",
-    "@radix-ui/react-tabs": "^1.1.9",
-    "@radix-ui/react-toast": "^1.2.11",
-    "@radix-ui/react-toggle": "^1.1.6",
-    "@radix-ui/react-toggle-group": "^1.1.7",
-    "@radix-ui/react-tooltip": "^1.2.4",
+    "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-menu": "^2.1.15",
+    "@radix-ui/react-popover": "^1.1.14",
+    "@radix-ui/react-popper": "^1.2.7",
+    "@radix-ui/react-portal": "^1.1.9",
+    "@radix-ui/react-primitive": "^2.1.3",
+    "@radix-ui/react-progress": "^1.1.7",
+    "@radix-ui/react-separator": "^1.1.7",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-tabs": "^1.1.12",
+    "@radix-ui/react-toast": "^1.2.14",
+    "@radix-ui/react-toggle": "^1.1.9",
+    "@radix-ui/react-toggle-group": "^1.1.10",
+    "@radix-ui/react-tooltip": "^1.2.7",
     "@radix-ui/react-use-controllable-state": "^1.2.2",
-    "@radix-ui/react-visually-hidden": "^1.2.0",
-    "@tanstack/react-virtual": "^3.13.6",
-    "@tanstack/virtual-core": "^3.13.6",
-    "@vanilla-extract/dynamic": "^2.1.2",
+    "@radix-ui/react-visually-hidden": "^1.2.3",
+    "@tanstack/react-virtual": "^3.13.9",
+    "@tanstack/virtual-core": "^3.13.9",
+    "@vanilla-extract/dynamic": "^2.1.3",
     "clsx": "^2.1.1",
     "downshift": "^9.0.9",
-    "react-day-picker": "^9.6.7",
-    "react-remove-scroll": "^2.6.3",
+    "react-day-picker": "^9.7.0",
+    "react-remove-scroll": "^2.7.0",
     "use-sync-external-store": "^1.5.0",
-    "@optiaxiom/globals": "^1.0.4"
+    "@optiaxiom/globals": "^1.0.5"
   },
   "devDependencies": {
     "@emotion/hash": "^0.9.2",
-    "@mantine/hooks": "^7.17.4",
-    "@radix-ui/react-focus-scope": "^1.1.4",
-    "@types/node": "^22.14.1",
+    "@mantine/hooks": "^8.0.1",
+    "@radix-ui/react-focus-scope": "^1.1.7",
+    "@types/node": "^22.15.21",
     "@types/use-sync-external-store": "^1.5.0",
-    "@vanilla-extract/css": "^1.17.1",
+    "@vanilla-extract/css": "^1.17.2",
     "@vanilla-extract/sprinkles": "^1.6.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",