@dafaz-ui/react 4.0.9 → 4.0.11

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @dafaz-ui/react@4.0.9 build
+> @dafaz-ui/react@4.0.11 build
 > tsup src/index.tsx --format esm,cjs --dts --external react
 
 CLI Building entry: src/index.tsx
@@ -8,11 +8,11 @@
 CLI Target: es6
 ESM Build start
 CJS Build start
-ESM dist/index.mjs 19.64 KB
-ESM ⚡️ Build success in 34ms
-CJS dist/index.js 22.16 KB
-CJS ⚡️ Build success in 35ms
+ESM dist/index.mjs 20.05 KB
+ESM ⚡️ Build success in 41ms
+CJS dist/index.js 22.58 KB
+CJS ⚡️ Build success in 42ms
 DTS Build start
-DTS ⚡️ Build success in 4427ms
-DTS dist/index.d.mts 103.73 KB
-DTS dist/index.d.ts  103.73 KB
+DTS ⚡️ Build success in 4546ms
+DTS dist/index.d.mts 103.69 KB
+DTS dist/index.d.ts  103.69 KB

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @dafaz-ui/react
 
+## 4.0.11
+
+### Patch Changes
+
+- fix ref to Radio field
+
+## 4.0.10
+
+### Patch Changes
+
+- fix key radio
+
 ## 4.0.9
 
 ### Patch Changes

package/dist/index.d.mts

@@ -663,14 +663,11 @@ interface CheckboxIUProps extends ComponentProps<typeof CheckBoxUI> {
     disabled?: boolean;
 }
 
-interface CheckboxProps {
+interface CheckboxProps extends CheckboxIUProps {
     id: string;
     label: string;
 }
-declare function CheckBox({ id, label, size, disabled, ...props }: CheckboxIUProps & CheckboxProps): react_jsx_runtime.JSX.Element;
-declare namespace CheckBox {
-    var displayName: string;
-}
+declare const CheckBox: react.ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
 
 declare const HeadingUI: _stitches_react_types_styled_component.StyledComponent<"h2", {
     mode?: "white" | "default" | undefined;

package/dist/index.d.ts

@@ -663,14 +663,11 @@ interface CheckboxIUProps extends ComponentProps<typeof CheckBoxUI> {
     disabled?: boolean;
 }
 
-interface CheckboxProps {
+interface CheckboxProps extends CheckboxIUProps {
     id: string;
     label: string;
 }
-declare function CheckBox({ id, label, size, disabled, ...props }: CheckboxIUProps & CheckboxProps): react_jsx_runtime.JSX.Element;
-declare namespace CheckBox {
-    var displayName: string;
-}
+declare const CheckBox: react.ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
 
 declare const HeadingUI: _stitches_react_types_styled_component.StyledComponent<"h2", {
     mode?: "white" | "default" | undefined;

package/dist/index.js

@@ -323,6 +323,9 @@ function Button(_a) {
 }
 Button.displayName = "Button";
 
+// src/components/CheckBox/index.tsx
+var import_react2 = require("react");
+
 // src/components/CheckBox/styles.ts
 var Checkbox = __toESM(require("@radix-ui/react-checkbox"));
 var CheckBoxUI = styled(Checkbox.Root, {
@@ -443,25 +446,46 @@ var Label = styled("label", {
 });
 
 // src/components/CheckBox/index.tsx
-var import_react2 = require("@phosphor-icons/react");
+var import_react3 = require("@phosphor-icons/react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
-function CheckBox(_a) {
-  var _b = _a, {
-    id,
-    label,
-    size,
-    disabled = false
-  } = _b, props = __objRest(_b, [
-    "id",
-    "label",
-    "size",
-    "disabled"
-  ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Label, { disabled, htmlFor: id, size, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CheckBoxUI, __spreadProps(__spreadValues({ disabled, id }, props), { size, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CheckBoxIndicator, { asChild: true, size, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react2.Check, { weight: "bold" }) }) })),
-    label
-  ] });
-}
+var CheckBox = (0, import_react2.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, {
+      id,
+      label,
+      size,
+      disabled = false,
+      checked,
+      onCheckedChange,
+      value
+    } = _b, props = __objRest(_b, [
+      "id",
+      "label",
+      "size",
+      "disabled",
+      "checked",
+      "onCheckedChange",
+      "value"
+    ]);
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Label, { disabled, htmlFor: id, size, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        CheckBoxUI,
+        __spreadProps(__spreadValues({
+          ref,
+          checked,
+          onCheckedChange,
+          disabled,
+          id,
+          size,
+          value
+        }, props), {
+          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CheckBoxIndicator, { asChild: true, size, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react3.Check, { weight: "bold" }) })
+        })
+      ),
+      label
+    ] });
+  }
+);
 CheckBox.displayName = "CheckBox";
 
 // src/components/Heading/styles.ts
