@dafaz-ui/react 2.1.0 → 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,8 +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,
@@ -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: {
@@ -243,8 +288,24 @@ var Button = styled("button", {
   }
 });
 
-// src/components/Text.tsx
-var Text = styled("p", {
+// 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,
@@ -264,10 +325,155 @@ var Text = styled("p", {
     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 = {
@@ -117,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",
@@ -136,10 +182,6 @@ var Button = styled("button", {
   "&:disabled": {
     cursor: "not-allowed"
   },
-  svg: {
-    width: "$4",
-    height: "$4"
-  },
   variants: {
     variant: {
       primary: {
@@ -211,8 +253,24 @@ var Button = styled("button", {
   }
 });
 
-// src/components/Text.tsx
-var Text = styled("p", {
+// 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,
@@ -232,9 +290,157 @@ var Text = styled("p", {
     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.1.0",
+  "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
+}

package/src/components/Button/index.tsx

@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react'
+import { ButtonUI, ButtonUIProps } from './styles'
+
+interface ButtonProps {
+  children: ReactNode
+}
+
+export function Button({
+  children,
+  variant = 'primary',
+  size = 'md',
+  ...props
+}: ButtonUIProps & ButtonProps) {
+  return (
+    <ButtonUI variant={variant} size={size} {...props}>
+      {children}
+    </ButtonUI>
+  )
+}
+
+ButtonUI.displayName = 'Button'

package/src/components/{Button.tsx → Button/styles.ts}

@@ -1,9 +1,8 @@
-import type { ComponentProps } from '@stitches/react'
-import { styled } from '../styles'
-import type { ElementType } from 'react'
+import type { ComponentProps, ElementType } from 'react'
+import { styled } from '../../styles'
 
 /** Primary UI component for user interaction */
-export const Button = styled('button', {
+export const ButtonUI = styled('button', {
   all: 'unset',
   borderRadius: '$md',
   fontSize: '$md',
@@ -25,11 +24,6 @@ export const Button = styled('button', {
     cursor: 'not-allowed',
   },
 
-  svg: {
-    width: '$4',
-    height: '$4',
-  },
-
   variants: {
     variant: {
       primary: {
@@ -108,14 +102,12 @@ export const Button = styled('button', {
   },
 })
 
-export interface ButtonProps extends ComponentProps<typeof Button> {
+export interface ButtonUIProps extends ComponentProps<typeof ButtonUI> {
   as?: ElementType
   /** How large should the button be? */
   size?: 'sm' | 'md' | 'lg'
   /** Optional click handler */
   onClick?: () => void
-  /** Button contents */
-  label: string
   /** Button is disable? */
   disabled?: boolean
   //** Button UI mode */

package/src/components/Heading/index.tsx

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react'
+import { HeadingUI, HeadingUIProps } from './styles'
+
+interface HeadingProps {
+  children: ReactNode
+}
+
+export function Heading({ children, ...props }: HeadingUIProps & HeadingProps) {
+  return <HeadingUI {...props}>{children}</HeadingUI>
+}
+
+Heading.displayName = 'Heading'

package/src/components/Heading/styles.ts

@@ -0,0 +1,36 @@
+import { ComponentProps, ElementType } from 'react'
+import { styled } from '../../styles'
+
+export const 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',
+  },
+})
+
+export interface HeadingUIProps extends ComponentProps<typeof HeadingUI> {
+  as?: ElementType
+  size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl'
+  mode?: 'default' | 'white'
+}