@dafaz-ui/react 4.0.2 → 4.0.4

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @dafaz-ui/react@4.0.2 build
+> @dafaz-ui/react@4.0.4 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.39 KB
-ESM ⚡️ Build success in 38ms
-CJS dist/index.js 21.90 KB
-CJS ⚡️ Build success in 38ms
+ESM dist/index.mjs 19.57 KB
+ESM ⚡️ Build success in 41ms
+CJS dist/index.js 22.09 KB
+CJS ⚡️ Build success in 41ms
 DTS Build start
-DTS ⚡️ Build success in 4507ms
-DTS dist/index.d.mts 103.71 KB
-DTS dist/index.d.ts  103.71 KB
+DTS ⚡️ Build success in 4529ms
+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.4
+
+### Patch Changes
+
+- Change feat radio and select field
+
+## 4.0.3
+
+### Patch Changes
+
+- add feat to select input component
+
 ## 4.0.2
 
 ### Patch Changes

package/dist/index.d.mts

@@ -1097,7 +1097,6 @@ interface Item$1 {
     id: string;
     label: string;
     value: string;
-    disabled: boolean;
 }
 interface RadioGroupProps extends RadioUIProps {
     items: Item$1[];

package/dist/index.d.ts

@@ -1097,7 +1097,6 @@ interface Item$1 {
     id: string;
     label: string;
     value: string;
-    disabled: boolean;
 }
 interface RadioGroupProps extends RadioUIProps {
     items: Item$1[];

package/dist/index.js

@@ -331,17 +331,18 @@ var CheckBoxUI = styled(Checkbox.Root, {
   display: "flex",
   justifyContent: "center",
   alignItems: "center",
-  borderBottom: "2px solid $dafaz600",
-  transition: "border 0.1s linear",
+  transition: "border 0.2s linear",
+  border: "2px solid $gray400",
   '&:focus,&[data-state="checked"]': {
     backgroundColor: "$dafaz600",
     borderColor: "$dafaz600"
   },
   '&[data-state="unchecked"]': {
-    backgroundColor: "$gray800"
+    backgroundColor: "$gray400",
+    opacity: 0.9
   },
   "&:hover": {
-    borderColor: "$dafaz600"
+    border: "2px solid $dafaz600"
   },
   "&:disabled": {
     opacity: 0.5,
@@ -350,24 +351,21 @@ var CheckBoxUI = styled(Checkbox.Root, {
   variants: {
     size: {
       lg: {
-        width: "$7",
-        height: "$7",
-        borderBottom: "2px solid $dafaz600"
+        width: "$6",
+        height: "$6"
       },
       md: {
         width: "$5",
-        height: "$5",
-        borderBottom: "1px solid $dafaz600"
+        height: "$5"
       },
       sm: {
         width: "$5",
-        height: "$5",
-        borderBottom: "0.5px solid $dafaz600"
+        height: "$5"
       }
     }
   },
   defaultVariants: {
-    size: "md"
+    size: "lg"
   }
 });
 var slideIn = keyframes({
@@ -403,7 +401,7 @@ var CheckBoxIndicator = styled(Checkbox.Indicator, {
     }
   },
   defaultVariants: {
-    size: "md"
+    size: "lg"
   }
 });
 var Label = styled("label", {
@@ -413,7 +411,7 @@ var Label = styled("label", {
   fontWeight: "$regular",
   cursor: "pointer",
   display: "flex",
-  gap: "$2",
+  gap: "$3",
   alignItems: "center",
   variants: {
     disabled: {
@@ -436,7 +434,7 @@ var Label = styled("label", {
   },
   defaultVariants: {
     disabled: false,
-    size: "md"
+    size: "lg"
   }
 });
 
@@ -517,7 +515,7 @@ var RadioUI = styled(RadioGroup.Root, {
     }
   },
   defaultVariants: {
-    size: "md"
+    size: "lg"
   }
 });
 
@@ -529,7 +527,7 @@ var RadioGroup2 = __toESM(require("@radix-ui/react-radio-group"));
 var RadioItemContainer = styled("div", {
   display: "flex",
   alignItems: "center",
-  gap: "$2"
+  gap: "$3"
 });
 var RadioItemUI = styled(RadioGroup2.Item, {
   all: "unset",
@@ -541,8 +539,7 @@ var RadioItemUI = styled(RadioGroup2.Item, {
   display: "flex",
   justifyContent: "center",
   alignItems: "center",
-  borderBottom: "2px solid $dafaz600",
-  transition: "border 0.1s linear",
+  transition: "border 0.2s linear",
   "&:disabled": {
     cursor: "not-allowed"
   },
@@ -551,7 +548,8 @@ var RadioItemUI = styled(RadioGroup2.Item, {
     borderColor: "$dafaz600"
   },
   '&[data-state="unchecked"]': {
-    backgroundColor: "$gray800"
+    backgroundColor: "$gray400",
+    border: "2px solid $gray400"
   },
   "&:hover": {
     borderColor: "$dafaz600"
@@ -559,8 +557,8 @@ var RadioItemUI = styled(RadioGroup2.Item, {
   variants: {
     size: {
       lg: {
-        width: "$7",
-        height: "$7",
+        width: "$6",
+        height: "$6",
         borderBottom: "2px solid $dafaz600"
       },
       md: {
@@ -576,7 +574,7 @@ var RadioItemUI = styled(RadioGroup2.Item, {
     }
   },
   defaultVariants: {
-    size: "md"
+    size: "lg"
   }
 });
 var slideIn2 = keyframes({
@@ -612,7 +610,7 @@ var RadioIndicator = styled(RadioGroup2.Indicator, {
     }
   },
   defaultVariants: {
-    size: "md"
+    size: "lg"
   }
 });
 var Label2 = styled("label", {
@@ -642,7 +640,7 @@ var Label2 = styled("label", {
   },
   defaultVariants: {
     disabled: false,
-    size: "md"
+    size: "lg"
   }
 });
 
@@ -710,7 +708,7 @@ var SelectUI = styled("select", {
   transition: "border 0.2s linear",
   width: "100%",
   margin: 0,
-  padding: "$1 $2",
+  padding: "$1 $1",
   "&:focus": {
     outline: 0,
     borderBottom: "2px solid $dafaz400"
@@ -760,6 +758,7 @@ var OptionUI = styled("option", {
 });
 
 // src/components/Select/index.tsx
+var import_react4 = require("react");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 function Select(_a) {
   var _b = _a, {
@@ -771,12 +770,28 @@ function Select(_a) {
     "placeholder",
     "items"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(SelectUI, __spreadProps(__spreadValues({ size }, props), { defaultValue: "", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(OptionUI, { className: "placeholder", value: "", children: placeholder }),
-    items.map((item) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(OptionUI, { value: item.value, children: item.label }, item.id);
+  const [value, setValue] = (0, import_react4.useState)("");
+  function handleSelect(event) {
+    setValue(() => {
+      return event.target.value;
+    });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    SelectUI,
+    __spreadProps(__spreadValues({
+      size
+    }, props), {
+      value,
+      onChange: handleSelect,
+      style: { opacity: value != "" ? 1 : 0.75 },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(OptionUI, { className: "placeholder", value: "", children: placeholder }),
+        items.map((item) => {
+          return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(OptionUI, { value: item.value, children: item.label }, item.id);
+        })
+      ]
     })
-  ] }));
+  );
 }
 Select.displayName = "Select";
 
@@ -861,7 +876,7 @@ function TextArea(_a) {
 TextArea.displayName = "TextArea";
 
 // src/components/TextInput/index.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 
 // src/components/TextInput/styles.ts
 var InputContainer = styled("div", {
@@ -926,7 +941,7 @@ var Sufix = styled("span", {
 
 // src/components/TextInput/index.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
-var TextInput = (0, import_react4.forwardRef)(
+var TextInput = (0, import_react5.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       withShadow = false,
@@ -939,7 +954,7 @@ var TextInput = (0, import_react4.forwardRef)(
       "requiredText",
       "id"
     ]);
-    const [hiddenOptional, setHiddenOptional] = (0, import_react4.useState)(required);
+    const [hiddenOptional, setHiddenOptional] = (0, import_react5.useState)(required);
     function handleOnChange(event) {
       if (!required) {
         if (event.target.value === "") {

package/dist/index.mjs

@@ -282,17 +282,18 @@ var CheckBoxUI = styled(Checkbox.Root, {
   display: "flex",
   justifyContent: "center",
   alignItems: "center",
-  borderBottom: "2px solid $dafaz600",
-  transition: "border 0.1s linear",
+  transition: "border 0.2s linear",
+  border: "2px solid $gray400",
   '&:focus,&[data-state="checked"]': {
     backgroundColor: "$dafaz600",
     borderColor: "$dafaz600"
   },
   '&[data-state="unchecked"]': {
-    backgroundColor: "$gray800"
+    backgroundColor: "$gray400",
+    opacity: 0.9
   },
   "&:hover": {
-    borderColor: "$dafaz600"
+    border: "2px solid $dafaz600"
   },
   "&:disabled": {
     opacity: 0.5,
@@ -301,24 +302,21 @@ var CheckBoxUI = styled(Checkbox.Root, {
   variants: {
     size: {
       lg: {
-        width: "$7",
-        height: "$7",
-        borderBottom: "2px solid $dafaz600"
+        width: "$6",
+        height: "$6"
       },
       md: {
         width: "$5",
-        height: "$5",
-        borderBottom: "1px solid $dafaz600"
+        height: "$5"
       },
       sm: {
         width: "$5",
-        height: "$5",
-        borderBottom: "0.5px solid $dafaz600"
+        height: "$5"
       }
     }
   },
   defaultVariants: {
-    size: "md"
+    size: "lg"
   }
 });
 var slideIn = keyframes({
@@ -354,7 +352,7 @@ var CheckBoxIndicator = styled(Checkbox.Indicator, {
     }
   },
   defaultVariants: {
-    size: "md"
+    size: "lg"
   }
 });
 var Label = styled("label", {
@@ -364,7 +362,7 @@ var Label = styled("label", {
   fontWeight: "$regular",
   cursor: "pointer",
   display: "flex",
-  gap: "$2",
+  gap: "$3",
   alignItems: "center",
   variants: {
     disabled: {
@@ -387,7 +385,7 @@ var Label = styled("label", {
   },
   defaultVariants: {
     disabled: false,
-    size: "md"
+    size: "lg"
   }
 });
 
@@ -468,7 +466,7 @@ var RadioUI = styled(RadioGroup.Root, {
     }
   },
   defaultVariants: {
-    size: "md"
+    size: "lg"
   }
 });
 
@@ -480,7 +478,7 @@ import * as RadioGroup2 from "@radix-ui/react-radio-group";
 var RadioItemContainer = styled("div", {
   display: "flex",
   alignItems: "center",
-  gap: "$2"
+  gap: "$3"
 });
 var RadioItemUI = styled(RadioGroup2.Item, {
   all: "unset",
@@ -492,8 +490,7 @@ var RadioItemUI = styled(RadioGroup2.Item, {
   display: "flex",
   justifyContent: "center",
   alignItems: "center",
-  borderBottom: "2px solid $dafaz600",
-  transition: "border 0.1s linear",
+  transition: "border 0.2s linear",
   "&:disabled": {
     cursor: "not-allowed"
   },
@@ -502,7 +499,8 @@ var RadioItemUI = styled(RadioGroup2.Item, {
     borderColor: "$dafaz600"
   },
   '&[data-state="unchecked"]': {
-    backgroundColor: "$gray800"
+    backgroundColor: "$gray400",
+    border: "2px solid $gray400"
   },
   "&:hover": {
     borderColor: "$dafaz600"
@@ -510,8 +508,8 @@ var RadioItemUI = styled(RadioGroup2.Item, {
   variants: {
     size: {
       lg: {
-        width: "$7",
-        height: "$7",
+        width: "$6",
+        height: "$6",
         borderBottom: "2px solid $dafaz600"
       },
       md: {
@@ -527,7 +525,7 @@ var RadioItemUI = styled(RadioGroup2.Item, {
     }
   },
   defaultVariants: {
-    size: "md"
+    size: "lg"
   }
 });
 var slideIn2 = keyframes({
@@ -563,7 +561,7 @@ var RadioIndicator = styled(RadioGroup2.Indicator, {
     }
   },
   defaultVariants: {
-    size: "md"
+    size: "lg"
   }
 });
 var Label2 = styled("label", {
@@ -593,7 +591,7 @@ var Label2 = styled("label", {
   },
   defaultVariants: {
     disabled: false,
-    size: "md"
+    size: "lg"
   }
 });
 
@@ -661,7 +659,7 @@ var SelectUI = styled("select", {
   transition: "border 0.2s linear",
   width: "100%",
   margin: 0,
-  padding: "$1 $2",
+  padding: "$1 $1",
   "&:focus": {
     outline: 0,
     borderBottom: "2px solid $dafaz400"
@@ -711,6 +709,7 @@ var OptionUI = styled("option", {
 });
 
 // src/components/Select/index.tsx
+import { useState } from "react";
 import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
 function Select(_a) {
   var _b = _a, {
@@ -722,12 +721,28 @@ function Select(_a) {
     "placeholder",
     "items"
   ]);
-  return /* @__PURE__ */ jsxs3(SelectUI, __spreadProps(__spreadValues({ size }, props), { defaultValue: "", children: [
-    /* @__PURE__ */ jsx7(OptionUI, { className: "placeholder", value: "", children: placeholder }),
-    items.map((item) => {
-      return /* @__PURE__ */ jsx7(OptionUI, { value: item.value, children: item.label }, item.id);
+  const [value, setValue] = useState("");
+  function handleSelect(event) {
+    setValue(() => {
+      return event.target.value;
+    });
+  }
+  return /* @__PURE__ */ jsxs3(
+    SelectUI,
+    __spreadProps(__spreadValues({
+      size
+    }, props), {
+      value,
+      onChange: handleSelect,
+      style: { opacity: value != "" ? 1 : 0.75 },
+      children: [
+        /* @__PURE__ */ jsx7(OptionUI, { className: "placeholder", value: "", children: placeholder }),
+        items.map((item) => {
+          return /* @__PURE__ */ jsx7(OptionUI, { value: item.value, children: item.label }, item.id);
+        })
+      ]
     })
-  ] }));
+  );
 }
 Select.displayName = "Select";
 
@@ -814,7 +829,7 @@ TextArea.displayName = "TextArea";
 // src/components/TextInput/index.tsx
 import {
   forwardRef,
-  useState
+  useState as useState2
 } from "react";
 
 // src/components/TextInput/styles.ts
@@ -893,7 +908,7 @@ var TextInput = forwardRef(
       "requiredText",
       "id"
     ]);
-    const [hiddenOptional, setHiddenOptional] = useState(required);
+    const [hiddenOptional, setHiddenOptional] = useState2(required);
     function handleOnChange(event) {
       if (!required) {
         if (event.target.value === "") {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dafaz-ui/react",
-  "version": "4.0.2",
+  "version": "4.0.4",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -21,7 +21,6 @@
     "@types/react-dom": "^18.3.1",
     "eslint-config-prettier": "^9.1.0",
     "prettier": "^3.3.3",
-    "react": "^18.3.1",
     "tsup": "^8.3.5",
     "typescript": "^5.6.3"
   },
@@ -29,6 +28,7 @@
     "@phosphor-icons/react": "^2.1.7",
     "@radix-ui/react-checkbox": "^1.1.2",
     "@radix-ui/react-radio-group": "^1.2.1",
-    "@stitches/react": "^1.2.8"
+    "@stitches/react": "^1.2.8",
+    "react": "^18.3.1"
   }
 }

package/src/components/CheckBox/styles.ts

@@ -12,8 +12,8 @@ export const CheckBoxUI = styled(Checkbox.Root, {
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
-  borderBottom: '2px solid $dafaz600',
-  transition: 'border 0.1s linear',
+  transition: 'border 0.2s linear',
+  border: '2px solid $gray400',
 
   '&:focus,&[data-state="checked"]': {
     backgroundColor: '$dafaz600',
@@ -21,11 +21,12 @@ export const CheckBoxUI = styled(Checkbox.Root, {
   },
 
   '&[data-state="unchecked"]': {
-    backgroundColor: '$gray800',
+    backgroundColor: '$gray400',
+    opacity: 0.9,
   },
 
   '&:hover': {
-    borderColor: '$dafaz600',
+    border: '2px solid $dafaz600',
   },
 
   '&:disabled': {
@@ -36,24 +37,21 @@ export const CheckBoxUI = styled(Checkbox.Root, {
   variants: {
     size: {
       lg: {
-        width: '$7',
-        height: '$7',
-        borderBottom: '2px solid $dafaz600',
+        width: '$6',
+        height: '$6',
       },
       md: {
         width: '$5',
         height: '$5',
-        borderBottom: '1px solid $dafaz600',
       },
       sm: {
         width: '$5',
         height: '$5',
-        borderBottom: '0.5px solid $dafaz600',
       },
     },
   },
   defaultVariants: {
-    size: 'md',
+    size: 'lg',
   },
 })
 
@@ -95,7 +93,7 @@ export const CheckBoxIndicator = styled(Checkbox.Indicator, {
     },
   },
   defaultVariants: {
-    size: 'md',
+    size: 'lg',
   },
 })
 
@@ -107,7 +105,7 @@ export const Label = styled('label', {
   cursor: 'pointer',
 
   display: 'flex',
-  gap: '$2',
+  gap: '$3',
   alignItems: 'center',
 
   variants: {
@@ -131,7 +129,7 @@ export const Label = styled('label', {
   },
   defaultVariants: {
     disabled: false,
-    size: 'md',
+    size: 'lg',
   },
 })
 

package/src/components/Radio/RadioItem/styles.ts

@@ -5,7 +5,7 @@ import * as RadioGroup from '@radix-ui/react-radio-group'
 export const RadioItemContainer = styled('div', {
   display: 'flex',
   alignItems: 'center',
-  gap: '$2',
+  gap: '$3',
 })
 
 export const RadioItemUI = styled(RadioGroup.Item, {
@@ -18,8 +18,7 @@ export const RadioItemUI = styled(RadioGroup.Item, {
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
-  borderBottom: '2px solid $dafaz600',
-  transition: 'border 0.1s linear',
+  transition: 'border 0.2s linear',
 
   '&:disabled': {
     cursor: 'not-allowed',
@@ -31,7 +30,8 @@ export const RadioItemUI = styled(RadioGroup.Item, {
   },
 
   '&[data-state="unchecked"]': {
-    backgroundColor: '$gray800',
+    backgroundColor: '$gray400',
+    border: '2px solid $gray400',
   },
 
   '&:hover': {
@@ -41,8 +41,8 @@ export const RadioItemUI = styled(RadioGroup.Item, {
   variants: {
     size: {
       lg: {
-        width: '$7',
-        height: '$7',
+        width: '$6',
+        height: '$6',
         borderBottom: '2px solid $dafaz600',
       },
       md: {
@@ -58,7 +58,7 @@ export const RadioItemUI = styled(RadioGroup.Item, {
     },
   },
   defaultVariants: {
-    size: 'md',
+    size: 'lg',
   },
 })
 
@@ -100,7 +100,7 @@ export const RadioIndicator = styled(RadioGroup.Indicator, {
     },
   },
   defaultVariants: {
-    size: 'md',
+    size: 'lg',
   },
 })
 
@@ -132,7 +132,7 @@ export const Label = styled('label', {
   },
   defaultVariants: {
     disabled: false,
-    size: 'md',
+    size: 'lg',
   },
 })
 

package/src/components/Radio/index.tsx

@@ -5,7 +5,6 @@ interface Item {
   id: string
   label: string
   value: string
-  disabled: boolean
 }
 
 interface RadioGroupProps extends RadioUIProps {

package/src/components/Radio/styles.ts

@@ -21,7 +21,7 @@ export const RadioUI = styled(RadioGroup.Root, {
     },
   },
   defaultVariants: {
-    size: 'md',
+    size: 'lg',
   },
 })
 

package/src/components/Select/index.tsx

@@ -1,5 +1,7 @@
 import { SelectUI, SelectUIProps, OptionUI } from './styles'
 
+import { ChangeEvent, useState } from 'react'
+
 interface Item {
   id: string
   label: string
@@ -17,8 +19,22 @@ export function Select({
   items,
   ...props
 }: SelectUIProps & SelectProps) {
+  const [value, setValue] = useState('')
+
+  function handleSelect(event: ChangeEvent<HTMLSelectElement>) {
+    setValue(() => {
+      return event.target.value
+    })
+  }
+
   return (
-    <SelectUI size={size} {...props} defaultValue="">
+    <SelectUI
+      size={size}
+      {...props}
+      value={value}
+      onChange={handleSelect}
+      style={{ opacity: value != '' ? 1 : 0.75 }}
+    >
       <OptionUI className="placeholder" value="">
         {placeholder}
       </OptionUI>

package/src/components/Select/styles.ts

@@ -20,7 +20,7 @@ export const SelectUI = styled('select', {
 
   width: '100%',
   margin: 0,
-  padding: '$1 $2',
+  padding: '$1 $1',
 
   '&:focus': {
     outline: 0,