@urbicon-ui/blocks 6.1.4

package/dist/components/ChartFrame/ChartFrame.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+  import type { ChartFrameProps } from './index';
+  import type { ChartMargin } from '../../internal/charts/types';
+  import { chartSlotResolver } from '../../internal/charts/variants';
+
+  let {
+    height = 240,
+    width: widthProp,
+    margin: marginProp,
+    ariaLabel,
+    children,
+    legend,
+    fallback,
+    class: className,
+    unstyled = false,
+    slotClasses = {},
+    ...rest
+  }: ChartFrameProps = $props();
+
+  const DEFAULT_MARGIN: Required<ChartMargin> = { top: 8, right: 12, bottom: 28, left: 40 };
+  const margin: Required<ChartMargin> = $derived({
+    top: marginProp?.top ?? DEFAULT_MARGIN.top,
+    right: marginProp?.right ?? DEFAULT_MARGIN.right,
+    bottom: marginProp?.bottom ?? DEFAULT_MARGIN.bottom,
+    left: marginProp?.left ?? DEFAULT_MARGIN.left
+  });
+
+  // Responsive width via ResizeObserver. `widthProp` forces a fixed width
+  // (SSR-stable, opts out of measurement). 320 is the pre-measure fallback.
+  let measured = $state(0);
+  const width = $derived(widthProp ?? (measured > 0 ? measured : 320));
+  const innerWidth = $derived(Math.max(0, width - margin.left - margin.right));
+  const innerHeight = $derived(Math.max(0, height - margin.top - margin.bottom));
+
+  const slot = $derived(chartSlotResolver(unstyled, slotClasses));
+
+  function measure(node: HTMLElement) {
+    if (widthProp !== undefined) return;
+    const observer = new ResizeObserver((entries) => {
+      const w = entries[0]?.contentRect.width;
+      if (w && w > 0) measured = w;
+    });
+    observer.observe(node);
+    return () => observer.disconnect();
+  }
+</script>
+
+<figure {...rest} {@attach measure} class={[slot('root'), className]}>
+  <svg
+    class={slot('svg')}
+    viewBox="0 0 {width} {height}"
+    width="100%"
+    {height}
+    role="img"
+    aria-label={ariaLabel}
+    preserveAspectRatio="xMidYMid meet"
+  >
+    <g transform="translate({margin.left}, {margin.top})">
+      {@render children?.({ width, height, innerWidth, innerHeight, margin })}
+    </g>
+  </svg>
+
+  {#if legend}
+    {@render legend()}
+  {/if}
+
+  {#if fallback}
+    <div class="sr-only">
+      {@render fallback()}
+    </div>
+  {/if}
+</figure>

package/dist/components/ChartFrame/ChartFrame.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ChartFrameProps } from './index';
+declare const ChartFrame: import("svelte").Component<ChartFrameProps, {}, "">;
+type ChartFrame = ReturnType<typeof ChartFrame>;
+export default ChartFrame;

package/dist/components/ChartFrame/index.d.ts

@@ -0,0 +1,41 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ChartMargin, ChartPlot, ChartSlotClasses } from '../../internal/charts/types';
+/**
+ * @description Responsive SVG chart shell: measures its width via
+ * ResizeObserver, applies plot margins, and hands the drawable plot geometry
+ * to a child snippet. The building block under every cartesian chart in the
+ * family — use it directly only for fully custom marks.
+ *
+ * @tag layout
+ * @tag display
+ * @related BarChart
+ * @related Sankey
+ * @stability beta
+ */
+export interface ChartFrameProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    /** Fixed SVG height in px. @default 240 */
+    height?: number;
+    /**
+     * Fixed width in px. Omit for responsive width measured from the container
+     * (the common case); set it only for SSR-stable, non-responsive output.
+     */
+    width?: number;
+    /** Plot margins; merged over the frame defaults. */
+    margin?: ChartMargin;
+    /** Accessible label for the chart image (role="img"). */
+    ariaLabel?: string;
+    /** Renders the SVG plot content; receives the {@link ChartPlot} geometry. */
+    children?: Snippet<[ChartPlot]>;
+    /** Optional legend rendered (as HTML) below the SVG. */
+    legend?: Snippet;
+    /** Screen-reader fallback (e.g. a data table) rendered visually hidden. */
+    fallback?: Snippet;
+    /** Extra classes merged onto the <figure> wrapper. */
+    class?: string;
+    /** Remove all default tv classes. */
+    unstyled?: boolean;
+    /** Per-slot class overrides. */
+    slotClasses?: ChartSlotClasses;
+}
+export { default as ChartFrame } from './ChartFrame.svelte';

package/dist/components/ChartFrame/index.js

@@ -0,0 +1 @@
+export { default as ChartFrame } from './ChartFrame.svelte';

package/dist/components/CommandPalette/CommandPalette.svelte

