@dafaz-ui/react 4.0.2 → 4.0.3

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @dafaz-ui/react@4.0.2 build
+> @dafaz-ui/react@4.0.3 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
+CJS dist/index.js 22.22 KB
+CJS ⚡️ Build success in 36ms
+ESM dist/index.mjs 19.70 KB
+ESM ⚡️ Build success in 36ms
 DTS Build start
-DTS ⚡️ Build success in 4507ms
+DTS ⚡️ Build success in 4361ms
 DTS dist/index.d.mts 103.71 KB
 DTS dist/index.d.ts  103.71 KB

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @dafaz-ui/react
 
+## 4.0.3
+
+### Patch Changes
+
+- add feat to select input component
+
 ## 4.0.2
 
 ### Patch Changes

package/dist/index.js

@@ -710,7 +710,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 +760,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 +772,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 +878,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 +943,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 +956,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

@@ -661,7 +661,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 +711,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 +723,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 +831,7 @@ TextArea.displayName = "TextArea";
 // src/components/TextInput/index.tsx
 import {
   forwardRef,
-  useState
+  useState as useState2
 } from "react";
 
 // src/components/TextInput/styles.ts
@@ -893,7 +910,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.3",
   "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/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,