@vvedantb/ui 0.13.1 → 0.15.0

package/README.md

@@ -4,10 +4,10 @@ Shared React 19 web UI. Source-exported: no build step.
 
 | Import | What it is |
 | --- | --- |
-| `@vvedantb/ui` | The only JavaScript entry. Primitives (Radix-based), AI elements, audio (`playChime`, `useReplyChime`, `playTone`), `toast` and `SonnerToaster`, the composer (`InputArea`, deprecated 0.3 `Composer`), shell (`SidebarHeader`, `PillTabs`, `SessionsHoverCard`, and the app shell: `AppShell`, `AppSidebar`, `SidebarRail`, `RailTile`, `SidebarPanel`, `SidebarAccountMenu`, `SignOutDialog` and related helpers), app helpers (confirm skip, update watcher, settings chrome, `useStableAuth`, and from 0.8.0 `createThemeProvider`, `createPageTitleContext`, `PageMotionProvider` and `formatCompactRelativeTime`), marketing pieces from 0.9.0 (`createLandingKit` and the `Landing*` parts, `SiteFooter`, `PricingModal`), animated nav icons from 0.11.0 (`MemoryIcon`, `BoardIcon`, ... and `NavIconBase`; `SettingsIcon` `variant` from 0.12.0), artifact viewers from 0.13.0 (`ArtifactFrame`, `ArtifactList`, `ArtifactViewer`, ...), `cn`, and the native tokens `tokens` and `Tokens`. See `app/README.md` in the repository for the app helpers. |
+| `@vvedantb/ui` | The only JavaScript entry. Primitives (Radix-based), AI elements, audio (`playChime`, `useReplyChime`, `playTone`), `toast` and `SonnerToaster`, the composer (`InputArea`, deprecated 0.3 `Composer`), shell (`SidebarHeader`, `PillTabs`, `SessionsHoverCard`, and the app shell: `AppShell`, `AppSidebar`, `SidebarRail`, `RailTile`, `SidebarPanel`, `SidebarAccountMenu`, `SignOutDialog` and related helpers), app helpers (confirm skip, update watcher, settings chrome, `useStableAuth`, and from 0.8.0 `createThemeProvider`, `createPageTitleContext`, `PageMotionProvider` and `formatCompactRelativeTime`), marketing pieces from 0.9.0 (`createLandingKit` and the `Landing*` parts, `SiteFooter`, `PricingModal`), animated nav icons from 0.11.0 (`MemoryIcon`, `BoardIcon`, ... and `NavIconBase`; `SettingsIcon` `variant` from 0.12.0), artifact viewers from 0.13.0 (`ArtifactFrame`, `ArtifactList`, `ArtifactViewer`, ...), date pickers from 0.14.0 (`Calendar`, `DatePicker`, `DateTimePicker`, `MonthPicker`), `cn`, and the native tokens `tokens` and `Tokens`. See `app/README.md` in the repository for the app helpers. |
 | `@vvedantb/ui/tokens` | `tokens.css`: colour, radius, shadow, ease and font tokens for Tailwind v4. CSS. |
 | `@vvedantb/ui/tokens/tokens.css` | Same file as `@vvedantb/ui/tokens`. CSS. |
-| `@vvedantb/ui/tokens/css/*.css` | `index`, `base`, `dialog`, `modal`, `tabs`, `tabs-pills`, `utilities`, `scrollbar-thin`, `animations`, `nav-icons`, `compat-shadcn-rgb`. CSS. |
+| `@vvedantb/ui/tokens/css/*.css` | `index`, `base`, `dialog`, `modal`, `tabs`, `tabs-pills`, `utilities`, `scrollbar-thin`, `clear-input`, `motion`, `animations`, `nav-icons`, `compat-shadcn-rgb`. CSS. `tokens.css` imports `scrollbar-thin`, `clear-input` and `motion`. |
 | `@vvedantb/ui/tokens/compat/shadcn-rgb.css` | Same file as `tokens/css/compat-shadcn-rgb.css`. CSS. |
 | `@vvedantb/ui/tokens/tailwind-preset` | Tailwind preset (`.mjs`) for `@config "@vvedantb/ui/tokens/tailwind-preset"`. Kept as a build-tool entry: Tailwind needs a resolvable package path, and it is not a React API. |
 | `@vvedantb/ui/landing.css` | Landing page classes (`landing-atmosphere`, `landing-grain`, `landing-pulse-dot`, ambient graph and preview animations, smooth `#top` scrolling). CSS. |