@@ -0,0 +1,306 @@
+<script lang="ts">
+  import { useBlocksI18n } from '../..';
+  import { Dialog, Separator } from '../../primitives';
+  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
+  import type { CommandPaletteProps, CommandPaletteItem } from './index';
+  import { commandPaletteVariants } from './commandPalette.variants';
+
+  const bt = useBlocksI18n();
+
+  let {
+    items,
+    placeholder: placeholderProp,
+    emptyText: emptyTextProp,
+    showFooter = true,
+    open = $bindable(false),
+    shortcut = 'mod+k',
+    filter,
+    onSelect,
+    onOpenChange,
+    customItem,
+    customEmpty,
+    size = 'md',
+    class: className = '',
+    unstyled: unstyledProp = false,
+    slotClasses: slotClassesProp = {},
+    preset
+  }: CommandPaletteProps = $props();
+
+  const placeholder = $derived(placeholderProp ?? bt('commandPalette.search', {}));
+  const emptyText = $derived(emptyTextProp ?? bt('commandPalette.noResults', {}));
+
+  const blocksConfig = getBlocksConfig();
+  const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
+  const slotClasses = $derived(
+    mergeSlotClasses(
+      blocksConfig?.defaults?.CommandPalette?.slotClasses,
+      resolvePresetSlotClasses(blocksConfig?.presets, 'CommandPalette', preset),
+      slotClassesProp
+    )
+  );
+
+  let query = $state('');
+  let selectedIndex = $state(0);
+  let inputEl: HTMLInputElement | undefined = $state();
+
+  const styles = $derived(unstyled ? undefined : commandPaletteVariants({ size }));
+
+  function slot(name: keyof NonNullable<typeof styles>) {
+    const base = styles?.[name]?.() ?? '';
+    const override = slotClasses?.[name as keyof typeof slotClasses] ?? '';
+    return override ? `${base} ${override}` : base;
+  }
+
+  const defaultFilter = (item: CommandPaletteItem, q: string) => {
+    const lower = q.toLowerCase();
+    return (
+      item.label.toLowerCase().includes(lower) ||
+      (item.category?.toLowerCase().includes(lower) ?? false)
+    );
+  };
+
+  const filtered = $derived.by(() => {
+    if (!query) return items;
+    const fn = filter ?? defaultFilter;
+    return items.filter((item) => fn(item, query));
+  });
+
+  const grouped = $derived.by(() => {
+    const groups: { category: string; items: CommandPaletteItem[] }[] = [];
+    const seen: Record<string, CommandPaletteItem[]> = {};
+    for (const item of filtered) {
+      const cat = item.category ?? '';
+      if (!seen[cat]) {
+        const arr: CommandPaletteItem[] = [];
+        seen[cat] = arr;
+        groups.push({ category: cat, items: arr });
+      }
+      seen[cat].push(item);
+    }
+    return groups;
+  });
+
+  $effect(() => {
+    void query;
+    selectedIndex = 0;
+  });
+
+  $effect(() => {
+    if (open) {
+      query = '';
+      selectedIndex = 0;
+      requestAnimationFrame(() => inputEl?.focus());
+    }
+  });
+
+  function setOpen(value: boolean) {
+    open = value;
+    onOpenChange?.(value);
+  }
+
+  function selectItem(item: CommandPaletteItem) {
+    if (item.disabled) return;
+    setOpen(false);
+    query = '';
+    onSelect?.(item);
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      selectedIndex = Math.min(selectedIndex + 1, filtered.length - 1);
+      scrollSelectedIntoView();
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      selectedIndex = Math.max(selectedIndex - 1, 0);
+      scrollSelectedIntoView();
+    } else if (e.key === 'Enter' && filtered[selectedIndex]) {
+      e.preventDefault();
+      selectItem(filtered[selectedIndex]);
+    }
+  }
+
+  function scrollSelectedIntoView() {
+    requestAnimationFrame(() => {
+      const el = document.querySelector('[data-command-palette-selected="true"]');
+      el?.scrollIntoView({ block: 'nearest' });
+    });
+  }
+
+  function handleGlobalKeydown(e: KeyboardEvent) {
+    if (!shortcut) return;
+    const isMod = e.metaKey || e.ctrlKey;
+    if (shortcut === 'mod+k' && isMod && e.key === 'k') {
+      e.preventDefault();
+      setOpen(!open);
+    }
+  }
+
+  function getFlatIndex(item: CommandPaletteItem): number {
+    return filtered.indexOf(item);
+  }
+
+  export function toggle() {
+    setOpen(!open);
+  }
+
+  export function show() {
+    setOpen(true);
+  }
+
+  export function hide() {
+    setOpen(false);
+  }
+</script>
+
+<svelte:window onkeydown={handleGlobalKeydown} />
+
+<Dialog bind:open size="md" placement="top" class="mt-[15vh]" onClose={() => setOpen(false)}>
+  <div class="{slot('wrapper')} {className}">
+    <!-- Search input -->
+    <div class={slot('inputWrapper')}>
+      <svg
+        class={slot('inputIcon')}
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        stroke-width="2"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+        />
+      </svg>
+      <input
+        bind:this={inputEl}
+        type="text"
+        bind:value={query}
+        onkeydown={handleKeydown}
+        {placeholder}
+        class={slot('input')}
+        role="combobox"
+        aria-expanded={filtered.length > 0}
+        aria-controls="command-palette-list"
+        aria-activedescendant={filtered[selectedIndex]
+          ? `command-palette-item-${selectedIndex}`
+          : undefined}
+        autocomplete="off"
+      />
+      {#if query}
+        <button
+          class={slot('clearButton')}
+          aria-label={bt('accessibility.clearSearch')}
+          onclick={() => {
+            query = '';
+            inputEl?.focus();
+          }}
+        >
+          <svg
+            class="h-4 w-4"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            stroke-width="2"
+          >
+            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      {/if}
+    </div>
+
+    <!-- Results -->
+    <div id="command-palette-list" role="listbox" class={slot('list')}>
+      {#if filtered.length === 0}
+        {#if customEmpty}
+          {@render customEmpty(query)}
+        {:else}
+          <div class={slot('empty')}>
+            {emptyText}{#if query}&nbsp;"{query}"{/if}
+          </div>
+        {/if}
+      {:else}
+        {#each grouped as group, groupIdx (group.category)}
+          {#if groupIdx > 0}
+            <Separator class={slot('separator')} />
+          {/if}
+          {#if group.category}
+            <div class={slot('groupLabel')} role="presentation">
+              {group.category}
+            </div>
+          {/if}
+          {#each group.items as item (item.id ?? item.label)}
+            {@const flatIdx = getFlatIndex(item)}
+            {@const isHighlighted = flatIdx === selectedIndex}
+            {@const isDisabled = item.disabled ?? false}
+            {#if customItem}
+              {@render customItem(item, isHighlighted, flatIdx)}
+            {:else}
+              <!--
+                role="option" requires a non-button host so screenreaders
+                announce the item as an option rather than a button. Activation
+                is driven through the input's aria-activedescendant pattern
+                (Enter/Space handled in handleKeydown) plus pointer clicks
+                here. tabindex="-1" keeps the items out of the tab sequence.
+              -->
+              <!-- svelte-ignore a11y_click_events_have_key_events -->
+              <div
+                id="command-palette-item-{flatIdx}"
+                role="option"
+                tabindex="-1"
+                aria-selected={isHighlighted}
+                aria-disabled={isDisabled}
+                data-command-palette-selected={isHighlighted}
+                class="{slot('item')} {isDisabled
+                  ? slot('itemDisabled')
+                  : isHighlighted
+                    ? slot('itemHighlighted')
+                    : slot('itemDefault')}"
+                onclick={() => {
+                  if (!isDisabled) selectItem(item);
+                }}
+                onmouseenter={() => {
+                  if (!isDisabled) selectedIndex = flatIdx;
+                }}
+              >
+                {#if item.icon}
+                  <svg
+                    class={slot('itemIcon')}
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                    stroke-width="1.5"
+                  >
+                    <path stroke-linecap="round" stroke-linejoin="round" d={item.icon} />
+                  </svg>
+                {/if}
+                <span class={slot('itemLabel')}>{item.label}</span>
+                {#if item.shortcut}
+                  <kbd class={slot('itemShortcut')}>{item.shortcut}</kbd>
+                {/if}
+              </div>
+            {/if}
+          {/each}
+        {/each}
+      {/if}
+    </div>
+
+    <!-- Footer -->
+    {#if showFooter}
+      <div class={slot('footer')}>
+        <span class={slot('footerHint')}>
+          <kbd class={slot('kbd')}>&#8593;&#8595;</kbd>
+          {bt('commandPalette.hints.navigate', {})}
+        </span>
+        <span class={slot('footerHint')}>
+          <kbd class={slot('kbd')}>&#8629;</kbd>
+          {bt('commandPalette.hints.select', {})}
+        </span>
+        <span class={slot('footerHint')}>
+          <kbd class={slot('kbd')}>esc</kbd>
+          {bt('commandPalette.hints.close', {})}
+        </span>
+      </div>
+    {/if}
+  </div>
+</Dialog>

package/dist/components/CommandPalette/CommandPalette.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { CommandPaletteProps } from './index';
+declare const CommandPalette: import("svelte").Component<CommandPaletteProps, {
+    toggle: () => void;
+    show: () => void;
+    hide: () => void;
+}, "open">;
+type CommandPalette = ReturnType<typeof CommandPalette>;
+export default CommandPalette;

package/dist/components/CommandPalette/commandPalette.variants.d.ts

@@ -0,0 +1,136 @@
+import { type VariantProps } from '../../utils/variants';
+export declare const commandPaletteVariants: (props?: import("../../utils/variants").TVProps<{
+    size: {
+        sm: {
+            wrapper: string;
+        };
+        md: {
+            wrapper: string;
+        };
+        lg: {
+            wrapper: string;
+        };
+    };
+}> | undefined) => {
+    wrapper: (props?: ({
+        size?: "sm" | "md" | "lg" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    inputWrapper: (props?: ({
+        size?: "sm" | "md" | "lg" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    input: (props?: ({
+        size?: "sm" | "md" | "lg" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    inputIcon: (props?: ({
+        size?: "sm" | "md" | "lg" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    clearButton: (props?: ({
+        size?: "sm" | "md" | "lg" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    list: (props?: ({
+        size?: "sm" | "md" | "lg" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    group: (props?: ({
+        size?: "sm" | "md" | "lg" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    groupLabel: (props?: ({
+        size?: "sm" | "md" | "lg" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    item: (props?: ({
+        size?: "sm" | "md" | "lg" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    itemHighlighted: (props?: ({
+        size?: "sm" | "md" | "lg" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    itemDefault: (props?: ({
+        size?: "sm" | "md" | "lg" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    itemDisabled: (props?: ({
+        size?: "sm" | "md" | "lg" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    itemIcon: (props?: ({
+        size?: "sm" | "md" | "lg" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    itemLabel: (props?: ({
+        size?: "sm" | "md" | "lg" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    itemShortcut: (props?: ({
+        size?: "sm" | "md" | "lg" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    empty: (props?: ({
+        size?: "sm" | "md" | "lg" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    footer: (props?: ({
+        size?: "sm" | "md" | "lg" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    footerHint: (props?: ({
+        size?: "sm" | "md" | "lg" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    kbd: (props?: ({
+        size?: "sm" | "md" | "lg" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    separator: (props?: ({
+        size?: "sm" | "md" | "lg" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+};
+export type CommandPaletteVariants = VariantProps<typeof commandPaletteVariants>;

package/dist/components/CommandPalette/commandPalette.variants.js

@@ -0,0 +1,57 @@
+import { tv } from '../../utils/variants';
+export const commandPaletteVariants = tv({
+    slots: {
+        // tier: contain — floating modal-like surface.
+        wrapper: [
+            'overflow-hidden rounded-contain border border-border-hairline',
+            'bg-surface-overlay shadow-[var(--blocks-shadow-lg)]'
+        ],
+        inputWrapper: ['flex items-center gap-3 border-b border-border-hairline px-4'],
+        input: [
+            'w-full border-0 bg-transparent py-3 text-sm',
+            'text-text-primary placeholder:text-text-quaternary focus:outline-none'
+        ],
+        inputIcon: 'h-4 w-4 shrink-0 text-text-tertiary',
+        clearButton: 'text-text-quaternary hover:text-text-secondary',
+        list: 'max-h-72 overflow-y-auto p-1.5',
+        group: '',
+        groupLabel: [
+            'px-2 py-1.5 text-[11px] font-semibold uppercase tracking-wide text-text-quaternary'
+        ],
+        // tier: modify — palette items are selectable actions.
+        item: [
+            'flex w-full items-center gap-3 rounded-modify px-3 py-2 text-sm',
+            'transition-colors cursor-pointer'
+        ],
+        itemHighlighted: 'bg-primary-subtle text-primary',
+        itemDefault: 'text-text-secondary hover:bg-surface-hover',
+        itemDisabled: 'text-text-quaternary cursor-not-allowed opacity-50',
+        itemIcon: 'h-4 w-4 shrink-0',
+        itemLabel: 'flex-1 text-left',
+        itemShortcut: [
+            'rounded border border-border-subtle bg-surface-subtle',
+            'px-1.5 py-0.5 font-mono text-[10px] text-text-quaternary'
+        ],
+        empty: 'py-8 text-center text-sm text-text-tertiary',
+        footer: [
+            'flex items-center gap-4 border-t border-border-hairline',
+            'px-4 py-2 text-[11px] text-text-quaternary'
+        ],
+        footerHint: 'flex items-center gap-1',
+        kbd: [
+            'rounded border border-border-subtle bg-surface-subtle',
+            'px-1 py-0.5 font-mono text-[10px]'
+        ],
+        separator: 'my-1'
+    },
+    variants: {
+        size: {
+            sm: { wrapper: 'max-w-sm' },
+            md: { wrapper: 'max-w-lg' },
+            lg: { wrapper: 'max-w-2xl' }
+        }
+    },
+    defaultVariants: {
+        size: 'md'
+    }
+});