@vvedantb/ui 0.1.5 → 0.2.1

package/src/ui/spinner.tsx

@@ -18,7 +18,7 @@ function Spinner({
     <IconLoader2
       role="status"
       aria-label="Loading"
-      className={cn("animate-spin text-muted", sizeClasses[size], className)}
+      className={cn("animate-spin text-muted-foreground", sizeClasses[size], className)}
       {...props}
     />
   );

package/src/ui/switch.tsx

@@ -8,7 +8,7 @@ const Switch = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SwitchPrimitive.Root
     className={cn(
-      "peer relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border border-border bg-default transition-[background-color,border-color] duration-200 ease-smooth focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-accent data-[state=checked]:bg-accent data-[state=unchecked]:bg-default before:absolute before:inset-[-8px] before:content-['']",
+      "peer relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border border-border bg-default transition-[background-color,border-color] duration-200 ease-smooth focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=unchecked]:bg-default before:absolute before:inset-[-8px] before:content-['']",
       className,
     )}
     {...props}
@@ -16,7 +16,7 @@ const Switch = React.forwardRef<
   >
     <SwitchPrimitive.Thumb
       className={cn(
-        "pointer-events-none block size-4 rounded-full bg-background ring-0 transition-[transform,background-color] duration-200 ease-smooth data-[state=checked]:translate-x-4 data-[state=checked]:bg-accent-foreground data-[state=unchecked]:translate-x-0",
+        "pointer-events-none block size-4 rounded-full bg-background ring-0 transition-[transform,background-color] duration-200 ease-smooth data-[state=checked]:translate-x-4 data-[state=checked]:bg-primary-foreground data-[state=unchecked]:translate-x-0",
       )}
     />
   </SwitchPrimitive.Root>

package/src/ui/table.tsx

@@ -76,7 +76,7 @@ const TableHead = React.forwardRef<
   <th
     ref={ref}
     className={cn(
-      "h-11 px-4 text-left align-middle text-xs font-semibold uppercase tracking-widest text-muted [&:has([role=checkbox])]:pr-0",
+      "h-11 px-4 text-left align-middle text-xs font-semibold uppercase tracking-widest text-muted-foreground [&:has([role=checkbox])]:pr-0",
       className,
     )}
     {...props}
@@ -105,7 +105,7 @@ const TableCaption = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <caption
     ref={ref}
-    className={cn("mt-4 text-sm text-muted", className)}
+    className={cn("mt-4 text-sm text-muted-foreground", className)}
     {...props}
   />
 ));

package/src/ui/time-picker.tsx

@@ -94,7 +94,7 @@ const TimePicker = React.forwardRef<HTMLButtonElement, TimePickerProps>(
             )}
           >
             <span>{`${hour}:${minute}`}</span>
-            <IconClock className="h-3.5 w-3.5 text-muted" />
+            <IconClock className="h-3.5 w-3.5 text-muted-foreground" />
           </button>
         </PopoverTrigger>
         <PopoverContent
