@handled-ai/design-system 0.8.0 → 0.9.0

package/package.json

@@ -1,20 +1,82 @@
 {
   "name": "@handled-ai/design-system",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "Handled UI component library (shadcn-style, New York)",
   "type": "module",
   "packageManager": "pnpm@9.12.0",
+  "sideEffects": [
+    "**/*.css"
+  ],
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
+      "source": "./src/index.ts",
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
-    }
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./components/*": {
+      "source": "./src/components/*.tsx",
+      "types": "./dist/components/*.d.ts",
+      "import": "./dist/components/*.js",
+      "default": "./dist/components/*.js"
+    },
+    "./hooks/*": {
+      "source": "./src/hooks/*.ts",
+      "types": "./dist/hooks/*.d.ts",
+      "import": "./dist/hooks/*.js",
+      "default": "./dist/hooks/*.js"
+    },
+    "./lib/*": {
+      "source": "./src/lib/*.ts",
+      "types": "./dist/lib/*.d.ts",
+      "import": "./dist/lib/*.js",
+      "default": "./dist/lib/*.js"
+    },
+    "./charts": {
+      "source": "./src/charts/index.ts",
+      "types": "./dist/charts/index.d.ts",
+      "import": "./dist/charts/index.js",
+      "default": "./dist/charts/index.js"
+    },
+    "./charts/*": {
+      "source": "./src/charts/*.tsx",
+      "types": "./dist/charts/*.d.ts",
+      "import": "./dist/charts/*.js",
+      "default": "./dist/charts/*.js"
+    },
+    "./three": {
+      "source": "./src/three/index.ts",
+      "types": "./dist/three/index.d.ts",
+      "import": "./dist/three/index.js",
+      "default": "./dist/three/index.js"
+    },
+    "./three/*": {
+      "source": "./src/three/*.tsx",
+      "types": "./dist/three/*.d.ts",
+      "import": "./dist/three/*.js",
+      "default": "./dist/three/*.js"
+    },
+    "./prototype": {
+      "source": "./src/prototype/index.ts",
+      "types": "./dist/prototype/index.d.ts",
+      "import": "./dist/prototype/index.js",
+      "default": "./dist/prototype/index.js"
+    },
+    "./prototype/*": {
+      "source": "./src/prototype/*.tsx",
+      "types": "./dist/prototype/*.d.ts",
+      "import": "./dist/prototype/*.js",
+      "default": "./dist/prototype/*.js"
+    },
+    "./styles.css": "./src/styles/globals.css",
+    "./package.json": "./package.json"
   },
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "repository": {
     "type": "git",
@@ -44,8 +106,10 @@
     "prepublishOnly": "npm run build:lib"
   },
   "peerDependencies": {
-    "@radix-ui/react-label": "^2.0.0",
-    "@radix-ui/react-slot": "^1.0.0",
+    "@nivo/core": ">=0.80.0",
+    "@nivo/sankey": ">=0.80.0",
+    "@react-three/drei": "^9.0.0 || ^10.0.0",
+    "@react-three/fiber": "^8.0.0 || ^9.0.0",
     "@tanstack/react-table": "^8.21.3",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
@@ -55,20 +119,35 @@
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
     "recharts": "^2.0.0 || ^3.0.0",
-    "@nivo/sankey": ">=0.80.0",
-    "@nivo/core": ">=0.80.0",
     "tailwind-merge": "^2.0.0 || ^3.0.0",
-    "zod": "^3.0.0"
+    "three": ">=0.160.0"
   },
   "peerDependenciesMeta": {
-    "recharts": { "optional": true },
-    "@nivo/sankey": { "optional": true },
-    "@nivo/core": { "optional": true },
-    "three": { "optional": true },
-    "@react-three/fiber": { "optional": true },
-    "@react-three/drei": { "optional": true }
+    "recharts": {
+      "optional": true
+    },
+    "@nivo/core": {
+      "optional": true
+    },
+    "@nivo/sankey": {
+      "optional": true
+    },
+    "three": {
+      "optional": true
+    },
+    "@react-three/fiber": {
+      "optional": true
+    },
+    "@react-three/drei": {
+      "optional": true
+    },
+    "date-fns": {
+      "optional": true
+    },
+    "@tanstack/react-table": {
+      "optional": true
+    }
   },
-  "dependencies": {},
   "devDependencies": {
     "@eslint/eslintrc": "^3.3.1",
     "@react-three/drei": "^10.7.7",
@@ -78,7 +157,8 @@
     "@types/react": "19.1.2",
     "@types/react-dom": "19.1.2",
     "@types/three": "^0.183.1",
-    "three": "^0.183.1",
+    "esbuild-fix-imports-plugin": "^1.0.23",
+    "esbuild-plugin-preserve-directives": "^0.0.11",
     "eslint": "^9.32.0",
     "eslint-config-next": "15.3.1",
     "next": "15.5.9",
@@ -86,6 +166,7 @@
     "react-dom": "19.1.0",
     "shadcn": "^3.0.0",
     "tailwindcss": "^4.1.11",
+    "three": "^0.183.1",
     "tsup": "^8.3.5",
     "tw-animate-css": "^1.3.6",
     "typescript": "^5.9.2"

package/src/charts/bar-chart-component.tsx

@@ -0,0 +1,150 @@
+"use client"
+
+import * as React from "react"
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+} from "recharts"
+
+import { cn } from "../lib/utils"
+
+export interface BarSeries {
+  dataKey: string
+  color: string
+  name?: string
+  icon?: React.ComponentType<{ className?: string }>
+  barSize?: number
+}
+
+export interface BarChartComponentProps {
+  data: Record<string, unknown>[]
+  bars: BarSeries[]
+  height?: number
+  xAxisKey?: string
+  showGrid?: boolean
+  showLegend?: boolean
+  barGap?: number
+  className?: string
+}
+
+interface TooltipPayloadEntry {
+  fill?: string
+  color?: string
+  name?: string
+  dataKey?: string
+  value?: number | string
+}
+
+function CustomBarTooltip({ active, payload, label }: { active?: boolean; payload?: TooltipPayloadEntry[]; label?: string }) {
+  if (!active || !payload?.length) return null
+
+  return (
+    <div className="rounded-lg border border-border bg-card px-3 py-2 shadow-md">
+      {label ? (
+        <p className="mb-1.5 text-xs font-medium text-muted-foreground">{label}</p>
+      ) : null}
+      <div className="space-y-1">
+        {payload.map((entry: TooltipPayloadEntry, i: number) => (
+          <div key={i} className="flex items-center gap-2 text-xs">
+            <div
+              className="h-2 w-2 shrink-0 rounded-full"
+              style={{ backgroundColor: entry.fill || entry.color }}
+            />
+            <span className="font-medium text-muted-foreground">
+              {entry.name}:
+            </span>
+            <span className="font-semibold text-foreground">{entry.value}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+function CustomLegend({ bars }: { bars: BarSeries[] }) {
+  return (
+    <div className="mt-3 flex flex-wrap items-center justify-center gap-4">
+      {bars.map((bar) => (
+        <div key={bar.dataKey} className="flex items-center gap-1.5 text-xs">
+          {bar.icon ? (
+            <bar.icon className="h-3.5 w-3.5 text-muted-foreground" />
+          ) : (
+            <div
+              className="h-2.5 w-2.5 shrink-0 rounded-sm"
+              style={{ backgroundColor: bar.color }}
+            />
+          )}
+          <span className="font-medium text-muted-foreground">
+            {bar.name || bar.dataKey}
+          </span>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export function BarChartComponent({
+  data,
+  bars,
+  height = 280,
+  xAxisKey = "date",
+  showGrid = true,
+  showLegend = true,
+  barGap = 2,
+  className,
+}: BarChartComponentProps) {
+  return (
+    <div className={cn("w-full", className)}>
+      <div style={{ height }}>
+        <ResponsiveContainer
+          width="100%"
+          height="100%"
+          debounce={1}
+          minWidth={1}
+          minHeight={1}
+        >
+          <BarChart
+            data={data}
+            margin={{ top: 10, right: 10, left: -20, bottom: 0 }}
+            barGap={barGap}
+          >
+            {showGrid ? (
+              <CartesianGrid
+                strokeDasharray="3 3"
+                vertical={false}
+                stroke="#f1f5f9"
+              />
+            ) : null}
+            <XAxis
+              dataKey={xAxisKey}
+              axisLine={false}
+              tickLine={false}
+              tick={{ fill: "#64748B", fontSize: 12 }}
+            />
+            <YAxis
+              axisLine={false}
+              tickLine={false}
+              tick={{ fill: "#64748B", fontSize: 12 }}
+            />
+            <Tooltip content={<CustomBarTooltip />} cursor={false} />
+            {bars.map((bar) => (
+              <Bar
+                key={bar.dataKey}
+                dataKey={bar.dataKey}
+                fill={bar.color}
+                name={bar.name || bar.dataKey}
+                barSize={bar.barSize ?? 12}
+              />
+            ))}
+          </BarChart>
+        </ResponsiveContainer>
+      </div>
+      {showLegend ? <CustomLegend bars={bars} /> : null}
+    </div>
+  )
+}

package/src/charts/chart-tooltip.tsx

@@ -0,0 +1,86 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "../lib/utils"
+
+export interface ChartTooltipEntry {
+  name?: string
+  value?: number | string
+  dataKey?: string
+  color?: string
+  stroke?: string
+  fill?: string
+}
+
+export interface SimpleChartTooltipProps {
+  active?: boolean
+  payload?: ChartTooltipEntry[]
+  label?: string
+  formatter?: (value: number | string, name: string) => [string, string]
+  className?: string
+}
+
+export function SimpleChartTooltip({
+  active,
+  payload,
+  label,
+  formatter,
+  className,
+}: SimpleChartTooltipProps) {
+  if (!active || !payload || !payload.length) {
+    return null
+  }
+
+  return (
+    <div
+      className={cn(
+        "rounded-lg border border-border bg-card px-3 py-2 shadow-md",
+        className,
+      )}
+      style={{ fontSize: "12px" }}
+    >
+      {label ? (
+        <p className="mb-1 text-xs font-medium text-muted-foreground">{label}</p>
+      ) : null}
+      {payload.map((entry, index) => {
+        const value = entry.value ?? ""
+        const name = entry.name || entry.dataKey || ""
+        const color = entry.color || entry.stroke || entry.fill
+
+        const [displayValue, displayName] = formatter
+          ? formatter(value as number | string, name)
+          : [String(value), name]
+
+        return (
+          <div key={index} className="flex items-center gap-2">
+            {color ? (
+              <div
+                className="h-2 w-2 shrink-0 rounded-full"
+                style={{ backgroundColor: color }}
+              />
+            ) : null}
+            <span className="text-xs font-medium text-foreground">
+              {displayName}: {displayValue}
+            </span>
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+export const CHART_TOOLTIP_STYLE: React.CSSProperties = {
+  backgroundColor: "#fff",
+  borderRadius: "8px",
+  fontSize: "12px",
+  padding: "8px",
+  border: "1px solid #e2e8f0",
+  boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
+}
+
+export const CHART_CURSOR_STYLE = {
+  stroke: "#94a3b8",
+  strokeWidth: 1,
+  strokeDasharray: "4 4",
+}