@the12company/ui 0.0.1

package/README.md

@@ -0,0 +1,49 @@
+# `@the12company/ui`
+
+Shared **tokens + components** (Vite / Next). Lives in this monorepo at `packages/ui`.
+
+## Local use (this repo)
+
+Resolved via Vite/TS aliases — no publish needed day to day.
+
+```tsx
+import { Button } from "@the12company/ui";
+```
+
+```css
+@import "@the12company/ui/tokens/theme.css";
+```
+
+## Per-product colors
+
+```css
+:root {
+  --primary: 160 84% 39%;
+  --primary-foreground: 0 0% 100%;
+}
+```
+
+## First publish (checklist)
+
+1. npm org **`the12company`** exists and you have 2FA on.
+2. Token created (e.g. named `capivara-ui-kit-token`) — copy the **value**, not only the name.
+3. GitHub → this repo → **Settings → Secrets and variables → Actions → New repository secret**
+   - Name: `NPM_TOKEN`
+   - Value: paste the token
+4. From the repo root (logged in / token configured):
+
+```bash
+npm run publish:ui
+```
+
+Or: Actions → **Publish @the12company/ui** → Run workflow.
+
+## Install in another repo
+
+```bash
+npm install @the12company/ui
+```
+
+Peer deps: `react`, `react-dom`, `@radix-ui/react-slot`, `class-variance-authority`, `clsx`, `tailwind-merge`.
+
+> Free npm orgs only allow **public** packages (`--access public`). For private packages you’d need a paid npm plan or GitHub Packages.

package/dist/index.d.ts

