@beryl-ui/react 2.1.0

package/dist/index.mjs

@@ -0,0 +1,485 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+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;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  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;
+};
+
+// src/components/Avatar/index.tsx
+import { User } from "phosphor-react";
+
+// src/components/Avatar/styles.ts
+import * as Avatar from "@radix-ui/react-avatar";
+import styled from "styled-components";
+var AvatarContainer = styled(Avatar.Root)`
+  border-radius: ${({ theme: theme2 }) => theme2.radii.full};
+  display: inline-block;
+  width: ${({ theme: theme2 }) => theme2.space[12]};
+  height: ${({ theme: theme2 }) => theme2.space[12]};
+  overflow: hidden;
+`;
+var AvatarImage = styled(Avatar.Image)`
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: inherit;
+`;
+var AvatarFallback = styled(Avatar.Fallback)`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: ${({ theme: theme2 }) => theme2.colors.gray600};
+  color: ${({ theme: theme2 }) => theme2.colors.gray800};
+
+  svg {
+    width: ${({ theme: theme2 }) => theme2.space[6]};
+    height: ${({ theme: theme2 }) => theme2.space[6]};
+  }
+`;
+
+// src/components/Avatar/index.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function Avatar2(props) {
+  return /* @__PURE__ */ jsxs(AvatarContainer, { children: [
+    /* @__PURE__ */ jsx(AvatarImage, __spreadValues({}, props)),
+    /* @__PURE__ */ jsx(AvatarFallback, { delayMs: 600, children: /* @__PURE__ */ jsx(User, {}) })
+  ] });
+}
+Avatar2.displayName = "Avatar";
+
+// src/components/Box/styles.ts
+import { styled as styled2 } from "styled-components";
+var BoxContainer = styled2.div`
+  padding: ${({ theme: theme2 }) => theme2.space[4]};
+  border-radius: ${({ theme: theme2 }) => theme2.radii.md};
+  background-color: ${({ theme: theme2 }) => theme2.colors.gray800};
+  border: 1px solid ${({ theme: theme2 }) => theme2.colors.gray600};
+`;
+
+// src/components/Box/index.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function Box(props) {
+  return /* @__PURE__ */ jsx2(BoxContainer, __spreadValues({}, props));
+}
+Box.displayName = "Box";
+
+// src/components/Button/styles.ts
+import { css, styled as styled3 } from "styled-components";
+var ButtonContainer = styled3.button`
+  all: unset;
+  box-sizing: border-box;
+
+  font-family: ${({ theme: theme2 }) => theme2.fonts.default};
+  font-size: ${({ theme: theme2 }) => theme2.fontSizes.sm};
+  font-weight: ${({ theme: theme2 }) => theme2.fontWeights.medium};
+  text-align: center;
+  border-radius: ${({ theme: theme2 }) => theme2.radii.sm};
+  padding: 0 ${({ theme: theme2 }) => theme2.space[4]};
+  min-width: 120px;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: ${({ theme: theme2 }) => theme2.space[2]};
+
+  cursor: pointer;
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+
+  svg {
+    width: ${({ theme: theme2 }) => theme2.space[4]};
+    height: ${({ theme: theme2 }) => theme2.space[4]};
+  }
+
+  ${({ variant = "primary", theme: theme2 }) => {
+  switch (variant) {
+    case "primary":
+      return css`
+          color: ${theme2.colors.white};
+          background: ${theme2.colors.emerald500};
+
+          &:not(:disabled):hover {
+            background: ${theme2.colors.emerald300};
+          }
+
+          &:disabled {
+            background-color: ${theme2.colors.gray200};
+          }
+        `;
+    case "secondary":
+      return css`
+          color: ${theme2.colors.emerald300};
+          border: 2px solid ${theme2.colors.emerald500};
+
+          &:not(:disabled):hover {
+            background: ${theme2.colors.emerald500};
+            color: ${theme2.colors.white};
+          }
+
+          &:disabled {
+            color: ${theme2.colors.gray200};
+            border-color: ${theme2.colors.gray200};
+          }
+        `;
+    case "tertiary":
+      return css`
+          color: ${theme2.colors.gray100};
+
+          &:not(:disabled):hover {
+            color: ${theme2.colors.white};
+          }
+
+          &:disabled {
+            color: ${theme2.colors.gray600};
+          }
+        `;
+  }
+}}
+
+  ${({ size = "md" }) => {
+  switch (size) {
+    case "sm":
+      return css`
+          height: 38px;
+        `;
+    case "md":
+      return css`
+          height: 46px;
+        `;
+  }
+}}
+`;
+
+// src/components/Button/index.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function Button(props) {
+  return /* @__PURE__ */ jsx3(ButtonContainer, __spreadValues({}, props));
+}
+Button.displayName = "Button";
+
+// src/components/Checkbox/index.tsx
+import { Check } from "phosphor-react";
+
+// src/components/Checkbox/styles.ts
+import * as Checkbox from "@radix-ui/react-checkbox";
+import { keyframes, styled as styled4 } from "styled-components";
+var CheckboxContainer = styled4(Checkbox.Root)`
+  all: unset;
+  width: ${({ theme: theme2 }) => theme2.space[6]};
+  height: ${({ theme: theme2 }) => theme2.space[6]};
+  background-color: ${({ theme: theme2 }) => theme2.colors.gray900};
+  border-radius: ${({ theme: theme2 }) => theme2.radii.xs};
+  line-height: 0;
+  cursor: pointer;
+  overflow: hidden;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 2px solid ${({ theme: theme2 }) => theme2.colors.gray900};
+
+  &:focus,
+  &[data-state='checked'] {
+    border: 2px solid ${({ theme: theme2 }) => theme2.colors.emerald300};
+  }
+
+  &[data-state='checked'] {
+    background-color: ${({ theme: theme2 }) => theme2.colors.emerald300};
+  }
+`;
+var slideIn = keyframes`
+  from { transform: translateY(-100%); }
+  to { transform: translateY(0); }
+`;
+var slideOut = keyframes`
+  from { transform: translateY(0); }
+  to { transform: translateY(-100%); }
+`;
+var CheckboxIndicator = styled4(Checkbox.Indicator)`
+  color: ${({ theme: theme2 }) => theme2.colors.white};
+  width: ${({ theme: theme2 }) => theme2.space[4]};
+  height: ${({ theme: theme2 }) => theme2.space[4]};
+
+  &[data-state='checked'] {
+    animation: ${slideIn} 200ms ease-out;
+  }
+
+  &[data-state='unchecked'] {
+    animation: ${slideOut} 200ms ease-out;
+  }
+`;
+
+// src/components/Checkbox/index.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function Checkbox2(props) {
+  return /* @__PURE__ */ jsx4(CheckboxContainer, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx4(CheckboxIndicator, { asChild: true, children: /* @__PURE__ */ jsx4(Check, { weight: "bold" }) }) }));
+}
+Checkbox2.displayName = "Checkbox";
+
+// src/components/Heading/styles.ts
+import { css as css2, styled as styled5 } from "styled-components";
+var sizeVariants = {
+  sm: css2`
+    font-size: ${({ theme: theme2 }) => theme2.fontSizes.xl};
+  `,
+  md: css2`
+    font-size: ${({ theme: theme2 }) => theme2.fontSizes["2xl"]};
+  `,
+  lg: css2`
+    font-size: ${({ theme: theme2 }) => theme2.fontSizes["4xl"]};
+  `,
+  "2xl": css2`
+    font-size: ${({ theme: theme2 }) => theme2.fontSizes["5xl"]};
+  `,
+  "3xl": css2`
+    font-size: ${({ theme: theme2 }) => theme2.fontSizes["6xl"]};
+  `,
+  "4xl": css2`
+    font-size: ${({ theme: theme2 }) => theme2.fontSizes["7xl"]};
+  `,
+  "5xl": css2`
+    font-size: ${({ theme: theme2 }) => theme2.fontSizes["8xl"]};
+  `,
+  "6xl": css2`
+    font-size: ${({ theme: theme2 }) => theme2.fontSizes["9xl"]};
+  `
+};
+var HeadingContainer = styled5.h2`
+  font-family: ${({ theme: theme2 }) => theme2.fonts.default};
+  line-height: ${({ theme: theme2 }) => theme2.lineHeights.shorter};
+  margin: 0;
+  color: ${({ theme: theme2 }) => theme2.colors.gray100};
+
+  ${({ size = "md" }) => sizeVariants[size]}
+`;
+
+// src/components/Heading/index.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+function Heading(props) {
+  return /* @__PURE__ */ jsx5(HeadingContainer, __spreadValues({}, props));
+}
+Heading.displayName = "Heading";
+
+// src/components/MultiStep/styles.ts
+import { styled as styled7 } from "styled-components";
+
+// src/components/Text/styles.ts
+import { styled as styled6 } from "styled-components";
+var TextContainer = styled6.p`
+  font-family: ${({ theme: theme2 }) => theme2.fonts.default};
+  line-height: ${({ theme: theme2 }) => theme2.lineHeights.base};
+  margin: 0;
+  color: ${({ theme: theme2 }) => theme2.colors.gray100};
+
+  font-size: ${({ theme: theme2, size }) => theme2.fontSizes[size || "md"]};
+`;
+
+// src/components/Text/index.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+function Text(props) {
+  return /* @__PURE__ */ jsx6(TextContainer, __spreadValues({}, props));
+}
+Text.displayName = "Text";
+
+// src/components/MultiStep/styles.ts
+var MultiStepContainer = styled7.div``;
+var Label = styled7(Text).attrs({
+  size: "xs"
+})`
+  color: ${({ theme: theme2 }) => theme2.colors.gray200};
+`;
+var Steps = styled7.div`
+  display: grid;
+  grid-template-columns: repeat(${({ size }) => size}, 1fr);
+  gap: ${({ theme: theme2 }) => theme2.space[2]};
+  margin-top: ${({ theme: theme2 }) => theme2.space[1]};
+`;
+var Step = styled7.div`
+  height: ${({ theme: theme2 }) => theme2.space[1]};
+  border-radius: ${({ theme: theme2 }) => theme2.radii.px};
+  background-color: ${({ theme: theme2 }) => theme2.colors.gray600};
+
+  ${({ $active, theme: theme2 }) => $active && `background-color: ${theme2.colors.gray100};`}
+`;
+
+// src/components/MultiStep/index.tsx
+import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
+function MultiStep({ size, currentStep = 1 }) {
+  return /* @__PURE__ */ jsxs2(MultiStepContainer, { children: [
+    /* @__PURE__ */ jsxs2(Label, { children: [
+      "Step ",
+      currentStep,
+      " of ",
+      size
+    ] }),
+    /* @__PURE__ */ jsx7(Steps, { size, children: Array.from({ length: size }, (_, i) => i + 1).map((step) => {
+      return /* @__PURE__ */ jsx7(Step, { $active: step <= currentStep }, step);
+    }) })
+  ] });
+}
+MultiStep.displayName = "MultiStep";
+
+// src/components/TextArea/index.tsx
+import { forwardRef } from "react";
+
+// src/components/TextArea/styles.ts
+import { styled as styled8 } from "styled-components";
+var TextAreaContainer = styled8.textarea`
+  background-color: ${({ theme: theme2 }) => theme2.colors.gray900};
+  padding: ${({ theme: theme2 }) => `${theme2.space[3]} ${theme2.space[4]}`};
+  border-radius: ${({ theme: theme2 }) => theme2.radii.sm};
+  box-sizing: border-box;
+  border: 2px solid ${({ theme: theme2 }) => theme2.colors.gray900};
+  font-family: ${({ theme: theme2 }) => theme2.fonts.default};
+  font-size: ${({ theme: theme2 }) => theme2.fontSizes.sm};
+  color: ${({ theme: theme2 }) => theme2.colors.white};
+  font-weight: ${({ theme: theme2 }) => theme2.fontWeights.regular};
+  resize: vertical;
+  min-height: 80px;
+
+  &:focus {
+    outline: 0;
+    border-color: ${({ theme: theme2 }) => theme2.colors.emerald300};
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  &::placeholder {
+    color: ${({ theme: theme2 }) => theme2.colors.gray400};
+  }
+`;
+
+// src/components/TextArea/index.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+var TextArea = forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx8(TextAreaContainer, __spreadValues({ ref }, props));
+});
+TextArea.displayName = "TextArea";
+
+// src/components/TextInput/index.tsx
+import { forwardRef as forwardRef2 } from "react";
+
+// src/components/TextInput/styles.ts
+import { styled as styled9 } from "styled-components";
+var TextInputContainer = styled9.div`
+  background-color: ${({ theme: theme2 }) => theme2.colors.gray900};
+  padding: ${({ theme: theme2 }) => `${theme2.space[3]} ${theme2.space[4]}`};
+  border-radius: ${({ theme: theme2 }) => theme2.radii.sm};
+  box-sizing: border-box;
+  border: 2px solid ${({ theme: theme2 }) => theme2.colors.gray900};
+  display: flex;
+  align-items: baseline;
+
+  &:has(input:focus) {
+    border-color: ${({ theme: theme2 }) => theme2.colors.emerald300};
+  }
+
+  &:has(input:disabled) {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;
+var Prefix = styled9.span`
+  font-family: ${({ theme: theme2 }) => theme2.fonts.default};
+  font-size: ${({ theme: theme2 }) => theme2.fontSizes.sm};
+  color: ${({ theme: theme2 }) => theme2.colors.gray400};
+  font-weight: ${({ theme: theme2 }) => theme2.fontWeights.regular};
+`;
+var Input = styled9.input`
+  font-family: ${({ theme: theme2 }) => theme2.fonts.default};
+  font-size: ${({ theme: theme2 }) => theme2.fontSizes.sm};
+  color: ${({ theme: theme2 }) => theme2.colors.white};
+  font-weight: ${({ theme: theme2 }) => theme2.fontWeights.regular};
+  background: transparent;
+  border: 0;
+  width: 100%;
+
+  &:focus {
+    outline: 0;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+
+  &::placeholder {
+    color: ${({ theme: theme2 }) => theme2.colors.gray400};
+  }
+`;
+
+// src/components/TextInput/index.tsx
+import { jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
+var TextInput = forwardRef2(
+  (_a, ref) => {
+    var _b = _a, { prefix } = _b, props = __objRest(_b, ["prefix"]);
+    return /* @__PURE__ */ jsxs3(TextInputContainer, { children: [
+      !!prefix && /* @__PURE__ */ jsx9(Prefix, { children: prefix }),
+      /* @__PURE__ */ jsx9(Input, __spreadValues({ ref }, props))
+    ] });
+  }
+);
+TextInput.displayName = "TextInput";
+
+// src/styles/theme.ts
+import {
+  colors,
+  fonts,
+  fontSizes,
+  fontWeights,
+  lineHeights,
+  radii,
+  space
+} from "@beryl-ui/tokens";
+var theme = {
+  colors,
+  fontSizes,
+  fontWeights,
+  fonts,
+  lineHeights,
+  radii,
+  space
+};
+export {
+  Avatar2 as Avatar,
+  Box,
+  Button,
+  Checkbox2 as Checkbox,
+  Heading,
+  MultiStep,
+  Text,
+  TextArea,
+  TextInput,
+  theme
+};

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@beryl-ui/react",
+  "version": "2.1.0",
+  "description": "React components for the beryl-ui Design System.",
+  "license": "MIT",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "author": {
+    "name": "Robson H. Rodrigues",
+    "url": "https://github.com/Robson16"
+  },
+  "keywords": [
+    "ignite",
+    "rocketseat",
+    "typescript",
+    "react"
+  ],
+  "scripts": {
+    "build": "tsup src/index.tsx --format esm,cjs --dts --external react,styled-components",
+    "dev": "tsup src/index.tsx --format esm,cjs --dts --external react --watch",
+    "lint": "eslint src --ext .ts,.tsx --fix"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "styled-components": "^6.3.6"
+  },
+  "devDependencies": {
+    "@beryl-ui/eslint-config": "*",
+    "@beryl-ui/prettier-config": "*",
+    "@beryl-ui/ts-config": "*",
+    "@types/react": "^18.3.27",
+    "@types/react-dom": "^18.3.7",
+    "eslint": "^8.57.1",
+    "styled-components": "^6.3.6",
+    "tsup": "^8.5.1",
+    "typescript": "^5.5.4"
+  },
+  "dependencies": {
+    "@beryl-ui/tokens": "*",
+    "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "phosphor-react": "^1.4.1"
+  }
+}