@otfdashkit/ui 0.1.5 → 0.1.7

package/README.md

@@ -1,7 +1,7 @@
 <h1 align="center">@otfdashkit/ui</h1>
 
 <p align="center">
-  89 web components for builders shipping production apps — Radix under the hood, Tailwind v4 on top, AI-agent-readable by design.
+  150+ web components for builders shipping production apps, 90 of them documented one by one. Tailwind CSS v3 or v4 on top, AI-agent-readable by design.
 </p>
 
 <p align="center">
@@ -13,7 +13,7 @@
   </a>
   <img src="https://img.shields.io/badge/License-MIT-blue.svg?style=flat-square" alt="MIT License">
   <img src="https://img.shields.io/badge/React-19-000?style=flat-square" alt="React 19">
-  <img src="https://img.shields.io/badge/Tailwind-v4-000?style=flat-square" alt="Tailwind v4">
+  <img src="https://img.shields.io/badge/Tailwind-v3%20%7C%20v4-000?style=flat-square" alt="Tailwind v3 or v4">
 </p>
 
 ---
@@ -27,7 +27,7 @@
 - **Advanced** — Tiptap editor, ImageCrop, file uploaders, marquees, shiki-powered code blocks, video player
 - **17 themes** out of the box from [`@otfdashkit/tokens`](https://www.npmjs.com/package/@otfdashkit/tokens) — swap palette by changing one attribute on `<html>`
 
-89 installable web components in [`src/`](src/). Full catalog at the Storybook below.
+150+ web components in [`src/`](src/), 90 documented one by one. Full catalog at the Storybook below.
 
 ## Live demos
 
@@ -43,6 +43,47 @@ pnpm add @otfdashkit/ui @otfdashkit/tokens
 # or:  bun add @otfdashkit/ui @otfdashkit/tokens
 ```
 
+## Tailwind setup
+
+Tailwind needs two things: scan the package source, and map the theme tokens (HSL channels) to colours.
+
+```css
+/* Tailwind v4: in your global CSS */
+@source "../node_modules/@otfdashkit/ui/src/**/*.{ts,tsx}";
+
+@theme inline {
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+}
+```
+
+```js
+// Tailwind v3: tailwind.config.js
+import { otfPreset } from '@otfdashkit/tokens/tailwind-preset'
+
+export default {
+  presets: [otfPreset],
+  content: ['./src/**/*.{ts,tsx}', './node_modules/@otfdashkit/ui/src/**/*.{ts,tsx}'],
+}
+```
+
 ## Quick start
 
 ```tsx
@@ -58,7 +99,7 @@ export default function SignInCard() {
   return (
     <Card>
       <Input placeholder="Email" />
-      <Button variant="primary" size="lg">Continue</Button>
+      <Button size="lg">Continue</Button>
     </Card>
   )
 }
@@ -82,7 +123,7 @@ Pair with [`@otfdashkit/eslint-plugin-otf-design`](https://www.npmjs.com/package
 
 ## Related packages
 
-- [`@otfdashkit/ui-native`](https://www.npmjs.com/package/@otfdashkit/ui-native) — mobile counterpart, same component API
+- [`@otfdashkit/ui-native`](https://www.npmjs.com/package/@otfdashkit/ui-native) — mobile counterpart, same component names for the shared set (props differ per platform)
 - [`@otfdashkit/tokens`](https://www.npmjs.com/package/@otfdashkit/tokens) — design tokens (CSS vars + Tamagui config)
 - [`@otfdashkit/cli`](https://www.npmjs.com/package/@otfdashkit/cli) — heavy-peer component installer (Skia, Reanimated, MMKV)
 
@@ -92,7 +133,7 @@ Questions, bugs, feature requests: **[discord.gg/gpXyu7SqNZ](https://discord.gg/
 
 ## Status
 
-`v0.1.x` — alpha. APIs may change before `1.0`. Pin exact releases in production.
+Live on npm and in production: the OTF SaaS Dashboard kit is built on it. Versions follow semver; while on `0.x`, a minor release can change an API, so pin exact versions in production.
 
 ## License
 

package/dist/index.js

@@ -7098,10 +7098,10 @@ function AreaChart({
 }) {
   const keys = Array.isArray(dataKey) ? dataKey : [dataKey];
   const curve = curved ? "monotone" : "linear";
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full overflow-hidden", className), style: { minWidth: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(RechartsPrimitive.ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxRuntime.jsxs(RechartsPrimitive.AreaChart, { data: data.map((d) => ({ ...d })), margin: { top: 4, right: 4, left: -20, bottom: 0 }, children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full overflow-hidden", className), style: { minWidth: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(RechartsPrimitive.ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxRuntime.jsxs(RechartsPrimitive.AreaChart, { data: data.map((d) => ({ ...d })), margin: { top: 4, right: 4, left: 0, bottom: 0 }, children: [
     showGrid && /* @__PURE__ */ jsxRuntime.jsx(RechartsPrimitive.CartesianGrid, { strokeDasharray: "3 3", stroke: "hsl(var(--border))" }),
     /* @__PURE__ */ jsxRuntime.jsx(RechartsPrimitive.XAxis, { dataKey: xAxisKey, tick: { fontSize: 12, fill: "hsl(var(--muted-foreground))" }, axisLine: false, tickLine: false }),
-    /* @__PURE__ */ jsxRuntime.jsx(RechartsPrimitive.YAxis, { tick: { fontSize: 12, fill: "hsl(var(--muted-foreground))" }, axisLine: false, tickLine: false }),
+    /* @__PURE__ */ jsxRuntime.jsx(RechartsPrimitive.YAxis, { width: "auto", tick: { fontSize: 12, fill: "hsl(var(--muted-foreground))" }, axisLine: false, tickLine: false }),
     showTooltip && /* @__PURE__ */ jsxRuntime.jsx(
       RechartsPrimitive.Tooltip,
       {
@@ -7164,7 +7164,7 @@ function BarChart({
     {
       data: data.map((d) => ({ ...d })),
       layout,
-      margin: { top: 4, right: lineDataKey ? 8 : 4, left: -20, bottom: 0 },
+      margin: { top: 4, right: lineDataKey ? 8 : 4, left: 0, bottom: 0 },
       barSize,
       maxBarSize,
       barCategoryGap,
@@ -7172,13 +7172,14 @@ function BarChart({
         showGrid && /* @__PURE__ */ jsxRuntime.jsx(RechartsPrimitive.CartesianGrid, { strokeDasharray: "3 3", stroke: "hsl(var(--border))" }),
         isVertical ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(RechartsPrimitive.XAxis, { type: "number", tick: { fontSize: 12, fill: "hsl(var(--muted-foreground))" }, axisLine: false, tickLine: false }),
-          /* @__PURE__ */ jsxRuntime.jsx(RechartsPrimitive.YAxis, { type: "category", dataKey: xAxisKey, tick: { fontSize: 12, fill: "hsl(var(--muted-foreground))" }, axisLine: false, tickLine: false })
+          /* @__PURE__ */ jsxRuntime.jsx(RechartsPrimitive.YAxis, { width: "auto", type: "category", dataKey: xAxisKey, tick: { fontSize: 12, fill: "hsl(var(--muted-foreground))" }, axisLine: false, tickLine: false })
         ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(RechartsPrimitive.XAxis, { dataKey: xAxisKey, tick: { fontSize: 12, fill: "hsl(var(--muted-foreground))" }, axisLine: false, tickLine: false }),
-          /* @__PURE__ */ jsxRuntime.jsx(RechartsPrimitive.YAxis, { yAxisId: "left", tick: { fontSize: 12, fill: "hsl(var(--muted-foreground))" }, axisLine: false, tickLine: false }),
+          /* @__PURE__ */ jsxRuntime.jsx(RechartsPrimitive.YAxis, { width: "auto", yAxisId: "left", tick: { fontSize: 12, fill: "hsl(var(--muted-foreground))" }, axisLine: false, tickLine: false }),
           lineDataKey && /* @__PURE__ */ jsxRuntime.jsx(
             RechartsPrimitive.YAxis,
             {
+              width: "auto",
               yAxisId: "right",
               orientation: "right",
               tick: { fontSize: 12, fill: "hsl(var(--muted-foreground))" },
@@ -7253,10 +7254,10 @@ function LineChart({
   const keys = Array.isArray(dataKey) ? dataKey : [dataKey];
   const curve = curved ? "monotone" : "linear";
   const dash = dotted ? "4 4" : void 0;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full overflow-hidden", className), style: { minWidth: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(RechartsPrimitive.ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxRuntime.jsxs(RechartsPrimitive.LineChart, { data: data.map((d) => ({ ...d })), margin: { top: 4, right: 4, left: -20, bottom: 0 }, children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full overflow-hidden", className), style: { minWidth: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(RechartsPrimitive.ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxRuntime.jsxs(RechartsPrimitive.LineChart, { data: data.map((d) => ({ ...d })), margin: { top: 4, right: 4, left: 0, bottom: 0 }, children: [
     showGrid && /* @__PURE__ */ jsxRuntime.jsx(RechartsPrimitive.CartesianGrid, { strokeDasharray: "3 3", stroke: "hsl(var(--border))" }),
     /* @__PURE__ */ jsxRuntime.jsx(RechartsPrimitive.XAxis, { dataKey: xAxisKey, tick: { fontSize: 12, fill: "hsl(var(--muted-foreground))" }, axisLine: false, tickLine: false }),
-    /* @__PURE__ */ jsxRuntime.jsx(RechartsPrimitive.YAxis, { tick: { fontSize: 12, fill: "hsl(var(--muted-foreground))" }, axisLine: false, tickLine: false }),
+    /* @__PURE__ */ jsxRuntime.jsx(RechartsPrimitive.YAxis, { width: "auto", tick: { fontSize: 12, fill: "hsl(var(--muted-foreground))" }, axisLine: false, tickLine: false }),
     showTooltip && /* @__PURE__ */ jsxRuntime.jsx(
       RechartsPrimitive.Tooltip,
       {

package/dist/index.mjs

@@ -7045,10 +7045,10 @@ function AreaChart({
 }) {
   const keys = Array.isArray(dataKey) ? dataKey : [dataKey];
   const curve = curved ? "monotone" : "linear";
-  return /* @__PURE__ */ jsx("div", { className: cn("w-full overflow-hidden", className), style: { minWidth: 0 }, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(AreaChart$1, { data: data.map((d) => ({ ...d })), margin: { top: 4, right: 4, left: -20, bottom: 0 }, children: [
+  return /* @__PURE__ */ jsx("div", { className: cn("w-full overflow-hidden", className), style: { minWidth: 0 }, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(AreaChart$1, { data: data.map((d) => ({ ...d })), margin: { top: 4, right: 4, left: 0, bottom: 0 }, children: [
     showGrid && /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: "hsl(var(--border))" }),
     /* @__PURE__ */ jsx(XAxis, { dataKey: xAxisKey, tick: { fontSize: 12, fill: "hsl(var(--muted-foreground))" }, axisLine: false, tickLine: false }),
-    /* @__PURE__ */ jsx(YAxis, { tick: { fontSize: 12, fill: "hsl(var(--muted-foreground))" }, axisLine: false, tickLine: false }),
+    /* @__PURE__ */ jsx(YAxis, { width: "auto", tick: { fontSize: 12, fill: "hsl(var(--muted-foreground))" }, axisLine: false, tickLine: false }),
     showTooltip && /* @__PURE__ */ jsx(
       Tooltip,
       {
@@ -7111,7 +7111,7 @@ function BarChart({
     {
       data: data.map((d) => ({ ...d })),
       layout,
-      margin: { top: 4, right: lineDataKey ? 8 : 4, left: -20, bottom: 0 },
+      margin: { top: 4, right: lineDataKey ? 8 : 4, left: 0, bottom: 0 },
       barSize,
       maxBarSize,
       barCategoryGap,
@@ -7119,13 +7119,14 @@ function BarChart({
         showGrid && /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: "hsl(var(--border))" }),
         isVertical ? /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(XAxis, { type: "number", tick: { fontSize: 12, fill: "hsl(var(--muted-foreground))" }, axisLine: false, tickLine: false }),
-          /* @__PURE__ */ jsx(YAxis, { type: "category", dataKey: xAxisKey, tick: { fontSize: 12, fill: "hsl(var(--muted-foreground))" }, axisLine: false, tickLine: false })
+          /* @__PURE__ */ jsx(YAxis, { width: "auto", type: "category", dataKey: xAxisKey, tick: { fontSize: 12, fill: "hsl(var(--muted-foreground))" }, axisLine: false, tickLine: false })
         ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(XAxis, { dataKey: xAxisKey, tick: { fontSize: 12, fill: "hsl(var(--muted-foreground))" }, axisLine: false, tickLine: false }),
-          /* @__PURE__ */ jsx(YAxis, { yAxisId: "left", tick: { fontSize: 12, fill: "hsl(var(--muted-foreground))" }, axisLine: false, tickLine: false }),
+          /* @__PURE__ */ jsx(YAxis, { width: "auto", yAxisId: "left", tick: { fontSize: 12, fill: "hsl(var(--muted-foreground))" }, axisLine: false, tickLine: false }),
           lineDataKey && /* @__PURE__ */ jsx(
             YAxis,
             {
+              width: "auto",
               yAxisId: "right",
               orientation: "right",
               tick: { fontSize: 12, fill: "hsl(var(--muted-foreground))" },
@@ -7200,10 +7201,10 @@ function LineChart({
   const keys = Array.isArray(dataKey) ? dataKey : [dataKey];
   const curve = curved ? "monotone" : "linear";
   const dash = dotted ? "4 4" : void 0;
-  return /* @__PURE__ */ jsx("div", { className: cn("w-full overflow-hidden", className), style: { minWidth: 0 }, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(LineChart$1, { data: data.map((d) => ({ ...d })), margin: { top: 4, right: 4, left: -20, bottom: 0 }, children: [
+  return /* @__PURE__ */ jsx("div", { className: cn("w-full overflow-hidden", className), style: { minWidth: 0 }, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(LineChart$1, { data: data.map((d) => ({ ...d })), margin: { top: 4, right: 4, left: 0, bottom: 0 }, children: [
     showGrid && /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: "hsl(var(--border))" }),
     /* @__PURE__ */ jsx(XAxis, { dataKey: xAxisKey, tick: { fontSize: 12, fill: "hsl(var(--muted-foreground))" }, axisLine: false, tickLine: false }),
-    /* @__PURE__ */ jsx(YAxis, { tick: { fontSize: 12, fill: "hsl(var(--muted-foreground))" }, axisLine: false, tickLine: false }),
+    /* @__PURE__ */ jsx(YAxis, { width: "auto", tick: { fontSize: 12, fill: "hsl(var(--muted-foreground))" }, axisLine: false, tickLine: false }),
     showTooltip && /* @__PURE__ */ jsx(
       Tooltip,
       {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@otfdashkit/ui",
-  "version": "0.1.5",
-  "description": "OTF UI — production-quality React component library. 98 primitives + blocks + layouts + charts on Radix + Tailwind v4. Cross-platform parity API with @otfdashkit/ui-native.",
+  "version": "0.1.7",
+  "description": "OTF UI: 150+ React components for web apps (primitives, blocks, layouts and charts), themed by @otfdashkit/tokens. Works with Tailwind CSS v3 and v4. Shares component names and tokens with @otfdashkit/ui-native.",
   "keywords": [
     "otfdashkit",
     "ui",
@@ -11,8 +11,6 @@
     "design-system",
     "radix",
     "tailwind",
-    "tailwind-v4",
-    "shadcn",
     "headless",
     "accessible"
   ],

package/src/charts/area-chart.tsx

@@ -50,10 +50,10 @@ export function AreaChart({
   return (
     <div className={cn('w-full overflow-hidden', className)} style={{ minWidth: 0 }}>
       <ResponsiveContainer width="100%" height={height}>
-        <RechartsAreaChart data={data.map((d) => ({ ...d }))} margin={{ top: 4, right: 4, left: -20, bottom: 0 }}>
+        <RechartsAreaChart data={data.map((d) => ({ ...d }))} margin={{ top: 4, right: 4, left: 0, bottom: 0 }}>
           {showGrid && <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" />}
           <XAxis dataKey={xAxisKey} tick={{ fontSize: 12, fill: 'hsl(var(--muted-foreground))' }} axisLine={false} tickLine={false} />
-          <YAxis tick={{ fontSize: 12, fill: 'hsl(var(--muted-foreground))' }} axisLine={false} tickLine={false} />
+          <YAxis width="auto" tick={{ fontSize: 12, fill: 'hsl(var(--muted-foreground))' }} axisLine={false} tickLine={false} />
           {showTooltip && (
             <Tooltip
               contentStyle={{

package/src/charts/bar-chart.tsx

@@ -78,7 +78,7 @@ export function BarChart({
         <Chart
           data={data.map((d) => ({ ...d }))}
           layout={layout}
-          margin={{ top: 4, right: lineDataKey ? 8 : 4, left: -20, bottom: 0 }}
+          margin={{ top: 4, right: lineDataKey ? 8 : 4, left: 0, bottom: 0 }}
           barSize={barSize}
           maxBarSize={maxBarSize}
           barCategoryGap={barCategoryGap}
@@ -87,14 +87,14 @@ export function BarChart({
           {isVertical ? (
             <>
               <XAxis type="number" tick={{ fontSize: 12, fill: 'hsl(var(--muted-foreground))' }} axisLine={false} tickLine={false} />
-              <YAxis type="category" dataKey={xAxisKey} tick={{ fontSize: 12, fill: 'hsl(var(--muted-foreground))' }} axisLine={false} tickLine={false} />
+              <YAxis width="auto" type="category" dataKey={xAxisKey} tick={{ fontSize: 12, fill: 'hsl(var(--muted-foreground))' }} axisLine={false} tickLine={false} />
             </>
           ) : (
             <>
               <XAxis dataKey={xAxisKey} tick={{ fontSize: 12, fill: 'hsl(var(--muted-foreground))' }} axisLine={false} tickLine={false} />
-              <YAxis yAxisId="left" tick={{ fontSize: 12, fill: 'hsl(var(--muted-foreground))' }} axisLine={false} tickLine={false} />
+              <YAxis width="auto" yAxisId="left" tick={{ fontSize: 12, fill: 'hsl(var(--muted-foreground))' }} axisLine={false} tickLine={false} />
               {lineDataKey && (
-                <YAxis
+                <YAxis width="auto"
                   yAxisId="right"
                   orientation="right"
                   tick={{ fontSize: 12, fill: 'hsl(var(--muted-foreground))' }}

package/src/charts/line-chart.tsx

@@ -55,10 +55,10 @@ export function LineChart({
   return (
     <div className={cn('w-full overflow-hidden', className)} style={{ minWidth: 0 }}>
       <ResponsiveContainer width="100%" height={height}>
-        <RechartsLineChart data={data.map((d) => ({ ...d }))} margin={{ top: 4, right: 4, left: -20, bottom: 0 }}>
+        <RechartsLineChart data={data.map((d) => ({ ...d }))} margin={{ top: 4, right: 4, left: 0, bottom: 0 }}>
           {showGrid && <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" />}
           <XAxis dataKey={xAxisKey} tick={{ fontSize: 12, fill: 'hsl(var(--muted-foreground))' }} axisLine={false} tickLine={false} />
-          <YAxis tick={{ fontSize: 12, fill: 'hsl(var(--muted-foreground))' }} axisLine={false} tickLine={false} />
+          <YAxis width="auto" tick={{ fontSize: 12, fill: 'hsl(var(--muted-foreground))' }} axisLine={false} tickLine={false} />
           {showTooltip && (
             <Tooltip
               contentStyle={{