@@ -661,7 +661,7 @@ Rows in the panel beside the rail. Rail tiles are unchanged.
 | Focus ring | none | `focus-visible:ring-2 focus-visible:ring-foreground/35`, no outline |
 | Icon-only row | `justify-center px-0 py-1.5` | same, plus the radius, text, fill and focus classes above |
 | Icon (`sidebarNavIconClass`) | none (apps used 18px in a 20px box) | `size-[19px] shrink-0`; `text-muted-foreground` idle, `text-foreground` active |
-| Section label | `px-3 py-1 text-[11px]` | `px-4 py-1 text-[11px] leading-4` (16px line). Colour still comes from the app's `.sidebar-section-label` rule. |
+| Section label | `px-3 py-1 text-[11px]` | `px-4 py-1 text-[11px] leading-4` (16px line). Colour comes from `.sidebar-section-label` in `tokens.css` (0.15.0; `--muted` at `--sidebar-section-label-mix` 55%, 80% on hover). |
 
 The hover fill is static: it does not slide between rows. While another row is hovered, the active row keeps its fill.
 
@@ -985,6 +985,23 @@ const store: ArtifactStateStore = {
 - Rename and delete use `ConfirmDialog` (`ArtifactRenameDialog`, `ArtifactDeleteDialog`, and `useArtifactEditDialogs` for custom surfaces). Rename sends the trimmed title, and does nothing when it is unchanged. Alt-click on Delete skips the dialog, as with `useRequestConfirm`. The delete dialog says "This cannot be undone."; pass `deleteDescription` to `ArtifactViewer`, `ArtifactCard` or `ArtifactList` to change it (0.13.1), for example when your delete can be undone. A callback that rejects keeps its dialog open and shows an error toast; copy and load failures toast too, so mount `SonnerToaster`.
 - `ArtifactTypeIcon` (`type`, `size`, `stroke`) and `ARTIFACT_TYPE_LABELS` (`mindmap` is "Mind map"). Helpers `downloadArtifactBody(title, format, body)`, `copyArtifactBody(body)`, `openArtifactInNewTab(href)`. Row types: `ArtifactSummary` (any `ArtifactListRow` fits), `ArtifactDocument`, `ArtifactVersionSummary`.
 
+## Date pickers (0.14.0)
+
+Controlled pickers that read and write the native input strings, as local calendar dates with no timezone logic. They need `react-day-picker` 9, a dependency of this package.
+
+```tsx
+import { DatePicker, DateTimePicker, MonthPicker } from "@vvedantb/ui";
+
+<DatePicker value={due} onChange={setDue} min="2026-01-01" clearable name="due" ariaLabel="Due date" />
+<DateTimePicker value={startsAt} onChange={setStartsAt} defaultTime="09:00" name="startsAt" />
+<MonthPicker value={month} onChange={setMonth} max="2026-12" />
+```
+
+- `DatePicker`: `value` "YYYY-MM-DD" or "". The trigger matches `TimePicker` and shows the date with `dateStyle: "medium"` (`locale`) or `placeholder` ("Pick a date"). `min` and `max` disable days; `clearable` adds a clear control (`onChange("")`); `name` adds a hidden input. `className` goes on the wrapper, `triggerClassName` merges onto the button (default `w-40`). A width on either sizes the field, and `w-full` on either fills the row; pill inputs can pass `triggerClassName="h-10 w-full rounded-full px-4 text-sm"`. `ariaLabel` names the trigger, followed by the shown text.
+- `DateTimePicker`: `value` "YYYY-MM-DDTHH:mm" or "". A date with no time uses `defaultTime` ("00:00"); a time with no date uses today. Only the date part of `min` and `max` applies. `triggerClassName` goes to both triggers, a width only to the date.
+- `MonthPicker`: `value` "YYYY-MM" or "", with year navigation and a month grid. `min` and `max` are "YYYY-MM".
+- `Calendar`: the styled `DayPicker` for custom layouts (every `DayPicker` prop). `parseDateValue` and `formatDateValue` convert between "YYYY-MM-DD" and a local `Date`.
+
 ## Toaster
 
 ```tsx
@@ -1042,9 +1059,9 @@ Use this when the app defines shadcn-style variables as space-separated channels
 @source "../node_modules/@vvedantb/ui/src/**/*.{ts,tsx}";
 ```
 
-Shared CSS that is safe without `tokens.css`: `compat-shadcn-rgb.css`, `dialog.css`, `utilities.css`, `scrollbar-thin.css` (reads `--scrollbar`, which the compat file defines), `modal.css` and `tabs.css` (both need the app motion variables listed in `tokens/README.md`), and `animations.css` (not with the Tailwind preset). `base.css` and `tabs-pills.css` read raw `--accent`, `--foreground`, `--muted`, `--segment` and `--default`; skip them unless the app defines those as full colour values.
+Shared CSS that is safe without `tokens.css`: `compat-shadcn-rgb.css`, `dialog.css`, `utilities.css`, `scrollbar-thin.css` (reads `--scrollbar`, which the compat file defines), `clear-input.css` and `motion.css` (import them yourself; `tokens.css` is what imports them otherwise), `modal.css` and `tabs.css` (both need the motion variables listed in `tokens/README.md` on the app `:root`, because `tokens.css` sets them), and `animations.css` (not with the Tailwind preset). `base.css` and `tabs-pills.css` read raw `--accent`, `--foreground`, `--muted`, `--segment` and `--default`; skip them unless the app defines those as full colour values.
 
-The compat file includes a fallback `glass-panel-strong` (`rgb(var(--card) / 0.95)` with a 12px blur) for toasts and dialogs. Declare your own `@utility glass-panel-strong` after the import to override it.
+The compat file defines `.glass-panel-strong` for toasts, dialogs and hover cards as the solid popover colour (`rgb(var(--popover))`, as `bg-overlay`), the same as `tokens.css`. Before 0.15.0 it was `rgb(var(--card) / 0.95)` with a 12px blur. The rule is in `@layer components`, so an app `.glass-panel-strong` rule after the import wins.
 
 A fixture that renders the main components against sample light and dark RGB variables is in `tokens/examples/compat-shadcn-rgb/`.
 

package/app/README.md

@@ -160,7 +160,7 @@ import { PageMotionProvider, useDisablePageMotion } from "@vvedantb/ui";
 </PageMotionProvider>;
 ```
 
-- Sets `html[data-page-motion]` to `"off"` or `"on"` in a layout effect (CSS can skip page and route transitions on `"off"`). The attribute stays after unmount.
+- Sets `html[data-page-motion]` to `"off"` or `"on"` in a layout effect. The attribute stays after unmount. From 0.15.0 `tokens.css` (through `tokens/css/motion.css`) ships the `"off"` rules: `.ui-page-enter`, `.ui-enter`, `.ui-enter-up` and `.ui-stagger` fade only, `animate-in` / `animate-out`, `.t-modal` and `.t-tabs-pill` stop transitioning, and view transitions stop.
 - Renders `motionConfig` with `reducedMotion` `"always"` when disabled, else `"never"`.
 - `useDisablePageMotion()`: the `disabled` value, `false` outside the provider.
 - This module does not import `motion`. Pass `MotionConfig`, or an app component that wraps it, defined at module level, for example with `LazyMotion`:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vvedantb/ui",
-  "version": "0.13.1",
+  "version": "0.15.0",
   "license": "MIT",
   "description": "Shared React 19 UI for web apps: one JavaScript entry (primitives, shell pieces, app helpers including the Convex and Clerk provider, VITE env parsing and ensure-user, artifact viewers over the @vvedantb/server artifacts core, native tokens), design-token CSS, shared Tailwind v4 CSS and a Tailwind preset.",
   "type": "module",
@@ -27,6 +27,8 @@
     "./tokens/css/tabs-pills.css": "./tokens/src/css/tabs-pills.css",
     "./tokens/css/utilities.css": "./tokens/src/css/utilities.css",
     "./tokens/css/scrollbar-thin.css": "./tokens/src/css/scrollbar-thin.css",
+    "./tokens/css/clear-input.css": "./tokens/src/css/clear-input.css",
+    "./tokens/css/motion.css": "./tokens/src/css/motion.css",
     "./tokens/css/animations.css": "./tokens/src/css/animations.css",
     "./tokens/css/nav-icons.css": "./tokens/src/css/nav-icons.css",
     "./tokens/css/compat-shadcn-rgb.css": "./tokens/src/css/compat-shadcn-rgb.css",
@@ -64,6 +66,9 @@
     "analyze": "node tokens/verify/analyze.mjs",
     "prepack": "node tokens/scripts/check-exports.mjs"
   },
+  "dependencies": {
+    "react-day-picker": "^9.14.0"
+  },
   "peerDependencies": {
     "@clerk/clerk-react": ">=5",
     "@radix-ui/react-accordion": "^1.2.12",

package/shell/src/app-shell-classes.ts

@@ -21,8 +21,8 @@ export const railBadgeClass = "absolute -bottom-0.5 -right-0.5 flex h-4 min-w-4
 
 /**
  * Static section label above a group of panel nav rows. `px-4` lines the text
- * up with the nav row icons; the colour comes from the app's
- * `.sidebar-section-label` rule.
+ * up with the nav row icons; the colour comes from `.sidebar-section-label` in
+ * tokens.css.
  */
 export const sidebarSectionLabelClass =
   "sidebar-section-label px-4 py-1 text-[11px] leading-4 font-medium tracking-[-0.01em]";

package/src/index.ts

@@ -55,6 +55,8 @@ export * from "./ui/tabs";
 export * from "./ui/textarea";
 export * from "./ui/toolbar-search-input";
 export * from "./ui/time-picker";
+export * from "./ui/calendar";
+export * from "./ui/date-picker";
 export * from "./ui/tooltip";
 export * from "./ui/kbd";
 export * from "./ui/sheet";

package/src/ui/_picker-classes.ts

@@ -0,0 +1,18 @@
+// input-styled trigger shared by TimePicker and the date pickers
+export const pickerTriggerClass =
+  "inline-flex h-8 items-center justify-between gap-2 rounded-field border border-border bg-field-background px-2.5 text-xs font-medium tabular-nums transition-[border-color,box-shadow,background-color] duration-200 ease-smooth hover:bg-field-background/90 focus-visible:border-focus-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring disabled:cursor-not-allowed disabled:opacity-50";
+
+// selected item in a picker popover (TimePicker columns, calendar days, months)
+export const pickerSelectedClass = "bg-primary text-primary-foreground";
+
+export const pickerItemHoverClass = "hover:bg-surface-tertiary/50";
+
+export const pickerFocusClass =
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring";
+
+// wrapper around a trigger and its siblings (clear control, second picker). it
+// shrinks to the trigger, grows with a `w-*` className, and goes full width
+// when a trigger inside is `w-full` (a percent width cannot resolve against a
+// shrink-to-fit wrapper)
+export const pickerFieldClass =
+  "relative inline-flex max-w-full align-middle has-[.w-full]:flex has-[.w-full]:w-full";

package/src/ui/calendar.tsx

@@ -0,0 +1,161 @@
+import * as React from "react";
+import {
+  IconChevronDown,
+  IconChevronLeft,
+  IconChevronRight,
+} from "@tabler/icons-react";
+import {
+  type Chevron,
+  DayPicker,
+  type Root,
+  getDefaultClassNames,
+} from "react-day-picker";
+import { cn } from "../utils/cn";
+import {
+  pickerFocusClass,
+} from "./_picker-classes";
+
+// shadcn's v9 calendar on package tokens: no background of its own (it takes
+// the popover or card surface it sits on), selected days use the picker
+// active treatment, today gets a dot, outside days are muted and disabled
+// days dimmed. day state lives on the cell (`data-selected`, `data-today`,
+// ...), so the day button reads it through `group/day`
+const navButtonClass = cn(
+  "inline-flex size-(--cell-size) select-none items-center justify-center rounded-lg p-0 text-muted-foreground transition-colors hover:bg-surface-tertiary hover:text-foreground aria-disabled:pointer-events-none aria-disabled:opacity-50",
+  pickerFocusClass,
+);
+
+function CalendarRoot({
+  className,
+  rootRef,
+  ...props
+}: React.ComponentProps<typeof Root>) {
+  return (
+    <div data-slot="calendar" ref={rootRef} className={className} {...props} />
+  );
+}
+
+function CalendarChevron({
+  className,
+  orientation,
+}: React.ComponentProps<typeof Chevron>) {
+  const iconClass = cn("size-4", className);
+  if (orientation === "left") return <IconChevronLeft className={iconClass} />;
+  if (orientation === "right") {
+    return <IconChevronRight className={iconClass} />;
+  }
+  return <IconChevronDown className={iconClass} />;
+}
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  captionLayout = "label",
+  formatters,
+  components,
+  ...props
+}: React.ComponentProps<typeof DayPicker>) {
+  const defaultClassNames = getDefaultClassNames();
+
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn(
+        "group/calendar p-1 text-foreground [--cell-size:--spacing(8)]",
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        className,
+      )}
+      captionLayout={captionLayout}
+      formatters={{
+        formatMonthDropdown: (date) =>
+          date.toLocaleString("default", { month: "short" }),
+        ...formatters,
+      }}
+      classNames={{
+        root: cn("w-fit", defaultClassNames.root),
+        months: cn(
+          "relative flex flex-col gap-4 md:flex-row",
+          defaultClassNames.months,
+        ),
+        month: cn("flex w-full flex-col gap-2", defaultClassNames.month),
+        nav: cn(
+          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
+          defaultClassNames.nav,
+        ),
+        button_previous: cn(navButtonClass, defaultClassNames.button_previous),
+        button_next: cn(navButtonClass, defaultClassNames.button_next),
+        month_caption: cn(
+          "flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)",
+          defaultClassNames.month_caption,
+        ),
+        dropdowns: cn(
+          "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-xs font-medium",
+          defaultClassNames.dropdowns,
+        ),
+        dropdown_root: cn(
+          "relative rounded-field border border-border has-focus:border-focus-border has-focus:ring-2 has-focus:ring-focus-ring",
+          defaultClassNames.dropdown_root,
+        ),
+        dropdown: cn(
+          "absolute inset-0 bg-overlay opacity-0",
+          defaultClassNames.dropdown,
+        ),
+        caption_label: cn(
+          "select-none text-xs font-medium",
+          captionLayout !== "label" &&
+            "flex h-7 items-center gap-1 rounded-field pl-2 pr-1 [&>svg]:size-3.5 [&>svg]:text-muted-foreground",
+          defaultClassNames.caption_label,
+        ),
+        month_grid: "w-full border-collapse",
+        weekdays: cn("flex", defaultClassNames.weekdays),
+        weekday: cn(
+          "flex-1 select-none text-[10px] font-normal uppercase tracking-wider text-muted-foreground",
+          defaultClassNames.weekday,
+        ),
+        week: cn("mt-1 flex w-full", defaultClassNames.week),
+        week_number_header: cn(
+          "w-(--cell-size) select-none",
+          defaultClassNames.week_number_header,
+        ),
+        week_number: cn(
+          "select-none text-[10px] text-muted-foreground",
+          defaultClassNames.week_number,
+        ),
+        day: cn(
+          "group/day relative aspect-square h-full w-full select-none p-0 text-center",
+          defaultClassNames.day,
+        ),
+        day_button: cn(
+          "relative inline-flex size-(--cell-size) items-center justify-center rounded-lg text-xs tabular-nums text-foreground/80 transition-colors disabled:cursor-not-allowed disabled:opacity-40",
+          pickerFocusClass,
+          // today, outside and hover rules exclude selected days, so the
+          // selected tone never depends on the order Tailwind emits rules in.
+          // the today dot is `bg-current`: foreground, or primary-foreground
+          // when selected
+          "not-group-data-selected/day:enabled:hover:bg-surface-tertiary/50",
+          "group-data-today/day:font-semibold group-data-today/day:not-group-data-selected/day:text-foreground group-data-today/day:after:absolute group-data-today/day:after:bottom-1 group-data-today/day:after:left-1/2 group-data-today/day:after:size-1 group-data-today/day:after:-translate-x-1/2 group-data-today/day:after:rounded-full group-data-today/day:after:bg-current",
+          "group-data-outside/day:not-group-data-selected/day:text-muted-foreground",
+          // spelled out (not built from pickerSelectedClass) so Tailwind's
+          // scanner sees it
+          "group-data-selected/day:bg-primary group-data-selected/day:text-primary-foreground",
+          defaultClassNames.day_button,
+        ),
+        range_start: cn("rounded-l-lg", defaultClassNames.range_start),
+        range_middle: cn("rounded-none", defaultClassNames.range_middle),
+        range_end: cn("rounded-r-lg", defaultClassNames.range_end),
+        hidden: cn("invisible", defaultClassNames.hidden),
+        ...classNames,
+      }}
+      components={{
+        Root: CalendarRoot,
+        Chevron: CalendarChevron,
+        ...components,
+      }}
+      {...props}
+    />
+  );
+}
+
+export { Calendar };

package/src/ui/clearInputDissolve.ts

@@ -1,19 +1,24 @@
 /** transitions.dev input clear with dissolve — see 13-input-clear-dissolve.md */
 
-function readCssNumber(
+// Times come back in ms. CSS minifiers rewrite `1000ms` as `1s`, so a value
+// in seconds is converted rather than read as 1.
+export function readCssNumber(
   root: HTMLElement,
   name: string,
   fallback: number,
 ): number {
-  const raw = getComputedStyle(root).getPropertyValue(name);
+  const raw = getComputedStyle(root).getPropertyValue(name).trim();
   const parsed = parseFloat(raw);
-  return Number.isFinite(parsed) ? parsed : fallback;
+  if (!Number.isFinite(parsed)) {
+    return fallback;
+  }
+  return /\ds$/.test(raw) ? parsed * 1000 : parsed;
 }
 
-function readCssEase(root: HTMLElement, name: string): (t: number) => number {
+export function readCssEase(root: HTMLElement, name: string): (t: number) => number {
   const raw = getComputedStyle(root).getPropertyValue(name);
   const match = raw.match(
-    /cubic-bezier\(([-\d.]+),([-\d.]+),([-\d.]+),([-\d.]+)\)/,
+    /cubic-bezier\(\s*([-\d.]+)\s*,\s*([-\d.]+)\s*,\s*([-\d.]+)\s*,\s*([-\d.]+)\s*\)/,
   );
   if (!match) {
     return (t) => t;