@urbicon-ui/blocks 6.37.1 → 6.38.0

package/dist/components/CopyButton/CopyButton.svelte

@@ -0,0 +1,139 @@
+<script lang="ts">
+  import { useBlocksI18n } from '../..';
+  import { resolveIcon } from '../../icons';
+  import CheckIconDefault from '../../icons/CheckIcon.svelte';
+  import CopyIconDefault from '../../icons/CopyIcon.svelte';
+  import { Button } from '../../primitives/Button';
+  import { getBlocksConfig, resolveSlotClasses } from '../../provider';
+  import { copyButtonVariants } from './copy-button.variants';
+  import type { CopyButtonProps } from './index';
+
+  const CopyIcon = resolveIcon('copy', CopyIconDefault);
+  const CheckIcon = resolveIcon('check', CheckIconDefault);
+
+  let {
+    value,
+    label,
+    copiedLabel,
+    timeout = 2000,
+    variant = 'ghost',
+    intent = 'neutral',
+    size = 'md',
+    tier,
+    disabled = false,
+    hideIcon = false,
+    onCopy,
+    onError,
+    class: className = '',
+    unstyled: unstyledProp = false,
+    slotClasses: slotClassesProp = {},
+    preset,
+    // a11y attributes the component owns and merges consumer intent into (below),
+    // pulled out of restProps so the component's state wiring can't be clobbered.
+    'aria-label': ariaLabelProp,
+    title: titleProp,
+    ...restProps
+  }: CopyButtonProps = $props();
+
+  const bt = useBlocksI18n();
+
+  const blocksConfig = getBlocksConfig();
+  const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
+
+  let state = $state<'idle' | 'copied' | 'error'>('idle');
+  let timer: ReturnType<typeof setTimeout> | undefined;
+
+  const copyText = $derived(label ?? bt('accessibility.copy'));
+  const copiedText = $derived(copiedLabel ?? bt('accessibility.copied'));
+  const failedText = $derived(bt('accessibility.copyFailed'));
+  const stateText = $derived(
+    state === 'copied' ? copiedText : state === 'error' ? failedText : copyText
+  );
+  // Real text in a polite live region — the reliable way to announce the outcome
+  // in icon-only mode (an aria-label change is not announced by aria-live).
+  const announcement = $derived(
+    state === 'copied' ? copiedText : state === 'error' ? failedText : ''
+  );
+
+  const effectiveIntent = $derived(
+    state === 'copied' ? 'success' : state === 'error' ? 'danger' : intent
+  );
+
+  const styles = $derived(unstyled ? null : copyButtonVariants({ size, state }));
+  const slotClasses = $derived(
+    resolveSlotClasses(
+      blocksConfig,
+      'CopyButton',
+      preset,
+      { size, state, variant, intent },
+      slotClassesProp
+    )
+  );
+
+  const buttonClass = $derived(
+    [styles?.base(), slotClasses?.base, className].filter(Boolean).join(' ') || undefined
+  );
+  const iconClass = $derived(
+    [styles?.icon(), slotClasses?.icon].filter(Boolean).join(' ') || undefined
+  );
+  const labelClass = $derived(
+    [styles?.label(), slotClasses?.label].filter(Boolean).join(' ') || undefined
+  );
+
+  // The visible label reflects state for sighted users (screen readers get the
+  // outcome from the live region instead).
+  const visibleLabel = $derived(
+    state === 'copied' ? copiedText : state === 'error' ? failedText : label
+  );
+
+  // Icon-only mode carries its accessible name on the button (a stable action
+  // name; a consumer override stays supplemental). Labelled mode lets the
+  // visible text be the name (WCAG 2.5.3), keeping any consumer aria-label.
+  const ariaLabel = $derived(label ? ariaLabelProp : (ariaLabelProp ?? copyText));
+
+  function scheduleReset() {
+    clearTimeout(timer);
+    if (timeout > 0) timer = setTimeout(() => (state = 'idle'), timeout);
+  }
+
+  async function handleCopy() {
+    try {
+      if (!navigator.clipboard?.writeText) throw new Error('Clipboard API unavailable');
+      await navigator.clipboard.writeText(value);
+      state = 'copied';
+      onCopy?.(value);
+    } catch (error) {
+      state = 'error';
+      onError?.(error);
+    }
+    scheduleReset();
+  }
+
+  $effect(() => () => clearTimeout(timer));
+</script>
+
+<span class="contents">
+  <Button
+    {...restProps}
+    {variant}
+    intent={effectiveIntent}
+    {size}
+    {tier}
+    {disabled}
+    {unstyled}
+    onclick={handleCopy}
+    class={buttonClass}
+    aria-label={ariaLabel}
+    title={titleProp ?? stateText}
+  >
+    {#if !hideIcon}
+      {#if state === 'copied'}
+        <CheckIcon class={iconClass} aria-hidden="true" />
+      {:else}
+        <CopyIcon class={iconClass} aria-hidden="true" />
+      {/if}
+    {/if}
+    {#if label}<span class={labelClass}>{visibleLabel}</span>{/if}
+  </Button>
+  <span class="sr-only" role="status">{announcement}</span>
+</span>

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

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

package/dist/components/CopyButton/copy-button.variants.d.ts

@@ -0,0 +1,29 @@
+import { type SlotNames, type VariantProps } from '../../utils/variants.js';
+export declare const copyButtonVariants: ((props?: {
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xs" | undefined;
+    state?: "error" | "idle" | "copied" | undefined;
+} | undefined) => {
+    base: (props?: ({
+        size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xs" | undefined;
+        state?: "error" | "idle" | "copied" | 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;
+    icon: (props?: ({
+        size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xs" | undefined;
+        state?: "error" | "idle" | "copied" | 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;
+    label: (props?: ({
+        size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xs" | undefined;
+        state?: "error" | "idle" | "copied" | 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 CopyButtonVariants = VariantProps<typeof copyButtonVariants>;
+/** Slot names derived from the `tv()` config above — single source of truth for `slotClasses`. */
+export type CopyButtonSlots = SlotNames<typeof copyButtonVariants>;

package/dist/components/CopyButton/copy-button.variants.js

@@ -0,0 +1,32 @@
+import { tv } from '../../utils/variants.js';
+// CopyButton is-a Button (it forwards variant/intent/size/tier to the public
+// Button). These variants only size the embedded icon and carry the tiny
+// success micro-interaction — the button chrome itself comes from Button.
+export const copyButtonVariants = tv({
+    slots: {
+        // Merged onto the underlying Button's `class`. Usually empty; present so
+        // consumers get a stable `slotClasses.base` hook and `unstyled` symmetry.
+        base: [],
+        icon: ['shrink-0 transition-transform duration-[var(--blocks-duration-fast)]'],
+        label: ['whitespace-nowrap']
+    },
+    variants: {
+        size: {
+            '2xs': { icon: 'size-3' },
+            xs: { icon: 'size-3' },
+            sm: { icon: 'size-3.5' },
+            md: { icon: 'size-4' },
+            lg: { icon: 'size-5' },
+            xl: { icon: 'size-5' }
+        },
+        state: {
+            idle: {},
+            copied: { icon: 'scale-110' },
+            error: {}
+        }
+    },
+    defaultVariants: {
+        size: 'md',
+        state: 'idle'
+    }
+});

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

@@ -0,0 +1,55 @@
+import type { HTMLButtonAttributes } from 'svelte/elements';
+import type { ButtonProps } from '../../primitives/Button/index.js';
+import type { CopyButtonSlots } from './copy-button.variants.js';
+/**
+ * @description One-tap copy-to-clipboard button with built-in success feedback (the icon
+ * swaps to a check and the intent flips to success for a moment). Icon-only by default;
+ * pass `label` for a labelled variant. Forwards `variant`/`intent`/`size`/`tier` to the
+ * underlying Button, so it inherits the full button styling vocabulary.
+ *
+ * @tag action
+ * @related Button
+ * @related Kbd
+ * @related Tooltip
+ * @stability beta
+ *
+ * @example
+ * ```svelte
+ * <CopyButton value="npm i @urbicon-ui/blocks" />
+ * ```
+ *
+ * @example
+ * ```svelte
+ * <CopyButton value={apiKey} label="Copy key" variant="outlined" />
+ * ```
+ */
+export interface CopyButtonProps extends Pick<ButtonProps, 'variant' | 'intent' | 'size' | 'tier' | 'disabled'>, Omit<HTMLButtonAttributes, 'value' | 'onclick' | 'class' | 'disabled'> {
+    /** The text written to the clipboard when pressed. */
+    value: string;
+    /** Optional visible label next to the icon. When omitted the button is icon-only. */
+    label?: string;
+    /** Visible label shown for `timeout` ms after a successful copy. @default the i18n "Copied" string */
+    copiedLabel?: string;
+    /** How long the success/error state stays before reverting, in ms. `0` keeps it until the next copy. @default 2000 */
+    timeout?: number;
+    /** Hide the copy/check icon (label-only). @default false */
+    hideIcon?: boolean;
+    /** Called with `value` after it is written to the clipboard. */
+    onCopy?: (value: string) => void;
+    /** Called with the thrown error when the clipboard write fails (permission denied, insecure context, …). */
+    onError?: (error: unknown) => void;
+    /** Additional CSS class merged onto the underlying Button. */
+    class?: string;
+    /** Strip all default styles; forwarded to the underlying Button. */
+    unstyled?: boolean;
+    /** Per-slot class overrides. Slots: base | icon | label */
+    slotClasses?: Partial<Record<CopyButtonSlots, string>>;
+    /**
+     * Apply a named preset registered via `<BlocksProvider presets={{ CopyButton: {...} }}>`.
+     * Prefer this over `class` overrides when the requested look falls outside the
+     * semantic intent palette — presets keep hover/active/dark-mode logic coherent.
+     */
+    preset?: string;
+}
+export { default as CopyButton } from './CopyButton.svelte';
+export { type CopyButtonVariants, copyButtonVariants } from './copy-button.variants.js';

package/dist/components/CopyButton/index.js

@@ -0,0 +1,2 @@
+export { default as CopyButton } from './CopyButton.svelte';
+export { copyButtonVariants } from './copy-button.variants.js';

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

@@ -1,4 +1,4 @@
 import type { FileUploadProps } from './index.js';
-declare const FileUpload: import("svelte").Component<FileUploadProps, {}, "file" | "files">;
+declare const FileUpload: import("svelte").Component<FileUploadProps, {}, "files" | "file">;
 type FileUpload = ReturnType<typeof FileUpload>;
 export default FileUpload;

package/dist/components/PinInput/pin-input.variants.d.ts

@@ -3,7 +3,7 @@ export declare const pinInputVariants: ((props?: {
     tier?: "commit" | "modify" | undefined;
     variant?: "ghost" | "filled" | "outlined" | undefined;
     size?: "sm" | "md" | "lg" | undefined;
-    intent?: "default" | "success" | "warning" | "danger" | undefined;
+    intent?: "success" | "warning" | "danger" | "default" | undefined;
     disabled?: boolean | undefined;
     readonly?: boolean | undefined;
     messageType?: "error" | "helper" | undefined;
@@ -14,7 +14,7 @@ export declare const pinInputVariants: ((props?: {
         tier?: "commit" | "modify" | undefined;
         variant?: "ghost" | "filled" | "outlined" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        intent?: "default" | "success" | "warning" | "danger" | undefined;
+        intent?: "success" | "warning" | "danger" | "default" | undefined;
         disabled?: boolean | undefined;
         readonly?: boolean | undefined;
         messageType?: "error" | "helper" | undefined;
@@ -27,7 +27,7 @@ export declare const pinInputVariants: ((props?: {
         tier?: "commit" | "modify" | undefined;
         variant?: "ghost" | "filled" | "outlined" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        intent?: "default" | "success" | "warning" | "danger" | undefined;
+        intent?: "success" | "warning" | "danger" | "default" | undefined;
         disabled?: boolean | undefined;
         readonly?: boolean | undefined;
         messageType?: "error" | "helper" | undefined;
@@ -40,7 +40,7 @@ export declare const pinInputVariants: ((props?: {
         tier?: "commit" | "modify" | undefined;
         variant?: "ghost" | "filled" | "outlined" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        intent?: "default" | "success" | "warning" | "danger" | undefined;
+        intent?: "success" | "warning" | "danger" | "default" | undefined;
         disabled?: boolean | undefined;
         readonly?: boolean | undefined;
         messageType?: "error" | "helper" | undefined;
@@ -53,7 +53,7 @@ export declare const pinInputVariants: ((props?: {
         tier?: "commit" | "modify" | undefined;
         variant?: "ghost" | "filled" | "outlined" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        intent?: "default" | "success" | "warning" | "danger" | undefined;
+        intent?: "success" | "warning" | "danger" | "default" | undefined;
         disabled?: boolean | undefined;
         readonly?: boolean | undefined;
         messageType?: "error" | "helper" | undefined;
@@ -66,7 +66,7 @@ export declare const pinInputVariants: ((props?: {
         tier?: "commit" | "modify" | undefined;
         variant?: "ghost" | "filled" | "outlined" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        intent?: "default" | "success" | "warning" | "danger" | undefined;
+        intent?: "success" | "warning" | "danger" | "default" | undefined;
         disabled?: boolean | undefined;
         readonly?: boolean | undefined;
         messageType?: "error" | "helper" | undefined;
@@ -79,7 +79,7 @@ export declare const pinInputVariants: ((props?: {
         tier?: "commit" | "modify" | undefined;
         variant?: "ghost" | "filled" | "outlined" | undefined;
         size?: "sm" | "md" | "lg" | undefined;
-        intent?: "default" | "success" | "warning" | "danger" | undefined;
+        intent?: "success" | "warning" | "danger" | "default" | undefined;
         disabled?: boolean | undefined;
         readonly?: boolean | undefined;
         messageType?: "error" | "helper" | undefined;

package/dist/components/PinInput/pin-input.variants.js

@@ -1,17 +1,23 @@
+import { FIELD_DISABLED_FRAME, FIELD_LABEL, FIELD_LABEL_DISABLED, FIELD_MESSAGE_TONES, FIELD_NATIVE_DISABLED, FIELD_NATIVE_READONLY, FIELD_REQUIRED_LABEL, FIELD_SURFACE, FIELD_TRANSITION, fieldErrorFrame, fieldFocusRing, fieldIntentFrames, fieldSurfaceVariants } from '../../internal/field-chrome.js';
 import { tv } from '../../utils/variants.js';
+// Each cell is directly focusable, so the ring lives on the cell itself.
+const focus = 'focus-visible';
+const surface = fieldSurfaceVariants(focus);
+const intents = fieldIntentFrames(focus);
 export const pinInputVariants = tv({
     slots: {
         root: ['flex flex-col gap-1.5'],
-        label: ['block font-medium text-text-secondary text-sm'],
+        label: [FIELD_LABEL],
         group: ['flex items-center'],
         cell: [
             'box-border text-center font-medium tabular-nums caret-primary',
-            'border text-text-primary bg-surface-base',
-            'transition-[color,background-color,border-color,box-shadow] duration-[var(--blocks-duration-fast)] ease-out',
-            'focus-visible:outline-none focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/20 focus-visible:z-10',
+            FIELD_SURFACE,
+            FIELD_TRANSITION,
+            // `focus-visible:z-10` lifts the focused cell's ring above its neighbours.
+            `focus-visible:outline-none ${fieldFocusRing(focus)} focus-visible:z-10`,
             'hover:border-border-default',
-            'disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-surface-subtle',
-            'read-only:bg-surface-subtle read-only:cursor-default'
+            FIELD_NATIVE_DISABLED,
+            FIELD_NATIVE_READONLY
         ],
         separator: ['text-text-tertiary select-none'],
         message: ['text-xs']
@@ -24,13 +30,9 @@ export const pinInputVariants = tv({
             commit: { cell: 'rounded-commit' }
         },
         variant: {
-            outlined: { cell: 'border-border-subtle' },
-            filled: {
-                cell: 'bg-surface-interactive border-transparent hover:bg-surface-hover focus-visible:bg-surface-base'
-            },
-            ghost: {
-                cell: 'bg-transparent hover:bg-surface-subtle focus-visible:bg-surface-base focus-visible:border-border-subtle'
-            }
+            outlined: { cell: surface.outlined },
+            filled: { cell: surface.filled },
+            ghost: { cell: surface.ghost }
         },
         size: {
             sm: {
@@ -53,20 +55,14 @@ export const pinInputVariants = tv({
         },
         intent: {
             default: {},
-            success: {
-                cell: 'border-success focus-visible:border-success focus-visible:ring-success/20'
-            },
-            warning: {
-                cell: 'border-warning focus-visible:border-warning focus-visible:ring-warning/20'
-            },
-            danger: {
-                cell: 'border-danger focus-visible:border-danger focus-visible:ring-danger/20'
-            }
+            success: { cell: intents.success },
+            warning: { cell: intents.warning },
+            danger: { cell: intents.danger }
         },
         disabled: {
             true: {
-                cell: 'opacity-50 cursor-not-allowed bg-surface-disabled pointer-events-none',
-                label: 'text-text-disabled'
+                cell: FIELD_DISABLED_FRAME,
+                label: FIELD_LABEL_DISABLED
             }
         },
         readonly: {
@@ -75,17 +71,17 @@ export const pinInputVariants = tv({
         // Declared BEFORE `error` so the error tone wins the message-color bucket
         // in every call shape — `{ error: true }` alone must read red.
         messageType: {
-            error: { message: 'text-danger' },
-            helper: { message: 'text-text-tertiary' }
+            error: { message: FIELD_MESSAGE_TONES.error },
+            helper: { message: FIELD_MESSAGE_TONES.helper }
         },
         error: {
             true: {
-                cell: 'border-danger focus-visible:border-danger focus-visible:ring-danger/20',
-                message: 'text-danger'
+                cell: fieldErrorFrame(focus),
+                message: FIELD_MESSAGE_TONES.error
             }
         },
         required: {
-            true: { label: "after:content-['*'] after:ml-1 after:text-danger" }
+            true: { label: FIELD_REQUIRED_LABEL }
         }
     },
     compoundVariants: [

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

@@ -8,118 +8,118 @@ import { type SlotNames, type VariantProps } from '../../utils/variants.js';
  * matrix to the three axes that actually change layout: `view`, `variant`, `size`.
  */
 export declare const plannerVariants: ((props?: {
-    view?: "month" | "week" | "range" | undefined;
-    variant?: "default" | "bordered" | "ghost" | undefined;
+    view?: "month" | "range" | "week" | undefined;
+    variant?: "default" | "ghost" | "bordered" | undefined;
     size?: "sm" | "md" | "lg" | undefined;
 } | undefined) => {
     base: (props?: ({
-        view?: "month" | "week" | "range" | undefined;
-        variant?: "default" | "bordered" | "ghost" | undefined;
+        view?: "month" | "range" | "week" | undefined;
+        variant?: "default" | "ghost" | "bordered" | undefined;
         size?: "sm" | "md" | "lg" | 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;
+        view?: "month" | "range" | "week" | undefined;
+        variant?: "default" | "ghost" | "bordered" | undefined;
         size?: "sm" | "md" | "lg" | 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;
+        view?: "month" | "range" | "week" | undefined;
+        variant?: "default" | "ghost" | "bordered" | undefined;
         size?: "sm" | "md" | "lg" | 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;
+        view?: "month" | "range" | "week" | undefined;
+        variant?: "default" | "ghost" | "bordered" | undefined;
         size?: "sm" | "md" | "lg" | 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;
+        view?: "month" | "range" | "week" | undefined;
+        variant?: "default" | "ghost" | "bordered" | undefined;
         size?: "sm" | "md" | "lg" | 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;
+        view?: "month" | "range" | "week" | undefined;
+        variant?: "default" | "ghost" | "bordered" | undefined;
         size?: "sm" | "md" | "lg" | 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;
+        view?: "month" | "range" | "week" | undefined;
+        variant?: "default" | "ghost" | "bordered" | undefined;
         size?: "sm" | "md" | "lg" | 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;
+        view?: "month" | "range" | "week" | undefined;
+        variant?: "default" | "ghost" | "bordered" | undefined;
         size?: "sm" | "md" | "lg" | 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;
+        view?: "month" | "range" | "week" | undefined;
+        variant?: "default" | "ghost" | "bordered" | undefined;
         size?: "sm" | "md" | "lg" | 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;
+        view?: "month" | "range" | "week" | undefined;
+        variant?: "default" | "ghost" | "bordered" | undefined;
         size?: "sm" | "md" | "lg" | 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;
+        view?: "month" | "range" | "week" | undefined;
+        variant?: "default" | "ghost" | "bordered" | undefined;
         size?: "sm" | "md" | "lg" | 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;
+        view?: "month" | "range" | "week" | undefined;
+        variant?: "default" | "ghost" | "bordered" | undefined;
         size?: "sm" | "md" | "lg" | 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;
+        view?: "month" | "range" | "week" | undefined;
+        variant?: "default" | "ghost" | "bordered" | undefined;
         size?: "sm" | "md" | "lg" | 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;
+        view?: "month" | "range" | "week" | undefined;
+        variant?: "default" | "ghost" | "bordered" | undefined;
         size?: "sm" | "md" | "lg" | 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;
+        view?: "month" | "range" | "week" | undefined;
+        variant?: "default" | "ghost" | "bordered" | undefined;
         size?: "sm" | "md" | "lg" | 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;
+        view?: "month" | "range" | "week" | undefined;
+        variant?: "default" | "ghost" | "bordered" | undefined;
         size?: "sm" | "md" | "lg" | 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;