@adea-ai/ui 0.98.0 → 0.99.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/composites/action-button/action-button.d.ts +1 -0
- package/dist/components/composites/action-button/action-button.d.ts.map +1 -1
- package/dist/components/composites/action-button/action-button.js +1 -1
- package/dist/components/composites/action-button/action-button.js.map +1 -1
- package/dist/components/layout/side-rail/side-rail.d.ts.map +1 -1
- package/dist/components/layout/side-rail/side-rail.js +10 -7
- package/dist/components/layout/side-rail/side-rail.js.map +1 -1
- package/dist/components/layout/top-bar/top-bar.d.ts +7 -0
- package/dist/components/layout/top-bar/top-bar.d.ts.map +1 -1
- package/dist/components/layout/top-bar/top-bar.js +11 -5
- package/dist/components/layout/top-bar/top-bar.js.map +1 -1
- package/dist/components/ui/kbd/kbd.d.ts.map +1 -1
- package/dist/components/ui/kbd/kbd.js +1 -1
- package/dist/components/ui/kbd/kbd.js.map +1 -1
- package/dist/components/ui/status-chip/status-chip.d.ts.map +1 -1
- package/dist/components/ui/status-chip/status-chip.js +0 -1
- package/dist/components/ui/status-chip/status-chip.js.map +1 -1
- package/dist/components/ui/tooltip/tooltip.d.ts +1 -4
- package/dist/components/ui/tooltip/tooltip.d.ts.map +1 -1
- package/dist/components/ui/tooltip/tooltip.js +3 -3
- package/dist/components/ui/tooltip/tooltip.js.map +1 -1
- package/dist/lib/overlay.d.ts +7 -0
- package/dist/lib/overlay.d.ts.map +1 -1
- package/dist/lib/overlay.js +8 -1
- package/dist/lib/overlay.js.map +1 -1
- package/dist/lib/tokens.d.ts.map +1 -1
- package/dist/lib/tokens.js +5 -0
- package/dist/lib/tokens.js.map +1 -1
- package/dist/r/src/components/composites/action-button/action-button.tsx +2 -1
- package/dist/r/src/components/layout/side-rail/side-rail.tsx +7 -3
- package/dist/r/src/components/layout/top-bar/top-bar.tsx +13 -2
- package/dist/r/src/components/ui/kbd/kbd.tsx +0 -2
- package/dist/r/src/components/ui/status-chip/status-chip.tsx +1 -3
- package/dist/r/src/components/ui/tooltip/tooltip.tsx +7 -7
- package/dist/r/src/lib/overlay.ts +9 -0
- package/dist/r/src/lib/tokens.ts +6 -0
- package/dist/r/src/styles/theme.css +5 -0
- package/package.json +1 -1
- package/src/components/composites/action-button/action-button.tsx +2 -1
- package/src/components/layout/side-rail/side-rail.tsx +7 -3
- package/src/components/layout/top-bar/top-bar.tsx +13 -2
- package/src/components/ui/kbd/kbd.tsx +0 -2
- package/src/components/ui/status-chip/status-chip.tsx +1 -3
- package/src/components/ui/tooltip/tooltip.tsx +7 -7
- package/src/lib/overlay.ts +9 -0
- package/src/lib/tokens.ts +6 -0
- package/src/styles/theme.css +5 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip.js","names":["Tooltip","KobalteTooltip","useTooltipContext","ComponentProps","createContext","createEffect","createSignal","createUniqueId","onCleanup","splitProps","useContext","isServer","cn","TooltipTiming","openDelay","closeDelay","skipDelayDuration","tooltipDefaults","TooltipTimingContext","TooltipInteraction","id","trigger","HTMLElement","setTrigger","element","isOpen","isDisabled","isTriggerFocused","markOpenIntent","clearOpenIntent","requestCloseFromAnotherTooltip","markPointerCloseIntent","clearPointerCloseIntent","markCloseIntent","TooltipInteractionContext","openTooltipInteractions","Set","pendingTooltipOpenId","tooltipScrollListenerAttached","clearPendingTooltipOpen","undefined","tooltipScrollContainsTrigger","event","Event","target","window","Node","contains","handleTooltipScroll","interaction","handleTooltipPointerMove","PointerEvent","setTooltipInteractionOpen","open","has","add","addEventListener","document","delete","size","removeEventListener","registerTooltipInteraction","invokeEventHandler","handler","Array","isArray","callback","data","TooltipProviderProps","children","TooltipProvider","props","_$createComponent","Provider","value","TooltipRootProps","timing","local","rest","controlled","uncontrolledOpen","setUncontrolledOpen","defaultOpen","closeIntent","ignoreDuplicateClose","onOpenChange","next","source","pointerCloseIntentUntil","pointerCloseIntentTimeout","ReturnType","setTimeout","clearTimeout","Date","now","queueMicrotask","disabled","Boolean","activeElement","openInteraction","focusedTrigger","anotherTooltipOpening","pointerClosePending","handleKeyDown","KeyboardEvent","key","_$mergeProps","TooltipTrigger","Trigger","ref","onFocus","defaultPrevented","onBlur","onPointerEnter","onPointerLeave","onClick","TooltipContentProps","Content","hideArrow","TooltipContent","context","Portal","class","aria-hidden","_$memo","onEscapeKeyDown","onPointerDownOutside","Arrow","_$createComponent","Tooltip","KobalteTooltip","_$mergeProps","_$memo"],"sources":["../../../../src/components/ui/tooltip/tooltip.tsx"],"sourcesContent":["import { Tooltip as KobalteTooltip, useTooltipContext } from '@kobalte/core/tooltip'\nimport type { ComponentProps } from 'solid-js'\nimport {\n createContext,\n createEffect,\n createSignal,\n createUniqueId,\n onCleanup,\n splitProps,\n useContext,\n} from 'solid-js'\nimport { isServer } from 'solid-js/web'\nimport { cn } from '#lib/utils'\n\n/**\n * The provider sets the *timing* defaults for every tooltip below it.\n *\n * Timing is the part of a tooltip that has to agree across an app: one that\n * opens in 200ms in a toolbar and 700ms in a sidebar reads as a bug. The\n * provider is where that agreement lives. It is optional — a tooltip outside a\n * provider falls back to the same defaults — so a consumer can drop it in\n * without restructuring anything.\n */\ntype TooltipTiming = {\n openDelay: number\n closeDelay: number\n skipDelayDuration: number\n}\n\nconst tooltipDefaults: TooltipTiming = {\n /** Long enough that a pointer crossing a toolbar does not strobe tooltips. */\n openDelay: 400,\n /** Short, because the pointer has already left the control. */\n closeDelay: 80,\n /**\n * After a tooltip has been seen, the next one opens immediately for this\n * long. This is what makes moving along a row of icons feel like one\n * gesture instead of four separate waits.\n */\n skipDelayDuration: 500,\n}\n\nconst TooltipTimingContext = createContext<TooltipTiming>(tooltipDefaults)\n\ntype TooltipInteraction = {\n id: string\n trigger: () => HTMLElement | undefined\n setTrigger: (element: HTMLElement) => void\n isOpen: () => boolean\n isDisabled: () => boolean\n isTriggerFocused: () => boolean\n markOpenIntent: () => void\n clearOpenIntent: () => void\n requestCloseFromAnotherTooltip: () => void\n markPointerCloseIntent: () => void\n clearPointerCloseIntent: () => void\n markCloseIntent: () => void\n}\n\nconst TooltipInteractionContext = createContext<TooltipInteraction>()\nconst openTooltipInteractions = new Set<TooltipInteraction>()\nlet pendingTooltipOpenId: string | undefined\nlet tooltipScrollListenerAttached = false\n\nfunction clearPendingTooltipOpen(id: string) {\n if (pendingTooltipOpenId === id) pendingTooltipOpenId = undefined\n}\n\nfunction tooltipScrollContainsTrigger(event: Event, trigger: HTMLElement) {\n const target = event.target\n return target === window || (target instanceof Node && target.contains(trigger))\n}\n\nfunction handleTooltipScroll(event: Event) {\n for (const interaction of openTooltipInteractions) {\n const trigger = interaction.trigger()\n if (interaction.isOpen() && trigger && tooltipScrollContainsTrigger(event, trigger)) {\n interaction.markCloseIntent()\n }\n }\n}\n\nfunction handleTooltipPointerMove(event: PointerEvent) {\n for (const interaction of openTooltipInteractions) {\n const trigger = interaction.trigger()\n const target = event.target\n if (\n interaction.isOpen() &&\n interaction.isTriggerFocused() &&\n trigger &&\n !(target instanceof Node && trigger.contains(target))\n ) {\n interaction.markPointerCloseIntent()\n }\n }\n}\n\nfunction setTooltipInteractionOpen(interaction: TooltipInteraction, open: boolean) {\n if (isServer) return\n\n if (open) {\n if (openTooltipInteractions.has(interaction)) return\n openTooltipInteractions.add(interaction)\n if (!tooltipScrollListenerAttached) {\n tooltipScrollListenerAttached = true\n // Register before Kobalte's global listeners so intentional scroll\n // dismissal can be distinguished from its delayed pointer dismissal.\n window.addEventListener('scroll', handleTooltipScroll, true)\n document.addEventListener('pointermove', handleTooltipPointerMove, true)\n }\n } else {\n openTooltipInteractions.delete(interaction)\n if (openTooltipInteractions.size === 0 && tooltipScrollListenerAttached) {\n tooltipScrollListenerAttached = false\n window.removeEventListener('scroll', handleTooltipScroll, true)\n document.removeEventListener('pointermove', handleTooltipPointerMove, true)\n }\n }\n}\n\nfunction registerTooltipInteraction(interaction: TooltipInteraction) {\n onCleanup(() => {\n setTooltipInteractionOpen(interaction, false)\n clearPendingTooltipOpen(interaction.id)\n })\n}\n\nfunction invokeEventHandler(handler: unknown, event: Event) {\n if (Array.isArray(handler)) {\n const [callback, data] = handler as [(data: unknown, event: Event) => void, unknown]\n callback(data, event)\n } else if (typeof handler === 'function') {\n const callback = handler as (event: Event) => void\n callback(event)\n }\n}\n\nexport type TooltipProviderProps = {\n children?: ComponentProps<'div'>['children']\n openDelay?: number\n closeDelay?: number\n skipDelayDuration?: number\n}\n\nexport function TooltipProvider(props: TooltipProviderProps) {\n return (\n <TooltipTimingContext.Provider\n value={{\n openDelay: props.openDelay ?? tooltipDefaults.openDelay,\n closeDelay: props.closeDelay ?? tooltipDefaults.closeDelay,\n skipDelayDuration: props.skipDelayDuration ?? tooltipDefaults.skipDelayDuration,\n }}\n >\n {props.children}\n </TooltipTimingContext.Provider>\n )\n}\n\nexport type TooltipRootProps = ComponentProps<typeof KobalteTooltip>\n\nexport function Tooltip(props: TooltipRootProps) {\n const timing = useContext(TooltipTimingContext)\n const [local, rest] = splitProps(props, ['open', 'defaultOpen', 'onOpenChange', 'disabled'])\n const id = createUniqueId()\n const controlled = () => local.open !== undefined\n const [uncontrolledOpen, setUncontrolledOpen] = createSignal(local.defaultOpen ?? false)\n const isOpen = () => (controlled() ? (local.open ?? false) : uncontrolledOpen())\n const [trigger, setTrigger] = createSignal<HTMLElement>()\n let closeIntent = false\n let ignoreDuplicateClose = false\n let onOpenChange: (next: boolean, source?: 'handoff') => void\n let pointerCloseIntentUntil = 0\n let pointerCloseIntentTimeout: ReturnType<typeof setTimeout> | undefined\n const clearPointerCloseIntent = () => {\n pointerCloseIntentUntil = 0\n if (pointerCloseIntentTimeout) clearTimeout(pointerCloseIntentTimeout)\n pointerCloseIntentTimeout = undefined\n }\n const markPointerCloseIntent = () => {\n if (!isOpen()) return\n clearPointerCloseIntent()\n const closeDelay = props.closeDelay ?? timing.closeDelay\n pointerCloseIntentUntil = Date.now() + closeDelay + 50\n pointerCloseIntentTimeout = setTimeout(clearPointerCloseIntent, closeDelay + 50)\n }\n const markCloseIntent = () => {\n closeIntent = true\n clearPointerCloseIntent()\n queueMicrotask(() => {\n closeIntent = false\n })\n }\n const requestCloseFromAnotherTooltip = () => {\n if (!isOpen()) return\n\n // Another trigger is an explicit handoff, even when a focused tooltip has\n // a pending pointer-close intent that would otherwise suppress Kobalte's\n // close callback. Route the request through the same controlled/uncontrolled\n // state contract as Kobalte and ignore its duplicate callback for this turn.\n ignoreDuplicateClose = true\n queueMicrotask(() => {\n ignoreDuplicateClose = false\n })\n onOpenChange(false, 'handoff')\n }\n const interaction: TooltipInteraction = {\n id,\n trigger,\n setTrigger,\n isOpen,\n isDisabled: () => local.disabled ?? false,\n isTriggerFocused: () =>\n Boolean(trigger() && typeof document !== 'undefined' && trigger() === document.activeElement),\n markOpenIntent: () => {\n clearPointerCloseIntent()\n pendingTooltipOpenId = id\n // A focused tooltip ignores ordinary pointer movement, but entering or\n // focusing another tooltip is an explicit transfer.\n for (const openInteraction of openTooltipInteractions) {\n if (openInteraction.id !== id) openInteraction.requestCloseFromAnotherTooltip()\n }\n },\n clearOpenIntent: () => clearPendingTooltipOpen(id),\n requestCloseFromAnotherTooltip,\n markPointerCloseIntent,\n clearPointerCloseIntent,\n markCloseIntent,\n }\n registerTooltipInteraction(interaction)\n onCleanup(() => {\n clearPointerCloseIntent()\n ignoreDuplicateClose = false\n })\n if (isOpen()) setTooltipInteractionOpen(interaction, true)\n createEffect(() => setTooltipInteractionOpen(interaction, isOpen()))\n onOpenChange = (next: boolean, source) => {\n if (!next && source !== 'handoff' && ignoreDuplicateClose) return\n\n if (next) {\n clearPendingTooltipOpen(id)\n clearPointerCloseIntent()\n // Install this capture listener before Kobalte's open-state effect adds\n // its scroll listener later in the same update.\n setTooltipInteractionOpen(interaction, true)\n } else {\n const focusedTrigger = interaction.isTriggerFocused()\n const anotherTooltipOpening =\n pendingTooltipOpenId !== undefined && pendingTooltipOpenId !== id\n const pointerClosePending = Date.now() <= pointerCloseIntentUntil\n if (\n source !== 'handoff' &&\n focusedTrigger &&\n pointerClosePending &&\n !closeIntent &&\n !anotherTooltipOpening\n ) {\n clearPointerCloseIntent()\n return\n }\n closeIntent = false\n clearPointerCloseIntent()\n clearPendingTooltipOpen(id)\n }\n\n if (!controlled()) setUncontrolledOpen(next)\n local.onOpenChange?.(next)\n if (next) {\n // A controlled parent can reject the open request without changing its\n // signal, so the effect above would not rerun to release this listener.\n queueMicrotask(() => {\n if (!isOpen()) setTooltipInteractionOpen(interaction, false)\n })\n }\n }\n\n // Kobalte dismisses on Escape only when its content owns the top-most\n // layer, and a handoff keeps the previous tooltip's content mounted while\n // it exits — swallowing the key for the tooltip that just took over.\n // Listening on document (capture) closes this tooltip first; the layer's\n // own handler still runs for anything stacked above it.\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key !== 'Escape') return\n markCloseIntent()\n onOpenChange(false)\n }\n createEffect(() => {\n if (isServer || !isOpen()) return\n document.addEventListener('keydown', handleKeyDown, true)\n onCleanup(() => document.removeEventListener('keydown', handleKeyDown, true))\n })\n\n return (\n <TooltipInteractionContext.Provider value={interaction}>\n <KobalteTooltip\n open={isOpen()}\n onOpenChange={onOpenChange}\n disabled={local.disabled}\n openDelay={props.openDelay ?? timing.openDelay}\n closeDelay={props.closeDelay ?? timing.closeDelay}\n skipDelayDuration={props.skipDelayDuration ?? timing.skipDelayDuration}\n {...rest}\n />\n </TooltipInteractionContext.Provider>\n )\n}\n\nexport function TooltipTrigger(props: ComponentProps<typeof KobalteTooltip.Trigger>) {\n const interaction = useContext(TooltipInteractionContext)\n const [local, rest] = splitProps(props, [\n 'ref',\n 'onFocus',\n 'onBlur',\n 'onPointerEnter',\n 'onPointerLeave',\n 'onClick',\n ])\n\n return (\n <KobalteTooltip.Trigger\n {...rest}\n ref={(element) => {\n interaction?.setTrigger(element)\n if (typeof local.ref === 'function') local.ref(element)\n }}\n onFocus={(event) => {\n invokeEventHandler(local.onFocus, event)\n if (!event.defaultPrevented && !interaction?.isDisabled()) interaction?.markOpenIntent()\n }}\n onBlur={(event) => {\n invokeEventHandler(local.onBlur, event)\n interaction?.clearOpenIntent()\n interaction?.markCloseIntent()\n }}\n onPointerEnter={(event) => {\n invokeEventHandler(local.onPointerEnter, event)\n if (!event.defaultPrevented && !interaction?.isDisabled()) interaction?.markOpenIntent()\n }}\n onPointerLeave={(event) => {\n invokeEventHandler(local.onPointerLeave, event)\n interaction?.clearOpenIntent()\n interaction?.markPointerCloseIntent()\n }}\n onClick={(event) => {\n invokeEventHandler(local.onClick, event)\n interaction?.markCloseIntent()\n }}\n />\n )\n}\n\nexport type TooltipContentProps = ComponentProps<typeof KobalteTooltip.Content> & {\n /** Hide the caret pointing at the trigger. */\n hideArrow?: boolean\n}\n\nexport function TooltipContent(props: TooltipContentProps) {\n const interaction = useContext(TooltipInteractionContext)\n const [local, rest] = splitProps(props, [\n 'class',\n 'hideArrow',\n 'children',\n 'aria-hidden',\n 'onEscapeKeyDown',\n 'onPointerDownOutside',\n ])\n const context = useTooltipContext()\n\n // Kobalte keeps force-mounted and exiting content present after close. Hide\n // that retained tooltip from assistive technology until it opens again.\n return (\n <KobalteTooltip.Portal>\n <KobalteTooltip.Content\n class={cn(\n 'bg-scrim text-scrim-foreground z-(--z-tooltip) w-fit max-w-64 rounded-md px-2 py-1 text-xs',\n 'origin-(--kb-tooltip-content-transform-origin) text-balance',\n 'data-expanded:animate-in data-expanded:fade-in-0 data-expanded:zoom-in-95',\n 'data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\n 'data-expanded:duration-150 data-closed:duration-100',\n local.class\n )}\n aria-hidden={context.isOpen() ? local['aria-hidden'] : true}\n onEscapeKeyDown={(event) => {\n invokeEventHandler(local.onEscapeKeyDown, event)\n if (!event.defaultPrevented) interaction?.markCloseIntent()\n }}\n onPointerDownOutside={(event) => {\n invokeEventHandler(local.onPointerDownOutside, event)\n if (!event.defaultPrevented) interaction?.markCloseIntent()\n }}\n {...rest}\n >\n {local.children}\n {!local.hideArrow && <KobalteTooltip.Arrow aria-hidden=\"true\" />}\n </KobalteTooltip.Content>\n </KobalteTooltip.Portal>\n )\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"tooltip.js","names":["Tooltip","KobalteTooltip","useTooltipContext","ComponentProps","createContext","createEffect","createSignal","createUniqueId","onCleanup","splitProps","useContext","isServer","tooltipTip","cn","TooltipTiming","openDelay","closeDelay","skipDelayDuration","tooltipDefaults","TooltipTimingContext","TooltipInteraction","id","trigger","HTMLElement","setTrigger","element","isOpen","isDisabled","isTriggerFocused","markOpenIntent","clearOpenIntent","requestCloseFromAnotherTooltip","markPointerCloseIntent","clearPointerCloseIntent","markCloseIntent","TooltipInteractionContext","openTooltipInteractions","Set","pendingTooltipOpenId","tooltipScrollListenerAttached","clearPendingTooltipOpen","undefined","tooltipScrollContainsTrigger","event","Event","target","window","Node","contains","handleTooltipScroll","interaction","handleTooltipPointerMove","PointerEvent","setTooltipInteractionOpen","open","has","add","addEventListener","document","delete","size","removeEventListener","registerTooltipInteraction","invokeEventHandler","handler","Array","isArray","callback","data","TooltipProviderProps","children","TooltipProvider","props","_$createComponent","Provider","value","TooltipRootProps","timing","local","rest","controlled","uncontrolledOpen","setUncontrolledOpen","defaultOpen","closeIntent","ignoreDuplicateClose","onOpenChange","next","source","pointerCloseIntentUntil","pointerCloseIntentTimeout","ReturnType","setTimeout","clearTimeout","Date","now","queueMicrotask","disabled","Boolean","activeElement","openInteraction","focusedTrigger","anotherTooltipOpening","pointerClosePending","handleKeyDown","KeyboardEvent","key","_$mergeProps","TooltipTrigger","Trigger","ref","onFocus","defaultPrevented","onBlur","onPointerEnter","onPointerLeave","onClick","TooltipContentProps","Content","TooltipContent","context","Portal","class","aria-hidden","_$memo","onEscapeKeyDown","onPointerDownOutside","_$createComponent","Tooltip","KobalteTooltip","_$mergeProps","_$memo"],"sources":["../../../../src/components/ui/tooltip/tooltip.tsx"],"sourcesContent":["import { Tooltip as KobalteTooltip, useTooltipContext } from '@kobalte/core/tooltip'\nimport type { ComponentProps } from 'solid-js'\nimport {\n createContext,\n createEffect,\n createSignal,\n createUniqueId,\n onCleanup,\n splitProps,\n useContext,\n} from 'solid-js'\nimport { isServer } from 'solid-js/web'\nimport { tooltipTip } from '#lib/overlay'\nimport { cn } from '#lib/utils'\n\n/**\n * The provider sets the *timing* defaults for every tooltip below it.\n *\n * Timing is the part of a tooltip that has to agree across an app: one that\n * opens in 200ms in a toolbar and 700ms in a sidebar reads as a bug. The\n * provider is where that agreement lives. It is optional — a tooltip outside a\n * provider falls back to the same defaults — so a consumer can drop it in\n * without restructuring anything.\n */\ntype TooltipTiming = {\n openDelay: number\n closeDelay: number\n skipDelayDuration: number\n}\n\nconst tooltipDefaults: TooltipTiming = {\n /** Long enough that a pointer crossing a toolbar does not strobe tooltips. */\n openDelay: 400,\n /** Short, because the pointer has already left the control. */\n closeDelay: 80,\n /**\n * After a tooltip has been seen, the next one opens immediately for this\n * long. This is what makes moving along a row of icons feel like one\n * gesture instead of four separate waits.\n */\n skipDelayDuration: 500,\n}\n\nconst TooltipTimingContext = createContext<TooltipTiming>(tooltipDefaults)\n\ntype TooltipInteraction = {\n id: string\n trigger: () => HTMLElement | undefined\n setTrigger: (element: HTMLElement) => void\n isOpen: () => boolean\n isDisabled: () => boolean\n isTriggerFocused: () => boolean\n markOpenIntent: () => void\n clearOpenIntent: () => void\n requestCloseFromAnotherTooltip: () => void\n markPointerCloseIntent: () => void\n clearPointerCloseIntent: () => void\n markCloseIntent: () => void\n}\n\nconst TooltipInteractionContext = createContext<TooltipInteraction>()\nconst openTooltipInteractions = new Set<TooltipInteraction>()\nlet pendingTooltipOpenId: string | undefined\nlet tooltipScrollListenerAttached = false\n\nfunction clearPendingTooltipOpen(id: string) {\n if (pendingTooltipOpenId === id) pendingTooltipOpenId = undefined\n}\n\nfunction tooltipScrollContainsTrigger(event: Event, trigger: HTMLElement) {\n const target = event.target\n return target === window || (target instanceof Node && target.contains(trigger))\n}\n\nfunction handleTooltipScroll(event: Event) {\n for (const interaction of openTooltipInteractions) {\n const trigger = interaction.trigger()\n if (interaction.isOpen() && trigger && tooltipScrollContainsTrigger(event, trigger)) {\n interaction.markCloseIntent()\n }\n }\n}\n\nfunction handleTooltipPointerMove(event: PointerEvent) {\n for (const interaction of openTooltipInteractions) {\n const trigger = interaction.trigger()\n const target = event.target\n if (\n interaction.isOpen() &&\n interaction.isTriggerFocused() &&\n trigger &&\n !(target instanceof Node && trigger.contains(target))\n ) {\n interaction.markPointerCloseIntent()\n }\n }\n}\n\nfunction setTooltipInteractionOpen(interaction: TooltipInteraction, open: boolean) {\n if (isServer) return\n\n if (open) {\n if (openTooltipInteractions.has(interaction)) return\n openTooltipInteractions.add(interaction)\n if (!tooltipScrollListenerAttached) {\n tooltipScrollListenerAttached = true\n // Register before Kobalte's global listeners so intentional scroll\n // dismissal can be distinguished from its delayed pointer dismissal.\n window.addEventListener('scroll', handleTooltipScroll, true)\n document.addEventListener('pointermove', handleTooltipPointerMove, true)\n }\n } else {\n openTooltipInteractions.delete(interaction)\n if (openTooltipInteractions.size === 0 && tooltipScrollListenerAttached) {\n tooltipScrollListenerAttached = false\n window.removeEventListener('scroll', handleTooltipScroll, true)\n document.removeEventListener('pointermove', handleTooltipPointerMove, true)\n }\n }\n}\n\nfunction registerTooltipInteraction(interaction: TooltipInteraction) {\n onCleanup(() => {\n setTooltipInteractionOpen(interaction, false)\n clearPendingTooltipOpen(interaction.id)\n })\n}\n\nfunction invokeEventHandler(handler: unknown, event: Event) {\n if (Array.isArray(handler)) {\n const [callback, data] = handler as [(data: unknown, event: Event) => void, unknown]\n callback(data, event)\n } else if (typeof handler === 'function') {\n const callback = handler as (event: Event) => void\n callback(event)\n }\n}\n\nexport type TooltipProviderProps = {\n children?: ComponentProps<'div'>['children']\n openDelay?: number\n closeDelay?: number\n skipDelayDuration?: number\n}\n\nexport function TooltipProvider(props: TooltipProviderProps) {\n return (\n <TooltipTimingContext.Provider\n value={{\n openDelay: props.openDelay ?? tooltipDefaults.openDelay,\n closeDelay: props.closeDelay ?? tooltipDefaults.closeDelay,\n skipDelayDuration: props.skipDelayDuration ?? tooltipDefaults.skipDelayDuration,\n }}\n >\n {props.children}\n </TooltipTimingContext.Provider>\n )\n}\n\nexport type TooltipRootProps = ComponentProps<typeof KobalteTooltip>\n\nexport function Tooltip(props: TooltipRootProps) {\n const timing = useContext(TooltipTimingContext)\n const [local, rest] = splitProps(props, ['open', 'defaultOpen', 'onOpenChange', 'disabled'])\n const id = createUniqueId()\n const controlled = () => local.open !== undefined\n const [uncontrolledOpen, setUncontrolledOpen] = createSignal(local.defaultOpen ?? false)\n const isOpen = () => (controlled() ? (local.open ?? false) : uncontrolledOpen())\n const [trigger, setTrigger] = createSignal<HTMLElement>()\n let closeIntent = false\n let ignoreDuplicateClose = false\n let onOpenChange: (next: boolean, source?: 'handoff') => void\n let pointerCloseIntentUntil = 0\n let pointerCloseIntentTimeout: ReturnType<typeof setTimeout> | undefined\n const clearPointerCloseIntent = () => {\n pointerCloseIntentUntil = 0\n if (pointerCloseIntentTimeout) clearTimeout(pointerCloseIntentTimeout)\n pointerCloseIntentTimeout = undefined\n }\n const markPointerCloseIntent = () => {\n if (!isOpen()) return\n clearPointerCloseIntent()\n const closeDelay = props.closeDelay ?? timing.closeDelay\n pointerCloseIntentUntil = Date.now() + closeDelay + 50\n pointerCloseIntentTimeout = setTimeout(clearPointerCloseIntent, closeDelay + 50)\n }\n const markCloseIntent = () => {\n closeIntent = true\n clearPointerCloseIntent()\n queueMicrotask(() => {\n closeIntent = false\n })\n }\n const requestCloseFromAnotherTooltip = () => {\n if (!isOpen()) return\n\n // Another trigger is an explicit handoff, even when a focused tooltip has\n // a pending pointer-close intent that would otherwise suppress Kobalte's\n // close callback. Route the request through the same controlled/uncontrolled\n // state contract as Kobalte and ignore its duplicate callback for this turn.\n ignoreDuplicateClose = true\n queueMicrotask(() => {\n ignoreDuplicateClose = false\n })\n onOpenChange(false, 'handoff')\n }\n const interaction: TooltipInteraction = {\n id,\n trigger,\n setTrigger,\n isOpen,\n isDisabled: () => local.disabled ?? false,\n isTriggerFocused: () =>\n Boolean(trigger() && typeof document !== 'undefined' && trigger() === document.activeElement),\n markOpenIntent: () => {\n clearPointerCloseIntent()\n pendingTooltipOpenId = id\n // A focused tooltip ignores ordinary pointer movement, but entering or\n // focusing another tooltip is an explicit transfer.\n for (const openInteraction of openTooltipInteractions) {\n if (openInteraction.id !== id) openInteraction.requestCloseFromAnotherTooltip()\n }\n },\n clearOpenIntent: () => clearPendingTooltipOpen(id),\n requestCloseFromAnotherTooltip,\n markPointerCloseIntent,\n clearPointerCloseIntent,\n markCloseIntent,\n }\n registerTooltipInteraction(interaction)\n onCleanup(() => {\n clearPointerCloseIntent()\n ignoreDuplicateClose = false\n })\n if (isOpen()) setTooltipInteractionOpen(interaction, true)\n createEffect(() => setTooltipInteractionOpen(interaction, isOpen()))\n onOpenChange = (next: boolean, source) => {\n if (!next && source !== 'handoff' && ignoreDuplicateClose) return\n\n if (next) {\n clearPendingTooltipOpen(id)\n clearPointerCloseIntent()\n // Install this capture listener before Kobalte's open-state effect adds\n // its scroll listener later in the same update.\n setTooltipInteractionOpen(interaction, true)\n } else {\n const focusedTrigger = interaction.isTriggerFocused()\n const anotherTooltipOpening =\n pendingTooltipOpenId !== undefined && pendingTooltipOpenId !== id\n const pointerClosePending = Date.now() <= pointerCloseIntentUntil\n if (\n source !== 'handoff' &&\n focusedTrigger &&\n pointerClosePending &&\n !closeIntent &&\n !anotherTooltipOpening\n ) {\n clearPointerCloseIntent()\n return\n }\n closeIntent = false\n clearPointerCloseIntent()\n clearPendingTooltipOpen(id)\n }\n\n if (!controlled()) setUncontrolledOpen(next)\n local.onOpenChange?.(next)\n if (next) {\n // A controlled parent can reject the open request without changing its\n // signal, so the effect above would not rerun to release this listener.\n queueMicrotask(() => {\n if (!isOpen()) setTooltipInteractionOpen(interaction, false)\n })\n }\n }\n\n // Kobalte dismisses on Escape only when its content owns the top-most\n // layer, and a handoff keeps the previous tooltip's content mounted while\n // it exits — swallowing the key for the tooltip that just took over.\n // Listening on document (capture) closes this tooltip first; the layer's\n // own handler still runs for anything stacked above it.\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key !== 'Escape') return\n markCloseIntent()\n onOpenChange(false)\n }\n createEffect(() => {\n if (isServer || !isOpen()) return\n document.addEventListener('keydown', handleKeyDown, true)\n onCleanup(() => document.removeEventListener('keydown', handleKeyDown, true))\n })\n\n return (\n <TooltipInteractionContext.Provider value={interaction}>\n <KobalteTooltip\n open={isOpen()}\n onOpenChange={onOpenChange}\n disabled={local.disabled}\n openDelay={props.openDelay ?? timing.openDelay}\n closeDelay={props.closeDelay ?? timing.closeDelay}\n skipDelayDuration={props.skipDelayDuration ?? timing.skipDelayDuration}\n {...rest}\n />\n </TooltipInteractionContext.Provider>\n )\n}\n\nexport function TooltipTrigger(props: ComponentProps<typeof KobalteTooltip.Trigger>) {\n const interaction = useContext(TooltipInteractionContext)\n const [local, rest] = splitProps(props, [\n 'ref',\n 'onFocus',\n 'onBlur',\n 'onPointerEnter',\n 'onPointerLeave',\n 'onClick',\n ])\n\n return (\n <KobalteTooltip.Trigger\n {...rest}\n ref={(element) => {\n interaction?.setTrigger(element)\n if (typeof local.ref === 'function') local.ref(element)\n }}\n onFocus={(event) => {\n invokeEventHandler(local.onFocus, event)\n if (!event.defaultPrevented && !interaction?.isDisabled()) interaction?.markOpenIntent()\n }}\n onBlur={(event) => {\n invokeEventHandler(local.onBlur, event)\n interaction?.clearOpenIntent()\n interaction?.markCloseIntent()\n }}\n onPointerEnter={(event) => {\n invokeEventHandler(local.onPointerEnter, event)\n if (!event.defaultPrevented && !interaction?.isDisabled()) interaction?.markOpenIntent()\n }}\n onPointerLeave={(event) => {\n invokeEventHandler(local.onPointerLeave, event)\n interaction?.clearOpenIntent()\n interaction?.markPointerCloseIntent()\n }}\n onClick={(event) => {\n invokeEventHandler(local.onClick, event)\n interaction?.markCloseIntent()\n }}\n />\n )\n}\n\nexport type TooltipContentProps = ComponentProps<typeof KobalteTooltip.Content>\n\nexport function TooltipContent(props: TooltipContentProps) {\n const interaction = useContext(TooltipInteractionContext)\n const [local, rest] = splitProps(props, [\n 'class',\n 'children',\n 'aria-hidden',\n 'onEscapeKeyDown',\n 'onPointerDownOutside',\n ])\n const context = useTooltipContext()\n\n // Kobalte keeps force-mounted and exiting content present after close. Hide\n // that retained tooltip from assistive technology until it opens again.\n return (\n <KobalteTooltip.Portal>\n <KobalteTooltip.Content\n class={cn(\n tooltipTip,\n // The max width is a token, not a fixed measure: it has to fall\n // behind the viewport at large root font sizes or the tip — which\n // Kobalte can shift but never shrink — forces a horizontal scroll.\n 'z-(--z-tooltip) w-fit max-w-(--tooltip-max-width) px-2 py-1',\n 'origin-(--kb-tooltip-content-transform-origin) text-balance',\n 'data-expanded:animate-in data-expanded:fade-in-0 data-expanded:zoom-in-95',\n 'data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\n 'data-expanded:duration-150 data-closed:duration-100',\n local.class\n )}\n aria-hidden={context.isOpen() ? local['aria-hidden'] : true}\n onEscapeKeyDown={(event) => {\n invokeEventHandler(local.onEscapeKeyDown, event)\n if (!event.defaultPrevented) interaction?.markCloseIntent()\n }}\n onPointerDownOutside={(event) => {\n invokeEventHandler(local.onPointerDownOutside, event)\n if (!event.defaultPrevented) interaction?.markCloseIntent()\n }}\n {...rest}\n >\n {local.children}\n </KobalteTooltip.Content>\n </KobalteTooltip.Portal>\n )\n}\n"],"mappings":";;;;;;AA8BA,IAAMkB,kBAAiC;;CAErCH,WAAW;;CAEXC,YAAY;;;;;;CAMZC,mBAAmB;AACrB;AAEA,IAAME,uBAAuBf,cAA6Bc,eAAe;AAiBzE,IAAMiB,4BAA4B/B,cAAkC;AACpE,IAAMgC,0CAA0B,IAAIC,IAAwB;AAC5D,IAAIC;AACJ,IAAIC,gCAAgC;AAEpC,SAASC,wBAAwBnB,IAAY;CAC3C,IAAIiB,yBAAyBjB,IAAIiB,uBAAuBG,KAAAA;AAC1D;AAEA,SAASC,6BAA6BC,OAAcrB,SAAsB;CACxE,MAAMuB,SAASF,MAAME;CACrB,OAAOA,WAAWC,UAAWD,kBAAkBE,QAAQF,OAAOG,SAAS1B,OAAO;AAChF;AAEA,SAAS2B,oBAAoBN,OAAc;CACzC,KAAK,MAAMO,eAAed,yBAAyB;EACjD,MAAMd,UAAU4B,YAAY5B,QAAQ;EACpC,IAAI4B,YAAYxB,OAAO,KAAKJ,WAAWoB,6BAA6BC,OAAOrB,OAAO,GAChF4B,YAAYhB,gBAAgB;CAEhC;AACF;AAEA,SAASiB,yBAAyBR,OAAqB;CACrD,KAAK,MAAMO,eAAed,yBAAyB;EACjD,MAAMd,UAAU4B,YAAY5B,QAAQ;EACpC,MAAMuB,SAASF,MAAME;EACrB,IACEK,YAAYxB,OAAO,KACnBwB,YAAYtB,iBAAiB,KAC7BN,WACA,EAAEuB,kBAAkBE,QAAQzB,QAAQ0B,SAASH,MAAM,IAEnDK,YAAYlB,uBAAuB;CAEvC;AACF;AAEA,SAASqB,0BAA0BH,aAAiCI,MAAe;CACjF,IAAI3C,UAAU;CAEd,IAAI2C,MAAM;EACR,IAAIlB,wBAAwBmB,IAAIL,WAAW,GAAG;EAC9Cd,wBAAwBoB,IAAIN,WAAW;EACvC,IAAI,CAACX,+BAA+B;GAClCA,gCAAgC;GAGhCO,OAAOW,iBAAiB,UAAUR,qBAAqB,IAAI;GAC3DS,SAASD,iBAAiB,eAAeN,0BAA0B,IAAI;EACzE;CACF,OAAO;EACLf,wBAAwBuB,OAAOT,WAAW;EAC1C,IAAId,wBAAwBwB,SAAS,KAAKrB,+BAA+B;GACvEA,gCAAgC;GAChCO,OAAOe,oBAAoB,UAAUZ,qBAAqB,IAAI;GAC9DS,SAASG,oBAAoB,eAAeV,0BAA0B,IAAI;EAC5E;CACF;AACF;AAEA,SAASW,2BAA2BZ,aAAiC;CACnE1C,gBAAgB;EACd6C,0BAA0BH,aAAa,KAAK;EAC5CV,wBAAwBU,YAAY7B,EAAE;CACxC,CAAC;AACH;AAEA,SAAS0C,mBAAmBC,SAAkBrB,OAAc;CAC1D,IAAIsB,MAAMC,QAAQF,OAAO,GAAG;EAC1B,MAAM,CAACG,UAAUC,QAAQJ;EACzBG,SAASC,MAAMzB,KAAK;CACtB,OAAO,IAAI,OAAOqB,YAAY,YAE5BG,QAASxB,KAAK;AAElB;AASA,SAAgB4B,gBAAgBC,OAA6B;CAC3D,OAAAC,gBACGtD,qBAAqBuD,UAAQ;EAAA,IAC5BC,QAAK;GAAA,OAAE;IACL5D,WAAWyD,MAAMzD,aAAaG,gBAAgBH;IAC9CC,YAAYwD,MAAMxD,cAAcE,gBAAgBF;IAChDC,mBAAmBuD,MAAMvD,qBAAqBC,gBAAgBD;GAChE;EAAC;EAAA,IAAAqD,WAAA;GAAA,OAEAE,MAAMF;EAAQ;CAAA,CAAA;AAGrB;AAIA,SAAgBtE,UAAQwE,OAAyB;CAC/C,MAAMK,SAASnE,WAAWS,oBAAoB;CAC9C,MAAM,CAAC2D,OAAOC,QAAQtE,WAAW+D,OAAO;EAAC;EAAQ;EAAe;EAAgB;CAAU,CAAC;CAC3F,MAAMnD,KAAKd,eAAe;CAC1B,MAAMyE,mBAAmBF,MAAMxB,SAASb,KAAAA;CACxC,MAAM,CAACwC,kBAAkBC,uBAAuB5E,aAAawE,MAAMK,eAAe,KAAK;CACvF,MAAMzD,eAAgBsD,WAAW,IAAKF,MAAMxB,QAAQ,QAAS2B,iBAAiB;CAC9E,MAAM,CAAC3D,SAASE,cAAclB,aAA0B;CACxD,IAAI8E,cAAc;CAClB,IAAIC,uBAAuB;CAC3B,IAAIC;CACJ,IAAIG,0BAA0B;CAC9B,IAAIC;CACJ,MAAMzD,gCAAgC;EACpCwD,0BAA0B;EAC1B,IAAIC,2BAA2BG,aAAaH,yBAAyB;EACrEA,4BAA4BjD,KAAAA;CAC9B;CACA,MAAMT,+BAA+B;EACnC,IAAI,CAACN,OAAO,GAAG;EACfO,wBAAwB;EACxB,MAAMjB,aAAawD,MAAMxD,cAAc6D,OAAO7D;EAC9CyE,0BAA0BK,KAAKC,IAAI,IAAI/E,aAAa;EACpD0E,4BAA4BE,WAAW3D,yBAAyBjB,aAAa,EAAE;CACjF;CACA,MAAMkB,wBAAwB;EAC5BkD,cAAc;EACdnD,wBAAwB;EACxB+D,qBAAqB;GACnBZ,cAAc;EAChB,CAAC;CACH;CACA,MAAMrD,uCAAuC;EAC3C,IAAI,CAACL,OAAO,GAAG;EAMf2D,uBAAuB;EACvBW,qBAAqB;GACnBX,uBAAuB;EACzB,CAAC;EACDC,aAAa,OAAO,SAAS;CAC/B;CACA,MAAMpC,cAAkC;EACtC7B;EACAC;EACAE;EACAE;EACAC,kBAAkBmD,MAAMmB,YAAY;EACpCrE,wBACEsE,QAAQ5E,QAAQ,KAAK,OAAOoC,aAAa,eAAepC,QAAQ,MAAMoC,SAASyC,aAAa;EAC9FtE,sBAAsB;GACpBI,wBAAwB;GACxBK,uBAAuBjB;GAGvB,KAAK,MAAM+E,mBAAmBhE,yBAC5B,IAAIgE,gBAAgB/E,OAAOA,IAAI+E,gBAAgBrE,+BAA+B;EAElF;EACAD,uBAAuBU,wBAAwBnB,EAAE;EACjDU;EACAC;EACAC;EACAC;CACF;CACA4B,2BAA2BZ,WAAW;CACtC1C,gBAAgB;EACdyB,wBAAwB;EACxBoD,uBAAuB;CACzB,CAAC;CACD,IAAI3D,OAAO,GAAG2B,0BAA0BH,aAAa,IAAI;CACzD7C,mBAAmBgD,0BAA0BH,aAAaxB,OAAO,CAAC,CAAC;CACnE4D,gBAAgBC,MAAeC,WAAW;EACxC,IAAI,CAACD,QAAQC,WAAW,aAAaH,sBAAsB;EAE3D,IAAIE,MAAM;GACR/C,wBAAwBnB,EAAE;GAC1BY,wBAAwB;GAGxBoB,0BAA0BH,aAAa,IAAI;EAC7C,OAAO;GACL,MAAMmD,iBAAiBnD,YAAYtB,iBAAiB;GACpD,MAAM0E,wBACJhE,yBAAyBG,KAAAA,KAAaH,yBAAyBjB;GAEjE,IACEmE,WAAW,aACXa,kBAH0BP,KAAKC,IAAI,KAAKN,2BAKxC,CAACL,eACD,CAACkB,uBACD;IACArE,wBAAwB;IACxB;GACF;GACAmD,cAAc;GACdnD,wBAAwB;GACxBO,wBAAwBnB,EAAE;EAC5B;EAEA,IAAI,CAAC2D,WAAW,GAAGE,oBAAoBK,IAAI;EAC3CT,MAAMQ,eAAeC,IAAI;EACzB,IAAIA,MAGFS,qBAAqB;GACnB,IAAI,CAACtE,OAAO,GAAG2B,0BAA0BH,aAAa,KAAK;EAC7D,CAAC;CAEL;CAOA,MAAMsD,iBAAiB7D,UAAyB;EAC9C,IAAIA,MAAM+D,QAAQ,UAAU;EAC5BxE,gBAAgB;EAChBoD,aAAa,KAAK;CACpB;CACAjF,mBAAmB;EACjB,IAAIM,YAAY,CAACe,OAAO,GAAG;EAC3BgC,SAASD,iBAAiB,WAAW+C,eAAe,IAAI;EACxDhG,gBAAgBkD,SAASG,oBAAoB,WAAW2C,eAAe,IAAI,CAAC;CAC9E,CAAC;CAED,OAAA/B,gBACGtC,0BAA0BuC,UAAQ;EAACC,OAAOzB;EAAW,IAAAoB,WAAA;GAAA,OAAAG,gBACnDxE,SAAc0G,WAAA;IAAA,IACbrD,OAAI;KAAA,OAAE5B,OAAO;IAAC;IACA4D;IAAY,IAC1BW,WAAQ;KAAA,OAAEnB,MAAMmB;IAAQ;IAAA,IACxBlF,YAAS;KAAA,OAAEyD,MAAMzD,aAAa8D,OAAO9D;IAAS;IAAA,IAC9CC,aAAU;KAAA,OAAEwD,MAAMxD,cAAc6D,OAAO7D;IAAU;IAAA,IACjDC,oBAAiB;KAAA,OAAEuD,MAAMvD,qBAAqB4D,OAAO5D;IAAiB;GAAA,GAClE8D,IAAI,CAAA;EAAA;CAAA,CAAA;AAIhB;AAEA,SAAgB6B,eAAepC,OAAsD;CACnF,MAAMtB,cAAcxC,WAAWyB,yBAAyB;CACxD,MAAM,CAAC2C,OAAOC,QAAQtE,WAAW+D,OAAO;EACtC;EACA;EACA;EACA;EACA;EACA;CAAS,CACV;CAED,OAAAC,gBACGxE,QAAe4G,SAAOF,WACjB5B,MAAI;EAAA+B,MACFrF,YAAY;GAChByB,aAAa1B,WAAWC,OAAO;GAC/B,IAAI,OAAOqD,MAAMgC,QAAQ,YAAYhC,MAAMgC,IAAIrF,OAAO;EACxD;EACAsF,UAAUpE,UAAU;GAClBoB,mBAAmBe,MAAMiC,SAASpE,KAAK;GACvC,IAAI,CAACA,MAAMqE,oBAAoB,CAAC9D,aAAavB,WAAW,GAAGuB,aAAarB,eAAe;EACzF;EACAoF,SAAStE,UAAU;GACjBoB,mBAAmBe,MAAMmC,QAAQtE,KAAK;GACtCO,aAAapB,gBAAgB;GAC7BoB,aAAahB,gBAAgB;EAC/B;EACAgF,iBAAiBvE,UAAU;GACzBoB,mBAAmBe,MAAMoC,gBAAgBvE,KAAK;GAC9C,IAAI,CAACA,MAAMqE,oBAAoB,CAAC9D,aAAavB,WAAW,GAAGuB,aAAarB,eAAe;EACzF;EACAsF,iBAAiBxE,UAAU;GACzBoB,mBAAmBe,MAAMqC,gBAAgBxE,KAAK;GAC9CO,aAAapB,gBAAgB;GAC7BoB,aAAalB,uBAAuB;EACtC;EACAoF,UAAUzE,UAAU;GAClBoB,mBAAmBe,MAAMsC,SAASzE,KAAK;GACvCO,aAAahB,gBAAgB;EAC/B;CAAC,CAAA,CAAA;AAGP;AAIA,SAAgBqF,eAAe/C,OAA4B;CACzD,MAAMtB,cAAcxC,WAAWyB,yBAAyB;CACxD,MAAM,CAAC2C,OAAOC,QAAQtE,WAAW+D,OAAO;EACtC;EACA;EACA;EACA;EACA;CAAsB,CACvB;CACD,MAAMgD,UAAUtH,kBAAkB;CAIlC,OAAAuE,gBACGxE,QAAewH,QAAM,EAAA,IAAAnD,WAAA;EAAA,OAAAG,gBACnBxE,QAAeqH,SAAOX,WAAA;GAAA,KAAA,WAAA;IAAA,OACd9F,GACLD,YAIA,+DACA,+DACA,6EACA,0EACA,uDACAkE,MAAM4C,KACR;GAAC;GAAA,KAAA,iBAAA;IAAA,OACYE,WAAA,CAAA,CAAAJ,QAAQ9F,OAAO,CAAC,CAAA,CAAA,IAAGoD,MAAM,iBAAiB;GAAI;GAC3D+C,kBAAkBlF,UAAU;IAC1BoB,mBAAmBe,MAAM+C,iBAAiBlF,KAAK;IAC/C,IAAI,CAACA,MAAMqE,kBAAkB9D,aAAahB,gBAAgB;GAC5D;GACA4F,uBAAuBnF,UAAU;IAC/BoB,mBAAmBe,MAAMgD,sBAAsBnF,KAAK;IACpD,IAAI,CAACA,MAAMqE,kBAAkB9D,aAAahB,gBAAgB;GAC5D;EAAC,GACG6C,MAAI,EAAA,IAAAT,WAAA;GAAA,OAEPQ,MAAMR;EAAQ,EAAA,CAAA,CAAA;CAAA,EAAA,CAAA;AAIvB"}
|
package/dist/lib/overlay.d.ts
CHANGED
|
@@ -15,6 +15,13 @@ export declare const overlaySurface = "bg-popover text-popover-foreground rounde
|
|
|
15
15
|
export declare const overlayPositioner = "fixed inset-0 z-(--z-dialog) grid place-items-center p-4";
|
|
16
16
|
/** The dimming layer behind a modal overlay. */
|
|
17
17
|
export declare const overlayScrim = "fixed inset-0 z-(--z-dialog) bg-scrim/50 supports-[backdrop-filter]:backdrop-blur-xs";
|
|
18
|
+
/**
|
|
19
|
+
* The tip: the card-toned bubble an explanation shows in. The side rail draws
|
|
20
|
+
* it flush to a collapsed row and every floating tooltip composes the same
|
|
21
|
+
* fill, edge, and type, so a control never explains itself in two visual
|
|
22
|
+
* languages.
|
|
23
|
+
*/
|
|
24
|
+
export declare const tooltipTip = "bg-card text-card-foreground rounded-md border border-border text-sm font-medium shadow-lg";
|
|
18
25
|
/**
|
|
19
26
|
* Entrance and exit motion, expressed as data-state classes.
|
|
20
27
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../src/lib/overlay.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,gEAAgE;AAChE,eAAO,MAAM,cAAc,iFACqD,CAAA;AAEhF,yEAAyE;AACzE,eAAO,MAAM,iBAAiB,6DAA6D,CAAA;AAE3F,gDAAgD;AAChD,eAAO,MAAM,YAAY,yFAC+D,CAAA;AAExF;;;;;;;;GAQG;AACH,eAAO,MAAM,aAAa,QAIf,CAAA;AAEX;qCACqC;AACrC,eAAO,MAAM,aAAa,QAGf,CAAA;AAEX,+DAA+D;AAC/D,eAAO,MAAM,YAAY,+BAA+B,CAAA;AAExD;;;GAGG;AACH,eAAO,MAAM,QAAQ,QAOV,CAAA;AAEX,qFAAqF;AACrF,eAAO,MAAM,mBAAmB,kGACiE,CAAA;AAEjG,4CAA4C;AAC5C,eAAO,MAAM,SAAS,mFAC4D,CAAA;AAElF,oCAAoC;AACpC,eAAO,MAAM,aAAa,8BAA8B,CAAA;AAExD,iDAAiD;AACjD,eAAO,MAAM,kBAAkB,QAAQ,CAAA"}
|
|
1
|
+
{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../src/lib/overlay.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,gEAAgE;AAChE,eAAO,MAAM,cAAc,iFACqD,CAAA;AAEhF,yEAAyE;AACzE,eAAO,MAAM,iBAAiB,6DAA6D,CAAA;AAE3F,gDAAgD;AAChD,eAAO,MAAM,YAAY,yFAC+D,CAAA;AAExF;;;;;GAKG;AACH,eAAO,MAAM,UAAU,+FACuE,CAAA;AAE9F;;;;;;;;GAQG;AACH,eAAO,MAAM,aAAa,QAIf,CAAA;AAEX;qCACqC;AACrC,eAAO,MAAM,aAAa,QAGf,CAAA;AAEX,+DAA+D;AAC/D,eAAO,MAAM,YAAY,+BAA+B,CAAA;AAExD;;;GAGG;AACH,eAAO,MAAM,QAAQ,QAOV,CAAA;AAEX,qFAAqF;AACrF,eAAO,MAAM,mBAAmB,kGACiE,CAAA;AAEjG,4CAA4C;AAC5C,eAAO,MAAM,SAAS,mFAC4D,CAAA;AAElF,oCAAoC;AACpC,eAAO,MAAM,aAAa,8BAA8B,CAAA;AAExD,iDAAiD;AACjD,eAAO,MAAM,kBAAkB,QAAQ,CAAA"}
|
package/dist/lib/overlay.js
CHANGED
|
@@ -17,6 +17,13 @@ var overlayPositioner = "fixed inset-0 z-(--z-dialog) grid place-items-center p-
|
|
|
17
17
|
/** The dimming layer behind a modal overlay. */
|
|
18
18
|
var overlayScrim = "fixed inset-0 z-(--z-dialog) bg-scrim/50 supports-[backdrop-filter]:backdrop-blur-xs";
|
|
19
19
|
/**
|
|
20
|
+
* The tip: the card-toned bubble an explanation shows in. The side rail draws
|
|
21
|
+
* it flush to a collapsed row and every floating tooltip composes the same
|
|
22
|
+
* fill, edge, and type, so a control never explains itself in two visual
|
|
23
|
+
* languages.
|
|
24
|
+
*/
|
|
25
|
+
var tooltipTip = "bg-card text-card-foreground rounded-md border border-border text-sm font-medium shadow-lg";
|
|
26
|
+
/**
|
|
20
27
|
* Entrance and exit motion, expressed as data-state classes.
|
|
21
28
|
*
|
|
22
29
|
* `data-expanded` / `data-closed` are Kobalte's; `data-side-*` come from its
|
|
@@ -54,6 +61,6 @@ var menuLabel = "px-2 py-1.5 text-2xs font-medium tracking-wide text-muted-foreg
|
|
|
54
61
|
/** The rule between menu groups. */
|
|
55
62
|
var menuSeparator = "bg-border -mx-1 my-1 h-px";
|
|
56
63
|
//#endregion
|
|
57
|
-
export { destructiveMenuItem, menuItem, menuLabel, menuSeparator, overlayMotion, overlayPositioner, overlayScrim, overlaySurface, popoverArrow, popoverMotion };
|
|
64
|
+
export { destructiveMenuItem, menuItem, menuLabel, menuSeparator, overlayMotion, overlayPositioner, overlayScrim, overlaySurface, popoverArrow, popoverMotion, tooltipTip };
|
|
58
65
|
|
|
59
66
|
//# sourceMappingURL=overlay.js.map
|
package/dist/lib/overlay.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"overlay.js","names":[],"sources":["../../src/lib/overlay.ts"],"sourcesContent":["/**\n * Shared strings for the overlay layer: dialogs, sheets, menus, popovers,\n * tooltips and the command palette.\n *\n * These live here rather than in each component because the overlay family is\n * where consistency is most visible and least likely to survive duplication.\n * A dialog, a sheet and a dropdown that disagree about their border, radius,\n * motion or shadow read as three different apps — and an app that adopts this\n * library would inherit all three. Declaring the surface once is what makes\n * \"an overlay looks like this\" a fact rather than a convention.\n */\n\n/** The panel itself: fill, hairline edge, radius, elevation. */\nexport const overlaySurface =\n 'bg-popover text-popover-foreground rounded-xl border border-border shadow-lg'\n\n/** The span of the portal wrapper that centres a dialog-like overlay. */\nexport const overlayPositioner = 'fixed inset-0 z-(--z-dialog) grid place-items-center p-4'\n\n/** The dimming layer behind a modal overlay. */\nexport const overlayScrim =\n 'fixed inset-0 z-(--z-dialog) bg-scrim/50 supports-[backdrop-filter]:backdrop-blur-xs'\n\n/**\n * Entrance and exit motion, expressed as data-state classes.\n *\n * `data-expanded` / `data-closed` are Kobalte's; `data-side-*` come from its\n * popper positioning and let a menu slide in from the edge it is anchored to,\n * which is what makes a dropdown feel attached to its trigger rather than\n * dropped on the screen. Exit motion is shorter than entry, because a\n * dismissal should feel immediate while an arrival benefits from being seen.\n */\nexport const overlayMotion = [\n 'data-expanded:animate-in data-expanded:fade-in-0 data-expanded:zoom-in-95',\n 'data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\n 'data-expanded:duration-200 data-closed:duration-150',\n].join(' ')\n\n/** Popover-style motion: no zoom, so a panel anchored to a control does not\n * appear to breathe away from it. */\nexport const popoverMotion = [\n 'data-expanded:animate-in data-expanded:fade-in-0 data-closed:animate-out data-closed:fade-out-0',\n 'data-expanded:duration-150 data-closed:duration-100',\n].join(' ')\n\n/** The popper arrow. Sized in the component; coloured here. */\nexport const popoverArrow = 'fill-popover stroke-border'\n\n/**\n * A menu row: the shared height, radius, hover fill and focus treatment for\n * every item inside a menu, listbox or command list.\n */\nexport const menuItem = [\n 'relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none',\n 'transition-colors ease-out',\n 'data-[highlighted]:bg-surface-hover data-[highlighted]:text-foreground',\n 'data-[disabled]:pointer-events-none data-[disabled]:text-muted-foreground',\n '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4',\n '[&_svg:not([class*=text-])]:text-muted-foreground',\n].join(' ')\n\n/** A destructive action keeps readable text and marks its row with a status edge. */\nexport const destructiveMenuItem =\n 'border-s-2 border-destructive ps-1.5 text-foreground data-[highlighted]:bg-destructive-subtle'\n\n/** The label above a group of menu rows. */\nexport const menuLabel =\n 'px-2 py-1.5 text-2xs font-medium tracking-wide text-muted-foreground uppercase'\n\n/** The rule between menu groups. */\nexport const menuSeparator = 'bg-border -mx-1 my-1 h-px'\n\n/** Padding shared by every menu-list surface. */\nexport const menuContentPadding = 'p-1'\n"],"mappings":";;;;;;;;;;;;;AAaA,IAAa,iBACX;;AAGF,IAAa,oBAAoB;;AAGjC,IAAa,eACX;;;;;;;;;;AAWF,IAAa,gBAAgB;CAC3B;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;;;AAIV,IAAa,gBAAgB,CAC3B,mGACA,qDACF,CAAC,CAAC,KAAK,GAAG;;AAGV,IAAa,eAAe;;;;;AAM5B,IAAa,WAAW;CACtB;CACA;CACA;CACA;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;;AAGV,IAAa,sBACX;;AAGF,IAAa,YACX;;AAGF,IAAa,gBAAgB"}
|
|
1
|
+
{"version":3,"file":"overlay.js","names":[],"sources":["../../src/lib/overlay.ts"],"sourcesContent":["/**\n * Shared strings for the overlay layer: dialogs, sheets, menus, popovers,\n * tooltips and the command palette.\n *\n * These live here rather than in each component because the overlay family is\n * where consistency is most visible and least likely to survive duplication.\n * A dialog, a sheet and a dropdown that disagree about their border, radius,\n * motion or shadow read as three different apps — and an app that adopts this\n * library would inherit all three. Declaring the surface once is what makes\n * \"an overlay looks like this\" a fact rather than a convention.\n */\n\n/** The panel itself: fill, hairline edge, radius, elevation. */\nexport const overlaySurface =\n 'bg-popover text-popover-foreground rounded-xl border border-border shadow-lg'\n\n/** The span of the portal wrapper that centres a dialog-like overlay. */\nexport const overlayPositioner = 'fixed inset-0 z-(--z-dialog) grid place-items-center p-4'\n\n/** The dimming layer behind a modal overlay. */\nexport const overlayScrim =\n 'fixed inset-0 z-(--z-dialog) bg-scrim/50 supports-[backdrop-filter]:backdrop-blur-xs'\n\n/**\n * The tip: the card-toned bubble an explanation shows in. The side rail draws\n * it flush to a collapsed row and every floating tooltip composes the same\n * fill, edge, and type, so a control never explains itself in two visual\n * languages.\n */\nexport const tooltipTip =\n 'bg-card text-card-foreground rounded-md border border-border text-sm font-medium shadow-lg'\n\n/**\n * Entrance and exit motion, expressed as data-state classes.\n *\n * `data-expanded` / `data-closed` are Kobalte's; `data-side-*` come from its\n * popper positioning and let a menu slide in from the edge it is anchored to,\n * which is what makes a dropdown feel attached to its trigger rather than\n * dropped on the screen. Exit motion is shorter than entry, because a\n * dismissal should feel immediate while an arrival benefits from being seen.\n */\nexport const overlayMotion = [\n 'data-expanded:animate-in data-expanded:fade-in-0 data-expanded:zoom-in-95',\n 'data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\n 'data-expanded:duration-200 data-closed:duration-150',\n].join(' ')\n\n/** Popover-style motion: no zoom, so a panel anchored to a control does not\n * appear to breathe away from it. */\nexport const popoverMotion = [\n 'data-expanded:animate-in data-expanded:fade-in-0 data-closed:animate-out data-closed:fade-out-0',\n 'data-expanded:duration-150 data-closed:duration-100',\n].join(' ')\n\n/** The popper arrow. Sized in the component; coloured here. */\nexport const popoverArrow = 'fill-popover stroke-border'\n\n/**\n * A menu row: the shared height, radius, hover fill and focus treatment for\n * every item inside a menu, listbox or command list.\n */\nexport const menuItem = [\n 'relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none',\n 'transition-colors ease-out',\n 'data-[highlighted]:bg-surface-hover data-[highlighted]:text-foreground',\n 'data-[disabled]:pointer-events-none data-[disabled]:text-muted-foreground',\n '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4',\n '[&_svg:not([class*=text-])]:text-muted-foreground',\n].join(' ')\n\n/** A destructive action keeps readable text and marks its row with a status edge. */\nexport const destructiveMenuItem =\n 'border-s-2 border-destructive ps-1.5 text-foreground data-[highlighted]:bg-destructive-subtle'\n\n/** The label above a group of menu rows. */\nexport const menuLabel =\n 'px-2 py-1.5 text-2xs font-medium tracking-wide text-muted-foreground uppercase'\n\n/** The rule between menu groups. */\nexport const menuSeparator = 'bg-border -mx-1 my-1 h-px'\n\n/** Padding shared by every menu-list surface. */\nexport const menuContentPadding = 'p-1'\n"],"mappings":";;;;;;;;;;;;;AAaA,IAAa,iBACX;;AAGF,IAAa,oBAAoB;;AAGjC,IAAa,eACX;;;;;;;AAQF,IAAa,aACX;;;;;;;;;;AAWF,IAAa,gBAAgB;CAC3B;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;;;AAIV,IAAa,gBAAgB,CAC3B,mGACA,qDACF,CAAC,CAAC,KAAK,GAAG;;AAGV,IAAa,eAAe;;;;;AAM5B,IAAa,WAAW;CACtB;CACA;CACA;CACA;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;;AAGV,IAAa,sBACX;;AAGF,IAAa,YACX;;AAGF,IAAa,gBAAgB"}
|
package/dist/lib/tokens.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/lib/tokens.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAIH,MAAM,MAAM,SAAS,GACjB,OAAO,GACP,WAAW,GACX,aAAa,GACb,QAAQ,GACR,UAAU,GACV,QAAQ,GACR,QAAQ,GACR,MAAM,CAAA;AAEV,MAAM,MAAM,eAAe,GAAG;IAC5B,0DAA0D;IAC1D,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,SAAS,CAAA;IACf,8DAA8D;IAC9D,WAAW,EAAE,MAAM,CAAA;IACnB,oEAAoE;IACpE,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,WAAW,EAAE,eAAe,EAoUxC,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,eAAe,EAezC,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,eAAe,EAyE7C,CAAA;AAED;;+EAE+E;AAC/E,eAAO,MAAM,aAAa,EAAE,eAAe,
|
|
1
|
+
{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/lib/tokens.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAIH,MAAM,MAAM,SAAS,GACjB,OAAO,GACP,WAAW,GACX,aAAa,GACb,QAAQ,GACR,UAAU,GACV,QAAQ,GACR,QAAQ,GACR,MAAM,CAAA;AAEV,MAAM,MAAM,eAAe,GAAG;IAC5B,0DAA0D;IAC1D,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,SAAS,CAAA;IACf,8DAA8D;IAC9D,WAAW,EAAE,MAAM,CAAA;IACnB,oEAAoE;IACpE,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,WAAW,EAAE,eAAe,EAoUxC,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,eAAe,EAezC,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,eAAe,EAyE7C,CAAA;AAED;;+EAE+E;AAC/E,eAAO,MAAM,aAAa,EAAE,eAAe,EAmF1C,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,eAAe,EA2B5C,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,eAAe,EAkBzC,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,eAAe,EAyBzC,CAAA;AAED;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB,qEAAqE;IACrE,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,8DAA8D;IAC9D,WAAW,EAAE,MAAM,CAAA;IACnB,uEAAuE;IACvE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,sEAAsE;IACtE,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,SAAS,YAAY,EAQ/C,CAAA;AAEF;;;;;;;;;GASG;AACH,MAAM,MAAM,UAAU,GAAG;IACvB,oFAAoF;IACpF,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,gDAAgD;IAChD,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAA;CAChC,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,SAAS,UAAU,EA+B3C,CAAA;AAEF,qCAAqC;AACrC,eAAO,MAAM,YAAY;;;;;;;;CAQf,CAAA;AAEV,yDAAyD;AACzD,eAAO,MAAM,SAAS,EAAE,eAAe,EAAuC,CAAA;AAE9E;;;;GAIG;AACH,eAAO,MAAM,wBAAwB,EAAE,MAAM,EAAe,CAAA"}
|
package/dist/lib/tokens.js
CHANGED
|
@@ -660,6 +660,11 @@ var densityTokens = [
|
|
|
660
660
|
name: "statusbar-height",
|
|
661
661
|
kind: "dimension",
|
|
662
662
|
description: "28px — the bottom readout strip."
|
|
663
|
+
},
|
|
664
|
+
{
|
|
665
|
+
name: "tooltip-max-width",
|
|
666
|
+
kind: "dimension",
|
|
667
|
+
description: "The lesser of the 16rem readable measure and one viewport minus a gutter — a tip wraps before it can push its document wider than itself."
|
|
663
668
|
}
|
|
664
669
|
];
|
|
665
670
|
var elevationTokens = [
|
package/dist/lib/tokens.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tokens.js","names":[],"sources":["../../src/lib/tokens.ts"],"sourcesContent":["/**\n * The design system's token manifest.\n *\n * `theme.css` is the source of truth for token *values*. This file is the\n * source of truth for token *names and meaning* — what each one is for, and\n * which ones a theme may vary.\n *\n * It exists because a manifest that is only documentation rots. Two things read\n * it instead:\n *\n * - the token galleries in Storybook, so the review surface shows every token\n * rather than the ones an author remembered;\n * - `tests/tokens.test.ts`, which parses `theme.css` and fails when a token\n * is declared in one place and missing from the other.\n *\n * That pairing is what makes \"every token is documented and every documented\n * token exists\" a property the build enforces rather than a promise.\n */\n\nimport { ACCENTS } from '@adea-ai/themes'\n\nexport type TokenKind =\n | 'color'\n | 'dimension'\n | 'font-family'\n | 'number'\n | 'duration'\n | 'easing'\n | 'shadow'\n | 'text'\n\nexport type TokenDefinition = {\n /** The custom property name, without the leading `--`. */\n name: string\n kind: TokenKind\n /** One line: what this token is for. Shown in the gallery. */\n description: string\n /** True when the light and dark themes give it different values. */\n themed?: boolean\n}\n\n/**\n * Colour roles, in the order they appear in a page: surfaces first, then text,\n * then the lines between them, then the semantic fills. The order is the\n * documentation — reading the gallery top to bottom walks the surface ladder.\n */\nexport const colorTokens: TokenDefinition[] = [\n // Surfaces\n {\n name: 'background',\n kind: 'color',\n themed: true,\n description: 'The canvas every panel sits on.',\n },\n {\n name: 'foreground',\n kind: 'color',\n themed: true,\n description: 'Default body text on the canvas.',\n },\n {\n name: 'card',\n kind: 'color',\n themed: true,\n description: 'A panel or card raised one rung above the canvas.',\n },\n { name: 'card-foreground', kind: 'color', themed: true, description: 'Text on `card`.' },\n {\n name: 'popover',\n kind: 'color',\n themed: true,\n description: 'A floating surface: dialog, menu, popover, tooltip-free.',\n },\n { name: 'popover-foreground', kind: 'color', themed: true, description: 'Text on `popover`.' },\n {\n name: 'surface',\n kind: 'color',\n themed: true,\n description: 'Alias of `background`, for code that means \"a surface\" not \"the page\".',\n },\n {\n name: 'surface-sunken',\n kind: 'color',\n themed: true,\n description: 'A well: code blocks, inset lists, empty states.',\n },\n {\n name: 'surface-raised',\n kind: 'color',\n themed: true,\n description: 'Alias of `card`, for panels that sit on the canvas.',\n },\n {\n name: 'surface-overlay',\n kind: 'color',\n themed: true,\n description: 'Alias of `popover`, for floating layers.',\n },\n {\n name: 'surface-hover',\n kind: 'color',\n themed: true,\n description: 'The hover fill shared by rows, menu items and ghost controls.',\n },\n {\n name: 'surface-active',\n kind: 'color',\n themed: true,\n description: 'The pressed/selected fill, one rung past hover.',\n },\n {\n name: 'chrome',\n kind: 'color',\n themed: true,\n description: 'Window chrome: the top bar and its frosted fill.',\n },\n {\n name: 'chrome-alpha',\n kind: 'number',\n themed: true,\n description: 'Opacity of the chrome fill behind a blur.',\n },\n\n // The brand action\n {\n name: 'primary',\n kind: 'color',\n themed: true,\n description: 'The Adea emerald. The one primary action in a view.',\n },\n {\n name: 'primary-foreground',\n kind: 'color',\n themed: true,\n description: 'Label on `primary`. Black in dark, white in light — the accent flips polarity.',\n },\n {\n name: 'primary-hover',\n kind: 'color',\n themed: true,\n description: 'Hover rung for a primary action.',\n },\n {\n name: 'primary-subtle',\n kind: 'color',\n themed: true,\n description: 'Tinted primary fill: selected rows, focus rings, subtle buttons.',\n },\n\n {\n name: 'secondary',\n kind: 'color',\n themed: true,\n description: 'A quieter filled surface for a secondary action.',\n },\n {\n name: 'secondary-foreground',\n kind: 'color',\n themed: true,\n description: 'Label on `secondary`.',\n },\n {\n name: 'muted',\n kind: 'color',\n themed: true,\n description: 'A neutral fill: skeletons, inert chips, table footers.',\n },\n {\n name: 'muted-foreground',\n kind: 'color',\n themed: true,\n description: 'De-emphasised text. Measured to clear 4.5:1 on both `background` and `card`.',\n },\n {\n name: 'accent',\n kind: 'color',\n themed: true,\n description: \"shadcn's hover-surface accent. Not the brand colour — that is `primary`.\",\n },\n { name: 'accent-foreground', kind: 'color', themed: true, description: 'Text on `accent`.' },\n\n // Status\n {\n name: 'destructive',\n kind: 'color',\n themed: true,\n description: 'The canonical error hue for semantic status indicators and tinted notices.',\n },\n {\n name: 'destructive-foreground',\n kind: 'color',\n themed: true,\n description:\n 'Text on the canonical error hue; solid actions use `destructive-action-foreground`.',\n },\n {\n name: 'destructive-subtle',\n kind: 'color',\n themed: true,\n description: 'Opaque destructive tint against the canvas; subtle labels use foreground.',\n },\n {\n name: 'destructive-action',\n kind: 'color',\n themed: true,\n description: 'Contrast-safe solid fill for destructive actions, derived from the error role.',\n },\n {\n name: 'destructive-action-foreground',\n kind: 'color',\n themed: true,\n description: 'Text on the destructive action fill and its 90% hover composition.',\n },\n { name: 'success', kind: 'color', themed: true, description: 'A completed or healthy state.' },\n { name: 'success-foreground', kind: 'color', themed: true, description: 'Label on `success`.' },\n {\n name: 'success-subtle',\n kind: 'color',\n themed: true,\n description: 'Opaque success tint against the canvas; subtle labels use foreground.',\n },\n {\n name: 'warning',\n kind: 'color',\n themed: true,\n description: 'Something needs attention but is not broken.',\n },\n { name: 'warning-foreground', kind: 'color', themed: true, description: 'Label on `warning`.' },\n {\n name: 'warning-subtle',\n kind: 'color',\n themed: true,\n description: 'Opaque warning tint against the canvas; subtle labels use foreground.',\n },\n { name: 'info', kind: 'color', themed: true, description: 'Neutral information.' },\n { name: 'info-foreground', kind: 'color', themed: true, description: 'Label on `info`.' },\n {\n name: 'info-subtle',\n kind: 'color',\n themed: true,\n description: 'Opaque info tint against the canvas; subtle labels use foreground.',\n },\n\n // Lines\n {\n name: 'border',\n kind: 'color',\n themed: true,\n description: 'Every hairline: panel edges, dividers, card outlines.',\n },\n {\n name: 'input',\n kind: 'color',\n themed: true,\n description:\n 'The edge of an editable control. A rung stronger than `border` so a field is findable.',\n },\n {\n name: 'ring',\n kind: 'color',\n themed: true,\n description: 'The focus ring. Always paired with `primary-subtle` as its glow.',\n },\n\n // Theme-invariant glass\n {\n name: 'scrim',\n kind: 'color',\n description: 'Dark glass for overlays and on-screen controls. Same in both themes.',\n },\n { name: 'scrim-foreground', kind: 'color', description: 'Text drawn on `scrim`.' },\n { name: 'scrim-edge', kind: 'color', description: 'The hairline drawn on `scrim`.' },\n\n // Diff and code\n { name: 'diff-add', kind: 'color', themed: true, description: 'Background of an added line.' },\n {\n name: 'diff-add-foreground',\n kind: 'color',\n themed: true,\n description: 'Text of an added line.',\n },\n {\n name: 'diff-delete',\n kind: 'color',\n themed: true,\n description: 'Background of a removed line.',\n },\n {\n name: 'diff-delete-foreground',\n kind: 'color',\n themed: true,\n description: 'Text of a removed line.',\n },\n { name: 'diff-hunk', kind: 'color', themed: true, description: 'Background of a hunk header.' },\n {\n name: 'diff-hunk-foreground',\n kind: 'color',\n themed: true,\n description: 'Text of a hunk header.',\n },\n {\n name: 'diff-meta-foreground',\n kind: 'color',\n themed: true,\n description: 'File headers and line numbers in a diff.',\n },\n\n // Charts\n {\n name: 'chart-1',\n kind: 'color',\n themed: true,\n description: 'Categorical series 1. The set is closed at six.',\n },\n { name: 'chart-2', kind: 'color', themed: true, description: 'Categorical series 2.' },\n { name: 'chart-3', kind: 'color', themed: true, description: 'Categorical series 3.' },\n { name: 'chart-4', kind: 'color', themed: true, description: 'Categorical series 4.' },\n { name: 'chart-5', kind: 'color', themed: true, description: 'Categorical series 5.' },\n { name: 'chart-6', kind: 'color', themed: true, description: 'Categorical series 6.' },\n\n // Sidebar (the shadcn contract, kept whole)\n {\n name: 'sidebar',\n kind: 'color',\n themed: true,\n description: 'The rail and sidebar surface, tinted against the canvas.',\n },\n {\n name: 'sidebar-foreground',\n kind: 'color',\n themed: true,\n description: 'Default text in the rail and sidebar.',\n },\n {\n name: 'sidebar-primary',\n kind: 'color',\n themed: true,\n description: 'The active destination in the rail.',\n },\n {\n name: 'sidebar-primary-foreground',\n kind: 'color',\n themed: true,\n description: 'Text on the active rail destination.',\n },\n {\n name: 'sidebar-accent',\n kind: 'color',\n themed: true,\n description: 'Hover and selected fill for rail and sidebar rows.',\n },\n {\n name: 'sidebar-accent-foreground',\n kind: 'color',\n themed: true,\n description: 'Text on `sidebar-accent`.',\n },\n {\n name: 'sidebar-border',\n kind: 'color',\n themed: true,\n description: 'The rule between the rail and the canvas.',\n },\n { name: 'sidebar-ring', kind: 'color', themed: true, description: 'Focus ring inside the rail.' },\n {\n name: 'sidebar-muted-foreground',\n kind: 'color',\n themed: true,\n description: 'Rail labels that are not the current destination.',\n },\n]\n\nexport const radiusTokens: TokenDefinition[] = [\n {\n name: 'radius-lg',\n kind: 'dimension',\n description:\n '10px — cards and panels. Also the knob: move this one value to re-round the whole system.',\n },\n { name: 'radius-sm', kind: 'dimension', description: '6px — badges, keyboard keys, menu items.' },\n {\n name: 'radius-md',\n kind: 'dimension',\n description: '8px — every control: buttons, inputs, selects.',\n },\n { name: 'radius-xl', kind: 'dimension', description: '14px — dialogs, menus, sheets.' },\n { name: 'radius-2xl', kind: 'dimension', description: '18px — full-window surfaces and media.' },\n]\n\nexport const typographyTokens: TokenDefinition[] = [\n {\n name: 'font-sans',\n kind: 'font-family',\n description: 'The selected interface face. Space Grotesk unless the font axis says otherwise.',\n },\n {\n name: 'font-mono',\n kind: 'font-family',\n description: 'The selected monospace face. Code, terminals, ids, paths.',\n },\n {\n name: 'font-family-space-grotesk',\n kind: 'font-family',\n description: 'The interface default, and the face the visual language was drawn against.',\n },\n {\n name: 'font-family-jetbrains-mono',\n kind: 'font-family',\n description: 'The monospace default. Code, terminals, diffs.',\n },\n {\n name: 'font-family-geist',\n kind: 'font-family',\n description: 'An alternative interface face. cortana already ships it.',\n },\n {\n name: 'font-family-geist-mono',\n kind: 'font-family',\n description: 'The monospace counterpart to Geist.',\n },\n {\n name: 'font-family-system',\n kind: 'font-family',\n description: \"The platform's own interface face. First-class, not a fallback.\",\n },\n {\n name: 'font-family-system-mono',\n kind: 'font-family',\n description: \"The platform's own monospace face.\",\n },\n {\n name: 'ui-tracking',\n kind: 'text',\n description:\n 'Letter spacing for measured chrome. `normal` on a proportional face, tightened when the UI font is monospace — which is roughly 20% wider at the same size.',\n },\n {\n name: 'ui-word-spacing',\n kind: 'text',\n description:\n \"Word spacing for measured chrome. Mono's space is a full advance-width cell, so a two-word label reads as two floating words without this.\",\n },\n {\n name: 'text-2xs',\n kind: 'text',\n description: '11px — the smallest label the system permits: kbd keys, status bar.',\n },\n { name: 'text-xs', kind: 'text', description: '12px — metadata, badges, secondary rows.' },\n {\n name: 'text-sm',\n kind: 'text',\n description: '14px — the interface default. Body copy, labels, controls.',\n },\n { name: 'text-base', kind: 'text', description: '16px — card titles and dialog titles.' },\n { name: 'text-lg', kind: 'text', description: '18px — a section heading inside a page.' },\n { name: 'text-xl', kind: 'text', description: '20px — a page title.' },\n { name: 'text-2xl', kind: 'text', description: '24px — a display figure.' },\n {\n name: 'text-3xl',\n kind: 'text',\n description: '30px — the largest size in the system. Reserved for an empty-state headline.',\n },\n]\n\n/** Height tokens also size both axes of icon controls through Tailwind's --size\n * namespace. Padding has its own --spacing mapping. Nominal pixel descriptions\n * use a 16px rem; rendered dimensions follow the consumer's root font size. */\nexport const densityTokens: TokenDefinition[] = [\n { name: 'control-height-2xs', kind: 'dimension', description: '20px — an inline chip control.' },\n { name: 'control-height-xs', kind: 'dimension', description: '24px — a dense table row action.' },\n { name: 'control-height-sm', kind: 'dimension', description: '28px — the toolbar default.' },\n {\n name: 'control-height-md',\n kind: 'dimension',\n description: '32px — the form default. Button and Input are this size unless told otherwise.',\n },\n { name: 'control-height-lg', kind: 'dimension', description: '36px — a primary form action.' },\n {\n name: 'control-height-xl',\n kind: 'dimension',\n description: '40px — a hero control in an empty state.',\n },\n {\n name: 'control-height-2xl',\n kind: 'dimension',\n description: '48px — a stable touch target, unchanged by compact density.',\n },\n {\n name: 'control-padding-2xs',\n kind: 'dimension',\n description: 'Inline padding that pairs with the 20px control.',\n },\n {\n name: 'control-padding-xs',\n kind: 'dimension',\n description: 'Inline padding that pairs with the 24px control.',\n },\n {\n name: 'control-padding-sm',\n kind: 'dimension',\n description: 'Inline padding that pairs with the 28px control.',\n },\n {\n name: 'control-padding-md',\n kind: 'dimension',\n description: 'Inline padding that pairs with the 32px control.',\n },\n {\n name: 'control-padding-lg',\n kind: 'dimension',\n description: 'Inline padding that pairs with the 36px control.',\n },\n {\n name: 'control-padding-xl',\n kind: 'dimension',\n description: 'Inline padding that pairs with the 40px control.',\n },\n {\n name: 'control-padding-2xl',\n kind: 'dimension',\n description: 'Inline padding that pairs with the stable 48px touch target.',\n },\n { name: 'row-height-sm', kind: 'dimension', description: '28px — a dense list row.' },\n { name: 'row-height-md', kind: 'dimension', description: '32px — the default list row.' },\n { name: 'row-height-lg', kind: 'dimension', description: '36px — a two-line list row.' },\n { name: 'rail-width', kind: 'dimension', description: '56px — the icon-only rail.' },\n { name: 'rail-width-expanded', kind: 'dimension', description: '236px — the labelled rail.' },\n {\n name: 'rail-item-height',\n kind: 'dimension',\n description: '36px — a rail or sidebar destination.',\n },\n {\n name: 'sidebar-width',\n kind: 'dimension',\n description: '256px — the secondary navigation column.',\n },\n {\n name: 'sidebar-width-compact',\n kind: 'dimension',\n description: '48px — the collapsed secondary column.',\n },\n { name: 'topbar-height', kind: 'dimension', description: '48px — the window title row.' },\n { name: 'statusbar-height', kind: 'dimension', description: '28px — the bottom readout strip.' },\n]\n\nexport const elevationTokens: TokenDefinition[] = [\n {\n name: 'shadow-2xs',\n kind: 'shadow',\n themed: true,\n description: 'Barely there: a chip resting on a card.',\n },\n {\n name: 'shadow-xs',\n kind: 'shadow',\n themed: true,\n description: 'A card or panel on the canvas.',\n },\n {\n name: 'shadow-sm',\n kind: 'shadow',\n themed: true,\n description: 'A control that lifts: a pressed toggle, a thumb.',\n },\n { name: 'shadow-md', kind: 'shadow', themed: true, description: 'A menu or popover.' },\n { name: 'shadow-lg', kind: 'shadow', themed: true, description: 'A dialog or sheet.' },\n {\n name: 'shadow-xl',\n kind: 'shadow',\n themed: true,\n description: 'The command palette, above everything.',\n },\n]\n\nexport const motionTokens: TokenDefinition[] = [\n {\n name: 'duration-fast',\n kind: 'duration',\n description: '120ms — a state change the user is already watching.',\n },\n { name: 'duration-normal', kind: 'duration', description: '200ms — an entrance.' },\n { name: 'duration-slow', kind: 'duration', description: '320ms — a layout settle.' },\n {\n name: 'ease-out',\n kind: 'easing',\n description: 'A fast start and a long settle. Reads as decisive rather than floaty.',\n },\n {\n name: 'ease-in-out',\n kind: 'easing',\n description: 'For a loop that has no start or end, such as a shimmer.',\n },\n]\n\nexport const zIndexTokens: TokenDefinition[] = [\n { name: 'z-base', kind: 'number', description: 'In flow, at the document order.' },\n {\n name: 'z-docked',\n kind: 'number',\n description: 'A sticky table header standing above its own scroll body.',\n },\n { name: 'z-sticky', kind: 'number', description: 'The top bar and any other pinned chrome.' },\n { name: 'z-drawer', kind: 'number', description: 'A drawer, below a modal dialog.' },\n { name: 'z-dialog', kind: 'number', description: 'A modal dialog and its scrim.' },\n {\n name: 'z-menu',\n kind: 'number',\n description: 'Menus, popovers and comboboxes. Above dialogs, because a dialog can contain one.',\n },\n {\n name: 'z-tooltip',\n kind: 'number',\n description: 'Tooltips. Above menus, because a menu item can carry one.',\n },\n {\n name: 'z-toast',\n kind: 'number',\n description: 'Notifications. Above everything, so they are never hidden by a dialog.',\n },\n]\n\n/**\n * The accent axis.\n *\n * adea's accent presets, as a selection rather than a constant. `theme` is the\n * default and means \"the variant's own primary\" — monochrome in adea's palette —\n * and each named preset overrides the interactive roles through the\n * `[data-accent]` blocks in `theme.css`.\n *\n * These are the same six presets `accentPresets` exports in adea's own\n * `appearance.ts`, and the values match. A consumer's appearance picker and the\n * workshop's theme toolbar read this one list, so the two cannot disagree about\n * what a preset is called or what colour it is.\n */\nexport type AccentPreset = {\n /** The `data-accent` value. `theme` is the variant's own primary. */\n id: string\n label: string\n /** What the preset is for, in the gallery and in a picker. */\n description: string\n /** The accent as it appears in the light theme. Absent for `theme`. */\n light?: string\n /** The accent as it appears in the dark theme. Absent for `theme`. */\n dark?: string\n}\n\nexport const accentPresets: readonly AccentPreset[] = Object.freeze([\n {\n id: 'theme',\n label: 'Theme',\n description:\n \"The variant's own primary. Neutral in adea's palette, so the interface stays monochrome.\",\n },\n ...ACCENTS,\n])\n\n/**\n * The font axis.\n *\n * The family is a selection, like the accent: `data-font` sits on the same element\n * and each option swaps the interface face. `space-grotesk` is the default because\n * it is the face the visual language was drawn against, and `system` is a\n * first-class option rather than a fallback — an application that wants the\n * platform's own face should be able to say so without losing the rest of the\n * system.\n */\nexport type FontOption = {\n /** The `data-font` value. `space-grotesk` is the default and needs no attribute. */\n id: string\n label: string\n description: string\n /** Which of the two stacks this option sets. */\n stack: 'sans' | 'mono' | 'both'\n}\n\nexport const fontOptions: readonly FontOption[] = Object.freeze([\n {\n id: 'space-grotesk',\n label: 'Space Grotesk',\n description: 'The default, and the face the visual language was drawn against.',\n stack: 'both',\n },\n {\n id: 'system',\n label: 'System',\n description: \"The platform's own face. What a terminal or editor usually wants.\",\n stack: 'both',\n },\n {\n id: 'geist',\n label: 'Geist',\n description: 'The face cortana already ships. Neutral and wide.',\n stack: 'both',\n },\n {\n id: 'geist-mono',\n label: 'Geist Mono',\n description: 'Monospace throughout, for someone who wants a uniform texture.',\n stack: 'both',\n },\n {\n id: 'jetbrains-mono',\n label: 'JetBrains Mono',\n description: 'Monospace throughout, with coding ligatures off.',\n stack: 'both',\n },\n])\n\n/** Every token, in gallery order. */\nexport const designTokens = {\n color: colorTokens,\n radius: radiusTokens,\n typography: typographyTokens,\n density: densityTokens,\n elevation: elevationTokens,\n motion: motionTokens,\n zIndex: zIndexTokens,\n} as const\n\n/** Flat list, for completeness checks and for search. */\nexport const allTokens: TokenDefinition[] = Object.values(designTokens).flat()\n\n/**\n * Aliases that exist only to make a call site read better, and which therefore\n * have no gallery row of their own. Kept explicit so the completeness check\n * below can tell \"deliberately absent\" from \"forgotten\".\n */\nexport const undocumentedTokenAliases: string[] = ['radius']\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"tokens.js","names":[],"sources":["../../src/lib/tokens.ts"],"sourcesContent":["/**\n * The design system's token manifest.\n *\n * `theme.css` is the source of truth for token *values*. This file is the\n * source of truth for token *names and meaning* — what each one is for, and\n * which ones a theme may vary.\n *\n * It exists because a manifest that is only documentation rots. Two things read\n * it instead:\n *\n * - the token galleries in Storybook, so the review surface shows every token\n * rather than the ones an author remembered;\n * - `tests/tokens.test.ts`, which parses `theme.css` and fails when a token\n * is declared in one place and missing from the other.\n *\n * That pairing is what makes \"every token is documented and every documented\n * token exists\" a property the build enforces rather than a promise.\n */\n\nimport { ACCENTS } from '@adea-ai/themes'\n\nexport type TokenKind =\n | 'color'\n | 'dimension'\n | 'font-family'\n | 'number'\n | 'duration'\n | 'easing'\n | 'shadow'\n | 'text'\n\nexport type TokenDefinition = {\n /** The custom property name, without the leading `--`. */\n name: string\n kind: TokenKind\n /** One line: what this token is for. Shown in the gallery. */\n description: string\n /** True when the light and dark themes give it different values. */\n themed?: boolean\n}\n\n/**\n * Colour roles, in the order they appear in a page: surfaces first, then text,\n * then the lines between them, then the semantic fills. The order is the\n * documentation — reading the gallery top to bottom walks the surface ladder.\n */\nexport const colorTokens: TokenDefinition[] = [\n // Surfaces\n {\n name: 'background',\n kind: 'color',\n themed: true,\n description: 'The canvas every panel sits on.',\n },\n {\n name: 'foreground',\n kind: 'color',\n themed: true,\n description: 'Default body text on the canvas.',\n },\n {\n name: 'card',\n kind: 'color',\n themed: true,\n description: 'A panel or card raised one rung above the canvas.',\n },\n { name: 'card-foreground', kind: 'color', themed: true, description: 'Text on `card`.' },\n {\n name: 'popover',\n kind: 'color',\n themed: true,\n description: 'A floating surface: dialog, menu, popover, tooltip-free.',\n },\n { name: 'popover-foreground', kind: 'color', themed: true, description: 'Text on `popover`.' },\n {\n name: 'surface',\n kind: 'color',\n themed: true,\n description: 'Alias of `background`, for code that means \"a surface\" not \"the page\".',\n },\n {\n name: 'surface-sunken',\n kind: 'color',\n themed: true,\n description: 'A well: code blocks, inset lists, empty states.',\n },\n {\n name: 'surface-raised',\n kind: 'color',\n themed: true,\n description: 'Alias of `card`, for panels that sit on the canvas.',\n },\n {\n name: 'surface-overlay',\n kind: 'color',\n themed: true,\n description: 'Alias of `popover`, for floating layers.',\n },\n {\n name: 'surface-hover',\n kind: 'color',\n themed: true,\n description: 'The hover fill shared by rows, menu items and ghost controls.',\n },\n {\n name: 'surface-active',\n kind: 'color',\n themed: true,\n description: 'The pressed/selected fill, one rung past hover.',\n },\n {\n name: 'chrome',\n kind: 'color',\n themed: true,\n description: 'Window chrome: the top bar and its frosted fill.',\n },\n {\n name: 'chrome-alpha',\n kind: 'number',\n themed: true,\n description: 'Opacity of the chrome fill behind a blur.',\n },\n\n // The brand action\n {\n name: 'primary',\n kind: 'color',\n themed: true,\n description: 'The Adea emerald. The one primary action in a view.',\n },\n {\n name: 'primary-foreground',\n kind: 'color',\n themed: true,\n description: 'Label on `primary`. Black in dark, white in light — the accent flips polarity.',\n },\n {\n name: 'primary-hover',\n kind: 'color',\n themed: true,\n description: 'Hover rung for a primary action.',\n },\n {\n name: 'primary-subtle',\n kind: 'color',\n themed: true,\n description: 'Tinted primary fill: selected rows, focus rings, subtle buttons.',\n },\n\n {\n name: 'secondary',\n kind: 'color',\n themed: true,\n description: 'A quieter filled surface for a secondary action.',\n },\n {\n name: 'secondary-foreground',\n kind: 'color',\n themed: true,\n description: 'Label on `secondary`.',\n },\n {\n name: 'muted',\n kind: 'color',\n themed: true,\n description: 'A neutral fill: skeletons, inert chips, table footers.',\n },\n {\n name: 'muted-foreground',\n kind: 'color',\n themed: true,\n description: 'De-emphasised text. Measured to clear 4.5:1 on both `background` and `card`.',\n },\n {\n name: 'accent',\n kind: 'color',\n themed: true,\n description: \"shadcn's hover-surface accent. Not the brand colour — that is `primary`.\",\n },\n { name: 'accent-foreground', kind: 'color', themed: true, description: 'Text on `accent`.' },\n\n // Status\n {\n name: 'destructive',\n kind: 'color',\n themed: true,\n description: 'The canonical error hue for semantic status indicators and tinted notices.',\n },\n {\n name: 'destructive-foreground',\n kind: 'color',\n themed: true,\n description:\n 'Text on the canonical error hue; solid actions use `destructive-action-foreground`.',\n },\n {\n name: 'destructive-subtle',\n kind: 'color',\n themed: true,\n description: 'Opaque destructive tint against the canvas; subtle labels use foreground.',\n },\n {\n name: 'destructive-action',\n kind: 'color',\n themed: true,\n description: 'Contrast-safe solid fill for destructive actions, derived from the error role.',\n },\n {\n name: 'destructive-action-foreground',\n kind: 'color',\n themed: true,\n description: 'Text on the destructive action fill and its 90% hover composition.',\n },\n { name: 'success', kind: 'color', themed: true, description: 'A completed or healthy state.' },\n { name: 'success-foreground', kind: 'color', themed: true, description: 'Label on `success`.' },\n {\n name: 'success-subtle',\n kind: 'color',\n themed: true,\n description: 'Opaque success tint against the canvas; subtle labels use foreground.',\n },\n {\n name: 'warning',\n kind: 'color',\n themed: true,\n description: 'Something needs attention but is not broken.',\n },\n { name: 'warning-foreground', kind: 'color', themed: true, description: 'Label on `warning`.' },\n {\n name: 'warning-subtle',\n kind: 'color',\n themed: true,\n description: 'Opaque warning tint against the canvas; subtle labels use foreground.',\n },\n { name: 'info', kind: 'color', themed: true, description: 'Neutral information.' },\n { name: 'info-foreground', kind: 'color', themed: true, description: 'Label on `info`.' },\n {\n name: 'info-subtle',\n kind: 'color',\n themed: true,\n description: 'Opaque info tint against the canvas; subtle labels use foreground.',\n },\n\n // Lines\n {\n name: 'border',\n kind: 'color',\n themed: true,\n description: 'Every hairline: panel edges, dividers, card outlines.',\n },\n {\n name: 'input',\n kind: 'color',\n themed: true,\n description:\n 'The edge of an editable control. A rung stronger than `border` so a field is findable.',\n },\n {\n name: 'ring',\n kind: 'color',\n themed: true,\n description: 'The focus ring. Always paired with `primary-subtle` as its glow.',\n },\n\n // Theme-invariant glass\n {\n name: 'scrim',\n kind: 'color',\n description: 'Dark glass for overlays and on-screen controls. Same in both themes.',\n },\n { name: 'scrim-foreground', kind: 'color', description: 'Text drawn on `scrim`.' },\n { name: 'scrim-edge', kind: 'color', description: 'The hairline drawn on `scrim`.' },\n\n // Diff and code\n { name: 'diff-add', kind: 'color', themed: true, description: 'Background of an added line.' },\n {\n name: 'diff-add-foreground',\n kind: 'color',\n themed: true,\n description: 'Text of an added line.',\n },\n {\n name: 'diff-delete',\n kind: 'color',\n themed: true,\n description: 'Background of a removed line.',\n },\n {\n name: 'diff-delete-foreground',\n kind: 'color',\n themed: true,\n description: 'Text of a removed line.',\n },\n { name: 'diff-hunk', kind: 'color', themed: true, description: 'Background of a hunk header.' },\n {\n name: 'diff-hunk-foreground',\n kind: 'color',\n themed: true,\n description: 'Text of a hunk header.',\n },\n {\n name: 'diff-meta-foreground',\n kind: 'color',\n themed: true,\n description: 'File headers and line numbers in a diff.',\n },\n\n // Charts\n {\n name: 'chart-1',\n kind: 'color',\n themed: true,\n description: 'Categorical series 1. The set is closed at six.',\n },\n { name: 'chart-2', kind: 'color', themed: true, description: 'Categorical series 2.' },\n { name: 'chart-3', kind: 'color', themed: true, description: 'Categorical series 3.' },\n { name: 'chart-4', kind: 'color', themed: true, description: 'Categorical series 4.' },\n { name: 'chart-5', kind: 'color', themed: true, description: 'Categorical series 5.' },\n { name: 'chart-6', kind: 'color', themed: true, description: 'Categorical series 6.' },\n\n // Sidebar (the shadcn contract, kept whole)\n {\n name: 'sidebar',\n kind: 'color',\n themed: true,\n description: 'The rail and sidebar surface, tinted against the canvas.',\n },\n {\n name: 'sidebar-foreground',\n kind: 'color',\n themed: true,\n description: 'Default text in the rail and sidebar.',\n },\n {\n name: 'sidebar-primary',\n kind: 'color',\n themed: true,\n description: 'The active destination in the rail.',\n },\n {\n name: 'sidebar-primary-foreground',\n kind: 'color',\n themed: true,\n description: 'Text on the active rail destination.',\n },\n {\n name: 'sidebar-accent',\n kind: 'color',\n themed: true,\n description: 'Hover and selected fill for rail and sidebar rows.',\n },\n {\n name: 'sidebar-accent-foreground',\n kind: 'color',\n themed: true,\n description: 'Text on `sidebar-accent`.',\n },\n {\n name: 'sidebar-border',\n kind: 'color',\n themed: true,\n description: 'The rule between the rail and the canvas.',\n },\n { name: 'sidebar-ring', kind: 'color', themed: true, description: 'Focus ring inside the rail.' },\n {\n name: 'sidebar-muted-foreground',\n kind: 'color',\n themed: true,\n description: 'Rail labels that are not the current destination.',\n },\n]\n\nexport const radiusTokens: TokenDefinition[] = [\n {\n name: 'radius-lg',\n kind: 'dimension',\n description:\n '10px — cards and panels. Also the knob: move this one value to re-round the whole system.',\n },\n { name: 'radius-sm', kind: 'dimension', description: '6px — badges, keyboard keys, menu items.' },\n {\n name: 'radius-md',\n kind: 'dimension',\n description: '8px — every control: buttons, inputs, selects.',\n },\n { name: 'radius-xl', kind: 'dimension', description: '14px — dialogs, menus, sheets.' },\n { name: 'radius-2xl', kind: 'dimension', description: '18px — full-window surfaces and media.' },\n]\n\nexport const typographyTokens: TokenDefinition[] = [\n {\n name: 'font-sans',\n kind: 'font-family',\n description: 'The selected interface face. Space Grotesk unless the font axis says otherwise.',\n },\n {\n name: 'font-mono',\n kind: 'font-family',\n description: 'The selected monospace face. Code, terminals, ids, paths.',\n },\n {\n name: 'font-family-space-grotesk',\n kind: 'font-family',\n description: 'The interface default, and the face the visual language was drawn against.',\n },\n {\n name: 'font-family-jetbrains-mono',\n kind: 'font-family',\n description: 'The monospace default. Code, terminals, diffs.',\n },\n {\n name: 'font-family-geist',\n kind: 'font-family',\n description: 'An alternative interface face. cortana already ships it.',\n },\n {\n name: 'font-family-geist-mono',\n kind: 'font-family',\n description: 'The monospace counterpart to Geist.',\n },\n {\n name: 'font-family-system',\n kind: 'font-family',\n description: \"The platform's own interface face. First-class, not a fallback.\",\n },\n {\n name: 'font-family-system-mono',\n kind: 'font-family',\n description: \"The platform's own monospace face.\",\n },\n {\n name: 'ui-tracking',\n kind: 'text',\n description:\n 'Letter spacing for measured chrome. `normal` on a proportional face, tightened when the UI font is monospace — which is roughly 20% wider at the same size.',\n },\n {\n name: 'ui-word-spacing',\n kind: 'text',\n description:\n \"Word spacing for measured chrome. Mono's space is a full advance-width cell, so a two-word label reads as two floating words without this.\",\n },\n {\n name: 'text-2xs',\n kind: 'text',\n description: '11px — the smallest label the system permits: kbd keys, status bar.',\n },\n { name: 'text-xs', kind: 'text', description: '12px — metadata, badges, secondary rows.' },\n {\n name: 'text-sm',\n kind: 'text',\n description: '14px — the interface default. Body copy, labels, controls.',\n },\n { name: 'text-base', kind: 'text', description: '16px — card titles and dialog titles.' },\n { name: 'text-lg', kind: 'text', description: '18px — a section heading inside a page.' },\n { name: 'text-xl', kind: 'text', description: '20px — a page title.' },\n { name: 'text-2xl', kind: 'text', description: '24px — a display figure.' },\n {\n name: 'text-3xl',\n kind: 'text',\n description: '30px — the largest size in the system. Reserved for an empty-state headline.',\n },\n]\n\n/** Height tokens also size both axes of icon controls through Tailwind's --size\n * namespace. Padding has its own --spacing mapping. Nominal pixel descriptions\n * use a 16px rem; rendered dimensions follow the consumer's root font size. */\nexport const densityTokens: TokenDefinition[] = [\n { name: 'control-height-2xs', kind: 'dimension', description: '20px — an inline chip control.' },\n { name: 'control-height-xs', kind: 'dimension', description: '24px — a dense table row action.' },\n { name: 'control-height-sm', kind: 'dimension', description: '28px — the toolbar default.' },\n {\n name: 'control-height-md',\n kind: 'dimension',\n description: '32px — the form default. Button and Input are this size unless told otherwise.',\n },\n { name: 'control-height-lg', kind: 'dimension', description: '36px — a primary form action.' },\n {\n name: 'control-height-xl',\n kind: 'dimension',\n description: '40px — a hero control in an empty state.',\n },\n {\n name: 'control-height-2xl',\n kind: 'dimension',\n description: '48px — a stable touch target, unchanged by compact density.',\n },\n {\n name: 'control-padding-2xs',\n kind: 'dimension',\n description: 'Inline padding that pairs with the 20px control.',\n },\n {\n name: 'control-padding-xs',\n kind: 'dimension',\n description: 'Inline padding that pairs with the 24px control.',\n },\n {\n name: 'control-padding-sm',\n kind: 'dimension',\n description: 'Inline padding that pairs with the 28px control.',\n },\n {\n name: 'control-padding-md',\n kind: 'dimension',\n description: 'Inline padding that pairs with the 32px control.',\n },\n {\n name: 'control-padding-lg',\n kind: 'dimension',\n description: 'Inline padding that pairs with the 36px control.',\n },\n {\n name: 'control-padding-xl',\n kind: 'dimension',\n description: 'Inline padding that pairs with the 40px control.',\n },\n {\n name: 'control-padding-2xl',\n kind: 'dimension',\n description: 'Inline padding that pairs with the stable 48px touch target.',\n },\n { name: 'row-height-sm', kind: 'dimension', description: '28px — a dense list row.' },\n { name: 'row-height-md', kind: 'dimension', description: '32px — the default list row.' },\n { name: 'row-height-lg', kind: 'dimension', description: '36px — a two-line list row.' },\n { name: 'rail-width', kind: 'dimension', description: '56px — the icon-only rail.' },\n { name: 'rail-width-expanded', kind: 'dimension', description: '236px — the labelled rail.' },\n {\n name: 'rail-item-height',\n kind: 'dimension',\n description: '36px — a rail or sidebar destination.',\n },\n {\n name: 'sidebar-width',\n kind: 'dimension',\n description: '256px — the secondary navigation column.',\n },\n {\n name: 'sidebar-width-compact',\n kind: 'dimension',\n description: '48px — the collapsed secondary column.',\n },\n { name: 'topbar-height', kind: 'dimension', description: '48px — the window title row.' },\n { name: 'statusbar-height', kind: 'dimension', description: '28px — the bottom readout strip.' },\n {\n name: 'tooltip-max-width',\n kind: 'dimension',\n description:\n 'The lesser of the 16rem readable measure and one viewport minus a gutter — a tip wraps before it can push its document wider than itself.',\n },\n]\n\nexport const elevationTokens: TokenDefinition[] = [\n {\n name: 'shadow-2xs',\n kind: 'shadow',\n themed: true,\n description: 'Barely there: a chip resting on a card.',\n },\n {\n name: 'shadow-xs',\n kind: 'shadow',\n themed: true,\n description: 'A card or panel on the canvas.',\n },\n {\n name: 'shadow-sm',\n kind: 'shadow',\n themed: true,\n description: 'A control that lifts: a pressed toggle, a thumb.',\n },\n { name: 'shadow-md', kind: 'shadow', themed: true, description: 'A menu or popover.' },\n { name: 'shadow-lg', kind: 'shadow', themed: true, description: 'A dialog or sheet.' },\n {\n name: 'shadow-xl',\n kind: 'shadow',\n themed: true,\n description: 'The command palette, above everything.',\n },\n]\n\nexport const motionTokens: TokenDefinition[] = [\n {\n name: 'duration-fast',\n kind: 'duration',\n description: '120ms — a state change the user is already watching.',\n },\n { name: 'duration-normal', kind: 'duration', description: '200ms — an entrance.' },\n { name: 'duration-slow', kind: 'duration', description: '320ms — a layout settle.' },\n {\n name: 'ease-out',\n kind: 'easing',\n description: 'A fast start and a long settle. Reads as decisive rather than floaty.',\n },\n {\n name: 'ease-in-out',\n kind: 'easing',\n description: 'For a loop that has no start or end, such as a shimmer.',\n },\n]\n\nexport const zIndexTokens: TokenDefinition[] = [\n { name: 'z-base', kind: 'number', description: 'In flow, at the document order.' },\n {\n name: 'z-docked',\n kind: 'number',\n description: 'A sticky table header standing above its own scroll body.',\n },\n { name: 'z-sticky', kind: 'number', description: 'The top bar and any other pinned chrome.' },\n { name: 'z-drawer', kind: 'number', description: 'A drawer, below a modal dialog.' },\n { name: 'z-dialog', kind: 'number', description: 'A modal dialog and its scrim.' },\n {\n name: 'z-menu',\n kind: 'number',\n description: 'Menus, popovers and comboboxes. Above dialogs, because a dialog can contain one.',\n },\n {\n name: 'z-tooltip',\n kind: 'number',\n description: 'Tooltips. Above menus, because a menu item can carry one.',\n },\n {\n name: 'z-toast',\n kind: 'number',\n description: 'Notifications. Above everything, so they are never hidden by a dialog.',\n },\n]\n\n/**\n * The accent axis.\n *\n * adea's accent presets, as a selection rather than a constant. `theme` is the\n * default and means \"the variant's own primary\" — monochrome in adea's palette —\n * and each named preset overrides the interactive roles through the\n * `[data-accent]` blocks in `theme.css`.\n *\n * These are the same six presets `accentPresets` exports in adea's own\n * `appearance.ts`, and the values match. A consumer's appearance picker and the\n * workshop's theme toolbar read this one list, so the two cannot disagree about\n * what a preset is called or what colour it is.\n */\nexport type AccentPreset = {\n /** The `data-accent` value. `theme` is the variant's own primary. */\n id: string\n label: string\n /** What the preset is for, in the gallery and in a picker. */\n description: string\n /** The accent as it appears in the light theme. Absent for `theme`. */\n light?: string\n /** The accent as it appears in the dark theme. Absent for `theme`. */\n dark?: string\n}\n\nexport const accentPresets: readonly AccentPreset[] = Object.freeze([\n {\n id: 'theme',\n label: 'Theme',\n description:\n \"The variant's own primary. Neutral in adea's palette, so the interface stays monochrome.\",\n },\n ...ACCENTS,\n])\n\n/**\n * The font axis.\n *\n * The family is a selection, like the accent: `data-font` sits on the same element\n * and each option swaps the interface face. `space-grotesk` is the default because\n * it is the face the visual language was drawn against, and `system` is a\n * first-class option rather than a fallback — an application that wants the\n * platform's own face should be able to say so without losing the rest of the\n * system.\n */\nexport type FontOption = {\n /** The `data-font` value. `space-grotesk` is the default and needs no attribute. */\n id: string\n label: string\n description: string\n /** Which of the two stacks this option sets. */\n stack: 'sans' | 'mono' | 'both'\n}\n\nexport const fontOptions: readonly FontOption[] = Object.freeze([\n {\n id: 'space-grotesk',\n label: 'Space Grotesk',\n description: 'The default, and the face the visual language was drawn against.',\n stack: 'both',\n },\n {\n id: 'system',\n label: 'System',\n description: \"The platform's own face. What a terminal or editor usually wants.\",\n stack: 'both',\n },\n {\n id: 'geist',\n label: 'Geist',\n description: 'The face cortana already ships. Neutral and wide.',\n stack: 'both',\n },\n {\n id: 'geist-mono',\n label: 'Geist Mono',\n description: 'Monospace throughout, for someone who wants a uniform texture.',\n stack: 'both',\n },\n {\n id: 'jetbrains-mono',\n label: 'JetBrains Mono',\n description: 'Monospace throughout, with coding ligatures off.',\n stack: 'both',\n },\n])\n\n/** Every token, in gallery order. */\nexport const designTokens = {\n color: colorTokens,\n radius: radiusTokens,\n typography: typographyTokens,\n density: densityTokens,\n elevation: elevationTokens,\n motion: motionTokens,\n zIndex: zIndexTokens,\n} as const\n\n/** Flat list, for completeness checks and for search. */\nexport const allTokens: TokenDefinition[] = Object.values(designTokens).flat()\n\n/**\n * Aliases that exist only to make a call site read better, and which therefore\n * have no gallery row of their own. Kept explicit so the completeness check\n * below can tell \"deliberately absent\" from \"forgotten\".\n */\nexport const undocumentedTokenAliases: string[] = ['radius']\n"],"mappings":"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"}
|
|
@@ -27,6 +27,7 @@ import { Tooltip, TooltipContent, TooltipTrigger } from '../../ui/tooltip'
|
|
|
27
27
|
export type ActionButtonProps<T extends ValidComponent = 'button'> = ButtonProps<T> & {
|
|
28
28
|
/** A short explanation, also shown on keyboard focus. The Button still needs its own name. */
|
|
29
29
|
tooltip?: string
|
|
30
|
+
/** Placement of the explanation; icon actions live in bars, so it defaults below the control. */
|
|
30
31
|
tooltipSide?: 'top' | 'right' | 'bottom' | 'left'
|
|
31
32
|
/** Disables the action and announces the busy label through a polite status region. */
|
|
32
33
|
busy?: boolean
|
|
@@ -173,7 +174,7 @@ export function ActionButton<T extends ValidComponent = 'button'>(props: ActionB
|
|
|
173
174
|
>
|
|
174
175
|
{contents()}
|
|
175
176
|
</TooltipTrigger>
|
|
176
|
-
<TooltipContent side={local.tooltipSide}>{local.tooltip}</TooltipContent>
|
|
177
|
+
<TooltipContent side={local.tooltipSide ?? 'bottom'}>{local.tooltip}</TooltipContent>
|
|
177
178
|
</Tooltip>
|
|
178
179
|
</Show>
|
|
179
180
|
<Show when={busy()}>
|
|
@@ -2,6 +2,7 @@ import { Polymorphic, type PolymorphicProps } from '@kobalte/core/polymorphic'
|
|
|
2
2
|
import type { ComponentProps, JSX, ValidComponent } from 'solid-js'
|
|
3
3
|
import { Show, createMemo, createSignal, splitProps } from 'solid-js'
|
|
4
4
|
import { Portal } from 'solid-js/web'
|
|
5
|
+
import { tooltipTip } from '../../../lib/overlay'
|
|
5
6
|
import { cn } from '../../../lib/utils'
|
|
6
7
|
import { SideRailContext, createSideRailValue } from './side-rail-context'
|
|
7
8
|
|
|
@@ -305,8 +306,8 @@ export function SideRailItem<T extends ValidComponent = 'a'>(props: SideRailItem
|
|
|
305
306
|
aria-hidden="true"
|
|
306
307
|
data-slot="side-rail-tip"
|
|
307
308
|
class={cn(
|
|
308
|
-
|
|
309
|
-
'flex items-center gap-2.5
|
|
309
|
+
tooltipTip,
|
|
310
|
+
'pointer-events-none fixed z-(--z-tooltip) flex items-center gap-2.5 ps-3 pe-3 whitespace-nowrap'
|
|
310
311
|
)}
|
|
311
312
|
style={{
|
|
312
313
|
top: `${position().top}px`,
|
|
@@ -398,7 +399,10 @@ export function SideRailButton(
|
|
|
398
399
|
<div
|
|
399
400
|
aria-hidden="true"
|
|
400
401
|
data-slot="side-rail-tip"
|
|
401
|
-
class=
|
|
402
|
+
class={cn(
|
|
403
|
+
tooltipTip,
|
|
404
|
+
'pointer-events-none fixed z-(--z-tooltip) flex items-center gap-2.5 ps-3 pe-3 whitespace-nowrap'
|
|
405
|
+
)}
|
|
402
406
|
style={{
|
|
403
407
|
top: `${position().top}px`,
|
|
404
408
|
left: `${position().left}px`,
|
|
@@ -125,6 +125,13 @@ export type TopBarSearchProps = ComponentProps<'button'> & {
|
|
|
125
125
|
placeholder?: string
|
|
126
126
|
/** The shortcut chip drawn at the trailing edge, e.g. "⌘K". */
|
|
127
127
|
shortcut?: string
|
|
128
|
+
/**
|
|
129
|
+
* The parseable chord behind `shortcut`, e.g. `Meta+K`. The chip is
|
|
130
|
+
* `aria-hidden` — reading it out would pollute the button's accessible
|
|
131
|
+
* name — so this is what assistive technology announces instead. Supply it
|
|
132
|
+
* whenever `shortcut` is drawn.
|
|
133
|
+
*/
|
|
134
|
+
keyshortcuts?: string
|
|
128
135
|
}
|
|
129
136
|
|
|
130
137
|
/**
|
|
@@ -137,7 +144,7 @@ export type TopBarSearchProps = ComponentProps<'button'> & {
|
|
|
137
144
|
* like from the user's side.
|
|
138
145
|
*/
|
|
139
146
|
export function TopBarSearch(props: TopBarSearchProps) {
|
|
140
|
-
const [local, rest] = splitProps(props, ['class', 'placeholder', 'shortcut'])
|
|
147
|
+
const [local, rest] = splitProps(props, ['class', 'placeholder', 'shortcut', 'keyshortcuts'])
|
|
141
148
|
|
|
142
149
|
return (
|
|
143
150
|
<button
|
|
@@ -151,12 +158,16 @@ export function TopBarSearch(props: TopBarSearchProps) {
|
|
|
151
158
|
'window-no-drag',
|
|
152
159
|
local.class
|
|
153
160
|
)}
|
|
161
|
+
aria-keyshortcuts={local.keyshortcuts}
|
|
154
162
|
{...rest}
|
|
155
163
|
>
|
|
156
164
|
<Search aria-hidden="true" class="size-4 shrink-0 sm:hidden" />
|
|
157
165
|
<span class="sr-only sm:not-sr-only sm:truncate">{local.placeholder ?? 'Search'}</span>
|
|
158
166
|
<Show when={local.shortcut}>
|
|
159
|
-
<kbd
|
|
167
|
+
<kbd
|
|
168
|
+
aria-hidden="true"
|
|
169
|
+
class="bg-muted ms-auto hidden h-5 shrink-0 items-center rounded-sm border border-border px-1.5 font-mono text-2xs sm:flex"
|
|
170
|
+
>
|
|
160
171
|
{local.shortcut}
|
|
161
172
|
</kbd>
|
|
162
173
|
</Show>
|
|
@@ -20,8 +20,6 @@ export function Kbd(props: ComponentProps<'kbd'>) {
|
|
|
20
20
|
data-slot="kbd"
|
|
21
21
|
class={cn(
|
|
22
22
|
'bg-muted text-muted-foreground pointer-events-none inline-flex h-5 min-w-5 items-center justify-center gap-1 rounded-sm border border-border px-1 font-mono text-2xs font-medium select-none',
|
|
23
|
-
/* Inside a hover/selected row the key needs to recede with the row. */
|
|
24
|
-
'in-data-[slot=br-tooltip-content]:bg-background/20 in-data-[slot=br-tooltip-content]:text-scrim-foreground in-data-[slot=br-tooltip-content]:border-transparent',
|
|
25
23
|
local.class
|
|
26
24
|
)}
|
|
27
25
|
{...rest}
|
|
@@ -99,9 +99,7 @@ export function StatusChip(props: StatusChipProps) {
|
|
|
99
99
|
<TooltipTrigger as="span" class="inline-flex">
|
|
100
100
|
{chip}
|
|
101
101
|
</TooltipTrigger>
|
|
102
|
-
<TooltipContent data-slot="tooltip-content"
|
|
103
|
-
{detail()}
|
|
104
|
-
</TooltipContent>
|
|
102
|
+
<TooltipContent data-slot="tooltip-content">{detail()}</TooltipContent>
|
|
105
103
|
</Tooltip>
|
|
106
104
|
)}
|
|
107
105
|
</Show>
|
|
@@ -10,6 +10,7 @@ import {
|
|
|
10
10
|
useContext,
|
|
11
11
|
} from 'solid-js'
|
|
12
12
|
import { isServer } from 'solid-js/web'
|
|
13
|
+
import { tooltipTip } from '../../../lib/overlay'
|
|
13
14
|
import { cn } from '../../../lib/utils'
|
|
14
15
|
|
|
15
16
|
/**
|
|
@@ -348,16 +349,12 @@ export function TooltipTrigger(props: ComponentProps<typeof KobalteTooltip.Trigg
|
|
|
348
349
|
)
|
|
349
350
|
}
|
|
350
351
|
|
|
351
|
-
export type TooltipContentProps = ComponentProps<typeof KobalteTooltip.Content>
|
|
352
|
-
/** Hide the caret pointing at the trigger. */
|
|
353
|
-
hideArrow?: boolean
|
|
354
|
-
}
|
|
352
|
+
export type TooltipContentProps = ComponentProps<typeof KobalteTooltip.Content>
|
|
355
353
|
|
|
356
354
|
export function TooltipContent(props: TooltipContentProps) {
|
|
357
355
|
const interaction = useContext(TooltipInteractionContext)
|
|
358
356
|
const [local, rest] = splitProps(props, [
|
|
359
357
|
'class',
|
|
360
|
-
'hideArrow',
|
|
361
358
|
'children',
|
|
362
359
|
'aria-hidden',
|
|
363
360
|
'onEscapeKeyDown',
|
|
@@ -371,7 +368,11 @@ export function TooltipContent(props: TooltipContentProps) {
|
|
|
371
368
|
<KobalteTooltip.Portal>
|
|
372
369
|
<KobalteTooltip.Content
|
|
373
370
|
class={cn(
|
|
374
|
-
|
|
371
|
+
tooltipTip,
|
|
372
|
+
// The max width is a token, not a fixed measure: it has to fall
|
|
373
|
+
// behind the viewport at large root font sizes or the tip — which
|
|
374
|
+
// Kobalte can shift but never shrink — forces a horizontal scroll.
|
|
375
|
+
'z-(--z-tooltip) w-fit max-w-(--tooltip-max-width) px-2 py-1',
|
|
375
376
|
'origin-(--kb-tooltip-content-transform-origin) text-balance',
|
|
376
377
|
'data-expanded:animate-in data-expanded:fade-in-0 data-expanded:zoom-in-95',
|
|
377
378
|
'data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
|
|
@@ -390,7 +391,6 @@ export function TooltipContent(props: TooltipContentProps) {
|
|
|
390
391
|
{...rest}
|
|
391
392
|
>
|
|
392
393
|
{local.children}
|
|
393
|
-
{!local.hideArrow && <KobalteTooltip.Arrow aria-hidden="true" />}
|
|
394
394
|
</KobalteTooltip.Content>
|
|
395
395
|
</KobalteTooltip.Portal>
|
|
396
396
|
)
|
|
@@ -21,6 +21,15 @@ export const overlayPositioner = 'fixed inset-0 z-(--z-dialog) grid place-items-
|
|
|
21
21
|
export const overlayScrim =
|
|
22
22
|
'fixed inset-0 z-(--z-dialog) bg-scrim/50 supports-[backdrop-filter]:backdrop-blur-xs'
|
|
23
23
|
|
|
24
|
+
/**
|
|
25
|
+
* The tip: the card-toned bubble an explanation shows in. The side rail draws
|
|
26
|
+
* it flush to a collapsed row and every floating tooltip composes the same
|
|
27
|
+
* fill, edge, and type, so a control never explains itself in two visual
|
|
28
|
+
* languages.
|
|
29
|
+
*/
|
|
30
|
+
export const tooltipTip =
|
|
31
|
+
'bg-card text-card-foreground rounded-md border border-border text-sm font-medium shadow-lg'
|
|
32
|
+
|
|
24
33
|
/**
|
|
25
34
|
* Entrance and exit motion, expressed as data-state classes.
|
|
26
35
|
*
|
package/dist/r/src/lib/tokens.ts
CHANGED
|
@@ -542,6 +542,12 @@ export const densityTokens: TokenDefinition[] = [
|
|
|
542
542
|
},
|
|
543
543
|
{ name: 'topbar-height', kind: 'dimension', description: '48px — the window title row.' },
|
|
544
544
|
{ name: 'statusbar-height', kind: 'dimension', description: '28px — the bottom readout strip.' },
|
|
545
|
+
{
|
|
546
|
+
name: 'tooltip-max-width',
|
|
547
|
+
kind: 'dimension',
|
|
548
|
+
description:
|
|
549
|
+
'The lesser of the 16rem readable measure and one viewport minus a gutter — a tip wraps before it can push its document wider than itself.',
|
|
550
|
+
},
|
|
545
551
|
]
|
|
546
552
|
|
|
547
553
|
export const elevationTokens: TokenDefinition[] = [
|
|
@@ -614,6 +614,11 @@
|
|
|
614
614
|
--sidebar-width-compact: 3rem;
|
|
615
615
|
--topbar-height: 3rem;
|
|
616
616
|
--statusbar-height: 1.75rem;
|
|
617
|
+
/* A tip wraps before it can overflow the window carrying it: the 16rem
|
|
618
|
+
readable measure governs on a desktop, but the measure scales with the root
|
|
619
|
+
font while the window does not, so at a 200% zoom the viewport term wins and
|
|
620
|
+
a tooltip can never push its document wider than itself. */
|
|
621
|
+
--tooltip-max-width: min(16rem, calc(100vw - 1.5rem));
|
|
617
622
|
|
|
618
623
|
/* Shadows. Two parts on purpose: a tinted spread that reads as elevation, plus a
|
|
619
624
|
hairline that keeps an edge visible when the surface behind a panel is the
|
package/package.json
CHANGED
|
@@ -27,6 +27,7 @@ import { Tooltip, TooltipContent, TooltipTrigger } from '../../ui/tooltip'
|
|
|
27
27
|
export type ActionButtonProps<T extends ValidComponent = 'button'> = ButtonProps<T> & {
|
|
28
28
|
/** A short explanation, also shown on keyboard focus. The Button still needs its own name. */
|
|
29
29
|
tooltip?: string
|
|
30
|
+
/** Placement of the explanation; icon actions live in bars, so it defaults below the control. */
|
|
30
31
|
tooltipSide?: 'top' | 'right' | 'bottom' | 'left'
|
|
31
32
|
/** Disables the action and announces the busy label through a polite status region. */
|
|
32
33
|
busy?: boolean
|
|
@@ -173,7 +174,7 @@ export function ActionButton<T extends ValidComponent = 'button'>(props: ActionB
|
|
|
173
174
|
>
|
|
174
175
|
{contents()}
|
|
175
176
|
</TooltipTrigger>
|
|
176
|
-
<TooltipContent side={local.tooltipSide}>{local.tooltip}</TooltipContent>
|
|
177
|
+
<TooltipContent side={local.tooltipSide ?? 'bottom'}>{local.tooltip}</TooltipContent>
|
|
177
178
|
</Tooltip>
|
|
178
179
|
</Show>
|
|
179
180
|
<Show when={busy()}>
|