@dafaz-ui/react 3.0.5 → 4.0.1

package/dist/index.js

@@ -64,6 +64,7 @@ __export(src_exports, {
   CheckBox: () => CheckBox,
   Heading: () => Heading,
   Radio: () => Radio,
+  Select: () => Select,
   Text: () => Text,
   TextArea: () => TextArea,
   TextInput: () => TextInput,
@@ -342,6 +343,10 @@ var CheckBoxUI = styled(Checkbox.Root, {
   "&:hover": {
     borderColor: "$dafaz600"
   },
+  "&:disabled": {
+    opacity: 0.5,
+    cursor: "not-allowed"
+  },
   variants: {
     size: {
       lg: {
@@ -411,6 +416,12 @@ var Label = styled("label", {
   gap: "$2",
   alignItems: "center",
   variants: {
+    disabled: {
+      true: {
+        opacity: 0.5,
+        cursor: "not-allowed"
+      }
+    },
     size: {
       lg: {
         fontSize: "$xl"
@@ -424,6 +435,7 @@ var Label = styled("label", {
     }
   },
   defaultVariants: {
+    disabled: false,
     size: "md"
   }
 });
@@ -435,14 +447,16 @@ function CheckBox(_a) {
   var _b = _a, {
     id,
     label,
-    size
+    size,
+    disabled = false
   } = _b, props = __objRest(_b, [
     "id",
     "label",
-    "size"
+    "size",
+    "disabled"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Label, { htmlFor: id, size, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CheckBoxUI, __spreadProps(__spreadValues({ 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" }) }) })),
+  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
   ] });
 }
@@ -491,6 +505,10 @@ var RadioUI = styled(RadioGroup.Root, {
   display: "flex",
   flexDirection: "column",
   gap: "$4",
+  "&:disabled": {
+    opacity: 0.5,
+    cursor: "not-allowed"
+  },
   variants: {
     size: {
       lg: {},
@@ -525,6 +543,9 @@ var RadioItemUI = styled(RadioGroup2.Item, {
   alignItems: "center",
   borderBottom: "2px solid $dafaz600",
   transition: "border 0.1s linear",
+  "&:disabled": {
+    cursor: "not-allowed"
+  },
   '&:focus,&[data-state="checked"]': {
     backgroundColor: "$dafaz600",
     borderColor: "$dafaz600"
@@ -601,6 +622,12 @@ var Label2 = styled("label", {
   fontWeight: "$regular",
   cursor: "pointer",
   variants: {
+    disabled: {
+      true: {
+        opacity: 0.5,
+        cursor: "not-allowed"
+      }
+    },
     size: {
       lg: {
         fontSize: "$xl"
@@ -614,6 +641,7 @@ var Label2 = styled("label", {
     }
   },
   defaultVariants: {
+    disabled: false,
     size: "md"
   }
 });
@@ -624,15 +652,17 @@ function RadioItem(_a) {
   var _b = _a, {
     label,
     id,
-    size
+    size,
+    disabled = false
   } = _b, props = __objRest(_b, [
     "label",
     "id",
-    "size"
+    "size",
+    "disabled"
   ]);
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(RadioItemContainer, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RadioItemUI, __spreadProps(__spreadValues({ 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)(Label2, { htmlFor: id, size, children: label })
+    /* @__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)(Label2, { disabled, htmlFor: id, size, children: label })
   ] }, id);
 }
 RadioItem.displayName = "RadioItem";
@@ -640,21 +670,116 @@ RadioItem.displayName = "RadioItem";
 // src/components/Radio/index.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
 function Radio(_a) {
-  var _b = _a, { items, size } = _b, props = __objRest(_b, ["items", "size"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(RadioUI, __spreadProps(__spreadValues({}, props), { children: items.map((item) => {
+  var _b = _a, {
+    items,
+    size,
+    disabled = false
+  } = _b, props = __objRest(_b, [
+    "items",
+    "size",
+    "disabled"
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(RadioUI, __spreadProps(__spreadValues({ disabled }, props), { children: items.map((item) => {
     return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       RadioItem,
       {
         id: item.id,
         label: item.label,
         value: item.value,
-        size
+        size,
+        disabled
       }
     );
   }) }));
 }
 Radio.displayName = "Radio";
 
+// src/components/Select/styles.ts
+var SelectUI = styled("select", {
+  gap: "$2",
+  overflow: "hidden",
+  background: "transparent",
+  border: "none",
+  fontFamily: "$app",
+  color: "$white",
+  fontWeight: "$regular",
+  cursor: "pointer",
+  boxSizing: "border-box",
+  borderRadius: "$md",
+  borderBottom: "2px solid $dafaz600",
+  transition: "border 0.2s linear",
+  width: "100%",
+  margin: 0,
+  padding: "$1 $2",
+  "&:focus": {
+    outline: 0,
+    borderBottom: "2px solid $dafaz400"
+  },
+  "&:disabled": {
+    opacity: 0.5,
+    cursor: "not-allowed"
+  },
+  variants: {
+    size: {
+      lg: {
+        fontSize: "$xl"
+      },
+      md: {
+        fontSize: "$lg"
+      },
+      sm: {
+        fontSize: "$md"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var OptionUI = styled("option", {
+  backgroundColor: "$gray800",
+  "&.placeholder": {
+    backgroundColor: "$gray400"
+  },
+  variants: {
+    size: {
+      lg: {
+        fontSize: "$xl"
+      },
+      md: {
+        fontSize: "$lg"
+      },
+      sm: {
+        fontSize: "$md"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+
+// src/components/Select/index.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function Select(_a) {
+  var _b = _a, {
+    size,
+    placeholder,
+    items
+  } = _b, props = __objRest(_b, [
+    "size",
+    "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);
+    })
+  ] }));
+}
+Select.displayName = "Select";
+
 // src/components/Text/styles.ts
 var TextUI = styled("p", {
   fontFamily: "$web",
@@ -678,7 +803,7 @@ var TextUI = styled("p", {
 });
 
 // src/components/Text/index.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function Text(_a) {
   var _b = _a, {
     children,
@@ -687,7 +812,7 @@ function Text(_a) {
     "children",
     "size"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TextUI, __spreadProps(__spreadValues({ size }, props), { children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(TextUI, __spreadProps(__spreadValues({ size }, props), { children }));
 }
 Text.displayName = "Text";
 
@@ -716,7 +841,7 @@ var TextAreaUI = styled("textarea", {
     cursor: "not-allowed"
   },
   "&::placeholder": {
-    fontSize: "$xl",
+    fontSize: "$lg",
     fontWeight: "$regular",
     color: "$white",
     opacity: 0.75
@@ -724,14 +849,14 @@ var TextAreaUI = styled("textarea", {
 });
 
 // src/components/TextArea/index.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function TextArea(_a) {
   var _b = _a, {
     children
   } = _b, props = __objRest(_b, [
     "children"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(TextAreaUI, __spreadProps(__spreadValues({ rows: 3 }, props), { children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TextAreaUI, __spreadProps(__spreadValues({ rows: 3 }, props), { children }));
 }
 TextArea.displayName = "TextArea";
 
@@ -800,17 +925,19 @@ var Sufix = styled("span", {
 });
 
 // src/components/TextInput/index.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var TextInput = (0, import_react4.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       withShadow = false,
       required = true,
-      requiredText = "Opcional"
+      requiredText = "Opcional",
+      id
     } = _b, props = __objRest(_b, [
       "withShadow",
       "required",
-      "requiredText"
+      "requiredText",
+      "id"
     ]);
     const [hiddenOptional, setHiddenOptional] = (0, import_react4.useState)(required);
     function handleOnChange(event) {
@@ -822,9 +949,9 @@ var TextInput = (0, import_react4.forwardRef)(
         }
       }
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(InputContainer, { withShadow, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(InputUI, __spreadValues({ ref, onChange: handleOnChange }, props)),
-      !hiddenOptional && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Sufix, { style: { marginLeft: `-${requiredText.length / 2}rem` }, children: requiredText })
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(InputContainer, { withShadow, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(InputUI, __spreadValues({ id, ref, onChange: handleOnChange }, props)),
+      !hiddenOptional && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Sufix, { style: { marginLeft: `-${requiredText.length / 2}rem` }, children: requiredText })
     ] });
   }
 );
@@ -836,6 +963,7 @@ TextInput.displayName = "TextInput";
   CheckBox,
   Heading,
   Radio,
+  Select,
   Text,
   TextArea,
   TextInput,

package/dist/index.mjs

@@ -294,6 +294,10 @@ var CheckBoxUI = styled(Checkbox.Root, {
   "&:hover": {
     borderColor: "$dafaz600"
   },
+  "&:disabled": {
+    opacity: 0.5,
+    cursor: "not-allowed"
+  },
   variants: {
     size: {
       lg: {
@@ -363,6 +367,12 @@ var Label = styled("label", {
   gap: "$2",
   alignItems: "center",
   variants: {
+    disabled: {
+      true: {
+        opacity: 0.5,
+        cursor: "not-allowed"
+      }
+    },
     size: {
       lg: {
         fontSize: "$xl"
@@ -376,6 +386,7 @@ var Label = styled("label", {
     }
   },
   defaultVariants: {
+    disabled: false,
     size: "md"
   }
 });
@@ -387,14 +398,16 @@ function CheckBox(_a) {
   var _b = _a, {
     id,
     label,
-    size
+    size,
+    disabled = false
   } = _b, props = __objRest(_b, [
     "id",
     "label",
-    "size"
+    "size",
+    "disabled"
   ]);
-  return /* @__PURE__ */ jsxs(Label, { htmlFor: id, size, children: [
-    /* @__PURE__ */ jsx3(CheckBoxUI, __spreadProps(__spreadValues({ id }, props), { size, children: /* @__PURE__ */ jsx3(CheckBoxIndicator, { asChild: true, size, children: /* @__PURE__ */ jsx3(Check, { weight: "bold" }) }) })),
+  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
   ] });
 }
@@ -443,6 +456,10 @@ var RadioUI = styled(RadioGroup.Root, {
   display: "flex",
   flexDirection: "column",
   gap: "$4",
+  "&:disabled": {
+    opacity: 0.5,
+    cursor: "not-allowed"
+  },
   variants: {
     size: {
       lg: {},
@@ -477,6 +494,9 @@ var RadioItemUI = styled(RadioGroup2.Item, {
   alignItems: "center",
   borderBottom: "2px solid $dafaz600",
   transition: "border 0.1s linear",
+  "&:disabled": {
+    cursor: "not-allowed"
+  },
   '&:focus,&[data-state="checked"]': {
     backgroundColor: "$dafaz600",
     borderColor: "$dafaz600"
@@ -553,6 +573,12 @@ var Label2 = styled("label", {
   fontWeight: "$regular",
   cursor: "pointer",
   variants: {
+    disabled: {
+      true: {
+        opacity: 0.5,
+        cursor: "not-allowed"
+      }
+    },
     size: {
       lg: {
         fontSize: "$xl"
@@ -566,6 +592,7 @@ var Label2 = styled("label", {
     }
   },
   defaultVariants: {
+    disabled: false,
     size: "md"
   }
 });
@@ -576,15 +603,17 @@ function RadioItem(_a) {
   var _b = _a, {
     label,
     id,
-    size
+    size,
+    disabled = false
   } = _b, props = __objRest(_b, [
     "label",
     "id",
-    "size"
+    "size",
+    "disabled"
   ]);
   return /* @__PURE__ */ jsxs2(RadioItemContainer, { children: [
-    /* @__PURE__ */ jsx5(RadioItemUI, __spreadProps(__spreadValues({ id }, props), { size, children: /* @__PURE__ */ jsx5(RadioIndicator, { asChild: true, size, children: /* @__PURE__ */ jsx5(Check2, { weight: "bold" }) }) })),
-    /* @__PURE__ */ jsx5(Label2, { htmlFor: id, size, children: label })
+    /* @__PURE__ */ jsx5(RadioItemUI, __spreadProps(__spreadValues({ disabled, id }, props), { size, children: /* @__PURE__ */ jsx5(RadioIndicator, { asChild: true, size, children: /* @__PURE__ */ jsx5(Check2, { weight: "bold" }) }) })),
+    /* @__PURE__ */ jsx5(Label2, { disabled, htmlFor: id, size, children: label })
   ] }, id);
 }
 RadioItem.displayName = "RadioItem";
@@ -592,21 +621,116 @@ RadioItem.displayName = "RadioItem";
 // src/components/Radio/index.tsx
 import { jsx as jsx6 } from "react/jsx-runtime";
 function Radio(_a) {
-  var _b = _a, { items, size } = _b, props = __objRest(_b, ["items", "size"]);
-  return /* @__PURE__ */ jsx6(RadioUI, __spreadProps(__spreadValues({}, props), { children: items.map((item) => {
+  var _b = _a, {
+    items,
+    size,
+    disabled = false
+  } = _b, props = __objRest(_b, [
+    "items",
+    "size",
+    "disabled"
+  ]);
+  return /* @__PURE__ */ jsx6(RadioUI, __spreadProps(__spreadValues({ disabled }, props), { children: items.map((item) => {
     return /* @__PURE__ */ jsx6(
       RadioItem,
       {
         id: item.id,
         label: item.label,
         value: item.value,
-        size
+        size,
+        disabled
       }
     );
   }) }));
 }
 Radio.displayName = "Radio";
 
+// src/components/Select/styles.ts
+var SelectUI = styled("select", {
+  gap: "$2",
+  overflow: "hidden",
+  background: "transparent",
+  border: "none",
+  fontFamily: "$app",
+  color: "$white",
+  fontWeight: "$regular",
+  cursor: "pointer",
+  boxSizing: "border-box",
+  borderRadius: "$md",
+  borderBottom: "2px solid $dafaz600",
+  transition: "border 0.2s linear",
+  width: "100%",
+  margin: 0,
+  padding: "$1 $2",
+  "&:focus": {
+    outline: 0,
+    borderBottom: "2px solid $dafaz400"
+  },
+  "&:disabled": {
+    opacity: 0.5,
+    cursor: "not-allowed"
+  },
+  variants: {
+    size: {
+      lg: {
+        fontSize: "$xl"
+      },
+      md: {
+        fontSize: "$lg"
+      },
+      sm: {
+        fontSize: "$md"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var OptionUI = styled("option", {
+  backgroundColor: "$gray800",
+  "&.placeholder": {
+    backgroundColor: "$gray400"
+  },
+  variants: {
+    size: {
+      lg: {
+        fontSize: "$xl"
+      },
+      md: {
+        fontSize: "$lg"
+      },
+      sm: {
+        fontSize: "$md"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+
+// src/components/Select/index.tsx
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+function Select(_a) {
+  var _b = _a, {
+    size,
+    placeholder,
+    items
+  } = _b, props = __objRest(_b, [
+    "size",
+    "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);
+    })
+  ] }));
+}
+Select.displayName = "Select";
+
 // src/components/Text/styles.ts
 var TextUI = styled("p", {
   fontFamily: "$web",
@@ -630,7 +754,7 @@ var TextUI = styled("p", {
 });
 
 // src/components/Text/index.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 function Text(_a) {
   var _b = _a, {
     children,
@@ -639,7 +763,7 @@ function Text(_a) {
     "children",
     "size"
   ]);
-  return /* @__PURE__ */ jsx7(TextUI, __spreadProps(__spreadValues({ size }, props), { children }));
+  return /* @__PURE__ */ jsx8(TextUI, __spreadProps(__spreadValues({ size }, props), { children }));
 }
 Text.displayName = "Text";
 
@@ -668,7 +792,7 @@ var TextAreaUI = styled("textarea", {
     cursor: "not-allowed"
   },
   "&::placeholder": {
-    fontSize: "$xl",
+    fontSize: "$lg",
     fontWeight: "$regular",
     color: "$white",
     opacity: 0.75
@@ -676,14 +800,14 @@ var TextAreaUI = styled("textarea", {
 });
 
 // src/components/TextArea/index.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 function TextArea(_a) {
   var _b = _a, {
     children
   } = _b, props = __objRest(_b, [
     "children"
   ]);
-  return /* @__PURE__ */ jsx8(TextAreaUI, __spreadProps(__spreadValues({ rows: 3 }, props), { children }));
+  return /* @__PURE__ */ jsx9(TextAreaUI, __spreadProps(__spreadValues({ rows: 3 }, props), { children }));
 }
 TextArea.displayName = "TextArea";
 
@@ -755,17 +879,19 @@ var Sufix = styled("span", {
 });
 
 // src/components/TextInput/index.tsx
-import { jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
 var TextInput = forwardRef(
   (_a, ref) => {
     var _b = _a, {
       withShadow = false,
       required = true,
-      requiredText = "Opcional"
+      requiredText = "Opcional",
+      id
     } = _b, props = __objRest(_b, [
       "withShadow",
       "required",
-      "requiredText"
+      "requiredText",
+      "id"
     ]);
     const [hiddenOptional, setHiddenOptional] = useState(required);
     function handleOnChange(event) {
@@ -777,9 +903,9 @@ var TextInput = forwardRef(
         }
       }
     }
-    return /* @__PURE__ */ jsxs3(InputContainer, { withShadow, children: [
-      /* @__PURE__ */ jsx9(InputUI, __spreadValues({ ref, onChange: handleOnChange }, props)),
-      !hiddenOptional && /* @__PURE__ */ jsx9(Sufix, { style: { marginLeft: `-${requiredText.length / 2}rem` }, children: requiredText })
+    return /* @__PURE__ */ jsxs4(InputContainer, { withShadow, children: [
+      /* @__PURE__ */ jsx10(InputUI, __spreadValues({ id, ref, onChange: handleOnChange }, props)),
+      !hiddenOptional && /* @__PURE__ */ jsx10(Sufix, { style: { marginLeft: `-${requiredText.length / 2}rem` }, children: requiredText })
     ] });
   }
 );
@@ -790,6 +916,7 @@ export {
   CheckBox,
   Heading,
   Radio,
+  Select,
   Text,
   TextArea,
   TextInput,

package/package.json

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

package/src/components/CheckBox/index.tsx

@@ -10,11 +10,12 @@ export function CheckBox({
   id,
   label,
   size,
+  disabled = false,
   ...props
 }: CheckboxIUProps & CheckboxProps) {
   return (
-    <Label htmlFor={id} size={size}>
-      <CheckBoxUI id={id} {...props} size={size}>
+    <Label disabled={disabled} htmlFor={id} size={size}>
+      <CheckBoxUI disabled={disabled} id={id} {...props} size={size}>
         <CheckBoxIndicator asChild size={size}>
           <Check weight="bold" />
         </CheckBoxIndicator>