@douglasneuroinformatics/libui 2.5.2 → 2.6.0

package/README.md

@@ -48,12 +48,18 @@ pnpm install @douglasneuroinformatics/libui
 const baseConfig = require('@douglasneuroinformatics/libui/tailwind.config.cjs');
 
 /** @type {import('tailwindcss').Config} */
-module.exports {
+module.exports = {
   content: [...baseConfig.content, './src/**/*.{js,ts,jsx,tsx}'],
   presets: [baseConfig]
 };
 ```
 
+**main.tsx**
+
+```js
+import '@douglasneuroinformatics/libui/styles/globals.css';
+```
+
 ## Contributing
 
 We welcome contributions! If you're interested in improving the library or adding new features, please refer to our contribution guide.

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

@@ -1 +1 @@
-{"version":3,"file":"ClientTable.d.ts","sourceRoot":"","sources":["../../../src/components/ClientTable/ClientTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AA0BxC,MAAM,MAAM,gBAAgB,GAAG;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CAAE,CAAC;AAE1D,MAAM,MAAM,kBAAkB,CAAC,CAAC,SAAS,gBAAgB,GAAG,gBAAgB,IAAI,CAAC,KAAK,EAAE,CAAC,KAAK,MAAM,CAAC;AAErG,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,gBAAgB,IAAI;IAC1D,6CAA6C;IAC7C,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC;IAEvC,oDAAoD;IAEpD,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,MAAM,CAAC;IAEnC,8CAA8C;IAC9C,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,0BAA0B,CAAC,CAAC,SAAS,gBAAgB,IAAI;IACnE,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC;IACvE,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;CACrD,EAAE,CAAC;AAEJ,MAAM,MAAM,sBAAsB,CAAC,CAAC,SAAS,gBAAgB,IAAI;IAC/D,MAAM,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC;IAC7B,eAAe,CAAC,EAAE,0BAA0B,CAAC,CAAC,CAAC,CAAC;CACjD,CAAC;AAEF,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,gBAAgB,IAAI;IACzD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB,CAAC,EAAE,0BAA0B,CAAC,CAAC,CAAC,CAAC;IACtD,OAAO,EAAE,iBAAiB,CAAC,CAAC,CAAC,EAAE,CAAC;IAChC,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF,eAAO,MAAM,WAAW,mIASrB,iBAAiB,CAAC,CAAC,sBAoGrB,CAAC"}
+{"version":3,"file":"ClientTable.d.ts","sourceRoot":"","sources":["../../../src/components/ClientTable/ClientTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AA0BxC,MAAM,MAAM,gBAAgB,GAAG;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CAAE,CAAC;AAE1D,MAAM,MAAM,kBAAkB,CAAC,CAAC,SAAS,gBAAgB,GAAG,gBAAgB,IAAI,CAAC,KAAK,EAAE,CAAC,KAAK,MAAM,CAAC;AAErG,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,gBAAgB,IAAI;IAC1D,6CAA6C;IAC7C,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC;IAEvC,oDAAoD;IACpD,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,MAAM,CAAC;IAEnC,8CAA8C;IAC9C,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,0BAA0B,CAAC,CAAC,SAAS,gBAAgB,IAAI;IACnE,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC;IACvE,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;CACrD,EAAE,CAAC;AAEJ,MAAM,MAAM,sBAAsB,CAAC,CAAC,SAAS,gBAAgB,IAAI;IAC/D,MAAM,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC;IAC7B,eAAe,CAAC,EAAE,0BAA0B,CAAC,CAAC,CAAC,CAAC;CACjD,CAAC;AAEF,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,gBAAgB,IAAI;IACzD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB,CAAC,EAAE,0BAA0B,CAAC,CAAC,CAAC,CAAC;IACtD,OAAO,EAAE,iBAAiB,CAAC,CAAC,CAAC,EAAE,CAAC;IAChC,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF,eAAO,MAAM,WAAW,mIASrB,iBAAiB,CAAC,CAAC,sBAmGrB,CAAC"}

package/dist/components/ClientTable/ClientTable.js

@@ -48,9 +48,8 @@ export const ClientTable = ({ className, columnDropdownOptions, columns, data, e
                             }))))) : (column.label)))))),
                 React.createElement(Table.Body, null, range(nRows).map((i) => {
                     const entry = currentEntries[i];
-                    return (React.createElement(Table.Row, { className: cn(typeof onEntryClick === 'function' && 'cursor-pointer hover:backdrop-brightness-95'), key: i, onClick: () => {
-                            onEntryClick?.(entry);
-                        } }, columns.map(({ field, formatter }, j) => {
+                    const onClick = onEntryClick && entry ? () => onEntryClick(entry) : undefined;
+                    return (React.createElement(Table.Row, { className: cn(onClick && 'cursor-pointer hover:backdrop-brightness-95'), key: i, onClick: onClick }, columns.map(({ field, formatter }, j) => {
                         let value;
                         if (!entry) {
                             value = 'NA';
@@ -62,7 +61,8 @@ export const ClientTable = ({ className, columnDropdownOptions, columns, data, e
                             value = entry[field];
                         }
                         const formattedValue = entry && formatter ? formatter(value) : defaultFormatter(value);
-                        return (React.createElement(Table.Cell, { className: cn('text-ellipsis leading-none', !entry && 'invisible', noWrap && 'max-w-3xl overflow-hidden text-ellipsis whitespace-nowrap'), key: j }, formattedValue));
+                        return (React.createElement(Table.Cell, { className: cn('text-ellipsis leading-none', !entry && 'opacity-0', // safari does not include borders if invisible
+                            noWrap && 'max-w-3xl overflow-hidden text-ellipsis whitespace-nowrap'), key: j }, formattedValue));
                     })));
                 })))),
         React.createElement(ClientTablePagination, { currentPage: currentPage, firstEntry: firstEntry, lastEntry: lastEntry, pageCount: pageCount, setCurrentPage: setCurrentPage, totalEntries: data.length })));

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

@@ -1,14 +1,14 @@
 import React from 'react';
 import { Drawer as DrawerPrimitive } from 'vaul';
 export declare const Drawer: (({ shouldScaleBackground, ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>) => React.JSX.Element) & {
-    Close: React.ForwardRefExoticComponent<import("@radix-ui/react-dialog", { with: { "resolution-mode": "require" } }).DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
-    Content: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-dialog", { with: { "resolution-mode": "require" } }).DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    Close: React.ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+    Content: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-dialog").DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
         onAnimationEnd?: ((open: boolean) => void) | undefined;
     } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-    Description: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog", { with: { "resolution-mode": "require" } }).DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+    Description: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog").DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
     Footer: ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
     Header: ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
-    Title: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog", { with: { "resolution-mode": "require" } }).DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
-    Trigger: React.ForwardRefExoticComponent<import("@radix-ui/react-dialog", { with: { "resolution-mode": "require" } }).DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+    Title: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog").DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+    Trigger: React.ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 };
 //# sourceMappingURL=Drawer.d.ts.map

package/dist/components/Drawer/DrawerContent.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export declare const DrawerContent: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-dialog", { with: { "resolution-mode": "require" } }).DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+export declare const DrawerContent: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-dialog").DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
     onAnimationEnd?: ((open: boolean) => void) | undefined;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=DrawerContent.d.ts.map

package/dist/components/Drawer/DrawerDescription.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-export declare const DrawerDescription: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog", { with: { "resolution-mode": "require" } }).DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+export declare const DrawerDescription: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog").DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
 //# sourceMappingURL=DrawerDescription.d.ts.map

package/dist/components/Drawer/DrawerDescription.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DrawerDescription.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/DrawerDescription.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,eAAO,MAAM,iBAAiB,2OAO5B,CAAC"}
+{"version":3,"file":"DrawerDescription.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/DrawerDescription.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,eAAO,MAAM,iBAAiB,+LAO5B,CAAC"}

package/dist/components/Drawer/DrawerTitle.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-export declare const DrawerTitle: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog", { with: { "resolution-mode": "require" } }).DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+export declare const DrawerTitle: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog").DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
 //# sourceMappingURL=DrawerTitle.d.ts.map

package/dist/components/Drawer/DrawerTitle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DrawerTitle.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/DrawerTitle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,eAAO,MAAM,WAAW,iOAWtB,CAAC"}
+{"version":3,"file":"DrawerTitle.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/DrawerTitle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,eAAO,MAAM,WAAW,qLAWtB,CAAC"}

package/dist/components/Form/NumberField/NumberFieldRadio.d.ts

@@ -5,5 +5,5 @@ import type { BaseFieldComponentProps } from '../types.js';
 export type NumberFieldRadioProps = Simplify<BaseFieldComponentProps<number> & Extract<NumberFormField, {
     options: object;
 }>>;
-export declare const NumberFieldRadio: ({ description, error, label, name, options, readOnly, setValue, value }: NumberFieldRadioProps) => React.JSX.Element;
+export declare const NumberFieldRadio: ({ description, disableAutoPrefix, error, label, name, options, readOnly, setValue, value }: NumberFieldRadioProps) => React.JSX.Element;
 //# sourceMappingURL=NumberFieldRadio.d.ts.map

package/dist/components/Form/NumberField/NumberFieldRadio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NumberFieldRadio.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/NumberField/NumberFieldRadio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2CAA2C,CAAC;AACjF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAO1C,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAE3D,MAAM,MAAM,qBAAqB,GAAG,QAAQ,CAC1C,uBAAuB,CAAC,MAAM,CAAC,GAAG,OAAO,CAAC,eAAe,EAAE;IAAE,OAAO,EAAE,MAAM,CAAA;CAAE,CAAC,CAChF,CAAC;AAEF,eAAO,MAAM,gBAAgB,4EAS1B,qBAAqB,sBAiCvB,CAAC"}
+{"version":3,"file":"NumberFieldRadio.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/NumberField/NumberFieldRadio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2CAA2C,CAAC;AACjF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAO1C,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAE3D,MAAM,MAAM,qBAAqB,GAAG,QAAQ,CAC1C,uBAAuB,CAAC,MAAM,CAAC,GAAG,OAAO,CAAC,eAAe,EAAE;IAAE,OAAO,EAAE,MAAM,CAAA;CAAE,CAAC,CAChF,CAAC;AAEF,eAAO,MAAM,gBAAgB,+FAU1B,qBAAqB,sBAwCvB,CAAC"}

package/dist/components/Form/NumberField/NumberFieldRadio.js

@@ -3,7 +3,7 @@ import { cn } from '../../../utils.js';
 import { Label } from '../../Label/Label.js';
 import { RadioGroup } from '../../RadioGroup/RadioGroup.js';
 import { FieldGroup } from '../FieldGroup/FieldGroup.js';
-export const NumberFieldRadio = ({ description, error, label, name, options, readOnly, setValue, value }) => {
+export const NumberFieldRadio = ({ description, disableAutoPrefix, error, label, name, options, readOnly, setValue, value }) => {
     const optionsCount = Object.keys(options).length;
     return (React.createElement(FieldGroup, null,
         React.createElement(FieldGroup.Row, null,
@@ -12,8 +12,11 @@ export const NumberFieldRadio = ({ description, error, label, name, options, rea
         React.createElement(RadioGroup, { className: cn('flex', optionsCount > 5 ? 'flex-col' : 'flex-col @3xl:flex-row @3xl:items-center @3xl:justify-between'), name: name, value: value?.toString() ?? '', onValueChange: (value) => setValue(parseInt(value)) }, Object.keys(options)
             .map((val) => parseInt(val))
             .toSorted((a, b) => a - b)
-            .map((val) => (React.createElement("div", { className: "flex items-center gap-2", key: val },
-            React.createElement(RadioGroup.Item, { disabled: readOnly, id: `${name}-${val}`, value: val.toString() }),
-            React.createElement(Label, { "aria-disabled": readOnly, className: "font-normal text-muted-foreground", htmlFor: `${name}-${val}` }, `${val} - ${options[val]}`))))),
+            .map((val) => {
+            const text = (disableAutoPrefix ? '' : `${val} - `) + options[val];
+            return (React.createElement("div", { className: "flex items-center gap-2", key: val },
+                React.createElement(RadioGroup.Item, { disabled: readOnly, id: `${name}-${val}`, value: val.toString() }),
+                React.createElement(Label, { "aria-disabled": readOnly, className: "font-normal text-muted-foreground", htmlFor: `${name}-${val}` }, text)));
+        })),
         React.createElement(FieldGroup.Error, { error: error })));
 };

package/dist/components/Form/NumberField/NumberFieldSelect.d.ts

@@ -5,5 +5,5 @@ import { type BaseFieldComponentProps } from '../types.js';
 export type NumberFieldSelectProps<T extends number = number> = Simplify<BaseFieldComponentProps<T> & Extract<NumberFormField<T>, {
     options: object;
 }>>;
-export declare const NumberFieldSelect: <T extends number = number>({ description, error, label, name, options, readOnly, setValue, value }: NumberFieldSelectProps<T>) => React.JSX.Element;
+export declare const NumberFieldSelect: <T extends number = number>({ description, disableAutoPrefix, error, label, name, options, readOnly, setValue, value }: NumberFieldSelectProps<T>) => React.JSX.Element;
 //# sourceMappingURL=NumberFieldSelect.d.ts.map

package/dist/components/Form/NumberField/NumberFieldSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NumberFieldSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/NumberField/NumberFieldSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2CAA2C,CAAC;AACjF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAK1C,OAAO,EAAE,KAAK,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAE3D,MAAM,MAAM,sBAAsB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,QAAQ,CACtE,uBAAuB,CAAC,CAAC,CAAC,GAAG,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE;IAAE,OAAO,EAAE,MAAM,CAAA;CAAE,CAAC,CAC9E,CAAC;AAEF,eAAO,MAAM,iBAAiB,uGAS3B,uBAAuB,CAAC,CAAC,sBAuB3B,CAAC"}
+{"version":3,"file":"NumberFieldSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/NumberField/NumberFieldSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2CAA2C,CAAC;AACjF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAK1C,OAAO,EAAE,KAAK,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAE3D,MAAM,MAAM,sBAAsB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,QAAQ,CACtE,uBAAuB,CAAC,CAAC,CAAC,GAAG,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE;IAAE,OAAO,EAAE,MAAM,CAAA;CAAE,CAAC,CAC9E,CAAC;AAEF,eAAO,MAAM,iBAAiB,0HAU3B,uBAAuB,CAAC,CAAC,sBA0B3B,CAAC"}

package/dist/components/Form/NumberField/NumberFieldSelect.js

@@ -3,7 +3,7 @@ import { Label } from '../../Label/Label.js';
 import { Select } from '../../Select/Select.js';
 import { FieldGroup } from '../FieldGroup/FieldGroup.js';
 import {} from '../types.js';
-export const NumberFieldSelect = ({ description, error, label, name, options, readOnly, setValue, value }) => {
+export const NumberFieldSelect = ({ description, disableAutoPrefix, error, label, name, options, readOnly, setValue, value }) => {
     return (React.createElement(FieldGroup, null,
         React.createElement(FieldGroup.Row, null,
             React.createElement(Label, null, label),
@@ -11,6 +11,10 @@ export const NumberFieldSelect = ({ description, error, label, name, options, re
         React.createElement(Select, { name: name, value: value?.toString() ?? '', onValueChange: (value) => setValue(parseFloat(value)) },
             React.createElement(Select.Trigger, { "data-cy": `${name}-select-trigger`, "data-testid": `${name}-select-trigger`, disabled: readOnly },
                 React.createElement(Select.Value, null)),
-            React.createElement(Select.Content, { "data-cy": `${name}-select-content`, "data-testid": `${name}-select-content` }, Object.keys(options).map((option) => (React.createElement(Select.Item, { key: option, value: option }, `${option} - ${options[option]}`))))),
+            React.createElement(Select.Content, { "data-cy": `${name}-select-content`, "data-testid": `${name}-select-content` }, Object.keys(options).map((option) => {
+                // Option needs to be type number (this was a design flaw), but is actually always coerced to string anyways
+                const text = (disableAutoPrefix ? '' : `${option} - `) + options[option];
+                return (React.createElement(Select.Item, { key: option, value: option }, text));
+            }))),
         React.createElement(FieldGroup.Error, { error: error })));
 };

package/dist/i18n.js

@@ -6,7 +6,7 @@ import { initReactI18next } from 'react-i18next';
 import libui from './translations/libui.json';
 export const supportedLngs = ['en', 'fr'];
 export function transformTranslations(translations, locale) {
-    if (!isPlainObject) {
+    if (!isPlainObject(translations)) {
         throw new Error('Invalid format of translations: must be plain object');
     }
     const result = {};

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@douglasneuroinformatics/libui",
   "type": "module",
-  "version": "2.5.2",
-  "packageManager": "pnpm@8.15.3",
+  "version": "2.6.0",
+  "packageManager": "pnpm@9.3.0",
   "description": "Generic UI components for DNP projects, built using React and TailwindCSS",
   "author": {
     "name": "Douglas Neuroinformatics",
@@ -50,15 +50,25 @@
     "/tailwind.config.cjs",
     "/tailwind.config.d.cts"
   ],
+  "scripts": {
+    "build": "rm -rf dist && tsc -b tsconfig.build.json && cp -r src/styles dist",
+    "format": "prettier --write src",
+    "format:translations": "find src/translations -name '*.json' -exec pnpm exec sort-json {} \\;",
+    "lint": "tsc && eslint --fix src",
+    "prepare": "husky",
+    "storybook": "storybook dev --no-open -p 6006",
+    "storybook:build": "storybook build",
+    "test": "vitest",
+    "test:coverage": "vitest --coverage"
+  },
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "dependencies": {
     "@douglasneuroinformatics/libjs": "^0.3.1",
-    "@douglasneuroinformatics/libui-form-types": "^0.7.0",
-    "@headlessui/react": "^1.7.18",
-    "@headlessui/tailwindcss": "^0.2.0",
+    "@douglasneuroinformatics/libui-form-types": "^0.8.0",
+    "@headlessui/tailwindcss": "^0.2.1",
     "@heroicons/react": "^2.1.3",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-alert-dialog": "^1.0.5",
@@ -84,77 +94,68 @@
     "@radix-ui/react-tooltip": "^1.0.7",
     "@tailwindcss/container-queries": "^0.1.1",
     "class-variance-authority": "^0.7.0",
-    "clsx": "^2.1.0",
+    "clsx": "^2.1.1",
     "cmdk": "^1.0.0",
-    "framer-motion": "^11.0.24",
+    "framer-motion": "^11.2.10",
     "i18next": "23.x",
-    "i18next-browser-languagedetector": "^7.2.1",
+    "i18next-browser-languagedetector": "^8.0.0",
     "lodash-es": "^4.17.21",
-    "lucide-react": "^0.364.0",
+    "lucide-react": "^0.390.0",
     "react-error-boundary": "^4.0.13",
-    "react-i18next": "^14.1.0",
-    "react-resizable-panels": "^2.0.16",
-    "recharts": "^2.12.3",
-    "tailwind-merge": "^2.2.2",
+    "react-i18next": "^14.1.2",
+    "react-resizable-panels": "^2.0.19",
+    "recharts": "^2.12.7",
+    "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",
-    "ts-pattern": "^5.1.0",
-    "type-fest": "^4.15.0",
-    "vaul": "^0.9.0",
-    "zod": "^3.22.4",
+    "ts-pattern": "^5.1.2",
+    "type-fest": "^4.20.0",
+    "vaul": "^0.9.1",
+    "zod": "^3.23.8",
     "zustand": "^4.5.2"
   },
   "devDependencies": {
-    "@commitlint/cli": "^19.2.1",
-    "@commitlint/config-conventional": "^19.1.0",
+    "@commitlint/cli": "^19.3.0",
+    "@commitlint/config-conventional": "^19.2.2",
     "@commitlint/types": "^19.0.3",
-    "@douglasneuroinformatics/eslint-config": "^4.2.1",
+    "@douglasneuroinformatics/eslint-config": "^4.2.2",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@semantic-release/npm": "^12.0.0",
-    "@storybook/addon-essentials": "^8.0.5",
-    "@storybook/addon-interactions": "^8.0.5",
-    "@storybook/addon-links": "^8.0.5",
-    "@storybook/blocks": "^8.0.5",
-    "@storybook/components": "^8.0.5",
+    "@semantic-release/npm": "^12.0.1",
+    "@storybook/addon-essentials": "^8.1.6",
+    "@storybook/addon-interactions": "^8.1.6",
+    "@storybook/addon-links": "^8.1.6",
+    "@storybook/blocks": "^8.1.6",
+    "@storybook/components": "^8.1.6",
     "@storybook/icons": "^1.2.9",
-    "@storybook/manager-api": "^8.0.5",
-    "@storybook/react": "^8.0.5",
-    "@storybook/react-vite": "^8.0.5",
-    "@storybook/theming": "^8.0.5",
-    "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "14.2.2",
+    "@storybook/manager-api": "^8.1.6",
+    "@storybook/react": "^8.1.6",
+    "@storybook/react-vite": "^8.1.6",
+    "@storybook/theming": "^8.1.6",
+    "@testing-library/dom": "^10.1.0",
+    "@testing-library/jest-dom": "^6.4.5",
+    "@testing-library/react": "16.0.0",
     "@testing-library/user-event": "^14.5.2",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^20.12.3",
-    "@types/react": "^18.2.74",
-    "@types/react-dom": "^18.2.23",
-    "@vitejs/plugin-react-swc": "^3.6.0",
-    "@vitest/coverage-v8": "^1.4.0",
+    "@types/node": "^20.14.2",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react-swc": "^3.7.0",
+    "@vitest/coverage-v8": "^1.6.0",
     "autoprefixer": "^10.4.19",
     "eslint": "^8.57.0",
-    "happy-dom": "^14.3.10",
+    "happy-dom": "^14.12.0",
     "husky": "^9.0.11",
-    "jsdom": "24.0.0",
+    "jsdom": "24.1.0",
     "postcss": "^8.4.38",
-    "prettier": "^3.2.5",
-    "prettier-plugin-tailwindcss": "^0.5.13",
-    "semantic-release": "^23.0.7",
+    "prettier": "^3.3.1",
+    "prettier-plugin-tailwindcss": "^0.6.2",
+    "semantic-release": "^23.0.8",
     "sort-json": "^2.0.1",
-    "storybook": "^8.0.5",
-    "storybook-react-i18next": "^3.0.1",
-    "tailwindcss": "^3.4.3",
-    "typescript": "~5.4.3",
-    "vite": "5.2.8",
-    "vitest": "^1.4.0"
-  },
-  "scripts": {
-    "build": "rm -rf dist && tsc -b tsconfig.build.json && cp -r src/styles dist",
-    "format": "prettier --write src",
-    "format:translations": "find src/translations -name '*.json' -exec pnpm exec sort-json {} \\;",
-    "lint": "tsc && eslint --fix src",
-    "storybook": "storybook dev --no-open -p 6006",
-    "storybook:build": "storybook build",
-    "test": "vitest",
-    "test:coverage": "vitest --coverage"
+    "storybook": "^8.1.6",
+    "storybook-react-i18next": "^3.1.1",
+    "tailwindcss": "^3.4.4",
+    "typescript": "~5.4.5",
+    "vite": "5.2.13",
+    "vitest": "^1.6.0"
   }
-}
+}

package/src/components/Accordion/Accordion.spec.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { Accordion } from './Accordion.js';
+
+const TEST_ID = 'accordion';
+
+const TestAccordion = () => (
+  <Accordion collapsible type="single">
+    <Accordion.Item value="item-1">
+      <Accordion.Trigger>T1</Accordion.Trigger>
+      <Accordion.Content>C1</Accordion.Content>
+    </Accordion.Item>
+  </Accordion>
+);
+
+describe('Accordion', () => {
+  it('should render', () => {
+    render(<TestAccordion />);
+    expect(screen.getByTestId(TEST_ID)).toBeDefined();
+  });
+  it('should open and close an item', () => {
+    render(<TestAccordion />);
+
+    const toggle = screen.getByText('T1');
+    expect(toggle).toBeInTheDocument();
+    expect(() => screen.getByText('C1')).toThrow();
+
+    fireEvent.click(toggle);
+    expect(screen.getByText('C1')).toBeInTheDocument();
+
+    fireEvent.click(toggle);
+    expect(() => screen.getByText('C1')).toThrow();
+  });
+});

package/src/components/Accordion/Accordion.stories.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Accordion } from './Accordion.js';
+
+type Story = StoryObj<typeof Accordion>;
+
+export default { component: Accordion, tags: ['autodocs'] } as Meta<typeof Accordion>;
+
+export const Default: Story = {
+  args: {
+    children: (
+      <>
+        <Accordion.Item value="item-1">
+          <Accordion.Trigger>Is it accessible?</Accordion.Trigger>
+          <Accordion.Content>Yes. It adheres to the WAI-ARIA design pattern.</Accordion.Content>
+        </Accordion.Item>
+        <Accordion.Item value="item-2">
+          <Accordion.Trigger>Is it styled?</Accordion.Trigger>
+          <Accordion.Content>
+            Yes. It comes with default styles that matches the other components&apos; aesthetic.
+          </Accordion.Content>
+        </Accordion.Item>
+        <Accordion.Item value="item-3">
+          <Accordion.Trigger>Is it animated?</Accordion.Trigger>
+          <Accordion.Content>Yes. It is animated by default, but you can disable it if you prefer.</Accordion.Content>
+        </Accordion.Item>
+      </>
+    ),
+    collapsible: true,
+    id: 'accordion',
+    type: 'single'
+  }
+};

package/src/components/ActionDropdown/ActionDropdown.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { ActionDropdown } from './ActionDropdown.js';
+
+type Story = StoryObj<typeof ActionDropdown>;
+
+export default { component: ActionDropdown } satisfies Meta<typeof ActionDropdown>;
+
+export const Default: Story = {
+  args: {
+    onSelection(option) {
+      alert(option);
+    },
+    options: ['Option 1', 'Option 2'],
+    title: 'Action Dropdown'
+  }
+};

package/src/components/AlertDialog/AlertDialog.stories.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from '../Button/Button.js';
+import { AlertDialog } from './AlertDialog.js';
+
+type Story = StoryObj<typeof AlertDialog>;
+
+export default { component: AlertDialog } as Meta<typeof AlertDialog>;
+
+export const Default: Story = {
+  args: {
+    children: (
+      <React.Fragment>
+        <AlertDialog.Trigger asChild>
+          <Button variant="outline">Show Dialog</Button>
+        </AlertDialog.Trigger>
+        <AlertDialog.Content>
+          <AlertDialog.Header>
+            <AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>
+            <AlertDialog.Description>
+              This action cannot be undone. This will permanently delete your account and remove your data from our
+              servers.
+            </AlertDialog.Description>
+          </AlertDialog.Header>
+          <AlertDialog.Footer>
+            <AlertDialog.Action>Continue</AlertDialog.Action>
+            <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
+          </AlertDialog.Footer>
+        </AlertDialog.Content>
+      </React.Fragment>
+    )
+  }
+};

package/src/components/ArrowToggle/ArrowToggle.spec.tsx

@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+import { ArrowToggle, type ArrowToggleProps } from './ArrowToggle.js';
+
+const TestArrowToggle = ({ onClick, ...props }: Omit<ArrowToggleProps, 'isToggled'>) => {
+  const [isToggled, setIsToggled] = useState(false);
+  return (
+    <ArrowToggle
+      isToggled={isToggled}
+      onClick={(event) => {
+        setIsToggled(!isToggled);
+        onClick?.(event);
+      }}
+      {...props}
+    />
+  );
+};
+
+describe('ArrowToggle', () => {
+  it('renders with default props', () => {
+    render(<TestArrowToggle position="up" rotation={90} />);
+    const button = screen.getByRole('button');
+    expect(button).toBeInTheDocument();
+  });
+
+  it('renders with a custom class', () => {
+    render(<TestArrowToggle className="custom-class" position="down" rotation={90} />);
+    expect(screen.getByRole('button')).toHaveClass('custom-class');
+  });
+
+  it('toggles rotation on click', () => {
+    render(<TestArrowToggle position="right" rotation={90} />);
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+    expect(screen.getByTestId('arrow-up-icon')).toHaveStyle('transform: rotate(180deg)');
+    fireEvent.click(button);
+    expect(screen.getByTestId('arrow-up-icon')).toHaveStyle('transform: rotate(90deg)');
+  });
+
+  it('handles custom onClick', () => {
+    const handleClick = vi.fn();
+    render(<TestArrowToggle position="up" rotation={90} onClick={handleClick} />);
+    fireEvent.click(screen.getByRole('button'));
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+});

package/src/components/ArrowToggle/ArrowToggle.stories.tsx

@@ -0,0 +1,27 @@
+import React, { useState } from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { ArrowToggle } from './ArrowToggle.js';
+
+type Story = StoryObj<typeof ArrowToggle>;
+
+export default { component: ArrowToggle, tags: ['autodocs'] } as Meta<typeof ArrowToggle>;
+
+export const UpToDown: Story = {
+  decorators: [
+    (Story) => {
+      const [isToggled, setIsToggled] = useState(false);
+      return <Story args={{ isToggled, onClick: () => setIsToggled(!isToggled), position: 'up', rotation: 180 }} />;
+    }
+  ]
+};
+
+export const LeftToDown: Story = {
+  decorators: [
+    (Story) => {
+      const [isToggled, setIsToggled] = useState(false);
+      return <Story args={{ isToggled, onClick: () => setIsToggled(!isToggled), position: 'left', rotation: -90 }} />;
+    }
+  ]
+};

package/src/components/Avatar/Avatar.spec.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { Avatar } from './Avatar.js';
+
+const TEST_ID = 'avatar';
+
+const TestAvatar = (props: { [key: string]: any }) => (
+  <Avatar {...props}>
+    <Avatar.Image alt="@shadcn" src="https://github.com/shadcn.png" />
+    <Avatar.Fallback>CN</Avatar.Fallback>
+  </Avatar>
+);
+
+describe('Avatar', () => {
+  it('should render', () => {
+    render(<TestAvatar />);
+    expect(screen.getByTestId(TEST_ID)).toBeInTheDocument();
+  });
+  it('should contain a custom class name', () => {
+    render(<Avatar className="foo" />);
+    expect(screen.getByTestId(TEST_ID)).toHaveClass('foo');
+  });
+});

package/src/components/Avatar/Avatar.stories.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Avatar } from './Avatar.js';
+
+type Story = StoryObj<typeof Avatar>;
+
+export default { component: Avatar, tags: ['autodocs'] } as Meta<typeof Avatar>;
+
+export const Default: Story = {
+  args: {
+    children: (
+      <>
+        <Avatar.Image alt="@shadcn" src="https://github.com/shadcn.png" />
+        <Avatar.Fallback>CN</Avatar.Fallback>
+      </>
+    )
+  }
+};