@dafaz-ui/react 2.2.1 → 3.0.0

package/dist/index.js

@@ -1,10 +1,12 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
@@ -44,6 +46,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.tsx
@@ -51,8 +61,11 @@ var src_exports = {};
 __export(src_exports, {
   Box: () => Box,
   Button: () => Button,
+  CheckBox: () => CheckBox,
   Heading: () => Heading,
+  Radio: () => Radio,
   Text: () => Text,
+  TextArea: () => TextArea,
   TextInput: () => TextInput,
   config: () => config,
   createTheme: () => createTheme,
@@ -197,6 +210,7 @@ function Box(_a) {
   var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BoxUI, __spreadProps(__spreadValues({}, props), { children }));
 }
+Box.displayName = "Box";
 
 // src/components/Button/styles.ts
 var ButtonUI = styled("button", {
@@ -304,41 +318,134 @@ function Button(_a) {
 }
 ButtonUI.displayName = "Button";
 
-// src/components/Text/styles.ts
-var TextUI = styled("p", {
-  fontFamily: "$web",
-  lineHeight: "$base",
-  margin: 0,
+// src/components/CheckBox/styles.ts
+var Checkbox = __toESM(require("@radix-ui/react-checkbox"));
+var CheckBoxUI = styled(Checkbox.Root, {
+  all: "unset",
+  borderRadius: "$md",
+  lineHeight: 0,
+  cursor: "pointer",
+  overflow: "hidden",
+  boxSizing: "border-box",
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  borderBottom: "2px solid $dafaz600",
+  transition: "border 0.1s linear",
+  '&:focus,&[data-state="checked"]': {
+    backgroundColor: "$dafaz600",
+    borderColor: "$dafaz600"
+  },
+  '&[data-state="unchecked"]': {
+    backgroundColor: "$gray800"
+  },
+  "&:hover": {
+    borderColor: "$dafaz600"
+  },
+  variants: {
+    size: {
+      lg: {
+        width: "$7",
+        height: "$7",
+        borderBottom: "2px solid $dafaz600"
+      },
+      md: {
+        width: "$5",
+        height: "$5",
+        borderBottom: "1px solid $dafaz600"
+      },
+      sm: {
+        width: "$5",
+        height: "$5",
+        borderBottom: "0.5px solid $dafaz600"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "lg"
+  }
+});
+var slideIn = keyframes({
+  from: { transform: "translateY(-100%)" },
+  to: { transform: "translateY(0)" }
+});
+var slideOut = keyframes({
+  from: { transform: "translateY(0)" },
+  to: { transform: "translateY(100%)" }
+});
+var CheckBoxIndicator = styled(Checkbox.Indicator, {
   color: "$white",
+  '&[data-state="checked"]': {
+    animation: `${slideIn} 200ms ease-out`
+  },
+  '&[data-state="unchecked"]': {
+    animation: `${slideOut} 200ms ease-out`
+  },
   variants: {
     size: {
-      xxs: { fontSize: "$xxs" },
-      xs: { fontSize: "$xs" },
-      sm: { fontSize: "$sm" },
-      md: { fontSize: "$md" },
-      lg: { fontSize: "$lg" },
-      xl: { fontSize: "$xl" },
-      "2xl": { fontSize: "$2xl" }
+      lg: {
+        width: "$5",
+        height: "$5"
+      },
+      md: {
+        width: "$4",
+        height: "$4"
+      },
+      sm: {
+        width: "$3",
+        height: "$3"
+      }
     }
   },
   defaultVariants: {
-    size: "md"
+    size: "lg"
+  }
+});
+var Label = styled("label", {
+  fontFamily: "$app",
+  lineHeight: 0,
+  color: "$white",
+  fontWeight: "$regular",
+  cursor: "pointer",
+  display: "flex",
+  gap: "$2",
+  alignItems: "center",
+  variants: {
+    size: {
+      lg: {
+        fontSize: "$xl"
+      },
+      md: {
+        fontSize: "$lg"
+      },
+      sm: {
+        fontSize: "$md"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "lg"
   }
 });
 
-// src/components/Text/index.tsx
+// src/components/CheckBox/index.tsx
+var import_react2 = require("@phosphor-icons/react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
-function Text(_a) {
+function CheckBox(_a) {
   var _b = _a, {
-    children,
-    size = "md"
+    id,
+    label,
+    size
   } = _b, props = __objRest(_b, [
-    "children",
+    "id",
+    "label",
     "size"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TextUI, __spreadProps(__spreadValues({ size }, props), { children }));
+  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" }) }) })),
+    label
+  ] });
 }
-Text.displayName = "Text";
 
 // src/components/Heading/styles.ts
 var HeadingUI = styled("h2", {
@@ -376,8 +483,257 @@ function Heading(_a) {
 }
 Heading.displayName = "Heading";
 
+// src/components/Radio/styles.ts
+var RadioGroup = __toESM(require("@radix-ui/react-radio-group"));
+var RadioUI = styled(RadioGroup.Root, {
+  all: "unset",
+  display: "flex",
+  flexDirection: "column",
+  gap: "$4",
+  variants: {
+    size: {
+      lg: {},
+      md: {},
+      sm: {}
+    }
+  },
+  defaultVariants: {
+    size: "lg"
+  }
+});
+
+// src/components/Radio/RadioItem/index.tsx
+var import_react3 = require("@phosphor-icons/react");
+
+// src/components/Radio/RadioItem/styles.ts
+var RadioGroup2 = __toESM(require("@radix-ui/react-radio-group"));
+var RadioItemContainer = styled("div", {
+  display: "flex",
+  alignItems: "center",
+  gap: "$2"
+});
+var RadioItemUI = styled(RadioGroup2.Item, {
+  all: "unset",
+  borderRadius: "$full",
+  lineHeight: 0,
+  cursor: "pointer",
+  overflow: "hidden",
+  boxSizing: "border-box",
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  borderBottom: "2px solid $dafaz600",
+  transition: "border 0.1s linear",
+  '&:focus,&[data-state="checked"]': {
+    backgroundColor: "$dafaz600",
+    borderColor: "$dafaz600"
+  },
+  '&[data-state="unchecked"]': {
+    backgroundColor: "$gray800"
+  },
+  "&:hover": {
+    borderColor: "$dafaz600"
+  },
+  variants: {
+    size: {
+      lg: {
+        width: "$7",
+        height: "$7",
+        borderBottom: "2px solid $dafaz600"
+      },
+      md: {
+        width: "$5",
+        height: "$5",
+        borderBottom: "1px solid $dafaz600"
+      },
+      sm: {
+        width: "$5",
+        height: "$5",
+        borderBottom: "0.5px solid $dafaz600"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "lg"
+  }
+});
+var slideIn2 = keyframes({
+  from: { transform: "translateY(-100%)" },
+  to: { transform: "translateY(0)" }
+});
+var slideOut2 = keyframes({
+  from: { transform: "translateY(0)" },
+  to: { transform: "translateY(100%)" }
+});
+var RadioIndicator = styled(RadioGroup2.Indicator, {
+  color: "$white",
+  '&[data-state="checked"]': {
+    animation: `${slideIn2} 200ms ease-out`
+  },
+  '&[data-state="unchecked"]': {
+    animation: `${slideOut2} 200ms ease-out`
+  },
+  variants: {
+    size: {
+      lg: {
+        width: "$5",
+        height: "$5"
+      },
+      md: {
+        width: "$4",
+        height: "$4"
+      },
+      sm: {
+        width: "$3",
+        height: "$3"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "lg"
+  }
+});
+var Label2 = styled("label", {
+  fontFamily: "$app",
+  lineHeight: 0,
+  color: "$white",
+  fontWeight: "$regular",
+  cursor: "pointer",
+  variants: {
+    size: {
+      lg: {
+        fontSize: "$xl"
+      },
+      md: {
+        fontSize: "$lg"
+      },
+      sm: {
+        fontSize: "$md"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "lg"
+  }
+});
+
+// src/components/Radio/RadioItem/index.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function RadioItem(_a) {
+  var _b = _a, {
+    label,
+    id,
+    size
+  } = _b, props = __objRest(_b, [
+    "label",
+    "id",
+    "size"
+  ]);
+  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 })
+  ] }, id);
+}
+
+// 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) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      RadioItem,
+      {
+        id: item.id,
+        label: item.label,
+        value: item.value,
+        size
+      }
+    );
+  }) }));
+}
+
+// src/components/Text/styles.ts
+var TextUI = styled("p", {
+  fontFamily: "$web",
+  lineHeight: "$base",
+  margin: 0,
+  color: "$white",
+  variants: {
+    size: {
+      xxs: { fontSize: "$xxs" },
+      xs: { fontSize: "$xs" },
+      sm: { fontSize: "$sm" },
+      md: { fontSize: "$md" },
+      lg: { fontSize: "$lg" },
+      xl: { fontSize: "$xl" },
+      "2xl": { fontSize: "$2xl" }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+
+// src/components/Text/index.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function Text(_a) {
+  var _b = _a, {
+    children,
+    size = "md"
+  } = _b, props = __objRest(_b, [
+    "children",
+    "size"
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TextUI, __spreadProps(__spreadValues({ size }, props), { children }));
+}
+Text.displayName = "Text";
+
+// src/components/TextArea/styles.ts
+var TextAreaUI = styled("textarea", {
+  fontFamily: "$app",
+  fontSize: "$lg",
+  color: "$white",
+  fontWeight: "$regular",
+  resize: "vertical",
+  border: "0.7px solid $gray400",
+  margin: 0,
+  backgroundColor: "transparent",
+  borderBottom: "2px solid $dafaz600",
+  borderRadius: "$md",
+  boxSizing: "border-box",
+  display: "flex",
+  alignItems: "baseline",
+  width: "100%",
+  padding: "$1 $2",
+  "&:focus": {
+    outline: 0
+  },
+  "&:disabled": {
+    opacity: 0.5,
+    cursor: "not-allowed"
+  },
+  "&::placeholder": {
+    fontSize: "$xl",
+    fontWeight: "$regular",
+    color: "$white",
+    opacity: 0.75
+  }
+});
+
+// src/components/TextArea/index.tsx
+var import_jsx_runtime8 = 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 }));
+}
+TextArea.displayName = "TextArea";
+
 // src/components/TextInput/index.tsx
-var import_react2 = require("react");
+var import_react4 = require("react");
 
 // src/components/TextInput/styles.ts
 var InputContainer = styled("div", {
@@ -388,7 +744,7 @@ var InputContainer = styled("div", {
   boxSizing: "border-box",
   display: "flex",
   alignItems: "baseline",
-  padding: "$1 $2",
+  width: "100%",
   transition: "border 0.2s linear",
   "&:has(input:focus)": {
     borderBottom: "2px solid $dafaz400"
@@ -415,6 +771,8 @@ var InputUI = styled("input", {
   color: "$white",
   backgroundColor: "transparent",
   border: "none",
+  width: "100%",
+  padding: "$1 $2",
   "&::-ms-reveal": {
     filter: "invert(100%)"
   },
@@ -432,14 +790,15 @@ var Sufix = styled("span", {
   fontSize: "$sm",
   color: "$white",
   fontStyle: "italic",
+  marginRight: "$2",
   "&:has(input:focus)": {
     visibility: "hidden"
   }
 });
 
 // src/components/TextInput/index.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var TextInput = (0, import_react2.forwardRef)(
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var TextInput = (0, import_react4.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       withShadow = false,
@@ -450,7 +809,7 @@ var TextInput = (0, import_react2.forwardRef)(
       "required",
       "requiredText"
     ]);
-    const [hiddenOptional, setHiddenOptional] = (0, import_react2.useState)(required);
+    const [hiddenOptional, setHiddenOptional] = (0, import_react4.useState)(required);
     function handleOnChange(event) {
       if (!required) {
         if (event.target.value === "") {
@@ -460,19 +819,22 @@ var TextInput = (0, import_react2.forwardRef)(
         }
       }
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(InputContainer, { withShadow, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(InputUI, __spreadValues({ ref, onChange: handleOnChange }, props)),
-      !hiddenOptional && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Sufix, { style: { marginLeft: `-${requiredText.length / 2}rem` }, children: requiredText })
+    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 })
     ] });
   }
 );
-TextInput.displayName = "Input";
+TextInput.displayName = "TextInput";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Box,
   Button,
+  CheckBox,
   Heading,
+  Radio,
   Text,
+  TextArea,
   TextInput,
   config,
   createTheme,