@vvedantb/ui 0.11.0 → 0.12.0

package/README.md

@@ -4,7 +4,7 @@ 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`), `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), `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. |
@@ -904,7 +904,7 @@ import { MemoryIcon, TerminalIcon } from "@vvedantb/ui";
 | `FilesIcon` | Two stacked files; the back one slides | 1.7 | 1400 ms |
 | `InboxIcon` | Tray; a letter drops in | 1.7 | 1300 ms |
 | `BuildingIcon` | Building; windows blink | 1.7 | 1600 ms |
-| `SettingsIcon` | Gear; spins | 1.7 | 2500 ms |
+| `SettingsIcon` | Gear; spins. `variant="turn"`: clicks round a notch at a time | 1.7 (`turn`: 1.75) | 2500 ms (`turn`: 2400 ms) |
 | `BoardIcon` | Three-column board; cards drop, one travels | 1.75 | 1800 ms |
 | `ChecklistIcon` | Two checked tasks; checks redraw | 1.75 | 1600 ms |
 | `TerminalIcon` | Terminal; prompt, typing, cursor. Has `active` | 1.75 | 1400 ms |
@@ -930,8 +930,9 @@ Props (type `IconProps`; all optional):
 | `animate` | `"hover"` | `"hover"`: animate while a `.group` ancestor is hovered. `true`: always. `false`: never, and no hover scale. Sets `data-animate`. |
 | `duration` | | Length in ms of the icon's longest loop (table). Sets `--vv-icon-duration-scale` to `duration / longest loop`; every duration and delay in the icon is multiplied by it, so staggers keep their proportions. |
 | `active` | `false` | `TerminalIcon`, `InboxArrowIcon`, `AutomationIcon`: solid variant with cut-out details. Other icons: `data-active="true"` only. |
-| `cutoutColor` | sidebar accent | Cut-out tone while `active` (`CutoutIconProps`). Default `var(--color-sidebar-accent, var(--sidebar-accent))`, so the solid icon suits a `bg-sidebar-accent` tile. |
+| `cutoutColor` | sidebar accent | Cut-out tone while `active` (`CutoutIconProps`). Default `var(--color-sidebar-accent, var(--sidebar-accent))`, so the solid icon suits a `bg-sidebar-accent` tile. If neither variable holds a full colour (for example `--sidebar-accent` holds bare RGB channels such as `233 234 236` and there is no `--color-sidebar-accent`), the cut-outs lose their tone and vanish into the solid shape; pass the colour, e.g. `cutoutColor="rgb(var(--sidebar-accent))"`. |
 | `collapsed` | `false` | `SidebarToggleIcon` only: chevron points out (`SidebarToggleIconProps`). |
+| `variant` | `"spin"` | `SettingsIcon` only (`SettingsIconProps`, 0.12.0). `"spin"`: continuous linear spin, stroke 1.7, 1.15 spring hover scale. `"turn"`: a second gear drawing (hub first) that turns 60deg at a time with the emphasized ease over 2400 ms, stroke 1.75, 1.12 hover scale like the other 1.75-stroke icons. `duration` scales against the variant's own loop. |
 
 Other SVG props (`id`, `data-*`, handlers, `ref`) go to the svg. On group hover the svg scales to 1.15 (the first six icons, spring ease) or 1.12 (the rest). `NavIconBase` is the shared svg wrapper, for icons drawn in the same style. The stylesheet has no reduced-motion override.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vvedantb/ui",
-  "version": "0.11.0",
+  "version": "0.12.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, native tokens), design-token CSS, shared Tailwind v4 CSS and a Tailwind preset.",
   "type": "module",

package/src/icons/index.ts

@@ -7,6 +7,7 @@ export { FilesIcon } from "./files-icon";
 export { InboxIcon } from "./inbox-icon";
 export { BuildingIcon } from "./building-icon";
 export { SettingsIcon } from "./settings-icon";
+export type { SettingsIconProps } from "./settings-icon";
 export { BoardIcon } from "./board-icon";
 export { ChecklistIcon } from "./checklist-icon";
 export { TerminalIcon } from "./terminal-icon";

package/src/icons/settings-icon.tsx

@@ -1,9 +1,28 @@
 import { NavIconBase, type IconProps } from "./nav-icon-base";
 
-/** Gear that spins on hover. */
-export function SettingsIcon({ strokeWidth = 1.7, ...props }: IconProps) {
+export type SettingsIconProps = IconProps & {
+  /**
+   * `"spin"` (default): continuous 2.5s linear spin, stroke 1.7, springy 1.15 hover scale.
+   * `"turn"`: a gear drawn hub first that clicks round one tooth (60deg) at a time over 2.4s,
+   * stroke 1.75, eased 1.12 hover scale like the other 1.75-stroke icons.
+   */
+  variant?: "spin" | "turn";
+};
+
+/** Gear that spins on hover, or turns one notch at a time with `variant="turn"`. */
+export function SettingsIcon({ variant = "spin", strokeWidth, ...props }: SettingsIconProps) {
+  if (variant === "turn") {
+    return (
+      <NavIconBase {...props} strokeWidth={strokeWidth ?? 1.75} hoverScale="1.12" loop={2400}>
+        <g className="vv-icon-gear-turn">
+          <circle cx="12" cy="12" r="3" />
+          <path d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065" />
+        </g>
+      </NavIconBase>
+    );
+  }
   return (
-    <NavIconBase {...props} strokeWidth={strokeWidth} hoverScale="1.15" loop={2500}>
+    <NavIconBase {...props} strokeWidth={strokeWidth ?? 1.7} hoverScale="1.15" loop={2500}>
       <g className="vv-icon-gear">
         <path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" />
         <circle cx="12" cy="12" r="3" />

package/tokens/src/css/nav-icons.css

@@ -41,6 +41,7 @@
 .vv-icon-bolt,
 .vv-icon-inbox-letter,
 .vv-icon-gear,
+.vv-icon-gear-turn,
 .vv-icon-memory-core,
 .vv-icon-memory-ring,
 .vv-icon-board-card,
@@ -210,7 +211,7 @@
   animation: vv-icon-inbox-drop calc(1.3s * var(--vv-icon-duration-scale, 1)) ease-in-out infinite;
 }
 
-/* ── SettingsIcon: continuous spin */
+/* ── SettingsIcon (default variant="spin"): continuous spin */
 @keyframes vv-icon-gear-spin {
   to {
     transform: rotate(360deg);
@@ -221,6 +222,42 @@
   animation: vv-icon-gear-spin calc(2.5s * var(--vv-icon-duration-scale, 1)) linear infinite;
 }
 
+/* ── SettingsIcon variant="turn": six-tooth gear clicks round one notch at a time */
+@keyframes vv-icon-gear-turn {
+  0% {
+    transform: rotate(0deg);
+  }
+  10%,
+  16.66% {
+    transform: rotate(60deg);
+  }
+  26.66%,
+  33.33% {
+    transform: rotate(120deg);
+  }
+  43.33%,
+  50% {
+    transform: rotate(180deg);
+  }
+  60%,
+  66.66% {
+    transform: rotate(240deg);
+  }
+  76.66%,
+  83.33% {
+    transform: rotate(300deg);
+  }
+  93.33%,
+  100% {
+    transform: rotate(360deg);
+  }
+}
+.group:hover .vv-icon[data-animate="hover"] .vv-icon-gear-turn,
+.vv-icon[data-animate="true"] .vv-icon-gear-turn {
+  animation: vv-icon-gear-turn calc(2.4s * var(--vv-icon-duration-scale, 1))
+    var(--motion-ease-emphasized, cubic-bezier(0.2, 0.8, 0.2, 1)) infinite;
+}
+
 /* ── BoardIcon: cards drop in, bounce, then bob while a traveller card
  *    sweeps across all columns. */
 @keyframes vv-icon-board-card-drop {