@douglasneuroinformatics/libui 2.2.0 → 2.2.1

package/dist/components/Form/BaseRadioField.js

@@ -22,6 +22,6 @@ export const BaseRadioField = ({ description, error, label, name, options, orien
             React.createElement(FieldGroup.Description, { description: description })),
         React.createElement(RadioGroup, { className: baseRadioFieldVariants({ orientation: optionsCount > 5 ? 'vertical' : orientation }), name: name, value: value ?? '', onValueChange: (value) => setValue(value) }, Object.keys(options).map((option) => (React.createElement("div", { className: "flex items-center gap-2", key: option },
             React.createElement(RadioGroup.Item, { id: `${name}-${option}`, value: option }),
-            React.createElement(Label, { className: "font-normal", htmlFor: `${name}-${option}` }, options[option]))))),
+            React.createElement(Label, { className: "font-normal text-muted-foreground", htmlFor: `${name}-${option}` }, options[option]))))),
         React.createElement(FieldGroup.Error, { error: error })));
 };

package/dist/components/Form/BooleanField/BooleanFieldRadio.js

@@ -23,9 +23,9 @@ export const BooleanFieldRadio = ({ error, label, name, options, setValue, value
         React.createElement(RadioGroup, { name: name, value: stringifyBoolean(value), onValueChange: handleValueChange },
             React.createElement(FieldGroup.Row, null,
                 React.createElement(RadioGroup.Item, { id: `${name}-true`, value: "true" }),
-                React.createElement(Label, { className: "font-normal", htmlFor: `${name}-true` }, options?.true ?? t('form.radioLabels.true'))),
+                React.createElement(Label, { className: "font-normal text-muted-foreground", htmlFor: `${name}-true` }, options?.true ?? t('form.radioLabels.true'))),
             React.createElement(FieldGroup.Row, null,
                 React.createElement(RadioGroup.Item, { id: `${name}-false`, value: "false" }),
-                React.createElement(Label, { className: "font-normal", htmlFor: `${name}-false` }, options?.false ?? t('form.radioLabels.false')))),
+                React.createElement(Label, { className: "font-normal text-muted-foreground", htmlFor: `${name}-false` }, options?.false ?? t('form.radioLabels.false')))),
         React.createElement(FieldGroup.Error, { error: error })));
 };

package/dist/components/Form/FieldGroup/FieldGroupRoot.js

@@ -1,2 +1,2 @@
 import React from 'react';
-export const FieldGroupRoot = ({ children }) => (React.createElement("div", { className: "flex flex-col gap-2 @container" }, children));
+export const FieldGroupRoot = ({ children }) => (React.createElement("div", { className: "flex flex-col gap-3.5 @container" }, children));

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { FormContent, FormDataType, PartialNullableFormDataType } from '@douglasneuroinformatics/libui-form-types';
 import { z } from 'zod';
