@vvedantb/ui 0.2.0 → 0.2.2

package/src/ui/sonner-icons.tsx

@@ -0,0 +1,94 @@
+import { Spinner } from "./spinner";
+
+// 24px filled icons for `SonnerToaster` (`toastIcons="filled24"`). Self-contained
+// SVGs, tinted with package colour tokens. Sonner wraps each in its `data-icon` slot.
+
+function InfoIcon() {
+  return (
+    <svg
+      aria-hidden="true"
+      className="h-6 w-6 fill-current text-primary"
+      fill="none"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22ZM12.75 16C12.75 16.41 12.41 16.75 12 16.75C11.59 16.75 11.25 16.41 11.25 16L11.25 11C11.25 10.59 11.59 10.25 12 10.25C12.41 10.25 12.75 10.59 12.75 11L12.75 16ZM11.08 7.62C11.13 7.49 11.2 7.39 11.29 7.29C11.39 7.2 11.5 7.13 11.62 7.08C11.74 7.03 11.87 7 12 7C12.13 7 12.26 7.03 12.38 7.08C12.5 7.13 12.61 7.2 12.71 7.29C12.8 7.39 12.87 7.49 12.92 7.62C12.97 7.74 13 7.87 13 8C13 8.13 12.97 8.26 12.92 8.38C12.87 8.5 12.8 8.61 12.71 8.71C12.61 8.8 12.5 8.87 12.38 8.92C12.14 9.02 11.86 9.02 11.62 8.92C11.5 8.87 11.39 8.8 11.29 8.71C11.2 8.61 11.13 8.5 11.08 8.38C11.03 8.26 11 8.13 11 8C11 7.87 11.03 7.74 11.08 7.62Z" />
+    </svg>
+  );
+}
+
+function SuccessIcon() {
+  return (
+    <svg
+      aria-hidden="true"
+      className="h-6 w-6 fill-current text-success"
+      fill="none"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z" />
+    </svg>
+  );
+}
+
+function WarningIcon() {
+  return (
+    <svg
+      aria-hidden="true"
+      className="h-6 w-6 fill-current text-warning"
+      fill="none"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        clipRule="evenodd"
+        d="M3 10.417C3 7.219 3 5.62 3.378 5.082C3.755 4.545 5.258 4.03 8.265 3.001L8.838 2.805C10.405 2.268 11.188 2 12 2C12.812 2 13.595 2.268 15.162 2.805L15.735 3.001C18.742 4.03 20.245 4.545 20.622 5.082C21 5.62 21 7.22 21 10.417V11.991C21 17.629 16.761 20.366 14.101 21.527C13.38 21.842 13.02 22 12 22C10.98 22 10.62 21.842 9.899 21.527C7.239 20.365 3 17.63 3 11.991V10.417ZM12 7.25C12.1989 7.25 12.3897 7.32902 12.5303 7.46967C12.671 7.61032 12.75 7.80109 12.75 8V12C12.75 12.1989 12.671 12.3897 12.5303 12.5303C12.3897 12.671 12.1989 12.75 12 12.75C11.8011 12.75 11.6103 12.671 11.4697 12.5303C11.329 12.3897 11.25 12.1989 11.25 12V8C11.25 7.80109 11.329 7.61032 11.4697 7.46967C11.6103 7.32902 11.8011 7.25 12 7.25ZM12 16C12.2652 16 12.5196 15.8946 12.7071 15.7071C12.8946 15.5196 13 15.2652 13 15C13 14.7348 12.8946 14.4804 12.7071 14.2929C12.5196 14.1054 12.2652 14 12 14C11.7348 14 11.4804 14.1054 11.2929 14.2929C11.1054 14.4804 11 14.7348 11 15C11 15.2652 11.1054 15.5196 11.2929 15.7071C11.4804 15.8946 11.7348 16 12 16Z"
+        fillRule="evenodd"
+      />
+    </svg>
+  );
+}
+
+function ErrorIcon() {
+  return (
+    <svg
+      aria-hidden="true"
+      className="h-6 w-6 fill-current text-destructive"
+      fill="none"
+      viewBox="0 0 20 20"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M17.51 3.85L11.57 0.42C10.6 -0.14 9.4 -0.14 8.42 0.42L2.49 3.85C1.52 4.41 0.919998 5.45 0.919998 6.58V13.42C0.919998 14.54 1.52 15.58 2.49 16.15L8.43 19.58C9.4 20.14 10.6 20.14 11.58 19.58L17.52 16.15C18.49 15.59 19.09 14.55 19.09 13.42V6.58C19.08 5.45 18.48 4.42 17.51 3.85ZM9.25 5.75C9.25 5.34 9.59 5 10 5C10.41 5 10.75 5.34 10.75 5.75V11C10.75 11.41 10.41 11.75 10 11.75C9.59 11.75 9.25 11.41 9.25 11V5.75ZM10.92 14.63C10.87 14.75 10.8 14.86 10.71 14.96C10.52 15.15 10.27 15.25 10 15.25C9.87 15.25 9.74 15.22 9.62 15.17C9.49 15.12 9.39 15.05 9.29 14.96C9.2 14.86 9.13 14.75 9.07 14.63C9.02 14.51 9 14.38 9 14.25C9 13.99 9.1 13.73 9.29 13.54C9.39 13.45 9.49 13.38 9.62 13.33C9.99 13.17 10.43 13.26 10.71 13.54C10.8 13.64 10.87 13.74 10.92 13.87C10.97 13.99 11 14.12 11 14.25C11 14.38 10.97 14.51 10.92 14.63Z" />
+    </svg>
+  );
+}
+
+function CloseIcon() {
+  return (
+    <svg
+      aria-hidden="true"
+      className="h-3.5 w-3.5"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M18 6L6 18M6 6l12 12" />
+    </svg>
+  );
+}
+
+/** 24px success / info / warning / error icons, a matching loader and a 14px close cross. */
+const filledToastIcons = {
+  success: <SuccessIcon />,
+  info: <InfoIcon />,
+  warning: <WarningIcon />,
+  error: <ErrorIcon />,
+  loading: <Spinner size="md" aria-hidden="true" />,
+  close: <CloseIcon />,
+};
+
+export { filledToastIcons };