@@ -0,0 +1,17 @@
+import { ClassValue } from 'clsx';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+declare function cn(...inputs: ClassValue[]): string;
+
+declare const buttonVariants: (props?: ({
+    variant?: "default" | "destructive" | "outline" | "outlinePrimary" | "secondary" | "ghost" | "backNav" | "link" | "ghostHover" | "coloredShadow" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | 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, cn };

package/dist/index.js

@@ -0,0 +1,58 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+// src/lib/cn.ts
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-all duration-500 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90 hover:-translate-y-0.5 hover:shadow-lg dark:hover:!shadow-[0_3px_12px_-4px_rgba(0,0,0,0.5)]",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 hover:-translate-y-0.5 hover:shadow-lg dark:hover:!shadow-[0_3px_12px_-4px_rgba(0,0,0,0.5)]",
+        outline: "border border-input bg-background hover:bg-accent hover:border-accent hover:text-accent-foreground hover:-translate-y-0.5 hover:shadow-lg dark:hover:!shadow-[0_2px_10px_-4px_rgba(0,0,0,0.4)]",
+        outlinePrimary: "border border-input bg-background hover:bg-transparent hover:border-primary hover:text-primary hover:-translate-y-0.5 hover:shadow-lg dark:hover:!shadow-[0_2px_10px_-4px_rgba(0,0,0,0.4)]",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 hover:-translate-y-0.5 hover:shadow-lg dark:hover:!shadow-[0_2px_10px_-4px_rgba(0,0,0,0.4)]",
+        ghost: "hover:bg-accent hover:border-accent hover:text-accent-foreground hover:-translate-y-0.5 hover:shadow-lg dark:hover:!shadow-[0_2px_10px_-4px_rgba(0,0,0,0.35)]",
+        backNav: "hover:-translate-y-0.5 rounded-lg border border-transparent bg-transparent text-foreground/60 shadow-none hover:text-foreground",
+        link: "text-primary hover-underline hover:-translate-y-0.5 hover:shadow-none",
+        ghostHover: "hover:shadow-none",
+        coloredShadow: "hover:-translate-y-0.5 bg-primary text-primary-foreground hover:bg-primary/90 hover:shadow-lg hover:shadow-[0_0_15px_rgba(96,214,111,0.2)] hover:shadow-primary/40 dark:hover:shadow-primary/25"
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8 text-base",
+        icon: "h-10 w-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = React.forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        className: cn(buttonVariants({ variant, size, className })),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants, cn };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/cn.ts","../src/components/button.tsx"],"names":[],"mappings":";;;;;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACCA,IAAM,cAAA,GAAiB,GAAA;AAAA,EACrB,oWAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,OAAA,EACE,oJAAA;AAAA,QACF,WAAA,EACE,gKAAA;AAAA,QACF,OAAA,EACE,gMAAA;AAAA,QACF,cAAA,EACE,4LAAA;AAAA,QACF,SAAA,EACE,0JAAA;AAAA,QACF,KAAA,EACE,+JAAA;AAAA,QACF,OAAA,EACE,iIAAA;AAAA,QACF,IAAA,EAAM,uEAAA;AAAA,QACN,UAAA,EAAY,mBAAA;AAAA,QACZ,aAAA,EACE;AAAA,OACJ;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,OAAA,EAAS,gBAAA;AAAA,QACT,EAAA,EAAI,qBAAA;AAAA,QACJ,EAAA,EAAI,gCAAA;AAAA,QACJ,IAAA,EAAM;AAAA;AACR,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS,SAAA;AAAA,MACT,IAAA,EAAM;AAAA;AACR;AAEJ;AASA,IAAM,MAAA,GAAe,KAAA,CAAA,UAAA;AAAA,EACnB,CAAC,EAAE,SAAA,EAAW,OAAA,EAAS,IAAA,EAAM,UAAU,KAAA,EAAO,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AAChE,IAAA,MAAM,IAAA,GAAO,UAAU,IAAA,GAAO,QAAA;AAC9B,IAAA,uBACE,GAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,GAAG,cAAA,CAAe,EAAE,SAAS,IAAA,EAAM,SAAA,EAAW,CAAC,CAAA;AAAA,QAC1D,GAAA;AAAA,QACC,GAAG;AAAA;AAAA,KACN;AAAA,EAEJ;AACF;AACA,MAAA,CAAO,WAAA,GAAc,QAAA","file":"index.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n  return twMerge(clsx(inputs));\r\n}\r\n","import * as React from \"react\";\r\nimport { Slot } from \"@radix-ui/react-slot\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\n\r\nimport { cn } from \"../lib/cn\";\r\n\r\nconst buttonVariants = cva(\r\n  \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-all duration-500 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\r\n  {\r\n    variants: {\r\n      variant: {\r\n        default:\r\n          \"bg-primary text-primary-foreground hover:bg-primary/90 hover:-translate-y-0.5 hover:shadow-lg dark:hover:!shadow-[0_3px_12px_-4px_rgba(0,0,0,0.5)]\",\r\n        destructive:\r\n          \"bg-destructive text-destructive-foreground hover:bg-destructive/90 hover:-translate-y-0.5 hover:shadow-lg dark:hover:!shadow-[0_3px_12px_-4px_rgba(0,0,0,0.5)]\",\r\n        outline:\r\n          \"border border-input bg-background hover:bg-accent hover:border-accent hover:text-accent-foreground hover:-translate-y-0.5 hover:shadow-lg dark:hover:!shadow-[0_2px_10px_-4px_rgba(0,0,0,0.4)]\",\r\n        outlinePrimary:\r\n          \"border border-input bg-background hover:bg-transparent hover:border-primary hover:text-primary hover:-translate-y-0.5 hover:shadow-lg dark:hover:!shadow-[0_2px_10px_-4px_rgba(0,0,0,0.4)]\",\r\n        secondary:\r\n          \"bg-secondary text-secondary-foreground hover:bg-secondary/80 hover:-translate-y-0.5 hover:shadow-lg dark:hover:!shadow-[0_2px_10px_-4px_rgba(0,0,0,0.4)]\",\r\n        ghost:\r\n          \"hover:bg-accent hover:border-accent hover:text-accent-foreground hover:-translate-y-0.5 hover:shadow-lg dark:hover:!shadow-[0_2px_10px_-4px_rgba(0,0,0,0.35)]\",\r\n        backNav:\r\n          \"hover:-translate-y-0.5 rounded-lg border border-transparent bg-transparent text-foreground/60 shadow-none hover:text-foreground\",\r\n        link: \"text-primary hover-underline hover:-translate-y-0.5 hover:shadow-none\",\r\n        ghostHover: \"hover:shadow-none\",\r\n        coloredShadow:\r\n          \"hover:-translate-y-0.5 bg-primary text-primary-foreground hover:bg-primary/90 hover:shadow-lg hover:shadow-[0_0_15px_rgba(96,214,111,0.2)] hover:shadow-primary/40 dark:hover:shadow-primary/25\",\r\n      },\r\n      size: {\r\n        default: \"h-10 px-4 py-2\",\r\n        sm: \"h-9 rounded-md px-3\",\r\n        lg: \"h-11 rounded-md px-8 text-base\",\r\n        icon: \"h-10 w-10\",\r\n      },\r\n    },\r\n    defaultVariants: {\r\n      variant: \"default\",\r\n      size: \"default\",\r\n    },\r\n  }\r\n);\r\n\r\nexport interface ButtonProps\r\n  extends\r\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\r\n    VariantProps<typeof buttonVariants> {\r\n  asChild?: boolean;\r\n}\r\n\r\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\r\n  ({ className, variant, size, asChild = false, ...props }, ref) => {\r\n    const Comp = asChild ? Slot : \"button\";\r\n    return (\r\n      <Comp\r\n        className={cn(buttonVariants({ variant, size, className }))}\r\n        ref={ref}\r\n        {...props}\r\n      />\r\n    );\r\n  }\r\n);\r\nButton.displayName = \"Button\";\r\n\r\nexport { Button, buttonVariants };\r\n"]}

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@the12company/ui",
+  "version": "0.0.1",
+  "description": "UI Kit para projetos Capivara",
+  "license": "UNLICENSED",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "dist",
+    "src/tokens"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./tokens/theme.css": "./src/tokens/theme.css",
+    "./tokens/theme-contract.css": "./src/tokens/theme-contract.css",
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "tsup",
+    "typecheck": "tsc --noEmit -p tsconfig.json",
+    "prepublishOnly": "npm run build"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@radix-ui/react-slot": "^1.0.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.0.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "tailwind-merge": "^2.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.31",
+    "tsup": "^8.5.0",
+    "typescript": "^5.9.3"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/the-12-company/quick-analytics-frontend.git",
+    "directory": "packages/ui"
+  }
+}