@@ -524,7 +548,7 @@ var RadioUI = styled(RadioGroup.Root, {
 });
 
 // src/components/Radio/RadioItem/index.tsx
-var import_react3 = require("@phosphor-icons/react");
+var import_react4 = require("@phosphor-icons/react");
 
 // src/components/Radio/RadioItem/styles.ts
 var RadioGroup2 = __toESM(require("@radix-ui/react-radio-group"));
@@ -663,7 +687,7 @@ function RadioItem(_a) {
     "disabled"
   ]);
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(RadioItemContainer, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RadioItemUI, __spreadProps(__spreadValues({ disabled, id }, props), { size, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RadioIndicator, { asChild: true, size, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react3.Check, { weight: "bold" }) }) })),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RadioItemUI, __spreadProps(__spreadValues({ disabled, id }, props), { size, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RadioIndicator, { asChild: true, size, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react4.Check, { weight: "bold" }) }) })),
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Label2, { disabled, htmlFor: id, size, children: label })
   ] }, id);
 }
@@ -690,7 +714,8 @@ function Radio(_a) {
         value: item.value,
         size,
         disabled
-      }
+      },
+      item.id
     );
   }) }));
 }
@@ -762,7 +787,7 @@ var OptionUI = styled("option", {
 });
 
 // src/components/Select/index.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 function Select(_a) {
   var _b = _a, {
@@ -774,7 +799,7 @@ function Select(_a) {
     "placeholder",
     "items"
   ]);
