@particle-academy/react-fancy 5.7.0 → 5.8.0

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ElementType, ButtonHTMLAttributes, AnchorHTMLAttributes, ReactNode, InputHTMLAttributes, TextareaHTMLAttributes, SelectHTMLAttributes, FormHTMLAttributes, TdHTMLAttributes, HTMLAttributes, ComponentType, CSSProperties, ReactElement, RefObject } from 'react';
+import { ElementType, ButtonHTMLAttributes, AnchorHTMLAttributes, ReactNode, HTMLAttributes, InputHTMLAttributes, TextareaHTMLAttributes, SelectHTMLAttributes, FormHTMLAttributes, TdHTMLAttributes, ComponentType, CSSProperties, ReactElement, RefObject } from 'react';
 import { ClassValue } from 'clsx';
 
 type Size = "xs" | "sm" | "md" | "lg" | "xl";
@@ -318,7 +318,7 @@ interface AccordionSectionContextValue {
 }
 declare function useAccordionSection(): AccordionSectionContextValue;
 
-interface FieldProps {
+interface FieldProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
     label?: string;
     description?: string;
     error?: string;
@@ -329,7 +329,7 @@ interface FieldProps {
     className?: string;
 }
 
-declare function Field({ label, description, error, required, htmlFor, size, children, className, }: FieldProps): react.JSX.Element;
+declare function Field({ label, description, error, required, htmlFor, size, children, className, ...rest }: FieldProps): react.JSX.Element;
 
 type InputOption<V = string> = string | {
     value: V;
@@ -441,7 +441,7 @@ interface SelectProps extends InputBaseProps, InputAffixProps, Omit<SelectHTMLAt
 
 declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLSelectElement>>;
 
-interface CheckboxProps extends Omit<InputBaseProps, "label"> {
+interface CheckboxProps extends Omit<InputBaseProps, "label">, Omit<HTMLAttributes<HTMLDivElement>, "color" | "defaultChecked" | "onChange" | "id"> {
     checked?: boolean;
     defaultChecked?: boolean;
     onCheckedChange?: (checked: boolean) => void;
@@ -459,7 +459,7 @@ interface CheckboxGroupProps<V = string> extends Omit<InputBaseProps, "id"> {
     orientation?: "horizontal" | "vertical";
 }
 
-declare function CheckboxGroup<V = string>({ size, dirty, error, label, description, required, disabled, className, name, list, value: controlledValue, defaultValue, onValueChange, orientation, mode, }: CheckboxGroupProps<V>): react.JSX.Element;
+declare function CheckboxGroup<V = string>({ size, dirty, error, label, description, required, disabled, className, name, list, value: controlledValue, defaultValue, onValueChange, orientation, mode, ...rest }: CheckboxGroupProps<V>): react.JSX.Element;
 declare namespace CheckboxGroup {
     var displayName: string;
 }
@@ -472,12 +472,12 @@ interface RadioGroupProps<V = string> extends Omit<InputBaseProps, "id"> {
     orientation?: "horizontal" | "vertical";
 }
 
-declare function RadioGroup<V = string>({ size, dirty, error, label, description, required, disabled, className, name, list, value: controlledValue, defaultValue, onValueChange, orientation, mode, }: RadioGroupProps<V>): react.JSX.Element;
+declare function RadioGroup<V = string>({ size, dirty, error, label, description, required, disabled, className, name, list, value: controlledValue, defaultValue, onValueChange, orientation, mode, ...rest }: RadioGroupProps<V>): react.JSX.Element;
 declare namespace RadioGroup {
     var displayName: string;
 }
 
-interface SwitchProps extends Omit<InputBaseProps, "label"> {
+interface SwitchProps extends Omit<InputBaseProps, "label">, Omit<HTMLAttributes<HTMLDivElement>, "color" | "defaultChecked" | "onChange" | "id"> {
     checked?: boolean;
     defaultChecked?: boolean;
     onCheckedChange?: (checked: boolean) => void;
@@ -523,7 +523,7 @@ interface MultiSwitchProps<V = string> extends InputBaseProps {
     linear?: boolean;
 }
 
-declare function MultiSwitch<V = string>({ size, dirty, error, label, description, required, disabled, className, id, name, list, value: controlledValue, defaultValue, onValueChange, linear, mode, }: MultiSwitchProps<V>): react.JSX.Element;
+declare function MultiSwitch<V = string>({ size, dirty, error, label, description, required, disabled, className, id, name, list, value: controlledValue, defaultValue, onValueChange, linear, mode, ...rest }: MultiSwitchProps<V>): react.JSX.Element;
 declare namespace MultiSwitch {
     var displayName: string;
 }
@@ -761,7 +761,7 @@ interface TableBodyProps {
     children: ReactNode;
     className?: string;
 }
-interface TableRowProps {
+interface TableRowProps extends Omit<HTMLAttributes<HTMLTableRowElement>, "onClick"> {
     children: ReactNode;
     className?: string;
     onClick?: () => void;
@@ -807,7 +807,7 @@ declare function TableHead({ children, className }: TableHeadProps): react.JSX.E
 
 declare function TableBody({ children, className }: TableBodyProps): react.JSX.Element;
 
-declare function TableRow({ children, className, onClick, tray, trayTriggerPosition, expanded: controlledExpanded, defaultExpanded, onExpandedChange, }: TableRowProps): react.JSX.Element;
+declare function TableRow({ children, className, onClick, tray, trayTriggerPosition, expanded: controlledExpanded, defaultExpanded, onExpandedChange, ...rest }: TableRowProps): react.JSX.Element;
 
 declare function TableCell({ children, className, header, ...rest }: TableCellProps): react.JSX.Element;
 

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ElementType, ButtonHTMLAttributes, AnchorHTMLAttributes, ReactNode, InputHTMLAttributes, TextareaHTMLAttributes, SelectHTMLAttributes, FormHTMLAttributes, TdHTMLAttributes, HTMLAttributes, ComponentType, CSSProperties, ReactElement, RefObject } from 'react';
+import { ElementType, ButtonHTMLAttributes, AnchorHTMLAttributes, ReactNode, HTMLAttributes, InputHTMLAttributes, TextareaHTMLAttributes, SelectHTMLAttributes, FormHTMLAttributes, TdHTMLAttributes, ComponentType, CSSProperties, ReactElement, RefObject } from 'react';
 import { ClassValue } from 'clsx';
 
 type Size = "xs" | "sm" | "md" | "lg" | "xl";
@@ -318,7 +318,7 @@ interface AccordionSectionContextValue {
 }
 declare function useAccordionSection(): AccordionSectionContextValue;
 
-interface FieldProps {
+interface FieldProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
     label?: string;
     description?: string;
     error?: string;
@@ -329,7 +329,7 @@ interface FieldProps {
     className?: string;
 }
 
-declare function Field({ label, description, error, required, htmlFor, size, children, className, }: FieldProps): react.JSX.Element;
+declare function Field({ label, description, error, required, htmlFor, size, children, className, ...rest }: FieldProps): react.JSX.Element;
 
 type InputOption<V = string> = string | {
     value: V;
@@ -441,7 +441,7 @@ interface SelectProps extends InputBaseProps, InputAffixProps, Omit<SelectHTMLAt
 
 declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLSelectElement>>;
 
-interface CheckboxProps extends Omit<InputBaseProps, "label"> {
+interface CheckboxProps extends Omit<InputBaseProps, "label">, Omit<HTMLAttributes<HTMLDivElement>, "color" | "defaultChecked" | "onChange" | "id"> {
     checked?: boolean;
     defaultChecked?: boolean;
     onCheckedChange?: (checked: boolean) => void;
@@ -459,7 +459,7 @@ interface CheckboxGroupProps<V = string> extends Omit<InputBaseProps, "id"> {
     orientation?: "horizontal" | "vertical";
 }
 
-declare function CheckboxGroup<V = string>({ size, dirty, error, label, description, required, disabled, className, name, list, value: controlledValue, defaultValue, onValueChange, orientation, mode, }: CheckboxGroupProps<V>): react.JSX.Element;
+declare function CheckboxGroup<V = string>({ size, dirty, error, label, description, required, disabled, className, name, list, value: controlledValue, defaultValue, onValueChange, orientation, mode, ...rest }: CheckboxGroupProps<V>): react.JSX.Element;
 declare namespace CheckboxGroup {
     var displayName: string;
 }
@@ -472,12 +472,12 @@ interface RadioGroupProps<V = string> extends Omit<InputBaseProps, "id"> {
     orientation?: "horizontal" | "vertical";
 }
 
-declare function RadioGroup<V = string>({ size, dirty, error, label, description, required, disabled, className, name, list, value: controlledValue, defaultValue, onValueChange, orientation, mode, }: RadioGroupProps<V>): react.JSX.Element;
+declare function RadioGroup<V = string>({ size, dirty, error, label, description, required, disabled, className, name, list, value: controlledValue, defaultValue, onValueChange, orientation, mode, ...rest }: RadioGroupProps<V>): react.JSX.Element;
 declare namespace RadioGroup {
     var displayName: string;
 }
 
-interface SwitchProps extends Omit<InputBaseProps, "label"> {
+interface SwitchProps extends Omit<InputBaseProps, "label">, Omit<HTMLAttributes<HTMLDivElement>, "color" | "defaultChecked" | "onChange" | "id"> {
     checked?: boolean;
     defaultChecked?: boolean;
     onCheckedChange?: (checked: boolean) => void;
@@ -523,7 +523,7 @@ interface MultiSwitchProps<V = string> extends InputBaseProps {
     linear?: boolean;
 }
 
-declare function MultiSwitch<V = string>({ size, dirty, error, label, description, required, disabled, className, id, name, list, value: controlledValue, defaultValue, onValueChange, linear, mode, }: MultiSwitchProps<V>): react.JSX.Element;
+declare function MultiSwitch<V = string>({ size, dirty, error, label, description, required, disabled, className, id, name, list, value: controlledValue, defaultValue, onValueChange, linear, mode, ...rest }: MultiSwitchProps<V>): react.JSX.Element;
 declare namespace MultiSwitch {
     var displayName: string;
 }
@@ -761,7 +761,7 @@ interface TableBodyProps {
     children: ReactNode;
     className?: string;
 }
-interface TableRowProps {
+interface TableRowProps extends Omit<HTMLAttributes<HTMLTableRowElement>, "onClick"> {
     children: ReactNode;
     className?: string;
     onClick?: () => void;
@@ -807,7 +807,7 @@ declare function TableHead({ children, className }: TableHeadProps): react.JSX.E
 
 declare function TableBody({ children, className }: TableBodyProps): react.JSX.Element;
 
-declare function TableRow({ children, className, onClick, tray, trayTriggerPosition, expanded: controlledExpanded, defaultExpanded, onExpandedChange, }: TableRowProps): react.JSX.Element;
+declare function TableRow({ children, className, onClick, tray, trayTriggerPosition, expanded: controlledExpanded, defaultExpanded, onExpandedChange, ...rest }: TableRowProps): react.JSX.Element;
 
 declare function TableCell({ children, className, header, ...rest }: TableCellProps): react.JSX.Element;
 

package/dist/index.js

@@ -2993,9 +2993,10 @@ function Field({
   htmlFor,
   size = "md",
   children,
-  className
+  className,
+  ...rest
 }) {
-  return /* @__PURE__ */ jsxs("div", { "data-react-fancy-field": "", className: cn("flex flex-col gap-2", className), children: [
+  return /* @__PURE__ */ jsxs("div", { ...rest, "data-react-fancy-field": "", className: cn("flex flex-col gap-2", className), children: [
     label && /* @__PURE__ */ jsxs(
       "label",
       {
@@ -4096,7 +4097,8 @@ var Checkbox = forwardRef(
     defaultChecked = false,
     onCheckedChange,
     indeterminate,
-    mode
+    mode,
+    ...rest
   }, ref) => {
     const autoId = useId();
     const checkboxId = id ?? autoId;
@@ -4122,7 +4124,7 @@ var Checkbox = forwardRef(
       xl: "h-6 w-6"
     }[size];
     const glyph = indeterminate ? "\u2014" : checked ? "\u2713" : "\u2715";
-    return /* @__PURE__ */ jsxs("div", { "data-react-fancy-checkbox": "", className: cn("flex items-start gap-2", className), children: [
+    return /* @__PURE__ */ jsxs("div", { ...rest, "data-react-fancy-checkbox": "", className: cn("flex items-start gap-2", className), children: [
       !showControl ? /* @__PURE__ */ jsx(
         "span",
         {
@@ -4213,7 +4215,8 @@ function CheckboxGroup({
   defaultValue = [],
   onValueChange,
   orientation = "vertical",
-  mode
+  mode,
+  ...rest
 }) {
   const groupId = useId();
   const resolvedMode = useFieldMode(mode);
@@ -4237,6 +4240,7 @@ function CheckboxGroup({
   const content = !showControl ? /* @__PURE__ */ jsx(DisplayValue, { size, interactive, onActivate: enterEdit, children: list.map(resolveOption).filter((o) => value.includes(o.value)).map((o) => o.label).join(", ") }) : /* @__PURE__ */ jsx(
     "div",
     {
+      ...rest,
       "data-react-fancy-checkbox-group": "",
       onBlur: (e) => {
         if (interactive && !e.currentTarget.contains(e.relatedTarget)) exitEdit();
@@ -4319,7 +4323,8 @@ function RadioGroup({
   defaultValue,
   onValueChange,
   orientation = "vertical",
-  mode
+  mode,
+  ...rest
 }) {
   const groupId = useId();
   const radioName = name ?? groupId;
@@ -4341,6 +4346,7 @@ function RadioGroup({
   const content = !showControl ? /* @__PURE__ */ jsx(DisplayValue, { size, interactive, onActivate: enterEdit, children: list.map(resolveOption).find((o) => o.value === value)?.label }) : /* @__PURE__ */ jsx(
     "div",
     {
+      ...rest,
       "data-react-fancy-radio-group": "",
       role: "radiogroup",
       onBlur: (e) => {
@@ -4452,7 +4458,8 @@ var Switch = forwardRef(
     defaultChecked = false,
     onCheckedChange,
     color = "blue",
-    mode
+    mode,
+    ...rest
   }, ref) => {
     const autoId = useId();
     const switchId = id ?? autoId;
@@ -4484,7 +4491,7 @@ var Switch = forwardRef(
       lg: "translate-x-5",
       xl: "translate-x-6"
     }[size];
-    return /* @__PURE__ */ jsxs("div", { "data-react-fancy-switch": "", className: cn("flex items-start gap-2", className), children: [
+    return /* @__PURE__ */ jsxs("div", { ...rest, "data-react-fancy-switch": "", className: cn("flex items-start gap-2", className), children: [
       !showControl ? /* @__PURE__ */ jsx(
         "span",
         {
@@ -4852,7 +4859,8 @@ function MultiSwitch({
   defaultValue,
   onValueChange,
   linear,
-  mode
+  mode,
+  ...rest
 }) {
   const resolvedOptions = list.map(resolveOption);
   const fallback = defaultValue ?? resolvedOptions[0]?.value;
@@ -4886,6 +4894,7 @@ function MultiSwitch({
     "div",
     {
       ref: containerRef,
+      ...rest,
       "data-react-fancy-multi-switch": "",
       role: "radiogroup",
       id,
@@ -5987,7 +5996,8 @@ function TableRow({
   trayTriggerPosition = "end",
   expanded: controlledExpanded,
   defaultExpanded = false,
-  onExpandedChange
+  onExpandedChange,
+  ...rest
 }) {
   const [expanded, setExpanded] = useControllableState(
     controlledExpanded,
@@ -6026,6 +6036,7 @@ function TableRow({
     /* @__PURE__ */ jsxs(
       "tr",
       {
+        ...rest,
         "data-react-fancy-table-row": "",
         className: cn(
           "transition-colors hover:bg-zinc-50 dark:hover:bg-zinc-800/50",