@vvedantb/ui 0.5.4 → 0.6.1

package/src/ui/confirm-dialog.tsx

@@ -1,34 +1,39 @@
 import * as React from "react";
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from "./alert-dialog";
-import { Button } from "./button";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "./dialog";
+import { ConfirmDialogParts as Parts, type ConfirmDialogRootProps } from "./confirm-dialog-parts";
 
-export type ConfirmDialogProps = React.ComponentProps<typeof AlertDialog> & {
+export { useConfirmDialog } from "./confirm-dialog-parts";
+export type {
+  ConfirmDialogActionProps,
+  ConfirmDialogBodyProps,
+  ConfirmDialogCancelProps,
+  ConfirmDialogContentProps,
+  ConfirmDialogDescriptionProps,
+  ConfirmDialogFieldProps,
+  ConfirmDialogFooterProps,
+  ConfirmDialogHeaderProps,
+  ConfirmDialogRootProps,
+  ConfirmDialogSize,
+  ConfirmDialogTitleProps,
+} from "./confirm-dialog-parts";
+
+export type ConfirmDialogProps = Omit<
+  ConfirmDialogRootProps,
+  "size" | "alert" | "pending" | "confirmPhrase"
+> & {
   title: React.ReactNode;
   description?: React.ReactNode;
+  /** Legacy (still supported): compose `ConfirmDialog.Cancel` instead. */
   cancelLabel?: React.ReactNode;
+  /** Legacy (still supported): compose `ConfirmDialog.Action` instead. */
   confirmLabel?: React.ReactNode;
   onCancel?: () => void;
   onConfirm?: () => void;
+  /** Legacy (still supported): pass `variant` to `ConfirmDialog.Action` instead. */
   variant?: "default" | "destructive";
   confirmDisabled?: boolean;
   /**
+   * Legacy (still supported): use `ConfirmDialog.Root size` with the parts.
+   *
    * `"default"`: blocking alert dialog that closes on either button.
    * `"sm"`: compact dismissible dialog (outside click, Escape and the close
    * button close it). Confirm does not close it; the caller controls `open`.
@@ -38,7 +43,7 @@ export type ConfirmDialogProps = React.ComponentProps<typeof AlertDialog> & {
   size?: "default" | "sm" | "md";
 };
 
-function ConfirmDialog({
+function LegacyConfirmDialog({
   title,
   description,
   cancelLabel = "Cancel",
@@ -51,95 +56,49 @@ function ConfirmDialog({
   children,
   ...props
 }: ConfirmDialogProps) {
-  if (size === "sm") {
-    return (
-      <Dialog {...props}>
-        {children}
-        <DialogContent className="sm:max-w-96">
-          <DialogTitle className="mb-2 text-sm font-medium">{title}</DialogTitle>
-          {description != null ? (
-            <DialogDescription className="mb-4 text-sm text-muted-foreground">
-              {description}
-            </DialogDescription>
-          ) : null}
-          <div className="flex justify-end gap-2">
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={() => {
-                onCancel?.();
-                props.onOpenChange?.(false);
-              }}
-            >
-              {cancelLabel}
-            </Button>
-            <Button
-              variant={variant}
-              size="sm"
-              disabled={confirmDisabled}
-              onClick={onConfirm}
-            >
-              {confirmLabel}
-            </Button>
-          </div>
-        </DialogContent>
-      </Dialog>
-    );
-  }
-
-  if (size === "md") {
-    return (
-      <Dialog {...props}>
-        {children}
-        <DialogContent className="sm:max-w-96">
-          <DialogHeader className="pb-4">
-            <DialogTitle>{title}</DialogTitle>
-          </DialogHeader>
-          {description != null ? (
-            <DialogDescription className="py-6 text-muted-foreground">{description}</DialogDescription>
-          ) : null}
-          <DialogFooter className="pt-4">
-            <Button
-              variant="ghost"
-              onClick={() => {
-                onCancel?.();
-                props.onOpenChange?.(false);
-              }}
-            >
-              {cancelLabel}
-            </Button>
-            <Button variant={variant} disabled={confirmDisabled} onClick={onConfirm}>
-              {confirmLabel}
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    );
-  }
-
+  const titleNode = <Parts.Title>{title}</Parts.Title>;
+  const descriptionNode =
+    description != null ? <Parts.Description>{description}</Parts.Description> : null;
   return (
-    <AlertDialog {...props}>
+    <Parts.Root {...props} size={size}>
       {children}
-      <AlertDialogContent>
-        <AlertDialogHeader>
-          <AlertDialogTitle>{title}</AlertDialogTitle>
-          {description != null ? (
-            <AlertDialogDescription>{description}</AlertDialogDescription>
-          ) : null}
-        </AlertDialogHeader>
-        <AlertDialogFooter>
-          <AlertDialogCancel onClick={onCancel}>{cancelLabel}</AlertDialogCancel>
-          <AlertDialogAction
-            variant={variant}
-            disabled={confirmDisabled}
-            onClick={onConfirm}
-          >
+      <Parts.Content>
+        {size === "sm" ? (
+          <>
+            {titleNode}
+            {descriptionNode}
+          </>
+        ) : size === "md" ? (
+          <>
+            <Parts.Header>{titleNode}</Parts.Header>
+            {descriptionNode}
+          </>
+        ) : (
+          <Parts.Header>
+            {titleNode}
+            {descriptionNode}
+          </Parts.Header>
+        )}
+        <Parts.Footer>
+          {/* The alert cancel passes the click event on; sm and md call onCancel bare. */}
+          <Parts.Cancel onClick={size === "default" ? onCancel : () => onCancel?.()}>
+            {cancelLabel}
+          </Parts.Cancel>
+          <Parts.Action variant={variant} disabled={confirmDisabled} onClick={onConfirm}>
             {confirmLabel}
-          </AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
+          </Parts.Action>
+        </Parts.Footer>
+      </Parts.Content>
+    </Parts.Root>
   );
 }
