frappe-ui 1.0.0-beta.2 → 1.0.0-beta.21

package/src/components/Toast/ToastProvider.vue

@@ -9,18 +9,18 @@
       unstyled: true,
       classes: {
         toast:
-          'group py-2.5 flex items-center px-4 bg-surface-gray-6 rounded-md shadow-xl w-[360px] after:bg-transparent',
-        title: 'text-p-base font-medium text-ink-white',
-        description: 'text-p-base text-ink-white',
-        icon: 'mr-2 text-ink-white [&_svg]:size-4',
+          'group py-2.5 flex items-center px-4 bg-surface-gray-9 rounded-md shadow-xl w-[360px] after:bg-transparent',
+        title: 'text-p-base font-medium text-ink-base',
+        description: 'text-p-base text-ink-base',
+        icon: 'mr-2 text-ink-base [&_svg]:size-4',
         closeButton:
-          'order-1 ml-auto group-has-[[data-action]]:ml-0 grid place-items-center rounded-sm text-ink-white hover:bg-surface-gray-5 size-5 !transition-colors [&_svg]:size-4',
+          'order-1 ml-auto group-has-[[data-action]]:ml-0 grid place-items-center rounded-sm text-ink-base hover:bg-surface-gray-8 size-5 !transition-colors [&_svg]:size-4',
         actionButton:
-          'flex shrink-0 text-ink-blue-link font-medium py-1.5 px-2 h-7 text-base mr-2 ml-auto bg-transparent hover:bg-surface-gray-5 rounded !transition-colors',
+          'flex shrink-0 text-ink-blue-link font-medium py-1.5 px-2 h-7 text-base mr-2 ml-auto bg-transparent hover:bg-surface-gray-8 rounded !transition-colors',
         cancelButton:
-          'flex text-ink-blue-link font-medium py-1.5 px-2 text-base hover:bg-surface-gray-5 transition-colors',
-        error: '[&_[data-icon]]:text-ink-red-2',
-        warning: '[&_[data-icon]]:text-ink-amber-2',
+          'flex text-ink-blue-link font-medium py-1.5 px-2 text-base hover:bg-surface-gray-8 transition-colors',
+        error: '[&_[data-icon]]:text-ink-red-5',
+        warning: '[&_[data-icon]]:text-ink-amber-5',
       },
     }"
   />
@@ -40,6 +40,15 @@ import { Toaster } from 'vue-sonner'
   height: auto;
 }
 
+/* In the collapsed stack vue-sonner clamps every non-front toast to the front
+   toast's height (--front-toast-height) and hides their content. The content is
+   hidden only on [data-styled='true'] toasts, which `unstyled` strips — so a
+   multiline toast behind a single-line one spills its extra lines out the top.
+   Replicate sonner's intended behavior and fade the collapsed back toasts out. */
+[data-sonner-toast][data-expanded='false'][data-front='false'] > * {
+  opacity: 0;
+}
+
 .sonner-loading-wrapper {
   position: static;
 }

package/src/components/Toast/stories/CustomIcon.vue

