@dafaz-ui/react 2.0.1 → 2.2.0

package/dist/index.js

@@ -20,6 +20,18 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -37,7 +49,11 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.tsx
 var src_exports = {};
 __export(src_exports, {
+  Box: () => Box,
   Button: () => Button,
+  Heading: () => Heading,
+  Text: () => Text,
+  TextInput: () => TextInput,
   config: () => config,
   createTheme: () => createTheme,
   css: () => css,
@@ -61,8 +77,7 @@ var colors = {
   dafaz200: "#52D058",
   dafaz400: "#2FC136",
   dafaz600: "#229E45",
-  dafaz800: "#2A6A2D",
-  teste: "#FFF"
+  dafaz800: "#2A6A2D"
 };
 var opacities = {
   opacity400: "0.4",
@@ -104,8 +119,8 @@ var fontSizes = {
   xxs: "0.5rem",
   xs: "0.625rem",
   sm: "0.75rem",
-  md: "0.875",
-  lg: "1rem",
+  md: "0.875rem",
+  lg: "1.0rem",
   xl: "1.25rem",
   "2xl": "2rem"
 };
@@ -149,8 +164,42 @@ var {
   }
 });
 
-// src/components/Button.tsx
-var Button = styled("button", {
+// src/components/Box/styles.ts
+var BoxUI = styled("div", {
+  padding: "$4",
+  variants: {
+    stretch: {
+      true: {
+        width: "100%"
+      },
+      false: {
+        width: "18.4375rem"
+      }
+    },
+    dark: {
+      true: {
+        background: "$gray800"
+      },
+      false: {
+        background: "transparent"
+      }
+    }
+  },
+  defaultVariants: {
+    stretch: false,
+    dark: false
+  }
+});
+
+// src/components/Box/index.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function Box(_a) {
+  var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BoxUI, __spreadProps(__spreadValues({}, props), { children }));
+}
+
+// src/components/Button/styles.ts
+var ButtonUI = styled("button", {
   all: "unset",
   borderRadius: "$md",
   fontSize: "$md",
@@ -168,10 +217,6 @@ var Button = styled("button", {
   "&:disabled": {
     cursor: "not-allowed"
   },
-  svg: {
-    width: "$4",
-    height: "$4"
-  },
   variants: {
     variant: {
       primary: {
@@ -211,21 +256,224 @@ var Button = styled("button", {
     },
     size: {
       sm: {
-        height: 38
+        height: 38,
+        fontSize: "$sm"
       },
       md: {
-        height: 46
+        height: 46,
+        fontSize: "$lg"
+      },
+      lg: {
+        height: 54,
+        fontSize: "$xl"
       }
+    },
+    flat: {
+      true: {
+        border: 0,
+        background: "transparent",
+        "&:disabled": {
+          color: "$gray200",
+          background: "transparent",
+          border: "none"
+        }
+      },
+      false: {}
     }
   },
   defaultVariants: {
     variant: "primary",
+    size: "md",
+    flat: false
+  }
+});
+
+// src/components/Button/index.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function Button(_a) {
+  var _b = _a, {
+    children,
+    variant = "primary",
+    size = "md"
+  } = _b, props = __objRest(_b, [
+    "children",
+    "variant",
+    "size"
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ButtonUI, __spreadProps(__spreadValues({ variant, size }, props), { children }));
+}
+ButtonUI.displayName = "Button";
+
+// 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_runtime3 = require("react/jsx-runtime");
+function Text(_a) {
+  var _b = _a, {
+    children,
+    size = "md"
+  } = _b, props = __objRest(_b, [
+    "children",
+    "size"
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TextUI, __spreadProps(__spreadValues({ size }, props), { children }));
+}
+Text.displayName = "Text";
+
+// src/components/Heading/styles.ts
+var HeadingUI = styled("h2", {
+  fontFamily: "$web",
+  lineHeight: "$shorter",
+  margin: 0,
+  variants: {
+    mode: {
+      default: {
+        color: "$dafaz400"
+      },
+      white: {
+        color: "$white"
+      }
+    },
+    size: {
+      sm: { fontSize: "$lg" },
+      md: { fontSize: "$xl" },
+      lg: { fontSize: "$2xl" },
+      xl: { fontSize: "3rem" },
+      "2xl": { fontSize: "4rem" }
+    }
+  },
+  defaultVariants: {
+    mode: "default",
+    size: "lg"
+  }
+});
+
+// src/components/Heading/index.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function Heading(_a) {
+  var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(HeadingUI, __spreadProps(__spreadValues({}, props), { children }));
+}
+Heading.displayName = "Heading";
+
+// src/components/TextInput/index.tsx
+var import_react2 = require("react");
+
+// src/components/TextInput/styles.ts
+var InputContainer = styled("div", {
+  margin: 0,
+  backgroundColor: "transparent",
+  borderBottom: "2px solid $dafaz600",
+  borderRadius: "$md",
+  boxSizing: "border-box",
+  display: "flex",
+  alignItems: "baseline",
+  padding: "$1 $2",
+  transition: "border 0.2s linear",
+  "&:has(input:focus)": {
+    borderBottom: "2px solid $dafaz400"
+  },
+  "&:has(input:disabled)": {
+    opacity: 0.5,
+    cursor: "not-allowed"
+  },
+  variants: {
+    withShadow: {
+      true: {
+        boxShadow: "inset 0 2.5rem #444"
+      }
+    }
+  },
+  defaultVariants: {
+    withShadow: false
+  }
+});
+var InputUI = styled("input", {
+  margin: 0,
+  fontFamily: "$app",
+  fontSize: "$xl",
+  color: "$white",
+  backgroundColor: "transparent",
+  border: "none",
+  "&::-ms-reveal": {
+    filter: "invert(100%)"
+  },
+  "&::placeholder": {
+    fontWeight: "$regular",
+    color: "$white",
+    opacity: 0.75
+  },
+  "&:focus": {
+    outline: 0
+  }
+});
+var Sufix = styled("span", {
+  fontFamily: "$app",
+  fontSize: "$sm",
+  color: "$white",
+  fontStyle: "italic",
+  "&:has(input:focus)": {
+    visibility: "hidden"
+  }
+});
+
+// src/components/TextInput/index.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var TextInput = (0, import_react2.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, {
+      withShadow = false,
+      required = true,
+      requiredText = "Opcional"
+    } = _b, props = __objRest(_b, [
+      "withShadow",
+      "required",
+      "requiredText"
+    ]);
+    const [hiddenOptional, setHiddenOptional] = (0, import_react2.useState)(required);
+    function handleOnChange(event) {
+      if (!required) {
+        if (event.target.value === "") {
+          setHiddenOptional(false);
+        } else {
+          setHiddenOptional(true);
+        }
+      }
+    }
+    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 })
+    ] });
+  }
+);
+TextInput.displayName = "Input";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  Box,
   Button,
