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

package/src/components/Button/Button.vue

@@ -1,296 +1,316 @@
-<template>
-  <TooltipProvider>
-    <TooltipRoot>
-      <TooltipTrigger as-child>
-        <component
-          :is="Root"
-          v-bind="$attrs"
-          :class="buttonClasses"
-          :aria-label="label"
-          ref="rootRef"
-        >
-      <LoadingIndicator
-        v-if="loading"
-        :class="{
-          'h-3 w-3': size == 'sm',
-          'h-[13.5px] w-[13.5px]': size == 'md',
-          'h-[15px] w-[15px]': size == 'lg',
-          'h-4.5 w-4.5': size == 'xl' || size == '2xl',
-        }"
-      />
-      <slot name="prefix" v-else-if="$slots['prefix'] || iconLeft">
-        <span
-          v-if="iconLeft && typeof iconLeft === 'string' && iconLeft.startsWith('lucide-')"
-          :class="[iconLeft, lucideSlotClasses]"
-          aria-hidden="true"
-        />
-        <FeatherIcon
-          v-else-if="iconLeft && typeof iconLeft === 'string'"
-          :name="iconLeft"
-          :class="slotClasses"
-          aria-hidden="true"
-        />
-        <component v-else-if="iconLeft" :is="iconLeft" :class="slotClasses" />
-      </slot>
-
-      <template v-if="loading && loadingText">{{ loadingText }}</template>
-      <template v-else-if="isIconButton && !loading">
-        <span
-          v-if="icon && typeof icon === 'string' && icon.startsWith('lucide-')"
-          :class="[icon, lucideSlotClasses]"
-          aria-hidden="true"
-        />
-        <FeatherIcon
-          v-else-if="icon && typeof icon === 'string'"
-          :name="icon"
-          :class="slotClasses"
-        />
-        <component v-else-if="icon" :is="icon" :class="slotClasses" />
-        <slot name="icon" v-else-if="$slots.icon" />
-        <div v-else-if="hasLucideIconInDefaultSlot" :class="slotClasses">
-          <slot>{{ label }}</slot>
-        </div>
-      </template>
-      <span v-else :class="{ 'sr-only': isIconButton }" class="truncate">
-        <slot>{{ label }}</slot>
-      </span>
-
-      <slot name="suffix">
-        <span
-          v-if="iconRight && typeof iconRight === 'string' && iconRight.startsWith('lucide-')"
-          :class="[iconRight, lucideSlotClasses]"
-          aria-hidden="true"
-        />
-        <FeatherIcon
-          v-else-if="iconRight && typeof iconRight === 'string'"
-          :name="iconRight"
-          :class="slotClasses"
-          aria-hidden="true"
-        />
-        <component
-          v-else-if="iconRight"
-          :is="iconRight"
-          :class="slotClasses"
-        />
-      </slot>
-        </component>
-      </TooltipTrigger>
-      <TooltipBubble v-if="tooltip?.length" :text="tooltip" />
-    </TooltipRoot>
-  </TooltipProvider>
-</template>
-<script lang="ts" setup>
-import { computed, h, ref, useSlots, watchEffect } from 'vue'
-import { TooltipProvider, TooltipRoot, TooltipTrigger } from 'reka-ui'
+<script lang="ts">
+import {
+  computed,
+  defineComponent,
+  h,
+  ref,
+  watchEffect,
+  type Component,
+  type SlotsType,
+  type VNode,
+} from 'vue'
+import {
+  TooltipProvider,
+  TooltipRoot,
+  TooltipTrigger,
+  injectTooltipProviderContext,
+} from 'reka-ui'
+import { RouterLink } from 'vue-router'
 import FeatherIcon from '../FeatherIcon.vue'
-import LoadingIndicator from '../LoadingIndicator.vue'
+import Spinner from '../Spinner/Spinner.vue'
 import TooltipBubble from '../Tooltip/TooltipBubble.vue'
-import { RouterLink } from 'vue-router'
 import { warnFeatherIconUsage } from '../../utils/iconString'
