villela-ui 0.1.0

package/dist/index.mjs

@@ -0,0 +1,377 @@
+// src/tokens/colors/colors.css.ts
+var colors = { palette: { primary: "var(--palette-primary__e8shvx0)", secundary: "var(--palette-secundary__e8shvx1)", tertiary: "var(--palette-tertiary__e8shvx2)", quaternary: "var(--palette-quaternary__e8shvx3)", quinary: "var(--palette-quinary__e8shvx4)" }, toning: { primary: { t30: "var(--toning-primary-t30__e8shvx5)", t50: "var(--toning-primary-t50__e8shvx6)", t60: "var(--toning-primary-t60__e8shvx7)", t70: "var(--toning-primary-t70__e8shvx8)", t80: "var(--toning-primary-t80__e8shvx9)", t90: "var(--toning-primary-t90__e8shvxa)" }, error: { t30: "var(--toning-error-t30__e8shvxb)", t50: "var(--toning-error-t50__e8shvxc)", t60: "var(--toning-error-t60__e8shvxd)", t70: "var(--toning-error-t70__e8shvxe)", t80: "var(--toning-error-t80__e8shvxf)", t90: "var(--toning-error-t90__e8shvxg)" }, success: { t30: "var(--toning-success-t30__e8shvxh)", t50: "var(--toning-success-t50__e8shvxi)", t60: "var(--toning-success-t60__e8shvxj)", t70: "var(--toning-success-t70__e8shvxk)", t80: "var(--toning-success-t80__e8shvxl)", t90: "var(--toning-success-t90__e8shvxm)" }, warning: { t30: "var(--toning-warning-t30__e8shvxn)", t50: "var(--toning-warning-t50__e8shvxo)", t60: "var(--toning-warning-t60__e8shvxp)", t70: "var(--toning-warning-t70__e8shvxq)", t80: "var(--toning-warning-t80__e8shvxr)", t90: "var(--toning-warning-t90__e8shvxs)" }, base: { t30: "var(--toning-base-t30__e8shvxt)", t50: "var(--toning-base-t50__e8shvxu)", t60: "var(--toning-base-t60__e8shvxv)", t70: "var(--toning-base-t70__e8shvxw)", t80: "var(--toning-base-t80__e8shvxx)", t90: "var(--toning-base-t90__e8shvxy)" } }, text: { primary: { T60: "var(--text-primary-T60__e8shvxz)", T30: "var(--text-primary-T30__e8shvx10)", T10: "var(--text-primary-T10__e8shvx11)", T05: "var(--text-primary-T05__e8shvx12)", TO1: "var(--text-primary-TO1__e8shvx13)" }, secundary: { T60: "var(--text-secundary-T60__e8shvx14)", T30: "var(--text-secundary-T30__e8shvx15)", T10: "var(--text-secundary-T10__e8shvx16)", T05: "var(--text-secundary-T05__e8shvx17)", TO1: "var(--text-secundary-TO1__e8shvx18)" }, error: { T60L: "var(--text-error-T60L__e8shvx19)", T30: "var(--text-error-T30__e8shvx1a)", T10: "var(--text-error-T10__e8shvx1b)", T05: "var(--text-error-T05__e8shvx1c)", TO1: "var(--text-error-TO1__e8shvx1d)" }, success: { T60: "var(--text-success-T60__e8shvx1e)", T30: "var(--text-success-T30__e8shvx1f)", T10: "var(--text-success-T10__e8shvx1g)", T05: "var(--text-success-T05__e8shvx1h)", T01: "var(--text-success-T01__e8shvx1i)" }, warning: { T60: "var(--text-warning-T60__e8shvx1j)", T30: "var(--text-warning-T30__e8shvx1k)", T10: "var(--text-warning-T10__e8shvx1l)", TO5: "var(--text-warning-TO5__e8shvx1m)", T01: "var(--text-warning-T01__e8shvx1n)" } } };
+
+// src/tokens/spacing/spacing.css.ts
+var spacing = { space: { "0": "var(--space-0__17tztz60)", "1": "var(--space-1__17tztz61)", "2": "var(--space-2__17tztz62)", "3": "var(--space-3__17tztz63)", "4": "var(--space-4__17tztz64)", "5": "var(--space-5__17tztz65)", "6": "var(--space-6__17tztz66)", "7": "var(--space-7__17tztz67)", "8": "var(--space-8__17tztz68)", "9": "var(--space-9__17tztz69)", "10": "var(--space-10__17tztz6a)", "12": "var(--space-12__17tztz6b)", "14": "var(--space-14__17tztz6c)", "16": "var(--space-16__17tztz6d)", "20": "var(--space-20__17tztz6e)", "24": "var(--space-24__17tztz6f)", "28": "var(--space-28__17tztz6g)", "32": "var(--space-32__17tztz6h)", "36": "var(--space-36__17tztz6i)", "40": "var(--space-40__17tztz6j)", "48": "var(--space-48__17tztz6k)", "56": "var(--space-56__17tztz6l)", "64": "var(--space-64__17tztz6m)" } };
+
+// src/tokens/typograpgy/typography.css.ts
+var typography = { fontFamily: "var(--fontFamily__6elmlr0)" };
+
+// src/tokens/radius/radii.css.ts
+var radii = { width: { small: "var(--width-small__xtrgmf0)", medium: "var(--width-medium__xtrgmf1)", large: "var(--width-large__xtrgmf2)" }, radius: { small: "var(--radius-small__xtrgmf3)", medium: "var(--radius-medium__xtrgmf4)", large: "var(--radius-large__xtrgmf5)", rounded: "var(--radius-rounded__xtrgmf6)" } };
+
+// src/tokens/shadows/shadows.css.ts
+var shadows = { shadow: { none: "var(--shadow-none__3ldqw10)", xs: "var(--shadow-xs__3ldqw11)", sm: "var(--shadow-sm__3ldqw12)", md: "var(--shadow-md__3ldqw13)", lg: "var(--shadow-lg__3ldqw14)", xl: "var(--shadow-xl__3ldqw15)" } };
+
+// src/components/button/button.component.tsx
+import {
+  useEffect,
+  useState
+} from "react";
+
+// src/components/button/button.css.ts
+import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
+var button = _7a468({ defaultClassName: "button_button__rnxq7e0", variantClassNames: { variant: { primary: "button_button_variant_primary__rnxq7e1", secondary: "button_button_variant_secondary__rnxq7e2", tertiary: "button_button_variant_tertiary__rnxq7e3" }, color: { brand: "button_button_color_brand__rnxq7e4", error: "button_button_color_error__rnxq7e5", warning: "button_button_color_warning__rnxq7e6", success: "button_button_color_success__rnxq7e7" }, size: { xl: "button_button_size_xl__rnxq7e8", lg: "button_button_size_lg__rnxq7e9", md: "button_button_size_md__rnxq7ea", sm: "button_button_size_sm__rnxq7eb", icon: "button_button_size_icon__rnxq7ec" }, pill: { true: "button_button_pill_true__rnxq7ed", false: "button_button_pill_false__rnxq7ee" }, disabled: { true: "button_button_disabled_true__rnxq7ef", false: "button_button_disabled_false__rnxq7eg" } }, defaultVariants: { variant: "primary", color: "brand", size: "md", pill: false, disabled: false }, compoundVariants: [[{ variant: "primary", color: "brand" }, "button_button_compound_0__rnxq7eh"], [{ variant: "secondary", color: "brand" }, "button_button_compound_1__rnxq7ei"], [{ variant: "tertiary", color: "brand" }, "button_button_compound_2__rnxq7ej"], [{ variant: "primary", color: "error" }, "button_button_compound_3__rnxq7ek"], [{ variant: "secondary", color: "error" }, "button_button_compound_4__rnxq7el"], [{ variant: "tertiary", color: "error" }, "button_button_compound_5__rnxq7em"], [{ variant: "primary", color: "warning" }, "button_button_compound_6__rnxq7en"], [{ variant: "secondary", color: "warning" }, "button_button_compound_7__rnxq7eo"], [{ variant: "tertiary", color: "warning" }, "button_button_compound_8__rnxq7ep"], [{ variant: "primary", color: "success" }, "button_button_compound_9__rnxq7eq"], [{ variant: "secondary", color: "success" }, "button_button_compound_10__rnxq7er"], [{ variant: "tertiary", color: "success" }, "button_button_compound_11__rnxq7es"]] });
+var iconWrapper = { withText: "button_iconWrapper_withText__rnxq7et", noText: "button_iconWrapper_noText__rnxq7eu" };
+var loaderWrapper = { withText: "button_loaderWrapper_withText__rnxq7ev", noText: "button_loaderWrapper_noText__rnxq7ew" };
+var text = "button_text__rnxq7ex";
+
+// src/components/button/button.component.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var Button = ({
+  text: text2,
+  variant = "primary",
+  color = "brand",
+  size = "md",
+  pill = false,
+  iconBefore,
+  iconAfter,
+  isLoading = false,
+  disabled = false,
+  onClick,
+  htmlType,
+  style,
+  className
+}) => {
+  const [preventDoubleClick, setPreventDoubleClick] = useState(false);
+  const isDisabled = disabled || isLoading || preventDoubleClick;
+  const handleClick = (event) => {
+    if (isDisabled) return;
+    setPreventDoubleClick(true);
+    onClick?.(event);
+  };
+  useEffect(() => {
+    if (preventDoubleClick) {
+      const timer = setTimeout(() => setPreventDoubleClick(false), 400);
+      return () => clearTimeout(timer);
+    }
+  }, [preventDoubleClick]);
+  const classNames = [
+    button({ variant, color, size, pill, disabled: isDisabled }),
+    className
+  ].filter(Boolean).join(" ");
+  const textExists = Boolean(text2);
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: htmlType,
+      className: classNames,
+      onClick: handleClick,
+      disabled: isDisabled,
+      "aria-busy": isLoading,
+      style,
+      children: [
+        iconBefore && !isLoading && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: textExists ? iconWrapper.withText : iconWrapper.noText,
+            children: iconBefore
+          }
+        ),
+        text2 && /* @__PURE__ */ jsx("span", { className: text, children: text2 }),
+        isLoading && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: textExists ? loaderWrapper.withText : loaderWrapper.noText,
+            children: /* @__PURE__ */ jsx(Spinner, {})
+          }
+        ),
+        iconAfter && !isLoading && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: textExists ? loaderWrapper.withText : loaderWrapper.noText,
+            children: iconAfter
+          }
+        )
+      ]
+    }
+  );
+};
+function Spinner() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      "aria-hidden": "true",
+      style: { animation: "spin 0.65s linear infinite" },
+      children: [
+        /* @__PURE__ */ jsx("style", { children: `@keyframes spin { to { transform: rotate(360deg); } }` }),
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: "8",
+            cy: "8",
+            r: "6",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeOpacity: "0.25"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M14 8a6 6 0 0 0-6-6",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round"
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/input/input.component.tsx
+import { useState as useState2, useId } from "react";
+
+// src/components/input/input.css.ts
+import { createRuntimeFn as _7a4682 } from "@vanilla-extract/recipes/createRuntimeFn";
+var container = _7a4682({ defaultClassName: "input_container__9wx5ob4", variantClassNames: { state: { "default": "input_container_state_default__9wx5ob5", error: "input_container_state_error__9wx5ob6" }, multiline: { true: "input_container_multiline_true__9wx5ob7", false: "input_container_multiline_false__9wx5ob8" } }, defaultVariants: { state: "default", multiline: false }, compoundVariants: [] });
+var counter = "input_counter__9wx5obf";
+var eyeButton = "input_eyeButton__9wx5obh";
+var footer = "input_footer__9wx5obc";
+var forgotLink = "input_forgotLink__9wx5obg";
+var helperText = { "default": "input_helperText_default__9wx5obd", error: "input_helperText_error__9wx5obe" };
+var iconWrapper2 = "input_iconWrapper__9wx5obb";
+var input = "input_input__9wx5ob9";
+var label = { "default": "input_label_default__9wx5ob1", active: "input_label_active__9wx5ob2", error: "input_label_error__9wx5ob3" };
+var textarea = "input_textarea__9wx5oba";
+var wrapper = "input_wrapper__9wx5ob0";
+
+// src/components/input/input.component.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function EyeIcon({ open }) {
+  return open ? /* @__PURE__ */ jsxs2("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx2("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }),
+    /* @__PURE__ */ jsx2("circle", { cx: "12", cy: "12", r: "3" })
+  ] }) : /* @__PURE__ */ jsxs2("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx2("path", { d: "M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" }),
+    /* @__PURE__ */ jsx2("line", { x1: "1", y1: "1", x2: "23", y2: "23" })
+  ] });
+}
+var Input = ({
+  label: label3,
+  placeholder = "Texto",
+  icon,
+  type = "text",
+  error,
+  helperText: helperText2,
+  maxLength,
+  multiline = false,
+  rows = 4,
+  forgotPasswordLabel,
+  onForgotPassword,
+  value,
+  onChange,
+  disabled = false,
+  id: externalId,
+  className
+}) => {
+  const [showPassword, setShowPassword] = useState2(false);
+  const [focused, setFocused] = useState2(false);
+  const [internalValue, setInternalValue] = useState2("");
+  const generatedId = useId();
+  const id = externalId ?? generatedId;
+  const isControlled = value !== void 0;
+  const currentValue = isControlled ? value : internalValue;
+  const hasError = Boolean(error);
+  const state = hasError ? "error" : "default";
+  const labelState = hasError ? "error" : focused ? "active" : "default";
+  const handleChange = (e) => {
+    const val = e.target.value;
+    if (!isControlled) setInternalValue(val);
+    onChange?.(val);
+  };
+  const containerClass = [
+    container({ state, multiline }),
+    className
+  ].filter(Boolean).join(" ");
+  const showFooter = forgotPasswordLabel || maxLength !== void 0 || helperText2 || error;
+  const resolvedType = type === "password" ? showPassword ? "text" : "password" : type;
+  return /* @__PURE__ */ jsxs2("div", { className: wrapper, children: [
+    label3 && /* @__PURE__ */ jsx2("label", { htmlFor: id, className: label[labelState], children: label3 }),
+    /* @__PURE__ */ jsxs2("div", { className: containerClass, children: [
+      multiline ? /* @__PURE__ */ jsx2(
+        "textarea",
+        {
+          id,
+          className: textarea,
+          placeholder,
+          rows,
+          maxLength,
+          value: currentValue,
+          onChange: handleChange,
+          onFocus: () => setFocused(true),
+          onBlur: () => setFocused(false),
+          disabled,
+          "aria-invalid": hasError,
+          "aria-describedby": hasError ? `${id}-error` : void 0
+        }
+      ) : /* @__PURE__ */ jsx2(
+        "input",
+        {
+          id,
+          className: input,
+          type: resolvedType,
+          placeholder,
+          maxLength,
+          value: currentValue,
+          onChange: handleChange,
+          onFocus: () => setFocused(true),
+          onBlur: () => setFocused(false),
+          disabled,
+          "aria-invalid": hasError,
+          "aria-describedby": hasError ? `${id}-error` : void 0
+        }
+      ),
+      icon && !multiline && type !== "password" && /* @__PURE__ */ jsx2("span", { className: iconWrapper2, "aria-hidden": "true", children: icon }),
+      type === "password" && /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          className: eyeButton,
+          onClick: () => setShowPassword((v) => !v),
+          "aria-label": showPassword ? "Ocultar senha" : "Mostrar senha",
+          children: /* @__PURE__ */ jsx2(EyeIcon, { open: showPassword })
+        }
+      )
+    ] }),
+    showFooter && /* @__PURE__ */ jsxs2("div", { className: footer, children: [
+      /* @__PURE__ */ jsxs2("div", { children: [
+        error && /* @__PURE__ */ jsx2("span", { id: `${id}-error`, className: helperText.error, children: error }),
+        !error && helperText2 && /* @__PURE__ */ jsx2("span", { className: helperText.default, children: helperText2 }),
+        !error && !helperText2 && forgotPasswordLabel && /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            className: forgotLink,
+            onClick: onForgotPassword,
+            children: forgotPasswordLabel
+          }
+        )
+      ] }),
+      maxLength !== void 0 && /* @__PURE__ */ jsxs2("span", { className: counter, children: [
+        currentValue.length,
+        "/",
+        maxLength
+      ] })
+    ] }),
+    error && forgotPasswordLabel && /* @__PURE__ */ jsx2(
+      "button",
+      {
+        type: "button",
+        className: forgotLink,
+        onClick: onForgotPassword,
+        children: forgotPasswordLabel
+      }
+    )
+  ] });
+};
+
+// src/components/card/card.css.ts
+var body = "card_body__odd29h1";
+var card = "card_card__odd29h0";
+var cardInline = "card_cardInline__odd29hc";
+var description = "card_description__odd29hb";
+var iconWrapper3 = { plain: "card_iconWrapper_plain__odd29h2", background: "card_iconWrapper_background__odd29h3" };
+var inlineLabelGroup = "card_inlineLabelGroup__odd29he";
+var inlineLeft = "card_inlineLeft__odd29hd";
+var label2 = "card_label__odd29h4";
+var sublabel = "card_sublabel__odd29hf";
+var valueColor = { "default": "card_valueColor_default__odd29h6", brand: "card_valueColor_brand__odd29h7", success: "card_valueColor_success__odd29h8", error: "card_valueColor_error__odd29h9", warning: "card_valueColor_warning__odd29ha" };
+var valueInline = "card_valueInline__odd29hg";
+var valueStacked = "card_valueStacked__odd29h5";
+
+// src/components/card/card.component.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var Card = ({
+  label: label3,
+  value,
+  icon,
+  iconBackground = false,
+  sublabel: sublabel2,
+  description: description2,
+  valueColor: valueColor2 = "default",
+  className
+}) => {
+  if (sublabel2) {
+    return /* @__PURE__ */ jsxs3("div", { className: [cardInline, className].filter(Boolean).join(" "), children: [
+      /* @__PURE__ */ jsxs3("div", { className: inlineLeft, children: [
+        icon && /* @__PURE__ */ jsx3("span", { className: iconWrapper3[iconBackground ? "background" : "plain"], children: icon }),
+        /* @__PURE__ */ jsxs3("div", { className: inlineLabelGroup, children: [
+          /* @__PURE__ */ jsx3("span", { className: label2, children: label3 }),
+          /* @__PURE__ */ jsx3("span", { className: sublabel, children: sublabel2 })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx3("span", { className: `${valueInline} ${valueColor[valueColor2]}`, children: value })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs3("div", { className: [card, className].filter(Boolean).join(" "), children: [
+    icon && /* @__PURE__ */ jsx3("span", { className: iconWrapper3[iconBackground ? "background" : "plain"], children: icon }),
+    /* @__PURE__ */ jsxs3("div", { className: body, children: [
+      /* @__PURE__ */ jsx3("span", { className: label2, children: label3 }),
+      /* @__PURE__ */ jsx3("span", { className: `${valueStacked} ${valueColor[valueColor2]}`, children: value }),
+      description2 && /* @__PURE__ */ jsx3("span", { className: description, children: description2 })
+    ] })
+  ] });
+};
+
+// src/components/tag/tag.css.ts
+import { createRuntimeFn as _7a4683 } from "@vanilla-extract/recipes/createRuntimeFn";
+var removeButton = "tag_removeButton__ffqj0pl";
+var tag = _7a4683({ defaultClassName: "tag_tag__ffqj0p0", variantClassNames: { size: { lg: "tag_tag_size_lg__ffqj0p1", md: "tag_tag_size_md__ffqj0p2", sm: "tag_tag_size_sm__ffqj0p3" }, variant: { filled: "tag_tag_variant_filled__ffqj0p4", outlined: "tag_tag_variant_outlined__ffqj0p5" }, color: { brand: "tag_tag_color_brand__ffqj0p6", warning: "tag_tag_color_warning__ffqj0p7", error: "tag_tag_color_error__ffqj0p8", success: "tag_tag_color_success__ffqj0p9", neutral: "tag_tag_color_neutral__ffqj0pa" } }, defaultVariants: { variant: "filled", color: "brand", size: "md" }, compoundVariants: [[{ variant: "filled", color: "brand" }, "tag_tag_compound_0__ffqj0pb"], [{ variant: "outlined", color: "brand" }, "tag_tag_compound_1__ffqj0pc"], [{ variant: "filled", color: "warning" }, "tag_tag_compound_2__ffqj0pd"], [{ variant: "outlined", color: "warning" }, "tag_tag_compound_3__ffqj0pe"], [{ variant: "filled", color: "error" }, "tag_tag_compound_4__ffqj0pf"], [{ variant: "outlined", color: "error" }, "tag_tag_compound_5__ffqj0pg"], [{ variant: "filled", color: "success" }, "tag_tag_compound_6__ffqj0ph"], [{ variant: "outlined", color: "success" }, "tag_tag_compound_7__ffqj0pi"], [{ variant: "filled", color: "neutral" }, "tag_tag_compound_8__ffqj0pj"], [{ variant: "outlined", color: "neutral" }, "tag_tag_compound_9__ffqj0pk"]] });
+
+// src/components/tag/tag.component.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var XIcon = ({ size }) => {
+  const px = size === "lg" ? 14 : size === "md" ? 12 : 10;
+  return /* @__PURE__ */ jsxs4("svg", { width: px, height: px, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx4("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+    /* @__PURE__ */ jsx4("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+  ] });
+};
+var Tag = ({
+  label: label3,
+  color = "brand",
+  variant = "filled",
+  size = "md",
+  onRemove
+}) => {
+  return /* @__PURE__ */ jsxs4("span", { className: tag({ color, variant, size }), children: [
+    label3,
+    onRemove && /* @__PURE__ */ jsx4(
+      "button",
+      {
+        type: "button",
+        className: removeButton,
+        onClick: onRemove,
+        "aria-label": `Remover ${label3}`,
+        children: /* @__PURE__ */ jsx4(XIcon, { size })
+      }
+    )
+  ] });
+};
+export {
+  Button,
+  Card,
+  Input,
+  Tag,
+  colors,
+  radii,
+  shadows,
+  spacing,
+  typography
+};

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "villela-ui",
+  "version": "0.1.0",
+  "description": "Design system e biblioteca de componentes Villela",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./dist/index.css": "./dist/index.css"
+  },
+  "files": ["dist"],
+  "scripts": {
+    "dev": "storybook dev -p 6006",
+    "build": "tsup",
+    "build:storybook": "storybook build",
+    "typecheck": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@storybook/addon-essentials": "^8.0.0",
+    "@storybook/react": "^8.0.0",
+    "@storybook/react-vite": "^8.0.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@vanilla-extract/esbuild-plugin": "^2.3.22",
+    "@vanilla-extract/vite-plugin": "^4.0.0",
+    "storybook": "^8.0.0",
+    "tsup": "^8.5.1",
+    "typescript": "^5.0.0",
+    "vite": "^5.0.0"
+  },
+  "dependencies": {
+    "@vanilla-extract/css": "^1.15.0",
+    "@vanilla-extract/recipes": "^0.5.0"
+  }
+}