-  const [value, setValue] = (0, import_react4.useState)("");
+  const [value, setValue] = (0, import_react5.useState)("");
   function handleSelect(event) {
     setValue(() => {
       return event.target.value;
@@ -880,7 +905,7 @@ function TextArea(_a) {
 TextArea.displayName = "TextArea";
 
 // src/components/TextInput/index.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 
 // src/components/TextInput/styles.ts
 var InputContainer = styled("div", {
@@ -945,7 +970,7 @@ var Sufix = styled("span", {
 
 // src/components/TextInput/index.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
-var TextInput = (0, import_react5.forwardRef)(
+var TextInput = (0, import_react6.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       withShadow = false,
@@ -958,7 +983,7 @@ var TextInput = (0, import_react5.forwardRef)(
       "requiredText",
       "id"
     ]);
-    const [hiddenOptional, setHiddenOptional] = (0, import_react5.useState)(required);
+    const [hiddenOptional, setHiddenOptional] = (0, import_react6.useState)(required);
     function handleOnChange(event) {
       if (!required) {
         if (event.target.value === "") {

package/dist/index.mjs

@@ -274,6 +274,9 @@ function Button(_a) {
 }
 Button.displayName = "Button";
 
+// src/components/CheckBox/index.tsx
+import { forwardRef } from "react";
+
 // src/components/CheckBox/styles.ts
 import * as Checkbox from "@radix-ui/react-checkbox";
 var CheckBoxUI = styled(Checkbox.Root, {
@@ -396,23 +399,44 @@ var Label = styled("label", {
 // src/components/CheckBox/index.tsx
 import { Check } from "@phosphor-icons/react";
 import { jsx as jsx3, jsxs } from "react/jsx-runtime";
-function CheckBox(_a) {
-  var _b = _a, {
-    id,
-    label,
-    size,
-    disabled = false
-  } = _b, props = __objRest(_b, [
-    "id",
-    "label",
-    "size",
-    "disabled"
-  ]);
-  return /* @__PURE__ */ jsxs(Label, { disabled, htmlFor: id, size, children: [
-    /* @__PURE__ */ jsx3(CheckBoxUI, __spreadProps(__spreadValues({ disabled, id }, props), { size, children: /* @__PURE__ */ jsx3(CheckBoxIndicator, { asChild: true, size, children: /* @__PURE__ */ jsx3(Check, { weight: "bold" }) }) })),
-    label
-  ] });
-}
+var CheckBox = forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      id,
+      label,
+      size,
+      disabled = false,
+      checked,
+      onCheckedChange,
+      value
+    } = _b, props = __objRest(_b, [
+      "id",
+      "label",
+      "size",
+      "disabled",
+      "checked",
+      "onCheckedChange",
+      "value"
+    ]);
+    return /* @__PURE__ */ jsxs(Label, { disabled, htmlFor: id, size, children: [
+      /* @__PURE__ */ jsx3(
+        CheckBoxUI,
+        __spreadProps(__spreadValues({
+          ref,
+          checked,
+          onCheckedChange,
+          disabled,
+          id,
+          size,
+          value
+        }, props), {
+          children: /* @__PURE__ */ jsx3(CheckBoxIndicator, { asChild: true, size, children: /* @__PURE__ */ jsx3(Check, { weight: "bold" }) })
+        })
+      ),
+      label
+    ] });
+  }
+);
 CheckBox.displayName = "CheckBox";
 
 // src/components/Heading/styles.ts
@@ -641,7 +665,8 @@ function Radio(_a) {
         value: item.value,
         size,
         disabled
-      }
+      },
+      item.id
     );
   }) }));
 }
@@ -832,7 +857,7 @@ TextArea.displayName = "TextArea";
 
 // src/components/TextInput/index.tsx
 import {
-  forwardRef,
+  forwardRef as forwardRef2,
   useState as useState2
 } from "react";
 
@@ -899,7 +924,7 @@ var Sufix = styled("span", {
 
 // src/components/TextInput/index.tsx
 import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
-var TextInput = forwardRef(
+var TextInput = forwardRef2(
   (_a, ref) => {
     var _b = _a, {
       withShadow = false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dafaz-ui/react",
-  "version": "4.0.9",
+  "version": "4.0.11",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

package/src/components/CheckBox/index.tsx

@@ -1,28 +1,49 @@
+import { forwardRef, type ElementRef } from 'react'
 import { CheckBoxIndicator, CheckBoxUI, Label, CheckboxIUProps } from './styles'
 import { Check } from '@phosphor-icons/react'
 
-interface CheckboxProps {
+interface CheckboxProps extends CheckboxIUProps {
   id: string
   label: string
 }
 
-export function CheckBox({
-  id,
-  label,
-  size,
-  disabled = false,
-  ...props
-}: CheckboxIUProps & CheckboxProps) {
-  return (
-    <Label disabled={disabled} htmlFor={id} size={size}>
-      <CheckBoxUI disabled={disabled} id={id} {...props} size={size}>
-        <CheckBoxIndicator asChild size={size}>
-          <Check weight="bold" />
-        </CheckBoxIndicator>
-      </CheckBoxUI>
-      {label}
-    </Label>
-  )
-}
+export const CheckBox = forwardRef<
+  ElementRef<typeof CheckBoxUI>,
+  CheckboxProps
+>(
+  (
+    {
+      id,
+      label,
+      size,
+      disabled = false,
+      checked,
+      onCheckedChange,
+      value,
+      ...props
+    }: CheckboxProps,
+    ref,
+  ) => {
+    return (
+      <Label disabled={disabled} htmlFor={id} size={size}>
+        <CheckBoxUI
+          ref={ref}
+          checked={checked}
+          onCheckedChange={onCheckedChange}
+          disabled={disabled}
+          id={id}
+          size={size}
+          value={value}
+          {...props}
+        >
+          <CheckBoxIndicator asChild size={size}>
+            <Check weight="bold" />
+          </CheckBoxIndicator>
+        </CheckBoxUI>
+        {label}
+      </Label>
+    )
+  },
+)
 
 CheckBox.displayName = 'CheckBox'

package/src/components/Radio/index.tsx

@@ -22,6 +22,7 @@ export function Radio({
       {items.map((item) => {
         return (
           <RadioItem
+            key={item.id}
             id={item.id}
             label={item.label}
             value={item.value}