+  Heading,
+  Text,
+  TextInput,
   config,
   createTheme,
   css,

package/dist/index.mjs

@@ -17,6 +17,18 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 
 // ../tokens/dist/index.mjs
 var colors = {
@@ -30,8 +42,7 @@ var colors = {
   dafaz200: "#52D058",
   dafaz400: "#2FC136",
   dafaz600: "#229E45",
-  dafaz800: "#2A6A2D",
-  teste: "#FFF"
+  dafaz800: "#2A6A2D"
 };
 var opacities = {
   opacity400: "0.4",
@@ -73,8 +84,8 @@ var fontSizes = {
   xxs: "0.5rem",
   xs: "0.625rem",
   sm: "0.75rem",
-  md: "0.875",
-  lg: "1rem",
+  md: "0.875rem",
+  lg: "1.0rem",
   xl: "1.25rem",
   "2xl": "2rem"
 };
@@ -118,8 +129,42 @@ var {
   }
 });
 
-// src/components/Button.tsx
-var Button = styled("button", {
+// src/components/Box/styles.ts
+var BoxUI = styled("div", {
+  padding: "$4",
+  variants: {
+    stretch: {
+      true: {
+        width: "100%"
+      },
+      false: {
+        width: "18.4375rem"
+      }
+    },
+    dark: {
+      true: {
+        background: "$gray800"
+      },
+      false: {
+        background: "transparent"
+      }
+    }
+  },
+  defaultVariants: {
+    stretch: false,
+    dark: false
+  }
+});
+
+// src/components/Box/index.tsx
+import { jsx } from "react/jsx-runtime";
+function Box(_a) {
+  var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
+  return /* @__PURE__ */ jsx(BoxUI, __spreadProps(__spreadValues({}, props), { children }));
+}
+
+// src/components/Button/styles.ts
+var ButtonUI = styled("button", {
   all: "unset",
   borderRadius: "$md",
   fontSize: "$md",
@@ -137,10 +182,6 @@ var Button = styled("button", {
   "&:disabled": {
     cursor: "not-allowed"
   },
-  svg: {
-    width: "$4",
-    height: "$4"
-  },
   variants: {
     variant: {
       primary: {
@@ -180,20 +221,226 @@ var Button = styled("button", {
     },
     size: {
       sm: {
-        height: 38
+        height: 38,
+        fontSize: "$sm"
       },
       md: {
-        height: 46
+        height: 46,
+        fontSize: "$lg"
+      },
+      lg: {
+        height: 54,
+        fontSize: "$xl"
       }
+    },
+    flat: {
+      true: {
+        border: 0,
+        background: "transparent",
+        "&:disabled": {
+          color: "$gray200",
+          background: "transparent",
+          border: "none"
+        }
+      },
+      false: {}
     }
   },
   defaultVariants: {
     variant: "primary",
+    size: "md",
+    flat: false
+  }
+});
+
+// src/components/Button/index.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function Button(_a) {
+  var _b = _a, {
+    children,
+    variant = "primary",
+    size = "md"
+  } = _b, props = __objRest(_b, [
+    "children",
+    "variant",
+    "size"
+  ]);
+  return /* @__PURE__ */ jsx2(ButtonUI, __spreadProps(__spreadValues({ variant, size }, props), { children }));
+}
+ButtonUI.displayName = "Button";
+
+// 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
+import { jsx as jsx3 } from "react/jsx-runtime";
+function Text(_a) {
+  var _b = _a, {
+    children,
+    size = "md"
+  } = _b, props = __objRest(_b, [
+    "children",
+    "size"
+  ]);
+  return /* @__PURE__ */ jsx3(TextUI, __spreadProps(__spreadValues({ size }, props), { children }));
+}
+Text.displayName = "Text";
+
+// src/components/Heading/styles.ts
+var HeadingUI = styled("h2", {
+  fontFamily: "$web",
+  lineHeight: "$shorter",
+  margin: 0,
+  variants: {
+    mode: {
+      default: {
+        color: "$dafaz400"
+      },
+      white: {
+        color: "$white"
+      }
+    },
+    size: {
+      sm: { fontSize: "$lg" },
+      md: { fontSize: "$xl" },
+      lg: { fontSize: "$2xl" },
+      xl: { fontSize: "3rem" },
+      "2xl": { fontSize: "4rem" }
+    }
+  },
+  defaultVariants: {
+    mode: "default",
+    size: "lg"
+  }
+});
+
+// src/components/Heading/index.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function Heading(_a) {
+  var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
+  return /* @__PURE__ */ jsx4(HeadingUI, __spreadProps(__spreadValues({}, props), { children }));
+}
+Heading.displayName = "Heading";
+
+// src/components/TextInput/index.tsx
+import {
+  forwardRef,
+  useState
+} from "react";
+
+// src/components/TextInput/styles.ts
+var InputContainer = styled("div", {
+  margin: 0,
+  backgroundColor: "transparent",
+  borderBottom: "2px solid $dafaz600",
+  borderRadius: "$md",
+  boxSizing: "border-box",
+  display: "flex",
+  alignItems: "baseline",
+  padding: "$1 $2",
+  transition: "border 0.2s linear",
+  "&:has(input:focus)": {
+    borderBottom: "2px solid $dafaz400"
+  },
+  "&:has(input:disabled)": {
+    opacity: 0.5,
+    cursor: "not-allowed"
+  },
+  variants: {
+    withShadow: {
+      true: {
+        boxShadow: "inset 0 2.5rem #444"
+      }
+    }
+  },
+  defaultVariants: {
+    withShadow: false
+  }
+});
+var InputUI = styled("input", {
+  margin: 0,
+  fontFamily: "$app",
+  fontSize: "$xl",
+  color: "$white",
+  backgroundColor: "transparent",
+  border: "none",
+  "&::-ms-reveal": {
+    filter: "invert(100%)"
+  },
+  "&::placeholder": {
+    fontWeight: "$regular",
+    color: "$white",
+    opacity: 0.75
+  },
+  "&:focus": {
+    outline: 0
+  }
+});
+var Sufix = styled("span", {
+  fontFamily: "$app",
+  fontSize: "$sm",
+  color: "$white",
+  fontStyle: "italic",
+  "&:has(input:focus)": {
+    visibility: "hidden"
+  }
+});
+
+// src/components/TextInput/index.tsx
+import { jsx as jsx5, jsxs } from "react/jsx-runtime";
+var TextInput = forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      withShadow = false,
+      required = true,
+      requiredText = "Opcional"
+    } = _b, props = __objRest(_b, [
+      "withShadow",
+      "required",
+      "requiredText"
+    ]);
+    const [hiddenOptional, setHiddenOptional] = useState(required);
+    function handleOnChange(event) {
+      if (!required) {
+        if (event.target.value === "") {
+          setHiddenOptional(false);
+        } else {
+          setHiddenOptional(true);
+        }
+      }
+    }
+    return /* @__PURE__ */ jsxs(InputContainer, { withShadow, children: [
+      /* @__PURE__ */ jsx5(InputUI, __spreadValues({ ref, onChange: handleOnChange }, props)),
+      !hiddenOptional && /* @__PURE__ */ jsx5(Sufix, { style: { marginLeft: `-${requiredText.length / 2}rem` }, children: requiredText })
+    ] });
+  }
+);
+TextInput.displayName = "Input";
 export {
+  Box,
   Button,
+  Heading,
+  Text,
+  TextInput,
   config,
   createTheme,
   css,

package/package.json

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

package/src/components/Box/index.tsx

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react'
+import { BoxUI, BoxUIProps } from './styles'
+
+interface BoxProps {
+  children: ReactNode
+}
+
+export function Box({ children, ...props }: BoxUIProps & BoxProps) {
+  return <BoxUI {...props}>{children}</BoxUI>
+}

package/src/components/Box/styles.ts

@@ -0,0 +1,35 @@
+import { styled } from '../../styles'
+import type { ComponentProps, ElementType } from 'react'
+
+export const BoxUI = styled('div', {
+  padding: '$4',
+
+  variants: {
+    stretch: {
+      true: {
+        width: '100%',
+      },
+      false: {
+        width: '18.4375rem',
+      },
+    },
+    dark: {
+      true: {
+        background: '$gray800',
+      },
+      false: {
+        background: 'transparent',
+      },
+    },
+  },
+  defaultVariants: {
+    stretch: false,
+    dark: false,
+  },
+})
+
+export interface BoxUIProps extends ComponentProps<typeof BoxUI> {
+  as?: ElementType
+  stretch?: boolean
+  dark?: boolean
+}