@@ -11,7 +11,7 @@ function celebrate() {
 function favorited() {
   toast('Added to favorites', {
     description: 'Find it later in your saved items.',
-    icon: () => h('span', { class: 'lucide-heart size-4 text-ink-red-2' }),
+    icon: () => h('span', { class: 'lucide-heart size-4 text-ink-red-5' }),
   })
 }
 

package/src/components/Toast/toast.ts

@@ -1,9 +1,24 @@
+import DOMPurify from 'dompurify'
 import { h, isVNode, type Component, type VNode } from 'vue'
 import { toast as sonnerToast } from 'vue-sonner'
 import { warnDeprecated } from '../../utils/warnDeprecated'
 
 type ToastType = 'success' | 'error' | 'warning' | 'info'
 
+type SonnerData = Parameters<typeof sonnerToast>[1]
+
+// Tags that are safe to render inside a toast message. Anything outside this set is stripped by DOMPurify.
+const ALLOWED_TAGS = ['a', 'em', 'strong', 'i', 'b', 'u']
+
+// Sonner renders a string message as plain text and a VNode via
+// `<component :is>`. To render safe HTML we sanitize the string and return a
+// render function; non-string values (already VNodes/components) pass through.
+function renderSafeHTML<T>(message: T): T | (() => VNode) {
+  if (typeof message !== 'string') return message
+  const html = DOMPurify.sanitize(message, { ALLOWED_TAGS })
+  return () => h('span', { innerHTML: html })
+}
+
 interface LegacyCreateOptions {
   id?: string | number
   message: string
@@ -62,20 +77,21 @@ function isLegacyObject(arg: unknown): arg is LegacyToastObject {
 
 function dispatch(
   type: ToastType | undefined,
-  message: string,
-  data: Parameters<typeof sonnerToast>[1],
+  message: string | Component | VNode,
+  data: SonnerData,
 ) {
+  const safeMessage = renderSafeHTML(message)
   switch (type) {
     case 'success':
-      return sonnerToast.success(message, data)
+      return sonnerToast.success(safeMessage, data)
     case 'error':
-      return sonnerToast.error(message, data)
+      return sonnerToast.error(safeMessage, data)
     case 'warning':
-      return sonnerToast.warning(message, data)
+      return sonnerToast.warning(safeMessage, data)
     case 'info':
-      return sonnerToast.info(message, data)
+      return sonnerToast.info(safeMessage, data)
     default:
-      return sonnerToast(message, data)
+      return sonnerToast(safeMessage, data)
   }
 }
 
@@ -107,7 +123,7 @@ function toastFn(
   if (isLegacyObject(message)) {
     return callLegacyObject(message)
   }
-  return sonnerToast(message as string, options)
+  return sonnerToast(renderSafeHTML(message as string), options)
 }
 
 function create(options: LegacyCreateOptions) {
@@ -142,6 +158,14 @@ function removeAll() {
 }
 
 export const toast = Object.assign(toastFn, sonnerToast, {
+  success: (message: string | Component | VNode, data?: SonnerData) =>
+    dispatch('success', message, data),
+  error: (message: string | Component | VNode, data?: SonnerData) =>
+    dispatch('error', message, data),
+  warning: (message: string | Component | VNode, data?: SonnerData) =>
+    dispatch('warning', message, data),
+  info: (message: string | Component | VNode, data?: SonnerData) =>
+    dispatch('info', message, data),
   create,
   remove,
   removeAll,

package/src/components/Tooltip/Tooltip.api.md

@@ -14,7 +14,7 @@
   },
   {
     name: 'hoverDelay',
-    description: 'Delay (in ms) before showing the tooltip on hover.',
+    description: 'Delay (in seconds) before showing the tooltip on hover.',
     required: false,
     type: 'number',
     default: '0.5'
@@ -23,7 +23,7 @@
     name: 'placement',
     description: 'Position of the tooltip relative to the trigger.',
     required: false,
-    type: '"bottom" | "top" | "right" | "left"',
+    type: '"top" | "right" | "bottom" | "left"',
     default: '"top"'
   },
   {
@@ -31,7 +31,7 @@
     description: 'Custom classes applied to the tooltip arrow.',
     required: false,
     type: 'any',
-    default: '"fill-surface-gray-7"'
+    default: '"fill-surface-gray-10"'
   },
   {
     name: 'disabled',
@@ -65,7 +65,7 @@
     name: 'side',
     description: 'Preferred popover side relative to the trigger.',
     required: false,
-    type: '"bottom" | "top" | "right" | "left"',
+    type: '"top" | "right" | "bottom" | "left"',
     default: '"top"'
   },
   {
@@ -79,7 +79,7 @@
     description: 'Fill class for the arrow — defaults to match the bubble shell.',
     required: false,
     type: 'string',
-    default: '"fill-surface-gray-7"'
+    default: '"fill-surface-gray-10"'
   }
 ]
 
@@ -100,6 +100,38 @@
     type: 'any'
   }
 ]
+
+  const tooltipProviderProps = [
+  {
+    name: 'hoverDelay',
+    description: 'Delay (in seconds) before the first tooltip in the group opens.',
+    required: false,
+    type: 'number',
+    default: '0.5'
+  },
+  {
+    name: 'skipDelay',
+    description: 'Window (in seconds) during which moving to another trigger in this\ngroup opens its tooltip with no delay. Mirrors reka\'s\n`skipDelayDuration`.',
+    required: false,
+    type: 'number',
+    default: '0.3'
+  },
+  {
+    name: 'disableHoverableContent',
+    description: 'When `true`, hovering the tooltip body closes it as the pointer\nleaves the trigger.',
+    required: false,
+    type: 'boolean',
+    default: 'false'
+  }
+]
+
+  const tooltipProviderSlots = [
+  {
+    name: 'default',
+    description: '',
+    type: '{}'
+  }
+]
 </script>
 ## API Reference
 
@@ -115,3 +147,9 @@
 
 <SlotsTable :data="tooltipBubbleSlots"/> 
 
+### TooltipProvider
+
+<PropsTable folder="Tooltip" name="TooltipProvider" :data="tooltipProviderProps"/> 
+
+<SlotsTable :data="tooltipProviderSlots"/> 
+

package/src/components/Tooltip/Tooltip.cy.ts

@@ -1,4 +1,5 @@
 import Tooltip from './Tooltip.vue'
+import TooltipProvider from './TooltipProvider.vue'
 import Button from '../Button/Button.vue'
 import { h } from 'vue'
 
@@ -63,4 +64,51 @@ describe('Tooltip', () => {
     cy.get('button').trigger('focus')
     cy.get('svg').should('has.class', 'fill-red-500')
   })
+
+  it('grouping under a shared TooltipProvider skips the re-delay between triggers', () => {
+    // `disableHoverableContent` makes leaving the trigger close its tooltip,
+    // which opens the provider's skip-delay window — the toolbar use case.
+    const Group = () =>
+      h(
+        TooltipProvider,
+        { hoverDelay: 0.5, skipDelay: 0.3, disableHoverableContent: true },
+        () => [
+          h(Tooltip, { text: 'First' }, () =>
+            h('button', { 'data-cy': 'first' }, 'one'),
+          ),
+          h(Tooltip, { text: 'Second' }, () =>
+            h('button', { 'data-cy': 'second' }, 'two'),
+          ),
+        ],
+      )
+
+    cy.clock()
+    cy.mount(Group)
+
+    // First trigger incurs the full hover delay before opening.
+    cy.get('[data-cy=first]').trigger('pointermove')
+    cy.get('[role=tooltip]').should('not.exist')
+    cy.tick(500)
+    cy.get('[role=tooltip]').should('have.text', 'First')
+    cy.get('[data-cy=first]').should('have.attr', 'data-state', 'delayed-open')
+
+    // Leaving closes it and opens the skip-delay window.
+    cy.get('[data-cy=first]').trigger('pointerleave')
+
+    // Moving to the neighbour opens instantly — no clock tick needed.
+    cy.get('[data-cy=second]').trigger('pointermove')
+    cy.get('[role=tooltip]').should('have.text', 'Second')
+    cy.get('[data-cy=second]').should('have.attr', 'data-state', 'instant-open')
+  })
+
+  it('a standalone Tooltip still mounts its own provider (no grouping)', () => {
+    // Without a surrounding provider every tooltip delays independently.
+    cy.clock()
+    cy.mount(h(Tooltip, { text: 'solo', hoverDelay: 0.5 }, () => h('button', 'k')))
+
+    cy.get('button').trigger('pointermove')
+    cy.get('[role=tooltip]').should('not.exist')
+    cy.tick(500)
+    cy.get('button').should('have.attr', 'data-state', 'delayed-open')
+  })
 })

