@joaofa/ui 0.0.1

package/dist/globals.css

@@ -0,0 +1,2 @@
+/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight:initial;--tw-duration:initial;--tw-ease:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--spacing:.25rem;--font-weight-semibold:600;--ease-out:cubic-bezier(0, 0, .2, 1);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.fixed{position:fixed}.flex{display:flex}.inline-flex{display:inline-flex}.h-8{height:calc(var(--spacing) * 8)}.h-11{height:calc(var(--spacing) * 11)}.h-12{height:calc(var(--spacing) * 12)}.w-full{width:100%}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:calc(var(--spacing) * 2)}.rounded-\[var\(--mp-radius-md\)\]{border-radius:var(--mp-radius-md)}.rounded-\[var\(--mp-radius-pill\)\]{border-radius:var(--mp-radius-pill)}.rounded-\[var\(--mp-radius-sm\)\]{border-radius:var(--mp-radius-sm)}.bg-\[var\(--mp-color-error\)\]{background-color:var(--mp-color-error)}.bg-\[var\(--mp-color-primary\)\]{background-color:var(--mp-color-primary)}.bg-\[var\(--mp-color-primary-light\)\]{background-color:var(--mp-color-primary-light)}.bg-transparent{background-color:#0000}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.text-\[13px\]{font-size:13px}.text-\[15px\]{font-size:15px}.text-\[16px\]{font-size:16px}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.whitespace-nowrap{white-space:nowrap}.text-\[var\(--mp-color-on-destructive\)\]{color:var(--mp-color-on-destructive)}.text-\[var\(--mp-color-on-primary\)\]{color:var(--mp-color-on-primary)}.text-\[var\(--mp-color-on-secondary\)\]{color:var(--mp-color-on-secondary)}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-150{--tw-duration:.15s;transition-duration:.15s}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}.select-none{-webkit-user-select:none;user-select:none}@media (hover:hover){.hover\:bg-\[\#DDDFFB\]:hover{background-color:#dddffb}.hover\:bg-\[var\(--mp-color-error-hover\)\]:hover{background-color:var(--mp-color-error-hover)}.hover\:bg-\[var\(--mp-color-primary-hover\)\]:hover{background-color:var(--mp-color-primary-hover)}.hover\:bg-\[var\(--mp-color-primary-lighter\)\]:hover{background-color:var(--mp-color-primary-lighter)}}.focus-visible\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-visible\:ring-\[var\(--mp-color-border-focus\)\]:focus-visible{--tw-ring-color:var(--mp-color-border-focus)}.focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.focus-visible\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.active\:bg-\[\#CDD0F8\]:active{background-color:#cdd0f8}.active\:bg-\[var\(--mp-color-primary-active\)\]:active{background-color:var(--mp-color-primary-active)}.active\:bg-\[var\(--mp-color-primary-light\)\]:active{background-color:var(--mp-color-primary-light)}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:opacity-50:disabled{opacity:.5}}:root{--mp-color-primary:#4f39f6;--mp-color-primary-hover:#4329e0;--mp-color-primary-active:#3a22c8;--mp-color-primary-light:#e9eafd;--mp-color-primary-lighter:#f3f4fe;--mp-color-on-primary:#fff;--mp-color-on-secondary:#4f39f6;--mp-color-on-destructive:#fff;--mp-color-surface-dark:#353851;--mp-color-surface-card:#fff;--mp-color-surface-input:#f5f5f8;--mp-color-surface-muted:#f4f5fa;--mp-color-brand-yellow:#ffe600;--mp-color-pix:#2dd4bf;--mp-color-success-bg:#dcf5e6;--mp-color-success-text:#0a6b41;--mp-color-warning-bg:#fff3cd;--mp-color-warning-text:#856404;--mp-color-error-bg:#fdecec;--mp-color-error:#dc2626;--mp-color-error-hover:#b91c1c;--mp-color-border:#dbdde6;--mp-color-border-focus:#4f39f6;--mp-color-text-primary:#1f2233;--mp-color-text-secondary:#6b7088;--mp-color-text-disabled:#b0b4c2;--mp-radius-xs:4px;--mp-radius-sm:8px;--mp-radius-md:12px;--mp-radius-lg:16px;--mp-radius-xl:20px;--mp-radius-pill:28px;--mp-radius-full:9999px;--mp-space-1:4px;--mp-space-2:8px;--mp-space-3:12px;--mp-space-4:16px;--mp-space-5:20px;--mp-space-6:24px;--mp-space-8:32px;--mp-font-size-xs:11px;--mp-font-size-sm:13px;--mp-font-size-md:15px;--mp-font-size-lg:17px;--mp-font-size-xl:20px;--mp-font-size-2xl:24px;--mp-shadow-sm:0 1px 3px #00000014;--mp-shadow-md:0 4px 12px #0000001a;--mp-shadow-lg:0 8px 24px #0000001f;--mp-transition-fast:.15s ease;--mp-transition-base:.2s ease}*,:before,:after{box-sizing:border-box}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}

package/dist/index.cjs

@@ -0,0 +1,119 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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.ts
+var index_exports = {};
+__export(index_exports, {
+  Button: () => Button,
+  buttonVariants: () => buttonVariants
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/button/button.tsx
+var React = __toESM(require("react"), 1);
+var import_react_slot = require("@radix-ui/react-slot");
+var import_class_variance_authority = require("class-variance-authority");
+
+// src/lib/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/components/button/button.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var buttonVariants = (0, import_class_variance_authority.cva)(
+  [
+    "inline-flex items-center justify-center gap-2",
+    "font-semibold whitespace-nowrap select-none",
+    "transition-colors duration-150 ease-out",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+    "focus-visible:ring-[var(--mp-color-border-focus)]",
+    "disabled:pointer-events-none disabled:opacity-50"
+  ],
+  {
+    variants: {
+      variant: {
+        primary: [
+          "bg-[var(--mp-color-primary)] text-[var(--mp-color-on-primary)]",
+          "hover:bg-[var(--mp-color-primary-hover)]",
+          "active:bg-[var(--mp-color-primary-active)]"
+        ],
+        secondary: [
+          "bg-[var(--mp-color-primary-light)] text-[var(--mp-color-on-secondary)]",
+          "hover:bg-[#DDDFFB]",
+          "active:bg-[#CDD0F8]"
+        ],
+        ghost: [
+          "bg-transparent text-[var(--mp-color-on-secondary)]",
+          "hover:bg-[var(--mp-color-primary-lighter)]",
+          "active:bg-[var(--mp-color-primary-light)]"
+        ],
+        destructive: [
+          "bg-[var(--mp-color-error)] text-[var(--mp-color-on-destructive)]",
+          "hover:bg-[var(--mp-color-error-hover)]"
+        ]
+      },
+      size: {
+        sm: "h-8  px-3  text-[13px] rounded-[var(--mp-radius-sm)]",
+        md: "h-11 px-5  text-[15px] rounded-[var(--mp-radius-md)]",
+        lg: "h-12 px-6  text-[16px] rounded-[var(--mp-radius-md)]",
+        pill: "h-12 px-6  text-[15px] rounded-[var(--mp-radius-pill)]"
+      },
+      fullWidth: {
+        true: "w-full"
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md"
+    }
+  }
+);
+var Button = React.forwardRef(
+  ({ className, variant, size, fullWidth, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? import_react_slot.Slot : "button";
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      Comp,
+      {
+        ref,
+        className: cn(buttonVariants({ variant, size, fullWidth }), className),
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Button,
+  buttonVariants
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/components/button/button.tsx","../src/lib/utils.ts"],"sourcesContent":["export * from './components'\n","import * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\n\nconst buttonVariants = cva(\n  [\n    'inline-flex items-center justify-center gap-2',\n    'font-semibold whitespace-nowrap select-none',\n    'transition-colors duration-150 ease-out',\n    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',\n    'focus-visible:ring-[var(--mp-color-border-focus)]',\n    'disabled:pointer-events-none disabled:opacity-50',\n  ],\n  {\n    variants: {\n      variant: {\n        primary: [\n          'bg-[var(--mp-color-primary)] text-[var(--mp-color-on-primary)]',\n          'hover:bg-[var(--mp-color-primary-hover)]',\n          'active:bg-[var(--mp-color-primary-active)]',\n        ],\n        secondary: [\n          'bg-[var(--mp-color-primary-light)] text-[var(--mp-color-on-secondary)]',\n          'hover:bg-[#DDDFFB]',\n          'active:bg-[#CDD0F8]',\n        ],\n        ghost: [\n          'bg-transparent text-[var(--mp-color-on-secondary)]',\n          'hover:bg-[var(--mp-color-primary-lighter)]',\n          'active:bg-[var(--mp-color-primary-light)]',\n        ],\n        destructive: [\n          'bg-[var(--mp-color-error)] text-[var(--mp-color-on-destructive)]',\n          'hover:bg-[var(--mp-color-error-hover)]',\n        ],\n      },\n      size: {\n        sm:   'h-8  px-3  text-[13px] rounded-[var(--mp-radius-sm)]',\n        md:   'h-11 px-5  text-[15px] rounded-[var(--mp-radius-md)]',\n        lg:   'h-12 px-6  text-[16px] rounded-[var(--mp-radius-md)]',\n        pill: 'h-12 px-6  text-[15px] rounded-[var(--mp-radius-pill)]',\n      },\n      fullWidth: {\n        true: 'w-full',\n      },\n    },\n    defaultVariants: {\n      variant: 'primary',\n      size: 'md',\n    },\n  },\n)\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean\n}\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, variant, size, fullWidth, asChild = false, ...props }, ref) => {\n    const Comp = asChild ? Slot : 'button'\n    return (\n      <Comp\n        ref={ref}\n        className={cn(buttonVariants({ variant, size, fullWidth }), className)}\n        {...props}\n      />\n    )\n  },\n)\nButton.displayName = 'Button'\n\nexport { buttonVariants }\n","import { clsx, type ClassValue } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;AACvB,wBAAqB;AACrB,sCAAuC;;;ACFvC,kBAAsC;AACtC,4BAAwB;AAEjB,SAAS,MAAM,QAAsB;AAC1C,aAAO,mCAAQ,kBAAK,MAAM,CAAC;AAC7B;;;AD2DM;AA3DN,IAAM,qBAAiB;AAAA,EACrB;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,UACP;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA,OAAO;AAAA,UACL;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA,aAAa;AAAA,UACX;AAAA,UACA;AAAA,QACF;AAAA,MACF;AAAA,MACA,MAAM;AAAA,QACJ,IAAM;AAAA,QACN,IAAM;AAAA,QACN,IAAM;AAAA,QACN,MAAM;AAAA,MACR;AAAA,MACA,WAAW;AAAA,QACT,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAQO,IAAM,SAAe;AAAA,EAC1B,CAAC,EAAE,WAAW,SAAS,MAAM,WAAW,UAAU,OAAO,GAAG,MAAM,GAAG,QAAQ;AAC3E,UAAM,OAAO,UAAU,yBAAO;AAC9B,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,eAAe,EAAE,SAAS,MAAM,UAAU,CAAC,GAAG,SAAS;AAAA,QACpE,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AACA,OAAO,cAAc;","names":[]}

package/dist/index.d.cts

@@ -0,0 +1,15 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+declare const buttonVariants: (props?: ({
+    variant?: "primary" | "secondary" | "ghost" | "destructive" | null | undefined;
+    size?: "sm" | "md" | "lg" | "pill" | null | undefined;
+    fullWidth?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
+export { Button, type ButtonProps, buttonVariants };

package/dist/index.d.ts

@@ -0,0 +1,15 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+declare const buttonVariants: (props?: ({
+    variant?: "primary" | "secondary" | "ghost" | "destructive" | null | undefined;
+    size?: "sm" | "md" | "lg" | "pill" | null | undefined;
+    fullWidth?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
+export { Button, type ButtonProps, buttonVariants };

package/dist/index.js

@@ -0,0 +1,81 @@
+// src/components/button/button.tsx
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/button/button.tsx
+import { jsx } from "react/jsx-runtime";
+var buttonVariants = cva(
+  [
+    "inline-flex items-center justify-center gap-2",
+    "font-semibold whitespace-nowrap select-none",
+    "transition-colors duration-150 ease-out",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+    "focus-visible:ring-[var(--mp-color-border-focus)]",
+    "disabled:pointer-events-none disabled:opacity-50"
+  ],
+  {
+    variants: {
+      variant: {
+        primary: [
+          "bg-[var(--mp-color-primary)] text-[var(--mp-color-on-primary)]",
+          "hover:bg-[var(--mp-color-primary-hover)]",
+          "active:bg-[var(--mp-color-primary-active)]"
+        ],
+        secondary: [
+          "bg-[var(--mp-color-primary-light)] text-[var(--mp-color-on-secondary)]",
+          "hover:bg-[#DDDFFB]",
+          "active:bg-[#CDD0F8]"
+        ],
+        ghost: [
+          "bg-transparent text-[var(--mp-color-on-secondary)]",
+          "hover:bg-[var(--mp-color-primary-lighter)]",
+          "active:bg-[var(--mp-color-primary-light)]"
+        ],
+        destructive: [
+          "bg-[var(--mp-color-error)] text-[var(--mp-color-on-destructive)]",
+          "hover:bg-[var(--mp-color-error-hover)]"
+        ]
+      },
+      size: {
+        sm: "h-8  px-3  text-[13px] rounded-[var(--mp-radius-sm)]",
+        md: "h-11 px-5  text-[15px] rounded-[var(--mp-radius-md)]",
+        lg: "h-12 px-6  text-[16px] rounded-[var(--mp-radius-md)]",
+        pill: "h-12 px-6  text-[15px] rounded-[var(--mp-radius-pill)]"
+      },
+      fullWidth: {
+        true: "w-full"
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md"
+    }
+  }
+);
+var Button = React.forwardRef(
+  ({ className, variant, size, fullWidth, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        ref,
+        className: cn(buttonVariants({ variant, size, fullWidth }), className),
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+export {
+  Button,
+  buttonVariants
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/button/button.tsx","../src/lib/utils.ts"],"sourcesContent":["import * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\n\nconst buttonVariants = cva(\n  [\n    'inline-flex items-center justify-center gap-2',\n    'font-semibold whitespace-nowrap select-none',\n    'transition-colors duration-150 ease-out',\n    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',\n    'focus-visible:ring-[var(--mp-color-border-focus)]',\n    'disabled:pointer-events-none disabled:opacity-50',\n  ],\n  {\n    variants: {\n      variant: {\n        primary: [\n          'bg-[var(--mp-color-primary)] text-[var(--mp-color-on-primary)]',\n          'hover:bg-[var(--mp-color-primary-hover)]',\n          'active:bg-[var(--mp-color-primary-active)]',\n        ],\n        secondary: [\n          'bg-[var(--mp-color-primary-light)] text-[var(--mp-color-on-secondary)]',\n          'hover:bg-[#DDDFFB]',\n          'active:bg-[#CDD0F8]',\n        ],\n        ghost: [\n          'bg-transparent text-[var(--mp-color-on-secondary)]',\n          'hover:bg-[var(--mp-color-primary-lighter)]',\n          'active:bg-[var(--mp-color-primary-light)]',\n        ],\n        destructive: [\n          'bg-[var(--mp-color-error)] text-[var(--mp-color-on-destructive)]',\n          'hover:bg-[var(--mp-color-error-hover)]',\n        ],\n      },\n      size: {\n        sm:   'h-8  px-3  text-[13px] rounded-[var(--mp-radius-sm)]',\n        md:   'h-11 px-5  text-[15px] rounded-[var(--mp-radius-md)]',\n        lg:   'h-12 px-6  text-[16px] rounded-[var(--mp-radius-md)]',\n        pill: 'h-12 px-6  text-[15px] rounded-[var(--mp-radius-pill)]',\n      },\n      fullWidth: {\n        true: 'w-full',\n      },\n    },\n    defaultVariants: {\n      variant: 'primary',\n      size: 'md',\n    },\n  },\n)\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean\n}\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, variant, size, fullWidth, asChild = false, ...props }, ref) => {\n    const Comp = asChild ? Slot : 'button'\n    return (\n      <Comp\n        ref={ref}\n        className={cn(buttonVariants({ variant, size, fullWidth }), className)}\n        {...props}\n      />\n    )\n  },\n)\nButton.displayName = 'Button'\n\nexport { buttonVariants }\n","import { clsx, type ClassValue } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n"],"mappings":";AAAA,YAAY,WAAW;AACvB,SAAS,YAAY;AACrB,SAAS,WAA8B;;;ACFvC,SAAS,YAA6B;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;AD2DM;AA3DN,IAAM,iBAAiB;AAAA,EACrB;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,UACP;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA,OAAO;AAAA,UACL;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA,aAAa;AAAA,UACX;AAAA,UACA;AAAA,QACF;AAAA,MACF;AAAA,MACA,MAAM;AAAA,QACJ,IAAM;AAAA,QACN,IAAM;AAAA,QACN,IAAM;AAAA,QACN,MAAM;AAAA,MACR;AAAA,MACA,WAAW;AAAA,QACT,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAQO,IAAM,SAAe;AAAA,EAC1B,CAAC,EAAE,WAAW,SAAS,MAAM,WAAW,UAAU,OAAO,GAAG,MAAM,GAAG,QAAQ;AAC3E,UAAM,OAAO,UAAU,OAAO;AAC9B,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,eAAe,EAAE,SAAS,MAAM,UAAU,CAAC,GAAG,SAAS;AAAA,QACpE,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AACA,OAAO,cAAc;","names":[]}

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "@joaofa/ui",
+  "version": "0.0.1",
+  "description": "Design system inspirado no Mercado Pago",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./styles": "./dist/globals.css"
+  },
+  "files": ["dist"],
+  "sideEffects": ["**/*.css"],
+  "scripts": {
+    "build": "tsup && pnpm build:css",
+    "build:css": "tailwindcss -i ./src/styles/globals.css -o ./dist/globals.css --minify",
+    "dev": "tsup --watch",
+    "lint": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@changesets/cli": "^2.27.0",
+    "@storybook/addon-essentials": "^8.3.0",
+    "@storybook/react": "^8.3.0",
+    "@storybook/react-vite": "^8.3.0",
+    "@testing-library/jest-dom": "^6.4.0",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.5.0",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "autoprefixer": "^10.4.0",
+    "jsdom": "^25.0.0",
+    "postcss": "^8.4.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
+    "storybook": "^8.3.0",
+    "tailwindcss": "^4.0.0",
+    "@tailwindcss/cli": "^4.0.0",
+    "@tailwindcss/postcss": "^4.0.0",
+    "tsup": "^8.3.0",
+    "typescript": "^5.5.0",
+    "vite": "^5.4.0",
+    "vitest": "^2.1.0"
+  },
+  "dependencies": {
+    "@radix-ui/react-slot": "^1.1.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
+    "tailwind-merge": "^2.5.0"
+  }
+}