@adea-ai/ui 0.104.3 → 0.105.0

package/registry.json

@@ -10,7 +10,7 @@
       "description": "",
       "dependencies": [
         "@kobalte/core@^0.13.14",
-        "lucide-solid@^1.48.0"
+        "lucide-solid@^1.51.0"
       ],
       "registryDependencies": [
         "lib"
@@ -34,7 +34,7 @@
       "title": "Alert",
       "description": "",
       "dependencies": [
-        "lucide-solid@^1.48.0"
+        "lucide-solid@^1.51.0"
       ],
       "registryDependencies": [
         "lib"
@@ -175,7 +175,7 @@
       "title": "Breadcrumb",
       "description": "",
       "dependencies": [
-        "lucide-solid@^1.48.0"
+        "lucide-solid@^1.51.0"
       ],
       "registryDependencies": [
         "lib"
@@ -247,7 +247,7 @@
       "description": "",
       "dependencies": [
         "@corvu/calendar@^0.1.2",
-        "lucide-solid@^1.48.0"
+        "lucide-solid@^1.51.0"
       ],
       "registryDependencies": [
         "@adea-ai/ui/button",
@@ -297,7 +297,7 @@
       "dependencies": [
         "embla-carousel",
         "embla-carousel-solid",
-        "lucide-solid@^1.48.0"
+        "lucide-solid@^1.51.0"
       ],
       "registryDependencies": [
         "@adea-ai/ui/button",
@@ -353,7 +353,7 @@
       "description": "",
       "dependencies": [
         "@kobalte/core@^0.13.14",
-        "lucide-solid@^1.48.0"
+        "lucide-solid@^1.51.0"
       ],
       "registryDependencies": [
         "lib"
@@ -377,7 +377,7 @@
       "title": "Code Block",
       "description": "",
       "dependencies": [
-        "lucide-solid@^1.48.0"
+        "lucide-solid@^1.51.0"
       ],
       "registryDependencies": [
         "@adea-ai/ui/button",
@@ -427,7 +427,7 @@
       "description": "",
       "dependencies": [
         "@kobalte/core@^0.13.14",
-        "lucide-solid@^1.48.0"
+        "lucide-solid@^1.51.0"
       ],
       "registryDependencies": [
         "lib"
@@ -458,7 +458,7 @@
       "dependencies": [
         "@kobalte/core@^0.13.14",
         "cmdk-solid@^1.2.0",
-        "lucide-solid@^1.48.0"
+        "lucide-solid@^1.51.0"
       ],
       "registryDependencies": [
         "@adea-ai/ui/dialog",
@@ -484,7 +484,7 @@
       "description": "",
       "dependencies": [
         "@kobalte/core@^0.13.14",
-        "lucide-solid@^1.48.0"
+        "lucide-solid@^1.51.0"
       ],
       "registryDependencies": [
         "lib"
@@ -508,7 +508,7 @@
       "title": "Detail Panel",
       "description": "",
       "dependencies": [
-        "lucide-solid@^1.48.0"
+        "lucide-solid@^1.51.0"
       ],
       "registryDependencies": [
         "@adea-ai/ui/button",
@@ -534,7 +534,7 @@
       "description": "",
       "dependencies": [
         "@kobalte/core@^0.13.14",
-        "lucide-solid@^1.48.0"
+        "lucide-solid@^1.51.0"
       ],
       "registryDependencies": [
         "@adea-ai/ui/typography",
@@ -607,7 +607,7 @@
       "description": "",
       "dependencies": [
         "@kobalte/core@^0.13.14",
-        "lucide-solid@^1.48.0"
+        "lucide-solid@^1.51.0"
       ],
       "registryDependencies": [
         "lib"
@@ -631,7 +631,7 @@
       "title": "Empty",
       "description": "",
       "dependencies": [
-        "lucide-solid@^1.48.0"
+        "lucide-solid@^1.51.0"
       ],
       "registryDependencies": [
         "@adea-ai/ui/action-button",
@@ -886,7 +886,7 @@
       "description": "",
       "dependencies": [
         "@kobalte/core@^0.13.14",
-        "lucide-solid@^1.48.0"
+        "lucide-solid@^1.51.0"
       ],
       "registryDependencies": [
         "lib"
@@ -933,7 +933,7 @@
       "title": "Native Select",
       "description": "A themed wrapper around the browser's native `<select>` element.",
       "dependencies": [
-        "lucide-solid@^1.48.0"
+        "lucide-solid@^1.51.0"
       ],
       "registryDependencies": [
         "lib"
@@ -958,7 +958,7 @@
       "description": "",
       "dependencies": [
         "@kobalte/core@^0.13.14",
-        "lucide-solid@^1.48.0"
+        "lucide-solid@^1.51.0"
       ],
       "registryDependencies": [
         "lib"
@@ -983,7 +983,7 @@
       "description": "",
       "dependencies": [
         "@kobalte/core@^0.13.14",
-        "lucide-solid@^1.48.0"
+        "lucide-solid@^1.51.0"
       ],
       "registryDependencies": [
         "lib"
@@ -1056,7 +1056,7 @@
       "description": "",
       "dependencies": [
         "@kobalte/core@^0.13.14",
-        "lucide-solid@^1.48.0"
+        "lucide-solid@^1.51.0"
       ],
       "registryDependencies": [
         "lib"
@@ -1081,7 +1081,7 @@
       "description": "",
       "dependencies": [
         "@corvu/resizable@^0.2.5",
-        "lucide-solid@^1.48.0"
+        "lucide-solid@^1.51.0"
       ],
       "registryDependencies": [
         "lib"
@@ -1128,7 +1128,7 @@
       "description": "",
       "dependencies": [
         "@kobalte/core@^0.13.14",
-        "lucide-solid@^1.48.0"
+        "lucide-solid@^1.51.0"
       ],
       "registryDependencies": [
         "lib"
@@ -1177,7 +1177,7 @@
       "description": "",
       "dependencies": [
         "@kobalte/core@^0.13.14",
-        "lucide-solid@^1.48.0"
+        "lucide-solid@^1.51.0"
       ],
       "registryDependencies": [
         "@adea-ai/ui/dialog",
@@ -1249,7 +1249,7 @@
       "title": "Spinner",
       "description": "",
       "dependencies": [
-        "lucide-solid@^1.48.0"
+        "lucide-solid@^1.51.0"
       ],
       "registryDependencies": [
         "lib"
@@ -1413,7 +1413,7 @@
       "description": "",
       "dependencies": [
         "@kobalte/core@^0.13.14",
-        "lucide-solid@^1.48.0"
+        "lucide-solid@^1.51.0"
       ],
       "registryDependencies": [
         "lib"
@@ -1561,7 +1561,7 @@
       "title": "Floating Preview",
       "description": "",
       "dependencies": [
-        "lucide-solid@^1.48.0"
+        "lucide-solid@^1.51.0"
       ],
       "registryDependencies": [
         "@adea-ai/ui/action-button",
@@ -1689,7 +1689,7 @@
       "dependencies": [
         "@corvu/resizable@^0.2.5",
         "@kobalte/core@^0.13.14",
-        "lucide-solid@^1.48.0"
+        "lucide-solid@^1.51.0"
       ],
       "registryDependencies": [
         "lib"
@@ -1719,7 +1719,7 @@
       "description": "Issue-backed binary layout with stable opaque leaf owners; scoped persistence belongs to the host.",
       "dependencies": [
         "@corvu/resizable@^0.2.5",
-        "lucide-solid@^1.48.0"
+        "lucide-solid@^1.51.0"
       ],
       "registryDependencies": [
         "@adea-ai/ui/button",
@@ -1786,7 +1786,7 @@
       "title": "Top Bar",
       "description": "",
       "dependencies": [
-        "lucide-solid@^1.48.0"
+        "lucide-solid@^1.51.0"
       ],
       "registryDependencies": [
         "lib"
@@ -1832,7 +1832,7 @@
       "title": "About Dialog",
       "description": "Shared app identity and version support dialog.",
       "dependencies": [
-        "lucide-solid@^1.48.0"
+        "lucide-solid@^1.51.0"
       ],
       "registryDependencies": [
         "@adea-ai/ui/action-button",
@@ -1858,7 +1858,7 @@
       "title": "Account Menu",
       "description": "",
       "dependencies": [
-        "lucide-solid@^1.48.0"
+        "lucide-solid@^1.51.0"
       ],
       "registryDependencies": [
         "@adea-ai/ui/button",
@@ -1910,9 +1910,9 @@
       "title": "Appearance Editor",
       "description": "",
       "dependencies": [
-        "@adea-ai/themes@^0.9.5",
+        "@adea-ai/themes@^0.9.6",
         "@kobalte/core@^0.13.14",
-        "lucide-solid@^1.48.0"
+        "lucide-solid@^1.51.0"
       ],
       "registryDependencies": [
         "@adea-ai/ui/button",
@@ -1962,7 +1962,7 @@
       "description": "",
       "dependencies": [
         "class-variance-authority@^0.7.1",
-        "lucide-solid@^1.48.0"
+        "lucide-solid@^1.51.0"
       ],
       "registryDependencies": [
         "@adea-ai/ui/badge",
@@ -2008,7 +2008,7 @@
       "title": "Help Center",
       "description": "Shared keyboard shortcuts and project resource page.",
       "dependencies": [
-        "lucide-solid@^1.48.0"
+        "lucide-solid@^1.51.0"
       ],
       "registryDependencies": [
         "@adea-ai/ui/action-button",
@@ -2067,7 +2067,7 @@
       "title": "Scene Controls",
       "description": "Shared host-neutral scene movement, jump and zoom controls.",
       "dependencies": [
-        "lucide-solid@^1.48.0"
+        "lucide-solid@^1.51.0"
       ],
       "registryDependencies": [
         "@adea-ai/ui/action-button"
@@ -2126,7 +2126,7 @@
       "title": "Stat",
       "description": "",
       "dependencies": [
-        "lucide-solid@^1.48.0"
+        "lucide-solid@^1.51.0"
       ],
       "registryDependencies": [
         "@adea-ai/ui/typography",
@@ -2151,7 +2151,7 @@
       "title": "Tree",
       "description": "Keyboard-accessible tree rows with virtualization-aware focus handoff.",
       "dependencies": [
-        "lucide-solid@^1.48.0"
+        "lucide-solid@^1.51.0"
       ],
       "registryDependencies": [
         "lib"
@@ -2180,7 +2180,7 @@
       "title": "Update Dialog",
       "description": "",
       "dependencies": [
-        "lucide-solid@^1.48.0"
+        "lucide-solid@^1.51.0"
       ],
       "registryDependencies": [
         "@adea-ai/ui/action-button",
@@ -2234,7 +2234,7 @@
       "description": "",
       "dependencies": [
         "@kobalte/core@^0.13.14",
-        "lucide-solid@^1.48.0"
+        "lucide-solid@^1.51.0"
       ],
       "registryDependencies": [
         "@adea-ai/ui/action-button",
@@ -2357,8 +2357,8 @@
       "title": "Theming",
       "description": "",
       "dependencies": [
-        "@adea-ai/themes@^0.9.5",
-        "lucide-solid@^1.48.0"
+        "@adea-ai/themes@^0.9.6",
+        "lucide-solid@^1.51.0"
       ],
       "registryDependencies": [
         "@adea-ai/ui/button",
@@ -2465,7 +2465,7 @@
       "title": "Class-name and token helpers",
       "description": "The private helpers the components import: the class-name merge, the variant recipes, the token manifest and the theme bridge. Installed automatically as a peer of any component that needs it.",
       "dependencies": [
-        "@adea-ai/themes@^0.9.5",
+        "@adea-ai/themes@^0.9.6",
         "class-variance-authority@^0.7.1",
         "cn@^0.4.0"
       ],

package/src/components/ui/kbd/index.ts

@@ -1 +1,10 @@
-export { Kbd, KbdGroup } from './kbd'
+export {
+  Kbd,
+  KbdChord,
+  KbdGroup,
+  kbdChordKeys,
+  kbdGroupVariants,
+  kbdVariants,
+  type KbdChordProps,
+  type KbdSize,
+} from './kbd'

package/src/components/ui/kbd/kbd.tsx

@@ -1,5 +1,6 @@
 import type { ComponentProps } from 'solid-js'
-import { splitProps } from 'solid-js'
+import { For, splitProps } from 'solid-js'
+import { cva, type VariantProps } from '#lib/variants'
 import { cn } from '#lib/utils'
 
 /**
@@ -9,32 +10,94 @@ import { cn } from '#lib/utils'
  * `<kbd>` so the semantics survive copy-paste, and the mono face is what makes
  * a shortcut visually distinct from the sentence around it.
  *
+ * `size="compact"` exists for the dense rows a default cap would outweigh — a
+ * rail search row, a sidebar shortcut hint. It drops a height rung, and it
+ * lightens the fill and weight with it because at that size a solid muted cap
+ * reads heavier than the row text it sits in. The default rendering is every
+ * cap that is not inside such a row, and it is untouched by the rung.
+ *
  * `KbdGroup` exists because a shortcut is a sequence: typing `⌘` then `K`
  * needs a gap between them that is a layout concern, not punctuation.
  */
-export function Kbd(props: ComponentProps<'kbd'>) {
-  const [local, rest] = splitProps(props, ['class'])
+export const kbdVariants = cva(
+  'bg-muted text-muted-foreground pointer-events-none inline-flex h-5 min-w-5 items-center justify-center gap-1 rounded-sm border border-border px-1 font-mono text-2xs font-medium select-none',
+  {
+    variants: {
+      size: {
+        default: '',
+        compact: 'h-4 min-w-4 bg-muted/40 px-0.5 font-normal leading-none',
+      },
+    },
+    defaultVariants: {
+      size: 'default',
+    },
+  }
+)
+
+export type KbdSize = NonNullable<VariantProps<typeof kbdVariants>['size']>
+
+export function Kbd(props: ComponentProps<'kbd'> & { size?: KbdSize }) {
+  const [local, rest] = splitProps(props, ['size', 'class'])
 
   return (
-    <kbd
-      data-slot="kbd"
-      class={cn(
-        'bg-muted text-muted-foreground pointer-events-none inline-flex h-5 min-w-5 items-center justify-center gap-1 rounded-sm border border-border px-1 font-mono text-2xs font-medium select-none',
-        local.class
-      )}
-      {...rest}
-    />
+    <kbd data-slot="kbd" class={cn(kbdVariants({ size: local.size }), local.class)} {...rest} />
   )
 }
 
-export function KbdGroup(props: ComponentProps<'span'>) {
-  const [local, rest] = splitProps(props, ['class'])
+export const kbdGroupVariants = cva('inline-flex items-center gap-1', {
+  variants: {
+    size: {
+      default: '',
+      /** The gap is what separates caps, so it tightens with them. */
+      compact: 'gap-0.5',
+    },
+  },
+  defaultVariants: {
+    size: 'default',
+  },
+})
+
+export function KbdGroup(props: ComponentProps<'span'> & { size?: KbdSize }) {
+  const [local, rest] = splitProps(props, ['size', 'class'])
 
   return (
     <span
       data-slot="kbd-group"
-      class={cn('inline-flex items-center gap-1', local.class)}
+      class={cn(kbdGroupVariants({ size: local.size }), local.class)}
       {...rest}
     />
   )
 }
+
+/**
+ * Split a written chord into one entry per key cap. Every character is a key:
+ * `⌘K` renders as `⌘` + `K`, and a longer chord like `⇧⌘P` stays three caps
+ * wide, which matches how the system draws chords in menus.
+ */
+export function kbdChordKeys(keys: string): string[] {
+  return [...keys]
+}
+
+export type KbdChordProps = Omit<ComponentProps<'span'>, 'children'> & {
+  /** The chord as it is drawn, e.g. `"⌘K"` or `"⇧⌘P"`. One cap per character. */
+  keys: string
+  size?: KbdSize
+}
+
+/**
+ * KbdChord.
+ *
+ * A written chord drawn as caps, one per character. Decoration only: the
+ * composition renders `aria-hidden`, so the accessible name and the parseable
+ * `aria-keyshortcuts` stay on the control the chord belongs to. That is why
+ * there is no children — the chord says what was drawn, nothing more.
+ */
+export function KbdChord(props: KbdChordProps) {
+  const [local, rest] = splitProps(props, ['keys', 'size', 'class'])
+
+  return (
+    <KbdGroup {...rest} size={local.size} class={local.class} aria-hidden="true">
+      <For each={kbdChordKeys(local.keys)}>{(key) => <Kbd size={local.size}>{key}</Kbd>}</For>
+    </KbdGroup>
+  )
+}