@rjsf/shadcn 6.0.0-beta.14 → 6.0.0-beta.15

package/README.md

@@ -20,6 +20,11 @@
     <a href="https://github.com/rjsf-team/react-jsonschema-form/issues">Request Feature</a>
   </p>
 
+
+<p align="center">
+<img src="https://github.com/tuanphung2308/rjsf-shadcn-css/blob/main/shadcn-demo.png?raw=true" alt="Logo" width="720" height="240">
+</p>
+
 <!-- TABLE OF CONTENTS -->
 
 ## Table of Contents
@@ -134,8 +139,7 @@ Supported colors are:
 #### Coloring
 
 - Generate a theme from [official shadCN site](https://ui.shadcn.com/themes)
-  or  [zippy starter's shadcn/ui theme generator](https://zippystarter.com/tools/shadcn-ui-theme-generator)
-  or [Railly](https://customizer.railly.dev/)
+  or  [tweakcn](https://tweakcn.com/editor/theme)
 - Navigate to shadcn/css, create a new file called [your-theme].css
 - Replace the base layer code with your new color
 - Follow the next section to build your CSS file

package/dist/index.js

@@ -103,10 +103,11 @@ var import_jsx_runtime2 = require("react/jsx-runtime");
 function AddButton({
   uiSchema,
   registry,
+  className,
   ...props
 }) {
   const { translateString } = registry;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "p-0 m-0", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Button, { ...props, className: "w-fit gap-2", variant: "outline", type: "button", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "p-0 m-0", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Button, { ...props, className: cn("w-fit gap-2", className), variant: "outline", type: "button", children: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.PlusCircle, { size: 16 }),
     " ",
     translateString(import_utils2.TranslatableString.AddItemButton)
@@ -114,12 +115,12 @@ function AddButton({
 }
 
 // src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx
-var import_utils3 = require("@rjsf/utils");
+var import_utils4 = require("@rjsf/utils");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function ArrayFieldItemTemplate(props) {
   const { children, buttonsProps, hasToolbar, uiSchema, registry } = props;
-  const uiOptions = (0, import_utils3.getUiOptions)(uiSchema);
-  const ArrayFieldItemButtonsTemplate = (0, import_utils3.getTemplate)(
+  const uiOptions = (0, import_utils4.getUiOptions)(uiSchema);
+  const ArrayFieldItemButtonsTemplate = (0, import_utils4.getTemplate)(
     "ArrayFieldItemButtonsTemplate",
     registry,
     uiOptions
@@ -131,22 +132,22 @@ function ArrayFieldItemTemplate(props) {
 }
 
 // src/ArrayFieldTemplate/ArrayFieldTemplate.tsx
-var import_utils4 = require("@rjsf/utils");
+var import_utils5 = require("@rjsf/utils");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 function ArrayFieldTemplate(props) {
   const { canAdd, disabled, idSchema, uiSchema, items, onAddClick, readonly, registry, required, schema, title } = props;
-  const uiOptions = (0, import_utils4.getUiOptions)(uiSchema);
-  const ArrayFieldDescriptionTemplate = (0, import_utils4.getTemplate)(
+  const uiOptions = (0, import_utils5.getUiOptions)(uiSchema);
+  const ArrayFieldDescriptionTemplate = (0, import_utils5.getTemplate)(
     "ArrayFieldDescriptionTemplate",
     registry,
     uiOptions
   );
-  const ArrayFieldItemTemplate2 = (0, import_utils4.getTemplate)(
+  const ArrayFieldItemTemplate2 = (0, import_utils5.getTemplate)(
     "ArrayFieldItemTemplate",
     registry,
     uiOptions
   );
-  const ArrayFieldTitleTemplate = (0, import_utils4.getTemplate)(
+  const ArrayFieldTitleTemplate = (0, import_utils5.getTemplate)(
     "ArrayFieldTitleTemplate",
     registry,
     uiOptions
@@ -181,7 +182,7 @@ function ArrayFieldTemplate(props) {
       canAdd && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "mt-2 flex", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         AddButton2,
         {
-          id: (0, import_utils4.buttonId)(idSchema, "add"),
+          id: (0, import_utils5.buttonId)(idSchema, "add"),
           className: "rjsf-array-item-add",
           onClick: onAddClick,
           disabled: disabled || readonly,
@@ -194,7 +195,7 @@ function ArrayFieldTemplate(props) {
 }
 
 // src/BaseInputTemplate/BaseInputTemplate.tsx
-var import_utils6 = require("@rjsf/utils");
+var import_utils7 = require("@rjsf/utils");
 
 // src/components/ui/input.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
@@ -234,11 +235,12 @@ function BaseInputTemplate({
   schema,
   rawErrors = [],
   children,
-  extraProps
+  extraProps,
+  className
 }) {
   const inputProps = {
     ...extraProps,
-    ...(0, import_utils6.getInputProps)(schema, type, options)
+    ...(0, import_utils7.getInputProps)(schema, type, options)
   };
   const _onChange = ({ target: { value: value2 } }) => onChange(value2 === "" ? options.emptyValue : value2);
   const _onBlur = ({ target }) => onBlur(id, target && target.value);
@@ -255,18 +257,18 @@ function BaseInputTemplate({
         required,
         disabled,
         readOnly: readonly,
-        className: cn({ "border-destructive focus-visible:ring-0": rawErrors.length > 0 }),
-        list: schema.examples ? (0, import_utils6.examplesId)(id) : void 0,
+        className: cn({ "border-destructive focus-visible:ring-0": rawErrors.length > 0 }, className),
+        list: schema.examples ? (0, import_utils7.examplesId)(id) : void 0,
         ...inputProps,
         value: value || value === 0 ? value : "",
         onChange: onChangeOverride || _onChange,
         onBlur: _onBlur,
         onFocus: _onFocus,
-        "aria-describedby": (0, import_utils6.ariaDescribedByIds)(id, !!schema.examples)
+        "aria-describedby": (0, import_utils7.ariaDescribedByIds)(id, !!schema.examples)
       }
     ),
     children,
-    Array.isArray(schema.examples) ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("datalist", { id: (0, import_utils6.examplesId)(id), children: schema.examples.concat(schema.default && !schema.examples.includes(schema.default) ? [schema.default] : []).map((example) => {
+    Array.isArray(schema.examples) ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("datalist", { id: (0, import_utils7.examplesId)(id), children: schema.examples.concat(schema.default && !schema.examples.includes(schema.default) ? [schema.default] : []).map((example) => {
       return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: example }, example);
     }) }) : null
   ] });
@@ -283,7 +285,7 @@ function DescriptionField({ id, description, registry, uiSchema }) {
 }
 
 // src/ErrorList/ErrorList.tsx
-var import_utils9 = require("@rjsf/utils");
+var import_utils10 = require("@rjsf/utils");
 var import_lucide_react2 = require("lucide-react");
 
 // src/components/ui/alert.tsx
@@ -339,7 +341,7 @@ function ErrorList({
   const { translateString } = registry;
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Alert, { variant: "destructive", className: "mb-2", children: [
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react2.AlertCircle, { className: "h-4 w-4" }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AlertTitle, { children: translateString(import_utils9.TranslatableString.ErrorsLabel) }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AlertTitle, { children: translateString(import_utils10.TranslatableString.ErrorsLabel) }),
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AlertDescription, { className: "flex flex-col gap-1", children: errors.map((error, i) => {
       return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
         "\u2022 ",
@@ -350,33 +352,33 @@ function ErrorList({
 }
 
 // src/FieldErrorTemplate/FieldErrorTemplate.tsx
-var import_utils10 = require("@rjsf/utils");
+var import_utils11 = require("@rjsf/utils");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 function FieldErrorTemplate(props) {
   const { errors = [], idSchema } = props;
   if (errors.length === 0) {
     return null;
   }
-  const id = (0, import_utils10.errorId)(idSchema);
+  const id = (0, import_utils11.errorId)(idSchema);
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex flex-col gap-1", id, children: errors.map((error, i) => {
     return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-xs font-medium text-destructive mb-1", children: error }, i);
   }) });
 }
 
 // src/FieldHelpTemplate/FieldHelpTemplate.tsx
-var import_utils11 = require("@rjsf/utils");
+var import_utils12 = require("@rjsf/utils");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 function FieldHelpTemplate(props) {
   const { idSchema, help, hasErrors } = props;
   if (!help) {
     return null;
   }
-  const id = (0, import_utils11.helpId)(idSchema);
+  const id = (0, import_utils12.helpId)(idSchema);
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: cn("text-xs font-medium text-muted-foreground", { " text-destructive": hasErrors }), id, children: help });
 }
 
 // src/FieldTemplate/FieldTemplate.tsx
-var import_utils13 = require("@rjsf/utils");
+var import_utils14 = require("@rjsf/utils");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 function FieldTemplate({
   id,
@@ -400,8 +402,8 @@ function FieldTemplate({
   uiSchema,
   registry
 }) {
-  const uiOptions = (0, import_utils13.getUiOptions)(uiSchema);
-  const WrapIfAdditionalTemplate2 = (0, import_utils13.getTemplate)(
+  const uiOptions = (0, import_utils14.getUiOptions)(uiSchema);
+  const WrapIfAdditionalTemplate2 = (0, import_utils14.getTemplate)(
     "WrapIfAdditionalTemplate",
     registry,
     uiOptions
@@ -462,7 +464,7 @@ function GridTemplate(props) {
 }
 
 // src/IconButton/IconButton.tsx
-var import_utils16 = require("@rjsf/utils");
+var import_utils17 = require("@rjsf/utils");
 var import_lucide_react3 = require("lucide-react");
 var import_jsx_runtime14 = require("react/jsx-runtime");
 function IconButton(props) {
@@ -473,7 +475,7 @@ function CopyButton(props) {
   const {
     registry: { translateString }
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(IconButton, { title: translateString(import_utils16.TranslatableString.CopyButton), ...props, icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react3.Copy, { className: "h-4 w-4" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(IconButton, { title: translateString(import_utils17.TranslatableString.CopyButton), ...props, icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react3.Copy, { className: "h-4 w-4" }) });
 }
 function MoveDownButton(props) {
   const {
@@ -482,7 +484,7 @@ function MoveDownButton(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     IconButton,
     {
-      title: translateString(import_utils16.TranslatableString.MoveDownButton),
+      title: translateString(import_utils17.TranslatableString.MoveDownButton),
       ...props,
       icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react3.ChevronDown, { className: "h-4 w-4" })
     }
@@ -495,7 +497,7 @@ function MoveUpButton(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     IconButton,
     {
-      title: translateString(import_utils16.TranslatableString.MoveUpButton),
+      title: translateString(import_utils17.TranslatableString.MoveUpButton),
       ...props,
       icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react3.ChevronUp, { className: "h-4 w-4" })
     }
@@ -508,7 +510,7 @@ function RemoveButton(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     IconButton,
     {
-      title: translateString(import_utils16.TranslatableString.RemoveButton),
+      title: translateString(import_utils17.TranslatableString.RemoveButton),
       ...props,
       className: "border-destructive",
       icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react3.Trash2, { className: "h-4 w-4 stroke-destructive" })
@@ -526,7 +528,7 @@ function MultiSchemaFieldTemplate({ selector, optionSchemaField }) {
 }
 
 // src/ObjectFieldTemplate/ObjectFieldTemplate.tsx
-var import_utils18 = require("@rjsf/utils");
+var import_utils19 = require("@rjsf/utils");
 var import_jsx_runtime16 = require("react/jsx-runtime");
 function ObjectFieldTemplate({
   description,
@@ -542,9 +544,9 @@ function ObjectFieldTemplate({
   readonly,
   registry
 }) {
-  const uiOptions = (0, import_utils18.getUiOptions)(uiSchema);
-  const TitleFieldTemplate = (0, import_utils18.getTemplate)("TitleFieldTemplate", registry, uiOptions);
-  const DescriptionFieldTemplate = (0, import_utils18.getTemplate)(
+  const uiOptions = (0, import_utils19.getUiOptions)(uiSchema);
+  const TitleFieldTemplate = (0, import_utils19.getTemplate)("TitleFieldTemplate", registry, uiOptions);
+  const DescriptionFieldTemplate = (0, import_utils19.getTemplate)(
     "DescriptionFieldTemplate",
     registry,
     uiOptions
@@ -556,7 +558,7 @@ function ObjectFieldTemplate({
     title && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       TitleFieldTemplate,
       {
-        id: (0, import_utils18.titleId)(idSchema),
+        id: (0, import_utils19.titleId)(idSchema),
         title,
         required,
         schema,
@@ -567,7 +569,7 @@ function ObjectFieldTemplate({
     description && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       DescriptionFieldTemplate,
       {
-        id: (0, import_utils18.descriptionId)(idSchema),
+        id: (0, import_utils19.descriptionId)(idSchema),
         description,
         schema,
         uiSchema,
@@ -579,10 +581,10 @@ function ObjectFieldTemplate({
         " ",
         element.content
       ] }) }, index)),
-      (0, import_utils18.canExpand)(schema, uiSchema, formData) ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      (0, import_utils19.canExpand)(schema, uiSchema, formData) ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         AddButton2,
         {
-          id: (0, import_utils18.buttonId)(idSchema, "add"),
+          id: (0, import_utils19.buttonId)(idSchema, "add"),
           onClick: onAddClick(schema),
           disabled: disabled || readonly,
           className: "rjsf-object-property-expand",
@@ -595,18 +597,18 @@ function ObjectFieldTemplate({
 }
 
 // src/SubmitButton/SubmitButton.tsx
-var import_utils19 = require("@rjsf/utils");
+var import_utils20 = require("@rjsf/utils");
 var import_jsx_runtime17 = require("react/jsx-runtime");
 function SubmitButton(props) {
-  const { submitText, norender, props: submitButtonProps } = (0, import_utils19.getSubmitButtonOptions)(props.uiSchema);
+  const { submitText, norender, props: submitButtonProps } = (0, import_utils20.getSubmitButtonOptions)(props.uiSchema);
   if (norender) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Button, { type: "submit", ...submitButtonProps, className: "my-2", children: submitText }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Button, { type: "submit", ...submitButtonProps, className: cn("my-2", submitButtonProps?.className), children: submitText }) });
 }
 
 // src/TitleField/TitleField.tsx
-var import_utils21 = require("@rjsf/utils");
+var import_utils23 = require("@rjsf/utils");
 
 // src/components/ui/separator.tsx
 var import_react_separator = require("@radix-ui/react-separator");
@@ -639,7 +641,7 @@ function TitleField({
   title,
   uiSchema
 }) {
-  const uiOptions = (0, import_utils21.getUiOptions)(uiSchema);
+  const uiOptions = (0, import_utils23.getUiOptions)(uiSchema);
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { id, className: "my-1 flex flex-col gap-0.5", children: [
     /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("h5", { children: uiOptions.title || title }),
     /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Separator, { dir: "horizontal", style: { height: "1px" }, className: "my-1" })
@@ -647,7 +649,7 @@ function TitleField({
 }
 
 // src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx
-var import_utils22 = require("@rjsf/utils");
+var import_utils24 = require("@rjsf/utils");
 var import_jsx_runtime20 = require("react/jsx-runtime");
 function WrapIfAdditionalTemplate({
   classNames,
@@ -666,8 +668,8 @@ function WrapIfAdditionalTemplate({
 }) {
   const { templates, translateString } = registry;
   const { RemoveButton: RemoveButton2 } = templates.ButtonTemplates;
-  const keyLabel = translateString(import_utils22.TranslatableString.KeyLabel, [label]);
-  const additional = import_utils22.ADDITIONAL_PROPERTY_FLAG in schema;
+  const keyLabel = translateString(import_utils24.TranslatableString.KeyLabel, [label]);
+  const additional = import_utils24.ADDITIONAL_PROPERTY_FLAG in schema;
   if (!additional) {
     return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: classNames, style, children });
   }
@@ -697,7 +699,7 @@ function WrapIfAdditionalTemplate({
       /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
         RemoveButton2,
         {
-          id: (0, import_utils22.buttonId)(id, "remove"),
+          id: (0, import_utils24.buttonId)(id, "remove"),
           iconType: "block",
           className: "rjsf-object-property-remove w-full",
           disabled: disabled || readonly,
@@ -740,7 +742,7 @@ function generateTemplates() {
 var Templates_default = generateTemplates();
 
 // src/CheckboxWidget/CheckboxWidget.tsx
-var import_utils25 = require("@rjsf/utils");
+var import_utils27 = require("@rjsf/utils");
 
 // src/components/ui/checkbox.tsx
 var import_react_checkbox = require("@radix-ui/react-checkbox");
@@ -802,10 +804,11 @@ function CheckboxWidget(props) {
     onBlur,
     onFocus,
     registry,
-    uiSchema
+    uiSchema,
+    className
   } = props;
-  const required = (0, import_utils25.schemaRequiresTrueValue)(schema);
-  const DescriptionFieldTemplate = (0, import_utils25.getTemplate)(
+  const required = (0, import_utils27.schemaRequiresTrueValue)(schema);
+  const DescriptionFieldTemplate = (0, import_utils27.getTemplate)(
     "DescriptionFieldTemplate",
     registry,
     options
@@ -818,12 +821,12 @@ function CheckboxWidget(props) {
     "div",
     {
       className: `relative ${disabled || readonly ? "cursor-not-allowed opacity-50" : ""}`,
-      "aria-describedby": (0, import_utils25.ariaDescribedByIds)(id),
+      "aria-describedby": (0, import_utils27.ariaDescribedByIds)(id),
       children: [
         !hideLabel && description && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           DescriptionFieldTemplate,
           {
-            id: (0, import_utils25.descriptionId)(id),
+            id: (0, import_utils27.descriptionId)(id),
             description,
             schema,
             uiSchema,
@@ -842,10 +845,11 @@ function CheckboxWidget(props) {
               autoFocus: autofocus,
               onCheckedChange: _onChange,
               onBlur: _onBlur,
-              onFocus: _onFocus
+              onFocus: _onFocus,
+              className
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Label, { className: "leading-tight", htmlFor: id, children: (0, import_utils25.labelValue)(label, hideLabel || !label) })
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Label, { className: "leading-tight", htmlFor: id, children: (0, import_utils27.labelValue)(label, hideLabel || !label) })
         ] })
       ]
     }
@@ -853,17 +857,29 @@ function CheckboxWidget(props) {
 }
 
 // src/CheckboxesWidget/CheckboxesWidget.tsx
-var import_utils26 = require("@rjsf/utils");
+var import_utils28 = require("@rjsf/utils");
 var import_jsx_runtime24 = require("react/jsx-runtime");
-function CheckboxesWidget({ id, disabled, options, value, autofocus, readonly, required, onChange, onBlur, onFocus }) {
+function CheckboxesWidget({
+  id,
+  disabled,
+  options,
+  value,
+  autofocus,
+  readonly,
+  required,
+  onChange,
+  onBlur,
+  onFocus,
+  className
+}) {
   const { enumOptions, enumDisabled, inline, emptyValue } = options;
   const checkboxesValues = Array.isArray(value) ? value : [value];
-  const _onBlur = ({ target }) => onBlur(id, (0, import_utils26.enumOptionsValueForIndex)(target && target.value, enumOptions, emptyValue));
-  const _onFocus = ({ target }) => onFocus(id, (0, import_utils26.enumOptionsValueForIndex)(target && target.value, enumOptions, emptyValue));
+  const _onBlur = ({ target }) => onBlur(id, (0, import_utils28.enumOptionsValueForIndex)(target && target.value, enumOptions, emptyValue));
+  const _onFocus = ({ target }) => onFocus(id, (0, import_utils28.enumOptionsValueForIndex)(target && target.value, enumOptions, emptyValue));
   return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: cn({ "flex flex-col gap-2": !inline, "flex flex-row gap-4 flex-wrap": inline }), children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
-    const checked = (0, import_utils26.enumOptionsIsSelected)(option.value, checkboxesValues);
+    const checked = (0, import_utils28.enumOptionsIsSelected)(option.value, checkboxesValues);
     const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
-    const indexOptionId = (0, import_utils26.optionId)(id, index);
+    const indexOptionId = (0, import_utils28.optionId)(id, index);
     return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         Checkbox,
@@ -874,25 +890,26 @@ function CheckboxesWidget({ id, disabled, options, value, autofocus, readonly, r
           disabled: disabled || itemDisabled || readonly,
           onCheckedChange: (state) => {
             if (state) {
-              onChange((0, import_utils26.enumOptionsSelectValue)(index, checkboxesValues, enumOptions));
+              onChange((0, import_utils28.enumOptionsSelectValue)(index, checkboxesValues, enumOptions));
             } else {
-              onChange((0, import_utils26.enumOptionsDeselectValue)(index, checkboxesValues, enumOptions));
+              onChange((0, import_utils28.enumOptionsDeselectValue)(index, checkboxesValues, enumOptions));
             }
           },
+          className,
           checked,
           autoFocus: autofocus && index === 0,
           onBlur: _onBlur,
           onFocus: _onFocus,
-          "aria-describedby": (0, import_utils26.ariaDescribedByIds)(id)
+          "aria-describedby": (0, import_utils28.ariaDescribedByIds)(id)
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Label, { className: "leading-tight", htmlFor: (0, import_utils26.optionId)(id, index), children: option.label })
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Label, { className: "leading-tight", htmlFor: (0, import_utils28.optionId)(id, index), children: option.label })
     ] }, indexOptionId);
   }) });
 }
 
 // src/RadioWidget/RadioWidget.tsx
-var import_utils29 = require("@rjsf/utils");
+var import_utils31 = require("@rjsf/utils");
 
 // src/components/ui/radio-group.tsx
 var import_react_radio_group = require("@radix-ui/react-radio-group");
@@ -927,12 +944,13 @@ function RadioWidget({
   readonly,
   onChange,
   onBlur,
-  onFocus
+  onFocus,
+  className
 }) {
   const { enumOptions, enumDisabled, emptyValue } = options;
-  const _onChange = (value2) => onChange((0, import_utils29.enumOptionsValueForIndex)(value2, enumOptions, emptyValue));
-  const _onBlur = ({ target }) => onBlur(id, (0, import_utils29.enumOptionsValueForIndex)(target && target.value, enumOptions, emptyValue));
-  const _onFocus = ({ target }) => onFocus(id, (0, import_utils29.enumOptionsValueForIndex)(target && target.value, enumOptions, emptyValue));
+  const _onChange = (value2) => onChange((0, import_utils31.enumOptionsValueForIndex)(value2, enumOptions, emptyValue));
+  const _onBlur = ({ target }) => onBlur(id, (0, import_utils31.enumOptionsValueForIndex)(target && target.value, enumOptions, emptyValue));
+  const _onFocus = ({ target }) => onFocus(id, (0, import_utils31.enumOptionsValueForIndex)(target && target.value, enumOptions, emptyValue));
   const inline = Boolean(options && options.inline);
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "mb-0", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     RadioGroup,
@@ -945,31 +963,31 @@ function RadioWidget({
       },
       onBlur: _onBlur,
       onFocus: _onFocus,
-      "aria-describedby": (0, import_utils29.ariaDescribedByIds)(id),
+      "aria-describedby": (0, import_utils31.ariaDescribedByIds)(id),
       orientation: inline ? "horizontal" : "vertical",
-      className: cn("flex flex-wrap", { "flex-col": !inline }),
+      className: cn("flex flex-wrap", { "flex-col": !inline }, className),
       children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
         const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
-        const checked = (0, import_utils29.enumOptionsIsSelected)(option.value, value);
+        const checked = (0, import_utils31.enumOptionsIsSelected)(option.value, value);
         return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-center gap-2", children: [
           /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
             RadioGroupItem,
             {
               checked,
               value: index.toString(),
-              id: (0, import_utils29.optionId)(id, index),
+              id: (0, import_utils31.optionId)(id, index),
               disabled: itemDisabled
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Label, { className: "leading-tight", htmlFor: (0, import_utils29.optionId)(id, index), children: option.label })
-        ] }, (0, import_utils29.optionId)(id, index));
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Label, { className: "leading-tight", htmlFor: (0, import_utils31.optionId)(id, index), children: option.label })
+        ] }, (0, import_utils31.optionId)(id, index));
       })
     }
   ) });
 }
 
 // src/RangeWidget/RangeWidget.tsx
-var import_utils32 = require("@rjsf/utils");
+var import_utils34 = require("@rjsf/utils");
 var import_pick = __toESM(require("lodash/pick"), 1);
 
 // src/components/ui/slider.tsx
@@ -1052,7 +1070,7 @@ function RangeWidget({
   id
 }) {
   const _onChange = (value2) => onChange(value2[0]);
-  const sliderProps = { value, label, id, ...(0, import_utils32.rangeSpec)(schema) };
+  const sliderProps = { value, label, id, ...(0, import_utils34.rangeSpec)(schema) };
   const uiProps = { id, ...(0, import_pick.default)(options.props || {}, allowedProps) };
   return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
@@ -1065,7 +1083,7 @@ function RangeWidget({
         value: [value],
         onValueChange: _onChange,
         ...uiProps,
-        "aria-describedby": (0, import_utils32.ariaDescribedByIds)(id)
+        "aria-describedby": (0, import_utils34.ariaDescribedByIds)(id)
       }
     ),
     value
@@ -1073,7 +1091,7 @@ function RangeWidget({
 }
 
 // src/SelectWidget/SelectWidget.tsx
-var import_utils38 = require("@rjsf/utils");
+var import_utils40 = require("@rjsf/utils");
 
 // src/components/ui/fancy-multi-select.tsx
 var import_cmdk2 = require("cmdk");
@@ -1463,14 +1481,15 @@ function SelectWidget({
   onFocus,
   defaultValue,
   placeholder,
-  rawErrors = []
+  rawErrors = [],
+  className
 }) {
   const { enumOptions, enumDisabled, emptyValue: optEmptyValue } = options;
   const _onFancyFocus = () => {
-    onFocus(id, (0, import_utils38.enumOptionsValueForIndex)(value, enumOptions, optEmptyValue));
+    onFocus(id, (0, import_utils40.enumOptionsValueForIndex)(value, enumOptions, optEmptyValue));
   };
   const _onFancyBlur = () => {
-    onBlur(id, (0, import_utils38.enumOptionsValueForIndex)(value, enumOptions, optEmptyValue));
+    onBlur(id, (0, import_utils40.enumOptionsValueForIndex)(value, enumOptions, optEmptyValue));
   };
   const items = enumOptions?.map(({ value: value2, label }, index) => ({
     value: multiple ? value2 : index.toString(),
@@ -1478,22 +1497,23 @@ function SelectWidget({
     index,
     disabled: Array.isArray(enumDisabled) && enumDisabled.includes(value2)
   }));
+  const cnClassName = cn({ "border-destructive": rawErrors.length > 0 }, className);
   return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "p-0.5", children: !multiple ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     FancySelect,
     {
       items,
-      selected: (0, import_utils38.enumOptionsIndexForValue)(value ?? defaultValue, enumOptions, false),
+      selected: (0, import_utils40.enumOptionsIndexForValue)(value ?? defaultValue, enumOptions, false),
       onValueChange: (selectedValue) => {
-        onChange((0, import_utils38.enumOptionsValueForIndex)(selectedValue, enumOptions, optEmptyValue));
+        onChange((0, import_utils40.enumOptionsValueForIndex)(selectedValue, enumOptions, optEmptyValue));
       },
       autoFocus: autofocus,
       disabled: disabled || readonly,
       required,
       placeholder,
-      className: cn({ "border-destructive": rawErrors.length > 0 }),
+      className: cnClassName,
       onFocus: _onFancyFocus,
       onBlur: _onFancyBlur,
-      ariaDescribedby: (0, import_utils38.ariaDescribedByIds)(id)
+      ariaDescribedby: (0, import_utils40.ariaDescribedByIds)(id)
     }
   ) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     FancyMultiSelect,
@@ -1502,11 +1522,11 @@ function SelectWidget({
       autoFocus: autofocus,
       disabled: disabled || readonly,
       multiple: true,
-      className: rawErrors.length > 0 ? "border-destructive" : "",
+      className: cnClassName,
       items,
       selected: value,
       onValueChange: (values) => {
-        onChange((0, import_utils38.enumOptionsValueForIndex)(values, enumOptions, optEmptyValue));
+        onChange((0, import_utils40.enumOptionsValueForIndex)(values, enumOptions, optEmptyValue));
       },
       onFocus: _onFancyFocus,
       onBlur: _onFancyBlur
@@ -1515,7 +1535,7 @@ function SelectWidget({
 }
 
 // src/TextareaWidget/TextareaWidget.tsx
-var import_utils41 = require("@rjsf/utils");
+var import_utils43 = require("@rjsf/utils");
 
 // src/components/ui/textarea.tsx
 var import_jsx_runtime35 = require("react/jsx-runtime");
@@ -1546,7 +1566,8 @@ function TextareaWidget({
   onBlur,
   onFocus,
   onChange,
-  options
+  options,
+  className
 }) {
   const _onChange = ({ target: { value: value2 } }) => onChange(value2 === "" ? options.emptyValue : value2);
   const _onBlur = ({ target }) => onBlur(id, target && target.value);
@@ -1566,7 +1587,8 @@ function TextareaWidget({
       onChange: _onChange,
       onBlur: _onBlur,
       onFocus: _onFocus,
-      "aria-describedby": (0, import_utils41.ariaDescribedByIds)(id)
+      "aria-describedby": (0, import_utils43.ariaDescribedByIds)(id),
+      className
     }
   ) });
 }