@dafaz-ui/react 2.2.2 → 3.0.0

package/dist/index.mjs

@@ -162,6 +162,7 @@ function Box(_a) {
   var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
   return /* @__PURE__ */ jsx(BoxUI, __spreadProps(__spreadValues({}, props), { children }));
 }
+Box.displayName = "Box";
 
 // src/components/Button/styles.ts
 var ButtonUI = styled("button", {
@@ -269,41 +270,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
+import * as Checkbox from "@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
-import { jsx as jsx3 } from "react/jsx-runtime";
-function Text(_a) {
+// src/components/CheckBox/index.tsx
+import { Check } from "@phosphor-icons/react";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+function CheckBox(_a) {
   var _b = _a, {
-    children,
-    size = "md"
+    id,
+    label,
+    size
   } = _b, props = __objRest(_b, [
-    "children",
+    "id",
+    "label",
     "size"
   ]);
-  return /* @__PURE__ */ jsx3(TextUI, __spreadProps(__spreadValues({ size }, props), { children }));
+  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" }) }) })),
+    label
+  ] });
 }
-Text.displayName = "Text";
 
 // src/components/Heading/styles.ts
 var HeadingUI = styled("h2", {
@@ -341,6 +435,255 @@ function Heading(_a) {
 }
 Heading.displayName = "Heading";
 
+// src/components/Radio/styles.ts
+import * as RadioGroup from "@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
+import { Check as Check2 } from "@phosphor-icons/react";
+
+// src/components/Radio/RadioItem/styles.ts
+import * as RadioGroup2 from "@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
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+function RadioItem(_a) {
+  var _b = _a, {
+    label,
+    id,
+    size
+  } = _b, props = __objRest(_b, [
+    "label",
+    "id",
+    "size"
+  ]);
+  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 })
+  ] }, id);
+}
+
+// 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) => {
+    return /* @__PURE__ */ jsx6(
+      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
+import { jsx as jsx7 } from "react/jsx-runtime";
+function Text(_a) {
+  var _b = _a, {
+    children,
+    size = "md"
+  } = _b, props = __objRest(_b, [
+    "children",
+    "size"
+  ]);
+  return /* @__PURE__ */ jsx7(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
+import { jsx as jsx8 } 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 }));
+}
+TextArea.displayName = "TextArea";
+
 // src/components/TextInput/index.tsx
 import {
   forwardRef,
@@ -409,7 +752,7 @@ var Sufix = styled("span", {
 });
 
 // src/components/TextInput/index.tsx
-import { jsx as jsx5, jsxs } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
 var TextInput = forwardRef(
   (_a, ref) => {
     var _b = _a, {
@@ -431,18 +774,21 @@ var TextInput = forwardRef(
         }
       }
     }
-    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 })
+    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 })
     ] });
   }
 );
-TextInput.displayName = "Input";
+TextInput.displayName = "TextInput";
 export {
   Box,
   Button,
+  CheckBox,
   Heading,
+  Radio,
   Text,
+  TextArea,
   TextInput,
   config,
   createTheme,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dafaz-ui/react",
-  "version": "2.2.2",
+  "version": "3.0.0",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -26,6 +26,9 @@
     "typescript": "^5.6.3"
   },
   "dependencies": {
+    "@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"
   }
 }

package/src/components/Box/index.tsx

@@ -8,3 +8,5 @@ interface BoxProps {
 export function Box({ children, ...props }: BoxUIProps & BoxProps) {
   return <BoxUI {...props}>{children}</BoxUI>
 }
+
+Box.displayName = 'Box'

package/src/components/Box/styles.ts

@@ -1,3 +1,4 @@
+import type { CSS } from '@stitches/react'
 import { styled } from '../../styles'
 import type { ComponentProps, ElementType } from 'react'
 
@@ -32,4 +33,5 @@ export interface BoxUIProps extends ComponentProps<typeof BoxUI> {
   as?: ElementType
   stretch?: boolean
   dark?: boolean
+  css?: CSS
 }

package/src/components/CheckBox/index.tsx

@@ -0,0 +1,25 @@
+import { CheckBoxIndicator, CheckBoxUI, Label, CheckboxIUProps } from './styles'
+import { Check } from '@phosphor-icons/react'
+
+interface CheckboxProps {
+  id: string
+  label: string
+}
+
+export function CheckBox({
+  id,
+  label,
+  size,
+  ...props
+}: CheckboxIUProps & CheckboxProps) {
+  return (
+    <Label htmlFor={id} size={size}>
+      <CheckBoxUI id={id} {...props} size={size}>
+        <CheckBoxIndicator asChild size={size}>
+          <Check weight="bold" />
+        </CheckBoxIndicator>
+      </CheckBoxUI>
+      {label}
+    </Label>
+  )
+}

package/src/components/CheckBox/styles.ts

@@ -0,0 +1,128 @@
+import * as Checkbox from '@radix-ui/react-checkbox'
+import { styled, keyframes } from '../../styles'
+import type { ComponentProps } from 'react'
+
+export const 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',
+  },
+})
+
+const slideIn = keyframes({
+  from: { transform: 'translateY(-100%)' },
+  to: { transform: 'translateY(0)' },
+})
+
+const slideOut = keyframes({
+  from: { transform: 'translateY(0)' },
+  to: { transform: 'translateY(100%)' },
+})
+
+export const CheckBoxIndicator = styled(Checkbox.Indicator, {
+  color: '$white',
+
+  '&[data-state="checked"]': {
+    animation: `${slideIn} 200ms ease-out`,
+  },
+
+  '&[data-state="unchecked"]': {
+    animation: `${slideOut} 200ms ease-out`,
+  },
+
+  variants: {
+    size: {
+      lg: {
+        width: '$5',
+        height: '$5',
+      },
+      md: {
+        width: '$4',
+        height: '$4',
+      },
+      sm: {
+        width: '$3',
+        height: '$3',
+      },
+    },
+  },
+  defaultVariants: {
+    size: 'lg',
+  },
+})
+
+export const 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',
+  },
+})
+
+export interface CheckboxIUProps extends ComponentProps<typeof CheckBoxUI> {
+  size?: 'sm' | 'md' | 'lg'
+}

package/src/components/Radio/RadioItem/index.tsx

@@ -0,0 +1,32 @@
+import { Check } from '@phosphor-icons/react'
+import {
+  Label,
+  RadioIndicator,
+  RadioItemContainer,
+  RadioItemUI,
+  type RadioItemUIProps,
+} from './styles'
+
+interface RadioItemProps {
+  label: string
+}
+
+export function RadioItem({
+  label,
+  id,
+  size,
+  ...props
+}: RadioItemProps & RadioItemUIProps) {
+  return (
+    <RadioItemContainer key={id}>
+      <RadioItemUI id={id} {...props} size={size}>
+        <RadioIndicator asChild size={size}>
+          <Check weight="bold" />
+        </RadioIndicator>
+      </RadioItemUI>
+      <Label htmlFor={id} size={size}>
+        {label}
+      </Label>
+    </RadioItemContainer>
+  )
+}