@particle-academy/react-fancy 5.7.0 → 5.9.0

package/dist/index.cjs

@@ -2995,9 +2995,10 @@ function Field({
   htmlFor,
   size = "md",
   children,
-  className
+  className,
+  ...rest
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-react-fancy-field": "", className: cn("flex flex-col gap-2", className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...rest, "data-react-fancy-field": "", className: cn("flex flex-col gap-2", className), children: [
     label && /* @__PURE__ */ jsxRuntime.jsxs(
       "label",
       {
@@ -4098,7 +4099,8 @@ var Checkbox = react.forwardRef(
     defaultChecked = false,
     onCheckedChange,
     indeterminate,
-    mode
+    mode,
+    ...rest
   }, ref) => {
     const autoId = react.useId();
     const checkboxId = id ?? autoId;
@@ -4124,7 +4126,7 @@ var Checkbox = react.forwardRef(
       xl: "h-6 w-6"
     }[size];
     const glyph = indeterminate ? "\u2014" : checked ? "\u2713" : "\u2715";
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-react-fancy-checkbox": "", className: cn("flex items-start gap-2", className), children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...rest, "data-react-fancy-checkbox": "", className: cn("flex items-start gap-2", className), children: [
       !showControl ? /* @__PURE__ */ jsxRuntime.jsx(
         "span",
         {
@@ -4215,7 +4217,8 @@ function CheckboxGroup({
   defaultValue = [],
   onValueChange,
   orientation = "vertical",
-  mode
+  mode,
+  ...rest
 }) {
   const groupId = react.useId();
   const resolvedMode = useFieldMode(mode);
@@ -4239,6 +4242,7 @@ function CheckboxGroup({
   const content = !showControl ? /* @__PURE__ */ jsxRuntime.jsx(DisplayValue, { size, interactive, onActivate: enterEdit, children: list.map(resolveOption).filter((o) => value.includes(o.value)).map((o) => o.label).join(", ") }) : /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
+      ...rest,
       "data-react-fancy-checkbox-group": "",
       onBlur: (e) => {
         if (interactive && !e.currentTarget.contains(e.relatedTarget)) exitEdit();
@@ -4321,7 +4325,8 @@ function RadioGroup({
   defaultValue,
   onValueChange,
   orientation = "vertical",
-  mode
+  mode,
+  ...rest
 }) {
   const groupId = react.useId();
   const radioName = name ?? groupId;
@@ -4343,6 +4348,7 @@ function RadioGroup({
   const content = !showControl ? /* @__PURE__ */ jsxRuntime.jsx(DisplayValue, { size, interactive, onActivate: enterEdit, children: list.map(resolveOption).find((o) => o.value === value)?.label }) : /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
+      ...rest,
       "data-react-fancy-radio-group": "",
       role: "radiogroup",
       onBlur: (e) => {
@@ -4454,7 +4460,8 @@ var Switch = react.forwardRef(
     defaultChecked = false,
     onCheckedChange,
     color = "blue",
-    mode
+    mode,
+    ...rest
   }, ref) => {
     const autoId = react.useId();
     const switchId = id ?? autoId;
@@ -4486,7 +4493,7 @@ var Switch = react.forwardRef(
       lg: "translate-x-5",
       xl: "translate-x-6"
     }[size];
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-react-fancy-switch": "", className: cn("flex items-start gap-2", className), children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...rest, "data-react-fancy-switch": "", className: cn("flex items-start gap-2", className), children: [
       !showControl ? /* @__PURE__ */ jsxRuntime.jsx(
         "span",
         {
@@ -4854,7 +4861,8 @@ function MultiSwitch({
   defaultValue,
   onValueChange,
   linear,
-  mode
+  mode,
+  ...rest
 }) {
   const resolvedOptions = list.map(resolveOption);
   const fallback = defaultValue ?? resolvedOptions[0]?.value;
@@ -4888,6 +4896,7 @@ function MultiSwitch({
     "div",
     {
       ref: containerRef,
+      ...rest,
       "data-react-fancy-multi-switch": "",
       role: "radiogroup",
       id,
@@ -5989,7 +5998,8 @@ function TableRow({
   trayTriggerPosition = "end",
   expanded: controlledExpanded,
   defaultExpanded = false,
-  onExpandedChange
+  onExpandedChange,
+  ...rest
 }) {
   const [expanded, setExpanded] = useControllableState(
     controlledExpanded,
@@ -6028,6 +6038,7 @@ function TableRow({
     /* @__PURE__ */ jsxRuntime.jsxs(
       "tr",
       {
+        ...rest,
         "data-react-fancy-table-row": "",
         className: cn(
           "transition-colors hover:bg-zinc-50 dark:hover:bg-zinc-800/50",