@douglasneuroinformatics/libui 2.3.1 → 2.4.1

package/dist/components/ActionDropdown/ActionDropdown.d.ts

@@ -8,13 +8,17 @@ type ActionDropdownOptionKey<T> = T extends readonly string[] ? T[number] : T ex
 } ? Extract<keyof T, string> : never;
 export type ActionDropdownProps<T extends ActionDropdownOptions> = {
     align?: DropdownMenuContentProps['align'];
+    contentClassName?: string;
+    disabled?: boolean;
     /** Callback function invoked when user clicks an option */
     onSelection: (option: ActionDropdownOptionKey<T>) => void;
     /** Either a list of options for the dropdown, or an object with options mapped to custom labels  */
     options: T;
     /** The text content for the dropdown toggle */
     title: string;
+    triggerClassName?: string;
+    widthFull?: boolean;
 };
-export declare function ActionDropdown<const T extends ActionDropdownOptions>({ align, onSelection, options, title }: ActionDropdownProps<T>): React.JSX.Element;
+export declare function ActionDropdown<const T extends ActionDropdownOptions>({ align, contentClassName, disabled, onSelection, options, title, triggerClassName, widthFull }: ActionDropdownProps<T>): React.JSX.Element;
 export {};
 //# sourceMappingURL=ActionDropdown.d.ts.map

package/dist/components/ActionDropdown/ActionDropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActionDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/ActionDropdown/ActionDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,wCAAwC,CAAC;AAEvF,KAAK,qBAAqB,GAAG;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,GAAG,SAAS,MAAM,EAAE,CAAC;AAE3E,KAAK,uBAAuB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,MAAM,EAAE,GACzD,CAAC,CAAC,MAAM,CAAC,GACT,CAAC,SAAS;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,GACjC,OAAO,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,GACxB,KAAK,CAAC;AAEZ,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,qBAAqB,IAAI;IACjE,KAAK,CAAC,EAAE,wBAAwB,CAAC,OAAO,CAAC,CAAC;IAE1C,2DAA2D;IAC3D,WAAW,EAAE,CAAC,MAAM,EAAE,uBAAuB,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAE1D,oGAAoG;IACpG,OAAO,EAAE,CAAC,CAAC;IAEX,+CAA+C;IAC/C,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAGF,wBAAgB,cAAc,CAAC,KAAK,CAAC,CAAC,SAAS,qBAAqB,EAAE,EACpE,KAAe,EACf,WAAW,EACX,OAAO,EACP,KAAK,EACN,EAAE,mBAAmB,CAAC,CAAC,CAAC,qBAyBxB"}
+{"version":3,"file":"ActionDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/ActionDropdown/ActionDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,wCAAwC,CAAC;AAEvF,KAAK,qBAAqB,GAAG;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,GAAG,SAAS,MAAM,EAAE,CAAC;AAE3E,KAAK,uBAAuB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,MAAM,EAAE,GACzD,CAAC,CAAC,MAAM,CAAC,GACT,CAAC,SAAS;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,GACjC,OAAO,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,GACxB,KAAK,CAAC;AAEZ,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,qBAAqB,IAAI;IACjE,KAAK,CAAC,EAAE,wBAAwB,CAAC,OAAO,CAAC,CAAC;IAE1C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,2DAA2D;IAC3D,WAAW,EAAE,CAAC,MAAM,EAAE,uBAAuB,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAE1D,oGAAoG;IACpG,OAAO,EAAE,CAAC,CAAC;IAEX,+CAA+C;IAC/C,KAAK,EAAE,MAAM,CAAC;IAEd,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAGF,wBAAgB,cAAc,CAAC,KAAK,CAAC,CAAC,SAAS,qBAAqB,EAAE,EACpE,KAAe,EACf,gBAAgB,EAChB,QAAQ,EACR,WAAW,EACX,OAAO,EACP,KAAK,EACL,gBAAgB,EAChB,SAAS,EACV,EAAE,mBAAmB,CAAC,CAAC,CAAC,qBA2BxB"}

package/dist/components/ActionDropdown/ActionDropdown.js

@@ -2,13 +2,13 @@ import React from 'react';
 import { DropdownButton } from '../DropdownButton/DropdownButton.js';
 import { DropdownMenu } from '../DropdownMenu/DropdownMenu.js';
 // eslint-disable-next-line react/function-component-definition