package/src/components/Tooltip/Tooltip.md

@@ -2,6 +2,10 @@
 
 A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
 
+## Playground
+
+<ClientOnly><TooltipBuilder /></ClientOnly>
+
 ## Default
 <ComponentPreview name="Tooltip-Examples" />
 
@@ -9,4 +13,10 @@ A popup that displays information related to an element when the element receive
 
 <ComponentPreview name="Tooltip-Slots" />
 
+## Grouping (shared hover delay)
+
+Wrap a group of buttons in a `TooltipProvider` so that once one tooltip is open, moving the pointer to a neighbouring trigger within `skip-delay` opens its tooltip instantly — no delay between adjacent buttons. `Tooltip` and tooltip-bearing `Button`s automatically reuse a surrounding provider instead of creating their own.
+
+<ComponentPreview name="Tooltip-Group" />
+
 <!-- @include: ./Tooltip.api.md -->

package/src/components/Tooltip/Tooltip.vue

@@ -1,7 +1,12 @@
 <script setup lang="ts">
-import { TooltipProvider, TooltipRoot, TooltipTrigger } from 'reka-ui'
+import {
+  TooltipProvider,
+  TooltipRoot,
+  TooltipTrigger,
+  injectTooltipProviderContext,
+} from 'reka-ui'
 import TooltipBubble from './TooltipBubble.vue'