-type FormProps<TSchema extends z.ZodType<FormDataType>, TData extends z.infer<TSchema> = z.infer<TSchema>> = {
+type FormProps<TSchema extends z.ZodType<FormDataType>, TData extends z.TypeOf<TSchema> = z.TypeOf<TSchema>> = {
     [key: `data-${string}`]: unknown;
     className?: string;
     content: FormContent<TData>;

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

@@ -1 +1 @@
-{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../src/components/Form/Form.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,KAAK,EACV,WAAW,EACX,YAAY,EAGZ,2BAA2B,EAC5B,MAAM,2CAA2C,CAAC;AAInD,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAUxB,KAAK,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC,OAAO,CAAC,YAAY,CAAC,EAAE,KAAK,SAAS,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI;IAC3G,CAAC,GAAG,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,WAAW,CAAC,KAAK,CAAC,CAAC;IAC5B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,aAAa,CAAC,EAAE,2BAA2B,CAAC,KAAK,CAAC,CAAC;IACnD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;IAC7C,QAAQ,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,IAAI,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,EAAE,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;CACpC,CAAC;AAEF,QAAA,MAAM,IAAI,iPAWP,UAAU,OAAO,EAAE,KAAK,CAAC,sBAgG3B,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,CAAC"}
+{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../src/components/Form/Form.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,KAAK,EACV,WAAW,EACX,YAAY,EAGZ,2BAA2B,EAC5B,MAAM,2CAA2C,CAAC;AAInD,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAUxB,KAAK,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC,OAAO,CAAC,YAAY,CAAC,EAAE,KAAK,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI;IAC7G,CAAC,GAAG,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,WAAW,CAAC,KAAK,CAAC,CAAC;IAC5B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,aAAa,CAAC,EAAE,2BAA2B,CAAC,KAAK,CAAC,CAAC;IACnD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;IAC7C,QAAQ,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,IAAI,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,EAAE,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;CACpC,CAAC;AAEF,QAAA,MAAM,IAAI,iPAWP,UAAU,OAAO,EAAE,KAAK,CAAC,sBAgG3B,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,CAAC"}

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

@@ -12,8 +12,8 @@ export const NumberFieldRadio = ({ description, error, label, name, options, set
         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((key) => (React.createElement("div", { className: "flex items-center gap-2", key: key },
-            React.createElement(RadioGroup.Item, { id: `${name}-${key}`, value: key.toString() }),
-            React.createElement(Label, { className: "font-normal", htmlFor: `${name}-${key}` }, options[key]))))),
+            .map((val) => (React.createElement("div", { className: "flex items-center gap-2", key: val },
+            React.createElement(RadioGroup.Item, { id: `${name}-${val}`, value: val.toString() }),
+            React.createElement(Label, { className: "font-normal text-muted-foreground", htmlFor: `${name}-${val}` }, `${val} - ${options[val]}`))))),
         React.createElement(FieldGroup.Error, { error: error })));
 };

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

@@ -11,6 +11,6 @@ export const NumberFieldSelect = ({ description, error, label, name, options, se
         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` },
                 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 }, options[option]))))),
+            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(FieldGroup.Error, { error: error })));
 };

package/dist/components/Form/SetField/SetFieldListbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SetFieldListbox.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/SetField/SetFieldListbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAEnD,MAAM,MAAM,oBAAoB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI;IAC5D,eAAe,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1D,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC;AAErB,eAAO,MAAM,eAAe,oGAQzB,qBAAqB,CAAC,CAAC,sBAwBzB,CAAC"}
+{"version":3,"file":"SetFieldListbox.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/SetField/SetFieldListbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAEnD,MAAM,MAAM,oBAAoB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI;IAC5D,eAAe,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1D,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC;AAErB,eAAO,MAAM,eAAe,oGAQzB,qBAAqB,CAAC,CAAC,sBA0BzB,CAAC"}

package/dist/components/Form/SetField/SetFieldListbox.js

@@ -7,10 +7,10 @@ export const SetFieldListbox = ({ description, error, label, name, onCheckedChan
         React.createElement(FieldGroup.Row, null,
             React.createElement(Label, null, label),
             React.createElement(FieldGroup.Description, { description: description })),
-        Object.keys(options).map((option) => (React.createElement("div", { className: "flex items-center gap-2", key: option },
+        React.createElement("div", { className: "grid gap-2" }, Object.keys(options).map((option) => (React.createElement(FieldGroup.Row, { key: option },
             React.createElement(Checkbox, { checked: value?.has(option) ?? false, id: `${name}-${option}`, onCheckedChange: (checked) => {
                     onCheckedChange(option, !checked);
                 } }),
-            React.createElement(Label, { className: "font-normal", htmlFor: `${name}-${option}` }, options[option])))),
+            React.createElement(Label, { className: "font-normal text-muted-foreground", htmlFor: `${name}-${option}` }, options[option]))))),
         React.createElement(FieldGroup.Error, { error: error })));
 };

package/package.json

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

package/src/components/Form/BaseRadioField.tsx

@@ -56,7 +56,7 @@ export const BaseRadioField = <T extends string>({
         {Object.keys(options).map((option) => (
           <div className="flex items-center gap-2" key={option}>
             <RadioGroup.Item id={`${name}-${option}`} value={option} />
-            <Label className="font-normal" htmlFor={`${name}-${option}`}>
+            <Label className="font-normal text-muted-foreground" htmlFor={`${name}-${option}`}>
               {options[option as T]}
             </Label>
           </div>

package/src/components/Form/BooleanField/BooleanFieldRadio.tsx

@@ -42,13 +42,13 @@ export const BooleanFieldRadio = ({ error, label, name, options, setValue, value
       <RadioGroup name={name} value={stringifyBoolean(value)} onValueChange={handleValueChange}>
         <FieldGroup.Row>
           <RadioGroup.Item id={`${name}-true`} value="true" />
-          <Label className="font-normal" htmlFor={`${name}-true`}>
+          <Label className="font-normal text-muted-foreground" htmlFor={`${name}-true`}>
             {options?.true ?? t('form.radioLabels.true')}
           </Label>
         </FieldGroup.Row>
         <FieldGroup.Row>
           <RadioGroup.Item id={`${name}-false`} value="false" />
-          <Label className="font-normal" htmlFor={`${name}-false`}>
+          <Label className="font-normal text-muted-foreground" htmlFor={`${name}-false`}>
             {options?.false ?? t('form.radioLabels.false')}
           </Label>
         </FieldGroup.Row>

package/src/components/Form/FieldGroup/FieldGroupRoot.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
 
 export const FieldGroupRoot: React.FC<{ children: React.ReactNode }> = ({ children }) => (
-  <div className="flex flex-col gap-2 @container">{children}</div>
+  <div className="flex flex-col gap-3.5 @container">{children}</div>
 );

package/src/components/Form/Form.tsx

@@ -20,7 +20,7 @@ import { getInitialValues } from './utils.js';
 
 import type { FormErrors } from './types.js';
 
-type FormProps<TSchema extends z.ZodType<FormDataType>, TData extends z.infer<TSchema> = z.infer<TSchema>> = {
+type FormProps<TSchema extends z.ZodType<FormDataType>, TData extends z.TypeOf<TSchema> = z.TypeOf<TSchema>> = {
   [key: `data-${string}`]: unknown;
   className?: string;
   content: FormContent<TData>;
@@ -33,7 +33,7 @@ type FormProps<TSchema extends z.ZodType<FormDataType>, TData extends z.infer<TS
   validationSchema: z.ZodType<TData>;
 };
 
-const Form = <TSchema extends z.ZodType<FormDataType>, TData extends z.infer<TSchema> = z.infer<TSchema>>({
+const Form = <TSchema extends z.ZodType<FormDataType>, TData extends z.TypeOf<TSchema> = z.TypeOf<TSchema>>({
   className,
   content,
   id,

package/src/components/Form/NumberField/NumberFieldRadio.tsx

@@ -43,11 +43,11 @@ export const NumberFieldRadio = ({
         {Object.keys(options)
           .map((val) => parseInt(val))
           .toSorted((a, b) => a - b)
-          .map((key) => (
-            <div className="flex items-center gap-2" key={key}>
-              <RadioGroup.Item id={`${name}-${key}`} value={key.toString()} />
-              <Label className="font-normal" htmlFor={`${name}-${key}`}>
-                {options[key]}
+          .map((val) => (
+            <div className="flex items-center gap-2" key={val}>
+              <RadioGroup.Item id={`${name}-${val}`} value={val.toString()} />
+              <Label className="font-normal text-muted-foreground" htmlFor={`${name}-${val}`}>
+                {`${val} - ${options[val]}`}
               </Label>
             </div>
           ))}

package/src/components/Form/NumberField/NumberFieldSelect.tsx

@@ -35,7 +35,7 @@ export const NumberFieldSelect = <T extends number = number>({
           {Object.keys(options).map((option) => (
             <Select.Item key={option} value={option}>
               {/** option needs to be type number, but no sense converting it when it is coerced right back anyways */}
-              {options[option as any as T]}
+              {`${option} - ${options[option as any as T]}`}
             </Select.Item>
           ))}
         </Select.Content>

package/src/components/Form/SetField/SetFieldListbox.tsx

@@ -25,20 +25,22 @@ export const SetFieldListbox = <T extends string = string>({
         <Label>{label}</Label>
         <FieldGroup.Description description={description} />
       </FieldGroup.Row>
-      {Object.keys(options).map((option) => (
-        <div className="flex items-center gap-2" key={option}>
-          <Checkbox
-            checked={value?.has(option as T) ?? false}
-            id={`${name}-${option}`}
-            onCheckedChange={(checked) => {
-              onCheckedChange(option as T, !checked);
-            }}
-          />
-          <Label className="font-normal" htmlFor={`${name}-${option}`}>
-            {options[option as T]}
-          </Label>
-        </div>
-      ))}
+      <div className="grid gap-2">
+        {Object.keys(options).map((option) => (
+          <FieldGroup.Row key={option}>
+            <Checkbox
+              checked={value?.has(option as T) ?? false}
+              id={`${name}-${option}`}
+              onCheckedChange={(checked) => {
+                onCheckedChange(option as T, !checked);
+              }}
+            />
+            <Label className="font-normal text-muted-foreground" htmlFor={`${name}-${option}`}>
+              {options[option as T]}
+            </Label>
+          </FieldGroup.Row>
+        ))}
+      </div>
       <FieldGroup.Error error={error} />
     </FieldGroup>
   );