package/src/tokens/theme-contract.css

@@ -0,0 +1,65 @@
+/**
+ * Semantic token contract for @the12company/ui.
+ *
+ * Apps MUST provide these CSS variables (on :root and optionally .dark).
+ * Components only reference the names — never raw brand hex/HSL.
+ *
+ * Override per product, e.g.:
+ *   :root { --primary: 160 84% 39%; }
+ */
+:root {
+  /* Surfaces */
+  --background: 0 0% 100%;
+  --foreground: 0 0% 10%;
+  --card: 0 0% 100%;
+  --card-foreground: 0 0% 10%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 0 0% 10%;
+
+  /* Brand — override per app */
+  --primary: 220 90% 50%;
+  --primary-foreground: 0 0% 100%;
+
+  --secondary: 0 0% 96%;
+  --secondary-foreground: 0 0% 10%;
+  --muted: 0 0% 96%;
+  --muted-foreground: 0 0% 45%;
+  --accent: 220 90% 50%;
+  --accent-foreground: 0 0% 100%;
+
+  --destructive: 0 72% 51%;
+  --destructive-foreground: 0 0% 100%;
+
+  --border: 0 0% 90%;
+  --input: 0 0% 90%;
+  --ring: 220 90% 50%;
+
+  --radius: 0.625rem;
+
+  /* Status */
+  --warning: 38 92% 50%;
+  --warning-foreground: 38 92% 14%;
+  --success: 160 84% 39%;
+  --success-foreground: 0 0% 100%;
+  --info: 220 90% 50%;
+  --info-foreground: 0 0% 100%;
+
+  /* Charts (optional) */
+  --chart-1: 220 90% 50%;
+  --chart-2: 160 84% 39%;
+  --chart-3: 38 92% 50%;
+  --chart-4: 280 65% 55%;
+  --chart-5: 0 72% 51%;
+  --chart-6: 190 80% 45%;
+
+  /* Sidebar (optional) */
+  --sidebar-background: 0 0% 10%;
+  --sidebar-foreground: 0 0% 80%;
+  --sidebar-primary: 220 90% 55%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 0 0% 16%;
+  --sidebar-accent-foreground: 0 0% 90%;
+  --sidebar-border: 0 0% 18%;
+  --sidebar-ring: 220 90% 55%;
+  --sidebar-muted: 0 0% 25%;
+}

