@wealthx/shadcn 0.0.1

package/.eslintrc.js

@@ -0,0 +1,4 @@
+/** @type {import("eslint").Linter.Config} */
+module.exports = {
+  extends: ["@repo/eslint-config/react.js"],
+};

package/components.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "radix-nova",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/styles/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "rtl": false,
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "menuColor": "default",
+  "menuAccent": "subtle",
+  "registries": {}
+}

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@wealthx/shadcn",
+  "version": "0.0.1",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "scripts": {
+    "build:css": "tsx scripts/build-css.ts",
+    "build:js": "tsup",
+    "build": "yarn build:css && yarn build:js",
+    "dev": "tsup --watch",
+    "lint": "eslint . --max-warnings 0",
+    "clean": "rm -rf .turbo node_modules dist"
+  },
+  "dependencies": {
+    "@fontsource-variable/figtree": "^5.2.10",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.577.0",
+    "radix-ui": "^1.4.3",
+    "shadcn": "^4.1.0",
+    "tailwind-merge": "^3.5.0",
+    "tw-animate-css": "^1.4.0"
+  },
+  "devDependencies": {
+    "@repo/eslint-config": "*",
+    "@repo/typescript-config": "*",
+    "@tailwindcss/cli": "^4.2.2",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.1",
+    "eslint": "^8.57.0",
+    "tailwindcss": "^4.2.2",
+    "tsup": "^8.0.2",
+    "tsx": "^4.19.0",
+    "typescript": "5.5.4"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/scripts/build-css.ts

@@ -0,0 +1,27 @@
+import { execSync } from "child_process";
+import { readFileSync, writeFileSync, mkdirSync } from "fs";
+import { resolve } from "path";
+
+const root = resolve(__dirname, "..");
+const distDir = resolve(root, "dist");
+const outCss = resolve(distDir, "styles.css");
+const stylesTsPath = resolve(root, "src/styles/styles-css.ts");
+
+// Ensure dist/ exists
+mkdirSync(distDir, { recursive: true });
+
+// Compile globals.css → dist/styles.css using @tailwindcss/cli
+execSync(
+  `npx @tailwindcss/cli -i src/styles/globals.css -o dist/styles.css --minify`,
+  { cwd: root, stdio: "inherit" }
+);
+
+// Read compiled CSS and write as TS string constant
+const css = readFileSync(outCss, "utf-8");
+const escaped = css.replace(/\\/g, "\\\\").replace(/`/g, "\\`").replace(/\$/g, "\\$");
+writeFileSync(
+  stylesTsPath,
+  `export const STYLES_CSS = \`${escaped}\`;\n`
+);
+
+console.log("Built dist/styles.css and src/styles/styles-css.ts");

package/src/components/ui/button.tsx

@@ -0,0 +1,67 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "../../lib/utils"
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        outline:
+          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive:
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default:
+          "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
+        icon: "size-8",
+        "icon-xs":
+          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm":
+          "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot.Root : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

package/src/index.ts

@@ -0,0 +1,3 @@
+export { ShadcnProvider } from "./provider";
+export type { ShadcnProviderProps } from "./provider";
+export { Button, buttonVariants } from "./components/ui/button";

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/src/provider/ShadcnProvider.tsx

@@ -0,0 +1,89 @@
+import React, { useMemo, useId } from "react";
+import { STYLES_CSS } from "../styles/styles-css";
+
+export interface ShadcnProviderProps {
+  children: React.ReactNode;
+  /** Primary brand color as hex (e.g. "#4f46e5"). Overrides the default --shadcn-primary. */
+  primary?: string;
+  /** Secondary brand color as hex (e.g. "#7c3aed"). Overrides the default --shadcn-secondary. */
+  secondary?: string;
+}
+
+function hexToOklchCss(hex: string): string {
+  // Convert hex to RGB
+  const r = parseInt(hex.slice(1, 3), 16) / 255;
+  const g = parseInt(hex.slice(3, 5), 16) / 255;
+  const b = parseInt(hex.slice(5, 7), 16) / 255;
+
+  // RGB to linear RGB
+  const toLinear = (c: number) =>
+    c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+  const lr = toLinear(r);
+  const lg = toLinear(g);
+  const lb = toLinear(b);
+
+  // Linear RGB to OKLab
+  const l_ = Math.cbrt(0.4122214708 * lr + 0.5363325363 * lg + 0.0514459929 * lb);
+  const m_ = Math.cbrt(0.2119034982 * lr + 0.6806995451 * lg + 0.1073969566 * lb);
+  const s_ = Math.cbrt(0.0883024619 * lr + 0.2817188376 * lg + 0.6299787005 * lb);
+
+  const L = 0.2104542553 * l_ + 0.7936177850 * m_ - 0.0040720468 * s_;
+  const a = 1.9779984951 * l_ - 2.4285922050 * m_ + 0.4505937099 * s_;
+  const bOk = 0.0259040371 * l_ + 0.7827717662 * m_ - 0.8086757660 * s_;
+
+  // OKLab to OKLCH
+  const C = Math.sqrt(a * a + bOk * bOk);
+  const h = C < 0.0001 ? 0 : ((Math.atan2(bOk, a) * 180) / Math.PI + 360) % 360;
+
+  return `oklch(${L.toFixed(3)} ${C.toFixed(3)} ${h.toFixed(3)})`;
+}
+
+function computeContrastForeground(hex: string): string {
+  const r = parseInt(hex.slice(1, 3), 16) / 255;
+  const g = parseInt(hex.slice(3, 5), 16) / 255;
+  const b = parseInt(hex.slice(5, 7), 16) / 255;
+  const toLinear = (c: number) =>
+    c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+  const luminance = 0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b);
+  return luminance > 0.179 ? "oklch(0.145 0 0)" : "oklch(0.985 0 0)";
+}
+
+export function ShadcnProvider({
+  children,
+  primary,
+  secondary,
+}: ShadcnProviderProps): JSX.Element {
+  const styleId = useId().replace(/:/g, "-");
+
+  const themeOverrides = useMemo(() => {
+    const overrides: string[] = [];
+    if (primary) {
+      overrides.push(`--shadcn-primary: ${hexToOklchCss(primary)}`);
+      overrides.push(`--shadcn-primary-foreground: ${computeContrastForeground(primary)}`);
+    }
+    if (secondary) {
+      overrides.push(`--shadcn-secondary: ${hexToOklchCss(secondary)}`);
+      overrides.push(`--shadcn-secondary-foreground: ${computeContrastForeground(secondary)}`);
+    }
+    if (overrides.length === 0) return "";
+    return `:root { ${overrides.join("; ")}; }`;
+  }, [primary, secondary]);
+
+  return (
+    <>
+      {STYLES_CSS ? (
+        <style id={`shadcn-styles-${styleId}`} data-shadcn-styles>
+          {STYLES_CSS}
+        </style>
+      ) : null}
+      {themeOverrides ? (
+        <style id={`shadcn-theme-${styleId}`} data-shadcn-theme>
+          {themeOverrides}
+        </style>
+      ) : null}
+      {children}
+    </>
+  );
+}
+
+ShadcnProvider.displayName = "ShadcnProvider";

package/src/provider/index.ts

@@ -0,0 +1,2 @@
+export { ShadcnProvider } from "./ShadcnProvider";
+export type { ShadcnProviderProps } from "./ShadcnProvider";

package/src/styles/globals.css

@@ -0,0 +1,119 @@
+@import "tailwindcss/theme.css";
+@import "tailwindcss/utilities.css";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+@import "@fontsource-variable/figtree";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+    --font-heading: var(--font-sans);
+    --font-sans: 'Figtree Variable', sans-serif;
+    --color-sidebar-ring: var(--shadcn-sidebar-ring);
+    --color-sidebar-border: var(--shadcn-sidebar-border);
+    --color-sidebar-accent-foreground: var(--shadcn-sidebar-accent-foreground);
+    --color-sidebar-accent: var(--shadcn-sidebar-accent);
+    --color-sidebar-primary-foreground: var(--shadcn-sidebar-primary-foreground);
+    --color-sidebar-primary: var(--shadcn-sidebar-primary);
+    --color-sidebar-foreground: var(--shadcn-sidebar-foreground);
+    --color-sidebar: var(--shadcn-sidebar);
+    --color-chart-5: var(--shadcn-chart-5);
+    --color-chart-4: var(--shadcn-chart-4);
+    --color-chart-3: var(--shadcn-chart-3);
+    --color-chart-2: var(--shadcn-chart-2);
+    --color-chart-1: var(--shadcn-chart-1);
+    --color-ring: var(--shadcn-ring);
+    --color-input: var(--shadcn-input);
+    --color-border: var(--shadcn-border);
+    --color-destructive: var(--shadcn-destructive);
+    --color-accent-foreground: var(--shadcn-accent-foreground);
+    --color-accent: var(--shadcn-accent);
+    --color-muted-foreground: var(--shadcn-muted-foreground);
+    --color-muted: var(--shadcn-muted);
+    --color-secondary-foreground: var(--shadcn-secondary-foreground);
+    --color-secondary: var(--shadcn-secondary);
+    --color-primary-foreground: var(--shadcn-primary-foreground);
+    --color-primary: var(--shadcn-primary);
+    --color-popover-foreground: var(--shadcn-popover-foreground);
+    --color-popover: var(--shadcn-popover);
+    --color-card-foreground: var(--shadcn-card-foreground);
+    --color-card: var(--shadcn-card);
+    --color-foreground: var(--shadcn-foreground);
+    --color-background: var(--shadcn-background);
+    --radius-sm: calc(var(--shadcn-radius) * 0.6);
+    --radius-md: calc(var(--shadcn-radius) * 0.8);
+    --radius-lg: var(--shadcn-radius);
+    --radius-xl: calc(var(--shadcn-radius) * 1.4);
+    --radius-2xl: calc(var(--shadcn-radius) * 1.8);
+    --radius-3xl: calc(var(--shadcn-radius) * 2.2);
+    --radius-4xl: calc(var(--shadcn-radius) * 2.6);
+}
+
+:root {
+    --shadcn-background: oklch(1 0 0);
+    --shadcn-foreground: oklch(0.145 0 0);
+    --shadcn-card: oklch(1 0 0);
+    --shadcn-card-foreground: oklch(0.145 0 0);
+    --shadcn-popover: oklch(1 0 0);
+    --shadcn-popover-foreground: oklch(0.145 0 0);
+    --shadcn-primary: oklch(0.532 0.157 131.589);
+    --shadcn-primary-foreground: oklch(0.986 0.031 120.757);
+    --shadcn-secondary: oklch(0.967 0.001 286.375);
+    --shadcn-secondary-foreground: oklch(0.21 0.006 285.885);
+    --shadcn-muted: oklch(0.97 0 0);
+    --shadcn-muted-foreground: oklch(0.556 0 0);
+    --shadcn-accent: oklch(0.97 0 0);
+    --shadcn-accent-foreground: oklch(0.205 0 0);
+    --shadcn-destructive: oklch(0.577 0.245 27.325);
+    --shadcn-border: oklch(0.922 0 0);
+    --shadcn-input: oklch(0.922 0 0);
+    --shadcn-ring: oklch(0.708 0 0);
+    --shadcn-chart-1: oklch(0.871 0.15 154.449);
+    --shadcn-chart-2: oklch(0.723 0.219 149.579);
+    --shadcn-chart-3: oklch(0.627 0.194 149.214);
+    --shadcn-chart-4: oklch(0.527 0.154 150.069);
+    --shadcn-chart-5: oklch(0.448 0.119 151.328);
+    --shadcn-radius: 0;
+    --shadcn-sidebar: oklch(0.985 0 0);
+    --shadcn-sidebar-foreground: oklch(0.145 0 0);
+    --shadcn-sidebar-primary: oklch(0.648 0.2 131.684);
+    --shadcn-sidebar-primary-foreground: oklch(0.986 0.031 120.757);
+    --shadcn-sidebar-accent: oklch(0.97 0 0);
+    --shadcn-sidebar-accent-foreground: oklch(0.205 0 0);
+    --shadcn-sidebar-border: oklch(0.922 0 0);
+    --shadcn-sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+    --shadcn-background: oklch(0.145 0 0);
+    --shadcn-foreground: oklch(0.985 0 0);
+    --shadcn-card: oklch(0.205 0 0);
+    --shadcn-card-foreground: oklch(0.985 0 0);
+    --shadcn-popover: oklch(0.205 0 0);
+    --shadcn-popover-foreground: oklch(0.985 0 0);
+    --shadcn-primary: oklch(0.453 0.124 130.933);
+    --shadcn-primary-foreground: oklch(0.986 0.031 120.757);
+    --shadcn-secondary: oklch(0.274 0.006 286.033);
+    --shadcn-secondary-foreground: oklch(0.985 0 0);
+    --shadcn-muted: oklch(0.269 0 0);
+    --shadcn-muted-foreground: oklch(0.708 0 0);
+    --shadcn-accent: oklch(0.269 0 0);
+    --shadcn-accent-foreground: oklch(0.985 0 0);
+    --shadcn-destructive: oklch(0.704 0.191 22.216);
+    --shadcn-border: oklch(1 0 0 / 10%);
+    --shadcn-input: oklch(1 0 0 / 15%);
+    --shadcn-ring: oklch(0.556 0 0);
+    --shadcn-chart-1: oklch(0.871 0.15 154.449);
+    --shadcn-chart-2: oklch(0.723 0.219 149.579);
+    --shadcn-chart-3: oklch(0.627 0.194 149.214);
+    --shadcn-chart-4: oklch(0.527 0.154 150.069);
+    --shadcn-chart-5: oklch(0.448 0.119 151.328);
+    --shadcn-sidebar: oklch(0.205 0 0);
+    --shadcn-sidebar-foreground: oklch(0.985 0 0);
+    --shadcn-sidebar-primary: oklch(0.768 0.233 130.85);
+    --shadcn-sidebar-primary-foreground: oklch(0.986 0.031 120.757);
+    --shadcn-sidebar-accent: oklch(0.269 0 0);
+    --shadcn-sidebar-accent-foreground: oklch(0.985 0 0);
+    --shadcn-sidebar-border: oklch(1 0 0 / 10%);
+    --shadcn-sidebar-ring: oklch(0.556 0 0);
+}

