react-smart-fields 2.1.0 → 2.3.0

package/README.md

@@ -28,6 +28,9 @@ yarn add react-smart-fields
 ## Quick Start
 
 ```tsx
+// 1. Import the default styles once (e.g. in your root layout or App.tsx)
+import 'react-smart-fields/styles.css';
+
 import { DynamicFields, FieldConfig } from "react-smart-fields";
 
 const fields: FieldConfig[] = [

package/dist/index.cjs

@@ -113,88 +113,88 @@ var buildInitialValues = (fields, defaultValues, controlledValues) => {
 };
 var baseTheme = {
   default: {
-    wrapper: "w-full max-w-2xl mx-auto p-6 bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm dark:shadow-2xl",
-    title: "text-2xl font-semibold tracking-tight text-gray-900 dark:text-gray-100",
-    description: "text-sm text-gray-500 dark:text-gray-400",
-    fieldsContainer: "space-y-3",
-    field: "w-full",
-    label: "flex text-sm font-medium text-gray-800 dark:text-gray-200 mb-1.5",
-    help: "text-xs text-gray-500 dark:text-gray-400",
-    control: "w-full rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-blue-500 dark:focus:border-blue-400 transition-colors",
-    textarea: "w-full rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-blue-500 dark:focus:border-blue-400 transition-colors min-h-24",
-    select: "w-full rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-blue-500 dark:focus:border-blue-400 transition-colors",
-    option: "text-gray-800 dark:text-gray-200",
-    checkbox: "h-4 w-4 rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 focus:outline-none",
-    radio: "h-4 w-4 rounded-full border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 focus:outline-none",
-    error: "text-sm font-medium text-red-500 dark:text-red-400"
+    wrapper: "rsf-wrapper",
+    title: "rsf-title",
+    description: "rsf-description",
+    fieldsContainer: "rsf-fields-container",
+    field: "rsf-field",
+    label: "rsf-label",
+    help: "rsf-help",
+    control: "rsf-input",
+    textarea: "rsf-textarea",
+    select: "rsf-select",
+    option: "",
+    checkbox: "rsf-checkbox",
+    radio: "rsf-radio",
+    error: "rsf-error"
   },
   minimal: {
-    wrapper: "w-full max-w-2xl mx-auto",
-    title: "text-xl font-semibold text-gray-900 dark:text-gray-100",
-    description: "text-sm text-gray-500 dark:text-gray-400",
-    fieldsContainer: "space-y-3",
-    field: "w-full",
-    label: "text-sm font-medium text-gray-700 dark:text-gray-300 mb-1",
-    help: "text-xs text-gray-500 dark:text-gray-400",
-    control: "w-full rounded-md border border-gray-300 dark:border-gray-600 bg-transparent text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500",
-    textarea: "w-full rounded-md border border-gray-300 dark:border-gray-600 bg-transparent text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 min-h-24",
-    select: "w-full rounded-md border border-gray-300 dark:border-gray-600 bg-transparent text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500",
-    option: "text-gray-900 dark:text-gray-100",
-    checkbox: "h-4 w-4 rounded border border-gray-300 dark:border-gray-600 bg-transparent focus:outline-none",
-    radio: "h-4 w-4 rounded-full border border-gray-300 dark:border-gray-600 bg-transparent focus:outline-none",
-    error: "text-sm text-red-500"
+    wrapper: "rsf-wrapper rsf-wrapper--minimal",
+    title: "rsf-title",
+    description: "rsf-description",
+    fieldsContainer: "rsf-fields-container",
+    field: "rsf-field",
+    label: "rsf-label",
+    help: "rsf-help",
+    control: "rsf-input",
+    textarea: "rsf-textarea",
+    select: "rsf-select",
+    option: "",
+    checkbox: "rsf-checkbox",
+    radio: "rsf-radio",
+    error: "rsf-error"
   },
   filled: {
-    wrapper: "w-full max-w-2xl mx-auto p-6 bg-gray-50 dark:bg-gray-900/50 text-gray-800 dark:text-gray-200 rounded-xl border border-gray-100 dark:border-gray-800",
-    title: "text-2xl font-semibold text-gray-900 dark:text-gray-100",
-    description: "text-sm text-gray-500 dark:text-gray-400",
-    fieldsContainer: "space-y-3",
-    field: "w-full",
-    label: "text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
-    help: "text-xs text-gray-500 dark:text-gray-400",
-    control: "w-full rounded-lg border border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500",
-    textarea: "w-full rounded-lg border border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 min-h-24",
-    select: "w-full rounded-lg border border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500",
-    option: "text-gray-900 dark:text-gray-100",
-    checkbox: "h-4 w-4 rounded border border-transparent bg-white dark:bg-gray-800 focus:outline-none",
-    radio: "h-4 w-4 rounded-full border border-transparent bg-white dark:bg-gray-800 focus:outline-none",
-    error: "text-sm text-red-500"
+    wrapper: "rsf-wrapper rsf-wrapper--filled",
+    title: "rsf-title",
+    description: "rsf-description",
+    fieldsContainer: "rsf-fields-container",
+    field: "rsf-field",
+    label: "rsf-label",
+    help: "rsf-help",
+    control: "rsf-input",
+    textarea: "rsf-textarea",
+    select: "rsf-select",
+    option: "",
+    checkbox: "rsf-checkbox",
+    radio: "rsf-radio",
+    error: "rsf-error"
   },
   underline: {
-    wrapper: "w-full max-w-2xl mx-auto p-4",
-    title: "text-xl font-semibold text-gray-900 dark:text-gray-100",
-    description: "text-sm text-gray-500 dark:text-gray-400",
-    fieldsContainer: "space-y-4",
-    field: "w-full",
-    label: "text-sm font-medium text-gray-700 dark:text-gray-300 mb-1",
-    help: "text-xs text-gray-500 dark:text-gray-400",
-    control: "w-full border-0 border-b border-gray-300 dark:border-gray-600 bg-transparent text-gray-900 dark:text-gray-100 rounded-none focus:outline-none focus:ring-0 focus:border-blue-500",
-    textarea: "w-full border-0 border-b border-gray-300 dark:border-gray-600 bg-transparent text-gray-900 dark:text-gray-100 rounded-none focus:outline-none focus:ring-0 focus:border-blue-500 min-h-24",
-    select: "w-full border-0 border-b border-gray-300 dark:border-gray-600 bg-transparent text-gray-900 dark:text-gray-100 rounded-none focus:outline-none focus:ring-0 focus:border-blue-500",
-    option: "text-gray-900 dark:text-gray-100",
-    checkbox: "h-4 w-4 rounded border border-gray-300 dark:border-gray-600",
-    radio: "h-4 w-4 rounded-full border border-gray-300 dark:border-gray-600",
-    error: "text-sm text-red-500"
+    wrapper: "rsf-wrapper rsf-wrapper--underline",
+    title: "rsf-title",
+    description: "rsf-description",
+    fieldsContainer: "rsf-fields-container",
+    field: "rsf-field",
+    label: "rsf-label",
+    help: "rsf-help",
+    control: "rsf-input",
+    textarea: "rsf-textarea",
+    select: "rsf-select",
+    option: "",
+    checkbox: "rsf-checkbox",
+    radio: "rsf-radio",
+    error: "rsf-error"
   }
 };
 var sizeMap = {
   sm: {
-    control: "px-3 py-1.5 text-xs",
-    label: "text-xs",
-    help: "text-[11px]",
-    error: "text-xs"
+    control: "rsf-input--sm",
+    label: "",
+    help: "",
+    error: ""
   },
   md: {
-    control: "px-3.5 py-2 text-sm",
-    label: "text-sm",
-    help: "text-xs",
-    error: "text-sm"
+    control: "",
+    label: "",
+    help: "",
+    error: ""
   },
   lg: {
-    control: "px-4 py-2.5 text-base",
-    label: "text-base",
-    help: "text-sm",
-    error: "text-sm"
+    control: "rsf-input--lg",
+    label: "",
+    help: "",
+    error: ""
   }
 };
 var DynamicFields = ({
@@ -417,7 +417,7 @@ var DynamicFields = ({
     error: cn(defaultUi.error, sizeClasses.error, errorClassName, field?.errorClassName, ui?.error, field?.ui?.error)
   });
   const buildStateClassName = (field, hasError, disabled, readOnly) => cn(
-    hasError && stateClassNames?.invalid,
+    hasError && (stateClassNames?.invalid ?? "rsf-input--invalid"),
     disabled && stateClassNames?.disabled,
     readOnly && stateClassNames?.readonly,
     dirtyMap[field.name] && stateClassNames?.dirty,
@@ -434,7 +434,8 @@ var DynamicFields = ({
   };
   const renderDefaultControl = (context) => {
     const { field, value: value2, options, isLoadingOptions, classes, handleChange, handleBlur, disabled, readOnly, error } = context;
-    const controlStateClass = buildStateClassName(field, Boolean(error), disabled, readOnly);
+    const showsError = Boolean(error) && shouldShowError(field.name);
+    const controlStateClass = buildStateClassName(field, showsError, disabled, readOnly);
     if (field.type === "textarea") {
       return /* @__PURE__ */ import_react.default.createElement(
         "textarea",
@@ -477,12 +478,12 @@ var DynamicFields = ({
       );
     }
     if (field.type === "radio") {
-      return /* @__PURE__ */ import_react.default.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3" }, options.map((option) => /* @__PURE__ */ import_react.default.createElement(
+      return /* @__PURE__ */ import_react.default.createElement("div", { className: "rsf-radio-group" }, options.map((option) => /* @__PURE__ */ import_react.default.createElement(
         "label",
         {
           key: `${field.name}-${String(option.value)}`,
           htmlFor: `${field.name}-${String(option.value)}`,
-          className: "flex items-center gap-2 cursor-pointer"
+          className: "rsf-radio-item"
         },
         /* @__PURE__ */ import_react.default.createElement(
           "input",
@@ -499,7 +500,7 @@ var DynamicFields = ({
             className: cn(classes.radio, controlStateClass)
           }
         ),
-        /* @__PURE__ */ import_react.default.createElement("span", { className: "text-sm text-gray-800 dark:text-gray-200" }, option.label)
+        /* @__PURE__ */ import_react.default.createElement("span", { className: "rsf-radio-label" }, option.label)
       )));
     }
     if (field.type === "checkbox") {
@@ -541,7 +542,7 @@ var DynamicFields = ({
       }
     );
   };
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: resolveUi().wrapper }, title && /* @__PURE__ */ import_react.default.createElement("div", { className: "mb-4" }, /* @__PURE__ */ import_react.default.createElement("h2", { className: resolveUi().title }, title), description && /* @__PURE__ */ import_react.default.createElement("p", { className: resolveUi().description }, description)), /* @__PURE__ */ import_react.default.createElement("div", { className: resolveUi().fieldsContainer }, visibleFields.map((field) => {
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: resolveUi().wrapper }, title && /* @__PURE__ */ import_react.default.createElement("div", { className: "rsf-header" }, /* @__PURE__ */ import_react.default.createElement("h2", { className: resolveUi().title }, title), description && /* @__PURE__ */ import_react.default.createElement("p", { className: resolveUi().description }, description)), /* @__PURE__ */ import_react.default.createElement("div", { className: resolveUi().fieldsContainer }, visibleFields.map((field) => {
     const classes = resolveUi(field);
     const storedValue = getIn(values, field.name);
     const renderedValue = field.transformIn ? field.transformIn(storedValue, values) : storedValue;
@@ -569,7 +570,7 @@ var DynamicFields = ({
       handleBlur: () => handleFieldBlur(field)
     };
     const requiredMark = field.required || field.requiredWhen?.(values);
-    const labelNode = field.type === "checkbox" ? null : renderLabel ? renderLabel(context) : field.label ? /* @__PURE__ */ import_react.default.createElement("label", { htmlFor: field.name, className: classes.label }, field.label, requiredMark && /* @__PURE__ */ import_react.default.createElement("span", { className: "text-red-500 dark:text-red-400 ml-1" }, "*")) : null;
+    const labelNode = field.type === "checkbox" ? null : renderLabel ? renderLabel(context) : field.label ? /* @__PURE__ */ import_react.default.createElement("label", { htmlFor: field.name, className: classes.label }, field.label, requiredMark && /* @__PURE__ */ import_react.default.createElement("span", { className: "rsf-required-mark" }, "*")) : null;
     const helpNode = renderDescription ? renderDescription(context) : field.description ? /* @__PURE__ */ import_react.default.createElement("p", { className: classes.help }, field.description) : null;
     const errorNode = canShowError ? renderError ? renderError(context) : /* @__PURE__ */ import_react.default.createElement("p", { className: classes.error, role: "alert" }, error) : null;
     const controlNode = field.renderControl?.(context) ?? renderControl?.(context) ?? renderDefaultControl(context);
@@ -583,7 +584,7 @@ var DynamicFields = ({
       }));
     }
     if (field.type === "checkbox") {
-      return /* @__PURE__ */ import_react.default.createElement("div", { key: field.name, className: classes.field }, /* @__PURE__ */ import_react.default.createElement("label", { htmlFor: field.name, className: "inline-flex items-start gap-2 cursor-pointer" }, controlNode, /* @__PURE__ */ import_react.default.createElement("span", { className: "text-sm text-gray-800 dark:text-gray-200" }, field.label, requiredMark && /* @__PURE__ */ import_react.default.createElement("span", { className: "text-red-500 dark:text-red-400 ml-1" }, "*"))), helpNode, errorNode);
+      return /* @__PURE__ */ import_react.default.createElement("div", { key: field.name, className: classes.field }, /* @__PURE__ */ import_react.default.createElement("label", { htmlFor: field.name, className: "rsf-checkbox-item" }, controlNode, /* @__PURE__ */ import_react.default.createElement("span", { className: "rsf-checkbox-label" }, field.label, requiredMark && /* @__PURE__ */ import_react.default.createElement("span", { className: "rsf-required-mark" }, "*"))), helpNode, errorNode);
     }
     return /* @__PURE__ */ import_react.default.createElement("div", { key: field.name, className: classes.field }, labelNode, helpNode, controlNode, errorNode);
   })));

package/dist/index.js

@@ -77,88 +77,88 @@ var buildInitialValues = (fields, defaultValues, controlledValues) => {
 };
 var baseTheme = {
   default: {
-    wrapper: "w-full max-w-2xl mx-auto p-6 bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm dark:shadow-2xl",
-    title: "text-2xl font-semibold tracking-tight text-gray-900 dark:text-gray-100",
-    description: "text-sm text-gray-500 dark:text-gray-400",
-    fieldsContainer: "space-y-3",
-    field: "w-full",
-    label: "flex text-sm font-medium text-gray-800 dark:text-gray-200 mb-1.5",
-    help: "text-xs text-gray-500 dark:text-gray-400",
-    control: "w-full rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-blue-500 dark:focus:border-blue-400 transition-colors",
-    textarea: "w-full rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-blue-500 dark:focus:border-blue-400 transition-colors min-h-24",
-    select: "w-full rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-blue-500 dark:focus:border-blue-400 transition-colors",
-    option: "text-gray-800 dark:text-gray-200",
-    checkbox: "h-4 w-4 rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 focus:outline-none",
-    radio: "h-4 w-4 rounded-full border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 focus:outline-none",
-    error: "text-sm font-medium text-red-500 dark:text-red-400"
+    wrapper: "rsf-wrapper",
+    title: "rsf-title",
+    description: "rsf-description",
+    fieldsContainer: "rsf-fields-container",
+    field: "rsf-field",
+    label: "rsf-label",
+    help: "rsf-help",
+    control: "rsf-input",
+    textarea: "rsf-textarea",
+    select: "rsf-select",
+    option: "",
+    checkbox: "rsf-checkbox",
+    radio: "rsf-radio",
+    error: "rsf-error"
   },
   minimal: {
-    wrapper: "w-full max-w-2xl mx-auto",
-    title: "text-xl font-semibold text-gray-900 dark:text-gray-100",
-    description: "text-sm text-gray-500 dark:text-gray-400",
-    fieldsContainer: "space-y-3",
-    field: "w-full",
-    label: "text-sm font-medium text-gray-700 dark:text-gray-300 mb-1",
-    help: "text-xs text-gray-500 dark:text-gray-400",
-    control: "w-full rounded-md border border-gray-300 dark:border-gray-600 bg-transparent text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500",
-    textarea: "w-full rounded-md border border-gray-300 dark:border-gray-600 bg-transparent text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 min-h-24",
-    select: "w-full rounded-md border border-gray-300 dark:border-gray-600 bg-transparent text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500",
-    option: "text-gray-900 dark:text-gray-100",
-    checkbox: "h-4 w-4 rounded border border-gray-300 dark:border-gray-600 bg-transparent focus:outline-none",
-    radio: "h-4 w-4 rounded-full border border-gray-300 dark:border-gray-600 bg-transparent focus:outline-none",
-    error: "text-sm text-red-500"
+    wrapper: "rsf-wrapper rsf-wrapper--minimal",
+    title: "rsf-title",
+    description: "rsf-description",
+    fieldsContainer: "rsf-fields-container",
+    field: "rsf-field",
+    label: "rsf-label",
+    help: "rsf-help",
+    control: "rsf-input",
+    textarea: "rsf-textarea",
+    select: "rsf-select",
+    option: "",
+    checkbox: "rsf-checkbox",
+    radio: "rsf-radio",
+    error: "rsf-error"
   },
   filled: {
-    wrapper: "w-full max-w-2xl mx-auto p-6 bg-gray-50 dark:bg-gray-900/50 text-gray-800 dark:text-gray-200 rounded-xl border border-gray-100 dark:border-gray-800",
-    title: "text-2xl font-semibold text-gray-900 dark:text-gray-100",
-    description: "text-sm text-gray-500 dark:text-gray-400",
-    fieldsContainer: "space-y-3",
-    field: "w-full",
-    label: "text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5",
-    help: "text-xs text-gray-500 dark:text-gray-400",
-    control: "w-full rounded-lg border border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500",
-    textarea: "w-full rounded-lg border border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 min-h-24",
-    select: "w-full rounded-lg border border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500",
-    option: "text-gray-900 dark:text-gray-100",
-    checkbox: "h-4 w-4 rounded border border-transparent bg-white dark:bg-gray-800 focus:outline-none",
-    radio: "h-4 w-4 rounded-full border border-transparent bg-white dark:bg-gray-800 focus:outline-none",
-    error: "text-sm text-red-500"
+    wrapper: "rsf-wrapper rsf-wrapper--filled",
+    title: "rsf-title",
+    description: "rsf-description",
+    fieldsContainer: "rsf-fields-container",
+    field: "rsf-field",
+    label: "rsf-label",
+    help: "rsf-help",
+    control: "rsf-input",
+    textarea: "rsf-textarea",
+    select: "rsf-select",
+    option: "",
+    checkbox: "rsf-checkbox",
+    radio: "rsf-radio",
+    error: "rsf-error"
   },
   underline: {
-    wrapper: "w-full max-w-2xl mx-auto p-4",
-    title: "text-xl font-semibold text-gray-900 dark:text-gray-100",
-    description: "text-sm text-gray-500 dark:text-gray-400",
-    fieldsContainer: "space-y-4",
-    field: "w-full",
-    label: "text-sm font-medium text-gray-700 dark:text-gray-300 mb-1",
-    help: "text-xs text-gray-500 dark:text-gray-400",
-    control: "w-full border-0 border-b border-gray-300 dark:border-gray-600 bg-transparent text-gray-900 dark:text-gray-100 rounded-none focus:outline-none focus:ring-0 focus:border-blue-500",
-    textarea: "w-full border-0 border-b border-gray-300 dark:border-gray-600 bg-transparent text-gray-900 dark:text-gray-100 rounded-none focus:outline-none focus:ring-0 focus:border-blue-500 min-h-24",
-    select: "w-full border-0 border-b border-gray-300 dark:border-gray-600 bg-transparent text-gray-900 dark:text-gray-100 rounded-none focus:outline-none focus:ring-0 focus:border-blue-500",
-    option: "text-gray-900 dark:text-gray-100",
-    checkbox: "h-4 w-4 rounded border border-gray-300 dark:border-gray-600",
-    radio: "h-4 w-4 rounded-full border border-gray-300 dark:border-gray-600",
-    error: "text-sm text-red-500"
+    wrapper: "rsf-wrapper rsf-wrapper--underline",
+    title: "rsf-title",
+    description: "rsf-description",
+    fieldsContainer: "rsf-fields-container",
+    field: "rsf-field",
+    label: "rsf-label",
+    help: "rsf-help",
+    control: "rsf-input",
+    textarea: "rsf-textarea",
+    select: "rsf-select",
+    option: "",
+    checkbox: "rsf-checkbox",
+    radio: "rsf-radio",
+    error: "rsf-error"
   }
 };
 var sizeMap = {
   sm: {
-    control: "px-3 py-1.5 text-xs",
-    label: "text-xs",
-    help: "text-[11px]",
-    error: "text-xs"
+    control: "rsf-input--sm",
+    label: "",
+    help: "",
+    error: ""
   },
   md: {
-    control: "px-3.5 py-2 text-sm",
-    label: "text-sm",
-    help: "text-xs",
-    error: "text-sm"
+    control: "",
+    label: "",
+    help: "",
+    error: ""
   },
   lg: {
-    control: "px-4 py-2.5 text-base",
-    label: "text-base",
-    help: "text-sm",
-    error: "text-sm"
+    control: "rsf-input--lg",
+    label: "",
+    help: "",
+    error: ""
   }
 };
 var DynamicFields = ({
@@ -381,7 +381,7 @@ var DynamicFields = ({
     error: cn(defaultUi.error, sizeClasses.error, errorClassName, field?.errorClassName, ui?.error, field?.ui?.error)
   });
   const buildStateClassName = (field, hasError, disabled, readOnly) => cn(
-    hasError && stateClassNames?.invalid,
+    hasError && (stateClassNames?.invalid ?? "rsf-input--invalid"),
     disabled && stateClassNames?.disabled,
     readOnly && stateClassNames?.readonly,
     dirtyMap[field.name] && stateClassNames?.dirty,
@@ -398,7 +398,8 @@ var DynamicFields = ({
   };
   const renderDefaultControl = (context) => {
     const { field, value: value2, options, isLoadingOptions, classes, handleChange, handleBlur, disabled, readOnly, error } = context;
-    const controlStateClass = buildStateClassName(field, Boolean(error), disabled, readOnly);
+    const showsError = Boolean(error) && shouldShowError(field.name);
+    const controlStateClass = buildStateClassName(field, showsError, disabled, readOnly);
     if (field.type === "textarea") {
       return /* @__PURE__ */ React.createElement(
         "textarea",
@@ -441,12 +442,12 @@ var DynamicFields = ({
       );
     }
     if (field.type === "radio") {
-      return /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3" }, options.map((option) => /* @__PURE__ */ React.createElement(
+      return /* @__PURE__ */ React.createElement("div", { className: "rsf-radio-group" }, options.map((option) => /* @__PURE__ */ React.createElement(
         "label",
         {
           key: `${field.name}-${String(option.value)}`,
           htmlFor: `${field.name}-${String(option.value)}`,
-          className: "flex items-center gap-2 cursor-pointer"
+          className: "rsf-radio-item"
         },
         /* @__PURE__ */ React.createElement(
           "input",
@@ -463,7 +464,7 @@ var DynamicFields = ({
             className: cn(classes.radio, controlStateClass)
           }
         ),
-        /* @__PURE__ */ React.createElement("span", { className: "text-sm text-gray-800 dark:text-gray-200" }, option.label)
+        /* @__PURE__ */ React.createElement("span", { className: "rsf-radio-label" }, option.label)
       )));
     }
     if (field.type === "checkbox") {
@@ -505,7 +506,7 @@ var DynamicFields = ({
       }
     );
   };
-  return /* @__PURE__ */ React.createElement("div", { className: resolveUi().wrapper }, title && /* @__PURE__ */ React.createElement("div", { className: "mb-4" }, /* @__PURE__ */ React.createElement("h2", { className: resolveUi().title }, title), description && /* @__PURE__ */ React.createElement("p", { className: resolveUi().description }, description)), /* @__PURE__ */ React.createElement("div", { className: resolveUi().fieldsContainer }, visibleFields.map((field) => {
+  return /* @__PURE__ */ React.createElement("div", { className: resolveUi().wrapper }, title && /* @__PURE__ */ React.createElement("div", { className: "rsf-header" }, /* @__PURE__ */ React.createElement("h2", { className: resolveUi().title }, title), description && /* @__PURE__ */ React.createElement("p", { className: resolveUi().description }, description)), /* @__PURE__ */ React.createElement("div", { className: resolveUi().fieldsContainer }, visibleFields.map((field) => {
     const classes = resolveUi(field);
     const storedValue = getIn(values, field.name);
     const renderedValue = field.transformIn ? field.transformIn(storedValue, values) : storedValue;
@@ -533,7 +534,7 @@ var DynamicFields = ({
       handleBlur: () => handleFieldBlur(field)
     };
     const requiredMark = field.required || field.requiredWhen?.(values);
-    const labelNode = field.type === "checkbox" ? null : renderLabel ? renderLabel(context) : field.label ? /* @__PURE__ */ React.createElement("label", { htmlFor: field.name, className: classes.label }, field.label, requiredMark && /* @__PURE__ */ React.createElement("span", { className: "text-red-500 dark:text-red-400 ml-1" }, "*")) : null;
+    const labelNode = field.type === "checkbox" ? null : renderLabel ? renderLabel(context) : field.label ? /* @__PURE__ */ React.createElement("label", { htmlFor: field.name, className: classes.label }, field.label, requiredMark && /* @__PURE__ */ React.createElement("span", { className: "rsf-required-mark" }, "*")) : null;
     const helpNode = renderDescription ? renderDescription(context) : field.description ? /* @__PURE__ */ React.createElement("p", { className: classes.help }, field.description) : null;
     const errorNode = canShowError ? renderError ? renderError(context) : /* @__PURE__ */ React.createElement("p", { className: classes.error, role: "alert" }, error) : null;
     const controlNode = field.renderControl?.(context) ?? renderControl?.(context) ?? renderDefaultControl(context);
@@ -547,7 +548,7 @@ var DynamicFields = ({
       }));
     }
     if (field.type === "checkbox") {
-      return /* @__PURE__ */ React.createElement("div", { key: field.name, className: classes.field }, /* @__PURE__ */ React.createElement("label", { htmlFor: field.name, className: "inline-flex items-start gap-2 cursor-pointer" }, controlNode, /* @__PURE__ */ React.createElement("span", { className: "text-sm text-gray-800 dark:text-gray-200" }, field.label, requiredMark && /* @__PURE__ */ React.createElement("span", { className: "text-red-500 dark:text-red-400 ml-1" }, "*"))), helpNode, errorNode);
+      return /* @__PURE__ */ React.createElement("div", { key: field.name, className: classes.field }, /* @__PURE__ */ React.createElement("label", { htmlFor: field.name, className: "rsf-checkbox-item" }, controlNode, /* @__PURE__ */ React.createElement("span", { className: "rsf-checkbox-label" }, field.label, requiredMark && /* @__PURE__ */ React.createElement("span", { className: "rsf-required-mark" }, "*"))), helpNode, errorNode);
     }
     return /* @__PURE__ */ React.createElement("div", { key: field.name, className: classes.field }, labelNode, helpNode, controlNode, errorNode);
   })));

package/dist/styles.css

@@ -0,0 +1,468 @@
+/* src/styles.css */
+.rsf-wrapper *,
+.rsf-wrapper *::before,
+.rsf-wrapper *::after {
+  box-sizing: border-box;
+}
+.rsf-wrapper {
+  font-family: var(--font-sans, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: var(--foreground, hsl(240 10% 3.9%));
+  background-color: var(--card, hsl(0 0% 100%));
+  border-radius: var(--radius, 0.5rem);
+  border: 1px solid var(--border, hsl(240 5.9% 90%));
+  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.07), 0 1px 2px -1px rgb(0 0 0 / 0.07);
+  padding: 1.5rem;
+  width: 100%;
+  max-width: 42rem;
+  margin-left: auto;
+  margin-right: auto;
+}
+.rsf-header {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+  padding-bottom: 1.5rem;
+  margin-bottom: 1.5rem;
+  border-bottom: 1px solid var(--border, hsl(240 5.9% 90%));
+}
+.rsf-title {
+  font-size: 1.5rem;
+  font-weight: 600;
+  line-height: 1;
+  letter-spacing: -0.025em;
+  color: var(--card-foreground, hsl(240 10% 3.9%));
+}
+.rsf-description {
+  font-size: 0.875rem;
+  color: var(--muted-foreground, hsl(240 3.8% 46.1%));
+  line-height: 1.5;
+}
+.rsf-fields-container {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.rsf-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  width: 100%;
+}
+.rsf-label {
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1;
+  color: var(--foreground, hsl(240 10% 3.9%));
+  cursor: default;
+  display: flex;
+  align-items: center;
+  gap: 0;
+}
+.rsf-label[data-disabled=true] {
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+.rsf-required-mark {
+  color: var(--destructive, hsl(0 84.2% 60.2%));
+  margin-left: 0.25rem;
+}
+.rsf-help {
+  font-size: 0.8rem;
+  color: var(--muted-foreground, hsl(240 3.8% 46.1%));
+  line-height: 1.5;
+}
+.rsf-error {
+  font-size: 0.8rem;
+  font-weight: 500;
+  color: var(--destructive, hsl(0 84.2% 60.2%));
+  line-height: 1.25;
+}
+.rsf-input {
+  display: flex;
+  height: 2.5rem;
+  width: 100%;
+  border-radius: calc(var(--radius, 0.5rem) - 2px);
+  border: 1px solid var(--input, hsl(240 5.9% 90%));
+  background-color: var(--background, hsl(0 0% 100%));
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  font-family: inherit;
+  color: var(--foreground, hsl(240 10% 3.9%));
+  line-height: 1.25;
+  transition: border-color 150ms ease, box-shadow 150ms ease;
+  outline: none;
+  -webkit-appearance: none;
+  appearance: none;
+}
+.rsf-input::placeholder {
+  color: var(--muted-foreground, hsl(240 3.8% 46.1%));
+}
+.rsf-input:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--background, hsl(0 0% 100%)), 0 0 0 4px var(--ring, hsl(240 10% 3.9%));
+}
+.rsf-input:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+  background-color: var(--muted, hsl(240 4.8% 95.9%));
+}
+.rsf-input[readonly] {
+  cursor: default;
+  background-color: var(--muted, hsl(240 4.8% 95.9%));
+}
+.rsf-input--invalid {
+  border-color: var(--destructive, hsl(0 84.2% 60.2%));
+}
+.rsf-input--invalid:focus-visible {
+  box-shadow: 0 0 0 2px var(--background, hsl(0 0% 100%)), 0 0 0 4px var(--destructive, hsl(0 84.2% 60.2%));
+}
+.rsf-input--sm {
+  height: 2rem;
+  padding: 0.375rem 0.625rem;
+  font-size: 0.75rem;
+}
+.rsf-input--lg {
+  height: 2.75rem;
+  padding: 0.625rem 1rem;
+  font-size: 1rem;
+}
+.rsf-textarea {
+  display: flex;
+  min-height: 5rem;
+  width: 100%;
+  border-radius: calc(var(--radius, 0.5rem) - 2px);
+  border: 1px solid var(--input, hsl(240 5.9% 90%));
+  background-color: var(--background, hsl(0 0% 100%));
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  font-family: inherit;
+  color: var(--foreground, hsl(240 10% 3.9%));
+  line-height: 1.5;
+  transition: border-color 150ms ease, box-shadow 150ms ease;
+  outline: none;
+  resize: none;
+}
+.rsf-textarea::placeholder {
+  color: var(--muted-foreground, hsl(240 3.8% 46.1%));
+}
+.rsf-textarea:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--background, hsl(0 0% 100%)), 0 0 0 4px var(--ring, hsl(240 10% 3.9%));
+}
+.rsf-textarea:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.rsf-textarea--invalid {
+  border-color: var(--destructive, hsl(0 84.2% 60.2%));
+}
+.rsf-textarea--invalid:focus-visible {
+  box-shadow: 0 0 0 2px var(--background, hsl(0 0% 100%)), 0 0 0 4px var(--destructive, hsl(0 84.2% 60.2%));
+}
+.rsf-select {
+  display: flex;
+  height: 2.5rem;
+  width: 100%;
+  border-radius: calc(var(--radius, 0.5rem) - 2px);
+  border: 1px solid var(--input, hsl(240 5.9% 90%));
+  background-color: var(--background, hsl(0 0% 100%));
+  padding: 0 0.75rem;
+  padding-right: 2rem;
+  font-size: 0.875rem;
+  font-family: inherit;
+  color: var(--foreground, hsl(240 10% 3.9%));
+  line-height: 1.25;
+  cursor: pointer;
+  transition: border-color 150ms ease, box-shadow 150ms ease;
+  outline: none;
+  -webkit-appearance: none;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 0.625rem center;
+  background-size: 1rem;
+}
+.rsf-select:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--background, hsl(0 0% 100%)), 0 0 0 4px var(--ring, hsl(240 10% 3.9%));
+}
+.rsf-select:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.rsf-select--invalid {
+  border-color: var(--destructive, hsl(0 84.2% 60.2%));
+}
+.rsf-select--invalid:focus-visible {
+  box-shadow: 0 0 0 2px var(--background, hsl(0 0% 100%)), 0 0 0 4px var(--destructive, hsl(0 84.2% 60.2%));
+}
+.rsf-select--sm {
+  height: 2rem;
+  font-size: 0.75rem;
+}
+.rsf-select--lg {
+  height: 2.75rem;
+  font-size: 1rem;
+}
+.rsf-radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+}
+.rsf-radio-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  user-select: none;
+}
+.rsf-radio-item:has(input:disabled) {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.rsf-radio {
+  width: 1rem;
+  height: 1rem;
+  border-radius: 9999px;
+  border: 1px solid var(--primary, hsl(240 5.9% 10%));
+  background-color: var(--background, hsl(0 0% 100%));
+  flex-shrink: 0;
+  cursor: pointer;
+  transition: border-color 150ms ease, box-shadow 150ms ease;
+  outline: none;
+  -webkit-appearance: none;
+  appearance: none;
+  position: relative;
+}
+.rsf-radio:checked {
+  background-color: var(--primary, hsl(240 5.9% 10%));
+  border-color: var(--primary, hsl(240 5.9% 10%));
+}
+.rsf-radio:checked::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 0.375rem;
+  height: 0.375rem;
+  border-radius: 9999px;
+  background-color: var(--primary-foreground, hsl(0 0% 98%));
+}
+.rsf-radio:focus-visible {
+  box-shadow: 0 0 0 2px var(--background, hsl(0 0% 100%)), 0 0 0 4px var(--ring, hsl(240 10% 3.9%));
+}
+.rsf-radio:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.rsf-radio-label {
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1;
+  color: var(--foreground, hsl(240 10% 3.9%));
+}
+.rsf-checkbox-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.625rem;
+  cursor: pointer;
+  user-select: none;
+}
+.rsf-checkbox-item:has(input:disabled) {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.rsf-checkbox {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+  border-radius: 0.2rem;
+  border: 1px solid var(--primary, hsl(240 5.9% 10%));
+  background-color: var(--background, hsl(0 0% 100%));
+  cursor: pointer;
+  transition:
+    border-color 150ms ease,
+    background-color 150ms ease,
+    box-shadow 150ms ease;
+  outline: none;
+  -webkit-appearance: none;
+  appearance: none;
+  position: relative;
+  margin-top: 0.0625rem;
+}
+.rsf-checkbox:checked {
+  background-color: var(--primary, hsl(240 5.9% 10%));
+  border-color: var(--primary, hsl(240 5.9% 10%));
+}
+.rsf-checkbox:checked::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -55%) rotate(45deg);
+  width: 0.3rem;
+  height: 0.55rem;
+  border: 2px solid var(--primary-foreground, hsl(0 0% 98%));
+  border-top: none;
+  border-left: none;
+}
+.rsf-checkbox:focus-visible {
+  box-shadow: 0 0 0 2px var(--background, hsl(0 0% 100%)), 0 0 0 4px var(--ring, hsl(240 10% 3.9%));
+}
+.rsf-checkbox:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.rsf-checkbox-label {
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.25;
+  color: var(--foreground, hsl(240 10% 3.9%));
+}
+@media (prefers-color-scheme: dark) {
+  .rsf-wrapper {
+    color: var(--foreground, hsl(0 0% 98%));
+    background-color: var(--card, hsl(240 10% 3.9%));
+    border-color: var(--border, hsl(240 3.7% 15.9%));
+  }
+  .rsf-header {
+    border-bottom-color: var(--border, hsl(240 3.7% 15.9%));
+  }
+  .rsf-title {
+    color: var(--card-foreground, hsl(0 0% 98%));
+  }
+  .rsf-description,
+  .rsf-help {
+    color: var(--muted-foreground, hsl(240 5% 64.9%));
+  }
+  .rsf-label,
+  .rsf-radio-label,
+  .rsf-checkbox-label {
+    color: var(--foreground, hsl(0 0% 98%));
+  }
+  .rsf-input,
+  .rsf-textarea,
+  .rsf-select {
+    background-color: var(--background, hsl(240 10% 3.9%));
+    border-color: var(--input, hsl(240 3.7% 15.9%));
+    color: var(--foreground, hsl(0 0% 98%));
+  }
+  .rsf-input::placeholder,
+  .rsf-textarea::placeholder {
+    color: var(--muted-foreground, hsl(240 5% 64.9%));
+  }
+  .rsf-input:focus-visible,
+  .rsf-textarea:focus-visible,
+  .rsf-select:focus-visible,
+  .rsf-radio:focus-visible,
+  .rsf-checkbox:focus-visible {
+    box-shadow: 0 0 0 2px var(--background, hsl(240 10% 3.9%)), 0 0 0 4px var(--ring, hsl(240 4.9% 83.9%));
+  }
+  .rsf-input:disabled,
+  .rsf-textarea:disabled,
+  .rsf-select:disabled {
+    background-color: var(--muted, hsl(240 3.7% 15.9%));
+  }
+  .rsf-radio {
+    border-color: var(--primary, hsl(0 0% 98%));
+    background-color: var(--background, hsl(240 10% 3.9%));
+  }
+  .rsf-radio:checked {
+    background-color: var(--primary, hsl(0 0% 98%));
+    border-color: var(--primary, hsl(0 0% 98%));
+  }
+  .rsf-radio:checked::after {
+    background-color: var(--primary-foreground, hsl(240 5.9% 10%));
+  }
+  .rsf-checkbox {
+    border-color: var(--primary, hsl(0 0% 98%));
+    background-color: var(--background, hsl(240 10% 3.9%));
+  }
+  .rsf-checkbox:checked {
+    background-color: var(--primary, hsl(0 0% 98%));
+    border-color: var(--primary, hsl(0 0% 98%));
+  }
+  .rsf-checkbox:checked::after {
+    border-color: var(--primary-foreground, hsl(240 5.9% 10%));
+  }
+  .rsf-select {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+  }
+}
+.rsf-wrapper--minimal {
+  background-color: transparent;
+  border: none;
+  box-shadow: none;
+  padding: 0;
+  border-radius: 0;
+}
+.rsf-wrapper--minimal .rsf-header {
+  border-bottom: none;
+  padding-bottom: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+.rsf-wrapper--filled {
+  background-color: var(--muted, hsl(240 4.8% 95.9%));
+  border-color: transparent;
+}
+.rsf-wrapper--filled .rsf-input,
+.rsf-wrapper--filled .rsf-textarea,
+.rsf-wrapper--filled .rsf-select {
+  background-color: var(--background, hsl(0 0% 100%));
+  border-color: transparent;
+}
+@media (prefers-color-scheme: dark) {
+  .rsf-wrapper--filled {
+    background-color: var(--muted, hsl(240 3.7% 15.9%));
+  }
+  .rsf-wrapper--filled .rsf-input,
+  .rsf-wrapper--filled .rsf-textarea,
+  .rsf-wrapper--filled .rsf-select {
+    background-color: var(--card, hsl(240 10% 3.9%));
+  }
+}
+.rsf-wrapper--underline {
+  background-color: transparent;
+  border: none;
+  box-shadow: none;
+  padding-left: 0;
+  padding-right: 0;
+  border-radius: 0;
+  max-width: 42rem;
+}
+.rsf-wrapper--underline .rsf-input,
+.rsf-wrapper--underline .rsf-textarea,
+.rsf-wrapper--underline .rsf-select {
+  border-radius: 0;
+  border: none;
+  border-bottom: 1px solid var(--input, hsl(240 5.9% 90%));
+  background-color: transparent;
+  padding-left: 0;
+  padding-right: 0;
+}
+.rsf-wrapper--underline .rsf-input:focus-visible,
+.rsf-wrapper--underline .rsf-textarea:focus-visible,
+.rsf-wrapper--underline .rsf-select:focus-visible {
+  box-shadow: none;
+  border-bottom-color: var(--ring, hsl(240 10% 3.9%));
+}
+.rsf-wrapper--underline .rsf-input--invalid,
+.rsf-wrapper--underline .rsf-textarea--invalid,
+.rsf-wrapper--underline .rsf-select--invalid {
+  border-bottom-color: var(--destructive, hsl(0 84.2% 60.2%));
+}
+@media (prefers-color-scheme: dark) {
+  .rsf-wrapper--underline .rsf-input,
+  .rsf-wrapper--underline .rsf-textarea,
+  .rsf-wrapper--underline .rsf-select {
+    border-bottom-color: var(--input, hsl(240 3.7% 15.9%));
+  }
+  .rsf-wrapper--underline .rsf-input:focus-visible,
+  .rsf-wrapper--underline .rsf-textarea:focus-visible,
+  .rsf-wrapper--underline .rsf-select:focus-visible {
+    border-bottom-color: var(--ring, hsl(240 4.9% 83.9%));
+  }
+}

package/dist/styles.d.cts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/styles.d.ts

@@ -0,0 +1,2 @@
+
+export {  }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-smart-fields",
-    "version": "2.1.0",
+    "version": "2.3.0",
     "description": "A flexible and highly customizable dynamic form builder for React with validation, conditional fields, theming, and headless rendering.",
     "license": "MIT",
     "author": "Pratik Panchal",
@@ -13,14 +13,15 @@
             "types": "./dist/index.d.ts",
             "import": "./dist/index.js",
             "require": "./dist/index.cjs"
-        }
+        },
+        "./styles.css": "./dist/styles.css"
     },
     "files": [
         "dist"
     ],
-    "sideEffects": false,
+    "sideEffects": ["*.css"],
     "scripts": {
-        "build": "tsup src/index.ts --format esm,cjs --dts --clean",
+        "build": "tsup src/index.ts src/styles.css --format esm,cjs --dts --clean",
         "build:types": "tsc --emitDeclarationOnly"
     },
     "repository": {