-export function ActionDropdown({ align = 'start', onSelection, options, title }) {
+export function ActionDropdown({ align = 'start', contentClassName, disabled, onSelection, options, title, triggerClassName, widthFull }) {
     const optionKeys = options instanceof Array ? options : Object.keys(options);
     return (React.createElement(DropdownMenu, null,
         React.createElement("div", { className: "w-full" },
             React.createElement(DropdownMenu.Trigger, { asChild: true },
-                React.createElement(DropdownButton, null, title)),
-            React.createElement(DropdownMenu.Content, { align: align, style: { width: 'var(--radix-popper-anchor-width)' } },
+                React.createElement(DropdownButton, { className: triggerClassName, disabled: disabled }, title)),
+            React.createElement(DropdownMenu.Content, { align: align, className: contentClassName, widthFull: widthFull },
                 React.createElement(DropdownMenu.Group, null, optionKeys.map((option) => (React.createElement(DropdownMenu.Item, { key: option, onClick: () => {
                         onSelection(option);
                     } }, Array.isArray(options) ? option : options[option]))))))));

package/dist/components/ClientTable/ClientTable.js

@@ -30,7 +30,7 @@ export const ClientTable = ({ className, columnDropdownOptions, columns, data, e
     const currentEntries = data.slice(firstEntry - 1, lastEntry);
     const nRows = Math.max(currentEntries.length, minRows ?? -1);
     return (React.createElement("div", { className: className },
-        React.createElement("div", { className: "rounded-md border bg-card tracking-tight text-muted-foreground shadow" },
+        React.createElement("div", { className: "rounded-md border bg-card tracking-tight text-muted-foreground shadow-sm" },
             React.createElement(Table, null,
                 React.createElement(Table.Header, null,
                     React.createElement(Table.Row, null, columns.map((column, i) => (React.createElement(Table.Head, { className: "whitespace-nowrap text-foreground", key: i }, columnDropdownOptions ? (React.createElement(DropdownMenu, null,

package/dist/components/Dialog/Dialog.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" resolution-mode="require"/>
 export declare const Dialog: import("react").FC<import("@radix-ui/react-dialog").DialogProps> & {
+    Body: ({ children, className, ...props }: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => import("react").JSX.Element;
     Content: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog").DialogContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     Description: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog").DialogDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
     Footer: ({ className, ...props }: import("react").HTMLAttributes<HTMLDivElement>) => import("react").JSX.Element;

package/dist/components/Dialog/Dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":";AAQA,eAAO,MAAM,MAAM;;;;;;;CAOjB,CAAC"}
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":";AASA,eAAO,MAAM,MAAM;;;;;;;;CAQjB,CAAC"}

package/dist/components/Dialog/Dialog.js

@@ -1,10 +1,12 @@
 import { Root, Trigger } from '@radix-ui/react-dialog';
+import { DialogBody } from './DialogBody.js';
 import { DialogContent } from './DialogContent.js';
 import { DialogDescription } from './DialogDescription.js';
 import { DialogFooter } from './DialogFooter.js';
 import { DialogHeader } from './DialogHeader.js';
 import { DialogTitle } from './DialogTitle.js';
 export const Dialog = Object.assign(Root.bind(null), {
+    Body: DialogBody,
     Content: DialogContent,
     Description: DialogDescription,
     Footer: DialogFooter,

package/dist/components/Dialog/DialogBody.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const DialogBody: ({ children, className, ...props }: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => React.JSX.Element;
+//# sourceMappingURL=DialogBody.d.ts.map

package/dist/components/Dialog/DialogBody.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogBody.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/DialogBody.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,eAAO,MAAM,UAAU,sCAIpB,MAAM,iBAAiB,CAAC,MAAM,cAAc,CAAC,cAAc,CAAC,EAAE,cAAc,CAAC,sBAM/E,CAAC"}

package/dist/components/Dialog/DialogBody.js

@@ -0,0 +1,5 @@
+import React from 'react';
+import { cn } from '../../utils.js';
+export const DialogBody = ({ children, className, ...props }) => {
+    return (React.createElement("div", { className: cn('py-4', className), ...props }, children));
+};

package/dist/components/DropdownButton/DropdownButton.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { ChevronDownIcon } from 'lucide-react';
 import { cn } from '../../utils.js';
 export const DropdownButton = React.forwardRef(function DropdownButton({ children, className, ...props }, ref) {
-    return (React.createElement("button", { className: cn('flex h-9 w-full items-center whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1', children ? 'justify-between' : 'justify-end', className), ref: ref, type: "button", ...props },
+    return (React.createElement("button", { className: cn('flex h-9 w-full items-center gap-2 whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1', children ? 'justify-between' : 'justify-end', className), ref: ref, type: "button", ...props },
         children,
         React.createElement(ChevronDownIcon, { className: "h-4 w-4 opacity-50" })));
 });

package/dist/components/ListboxDropdown/ListboxDropdown.d.ts

@@ -7,12 +7,15 @@ export type ListboxDropdownOption = {
 export type ListboxDropdownProps<T extends ListboxDropdownOption> = {
     checkPosition?: 'left' | 'right';
     className?: string;
+    contentClassName?: string;
+    disabled?: boolean;
     options: T[];
     selected: T[];
     setSelected: React.Dispatch<React.SetStateAction<T[]>>;
     title: string;
-    /** The button variant to use for the dropdown toggle */
+    triggerClassName?: string;
     variant?: ButtonProps['variant'];
+    widthFull?: boolean;
 };
-export declare const ListboxDropdown: <T extends ListboxDropdownOption>({ options, selected, setSelected, title }: ListboxDropdownProps<T>) => React.JSX.Element;
+export declare const ListboxDropdown: <T extends ListboxDropdownOption>({ contentClassName, disabled, options, selected, setSelected, title, triggerClassName, widthFull }: ListboxDropdownProps<T>) => React.JSX.Element;
 //# sourceMappingURL=ListboxDropdown.d.ts.map

package/dist/components/ListboxDropdown/ListboxDropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListboxDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/ListboxDropdown/ListboxDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAIvD,MAAM,MAAM,qBAAqB,GAAG;IAClC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,oBAAoB,CAAC,CAAC,SAAS,qBAAqB,IAAI;IAClE,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,CAAC,EAAE,CAAC;IACb,QAAQ,EAAE,CAAC,EAAE,CAAC;IACd,WAAW,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACvD,KAAK,EAAE,MAAM,CAAC;IACd,wDAAwD;IACxD,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;CAClC,CAAC;AAEF,eAAO,MAAM,eAAe,+EAKzB,qBAAqB,CAAC,CAAC,sBAiCzB,CAAC"}
+{"version":3,"file":"ListboxDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/ListboxDropdown/ListboxDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAIvD,MAAM,MAAM,qBAAqB,GAAG;IAClC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,oBAAoB,CAAC,CAAC,SAAS,qBAAqB,IAAI;IAClE,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,CAAC,EAAE,CAAC;IACb,QAAQ,EAAE,CAAC,EAAE,CAAC;IACd,WAAW,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACvD,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,eAAe,wIASzB,qBAAqB,CAAC,CAAC,sBAiCzB,CAAC"}

package/dist/components/ListboxDropdown/ListboxDropdown.js

@@ -1,12 +1,13 @@
 import React from 'react';
+import { cn } from '../../utils.js';
 import {} from '../Button/Button.js';
 import { DropdownButton } from '../DropdownButton/DropdownButton.js';
 import { DropdownMenu } from '../DropdownMenu/DropdownMenu.js';
-export const ListboxDropdown = ({ options, selected, setSelected, title }) => {
+export const ListboxDropdown = ({ contentClassName, disabled, options, selected, setSelected, title, triggerClassName, widthFull }) => {
     return (React.createElement(DropdownMenu, null,
-        React.createElement(DropdownMenu.Trigger, { asChild: true, className: "w-full" },
+        React.createElement(DropdownMenu.Trigger, { asChild: true, className: cn('w-full', triggerClassName), disabled: disabled },
             React.createElement(DropdownButton, null, title)),
-        React.createElement(DropdownMenu.Content, { widthFull: true, align: "start" }, options.map((option) => {
+        React.createElement(DropdownMenu.Content, { align: "start", className: contentClassName, widthFull: widthFull }, options.map((option) => {
             const checked = Boolean(selected.find((selectedOption) => selectedOption.key === option.key));
             return (React.createElement(DropdownMenu.CheckboxItem, { checked: checked, className: "flex w-full items-center whitespace-nowrap bg-slate-50 p-2 text-sm hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700 ", "data-cy": "select-dropdown-option", key: option.key, onSelect: (event) => {
                     event.preventDefault();

package/dist/components/SearchBar/SearchBar.d.ts

@@ -6,6 +6,8 @@ export type BaseSearchBarProps = {
     onClick?: () => void;
     /** Custom placeholder to use instead of the default */
     placeholder?: string;
+    /** Whether the input element should be readonly */
+    readOnly?: boolean;
 };
 type ControlledSearchBarProps = {
     /** Event handler called when the value changes */
@@ -18,6 +20,6 @@ type UncontrolledSearchBarProps = {
     value?: never;
 } & BaseSearchBarProps;
 export type SearchBarProps = ControlledSearchBarProps | UncontrolledSearchBarProps;
-export declare const SearchBar: ({ className, onClick, onValueChange, placeholder, value }: SearchBarProps) => React.JSX.Element;
+export declare const SearchBar: ({ className, onClick, onValueChange, placeholder, readOnly, value }: SearchBarProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=SearchBar.d.ts.map

package/dist/components/SearchBar/SearchBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.d.ts","sourceRoot":"","sources":["../../../src/components/SearchBar/SearchBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,MAAM,MAAM,kBAAkB,GAAG;IAC/B,0GAA0G;IAC1G,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uEAAuE;IACvE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,uDAAuD;IACvD,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,KAAK,wBAAwB,GAAG;IAC9B,kDAAkD;IAClD,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,qGAAqG;IACrG,KAAK,EAAE,MAAM,CAAC;CACf,GAAG,kBAAkB,CAAC;AAEvB,KAAK,0BAA0B,GAAG;IAChC,aAAa,CAAC,EAAE,KAAK,CAAC;IACtB,KAAK,CAAC,EAAE,KAAK,CAAC;CACf,GAAG,kBAAkB,CAAC;AAEvB,MAAM,MAAM,cAAc,GAAG,wBAAwB,GAAG,0BAA0B,CAAC;AAEnF,eAAO,MAAM,SAAS,8DAA+D,cAAc,sBAiBlG,CAAC"}
+{"version":3,"file":"SearchBar.d.ts","sourceRoot":"","sources":["../../../src/components/SearchBar/SearchBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,MAAM,MAAM,kBAAkB,GAAG;IAC/B,0GAA0G;IAC1G,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uEAAuE;IACvE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,uDAAuD;IACvD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,KAAK,wBAAwB,GAAG;IAC9B,kDAAkD;IAClD,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,qGAAqG;IACrG,KAAK,EAAE,MAAM,CAAC;CACf,GAAG,kBAAkB,CAAC;AAEvB,KAAK,0BAA0B,GAAG;IAChC,aAAa,CAAC,EAAE,KAAK,CAAC;IACtB,KAAK,CAAC,EAAE,KAAK,CAAC;CACf,GAAG,kBAAkB,CAAC;AAEvB,MAAM,MAAM,cAAc,GAAG,wBAAwB,GAAG,0BAA0B,CAAC;AAEnF,eAAO,MAAM,SAAS,wEAAyE,cAAc,sBAkB5G,CAAC"}

package/dist/components/SearchBar/SearchBar.js

@@ -3,11 +3,11 @@ import { SearchIcon } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { cn } from '../../utils.js';
 import { Input } from '../Input/Input.js';
-export const SearchBar = ({ className, onClick, onValueChange, placeholder, value }) => {
+export const SearchBar = ({ className, onClick, onValueChange, placeholder, readOnly, value }) => {
     const { t } = useTranslation('libui');
     return (React.createElement("form", { className: cn('relative', className) },
         React.createElement(SearchIcon, { className: "absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" }),
-        React.createElement(Input, { className: "pl-8", placeholder: placeholder ?? t('searchBar.placeholder'), type: "search", value: value, onChange: (event) => {
+        React.createElement(Input, { className: "pl-8", placeholder: placeholder ?? t('searchBar.placeholder'), readOnly: readOnly, type: "search", value: value, onChange: (event) => {
                 onValueChange?.(event.target.value);
             }, onClick: () => onClick?.() })));
 };

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

@@ -1,5 +1,6 @@
 /// <reference types="react" resolution-mode="require"/>
 export declare const Sheet: import("react").FC<import("@radix-ui/react-dialog").DialogProps> & {
+    Body: ({ children, className, ...props }: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => import("react").JSX.Element;
     Close: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
     Content: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog").DialogContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("class-variance-authority").VariantProps<(props?: ({
         side?: "top" | "right" | "bottom" | "left" | null | undefined;

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

@@ -1 +1 @@
-{"version":3,"file":"Sheet.d.ts","sourceRoot":"","sources":["../../../src/components/Sheet/Sheet.tsx"],"names":[],"mappings":";AASA,eAAO,MAAM,KAAK;;;;;;;;;;;;CAUhB,CAAC"}
+{"version":3,"file":"Sheet.d.ts","sourceRoot":"","sources":["../../../src/components/Sheet/Sheet.tsx"],"names":[],"mappings":";AAUA,eAAO,MAAM,KAAK;;;;;;;;;;;;;CAWhB,CAAC"}

package/dist/components/Sheet/Sheet.js

@@ -1,4 +1,5 @@
 import { Close, Portal, Root, Trigger } from '@radix-ui/react-dialog';
+import { SheetBody } from './SheetBody.js';
 import { SheetContent } from './SheetContent.js';
 import { SheetDescription } from './SheetDescription.js';
 import { SheetFooter } from './SheetFooter.js';
@@ -6,6 +7,7 @@ import { SheetHeader } from './SheetHeader.js';
 import { SheetOverlay } from './SheetOverlay.js';
 import { SheetTitle } from './SheetTitle.js';
 export const Sheet = Object.assign(Root.bind(null), {
+    Body: SheetBody,
     Close,
     Content: SheetContent,
     Description: SheetDescription,

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

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const SheetBody: ({ children, className, ...props }: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => React.JSX.Element;
+//# sourceMappingURL=SheetBody.d.ts.map

package/dist/components/Sheet/SheetBody.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SheetBody.d.ts","sourceRoot":"","sources":["../../../src/components/Sheet/SheetBody.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,eAAO,MAAM,SAAS,sCAInB,MAAM,iBAAiB,CAAC,MAAM,cAAc,CAAC,cAAc,CAAC,EAAE,cAAc,CAAC,sBAM/E,CAAC"}

package/dist/components/Sheet/SheetBody.js

@@ -0,0 +1,5 @@
+import React from 'react';
+import { cn } from '../../utils.js';
+export const SheetBody = ({ children, className, ...props }) => {
+    return (React.createElement("div", { className: cn('py-4', className), ...props }, children));
+};

package/dist/components.d.ts

@@ -25,9 +25,6 @@ export * from './components/HoverCard/HoverCard.js';
 export * from './components/Input/Input.js';
 export * from './components/Label/Label.js';
 export * from './components/LanguageToggle/LanguageToggle.js';
-export * from './components/LegacyModal/LegacyModal.js';
-export * from './components/LegacySlider/LegacySlider.js';
-export * from './components/LegacyStepper/LegacyStepper.js';
 export * from './components/LineGraph/LineGraph.js';
 export * from './components/ListboxDropdown/ListboxDropdown.js';
 export * from './components/MenuBar/MenuBar.js';

package/dist/components.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../src/components.ts"],"names":[],"mappings":"AAAA,cAAc,qCAAqC,CAAC;AACpD,cAAc,+CAA+C,CAAC;AAC9D,cAAc,yCAAyC,CAAC;AACxD,cAAc,yCAAyC,CAAC;AACxD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,uCAAuC,CAAC;AACtD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,mCAAmC,CAAC;AAClD,cAAc,yCAAyC,CAAC;AACxD,cAAc,yCAAyC,CAAC;AACxD,cAAc,iCAAiC,CAAC;AAChD,cAAc,yCAAyC,CAAC;AACxD,cAAc,uCAAuC,CAAC;AACtD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,+CAA+C,CAAC;AAC9D,cAAc,2CAA2C,CAAC;AAC1D,cAAc,6CAA6C,CAAC;AAC5D,cAAc,6CAA6C,CAAC;AAC5D,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iCAAiC,CAAC;AAChD,cAAc,qCAAqC,CAAC;AACpD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,+CAA+C,CAAC;AAC9D,cAAc,yCAAyC,CAAC;AACxD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,6CAA6C,CAAC;AAC5D,cAAc,qCAAqC,CAAC;AACpD,cAAc,iDAAiD,CAAC;AAChE,cAAc,iCAAiC,CAAC;AAChD,cAAc,iDAAiD,CAAC;AAChE,cAAc,uCAAuC,CAAC;AACtD,cAAc,iCAAiC,CAAC;AAChD,cAAc,mCAAmC,CAAC;AAClD,cAAc,uCAAuC,CAAC;AACtD,cAAc,qCAAqC,CAAC;AACpD,cAAc,uCAAuC,CAAC;AACtD,cAAc,qCAAqC,CAAC;AACpD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qCAAqC,CAAC;AACpD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,iCAAiC,CAAC;AAChD,cAAc,yCAAyC,CAAC;AACxD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,mCAAmC,CAAC;AAClD,cAAc,yCAAyC,CAAC;AACxD,cAAc,iCAAiC,CAAC"}
+{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../src/components.ts"],"names":[],"mappings":"AAAA,cAAc,qCAAqC,CAAC;AACpD,cAAc,+CAA+C,CAAC;AAC9D,cAAc,yCAAyC,CAAC;AACxD,cAAc,yCAAyC,CAAC;AACxD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,uCAAuC,CAAC;AACtD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,mCAAmC,CAAC;AAClD,cAAc,yCAAyC,CAAC;AACxD,cAAc,yCAAyC,CAAC;AACxD,cAAc,iCAAiC,CAAC;AAChD,cAAc,yCAAyC,CAAC;AACxD,cAAc,uCAAuC,CAAC;AACtD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,+CAA+C,CAAC;AAC9D,cAAc,2CAA2C,CAAC;AAC1D,cAAc,6CAA6C,CAAC;AAC5D,cAAc,6CAA6C,CAAC;AAC5D,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iCAAiC,CAAC;AAChD,cAAc,qCAAqC,CAAC;AACpD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,+CAA+C,CAAC;AAC9D,cAAc,qCAAqC,CAAC;AACpD,cAAc,iDAAiD,CAAC;AAChE,cAAc,iCAAiC,CAAC;AAChD,cAAc,iDAAiD,CAAC;AAChE,cAAc,uCAAuC,CAAC;AACtD,cAAc,iCAAiC,CAAC;AAChD,cAAc,mCAAmC,CAAC;AAClD,cAAc,uCAAuC,CAAC;AACtD,cAAc,qCAAqC,CAAC;AACpD,cAAc,uCAAuC,CAAC;AACtD,cAAc,qCAAqC,CAAC;AACpD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qCAAqC,CAAC;AACpD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,iCAAiC,CAAC;AAChD,cAAc,yCAAyC,CAAC;AACxD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,mCAAmC,CAAC;AAClD,cAAc,yCAAyC,CAAC;AACxD,cAAc,iCAAiC,CAAC"}

package/dist/components.js

@@ -25,9 +25,6 @@ export * from './components/HoverCard/HoverCard.js';
 export * from './components/Input/Input.js';
 export * from './components/Label/Label.js';
 export * from './components/LanguageToggle/LanguageToggle.js';
-export * from './components/LegacyModal/LegacyModal.js';
-export * from './components/LegacySlider/LegacySlider.js';
-export * from './components/LegacyStepper/LegacyStepper.js';
 export * from './components/LineGraph/LineGraph.js';
 export * from './components/ListboxDropdown/ListboxDropdown.js';
 export * from './components/MenuBar/MenuBar.js';

package/dist/hooks.d.ts

@@ -3,7 +3,6 @@ export * from './hooks/useEventCallback.js';
 export * from './hooks/useEventListener.js';
 export * from './hooks/useInterval.js';
 export * from './hooks/useIsomorphicLayoutEffect.js';
-export * from './hooks/useLegacyStepper.js';
 export * from './hooks/useMediaQuery.js';
 export * from './hooks/useNotificationsStore.js';
 export * from './hooks/useOnClickOutside.js';

package/dist/hooks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../src/hooks.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC;AACvC,cAAc,sCAAsC,CAAC;AACrD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,0BAA0B,CAAC;AACzC,cAAc,kCAAkC,CAAC;AACjD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC"}
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../src/hooks.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC;AACvC,cAAc,sCAAsC,CAAC;AACrD,cAAc,0BAA0B,CAAC;AACzC,cAAc,kCAAkC,CAAC;AACjD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC"}

package/dist/hooks.js

@@ -3,7 +3,6 @@ export * from './hooks/useEventCallback.js';
 export * from './hooks/useEventListener.js';
 export * from './hooks/useInterval.js';
 export * from './hooks/useIsomorphicLayoutEffect.js';
-export * from './hooks/useLegacyStepper.js';
 export * from './hooks/useMediaQuery.js';
 export * from './hooks/useNotificationsStore.js';
 export * from './hooks/useOnClickOutside.js';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@douglasneuroinformatics/libui",
   "type": "module",
-  "version": "2.3.1",
+  "version": "2.4.1",
   "packageManager": "pnpm@8.15.3",
   "description": "Generic UI components for DNP projects, built using React and TailwindCSS",
   "author": {

package/src/components/ActionDropdown/ActionDropdown.tsx

@@ -16,6 +16,10 @@ type ActionDropdownOptionKey<T> = T extends readonly string[]
 export type ActionDropdownProps<T extends ActionDropdownOptions> = {
   align?: DropdownMenuContentProps['align'];
 
+  contentClassName?: string;
+
+  disabled?: boolean;
+
   /** Callback function invoked when user clicks an option */
   onSelection: (option: ActionDropdownOptionKey<T>) => void;
 
@@ -24,23 +28,33 @@ export type ActionDropdownProps<T extends ActionDropdownOptions> = {
 
   /** The text content for the dropdown toggle */
   title: string;
+
+  triggerClassName?: string;
+
+  widthFull?: boolean;
 };
 
 // eslint-disable-next-line react/function-component-definition
 export function ActionDropdown<const T extends ActionDropdownOptions>({
   align = 'start',
+  contentClassName,
+  disabled,
   onSelection,
   options,
-  title
+  title,
+  triggerClassName,
+  widthFull
 }: ActionDropdownProps<T>) {
   const optionKeys: readonly string[] = options instanceof Array ? options : Object.keys(options);
   return (
     <DropdownMenu>
       <div className="w-full">
         <DropdownMenu.Trigger asChild>
-          <DropdownButton>{title}</DropdownButton>
+          <DropdownButton className={triggerClassName} disabled={disabled}>
+            {title}
+          </DropdownButton>
         </DropdownMenu.Trigger>
-        <DropdownMenu.Content align={align} style={{ width: 'var(--radix-popper-anchor-width)' }}>
+        <DropdownMenu.Content align={align} className={contentClassName} widthFull={widthFull}>
           <DropdownMenu.Group>
             {optionKeys.map((option) => (
               <DropdownMenu.Item

package/src/components/ClientTable/ClientTable.tsx

@@ -81,7 +81,7 @@ export const ClientTable = <T extends ClientTableEntry>({
 
   return (
     <div className={className}>
-      <div className="rounded-md border bg-card tracking-tight text-muted-foreground shadow">
+      <div className="rounded-md border bg-card tracking-tight text-muted-foreground shadow-sm">
         <Table>
           <Table.Header>
             <Table.Row>

package/src/components/Dialog/Dialog.tsx

@@ -1,5 +1,6 @@
 import { Root, Trigger } from '@radix-ui/react-dialog';
 
+import { DialogBody } from './DialogBody.js';
 import { DialogContent } from './DialogContent.js';
 import { DialogDescription } from './DialogDescription.js';
 import { DialogFooter } from './DialogFooter.js';
@@ -7,6 +8,7 @@ import { DialogHeader } from './DialogHeader.js';
 import { DialogTitle } from './DialogTitle.js';
 
 export const Dialog = Object.assign(Root.bind(null), {
+  Body: DialogBody,
   Content: DialogContent,
   Description: DialogDescription,
   Footer: DialogFooter,

package/src/components/Dialog/DialogBody.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { cn } from '../../utils.js';
+
+export const DialogBody = ({
+  children,
+  className,
+  ...props
+}: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => {
+  return (
+    <div className={cn('py-4', className)} {...props}>
+      {children}
+    </div>
+  );
+};

package/src/components/DropdownButton/DropdownButton.tsx

@@ -9,7 +9,7 @@ export const DropdownButton = React.forwardRef<HTMLButtonElement, React.ButtonHT
     return (
       <button
         className={cn(
-          'flex h-9 w-full items-center whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+          'flex h-9 w-full items-center gap-2 whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
           children ? 'justify-between' : 'justify-end',
           className
         )}

package/src/components/ListboxDropdown/ListboxDropdown.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import { cn } from '../../utils.js';
 import { type ButtonProps } from '../Button/Button.js';
 import { DropdownButton } from '../DropdownButton/DropdownButton.js';
 import { DropdownMenu } from '../DropdownMenu/DropdownMenu.js';
@@ -12,26 +13,33 @@ export type ListboxDropdownOption = {
 export type ListboxDropdownProps<T extends ListboxDropdownOption> = {
   checkPosition?: 'left' | 'right';
   className?: string;
+  contentClassName?: string;
+  disabled?: boolean;
   options: T[];
   selected: T[];
   setSelected: React.Dispatch<React.SetStateAction<T[]>>;
   title: string;
-  /** The button variant to use for the dropdown toggle */
+  triggerClassName?: string;
   variant?: ButtonProps['variant'];
+  widthFull?: boolean;
 };
 
 export const ListboxDropdown = <T extends ListboxDropdownOption>({
+  contentClassName,
+  disabled,
   options,
   selected,
   setSelected,
-  title
+  title,
+  triggerClassName,
+  widthFull
 }: ListboxDropdownProps<T>) => {
   return (
     <DropdownMenu>
-      <DropdownMenu.Trigger asChild className="w-full">
+      <DropdownMenu.Trigger asChild className={cn('w-full', triggerClassName)} disabled={disabled}>
         <DropdownButton>{title}</DropdownButton>
       </DropdownMenu.Trigger>
-      <DropdownMenu.Content widthFull align="start">
+      <DropdownMenu.Content align="start" className={contentClassName} widthFull={widthFull}>
         {options.map((option) => {
           const checked = Boolean(selected.find((selectedOption) => selectedOption.key === option.key));
           return (

package/src/components/SearchBar/SearchBar.tsx

@@ -13,6 +13,8 @@ export type BaseSearchBarProps = {
   onClick?: () => void;
   /** Custom placeholder to use instead of the default */
   placeholder?: string;
+  /** Whether the input element should be readonly */
+  readOnly?: boolean;
 };
 
 type ControlledSearchBarProps = {
@@ -29,7 +31,7 @@ type UncontrolledSearchBarProps = {
 
 export type SearchBarProps = ControlledSearchBarProps | UncontrolledSearchBarProps;
 
-export const SearchBar = ({ className, onClick, onValueChange, placeholder, value }: SearchBarProps) => {
+export const SearchBar = ({ className, onClick, onValueChange, placeholder, readOnly, value }: SearchBarProps) => {
   const { t } = useTranslation('libui');
   return (
     <form className={cn('relative', className)}>
@@ -37,6 +39,7 @@ export const SearchBar = ({ className, onClick, onValueChange, placeholder, valu
       <Input
         className="pl-8"
         placeholder={placeholder ?? t('searchBar.placeholder')}
+        readOnly={readOnly}
         type="search"
         value={value}
         onChange={(event) => {

package/src/components/Sheet/Sheet.tsx

@@ -1,5 +1,6 @@
 import { Close, Portal, Root, Trigger } from '@radix-ui/react-dialog';
 
+import { SheetBody } from './SheetBody.js';
 import { SheetContent } from './SheetContent.js';
 import { SheetDescription } from './SheetDescription.js';
 import { SheetFooter } from './SheetFooter.js';
@@ -8,6 +9,7 @@ import { SheetOverlay } from './SheetOverlay.js';
 import { SheetTitle } from './SheetTitle.js';
 
 export const Sheet = Object.assign(Root.bind(null), {
+  Body: SheetBody,
   Close,
   Content: SheetContent,
   Description: SheetDescription,

package/src/components/Sheet/SheetBody.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { cn } from '../../utils.js';
+
+export const SheetBody = ({
+  children,
+  className,
+  ...props
+}: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => {
+  return (
+    <div className={cn('py-4', className)} {...props}>
+      {children}
+    </div>
+  );
+};

package/src/components.ts

@@ -25,9 +25,6 @@ export * from './components/HoverCard/HoverCard.js';
 export * from './components/Input/Input.js';
 export * from './components/Label/Label.js';
 export * from './components/LanguageToggle/LanguageToggle.js';
-export * from './components/LegacyModal/LegacyModal.js';
-export * from './components/LegacySlider/LegacySlider.js';
-export * from './components/LegacyStepper/LegacyStepper.js';
 export * from './components/LineGraph/LineGraph.js';
 export * from './components/ListboxDropdown/ListboxDropdown.js';
 export * from './components/MenuBar/MenuBar.js';

package/src/hooks.ts

@@ -3,7 +3,6 @@ export * from './hooks/useEventCallback.js';
 export * from './hooks/useEventListener.js';
 export * from './hooks/useInterval.js';
 export * from './hooks/useIsomorphicLayoutEffect.js';
-export * from './hooks/useLegacyStepper.js';
 export * from './hooks/useMediaQuery.js';
 export * from './hooks/useNotificationsStore.js';
 export * from './hooks/useOnClickOutside.js';

package/dist/components/LegacyModal/LegacyModal.d.ts

@@ -1,13 +0,0 @@
-import React from 'react';
-/** @deprecated */
-export type LegacyModalProps = {
-    children: React.ReactNode;
-    onClose: () => void;
-    open: boolean;
-    showCloseButton?: boolean;
-    title: string;
-    width?: 'lg' | 'md' | 'sm' | 'xl';
-};
-/** @deprecated */
-export declare const LegacyModal: ({ children, onClose, open, showCloseButton, title, width }: LegacyModalProps) => React.JSX.Element;
-//# sourceMappingURL=LegacyModal.d.ts.map

package/dist/components/LegacyModal/LegacyModal.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"LegacyModal.d.ts","sourceRoot":"","sources":["../../../src/components/LegacyModal/LegacyModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,kBAAkB;AAClB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,IAAI,EAAE,OAAO,CAAC;IACd,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CACnC,CAAC;AAEF,kBAAkB;AAClB,eAAO,MAAM,WAAW,+DAAuE,gBAAgB,sBA2D9G,CAAC"}

package/dist/components/LegacyModal/LegacyModal.js

@@ -1,25 +0,0 @@
-import React from 'react';
-import { Dialog, Transition } from '@headlessui/react';
-import { XMarkIcon } from '@heroicons/react/24/solid';
-import { clsx } from 'clsx';
-/** @deprecated */
-export const LegacyModal = ({ children, onClose, open, showCloseButton, title, width = 'md' }) => {
-    return (React.createElement(Transition, { appear: true, as: React.Fragment, show: open },
-        React.createElement(Dialog, { as: "div", className: "relative z-10", onClose: onClose },
-            React.createElement(Transition.Child, { as: React.Fragment, enter: "ease-out duration-300", enterFrom: "opacity-0", enterTo: "opacity-100", leave: "ease-in duration-200", leaveFrom: "opacity-100", leaveTo: "opacity-0" },
-                React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50" })),
-            React.createElement("div", { className: "fixed inset-0 overflow-y-auto" },
-                React.createElement("div", { className: "flex min-h-full items-center justify-center p-4 text-center" },
-                    React.createElement(Transition.Child, { as: React.Fragment, enter: "ease-out duration-300", enterFrom: "opacity-0 scale-95", enterTo: "opacity-100 scale-100", leave: "ease-in duration-200", leaveFrom: "opacity-100 scale-100", leaveTo: "opacity-0 scale-95" },
-                        React.createElement(Dialog.Panel, { className: clsx('relative w-full transform overflow-visible rounded-2xl bg-slate-100 p-6 text-left align-middle text-slate-900 shadow-xl transition-all dark:bg-slate-800 dark:text-slate-100', {
-                                'max-w-lg': width === 'lg',
-                                'max-w-md': width === 'md',
-                                'max-w-sm': width === 'sm',
-                                'max-w-xl': width === 'xl'
-                            }) },
-                            React.createElement("div", { className: "flex items-center justify-between" },
-                                React.createElement(Dialog.Title, { as: "h3", className: "p-0.5 text-xl font-bold leading-6" }, title),
-                                showCloseButton && (React.createElement("button", { className: "flex items-center justify-center rounded-md p-0.5 hover:bg-slate-200 dark:hover:bg-slate-700", type: "button", onClick: onClose },
-                                    React.createElement(XMarkIcon, { height: 24, width: 24 })))),
-                            React.createElement("div", { className: "my-2 p-0.5" }, children))))))));
-};

package/dist/components/LegacySlider/LegacySlider.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-/** @deprecated */
-export type LegacySliderProps = {
-    children: React.ReactNode;
-    isOpen: boolean;
-    setIsOpen: (isOpen: boolean) => void;
-    title: React.ReactNode;
-};
-/** @deprecated */
-export declare const LegacySlider: ({ children, isOpen, setIsOpen, title }: LegacySliderProps) => React.JSX.Element;
-//# sourceMappingURL=LegacySlider.d.ts.map

package/dist/components/LegacySlider/LegacySlider.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"LegacySlider.d.ts","sourceRoot":"","sources":["../../../src/components/LegacySlider/LegacySlider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,kBAAkB;AAClB,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB,CAAC;AAEF,kBAAkB;AAClB,eAAO,MAAM,YAAY,2CAA4C,iBAAiB,sBAoDrF,CAAC"}

package/dist/components/LegacySlider/LegacySlider.js

@@ -1,24 +0,0 @@
-import React from 'react';
-import { Dialog, Transition } from '@headlessui/react';
-import { XMarkIcon } from '@heroicons/react/24/outline';
-/** @deprecated */
-export const LegacySlider = ({ children, isOpen, setIsOpen, title }) => {
-    return (React.createElement(Transition, { as: React.Fragment, show: isOpen },
-        React.createElement(Dialog, { as: "div", className: "fixed inset-0 z-10 overflow-hidden", onClose: setIsOpen },
-            React.createElement("div", { className: "absolute inset-0 overflow-hidden" },
-                React.createElement(Transition.Child, { as: React.Fragment, enter: "transition-opacity ease-linear duration-500", enterFrom: "opacity-0", enterTo: "opacity-100", leave: "transition-opacity ease-linear duration-500", leaveFrom: "opacity-100", leaveTo: "opacity-0" },
-                    React.createElement("div", { className: "fixed inset-0 bg-black/30" })),
-                React.createElement("div", { className: "pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10" },
-                    React.createElement(Transition.Child, { as: React.Fragment, enter: "transform transition ease-in-out duration-500", enterFrom: "translate-x-full", enterTo: "translate-x-0", leave: "transform transition ease-in-out duration-500", leaveFrom: "translate-x-0", leaveTo: "translate-x-full" },
-                        React.createElement("div", { className: "pointer-events-auto w-screen max-w-md" },
-                            React.createElement("div", { className: "flex h-full flex-col overflow-y-scroll bg-slate-50 py-6 shadow-xl dark:bg-slate-800" },
-                                React.createElement("div", { className: "px-4 sm:px-6" },
-                                    React.createElement("div", { className: "flex items-center justify-between" },
-                                        React.createElement(Dialog.Title, { className: "font-semibold text-slate-900 dark:text-slate-100" }, title),
-                                        React.createElement("button", { className: "text-muted-foreground hover:text-slate-500", type: "button", onClick: () => {
-                                                setIsOpen(false);
-                                            } },
-                                            React.createElement(XMarkIcon, { "aria-hidden": "true", className: "h-6 w-6" })))),
-                                React.createElement("hr", { className: "mx-4 my-4 border-slate-300" }),
-                                React.createElement("div", { className: "relative flex-1 px-4 sm:px-6" }, children)))))))));
-};

package/dist/components/LegacyStepper/LegacyStepper.d.ts

@@ -1,15 +0,0 @@
-import React from 'react';
-/** @deprecated */
-export type Step = {
-    element: React.ReactElement;
-    icon: React.ReactElement;
-    label: string;
-};
-/** @deprecated */
-export type LegacyStepperProps = {
-    className?: string;
-    steps: Step[];
-};
-/** @deprecated */
-export declare const LegacyStepper: ({ className, steps }: LegacyStepperProps) => React.JSX.Element;
-//# sourceMappingURL=LegacyStepper.d.ts.map

package/dist/components/LegacyStepper/LegacyStepper.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"LegacyStepper.d.ts","sourceRoot":"","sources":["../../../src/components/LegacyStepper/LegacyStepper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAQvE,kBAAkB;AAClB,MAAM,MAAM,IAAI,GAAG;IACjB,OAAO,EAAE,KAAK,CAAC,YAAY,CAAC;IAC5B,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,kBAAkB;AAClB,MAAM,MAAM,kBAAkB,GAAG;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,IAAI,EAAE,CAAC;CACf,CAAC;AAEF,kBAAkB;AAClB,eAAO,MAAM,aAAa,yBAA0B,kBAAkB,sBAoErE,CAAC"}

package/dist/components/LegacyStepper/LegacyStepper.js

@@ -1,46 +0,0 @@
-import React, { useEffect, useReducer, useRef, useState } from 'react';
-import clsx from 'clsx';
-import { LegacyStepperContext } from '../../context/LegacyStepperContext.js';
-import { useWindowSize } from '../../hooks/useWindowSize.js';
-import { cn } from '../../utils.js';
-/** @deprecated */
-export const LegacyStepper = ({ className, steps }) => {
-    const icons = useRef([]);
-    const [divideStyles, setDivideStyles] = useState([]);
-    const { height, width } = useWindowSize();
-    useEffect(() => {
-        const styles = [];
-        for (let i = 0; i < steps.length - 1; i++) {
-            const current = icons.current[i];
-            const next = icons.current[i + 1];
-            const left = current.offsetLeft + current.offsetWidth;
-            styles.push({
-                left,
-                width: next.offsetLeft - left
-            });
-        }
-        setDivideStyles(styles);
-    }, [height, width]);
-    const [index, updateIndex] = useReducer((prevIndex, action) => {
-        if (action === 'decrement' && prevIndex > 0) {
-            return prevIndex - 1;
-        }
-        else if (action === 'increment' && prevIndex < steps.length - 1) {
-            return prevIndex + 1;
-        }
-        return prevIndex;
-    }, 0);
-    return (React.createElement(LegacyStepperContext.Provider, { value: { index, updateIndex } },
-        React.createElement("div", { className: cn('flex flex-col', className) },
-            React.createElement("div", { className: "relative mb-12 flex items-center justify-between print:hidden" }, steps.map((step, i) => {
-                return (React.createElement(React.Fragment, { key: i },
-                    React.createElement("div", { className: "flex items-center" },
-                        React.createElement("div", { className: "flex flex-col items-center justify-center" },
-                            React.createElement("div", { className: clsx('h-12 w-12 rounded-full bg-sky-700 py-3  text-white transition duration-500 ease-in-out [&>*]:h-full [&>*]:w-full', i > index && 'bg-slate-200 dark:bg-slate-700'), ref: (e) => {
-                                    icons.current[i] = e;
-                                } }, step.icon),
-                            React.createElement("span", { className: "mt-2 text-xs font-medium uppercase text-muted-foreground" }, step.label))),
-                    i !== steps.length - 1 && (React.createElement("div", { className: clsx('absolute top-6 flex-auto border-t-2 transition duration-500 ease-in-out', i >= index ? 'border-slate-200 dark:border-slate-700' : 'border-sky-700'), style: divideStyles[i] }))));
-            })),
-            React.createElement("div", { className: "flex-grow" }, steps[index]?.element))));
-};

package/dist/context/LegacyStepperContext.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-/** @deprecated */
-export declare const LegacyStepperContext: React.Context<{
-    index: number;
-    updateIndex: React.Dispatch<'decrement' | 'increment'>;
-}>;
-//# sourceMappingURL=LegacyStepperContext.d.ts.map

package/dist/context/LegacyStepperContext.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"LegacyStepperContext.d.ts","sourceRoot":"","sources":["../../src/context/LegacyStepperContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAE7C,kBAAkB;AAClB,eAAO,MAAM,oBAAoB;WACxB,MAAM;iBACA,MAAM,QAAQ,CAAC,WAAW,GAAG,WAAW,CAAC;EAC/C,CAAC"}

package/dist/context/LegacyStepperContext.js

@@ -1,3 +0,0 @@
-import React, { createContext } from 'react';
-/** @deprecated */
-export const LegacyStepperContext = createContext(null);

package/dist/hooks/useLegacyStepper.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" resolution-mode="require"/>
-/** @deprecated */
-export declare function useLegacyStepper(): {
-    index: number;
-    updateIndex: import("react").Dispatch<"increment" | "decrement">;
-};
-//# sourceMappingURL=useLegacyStepper.d.ts.map

package/dist/hooks/useLegacyStepper.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useLegacyStepper.d.ts","sourceRoot":"","sources":["../../src/hooks/useLegacyStepper.ts"],"names":[],"mappings":";AAIA,kBAAkB;AAClB,wBAAgB,gBAAgB;;;EAE/B"}

package/dist/hooks/useLegacyStepper.js

@@ -1,6 +0,0 @@
-import { useContext } from 'react';
-import { LegacyStepperContext } from '../context/LegacyStepperContext.js';
-/** @deprecated */
-export function useLegacyStepper() {
-    return useContext(LegacyStepperContext);
-}

package/src/components/LegacyModal/LegacyModal.tsx

@@ -1,77 +0,0 @@
-import React from 'react';
-
-import { Dialog, Transition } from '@headlessui/react';
-import { XMarkIcon } from '@heroicons/react/24/solid';
-import { clsx } from 'clsx';
-
-/** @deprecated */
-export type LegacyModalProps = {
-  children: React.ReactNode;
-  onClose: () => void;
-  open: boolean;
-  showCloseButton?: boolean;
-  title: string;
-  width?: 'lg' | 'md' | 'sm' | 'xl';
-};
-
-/** @deprecated */
-export const LegacyModal = ({ children, onClose, open, showCloseButton, title, width = 'md' }: LegacyModalProps) => {
-  return (
-    <Transition appear as={React.Fragment} show={open}>
-      <Dialog as="div" className="relative z-10" onClose={onClose}>
-        <Transition.Child
-          as={React.Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-black bg-opacity-50" />
-        </Transition.Child>
-        <div className="fixed inset-0 overflow-y-auto">
-          <div className="flex min-h-full items-center justify-center p-4 text-center">
-            <Transition.Child
-              as={React.Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 scale-95"
-              enterTo="opacity-100 scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 scale-100"
-              leaveTo="opacity-0 scale-95"
-            >
-              <Dialog.Panel
-                className={clsx(
-                  'relative w-full transform overflow-visible rounded-2xl bg-slate-100 p-6 text-left align-middle text-slate-900 shadow-xl transition-all dark:bg-slate-800 dark:text-slate-100',
-                  {
-                    'max-w-lg': width === 'lg',
-                    'max-w-md': width === 'md',
-                    'max-w-sm': width === 'sm',
-                    'max-w-xl': width === 'xl'
-                  }
-                )}
-              >
-                <div className="flex items-center justify-between">
-                  <Dialog.Title as="h3" className="p-0.5 text-xl font-bold leading-6">
-                    {title}
-                  </Dialog.Title>
-                  {showCloseButton && (
-                    <button
-                      className="flex items-center justify-center rounded-md p-0.5 hover:bg-slate-200 dark:hover:bg-slate-700"
-                      type="button"
-                      onClick={onClose}
-                    >
-                      <XMarkIcon height={24} width={24} />
-                    </button>
-                  )}
-                </div>
-                <div className="my-2 p-0.5">{children}</div>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition>
-  );
-};

package/src/components/LegacySlider/LegacySlider.tsx

@@ -1,67 +0,0 @@
-import React from 'react';
-
-import { Dialog, Transition } from '@headlessui/react';
-import { XMarkIcon } from '@heroicons/react/24/outline';
-
-/** @deprecated */
-export type LegacySliderProps = {
-  children: React.ReactNode;
-  isOpen: boolean;
-  setIsOpen: (isOpen: boolean) => void;
-  title: React.ReactNode;
-};
-
-/** @deprecated */
-export const LegacySlider = ({ children, isOpen, setIsOpen, title }: LegacySliderProps) => {
-  return (
-    <Transition as={React.Fragment} show={isOpen}>
-      <Dialog as="div" className="fixed inset-0 z-10 overflow-hidden" onClose={setIsOpen}>
-        <div className="absolute inset-0 overflow-hidden">
-          <Transition.Child
-            as={React.Fragment}
-            enter="transition-opacity ease-linear duration-500"
-            enterFrom="opacity-0"
-            enterTo="opacity-100"
-            leave="transition-opacity ease-linear duration-500"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0"
-          >
-            <div className="fixed inset-0 bg-black/30" />
-          </Transition.Child>
-          <div className="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10">
-            <Transition.Child
-              as={React.Fragment}
-              enter="transform transition ease-in-out duration-500"
-              enterFrom="translate-x-full"
-              enterTo="translate-x-0"
-              leave="transform transition ease-in-out duration-500"
-              leaveFrom="translate-x-0"
-              leaveTo="translate-x-full"
-            >
-              <div className="pointer-events-auto w-screen max-w-md">
-                <div className="flex h-full flex-col overflow-y-scroll bg-slate-50 py-6 shadow-xl dark:bg-slate-800">
-                  <div className="px-4 sm:px-6">
-                    <div className="flex items-center justify-between">
-                      <Dialog.Title className="font-semibold text-slate-900 dark:text-slate-100">{title}</Dialog.Title>
-                      <button
-                        className="text-muted-foreground hover:text-slate-500"
-                        type="button"
-                        onClick={() => {
-                          setIsOpen(false);
-                        }}
-                      >
-                        <XMarkIcon aria-hidden="true" className="h-6 w-6" />
-                      </button>
-                    </div>
-                  </div>
-                  <hr className="mx-4 my-4 border-slate-300" />
-                  <div className="relative flex-1 px-4 sm:px-6">{children}</div>
-                </div>
-              </div>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition>
-  );
-};

package/src/components/LegacyStepper/LegacyStepper.tsx

@@ -1,91 +0,0 @@
-import React, { useEffect, useReducer, useRef, useState } from 'react';
-
-import clsx from 'clsx';
-
-import { LegacyStepperContext } from '../../context/LegacyStepperContext.js';
-import { useWindowSize } from '../../hooks/useWindowSize.js';
-import { cn } from '../../utils.js';
-
-/** @deprecated */
-export type Step = {
-  element: React.ReactElement;
-  icon: React.ReactElement;
-  label: string;
-};
-
-/** @deprecated */
-export type LegacyStepperProps = {
-  className?: string;
-  steps: Step[];
-};
-
-/** @deprecated */
-export const LegacyStepper = ({ className, steps }: LegacyStepperProps) => {
-  const icons = useRef<HTMLDivElement[]>([]);
-  const [divideStyles, setDivideStyles] = useState<React.CSSProperties[]>([]);
-  const { height, width } = useWindowSize();
-
-  useEffect(() => {
-    const styles: React.CSSProperties[] = [];
-    for (let i = 0; i < steps.length - 1; i++) {
-      const current = icons.current[i];
-      const next = icons.current[i + 1];
-      const left = current.offsetLeft + current.offsetWidth;
-      styles.push({
-        left,
-        width: next.offsetLeft - left
-      });
-    }
-    setDivideStyles(styles);
-  }, [height, width]);
-
-  const [index, updateIndex] = useReducer((prevIndex: number, action: 'decrement' | 'increment') => {
-    if (action === 'decrement' && prevIndex > 0) {
-      return prevIndex - 1;
-    } else if (action === 'increment' && prevIndex < steps.length - 1) {
-      return prevIndex + 1;
-    }
-    return prevIndex;
-  }, 0);
-
-  return (
-    <LegacyStepperContext.Provider value={{ index, updateIndex }}>
-      <div className={cn('flex flex-col', className)}>
-        <div className="relative mb-12 flex items-center justify-between print:hidden">
-          {steps.map((step, i) => {
-            return (
-              <React.Fragment key={i}>
-                <div className="flex items-center">
-                  <div className="flex flex-col items-center justify-center">
-                    <div
-                      className={clsx(
-                        'h-12 w-12 rounded-full bg-sky-700 py-3  text-white transition duration-500 ease-in-out [&>*]:h-full [&>*]:w-full',
-                        i > index && 'bg-slate-200 dark:bg-slate-700'
-                      )}
-                      ref={(e) => {
-                        icons.current[i] = e!;
-                      }}
-                    >
-                      {step.icon}
-                    </div>
-                    <span className="mt-2 text-xs font-medium uppercase text-muted-foreground">{step.label}</span>
-                  </div>
-                </div>
-                {i !== steps.length - 1 && (
-                  <div
-                    className={clsx(
-                      'absolute top-6 flex-auto border-t-2 transition duration-500 ease-in-out',
-                      i >= index ? 'border-slate-200 dark:border-slate-700' : 'border-sky-700'
-                    )}
-                    style={divideStyles[i]}
-                  />
-                )}
-              </React.Fragment>
-            );
-          })}
-        </div>
-        <div className="flex-grow">{steps[index]?.element}</div>
-      </div>
-    </LegacyStepperContext.Provider>
-  );
-};

package/src/context/LegacyStepperContext.tsx

@@ -1,7 +0,0 @@
-import React, { createContext } from 'react';
-
-/** @deprecated */
-export const LegacyStepperContext = createContext<{
-  index: number;
-  updateIndex: React.Dispatch<'decrement' | 'increment'>;
-}>(null!);

package/src/hooks/useLegacyStepper.ts

@@ -1,8 +0,0 @@
-import { useContext } from 'react';
-
-import { LegacyStepperContext } from '../context/LegacyStepperContext.js';
-
-/** @deprecated */
-export function useLegacyStepper() {
-  return useContext(LegacyStepperContext);
-}