-import type { ButtonProps, ThemeVariant } from './types'
-
-defineOptions({ inheritAttrs: false })
-
-const props = withDefaults(defineProps<ButtonProps>(), {
-  theme: 'gray',
-  size: 'sm',
-  variant: 'subtle',
-  loading: false,
-  disabled: false,
-  type: 'button',
-})
-
-watchEffect(() => {
-  warnFeatherIconUsage('Button', 'icon', props.icon)
-  warnFeatherIconUsage('Button', 'iconLeft', props.iconLeft)
-  warnFeatherIconUsage('Button', 'iconRight', props.iconRight)
-})
-
-const slots = useSlots()
-
-const buttonClasses = computed(() => {
-  let solidClasses = {
-    gray: 'text-ink-white bg-surface-gray-7 hover:bg-surface-gray-6 active:bg-surface-gray-5',
-    blue: 'text-ink-white bg-blue-500 hover:bg-surface-blue-3 active:bg-blue-700',
-    green:
-      'text-ink-white bg-surface-green-3 hover:bg-green-700 active:bg-green-800',
-    red: 'text-ink-white bg-surface-red-5 hover:bg-surface-red-6 active:bg-surface-red-7',
-  }[props.theme]
-
-  let subtleClasses = {
-    gray: 'text-ink-gray-8 bg-surface-gray-2 hover:bg-surface-gray-3 active:bg-surface-gray-4',
-    blue: 'text-ink-blue-3 bg-surface-blue-2 hover:bg-blue-200 active:bg-blue-300',
-    green:
-      'text-green-800 bg-surface-green-2 hover:bg-green-200 active:bg-green-300',
-    red: 'text-red-700 bg-surface-red-2 hover:bg-surface-red-3 active:bg-surface-red-4',
-  }[props.theme]
-
-  let outlineClasses = {
-    gray: 'text-ink-gray-8 bg-surface-white bg-surface-white border border-outline-gray-2 hover:border-outline-gray-3 active:border-outline-gray-3 active:bg-surface-gray-4',
-    blue: 'text-ink-blue-3 bg-surface-white border border-outline-blue-1 hover:border-blue-400 active:border-blue-400 active:bg-blue-300',
-    green:
-      'text-green-800 bg-surface-white border border-outline-green-2 hover:border-green-500 active:border-green-500 active:bg-green-300',
-    red: 'text-red-700 bg-surface-white border border-outline-red-1 hover:border-outline-red-2 active:border-outline-red-2 active:bg-surface-red-3',
-  }[props.theme]
-
-  let ghostClasses = {
-    gray: 'text-ink-gray-8 bg-transparent hover:bg-surface-gray-3 active:bg-surface-gray-4',
-    blue: 'text-ink-blue-3 bg-transparent hover:bg-blue-200 active:bg-blue-300',
-    green:
-      'text-green-800 bg-transparent hover:bg-green-200 active:bg-green-300',
-    red: 'text-red-700 bg-transparent hover:bg-surface-red-3 active:bg-surface-red-4',
-  }[props.theme]
-
-  let focusClasses = {
-    gray: 'focus-visible:ring focus-visible:ring-outline-gray-3',
-    blue: 'focus-visible:ring focus-visible:ring-blue-400',
-    green: 'focus-visible:ring focus-visible:ring-outline-green-2',
-    red: 'focus-visible:ring focus-visible:ring-outline-red-2',
-  }[props.theme]
-
-  let variantClasses = {
-    subtle: subtleClasses,
-    solid: solidClasses,
-    outline: outlineClasses,
-    ghost: ghostClasses,
-  }[props.variant]
-
-  let themeVariant: ThemeVariant = `${props.theme}-${props.variant}`
-
-  let disabledClassesMap: Record<ThemeVariant, string> = {
-    'gray-solid': 'bg-surface-gray-2 text-ink-gray-4',
-    'gray-subtle': 'bg-surface-gray-2 text-ink-gray-4',
-    'gray-outline':
-      'bg-surface-gray-2 text-ink-gray-4 border border-outline-gray-2',
-    'gray-ghost': 'text-ink-gray-4',
-
-    'blue-solid': 'bg-blue-300 text-ink-white',
-    'blue-subtle': 'bg-surface-blue-2 text-ink-blue-link',
-    'blue-outline':
-      'bg-surface-blue-2 text-ink-blue-link border border-outline-blue-1',
-    'blue-ghost': 'text-ink-blue-link',
-
-    'green-solid': 'bg-surface-green-2 text-ink-green-2',
-    'green-subtle': 'bg-surface-green-2 text-ink-green-2',
-    'green-outline':
-      'bg-surface-green-2 text-ink-green-2 border border-outline-green-2',
-    'green-ghost': 'text-ink-green-2',
-
-    'red-solid': 'bg-surface-red-2 text-ink-red-2',
-    'red-subtle': 'bg-surface-red-2 text-ink-red-2',
-    'red-outline':
-      'bg-surface-red-2 text-ink-red-2 border border-outline-red-1',
-    'red-ghost': 'text-ink-red-2',
-  }
-  let disabledClasses = disabledClassesMap[themeVariant]
-
-  let sizeClasses = {
-    sm: 'h-7 text-base px-2 rounded',
-    md: 'h-8 text-base font-medium px-2.5 rounded',
-    lg: 'h-10 text-lg font-medium px-3 rounded-md',
-    xl: 'h-11.5 text-xl font-medium px-3.5 rounded-lg',
-    '2xl': 'h-13 text-2xl font-medium px-3.5 rounded-xl',
-  }[props.size]
-
-  if (isIconButton.value) {
-    sizeClasses = {
-      sm: 'h-7 w-7 rounded',
-      md: 'h-8 w-8 rounded',
-      lg: 'h-10 w-10 rounded-md',
-      xl: 'h-11.5 w-11.5 rounded-lg',
-      '2xl': 'h-13 w-13 rounded-xl',
-    }[props.size]
-  }
-
-  return [
-    'inline-flex items-center justify-center gap-2 transition-colors focus:outline-none shrink-0',
-    isDisabled.value ? disabledClasses : variantClasses,
-    focusClasses,
-    sizeClasses,
-  ]
-})
-
-const slotClasses = computed(() => {
-  let classes = {
-    sm: 'h-4',
-    md: 'h-4.5',
-    lg: 'h-5',
-    xl: 'h-6',
-    '2xl': 'h-6',
-  }[props.size]
-
-  return classes
-})
-
-const lucideSlotClasses = computed(() => {
-  return {
-    sm: 'size-4',
-    md: 'size-4.5',
-    lg: 'size-5',
-    xl: 'size-6',
-    '2xl': 'size-6',
-  }[props.size]
-})
+import { buttonProps, type ThemeVariant } from './types'
+
+export default defineComponent({
+  name: 'Button',
+  inheritAttrs: false,
+  props: buttonProps,
+  slots: Object as SlotsType<{
+    /** Content shown before the button label (left icon / custom content) */
+    prefix: void
+    /** Icon-only content for icon buttons */
+    icon: void
+    /** Main button content (overrides `label`) */
+    default: void
+    /** Content shown after the button label (right icon / custom content) */
+    suffix: void
+  }>,
+  setup(props, { attrs, slots, expose }) {
+    watchEffect(() => {
+      warnFeatherIconUsage('Button', 'icon', props.icon)
+      warnFeatherIconUsage('Button', 'iconLeft', props.iconLeft)
+      warnFeatherIconUsage('Button', 'iconRight', props.iconRight)
+    })
 
-const isDisabled = computed(() => {
-  return props.disabled || props.loading
-})
+    const isDisabled = computed(() => props.disabled || props.loading)
+    const hasTooltip = computed(() => Boolean(props.tooltip?.length))
 
-// Avoid "Maximum call stack size exceeded" error
-// when using <component is='button' /> inside <Button /> component
-// by using "render" function here to avoid conflicting html "button" component with
-// globally registered "Button" component in consumer apps
-const Root = computed(() => {
-  if (!isDisabled.value && props.route) {
-    return h(RouterLink, { to: props.route })
-  }
+    // Reuse a surrounding <TooltipProvider> (button group) when present so the
+    // group's skip-delay applies to this button instead of a private provider.
+    const parentTooltipProvider = injectTooltipProviderContext(null)
 
-  if (!isDisabled.value && props.link) {
-    return h('a', {
-      href: props.link,
-      target: '_blank',
-      rel: 'noreferrer noopener',
+    // Render as an icon button when the default slot is exactly one lucide-* icon.
+    const hasLucideIconInDefaultSlot = computed(() => {
+      const content = slots.default?.()
+      if (!Array.isArray(content)) return false
+      const name = (content[0]?.type as { name?: string })?.name
+      return typeof name === 'string' && name.startsWith('lucide-')
     })
-  }
 
-  return h('button', { type: props.type, disabled: isDisabled.value })
-})
-
-const isIconButton = computed(() => {
-  return props.icon || slots.icon || hasLucideIconInDefaultSlot.value
-})
+    const isIconButton = computed(
+      () =>
+        Boolean(props.icon) ||
+        Boolean(slots.icon) ||
+        hasLucideIconInDefaultSlot.value,
+    )
+
+    const slotClasses = computed(
+      () => ({ xs: 'h-3.5', sm: 'h-4', md: 'h-4.5', lg: 'h-5' })[props.size],
+    )
+
+    const lucideSlotClasses = computed(
+      () =>
+        ({
+          xs: 'size-3.5',
+          sm: 'size-4',
+          md: 'size-4.5',
+          lg: 'size-5',
+        })[props.size],
+    )
+
+    const buttonClasses = computed(() => {
+      const solidClasses = {
+        gray: 'text-ink-base bg-surface-gray-10 hover:bg-surface-gray-9 active:bg-surface-gray-8',
+        blue: 'text-ink-base bg-blue-500 hover:bg-surface-blue-3 active:bg-blue-700',
+        green:
+          'text-ink-base bg-surface-green-3 hover:bg-green-700 active:bg-green-800',
+        red: 'text-ink-base bg-surface-red-7 hover:bg-surface-red-8 active:bg-surface-red-9',
+      }[props.theme]
+
+      const subtleClasses = {
+        gray: 'text-ink-gray-8 bg-surface-gray-2 hover:bg-surface-gray-3 active:bg-surface-gray-4',
+        blue: 'text-ink-blue-6 bg-surface-blue-2 hover:bg-blue-200 active:bg-blue-300',
+        green:
+          'text-green-800 bg-surface-green-2 hover:bg-green-200 active:bg-green-300',
+        red: 'text-red-700 bg-surface-red-2 hover:bg-surface-red-3 active:bg-surface-red-4',
+      }[props.theme]
+
+      const outlineClasses = {
+        gray: 'text-ink-gray-8 bg-surface-base bg-surface-base border border-outline-gray-2 hover:border-outline-gray-3 active:border-outline-gray-3 active:bg-surface-gray-4',
+        blue: 'text-ink-blue-6 bg-surface-base border border-outline-blue-1 hover:border-blue-400 active:border-blue-400 active:bg-blue-300',
+        green:
+          'text-green-800 bg-surface-base border border-outline-green-3 hover:border-green-500 active:border-green-500 active:bg-green-300',
+        red: 'text-red-700 bg-surface-base border border-outline-red-1 hover:border-outline-red-3 active:border-outline-red-3 active:bg-surface-red-3',
+      }[props.theme]
+
+      const ghostClasses = {
+        gray: 'text-ink-gray-8 bg-transparent hover:bg-surface-gray-3 active:bg-surface-gray-4',
+        blue: 'text-ink-blue-6 bg-transparent hover:bg-blue-200 active:bg-blue-300',
+        green:
+          'text-green-800 bg-transparent hover:bg-green-200 active:bg-green-300',
+        red: 'text-red-700 bg-transparent hover:bg-surface-red-3 active:bg-surface-red-4',
+      }[props.theme]
+
+      const focusClasses = {
+        gray: '', // global :focus-visible ring
+        blue: 'focus-visible:focus-ring-blue',
+        green: 'focus-visible:focus-ring-green',
+        red: 'focus-visible:focus-ring-red',
+      }[props.theme]
+
+      const variantClasses = {
+        subtle: subtleClasses,
+        solid: solidClasses,
+        outline: outlineClasses,
+        ghost: ghostClasses,
+      }[props.variant]
+
+      const themeVariant: ThemeVariant = `${props.theme}-${props.variant}`
+
+      const disabledClassesMap: Record<ThemeVariant, string> = {
+        'gray-solid': 'bg-surface-gray-2 text-ink-gray-4',
+        'gray-subtle': 'bg-surface-gray-2 text-ink-gray-4',
+        'gray-outline':
+          'bg-surface-gray-2 text-ink-gray-4 border border-outline-gray-2',
+        'gray-ghost': 'text-ink-gray-4',
+
+        'blue-solid': 'bg-blue-300 text-ink-base',
+        'blue-subtle': 'bg-surface-blue-2 text-ink-blue-link',
+        'blue-outline':
+          'bg-surface-blue-2 text-ink-blue-link border border-outline-blue-1',
+        'blue-ghost': 'text-ink-blue-link',
+
+        'green-solid': 'bg-surface-green-2 text-ink-green-5',
+        'green-subtle': 'bg-surface-green-2 text-ink-green-5',
+        'green-outline':
+          'bg-surface-green-2 text-ink-green-5 border border-outline-green-3',
+        'green-ghost': 'text-ink-green-5',
+
+        'red-solid': 'bg-surface-red-2 text-ink-red-5',
+        'red-subtle': 'bg-surface-red-2 text-ink-red-5',
+        'red-outline':
+          'bg-surface-red-2 text-ink-red-5 border border-outline-red-1',
+        'red-ghost': 'text-ink-red-5',
+      }
+      const disabledClasses = disabledClassesMap[themeVariant]
+
+      const sizeClasses = isIconButton.value
+        ? {
+            xs: 'h-6 w-6 rounded-3',
+            sm: 'h-7 w-7 rounded-4',
+            md: 'h-8 w-8 rounded-4',
+            lg: 'h-10 w-10 rounded-5',
+          }[props.size]
+        : {
+            xs: 'h-6 text-xs px-1.5 rounded-3',
+            sm: 'h-7 text-base px-2 rounded-4',
+            md: 'h-8 text-base-medium px-2.5 rounded-4',
+            lg: 'h-10 text-lg-medium px-3 rounded-5',
+          }[props.size]
+
+      return [
+        'inline-flex items-center justify-center gap-2 transition-colors shrink-0',
+        // Only an explicit `disabled` dims the button. A `loading` button keeps
+        // its normal look (it's still non-interactive via the native `disabled`
+        // attr below); `pointer-events-none` suppresses hover/active visuals so
+        // it doesn't appear clickable while busy.
+        props.disabled ? disabledClasses : variantClasses,
+        props.loading && !props.disabled ? 'pointer-events-none' : '',
+        focusClasses,
+        sizeClasses,
+      ]
+    })
 
-const hasLucideIconInDefaultSlot = computed(() => {
-  if (!slots.default) return false
+    const rootRef = ref()
+    expose({ rootRef })
+
+    // The dynamic root: router link, external anchor, or native button. Using the
+    // raw 'button' string (not <component :is>) sidesteps the historic recursion
+    // with a globally-registered <Button> in consumer apps.
+    const root = computed<{
+      is: Component | string
+      props: Record<string, unknown>
+    }>(() => {
+      if (!isDisabled.value && props.route) {
+        return { is: RouterLink, props: { to: props.route } }
+      }
+      if (!isDisabled.value && props.link) {
+        return {
+          is: 'a',
+          props: {
+            href: props.link,
+            target: '_blank',
+            rel: 'noreferrer noopener',
+          },
+        }
+      }
+      return {
+        is: 'button',
+        props: { type: props.type, disabled: isDisabled.value },
+      }
+    })
 
-  const slotContent = slots.default()
-  if (!Array.isArray(slotContent)) return false
-  // if the slot contains only one element and it's a lucide icon
-  // render it as an icon button
-  let firstVNode = slotContent[0]
-  if (
-    typeof firstVNode.type?.name == 'string' &&
-    firstVNode.type?.name?.startsWith('lucide-')
-  ) {
-    return true
-  }
-  return false
+    /** Resolve an icon prop to a vnode: lucide class-span, FeatherIcon, or component. */
+    function renderIcon(
+      icon: string | Component | undefined,
+      featherHidden: boolean,
+    ): VNode | null {
+      if (!icon) return null
+      if (typeof icon === 'string') {
+        if (icon.startsWith('lucide-')) {
+          return h('span', {
+            class: [icon, lucideSlotClasses.value],
+            'aria-hidden': 'true',
+          })
+        }
+        return h(FeatherIcon, {
+          name: icon,
+          class: slotClasses.value,
+          ...(featherHidden ? { 'aria-hidden': 'true' } : {}),
+        })
+      }
+      return h(icon, { class: slotClasses.value })
+    }
+
+    function renderPrefix() {
+      if (props.loading) {
+        // No `size`/`theme` props: button spinner diameters are tuned per
+        // button size and don't line up with Spinner's fixed sizes, and the
+        // spinner inherits the button's text color.
+        return h(Spinner, {
+          class: {
+            'size-3.5': props.size === 'xs',
+            'size-4': props.size === 'sm',
+            'size-4.5': props.size === 'md',
+            'size-5': props.size === 'lg',
+          },
+        })
+      }
+      if (slots.prefix) return slots.prefix()
+      return renderIcon(props.iconLeft, true)
+    }
+
+    function renderMain() {
+      if (props.loading && props.loadingText) return props.loadingText
+      if (isIconButton.value && !props.loading) {
+        if (props.icon) return renderIcon(props.icon, false)
+        if (slots.icon) return slots.icon()
+        if (hasLucideIconInDefaultSlot.value) {
+          return h(
+            'div',
+            { class: slotClasses.value },
+            slots.default?.() ?? props.label,
+          )
+        }
+        return null
+      }
+      return h(
+        'span',
+        { class: ['truncate', { 'sr-only': isIconButton.value }] },
+        slots.default?.() ?? props.label,
+      )
+    }
+
+    function renderSuffix() {
+      if (slots.suffix) return slots.suffix()
+      return renderIcon(props.iconRight, true)
+    }
+
+    return () => {
+      const { class: attrClass, ...restAttrs } = attrs
+      const { is, props: rootProps } = root.value
+      const children = [renderPrefix(), renderMain(), renderSuffix()]
+      const mergedProps = {
+        ...rootProps,
+        ...restAttrs,
+        class: [attrClass, buttonClasses.value],
+        'aria-label': props.label,
+        'aria-busy': props.loading || undefined,
+        ref: rootRef,
+      }
+      const button =
+        typeof is === 'string'
+          ? h(is, mergedProps, children)
+          : h(is, mergedProps, { default: () => children })
+
+      if (!hasTooltip.value) return button
+
+      // Tooltip scaffolding renders only when a tooltip is set, so a bare button
+      // ships without any tooltip context, listeners, or pointerdown-to-close.
+      const tooltipRoot = h(TooltipRoot, null, {
+        default: () => [
+          h(TooltipTrigger, { asChild: true }, { default: () => button }),
+          h(TooltipBubble, { text: props.tooltip }),
+        ],
+      })
+
+      // Inside a button group, the provider already exists upstream — mounting
+      // our own here would isolate this button from the shared skip-delay.
+      return parentTooltipProvider
+        ? tooltipRoot
+        : h(TooltipProvider, null, { default: () => tooltipRoot })
+    }
+  },
 })
-
-const rootRef = ref()
-defineExpose({ rootRef })
-
-defineSlots<{
-  /** Content shown before the button label (left icon / custom content) */
-  prefix?: () => any
-
-  /** Icon-only content for icon buttons */
-  icon?: () => any
-
-  /** Main button content (overrides `label`) */
-  default?: () => any
-
-  /** Content shown after the button label (right icon / custom content) */
-  suffix?: () => any
-}>()
 </script>

package/src/components/Button/stories/InlineActions.vue

@@ -0,0 +1,10 @@
+<script setup>
+import { Button } from 'frappe-ui'
+</script>
+
+<template>
+  <div class="flex items-center gap-2">
+    <Button>Join</Button>
+    <Button variant="solid">Reschedule</Button>
+  </div>
+</template>

package/src/components/Button/stories/LiveClassCard.vue

@@ -0,0 +1,34 @@
+<script setup>
+import { Button } from 'frappe-ui'
+</script>
+
+<template>
+  <div
+    class="flex w-96 flex-col gap-6 rounded-6 bg-surface-base p-4 shadow-[0px_0px_0.75px_rgba(0,0,0,0.16),0px_2px_2.5px_rgba(0,0,0,0.14)]"
+  >
+    <div class="flex flex-col gap-5">
+      <div class="flex flex-col gap-3">
+        <p class="text-md-semibold text-ink-gray-7">Frappe january - 2023</p>
+        <div class="flex flex-col gap-3">
+          <div class="flex items-center gap-2 text-base text-ink-gray-7">
+            <span class="lucide-calendar size-4" aria-hidden="true" />
+            <span>Wed, Dec 27, 2023</span>
+          </div>
+          <div class="flex items-center gap-2 text-base text-ink-gray-7">
+            <span class="lucide-clock size-4" aria-hidden="true" />
+            <span>03:45 PM - 04:15 PM (30 min)</span>
+          </div>
+        </div>
+      </div>
+      <p class="text-base leading-normal text-ink-gray-7">
+        Digital products are more abstract and complex than any product we’v…
+      </p>
+    </div>
+    <div class="flex items-center gap-2">
+      <Button class="flex-1">Start</Button>
+      <Button variant="solid" class="flex-1" icon-left="lucide-video">
+        Join
+      </Button>
+    </div>
+  </div>
+</template>

package/src/components/Button/stories/SectionAction.vue

@@ -0,0 +1,17 @@
+<script setup>
+import { Button } from 'frappe-ui'
+</script>
+
+<template>
+  <div class="flex w-full max-w-[352px] items-center gap-2 p-3">
+    <Button
+      variant="ghost"
+      icon-left="lucide-chevron-down"
+      class="-ml-2 font-medium"
+    >
+      Contacts
+    </Button>
+    <div class="flex-1" />
+    <Button icon-left="lucide-plus">Add contact</Button>
+  </div>
+</template>