@urbicon-ui/blocks 6.21.0 → 6.21.2

package/dist/components/NumberInput/NumberInput.svelte

@@ -0,0 +1,197 @@
+<script lang="ts">
+  import { Input } from '../../primitives/Input';
+  import { resolveIcon } from '../../icons';
+  import ChevronDownIconDefault from '../../icons/ChevronDownIcon.svelte';
+  import type { NumberInputProps } from './index';
+
+  const ChevronIcon = resolveIcon('chevronDown', ChevronDownIconDefault);
+
+  let {
+    value = $bindable(null),
+    min,
+    max,
+    step = 1,
+    precision,
+    hideStepper = false,
+    disabled = false,
+    readonly = false,
+    name,
+    onValueChange,
+    rightIcon: userRightIcon,
+    ...inputProps
+  }: NumberInputProps = $props();
+
+  // Tracks focus so the wheel handler only steers a focused field (scrolling the
+  // page over an unfocused one must not change it). Set by the input's focus/blur.
+  let focused = $state(false);
+
+  // Display mirrors `value` (derived) but is overridden with the raw text while
+  // typing, so intermediate states — a trailing separator, a lone leading `-` —
+  // survive until blur. Same override pattern as CurrencyInput.
+  let display = $derived(value == null ? '' : formatNumber(value));
+
+  function decimalsOf(n: number): number {
+    if (!Number.isFinite(n)) return 0;
+    const s = String(n);
+    // Exponential notation (e.g. `1e-7` → "1e-7") carries no literal `.`; derive
+    // the decimal count from the exponent plus any mantissa fraction so a tiny
+    // step isn't silently rounded down to 0 decimals (which would swallow it).
+    const e = s.indexOf('e');
+    if (e !== -1) {
+      const mantissa = s.slice(0, e);
+      const exp = Number(s.slice(e + 1));
+      const dot = mantissa.indexOf('.');
+      const mantissaDecimals = dot === -1 ? 0 : mantissa.length - dot - 1;
+      return Math.max(0, mantissaDecimals - exp);
+    }
+    const dot = s.indexOf('.');
+    return dot === -1 ? 0 : s.length - dot - 1;
+  }
+
+  function roundTo(v: number, decimals: number): number {
+    const factor = 10 ** decimals;
+    return Math.round(v * factor) / factor;
+  }
+
+  function formatNumber(v: number): string {
+    return precision != null ? v.toFixed(precision) : String(v);
+  }
+
+  function parseNumber(raw: string): number | null {
+    // Accept a comma as the decimal separator so `1,5` works under DE keyboards.
+    const t = raw.trim().replace(',', '.');
+    if (t === '') return null;
+    const n = Number(t);
+    // NaN (e.g. a lone `-` mid-compose, or junk) leaves the value untouched so
+    // the raw text can stay in the field until it parses or the user blurs.
+    return Number.isFinite(n) ? n : (value ?? null);
+  }
+
+  function clampValue(v: number | null): number | null {
+    if (v == null) return null;
+    let r = v;
+    if (min != null && r < min) r = min;
+    if (max != null && r > max) r = max;
+    if (precision != null) r = roundTo(r, precision);
+    return r;
+  }
+
+  function commit(next: number | null) {
+    if (next !== value) {
+      value = next;
+      onValueChange?.(next);
+    }
+    display = next == null ? '' : formatNumber(next);
+  }
+
+  function stepBy(dir: 1 | -1) {
+    if (disabled || readonly) return;
+    // Round on the step's own scale so 0.1 + 0.2 lands on 0.3, not 0.30000000004.
+    const decimals = precision ?? decimalsOf(step);
+    // From an empty field, the first step lands *on* the near bound (min for ↑,
+    // max for ↓) when one is set, instead of overshooting it by a full step.
+    if (value == null) {
+      const bound = dir === 1 ? min : max;
+      commit(clampValue(roundTo(bound ?? dir * step, decimals)));
+      return;
+    }
+    commit(clampValue(roundTo(value + dir * step, decimals)));
+  }
+
+  function handleInput(event: Event) {
+    const raw = (event.currentTarget as HTMLInputElement).value;
+    const parsed = parseNumber(raw);
+    if (parsed !== value) {
+      value = parsed;
+      onValueChange?.(parsed);
+    }
+    display = raw; // keep the raw text; clamp/format happens on blur
+  }
+
+  function handleFocus() {
+    focused = true;
+  }
+
+  function handleBlur() {
+    focused = false;
+    commit(clampValue(value));
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    // Bail before preventDefault so a disabled/readonly field keeps native caret
+    // motion (ArrowUp/Down jump to start/end) instead of swallowing the keys.
+    if (disabled || readonly) return;
+    if (event.key === 'ArrowUp') {
+      event.preventDefault();
+      stepBy(1);
+    } else if (event.key === 'ArrowDown') {
+      event.preventDefault();
+      stepBy(-1);
+    }
+  }
+
+  function handleWheel(event: WheelEvent) {
+    // Only steer the value when the field is focused, so scrolling the page with
+    // the pointer over an unfocused field doesn't silently change it. Bail on
+    // disabled/readonly before preventDefault so page scroll isn't blocked either.
+    if (disabled || readonly || !focused) return;
+    event.preventDefault();
+    stepBy(event.deltaY < 0 ? 1 : -1);
+  }
+
+  const atMin = $derived(min != null && value != null && value <= min);
+  const atMax = $derived(max != null && value != null && value >= max);
+</script>
+
+{#snippet stepper()}
+  <!-- Re-enable pointer events: Input renders a right-side snippet inside a
+       `pointer-events-none` decoration container (input.variants.ts), so without
+       this the stepper buttons would be dead to mouse clicks in a real browser. -->
+  <span class="pointer-events-auto -my-1 flex flex-col justify-center">
+    <button
+      type="button"
+      class="text-text-tertiary hover:text-text-primary flex items-center justify-center px-0.5 transition-colors disabled:pointer-events-none disabled:opacity-30 focus-visible:outline-none"
+      tabindex={-1}
+      aria-hidden="true"
+      disabled={disabled || readonly || atMax}
+      onmousedown={(e) => e.preventDefault()}
+      onclick={() => stepBy(1)}
+    >
+      <ChevronIcon class="h-3.5 w-3.5 rotate-180" />
+    </button>
+    <button
+      type="button"
+      class="text-text-tertiary hover:text-text-primary flex items-center justify-center px-0.5 transition-colors disabled:pointer-events-none disabled:opacity-30 focus-visible:outline-none"
+      tabindex={-1}
+      aria-hidden="true"
+      disabled={disabled || readonly || atMin}
+      onmousedown={(e) => e.preventDefault()}
+      onclick={() => stepBy(-1)}
+    >
+      <ChevronIcon class="h-3.5 w-3.5" />
+    </button>
+  </span>
+{/snippet}
+
+<Input
+  {...inputProps}
+  {disabled}
+  {readonly}
+  type="text"
+  inputmode="decimal"
+  role="spinbutton"
+  aria-valuenow={value ?? undefined}
+  aria-valuemin={min}
+  aria-valuemax={max}
+  value={display}
+  oninput={handleInput}
+  onfocus={handleFocus}
+  onblur={handleBlur}
+  onkeydown={handleKeydown}
+  onwheel={handleWheel}
+  rightIcon={userRightIcon ?? (hideStepper ? undefined : stepper)}
+/>
+
+{#if name}
+  <input type="hidden" {name} value={value ?? ''} />
+{/if}

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

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

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

@@ -0,0 +1,55 @@
+import type { Snippet } from 'svelte';
+import type { InputProps } from '../../primitives/Input/index.js';
+/**
+ * @description Generic numeric input with min/max/step bounds, stepper buttons,
+ * and Arrow-key / mouse-wheel increment. Built on {@link Input}, so it inherits
+ * labels, validation, sizes and variants. Values are plain numbers (not minor
+ * units) — {@link CurrencyInput} is the domain-specific specialization for money.
+ *
+ * The field accepts a leading `-`, a single decimal separator (`.` or `,`), and
+ * clamps to `[min, max]` on blur; the stepper and Arrow keys clamp immediately.
+ * Set {@link precision} to fix the number of decimal places.
+ *
+ * @tag form
+ * @related Input
+ * @related CurrencyInput
+ * @related Slider
+ * @stability beta
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   let qty = $state(1);
+ * </script>
+ * <NumberInput label="Quantity" bind:value={qty} min={0} max={99} step={1} />
+ * ```
+ *
+ * @example Decimal step with fixed precision
+ * ```svelte
+ * <NumberInput label="Rate" bind:value={rate} min={0} max={1} step={0.05} precision={2} />
+ * ```
+ */
+export interface NumberInputProps extends Omit<InputProps, 'value' | 'type' | 'inputmode' | 'oninput' | 'onfocus' | 'onblur' | 'onkeydown' | 'onwheel' | 'clearable' | 'onClear' | 'children'> {
+    /** Current numeric value. `null` when the field is empty. Supports `bind:value`. */
+    value?: number | null;
+    /** Minimum allowed value. Clamped on step / Arrow / blur. */
+    min?: number;
+    /** Maximum allowed value. Clamped on step / Arrow / blur. */
+    max?: number;
+    /** Increment applied by the stepper buttons, Arrow keys, and wheel. @default 1 */
+    step?: number;
+    /**
+     * Fixed number of decimal places for display and rounding. When unset, the
+     * value is shown as typed and the step's own decimals drive rounding.
+     */
+    precision?: number;
+    /** Hide the up/down stepper buttons (Arrow keys + wheel still work). @default false */
+    hideStepper?: boolean;
+    /** Shared `name` for a hidden input for native form submission. */
+    name?: string;
+    /** Fires after the value changes (typing, stepper, Arrow, wheel, or clamp). */
+    onValueChange?: (value: number | null) => void;
+    /** A custom right-side adornment. Overrides the stepper — pair with `hideStepper` or provide your own controls. */
+    rightIcon?: Snippet;
+}
+export { default as NumberInput } from './NumberInput.svelte';

package/dist/components/NumberInput/index.js

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

package/dist/components/Planner/planner.variants.d.ts

@@ -7,196 +7,125 @@ import { type SlotNames, type VariantProps } from '../../utils/variants.js';
  * classes in the markup rather than as boolean variants, to keep the variant
  * matrix to the three axes that actually change layout: `view`, `variant`, `size`.
  */
-export declare const plannerVariants: (props?: import("../../utils/variants.js").TVProps<{
-    view: {
-        week: {
-            cell: string;
-            weekday: string;
-        };
-        month: {
-            cell: string;
-            weekday: string;
-        };
-        range: {
-            cell: string;
-            weekday: string;
-        };
-    };
-    variant: {
-        default: {
-            base: string;
-        };
-        bordered: {
-            base: string;
-        };
-        ghost: {
-            cell: string;
-        };
-    };
-    size: {
-        sm: {
-            header: string;
-            headerTitle: string;
-            navButton: string;
-            weekday: string;
-            weekNumber: string;
-            cellDate: string;
-            cellWeekday: string;
-            cellItems: string;
-            empty: string;
-        };
-        md: {
-            header: string;
-            headerTitle: string;
-            navButton: string;
-            weekday: string;
-            weekNumber: string;
-            cellDate: string;
-            cellWeekday: string;
-            cellItems: string;
-            empty: string;
-        };
-        lg: {
-            header: string;
-            headerTitle: string;
-            navButton: string;
-            weekday: string;
-            weekNumber: string;
-            cellDate: string;
-            cellWeekday: string;
-            cellItems: string;
-            empty: string;
-        };
-    };
-}> | undefined) => {
+export declare const plannerVariants: ((props?: {
+    view?: "month" | "week" | "range" | undefined;
+    variant?: "default" | "bordered" | "ghost" | undefined;
+    size?: "sm" | "md" | "lg" | undefined;
+} | undefined) => {
     base: (props?: ({
         view?: "month" | "week" | "range" | undefined;
         variant?: "default" | "bordered" | "ghost" | undefined;
         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;
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
     header: (props?: ({
         view?: "month" | "week" | "range" | undefined;
         variant?: "default" | "bordered" | "ghost" | undefined;
         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;
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
     headerTitle: (props?: ({
         view?: "month" | "week" | "range" | undefined;
         variant?: "default" | "bordered" | "ghost" | undefined;
         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;
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
     nav: (props?: ({
         view?: "month" | "week" | "range" | undefined;
         variant?: "default" | "bordered" | "ghost" | undefined;
         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;
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
     navButton: (props?: ({
         view?: "month" | "week" | "range" | undefined;
         variant?: "default" | "bordered" | "ghost" | undefined;
         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;
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
     grid: (props?: ({
         view?: "month" | "week" | "range" | undefined;
         variant?: "default" | "bordered" | "ghost" | undefined;
         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;
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
     weekdayHeader: (props?: ({
         view?: "month" | "week" | "range" | undefined;
         variant?: "default" | "bordered" | "ghost" | undefined;
         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;
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
     weekday: (props?: ({
         view?: "month" | "week" | "range" | undefined;
         variant?: "default" | "bordered" | "ghost" | undefined;
         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;
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
     weekNumber: (props?: ({
         view?: "month" | "week" | "range" | undefined;
         variant?: "default" | "bordered" | "ghost" | undefined;
         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;
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
     week: (props?: ({
         view?: "month" | "week" | "range" | undefined;
         variant?: "default" | "bordered" | "ghost" | undefined;
         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;
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
     cell: (props?: ({
         view?: "month" | "week" | "range" | undefined;
         variant?: "default" | "bordered" | "ghost" | undefined;
         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;
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
     cellHeader: (props?: ({
         view?: "month" | "week" | "range" | undefined;
         variant?: "default" | "bordered" | "ghost" | undefined;
         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;
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
     cellWeekday: (props?: ({
         view?: "month" | "week" | "range" | undefined;
         variant?: "default" | "bordered" | "ghost" | undefined;
         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;
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
     cellDate: (props?: ({
         view?: "month" | "week" | "range" | undefined;
         variant?: "default" | "bordered" | "ghost" | undefined;
         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;
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
     cellItems: (props?: ({
         view?: "month" | "week" | "range" | undefined;
         variant?: "default" | "bordered" | "ghost" | undefined;
         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;
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
     empty: (props?: ({
         view?: "month" | "week" | "range" | undefined;
         variant?: "default" | "bordered" | "ghost" | undefined;
         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;
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
+}) & {
+    readonly config: import("../../utils/variants.js").TVConfig;
 };
 export type PlannerVariants = VariantProps<typeof plannerVariants>;
 /** Slot names derived from the tv() config — single source of truth for slotClasses. */