package/src/tokens/theme.css

@@ -0,0 +1,117 @@
+/**
+ * Quick Analytics brand theme (default for this monorepo).
+ * Other products: copy theme-contract.css and set your --primary (etc.).
+ */
+:root {
+  --background: 220 20% 97%;
+  --foreground: 220 25% 10%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 220 25% 10%;
+
+  --popover: 0 0% 100%;
+  --popover-foreground: 220 25% 10%;
+
+  --primary: 217 91% 50%;
+  --primary-foreground: 0 0% 100%;
+
+  --secondary: 220 14% 92%;
+  --secondary-foreground: 220 25% 10%;
+
+  --muted: 220 14% 95%;
+  --muted-foreground: 220 10% 46%;
+
+  --accent: 230 78% 58%;
+  --accent-foreground: 0 0% 100%;
+
+  --destructive: 0 72% 51%;
+  --destructive-foreground: 0 0% 100%;
+
+  --border: 220 13% 89%;
+  --input: 220 13% 89%;
+  --ring: 217 91% 50%;
+
+  --radius: 0.625rem;
+
+  --sidebar-background: 220 25% 10%;
+  --sidebar-foreground: 220 10% 80%;
+  --sidebar-primary: 217 91% 60%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 220 20% 16%;
+  --sidebar-accent-foreground: 220 10% 90%;
+  --sidebar-border: 220 20% 18%;
+  --sidebar-ring: 217 91% 60%;
+  --sidebar-muted: 220 15% 25%;
+
+  --warning: 38 92% 50%;
+  --warning-foreground: 38 92% 14%;
+  --success: 160 84% 39%;
+  --success-foreground: 0 0% 100%;
+  --info: 217 91% 50%;
+  --info-foreground: 0 0% 100%;
+
+  --chart-1: 217 91% 50%;
+  --chart-2: 160 84% 39%;
+  --chart-3: 38 92% 50%;
+  --chart-4: 280 65% 55%;
+  --chart-5: 0 72% 51%;
+  --chart-6: 190 80% 45%;
+
+  --insight-glow-surface: 0 0% 100%;
+}
+
+.dark {
+  --background: 222 25% 8%;
+  --foreground: 220 15% 90%;
+
+  --card: 222 22% 11%;
+  --card-foreground: 220 15% 90%;
+
+  --popover: 222 22% 11%;
+  --popover-foreground: 220 15% 90%;
+
+  --primary: 217 91% 60%;
+  --primary-foreground: 0 0% 100%;
+
+  --secondary: 220 18% 18%;
+  --secondary-foreground: 220 15% 85%;
+
+  --muted: 220 18% 15%;
+  --muted-foreground: 220 10% 55%;
+
+  --accent: 230 78% 58%;
+  --accent-foreground: 0 0% 100%;
+
+  --destructive: 0 62% 55%;
+  --destructive-foreground: 0 0% 100%;
+
+  --border: 220 18% 18%;
+  --input: 220 18% 18%;
+  --ring: 230 78% 58%;
+
+  --sidebar-background: 222 28% 6%;
+  --sidebar-foreground: 220 10% 75%;
+  --sidebar-primary: 230 78% 58%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 222 22% 12%;
+  --sidebar-accent-foreground: 220 10% 90%;
+  --sidebar-border: 220 20% 14%;
+  --sidebar-ring: 230 78% 58%;
+  --sidebar-muted: 220 15% 20%;
+
+  --warning: 38 80% 55%;
+  --warning-foreground: 38 80% 10%;
+  --success: 160 70% 45%;
+  --success-foreground: 0 0% 100%;
+  --info: 230 78% 58%;
+  --info-foreground: 0 0% 100%;
+
+  --chart-1: 217 91% 60%;
+  --chart-2: 160 70% 45%;
+  --chart-3: 38 80% 55%;
+  --chart-4: 280 60% 60%;
+  --chart-5: 0 62% 55%;
+  --chart-6: 190 70% 50%;
+
+  --insight-glow-surface: 222 24% 12%;
+}