@beryl-ui/react 2.1.0

package/dist/index.js

@@ -0,0 +1,520 @@
+"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;
+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;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  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
+var index_exports = {};
+__export(index_exports, {
+  Avatar: () => Avatar2,
+  Box: () => Box,
+  Button: () => Button,
+  Checkbox: () => Checkbox2,
+  Heading: () => Heading,
+  MultiStep: () => MultiStep,
+  Text: () => Text,
+  TextArea: () => TextArea,
+  TextInput: () => TextInput,
+  theme: () => theme
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/Avatar/index.tsx
+var import_phosphor_react = require("phosphor-react");
+
+// src/components/Avatar/styles.ts
+var Avatar = __toESM(require("@radix-ui/react-avatar"));
+var import_styled_components = __toESM(require("styled-components"));
+var AvatarContainer = (0, import_styled_components.default)(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 = (0, import_styled_components.default)(Avatar.Image)`
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: inherit;
+`;
+var AvatarFallback = (0, import_styled_components.default)(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
+var import_jsx_runtime = require("react/jsx-runtime");
+function Avatar2(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AvatarContainer, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AvatarImage, __spreadValues({}, props)),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AvatarFallback, { delayMs: 600, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_phosphor_react.User, {}) })
+  ] });
+}
+Avatar2.displayName = "Avatar";
+
+// src/components/Box/styles.ts
+var import_styled_components2 = require("styled-components");
+var BoxContainer = import_styled_components2.styled.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
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function Box(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(BoxContainer, __spreadValues({}, props));
+}
+Box.displayName = "Box";
+
+// src/components/Button/styles.ts
+var import_styled_components3 = require("styled-components");
+var ButtonContainer = import_styled_components3.styled.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 import_styled_components3.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 import_styled_components3.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 import_styled_components3.css`
+          color: ${theme2.colors.gray100};
+
+          &:not(:disabled):hover {
+            color: ${theme2.colors.white};
+          }
+
+          &:disabled {
+            color: ${theme2.colors.gray600};
+          }
+        `;
+  }
+}}
+
+  ${({ size = "md" }) => {
+  switch (size) {
+    case "sm":
+      return import_styled_components3.css`
+          height: 38px;
+        `;
+    case "md":
+      return import_styled_components3.css`
+          height: 46px;
+        `;
+  }
+}}
+`;
+
+// src/components/Button/index.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function Button(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ButtonContainer, __spreadValues({}, props));
+}
+Button.displayName = "Button";
+
+// src/components/Checkbox/index.tsx
+var import_phosphor_react2 = require("phosphor-react");
+
+// src/components/Checkbox/styles.ts
+var Checkbox = __toESM(require("@radix-ui/react-checkbox"));
+var import_styled_components4 = require("styled-components");
+var CheckboxContainer = (0, import_styled_components4.styled)(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 = import_styled_components4.keyframes`
+  from { transform: translateY(-100%); }
+  to { transform: translateY(0); }
+`;
+var slideOut = import_styled_components4.keyframes`
+  from { transform: translateY(0); }
+  to { transform: translateY(-100%); }
+`;
+var CheckboxIndicator = (0, import_styled_components4.styled)(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
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function Checkbox2(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CheckboxContainer, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CheckboxIndicator, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_phosphor_react2.Check, { weight: "bold" }) }) }));
+}
+Checkbox2.displayName = "Checkbox";
+
+// src/components/Heading/styles.ts
+var import_styled_components5 = require("styled-components");
+var sizeVariants = {
+  sm: import_styled_components5.css`
+    font-size: ${({ theme: theme2 }) => theme2.fontSizes.xl};
+  `,
+  md: import_styled_components5.css`
+    font-size: ${({ theme: theme2 }) => theme2.fontSizes["2xl"]};
+  `,
+  lg: import_styled_components5.css`
+    font-size: ${({ theme: theme2 }) => theme2.fontSizes["4xl"]};
+  `,
+  "2xl": import_styled_components5.css`
+    font-size: ${({ theme: theme2 }) => theme2.fontSizes["5xl"]};
+  `,
+  "3xl": import_styled_components5.css`
+    font-size: ${({ theme: theme2 }) => theme2.fontSizes["6xl"]};
+  `,
+  "4xl": import_styled_components5.css`
+    font-size: ${({ theme: theme2 }) => theme2.fontSizes["7xl"]};
+  `,
+  "5xl": import_styled_components5.css`
+    font-size: ${({ theme: theme2 }) => theme2.fontSizes["8xl"]};
+  `,
+  "6xl": import_styled_components5.css`
+    font-size: ${({ theme: theme2 }) => theme2.fontSizes["9xl"]};
+  `
+};
+var HeadingContainer = import_styled_components5.styled.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
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function Heading(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(HeadingContainer, __spreadValues({}, props));
+}
+Heading.displayName = "Heading";
+
+// src/components/MultiStep/styles.ts
+var import_styled_components7 = require("styled-components");
+
+// src/components/Text/styles.ts
+var import_styled_components6 = require("styled-components");
+var TextContainer = import_styled_components6.styled.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
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function Text(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(TextContainer, __spreadValues({}, props));
+}
+Text.displayName = "Text";
+
+// src/components/MultiStep/styles.ts
+var MultiStepContainer = import_styled_components7.styled.div``;
+var Label = (0, import_styled_components7.styled)(Text).attrs({
+  size: "xs"
+})`
+  color: ${({ theme: theme2 }) => theme2.colors.gray200};
+`;
+var Steps = import_styled_components7.styled.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 = import_styled_components7.styled.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
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function MultiStep({ size, currentStep = 1 }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(MultiStepContainer, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Label, { children: [
+      "Step ",
+      currentStep,
+      " of ",
+      size
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Steps, { size, children: Array.from({ length: size }, (_, i) => i + 1).map((step) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Step, { $active: step <= currentStep }, step);
+    }) })
+  ] });
+}
+MultiStep.displayName = "MultiStep";
+
+// src/components/TextArea/index.tsx
+var import_react = require("react");
+
+// src/components/TextArea/styles.ts
+var import_styled_components8 = require("styled-components");
+var TextAreaContainer = import_styled_components8.styled.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
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var TextArea = (0, import_react.forwardRef)((props, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(TextAreaContainer, __spreadValues({ ref }, props));
+});
+TextArea.displayName = "TextArea";
+
+// src/components/TextInput/index.tsx
+var import_react2 = require("react");
+
+// src/components/TextInput/styles.ts
+var import_styled_components9 = require("styled-components");
+var TextInputContainer = import_styled_components9.styled.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 = import_styled_components9.styled.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 = import_styled_components9.styled.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
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var TextInput = (0, import_react2.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { prefix } = _b, props = __objRest(_b, ["prefix"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(TextInputContainer, { children: [
+      !!prefix && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Prefix, { children: prefix }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Input, __spreadValues({ ref }, props))
+    ] });
+  }
+);
+TextInput.displayName = "TextInput";
+
+// src/styles/theme.ts
+var import_tokens = require("@beryl-ui/tokens");
+var theme = {
+  colors: import_tokens.colors,
+  fontSizes: import_tokens.fontSizes,
+  fontWeights: import_tokens.fontWeights,
+  fonts: import_tokens.fonts,
+  lineHeights: import_tokens.lineHeights,
+  radii: import_tokens.radii,
+  space: import_tokens.space
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Avatar,
+  Box,
+  Button,
+  Checkbox,
+  Heading,
+  MultiStep,
+  Text,
+  TextArea,
+  TextInput,
+  theme
+});