@monkey-mini-app/ui 0.1.0 → 0.1.1

package/dist/manifest.json

@@ -1,11 +1,11 @@
 {
-  "builtAt": "2026-08-30T11:02:56.451Z",
+  "builtAt": "2026-08-31T11:56:21.707Z",
   "entry": "index.js",
   "flatExports": 138,
   "componentFiles": 141,
   "srcFiles": 144,
   "css": {
-    "bytes": 215063
+    "bytes": 256587
   },
-  "bytes": 814789
+  "bytes": 857408
 }

package/dist/src/blocks/bar-chart.tsx

@@ -8,18 +8,21 @@ import {
   ChartTooltipContent,
   type ChartConfig,
 } from "@monkey-mini-app/ui/components/chart"
+import { cn } from "@monkey-mini-app/ui/lib/utils"
 
 export function StackedBarChart({
   data,
   config,
   keys,
+  className,
 }: {
   data: Record<string, string | number>[]
   config: ChartConfig
   keys: string[]
+  className?: string
 }) {
   return (
-    <ChartContainer config={config} className="h-56 w-full" data-testid="bar-chart">
+    <ChartContainer config={config} className={cn("aspect-video w-full", className)} data-testid="bar-chart">
       <ReBar accessibilityLayer data={data}>
         <CartesianGrid vertical={false} />
         <XAxis dataKey="label" tickLine={false} axisLine={false} />

package/dist/src/blocks/donut-chart.tsx

@@ -9,20 +9,30 @@ import {
   type ChartConfig,
 } from "@monkey-mini-app/ui/components/chart"
 
+import { cn } from "@monkey-mini-app/ui/lib/utils"
+
 export type Slice = { name: string; value: number; fill: string }
 
 export function DonutChart({
   data,
   config,
   center,
+  size,
+  className,
 }: {
   data: Slice[]
   config: ChartConfig
   center?: string
+  size?: number
+  className?: string
 }) {
   return (
-    <div className="relative" data-testid="donut-chart">
-      <ChartContainer config={config} className="mx-auto aspect-square h-48">
+    <div className={cn("relative", className)} data-testid="donut-chart">
+      <ChartContainer
+        config={config}
+        className={cn("mx-auto aspect-square", size ? "" : "w-full max-w-80")}
+        style={size ? { width: size, height: size } : undefined}
+      >
         <PieChart>
           <ChartTooltip content={<ChartTooltipContent hideLabel />} />
           <Pie data={data} dataKey="value" nameKey="name" innerRadius={50} />

package/dist/src/blocks/gauge.tsx

@@ -1,13 +1,29 @@
 import { ProgressRing } from "@monkey-mini-app/ui/blocks/progress-ring"
+import { cn } from "@monkey-mini-app/ui/lib/utils"
 
-export function Gauge({ value, label }: { value: number; label?: string }) {
+export function Gauge({
+  value,
+  label,
+  size = 112,
+  className,
+}: {
+  value: number
+  label?: string
+  size?: number
+  className?: string
+}) {
   return (
-    <div className="flex items-center gap-2" data-testid="gauge">
-      <ProgressRing value={value} />
-      <div>
-        <div className="text-sm font-medium">{value}%</div>
-        {label ? <div className="text-muted-foreground text-xs">{label}</div> : null}
+    <div
+      className={cn("flex flex-col items-center gap-2", className)}
+      data-testid="gauge"
+    >
+      <div className="relative" style={{ width: size, height: size }}>
+        <ProgressRing value={value} className="h-full w-full" />
+        <div className="absolute inset-0 flex flex-col items-center justify-center">
+          <span className="text-2xl font-semibold tabular-nums">{value}%</span>
+        </div>
       </div>
+      {label ? <div className="text-xs text-muted-foreground">{label}</div> : null}
     </div>
   )
 }

package/dist/src/blocks/progress-ring.tsx

@@ -1,4 +1,14 @@
-export function ProgressRing({ value }: { value: number }) {
+import { cn } from "../lib/utils"
+
+export function ProgressRing({
+  value,
+  size,
+  className,
+}: {
+  value: number
+  size?: number
+  className?: string
+}) {
   const clamped = Math.min(100, Math.max(0, value))
   const r = 16
   const c = 2 * Math.PI * r
@@ -7,7 +17,8 @@ export function ProgressRing({ value }: { value: number }) {
     <svg
       data-testid="progress-ring"
       viewBox="0 0 40 40"
-      className="size-10 -rotate-90"
+      style={size ? { width: size, height: size } : undefined}
+      className={cn("-rotate-90 size-10", className)}
     >
       <circle cx="20" cy="20" r={r} className="fill-none stroke-muted" strokeWidth="4" />
       <circle

package/dist/src/blocks/radar-chart.tsx

@@ -8,18 +8,28 @@ import {
   ChartTooltipContent,
   type ChartConfig,
 } from "@monkey-mini-app/ui/components/chart"
+import { cn } from "@monkey-mini-app/ui/lib/utils"
 
 export function RadarChart({
   data,
   config,
   dataKey = "value",
+  size,
+  className,
 }: {
   data: { label: string; value: number }[]
   config: ChartConfig
   dataKey?: string
+  size?: number
+  className?: string
 }) {
   return (
-    <ChartContainer config={config} className="mx-auto aspect-square h-56" data-testid="radar-chart">
+    <ChartContainer
+      config={config}
+      className={cn("mx-auto aspect-square", size ? "" : "w-full max-w-80", className)}
+      style={size ? { width: size, height: size } : undefined}
+      data-testid="radar-chart"
+    >
       <ReRadar data={data}>
         <PolarGrid />
         <PolarAngleAxis dataKey="label" />

package/dist/src/blocks/sparkline.tsx

@@ -1,17 +1,19 @@
 "use client"
 
-import { Line, LineChart } from "recharts"
+import { Line, LineChart, YAxis } from "recharts"
 
 import { ChartContainer, type ChartConfig } from "@monkey-mini-app/ui/components/chart"
+import { cn } from "@monkey-mini-app/ui/lib/utils"
 
 const config = {
   value: { label: "Value", color: "var(--chart-1)" },
 } satisfies ChartConfig
 
-export function Sparkline({ data }: { data: { value: number }[] }) {
+export function Sparkline({ data, className }: { data: { value: number }[]; className?: string }) {
   return (
-    <ChartContainer config={config} className="h-10 w-24" data-testid="sparkline">
+    <ChartContainer config={config} className={cn("h-20 w-full", className)} data-testid="sparkline">
       <LineChart data={data}>
+        <YAxis hide domain={["dataMin", "dataMax"]} />
         <Line dataKey="value" type="monotone" stroke="var(--color-value)" strokeWidth={1.5} dot={false} />
       </LineChart>
     </ChartContainer>

package/dist/src/styles/globals.css

@@ -5,13 +5,12 @@
 
 @custom-variant dark (&:is(.dark *));
 
-/* No @source directives: generate the FULL default Tailwind utility set (incl. all
-   responsive variants). Runtime mini-apps live outside this repo and would otherwise
-   miss any class that never appears here (e.g. lg:grid-cols-2) — the per-app Tailwind
-   re-scan was unreliable. A single comprehensive stylesheet served to every app is
-   ~480KB but shared/cached, covers all standard classes, and removes the fragile
-   per-app compile. Arbitrary values (w-[320px]) are NOT auto-generated by Tailwind;
-   apps should stick to standard utilities. */
+/* Base: theme + components + repo-scanned utilities. Runtime mini-apps' OWN utilities
+   are compiled per-app (the host copies the app dir into the project root and @source's
+   it), so their classes are never missed. */
+@source "../../../../apps/**/*.{ts,tsx}";
+@source "../../../../packages/ui/src/**/*.{ts,tsx}";
+@source "../**/*.{ts,tsx}";
 
 @theme inline {
     --font-heading: var(--font-sans);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monkey-mini-app/ui",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "type": "module",
   "private": false,
   "scripts": {
@@ -96,5 +96,8 @@
   "files": [
     "dist",
     "components.json"
-  ]
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
 }