package/src/ui/sonner.tsx

@@ -1,47 +1,180 @@
+import type { CSSProperties } from "react";
 import { Toaster, type ToasterProps } from "sonner";
+import { filledToastIcons } from "./sonner-icons";
 import "./sonner.css";
 
-// sonner toaster aligned with flat tonal surfaces `unstyled: true` strips sonner's default visual styling so our classes are
-// the single source of truth toast surfaces use `glass, panel, strong` (flat
-// popover fill) plus `smooth-shadow-ring-md` `!font, sans` is forced on the toaster section because sonner sets its own
-// `font, family` on `[data, sonner, toaster]` from a stylesheet that ships with
-// the package (loaded after our globals), so plain inheritance from `<body>`
-// loses the cascade the `!important` here guarantees instrument sans wins, toasts inherit from the section, so this single class covers everything variant icons (success / error / warning / info) are tinted via a
-// `data, icon` descendant selector, leaving the rest of the toast neutral callers should pass `theme` from `next, themes` so sonner's internal
-// `data, theme` attribute matches the active app theme (used by its focus
-// ring and a few internal states that aren't reachable via classnames) stacking: `expand={false}` keeps toasts collapsed (offset + scale) hovering
-// the stack expands them `sonner.css` hides back, toast content while collapsed
-// because `unstyled` disables sonner's built, in `data, styled` stack rules
-function SonnerToaster(props: ToasterProps) {
+// Sonner toaster aligned with flat tonal surfaces. `unstyled: true` strips
+// sonner's default visual styling so our classes are the single source of
+// truth. Toast surfaces use `glass-panel-strong` (flat popover fill) plus
+// `smooth-shadow-ring-md`. `!font-sans` is forced on the toaster section because
+// sonner sets its own `font-family` on `[data-sonner-toaster]` from a stylesheet
+// that loads after app globals. Variant icons (success / error / warning / info)
+// are tinted via a `data-icon` descendant selector, leaving the rest of the toast
+// neutral. Callers should pass `theme` so sonner's internal `data-theme`
+// attribute matches the active app theme.
+//
+// Stacking: `expand={false}` keeps toasts collapsed (offset + scale). Hovering
+// the stack expands them. `sonner.css` hides back-toast content while collapsed
+// because `unstyled` disables sonner's built-in `data-styled` stack rules.
+//
+// Caller props merge with these defaults instead of replacing them: see
+// `mergeToastClassNames`, `mergeToasterStyle` and the `SonnerToaster` props.
+
+type ToastClassNames = NonNullable<
+  NonNullable<ToasterProps["toastOptions"]>["classNames"]
+>;
+type ToasterStyle = CSSProperties & Record<`--${string}`, string>;
+
+type SonnerToasterOptions = {
+  /** `"lg"` (default) uses `rounded-lg`. `"surface"` uses `rounded-surface`. */
+  toastRadius?: "lg" | "surface";
+  /** `"default"` keeps sonner's icons. `"filled24"` uses 24px filled icons. */
+  toastIcons?: "default" | "filled24";
+  /**
+   * `"default"` keeps the text-style close button. `"hoverChip"` uses a round chip at the
+   * top-right, shown on hover (always on small screens) and enables sonner's `closeButton`
+   * unless the caller sets it.
+   */
+  closeButtonStyle?: "default" | "hoverChip";
+  /** When true, set sonner's `--normal-*` variables from `--color-*` tokens and `font-family: inherit`. */
+  sonnerVars?: boolean;
+  /** When true, descriptions use `text-muted-foreground!` so sonner's dark rule cannot win. */
+  descriptionMuted?: boolean;
+};
+
+const hoverChipCloseButtonClassName =
+  "pointer-events-none absolute -right-2 -top-2 z-10 flex h-6 w-6 items-center justify-center rounded-full border border-border bg-card/95 text-muted-foreground opacity-0 transition-opacity hover:text-foreground focus-visible:pointer-events-auto focus-visible:opacity-100 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring group-hover:pointer-events-auto group-hover:opacity-100 max-sm:pointer-events-auto max-sm:opacity-100 max-sm:hit-target";
+
+const defaultCloseButtonClassName =
+  "rounded-lg bg-default px-2.5 py-1 text-xs font-medium text-foreground transition-colors hover:bg-default/78";
+
+/** Default `classNames`, with the opt-in variants applied. No options gives the 0.2.1 defaults. */
+function createToasterClassNames({
+  toastRadius = "lg",
+  closeButtonStyle = "default",
+  descriptionMuted = false,
+}: Pick<
+  SonnerToasterOptions,
+  "toastRadius" | "closeButtonStyle" | "descriptionMuted"
+> = {}): ToastClassNames {
+  const radius = toastRadius === "surface" ? "rounded-surface" : "rounded-lg";
+  return {
+    toast: `group toast glass-panel-strong flex w-full items-center gap-3 ${radius} px-4 py-3 text-sm text-foreground smooth-shadow-ring-md`,
+    title: "font-medium leading-snug",
+    description: descriptionMuted
+      ? "text-[13px] leading-snug text-muted-foreground!"
+      : "text-[13px] leading-snug text-muted-foreground",
+    actionButton:
+      "rounded-lg bg-primary px-2.5 py-1 text-xs font-medium text-primary-foreground transition-opacity hover:opacity-90",
+    cancelButton:
+      "rounded-lg bg-surface-secondary px-2.5 py-1 text-xs font-medium text-muted-foreground transition-colors hover:bg-surface-tertiary",
+    closeButton:
+      closeButtonStyle === "hoverChip"
+        ? hoverChipCloseButtonClassName
+        : defaultCloseButtonClassName,
+    loader: "text-muted-foreground",
+    success: "[&_[data-icon]]:text-success",
+    error: "[&_[data-icon]]:text-danger",
+    warning: "[&_[data-icon]]:text-warning",
+    info: "[&_[data-icon]]:text-primary",
+  };
+}
+
+/** Per key, joins the default class string and the caller string (defaults first, so callers win). */
+function mergeToastClassNames(
+  defaults: ToastClassNames,
+  overrides?: ToastClassNames,
+): ToastClassNames {
+  if (!overrides) return defaults;
+  const merged: Record<string, string | undefined> = { ...defaults };
+  for (const [key, value] of Object.entries(overrides)) {
+    if (!value) continue;
+    const base = merged[key];
+    merged[key] = base ? `${base} ${value}` : value;
+  }
+  return merged as ToastClassNames;
+}
+
+/** Sonner variables read from `--color-*` tokens. Work with `tokens.css` and the compat file. */
+const sonnerVarsStyle: ToasterStyle = {
+  fontFamily: "inherit",
+  "--normal-bg": "var(--color-card)",
+  "--normal-border": "var(--color-border)",
+  "--normal-text": "var(--color-foreground)",
+  "--normal-bg-hover": "var(--color-muted)",
+  "--normal-border-hover": "var(--color-border)",
+};
+
+/** `{ ...defaults, ...overrides }`. The package adds no style keys unless `sonnerVars` is on. */
+function mergeToasterStyle(
+  defaults: CSSProperties | undefined,
+  overrides: CSSProperties | undefined,
+): CSSProperties | undefined {
+  if (!defaults) return overrides;
+  return overrides ? { ...defaults, ...overrides } : defaults;
+}
+
+/** Package defaults first. Caller wins per field, except `classNames`, which merge. */
+function mergeToastOptions(
+  defaults: NonNullable<ToasterProps["toastOptions"]>,
+  overrides?: ToasterProps["toastOptions"],
+): NonNullable<ToasterProps["toastOptions"]> {
+  const { classNames, ...rest } = overrides ?? {};
+  return {
+    ...defaults,
+    ...rest,
+    classNames: mergeToastClassNames(defaults.classNames ?? {}, classNames),
+  };
+}
+
+function SonnerToaster({
+  toastRadius,
+  toastIcons = "default",
+  closeButtonStyle = "default",
+  sonnerVars = false,
+  descriptionMuted,
+  toastOptions,
+  icons,
+  style,
+  className,
+  closeButton,
+  ...props
+}: ToasterProps & SonnerToasterOptions) {
+  const mergedIcons =
+    toastIcons === "filled24" ? { ...filledToastIcons, ...icons } : icons;
   return (
     <Toaster
       expand={false}
       visibleToasts={4}
       gap={12}
-      className="toaster group !font-sans"
-      toastOptions={{
-        unstyled: true,
-        classNames: {
-          toast:
-            "group toast glass-panel-strong flex w-full items-center gap-3 rounded-lg px-4 py-3 text-sm text-foreground smooth-shadow-ring-md",
-          title: "font-medium leading-snug",
-          description: "text-[13px] leading-snug text-muted",
-          actionButton:
-            "rounded-lg bg-accent px-2.5 py-1 text-xs font-medium text-accent-foreground transition-opacity hover:opacity-90",
-          cancelButton:
-            "rounded-lg bg-surface-secondary px-2.5 py-1 text-xs font-medium text-muted transition-colors hover:bg-surface-tertiary",
-          closeButton:
-            "rounded-lg bg-default px-2.5 py-1 text-xs font-medium text-foreground transition-colors hover:bg-default/78",
-          loader: "text-muted",
-          success: "[&_[data-icon]]:text-success",
-          error: "[&_[data-icon]]:text-danger",
-          warning: "[&_[data-icon]]:text-warning",
-          info: "[&_[data-icon]]:text-accent",
-        },
-      }}
       {...props}
+      closeButton={closeButton ?? (closeButtonStyle === "hoverChip" ? true : undefined)}
+      className={className ? `toaster group !font-sans ${className}` : "toaster group !font-sans"}
+      icons={mergedIcons}
+      style={mergeToasterStyle(sonnerVars ? sonnerVarsStyle : undefined, style)}
+      toastOptions={mergeToastOptions(
+        {
+          unstyled: true,
+          classNames: createToasterClassNames({
+            toastRadius,
+            closeButtonStyle,
+            descriptionMuted,
+          }),
+        },
+        toastOptions,
+      )}
     />
   );
 }
 
-export { SonnerToaster };
+export {
+  SonnerToaster,
+  createToasterClassNames,
+  hoverChipCloseButtonClassName,
+  mergeToastClassNames,
+  mergeToastOptions,
+  mergeToasterStyle,
+  sonnerVarsStyle,
+};
+export { filledToastIcons } from "./sonner-icons";
+export type { SonnerToasterOptions };

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`, `@utility reveal-on-hover` and `@utility rounded-surface` (`clamp(0.75rem, var(--radius), 1rem)`). |
+| `@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;
+}