-import { computed } from 'vue'
+import { computed, type Component } from 'vue'
 import type { TooltipProps } from './types'
 
 defineOptions({
@@ -12,12 +17,22 @@ const props = withDefaults(defineProps<TooltipProps>(), {
   text: '',
   placement: 'top',
   hoverDelay: 0.5,
-  arrowClass: 'fill-surface-gray-7',
+  arrowClass: 'fill-surface-gray-10',
   disabled: false,
 })
 
 const delayDuration = computed(() => props.hoverDelay * 1000)
 
+// When already inside a <TooltipProvider> (a button group), reuse that shared
+// context so the group's skip-delay spans this tooltip too, instead of
+// mounting a private provider that would isolate it.
+const parentProvider = injectTooltipProviderContext(null)
+const Passthrough: Component = (_, { slots }) => slots.default?.()
+const Provider = computed(() => (parentProvider ? Passthrough : TooltipProvider))
+const providerProps = computed(() =>
+  parentProvider ? {} : { delayDuration: delayDuration.value },
+)
+
 defineSlots<{
   /**
    * Default trigger slot.
@@ -42,7 +57,7 @@ defineSlots<{
 
 <template>
   <slot v-if="disabled" />
-  <TooltipProvider v-else :delayDuration="delayDuration">
+  <component :is="Provider" v-else v-bind="providerProps">
     <TooltipRoot>
       <TooltipTrigger as-child>
         <slot />
@@ -61,5 +76,5 @@ defineSlots<{
         </template>
       </TooltipBubble>
     </TooltipRoot>
-  </TooltipProvider>
+  </component>
 </template>

package/src/components/Tooltip/TooltipBubble.vue

@@ -21,7 +21,7 @@ withDefaults(
     /** Fill class for the arrow — defaults to match the bubble shell. */
     arrowClass?: string
   }>(),
-  { side: 'top', arrowClass: 'fill-surface-gray-7' },
+  { side: 'top', arrowClass: 'fill-surface-gray-10' },
 )
 
 defineSlots<{
@@ -39,7 +39,7 @@ defineSlots<{
     <TooltipContent :side="side" :side-offset="4" class="z-[100]">
       <slot name="body">
         <div
-          class="rounded bg-surface-gray-7 px-2 py-1 text-xs text-ink-white shadow-xl"
+          class="rounded bg-surface-gray-10 px-2 py-1 text-xs text-ink-base shadow-xl"
         >
           <slot name="content">
             <slot>{{ text }}</slot>

package/src/components/Tooltip/TooltipProvider.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { TooltipProvider as RekaTooltipProvider } from 'reka-ui'
+import { computed } from 'vue'
+
+/**
+ * Groups multiple `<Tooltip>`s (and tooltip-bearing `<Button>`s) under a
+ * single tooltip context. Once any tooltip in the group has opened, moving
+ * the pointer to another trigger within `skipDelay` opens its tooltip
+ * instantly — no hover delay between neighbouring buttons.
+ *
+ * `<Tooltip>` and `<Button>` detect this provider and skip mounting their
+ * own, so the shared skip-delay window spans the whole group:
+ *
+ * ```vue
+ * <TooltipProvider>
+ *   <Button icon="bold" :tooltip="'Bold'" />
+ *   <Tooltip text="Italic"><button>…</button></Tooltip>
+ *   <Tooltip text="Underline"><button>…</button></Tooltip>
+ * </TooltipProvider>
+ * ```
+ */
+const props = withDefaults(
+  defineProps<{
+    /** Delay (in seconds) before the first tooltip in the group opens. */
+    hoverDelay?: number
+    /**
+     * Window (in seconds) during which moving to another trigger in this
+     * group opens its tooltip with no delay. Mirrors reka's
+     * `skipDelayDuration`.
+     */
+    skipDelay?: number
+    /**
+     * When `true`, hovering the tooltip body closes it as the pointer
+     * leaves the trigger.
+     */
+    disableHoverableContent?: boolean
+  }>(),
+  { hoverDelay: 0.5, skipDelay: 0.3, disableHoverableContent: false },
+)
+
+const delayDuration = computed(() => props.hoverDelay * 1000)
+const skipDelayDuration = computed(() => props.skipDelay * 1000)
+</script>
+
+<template>
+  <RekaTooltipProvider
+    :delay-duration="delayDuration"
+    :skip-delay-duration="skipDelayDuration"
+    :disable-hoverable-content="disableHoverableContent"
+  >
+    <slot />
+  </RekaTooltipProvider>
+</template>

package/src/components/Tooltip/index.ts

@@ -1,3 +1,4 @@
 export { default as Tooltip } from './Tooltip.vue'
 export { default as TooltipBubble } from './TooltipBubble.vue'
+export { default as TooltipProvider } from './TooltipProvider.vue'
 export type { TooltipProps } from './types'

package/src/components/Tooltip/stories/Group.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { Button, Tooltip, TooltipProvider } from 'frappe-ui'
+</script>
+
+<template>
+  <!--
+    Hover any button to open its tooltip after `hover-delay`. Sweeping the
+    pointer to a neighbour within `skip-delay` opens the next tooltip
+    instantly — no per-button flicker — because the whole row shares one
+    tooltip context.
+  -->
+  <TooltipProvider :hover-delay="0.5" :skip-delay="0.3">
+    <div class="flex items-center gap-1">
+      <Button icon="bold" :tooltip="'Bold'" />
+      <Button icon="italic" :tooltip="'Italic'" />
+      <Button icon="underline" :tooltip="'Underline'" />
+      <Tooltip text="Strikethrough">
+        <Button icon="minus" />
+      </Tooltip>
+    </div>
+  </TooltipProvider>
+</template>

package/src/components/Tooltip/stories/Slots.vue

@@ -3,10 +3,10 @@ import { Button, Tooltip } from 'frappe-ui'
 </script>
 
 <template>
-  <Tooltip arrow-class="fill-surface-white" placement="top">
+  <Tooltip arrow-class="fill-surface-base" placement="top">
     <template #body>
       <div
-        class="min-w-[6rem] rounded bg-surface-white px-2 py-1 text-xs text-ink-gray-9 shadow-xl"
+        class="min-w-[6rem] rounded bg-surface-base px-2 py-1 text-xs text-ink-gray-9 shadow-xl"
       >
         Test
       </div>

package/src/components/Tooltip/types.ts

@@ -9,7 +9,7 @@ export interface TooltipProps {
   text?: string
 
   /**
-   * Delay (in ms) before showing the tooltip on hover.
+   * Delay (in seconds) before showing the tooltip on hover.
    */
   hoverDelay?: number
 

package/src/components/Tree/Tree.api.md

@@ -6,43 +6,99 @@
 
   const propsData = [
   {
-    name: 'node',
-    description: 'Root tree node to render.\nCan contain nested children to form the tree structure.',
+    name: 'nodes',
+    description: 'Forest roots to render. Each node may contain nested children to form the\ntree structure.',
     required: true,
-    type: 'TreeNode'
+    type: 'TreeNode[]'
   },
   {
     name: 'nodeKey',
-    description: 'Unique key used to identify each node.\nUsually an id-like property present on every node.',
-    required: true,
-    type: 'string'
+    description: 'Name of the field that uniquely identifies each node.',
+    required: false,
+    type: 'string',
+    default: '"key"'
+  },
+  {
+    name: 'draggable',
+    description: 'Enable drag-and-drop. Nodes can be dragged onto one another to reparent, or\nbetween siblings to reorder.',
+    required: false,
+    type: 'boolean',
+    default: 'false'
+  },
+  {
+    name: 'move',
+    description: 'Gate a drop while dragging. Receives the live drag context and returns\nwhether the drop is allowed — a rejected target shows the no-drop cursor and\nhides the drop indicator. Built-in guards (drop-on-self, drop-into-own-\ndescendant) run first, so this only carries your domain rules.',
+    required: false,
+    type: '((ctx: MoveContext) => boolean)'
   },
   {
-    name: 'options',
-    description: 'Optional configuration for tree layout and behavior.',
+    name: 'guides',
+    description: 'Visual style of the indentation guides.',
     required: false,
-    type: 'TreeOptions',
-    default: '{\n    rowHeight: "25px",\n    indentWidth: "20px",\n    showIndentationGuides: true,\n    defaultCollapsed: true,\n}'
+    type: '"connectors" | "lines" | "none"',
+    default: '"connectors"'
+  },
+  {
+    name: 'disabled',
+    description: 'Disable all interaction — expand/collapse and drag.',
+    required: false,
+    type: 'boolean',
+    default: 'false'
+  },
+  {
+    name: 'expanded',
+    description: 'Expand/collapse-all switch. Toggling it writes that value into every node\'s\n`expanded` field. Two-way: it also reflects whether all collapsible nodes are\ncurrently open, so a bound button stays in sync. Per-node state lives on the\nnodes themselves (`node.expanded`).',
+    required: false,
+    type: 'boolean',
+    default: 'false'
   }
 ]
 
   const slotsData = [
   {
-    name: 'node',
-    description: 'Slot to fully override how a tree node renders',
-    type: 'any'
+    name: 'item',
+    description: '',
+    type: 'TreeNodeSlotProps'
   },
   {
-    name: 'icon',
-    description: 'Slot to override only the node expand/collapse icon',
-    type: 'any'
+    name: 'item-prefix',
+    description: '',
+    type: 'Omit<TreeNodeSlotProps, "toggle">'
+  },
+  {
+    name: 'item-label',
+    description: '',
+    type: 'Omit<TreeNodeSlotProps, "toggle">'
   },
   {
-    name: 'label',
-    description: 'Slot to override only the node label/content',
+    name: 'item-suffix',
+    description: '',
+    type: 'Omit<TreeNodeSlotProps, "toggle">'
+  },
+  {
+    name: 'empty',
+    description: '',
     type: 'any'
   }
 ]
+
+  const emitsData = [
+  {
+    name: 'update:expanded',
+    description: 'Fired when the expanded changes.',
+    type: '[value: boolean]'
+  },
+  {
+    name: 'drag-start',
+    description: '',
+    type: '[node: TreeNode]'
+  },
+  {
+    name: 'drag-end',
+    description: '',
+    type: '[info: DropInfo | null]'
+  }
+]
 </script>
 ## API Reference
 
@@ -50,3 +106,5 @@
 
 <SlotsTable :data="slotsData"/> 
 
+<EmitsTable :data="emitsData"/> 
+