package/src/styles/styles-css.ts

@@ -0,0 +1,2 @@
+export const STYLES_CSS = `/*! tailwindcss v4.2.2 | 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-border-style:solid;--tw-font-weight:initial;--tw-outline-style:solid;--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;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-animation-delay:0s;--tw-animation-direction:normal;--tw-animation-duration:initial;--tw-animation-fill-mode:none;--tw-animation-iteration-count:1;--tw-enter-blur:0;--tw-enter-opacity:1;--tw-enter-rotate:0;--tw-enter-scale:1;--tw-enter-translate-x:0;--tw-enter-translate-y:0;--tw-exit-blur:0;--tw-exit-opacity:1;--tw-exit-rotate:0;--tw-exit-scale:1;--tw-exit-translate-x:0;--tw-exit-translate-y:0}}}:root,:host{--font-sans:"Figtree Variable", sans-serif;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--font-weight-medium:500;--radius-md:calc(var(--shadcn-radius) * .8);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1)}.inline-flex{display:inline-flex}.size-6{width:calc(var(--spacing) * 6);height:calc(var(--spacing) * 6)}.size-7{width:calc(var(--spacing) * 7);height:calc(var(--spacing) * 7)}.size-8{width:calc(var(--spacing) * 8);height:calc(var(--spacing) * 8)}.size-9{width:calc(var(--spacing) * 9);height:calc(var(--spacing) * 9)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.shrink-0{flex-shrink:0}.items-center{align-items:center}.justify-center{justify-content:center}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\\.5{gap:calc(var(--spacing) * 1.5)}.rounded-\\[min\\(var\\(--radius-md\\)\\,10px\\)\\]{border-radius:min(var(--radius-md), 10px)}.rounded-\\[min\\(var\\(--radius-md\\)\\,12px\\)\\]{border-radius:min(var(--radius-md), 12px)}.rounded-lg{border-radius:var(--shadcn-radius)}.border{border-style:var(--tw-border-style);border-width:1px}.border-border{border-color:var(--shadcn-border)}.border-transparent{border-color:#0000}.bg-background{background-color:var(--shadcn-background)}.bg-destructive,.bg-destructive\\/10{background-color:var(--shadcn-destructive)}@supports (color:color-mix(in lab, red, red)){.bg-destructive\\/10{background-color:color-mix(in oklab, var(--shadcn-destructive) 10%, transparent)}}.bg-primary{background-color:var(--shadcn-primary)}.bg-secondary{background-color:var(--shadcn-secondary)}.bg-clip-padding{background-clip:padding-box}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\\.5{padding-inline:calc(var(--spacing) * 2.5)}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\\[0\\.8rem\\]{font-size:.8rem}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.whitespace-nowrap{white-space:nowrap}.text-destructive{color:var(--shadcn-destructive)}.text-primary{color:var(--shadcn-primary)}.text-primary-foreground{color:var(--shadcn-primary-foreground)}.text-secondary-foreground{color:var(--shadcn-secondary-foreground)}.underline-offset-4{text-underline-offset:4px}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}@media (hover:hover){.hover\\:bg-destructive\\/20:hover{background-color:var(--shadcn-destructive)}@supports (color:color-mix(in lab, red, red)){.hover\\:bg-destructive\\/20:hover{background-color:color-mix(in oklab, var(--shadcn-destructive) 20%, transparent)}}.hover\\:bg-muted:hover{background-color:var(--shadcn-muted)}.hover\\:bg-secondary\\/80:hover{background-color:var(--shadcn-secondary)}@supports (color:color-mix(in lab, red, red)){.hover\\:bg-secondary\\/80:hover{background-color:color-mix(in oklab, var(--shadcn-secondary) 80%, transparent)}}.hover\\:text-foreground:hover{color:var(--shadcn-foreground)}.hover\\:underline:hover{text-decoration-line:underline}}.focus-visible\\:border-destructive\\/40:focus-visible{border-color:var(--shadcn-destructive)}@supports (color:color-mix(in lab, red, red)){.focus-visible\\:border-destructive\\/40:focus-visible{border-color:color-mix(in oklab, var(--shadcn-destructive) 40%, transparent)}}.focus-visible\\:border-ring:focus-visible{border-color:var(--shadcn-ring)}.focus-visible\\:ring-3:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + 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-destructive\\/20:focus-visible{--tw-ring-color:var(--shadcn-destructive)}@supports (color:color-mix(in lab, red, red)){.focus-visible\\:ring-destructive\\/20:focus-visible{--tw-ring-color:color-mix(in oklab, var(--shadcn-destructive) 20%, transparent)}}.focus-visible\\:ring-ring\\/50:focus-visible{--tw-ring-color:var(--shadcn-ring)}@supports (color:color-mix(in lab, red, red)){.focus-visible\\:ring-ring\\/50:focus-visible{--tw-ring-color:color-mix(in oklab, var(--shadcn-ring) 50%, transparent)}}.active\\:translate-y-px:active{--tw-translate-y:1px;translate:var(--tw-translate-x) var(--tw-translate-y)}.disabled\\:pointer-events-none:disabled{pointer-events:none}.disabled\\:opacity-50:disabled{opacity:.5}:where([data-slot=button-group]) .in-data-\\[slot\\=button-group\\]\\:rounded-lg{border-radius:var(--shadcn-radius)}.has-data-\\[icon\\=inline-end\\]\\:pr-1\\.5:has([data-icon=inline-end]){padding-right:calc(var(--spacing) * 1.5)}.has-data-\\[icon\\=inline-end\\]\\:pr-2:has([data-icon=inline-end]){padding-right:calc(var(--spacing) * 2)}.has-data-\\[icon\\=inline-end\\]\\:pr-3:has([data-icon=inline-end]){padding-right:calc(var(--spacing) * 3)}.has-data-\\[icon\\=inline-start\\]\\:pl-1\\.5:has([data-icon=inline-start]){padding-left:calc(var(--spacing) * 1.5)}.has-data-\\[icon\\=inline-start\\]\\:pl-2:has([data-icon=inline-start]){padding-left:calc(var(--spacing) * 2)}.has-data-\\[icon\\=inline-start\\]\\:pl-3:has([data-icon=inline-start]){padding-left:calc(var(--spacing) * 3)}.aria-expanded\\:bg-muted[aria-expanded=true]{background-color:var(--shadcn-muted)}.aria-expanded\\:bg-secondary[aria-expanded=true]{background-color:var(--shadcn-secondary)}.aria-expanded\\:text-foreground[aria-expanded=true]{color:var(--shadcn-foreground)}.aria-expanded\\:text-secondary-foreground[aria-expanded=true]{color:var(--shadcn-secondary-foreground)}.aria-invalid\\:border-destructive[aria-invalid=true]{border-color:var(--shadcn-destructive)}.aria-invalid\\:ring-3[aria-invalid=true]{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + 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)}.aria-invalid\\:ring-destructive\\/20[aria-invalid=true]{--tw-ring-color:var(--shadcn-destructive)}@supports (color:color-mix(in lab, red, red)){.aria-invalid\\:ring-destructive\\/20[aria-invalid=true]{--tw-ring-color:color-mix(in oklab, var(--shadcn-destructive) 20%, transparent)}}.dark\\:border-input:is(.dark *){border-color:var(--shadcn-input)}.dark\\:bg-destructive\\/20:is(.dark *){background-color:var(--shadcn-destructive)}@supports (color:color-mix(in lab, red, red)){.dark\\:bg-destructive\\/20:is(.dark *){background-color:color-mix(in oklab, var(--shadcn-destructive) 20%, transparent)}}.dark\\:bg-input\\/30:is(.dark *){background-color:var(--shadcn-input)}@supports (color:color-mix(in lab, red, red)){.dark\\:bg-input\\/30:is(.dark *){background-color:color-mix(in oklab, var(--shadcn-input) 30%, transparent)}}@media (hover:hover){.dark\\:hover\\:bg-destructive\\/30:is(.dark *):hover{background-color:var(--shadcn-destructive)}@supports (color:color-mix(in lab, red, red)){.dark\\:hover\\:bg-destructive\\/30:is(.dark *):hover{background-color:color-mix(in oklab, var(--shadcn-destructive) 30%, transparent)}}.dark\\:hover\\:bg-input\\/50:is(.dark *):hover{background-color:var(--shadcn-input)}@supports (color:color-mix(in lab, red, red)){.dark\\:hover\\:bg-input\\/50:is(.dark *):hover{background-color:color-mix(in oklab, var(--shadcn-input) 50%, transparent)}}.dark\\:hover\\:bg-muted\\/50:is(.dark *):hover{background-color:var(--shadcn-muted)}@supports (color:color-mix(in lab, red, red)){.dark\\:hover\\:bg-muted\\/50:is(.dark *):hover{background-color:color-mix(in oklab, var(--shadcn-muted) 50%, transparent)}}}.dark\\:focus-visible\\:ring-destructive\\/40:is(.dark *):focus-visible{--tw-ring-color:var(--shadcn-destructive)}@supports (color:color-mix(in lab, red, red)){.dark\\:focus-visible\\:ring-destructive\\/40:is(.dark *):focus-visible{--tw-ring-color:color-mix(in oklab, var(--shadcn-destructive) 40%, transparent)}}.dark\\:aria-invalid\\:border-destructive\\/50:is(.dark *)[aria-invalid=true]{border-color:var(--shadcn-destructive)}@supports (color:color-mix(in lab, red, red)){.dark\\:aria-invalid\\:border-destructive\\/50:is(.dark *)[aria-invalid=true]{border-color:color-mix(in oklab, var(--shadcn-destructive) 50%, transparent)}}.dark\\:aria-invalid\\:ring-destructive\\/40:is(.dark *)[aria-invalid=true]{--tw-ring-color:var(--shadcn-destructive)}@supports (color:color-mix(in lab, red, red)){.dark\\:aria-invalid\\:ring-destructive\\/40:is(.dark *)[aria-invalid=true]{--tw-ring-color:color-mix(in oklab, var(--shadcn-destructive) 40%, transparent)}}.\\[\\&_svg\\]\\:pointer-events-none svg{pointer-events:none}.\\[\\&_svg\\]\\:shrink-0 svg{flex-shrink:0}.\\[\\&_svg\\:not\\(\\[class\\*\\=\\'size-\\'\\]\\)\\]\\:size-3 svg:not([class*=size-]){width:calc(var(--spacing) * 3);height:calc(var(--spacing) * 3)}.\\[\\&_svg\\:not\\(\\[class\\*\\=\\'size-\\'\\]\\)\\]\\:size-3\\.5 svg:not([class*=size-]){width:calc(var(--spacing) * 3.5);height:calc(var(--spacing) * 3.5)}.\\[\\&_svg\\:not\\(\\[class\\*\\=\\'size-\\'\\]\\)\\]\\:size-4 svg:not([class*=size-]){width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}@media (hover:hover){.\\[a\\]\\:hover\\:bg-primary\\/80:is(a):hover{background-color:var(--shadcn-primary)}@supports (color:color-mix(in lab, red, red)){.\\[a\\]\\:hover\\:bg-primary\\/80:is(a):hover{background-color:color-mix(in oklab, var(--shadcn-primary) 80%, transparent)}}}@property --tw-animation-delay{syntax:"*";inherits:false;initial-value:0s}@property --tw-animation-direction{syntax:"*";inherits:false;initial-value:normal}@property --tw-animation-duration{syntax:"*";inherits:false}@property --tw-animation-fill-mode{syntax:"*";inherits:false;initial-value:none}@property --tw-animation-iteration-count{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-blur{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-blur{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-translate-y{syntax:"*";inherits:false;initial-value:0}@font-face{font-family:Figtree Variable;font-style:normal;font-display:swap;font-weight:300 900;src:url(./files/figtree-latin-ext-wght-normal.woff2)format("woff2-variations");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Figtree Variable;font-style:normal;font-display:swap;font-weight:300 900;src:url(./files/figtree-latin-wght-normal.woff2)format("woff2-variations");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--shadcn-background:oklch(100% 0 0);--shadcn-foreground:oklch(14.5% 0 0);--shadcn-card:oklch(100% 0 0);--shadcn-card-foreground:oklch(14.5% 0 0);--shadcn-popover:oklch(100% 0 0);--shadcn-popover-foreground:oklch(14.5% 0 0);--shadcn-primary:oklch(53.2% .157 131.589);--shadcn-primary-foreground:oklch(98.6% .031 120.757);--shadcn-secondary:oklch(96.7% .001 286.375);--shadcn-secondary-foreground:oklch(21% .006 285.885);--shadcn-muted:oklch(97% 0 0);--shadcn-muted-foreground:oklch(55.6% 0 0);--shadcn-accent:oklch(97% 0 0);--shadcn-accent-foreground:oklch(20.5% 0 0);--shadcn-destructive:oklch(57.7% .245 27.325);--shadcn-border:oklch(92.2% 0 0);--shadcn-input:oklch(92.2% 0 0);--shadcn-ring:oklch(70.8% 0 0);--shadcn-chart-1:oklch(87.1% .15 154.449);--shadcn-chart-2:oklch(72.3% .219 149.579);--shadcn-chart-3:oklch(62.7% .194 149.214);--shadcn-chart-4:oklch(52.7% .154 150.069);--shadcn-chart-5:oklch(44.8% .119 151.328);--shadcn-radius:0;--shadcn-sidebar:oklch(98.5% 0 0);--shadcn-sidebar-foreground:oklch(14.5% 0 0);--shadcn-sidebar-primary:oklch(64.8% .2 131.684);--shadcn-sidebar-primary-foreground:oklch(98.6% .031 120.757);--shadcn-sidebar-accent:oklch(97% 0 0);--shadcn-sidebar-accent-foreground:oklch(20.5% 0 0);--shadcn-sidebar-border:oklch(92.2% 0 0);--shadcn-sidebar-ring:oklch(70.8% 0 0)}.dark{--shadcn-background:oklch(14.5% 0 0);--shadcn-foreground:oklch(98.5% 0 0);--shadcn-card:oklch(20.5% 0 0);--shadcn-card-foreground:oklch(98.5% 0 0);--shadcn-popover:oklch(20.5% 0 0);--shadcn-popover-foreground:oklch(98.5% 0 0);--shadcn-primary:oklch(45.3% .124 130.933);--shadcn-primary-foreground:oklch(98.6% .031 120.757);--shadcn-secondary:oklch(27.4% .006 286.033);--shadcn-secondary-foreground:oklch(98.5% 0 0);--shadcn-muted:oklch(26.9% 0 0);--shadcn-muted-foreground:oklch(70.8% 0 0);--shadcn-accent:oklch(26.9% 0 0);--shadcn-accent-foreground:oklch(98.5% 0 0);--shadcn-destructive:oklch(70.4% .191 22.216);--shadcn-border:oklch(100% 0 0/.1);--shadcn-input:oklch(100% 0 0/.15);--shadcn-ring:oklch(55.6% 0 0);--shadcn-chart-1:oklch(87.1% .15 154.449);--shadcn-chart-2:oklch(72.3% .219 149.579);--shadcn-chart-3:oklch(62.7% .194 149.214);--shadcn-chart-4:oklch(52.7% .154 150.069);--shadcn-chart-5:oklch(44.8% .119 151.328);--shadcn-sidebar:oklch(20.5% 0 0);--shadcn-sidebar-foreground:oklch(98.5% 0 0);--shadcn-sidebar-primary:oklch(76.8% .233 130.85);--shadcn-sidebar-primary-foreground:oklch(98.6% .031 120.757);--shadcn-sidebar-accent:oklch(26.9% 0 0);--shadcn-sidebar-accent-foreground:oklch(98.5% 0 0);--shadcn-sidebar-border:oklch(100% 0 0/.1);--shadcn-sidebar-ring:oklch(55.6% 0 0)}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@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}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}`;

package/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "@repo/typescript-config/react-library.json",
+  "include": ["."],
+  "exclude": ["dist", "build", "node_modules"],
+  "compilerOptions": {
+    "strictNullChecks": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

package/tsup.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig((options) => ({
+  entryPoints: ["src/index.ts"],
+  format: ["cjs", "esm"],
+  dts: true,
+  external: ["react", "react-dom"],
+  ...options,
+}));