+LegacyConfirmDialog.displayName = "ConfirmDialog";
+
+/**
+ * Confirm dialog. Call it with props (the legacy prop-driven API), or compose
+ * the parts: `ConfirmDialog.Root`, `.Content`, `.Header`, `.Title`,
+ * `.Description`, `.Body`, `.Footer`, `.Cancel`, `.Action` and `.Field`.
+ */
+const ConfirmDialog = Object.assign(LegacyConfirmDialog, Parts);
 
 export { ConfirmDialog };

package/src/ui/overlay-a11y.ts

@@ -143,11 +143,13 @@ export function treeHasDialogDescription(
     if (!React.isValidElement(child)) return false;
     const type = child.type;
     if (type === descriptionType) return true;
+    // Wrappers named like `ConfirmDialog.Description` count too.
     const displayName =
-      typeof type === "object" && type !== null
-        ? (type as { displayName?: string }).displayName
+      (typeof type === "function" || (typeof type === "object" && type !== null)) &&
+      "displayName" in type
+        ? type.displayName
         : undefined;
-    if (displayName === "DialogDescription") return true;
+    if (typeof displayName === "string" && /Dialog\.?Description$/.test(displayName)) return true;
     const props = child.props as { children?: React.ReactNode };
     return treeHasDialogDescription(props.children, descriptionType);
   });

package/tokens/README.md

@@ -0,0 +1,98 @@
+# `@vvedantb/ui/tokens`
+
+Design tokens and shared Tailwind v4 CSS for the vvedantb web apps. The CSS and Tailwind preset are subpaths of `@vvedantb/ui`; the native JS tokens are named exports of the root (`tokens`, `Tokens`). 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. |
+| `tokens` and `Tokens` from `@vvedantb/ui` | `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.