@@ -134,7 +134,7 @@ const TimeColumn = React.forwardRef<HTMLDivElement, TimeColumnProps>(
   ({ label, values, selected, onSelect }, ref) => {
     return (
       <div className="flex w-14 flex-col">
-        <div className="px-2 pb-1 text-[10px] uppercase tracking-wider text-muted">
+        <div className="px-2 pb-1 text-[10px] uppercase tracking-wider text-muted-foreground">
           {label}
         </div>
         <div
@@ -152,7 +152,7 @@ const TimeColumn = React.forwardRef<HTMLDivElement, TimeColumnProps>(
                 className={cn(
                   "flex h-7 w-full items-center justify-center text-xs tabular-nums transition-colors",
                   isSelected
-                    ? "bg-accent text-accent-foreground"
+                    ? "bg-primary text-primary-foreground"
                     : "text-foreground/80 hover:bg-surface-tertiary/50",
                 )}
               >

package/tokens/README.md

@@ -0,0 +1,98 @@
+# `@vvedantb/ui/tokens`
+
+Design tokens and shared Tailwind v4 CSS for the vvedantb web apps, plus JS tokens for React Native. These are subpaths of `@vvedantb/ui`, source-exported: no build step. Paths in the `File` column are relative to `packages/ui/tokens/`.
+
+## Exports
+
+| Export | File | What it is |
+| --- | --- | --- |
+| `@vvedantb/ui/tokens`, `@vvedantb/ui/tokens/tokens.css` | `src/tokens.css` | Colour, radius, shadow, ease and font tokens (`@theme`), light/dark variables, `dark` variant, `*` border and `body` defaults. In 0.2.1 it also defines shadcn-style aliases (`primary`, `muted-foreground`, `secondary`, `destructive`, `card`, `popover`, `input`, `ring`) that point at the same tokens. |
+| `@vvedantb/ui/tokens/native` | `src/native.ts` | JS colours, radii and spacing for React Native. `@vvedantb/native-ui` keeps its own copy in `src/tokens.ts`; a test keeps the two equal. |
+| `@vvedantb/ui/tokens/css/base.css` | `src/css/base.css` | `html` touch/accent, `::selection`, control transitions, pointer cursor, range accent (`@layer base`). |
+| `@vvedantb/ui/tokens/css/dialog.css` | `src/css/dialog.css` | Unlayered `max-width: none` for `@vvedantb/ui` compact (bottom-sheet) dialogs. |
+| `@vvedantb/ui/tokens/css/modal.css` | `src/css/modal.css` | `.t-modal`, `.is-open`, `.is-closing` and `t-modal-presence-wait` (`@layer components`). |
+| `@vvedantb/ui/tokens/css/tabs.css` | `src/css/tabs.css` | `.t-tab`, active colour, `.t-tabs-pill`, small-screen `.t-tabs` scrolling. |
+| `@vvedantb/ui/tokens/css/tabs-pills.css` | `src/css/tabs-pills.css` | `--tabs-*` colour variables, `.t-tabs--segmented`, `.t-tabs--pills` and pill hover / active fills. |
+| `@vvedantb/ui/tokens/css/utilities.css` | `src/css/utilities.css` | `@utility hit-target` and `@utility reveal-on-hover`. |
+| `@vvedantb/ui/tokens/css/scrollbar-thin.css` | `src/css/scrollbar-thin.css` | `.scrollbar-thin` (`@layer utilities`, always emitted). |
+| `@vvedantb/ui/tokens/css/animations.css` | `src/css/animations.css` | `animate-aurora`, `animate-fade-in-up`, `animate-indeterminate` as `@theme` (CSS-first apps). |
+| `@vvedantb/ui/tokens/css/compat-shadcn-rgb.css`, `@vvedantb/ui/tokens/compat/shadcn-rgb.css` | `src/css/compat-shadcn-rgb.css` | Replaces `tokens.css` for apps with shadcn-style `R G B` channel variables. Defines only the UI-only `--color-*` names as `rgb(var(--x) / alpha)` references, `--radius-field`, `--scrollbar`, `--field-radius` and a `glass-panel-strong` fallback. Import it **or** `tokens.css`, never both. |
+| `@vvedantb/ui/tokens/css/index.css` | `src/css/index.css` | base + dialog + utilities + scrollbar-thin + animations, for new CSS-first apps. |
+| `@vvedantb/ui/tokens/tailwind-preset` | `src/tailwind-preset.mjs` (+ `.d.mts`) | Tailwind preset for apps that load a JS config with `@config`. |
+
+Every file was extracted because the same rule (same at-rule context, selector and body) sits in 3 or more of the five apps. The measured duplication is in `verify/ANALYSIS.md`, and the proof that each app compiles to the same CSS after migrating is in `verify/RESULTS.md`. Blocks that only 2 apps share, or that drift in a way that would change an app's CSS, stay in the apps; `verify/ANALYSIS.md` lists them.
+
+## Use
+
+CSS-first app (no `tailwind.config`):
+
+```css
+@import "tailwindcss";
+@import "@vvedantb/ui/tokens";
+@import "@vvedantb/ui/tokens/css/animations.css";
+@import "@vvedantb/ui/tokens/css/base.css";
+/* ...app @layer base rules... */
+@import "@vvedantb/ui/tokens/css/modal.css";
+@import "@vvedantb/ui/tokens/css/tabs.css";
+/* ...app @layer components rules... */
+```
+
+App with a JS config (`@config "../tailwind.config.ts"`):
+
+```ts
+import { tokensPreset } from "@vvedantb/ui/tokens/tailwind-preset";
+
+export default {
+  presets: [tokensPreset()],
+  // or tokensPreset({ color: (name) => `color-mix(in oklch, var(--${name}) calc(<alpha-value> * 100%), transparent)` })
+  content: ["./src/**/*.{ts,tsx}"],
+  theme: { extend: { /* app-only colours, fonts, animations */ } },
+  plugins: [tailwindcssAnimate],
+};
+```
+
+The preset holds `darkMode: "class"`, the shared colour map (`border`, `surface.*`, `danger.*`, `field.*`, shadcn aliases `primary`/`secondary`/`destructive`/`card`/`popover`/`input` ...), `borderRadius` lg/md/sm/field, `boxShadow` soft/panel/insetSoft, `ease-smooth`, `screens` xs to 2xl in px, and the aurora / fade-in-up / indeterminate / accordion keyframes. It does not hold plugins, `content`, fonts, `accent`/`muted`/`ring`/`sidebar` (they differ per app) or accordion timings.
+
+Do not import `css/animations.css` in an app that uses the preset: the preset already defines the same keyframes and animations.
+
+### Where to put the imports
+
+Tailwind inlines an `@import` where it sits, even in the middle of a file (it must be at top level, not inside an `@layer` block). Put each import where the app's own copy of the rules was. Within one layer, later rules win at equal specificity, so moving shared rules above or below app rules can flip the result for elements matched by both. `examples/migration.md` gives the exact position for each app, and `pnpm --filter @vvedantb/ui verify` checks it.
+
+### Variables each file needs
+
+| File | Needs | Provided by |
+| --- | --- | --- |
+| `base.css` | `--accent`, `--foreground` | tokens.css or the app theme |
+| `dialog.css` | none | |
+| `modal.css` | `--modal-open-dur`, `--modal-close-dur`, `--modal-scale`, `--modal-scale-close`, `--modal-ease` | app `:root` |
+| `tabs.css` | `--tabs-dur`, `--tabs-ease` (app `:root`); `--tabs-text-muted`, `--tabs-text-active`, `--tabs-pill-bg` | colours: tabs-pills.css or the app theme |
+| `tabs-pills.css` | `--muted`, `--segment`, `--segment-foreground`, `--default` | tokens.css or the app theme |
+| `utilities.css` | `--breakpoint-sm` (Tailwind default or app theme) | Tailwind |
+| `scrollbar-thin.css` | `--scrollbar` | tokens.css or the app theme |
+| `animations.css` | none | |
+| `tailwind-preset` | the CSS variables named in its colour map, `--radius`, `--field-radius` | tokens.css or the app theme |
+
+### Using an existing shadcn RGB theme
+
+See the package `README.md`. With the compat file, `base.css`, `scrollbar-thin.css`, `utilities.css`, `dialog.css`, `modal.css` and `tabs.css` need no `tokens.css`. `base.css` reads `--accent` and `--foreground` and `tabs-pills.css` reads `--muted`, `--segment` and `--default`. Those are not channel-compatible, so skip `tabs-pills.css` and `index.css` (which includes `base.css`) unless the app defines those variables as full colours.
+
+### Parameters
+
+Where apps share a rule but drifted in one value, the value is a custom property whose fallback is the most common value. Set it on `:root` to keep a different value.
+
+| File | Property | Default | Set by |
+| --- | --- | --- | --- |
+| `base.css` | `--tokens-control-transition-property` | `background-color, border-color, color, box-shadow, transform, opacity` | app-c: `background-color, color, transform, opacity` |
+| `base.css` | `--tokens-control-transition-duration` | `240ms` | app-c: `100ms` |
+
+## Develop
+
+```sh
+pnpm --filter @vvedantb/ui build     # export targets exist + tsc (primitives, shell, app)
+pnpm --filter @vvedantb/ui test      # vitest (app helpers) + offline node --test: exports, CSS structure, Tailwind compile, preset
+pnpm --filter @vvedantb/ui analyze   # rule-level duplication across the app clones -> verify/ANALYSIS.tables.md
+pnpm --filter @vvedantb/ui verify    # before/after compile of every app -> verify/RESULTS.md, examples/migration.md
+```
+
+`analyze` and `verify` need the app clones (`APPS_DIR`, default `/workspace/cvx`; name or symlink the clones `app-a` to `app-e` inside it) and network access the first time: they install Tailwind 4.3.3, the plugins, postcss and jiti into a scratch directory (`VERIFY_DIR`, default `/workspace/pk-tokens-verify`, outside the repo). The migration for each app is data in `verify/migrations/<app>.json`. Each removed block must equal the shared file's block with the same context and selector, or the run fails.

package/tokens/examples/compat-shadcn-rgb/Fixture.tsx

@@ -0,0 +1,45 @@
+import { useState } from "react";
+import { toast } from "sonner";
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogTitle,
+  DialogTrigger,
+  Input,
+  SonnerToaster,
+  Switch,
+  Textarea,
+} from "../../../src";
+
+export function Fixture() {
+  const [dark, setDark] = useState(false);
+  return (
+    <div className={dark ? "dark" : ""}>
+      <main className="min-h-screen space-y-6 bg-background p-8 text-foreground">
+        <section className="flex flex-wrap items-center gap-3">
+          <Button onClick={() => setDark((d) => !d)}>Toggle theme</Button>
+          <Button onClick={() => toast("Saved", { description: "Fixture toast" })}>
+            Show toast
+          </Button>
+          <Dialog>
+            <DialogTrigger asChild>
+              <Button>Open dialog</Button>
+            </DialogTrigger>
+            <DialogContent>
+              <DialogTitle>Dialog</DialogTitle>
+              <DialogDescription>Body text on the popover colour.</DialogDescription>
+            </DialogContent>
+          </Dialog>
+        </section>
+        <section className="grid max-w-md gap-3">
+          <Input placeholder="Input placeholder" />
+          <Textarea placeholder="Textarea placeholder" />
+          <Switch defaultChecked aria-label="Sample switch" />
+        </section>
+        <SonnerToaster />
+      </main>
+    </div>
+  );
+}

package/tokens/examples/compat-shadcn-rgb/README.md

@@ -0,0 +1,11 @@
+# compat-shadcn-rgb fixture
+
+Renders Button, toast, Dialog, Input, Textarea and Switch against sample shadcn-style `R G B` variables for light and dark. `styles.css` imports `compat-shadcn-rgb.css` and not `tokens.css`.
+
+Run it from this folder (it is not a workspace member, and React resolves from the parent `packages/ui` install):
+
+```sh
+pnpm install --ignore-workspace && pnpm dev
+```
+
+Open the printed URL and use "Toggle theme" to switch between light and dark. `Fixture.tsx` is not part of the package typecheck.

package/tokens/examples/compat-shadcn-rgb/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>compat-shadcn-rgb fixture</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>

package/tokens/examples/compat-shadcn-rgb/main.tsx

@@ -0,0 +1,5 @@
+import { createRoot } from "react-dom/client";
+import { Fixture } from "./Fixture";
+import "./styles.css";
+
+createRoot(document.getElementById("root")!).render(<Fixture />);

package/tokens/examples/compat-shadcn-rgb/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "compat-shadcn-rgb-fixture",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "4.3.3",
+    "tailwindcss": "4.3.3",
+    "vite": "^7.0.0"
+  }
+}

package/tokens/examples/compat-shadcn-rgb/styles.css

@@ -0,0 +1,67 @@
+@import "tailwindcss";
+@import "../../src/css/compat-shadcn-rgb.css";
+@source "../../../src/**/*.{ts,tsx}";
+@source "./*.tsx";
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+/* Sample shadcn-style RGB channel variables owned by the app. */
+:root {
+  --background: 244 245 246;
+  --foreground: 24 24 27;
+  --card: 255 255 255;
+  --card-foreground: 24 24 27;
+  --popover: 255 255 255;
+  --popover-foreground: 24 24 27;
+  --primary: 37 99 235;
+  --primary-foreground: 255 255 255;
+  --secondary: 235 236 238;
+  --secondary-foreground: 24 24 27;
+  --muted: 235 236 238;
+  --muted-foreground: 100 100 110;
+  --accent: 235 236 238;
+  --accent-foreground: 24 24 27;
+  --destructive: 220 38 38;
+  --destructive-foreground: 255 255 255;
+  --border: 224 225 228;
+  --input: 224 225 228;
+  --ring: 37 99 235;
+  --radius: 0.75rem;
+}
+
+.dark {
+  --background: 15 15 17;
+  --foreground: 244 244 245;
+  --card: 28 28 31;
+  --card-foreground: 244 244 245;
+  --popover: 28 28 31;
+  --popover-foreground: 244 244 245;
+  --primary: 96 165 250;
+  --primary-foreground: 15 15 17;
+  --secondary: 39 39 43;
+  --secondary-foreground: 244 244 245;
+  --muted: 39 39 43;
+  --muted-foreground: 161 161 170;
+  --accent: 39 39 43;
+  --accent-foreground: 244 244 245;
+  --destructive: 248 113 113;
+  --destructive-foreground: 15 15 17;
+  --border: 46 46 51;
+  --input: 46 46 51;
+  --ring: 96 165 250;
+}
+
+@theme inline {
+  --color-background: rgb(var(--background));
+  --color-foreground: rgb(var(--foreground));
+  --color-border: rgb(var(--border));
+  --color-primary: rgb(var(--primary));
+  --color-primary-foreground: rgb(var(--primary-foreground));
+  --color-muted-foreground: rgb(var(--muted-foreground));
+}
+
+body {
+  background: rgb(var(--background));
+  color: rgb(var(--foreground));
+  font-family: system-ui, sans-serif;
+}

package/tokens/examples/compat-shadcn-rgb/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx",
+    "strict": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "isolatedModules": true
+  },
+  "include": ["*.ts", "*.tsx"]
+}

package/tokens/examples/compat-shadcn-rgb/vite.config.ts

@@ -0,0 +1,11 @@
+import tailwindcss from "@tailwindcss/vite";
+import { defineConfig } from "vite";
+
+// React, react-dom and the @vvedantb/ui peers resolve from packages/ui/node_modules
+// (this folder sits inside that package), so the fixture installs only the build tools.
+export default defineConfig({
+  plugins: [tailwindcss()],
+  esbuild: { jsx: "automatic" },
+  resolve: { dedupe: ["react", "react-dom"] },
+  server: { fs: { allow: ["../../.."] } },
+});