frappe-ui 1.0.0-beta.67 → 1.0.0-beta.68

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "1.0.0-beta.67",
+  "version": "1.0.0-beta.68",
   "description": "A set of components and utilities for rapid UI development",
   "engines": {
     "node": ">=20.19.0"
@@ -19,6 +19,7 @@
     "#utils/*": "./src/utils/*"
   },
   "bin": {
+    "base-props-v1": "./scripts/migrate-base-props-v1.js",
     "tokens-v2": "./tailwind/migrate-tokens-v2.js",
     "shortcuts-v1": "./scripts/migrate-shortcuts-v1.js",
     "editor-v1": "./scripts/migrate-editor-v1.js",
@@ -104,6 +105,7 @@
     "tailwind",
     "vitepress",
     "scripts/migrate-shortcuts-v1.js",
+    "scripts/migrate-base-props-v1.js",
     "scripts/migrate-editor-v1.js",
     "experimental",
     "experimental.ts",
@@ -116,6 +118,7 @@
   "author": "Frappe Technologies Pvt. Ltd.",
   "license": "MIT",
   "dependencies": {
+    "@vue/compiler-sfc": "^3.5.13",
     "@codemirror/lang-css": "^6.3.0",
     "@codemirror/lang-html": "^6.4.9",
     "@codemirror/lang-javascript": "^6.2.2",

package/scripts/migrate-base-props-v1.js

@@ -0,0 +1,379 @@
+#!/usr/bin/env node
+
+import fs from 'node:fs'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { parse as parseSfc } from '@vue/compiler-sfc'
+
+const NodeTypes = {
+  ELEMENT: 1,
+  SIMPLE_EXPRESSION: 4,
+  ATTRIBUTE: 6,
+  DIRECTIVE: 7,
+}
+
+const USAGE = `Usage: base-props-v1 [--dry-run] <dir-or-file...>
+
+Renames the v1 base-component props on statically named Vue component tags:
+  Icon name -> icon (optional canonical spelling)
+  Divider position -> align
+  Progress intervals + intervalCount -> numeric intervals`
+
+const COMPONENTS = new Set(['Icon', 'Divider', 'Progress'])
+
+function walk(target, visited = new Set()) {
+  if (fs.lstatSync(target).isSymbolicLink()) return []
+  const resolved = fs.realpathSync(target)
+  if (visited.has(resolved)) return []
+  visited.add(resolved)
+  const stat = fs.statSync(resolved)
+  if (stat.isFile()) return path.extname(target) === '.vue' ? [target] : []
+  return fs.readdirSync(resolved, { withFileTypes: true }).flatMap((entry) => {
+    if (entry.name === 'node_modules' || entry.name === '.git') return []
+    return walk(path.join(resolved, entry.name), visited)
+  })
+}
+
+function kebabCase(name) {
+  return name.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase()
+}
+
+function setAlias(aliases, binding, component) {
+  aliases.set(binding, component)
+  aliases.set(kebabCase(binding), component)
+}
+
+function importedComponentAliases(source) {
+  const aliases = new Map()
+  for (const name of COMPONENTS) setAlias(aliases, name, name)
+  const importPattern = /import\s*\{([\s\S]*?)\}\s*from\s*['"]([^'"]+)['"]/g
+  for (const match of source.matchAll(importPattern)) {
+    for (const part of match[1].split(',')) {
+      const binding = part
+        .trim()
+        .match(/^(Icon|Divider|Progress)(?:\s+as\s+([A-Za-z_$][\w$]*))?$/)
+      if (!binding) continue
+      const name = binding[2] || binding[1]
+      if (match[2] === 'frappe-ui') setAlias(aliases, name, binding[1])
+      else {
+        aliases.delete(name)
+        aliases.delete(kebabCase(name))
+      }
+    }
+  }
+  for (const match of source.matchAll(
+    /import\s+([A-Za-z_$][\w$]*)\s+from\s*['"]([^'"]+)['"]/g,
+  )) {
+    const [, binding, specifier] = match
+    const component = [...COMPONENTS].find((name) =>
+      specifier.endsWith(`/${name}/${name}.vue`),
+    )
+    if (component) setAlias(aliases, binding, component)
+    else {
+      aliases.delete(binding)
+      aliases.delete(kebabCase(binding))
+    }
+  }
+  return aliases
+}
+
+function propName(prop) {
+  if (prop.type === NodeTypes.ATTRIBUTE) return prop.name
+  if (
+    prop.type === NodeTypes.DIRECTIVE &&
+    prop.name === 'bind' &&
+    prop.arg?.type === NodeTypes.SIMPLE_EXPRESSION &&
+    prop.arg.isStatic
+  ) {
+    return prop.arg.content
+  }
+}
+
+function renamePropEdit(prop, from, to, offset) {
+  if (
+    prop.type === NodeTypes.DIRECTIVE &&
+    prop.name === 'bind' &&
+    prop.exp === undefined
+  ) {
+    const renamed = prop.loc.source.replace(from, to)
+    return {
+      start: offset + prop.loc.start.offset,
+      end: offset + prop.loc.end.offset,
+      text: `${renamed}="${from}"`,
+      description: `${from} -> ${to}`,
+    }
+  }
+  const relative = prop.loc.source.indexOf(from)
+  return {
+    start: offset + prop.loc.start.offset + relative,
+    end: offset + prop.loc.start.offset + relative + from.length,
+    text: to,
+    description: `${from} -> ${to}`,
+  }
+}
+
+function boundExpression(prop) {
+  if (prop?.type !== NodeTypes.DIRECTIVE || prop.name !== 'bind')
+    return undefined
+  const match = prop.loc.source.match(/^(?::|v-bind:)[^=]+=(['"])([\s\S]*)\1$/)
+  return match?.[2]
+}
+
+function countExpression(prop) {
+  if (prop.type === NodeTypes.ATTRIBUTE) return prop.value?.content
+  return boundExpression(prop)
+}
+
+function looksNumericExpression(expression) {
+  return (
+    /^\d+(?:\.\d+)?$/.test(expression) ||
+    /(?:^|\.)(?:length|size)$/.test(expression) ||
+    /^(?:Number|parseInt|parseFloat)\s*\(/.test(expression) ||
+    /[+*/%]|\?[^:]+:\s*(?:undefined|\d)/.test(expression)
+  )
+}
+
+function progressEdit(element, offset, refusals) {
+  const intervals = element.props.find((prop) => propName(prop) === 'intervals')
+  const count = element.props.find((prop) =>
+    ['intervalCount', 'interval-count'].includes(propName(prop)),
+  )
+  if (!count && !intervals) return []
+
+  if (count && !intervals) {
+    refusals.push({
+      line: count.loc.start.line,
+      message:
+        'Progress has intervalCount without intervals; choose continuous or interval mode',
+    })
+    return []
+  }
+
+  const condition = boundExpression(intervals)
+  const staticValue =
+    intervals.type === NodeTypes.ATTRIBUTE
+      ? intervals.value?.content
+      : undefined
+  const bareBoolean =
+    intervals.type === NodeTypes.ATTRIBUTE && intervals.value === undefined
+  const numericStatic =
+    staticValue !== undefined && /^\d+(?:\.\d+)?$/.test(staticValue)
+  const shorthandBinding =
+    intervals.type === NodeTypes.DIRECTIVE && condition === undefined
+  // A dynamic `:intervals` without `intervalCount` may already be the v1
+  // numeric API. Leaving it alone makes repeat runs idempotent.
+  if (!count && shorthandBinding) {
+    refusals.push({
+      line: intervals.loc.start.line,
+      message:
+        'Progress shorthand :intervals may still be the v0 boolean mode; replace it with a segment count',
+    })
+    return []
+  }
+  if (
+    !count &&
+    !bareBoolean &&
+    staticValue !== 'true' &&
+    !numericStatic &&
+    condition !== 'true' &&
+    condition !== 'false'
+  ) {
+    if (!looksNumericExpression(condition)) {
+      refusals.push({
+        line: intervals.loc.start.line,
+        message: `Progress ${intervals.loc.source} may still be the v0 boolean mode; replace it with a segment count`,
+      })
+    }
+    return []
+  }
+
+  if (condition === 'false') {
+    const removeProp = (prop, description) => {
+      let start = prop.loc.start.offset
+      while (
+        start > element.loc.start.offset &&
+        /\s/.test(
+          element.loc.source[start - element.loc.start.offset - 1] || '',
+        )
+      )
+        start--
+      return {
+        start: offset + start,
+        end: offset + prop.loc.end.offset,
+        text: '',
+        description,
+      }
+    }
+    return [
+      removeProp(intervals, 'remove disabled Progress interval mode'),
+      ...(count
+        ? [removeProp(count, 'remove unused Progress intervalCount')]
+        : []),
+    ]
+  }
+
+  let replacement
+  if (!count && numericStatic) {
+    replacement = `:intervals="${staticValue}"`
+  } else {
+    const countValue = count ? countExpression(count) : '6'
+    if (!countValue) {
+      refusals.push({
+        line: count.loc.start.line,
+        message: 'Progress intervalCount has no static value to migrate',
+      })
+      return []
+    }
+    if (condition && condition !== 'true') {
+      replacement = `:intervals="(${condition}) ? (${countValue}) : undefined"`
+    } else {
+      replacement = `:intervals="${countValue}"`
+    }
+  }
+
+  const edits = [
+    {
+      start: offset + intervals.loc.start.offset,
+      end: offset + intervals.loc.end.offset,
+      text: replacement,
+      description: 'Progress intervals + intervalCount -> numeric intervals',
+    },
+  ]
+  if (count) {
+    let countStart = count.loc.start.offset
+    let countEnd = count.loc.end.offset
+    if (countStart > intervals.loc.end.offset) {
+      while (
+        countStart > intervals.loc.end.offset &&
+        /\s/.test(
+          element.loc.source[countStart - element.loc.start.offset - 1] || '',
+        )
+      )
+        countStart--
+    } else {
+      while (
+        countEnd < intervals.loc.start.offset &&
+        /\s/.test(element.loc.source[countEnd - element.loc.start.offset] || '')
+      )
+        countEnd++
+    }
+    edits.push({
+      start: offset + countStart,
+      end: offset + countEnd,
+      text: '',
+      description: 'remove Progress intervalCount',
+    })
+  }
+  return edits
+}
+
+export function migrateBaseProps(source) {
+  const parsed = parseSfc(source, { filename: 'component.vue' })
+  if (parsed.errors.length) {
+    return {
+      migrated: source,
+      changes: [],
+      refusals: [
+        { line: 1, message: `Vue parse error: ${String(parsed.errors[0])}` },
+      ],
+    }
+  }
+  const block = parsed.descriptor.template
+  if (!block) return { migrated: source, changes: [], refusals: [] }
+
+  const aliases = importedComponentAliases(source)
+  const ast = block.ast
+  const edits = []
+  const refusals = []
+
+  function visit(node) {
+    if (node.type === NodeTypes.ELEMENT) {
+      const component = aliases.get(node.tag)
+      if (component === 'Icon') {
+        const name = node.props.find((prop) => propName(prop) === 'name')
+        const icon = node.props.find((prop) => propName(prop) === 'icon')
+        // Both props are a supported contract. Leave the lower-precedence name
+        // intact instead of creating a duplicate icon binding.
+        if (name && !icon) {
+          edits.push(renamePropEdit(name, 'name', 'icon', 0))
+        }
+      } else if (component === 'Divider') {
+        for (const prop of node.props) {
+          if (propName(prop) === 'position')
+            edits.push(renamePropEdit(prop, 'position', 'align', 0))
+        }
+      } else if (component === 'Progress') {
+        edits.push(...progressEdit(node, 0, refusals))
+      }
+    }
+    for (const child of node.children || []) visit(child)
+  }
+  visit(ast)
+
+  if (refusals.length) return { migrated: source, changes: [], refusals }
+  const migrated = [...edits]
+    .sort((a, b) => b.start - a.start)
+    .reduce(
+      (text, edit) =>
+        text.slice(0, edit.start) + edit.text + text.slice(edit.end),
+      source,
+    )
+  return { migrated, changes: edits, refusals }
+}
+
+function main() {
+  const args = process.argv.slice(2)
+  if (args.includes('--help') || args.includes('-h')) {
+    console.log(USAGE)
+    return
+  }
+  const unknown = args.filter(
+    (arg) => arg.startsWith('-') && arg !== '--dry-run',
+  )
+  const targets = args.filter((arg) => !arg.startsWith('-'))
+  if (unknown.length || !targets.length) {
+    if (unknown.length) console.error(`Unknown option: ${unknown.join(' ')}`)
+    console.error(USAGE)
+    process.exit(1)
+  }
+
+  for (const target of targets) {
+    if (!fs.existsSync(target)) {
+      console.error(`Invalid path: ${target}`)
+      process.exit(1)
+    }
+  }
+
+  const dryRun = args.includes('--dry-run')
+  const files = [...new Set(targets.flatMap((target) => walk(target)))]
+  let changed = 0
+  const refusals = []
+  for (const file of files) {
+    const source = fs.readFileSync(file, 'utf8')
+    const result = migrateBaseProps(source)
+    if (result.refusals.length) {
+      for (const refusal of result.refusals) refusals.push({ file, ...refusal })
+      continue
+    }
+    if (!result.changes.length) continue
+    changed++
+    if (!dryRun) fs.writeFileSync(file, result.migrated)
+    console.log(`${file} (${result.changes.length})`)
+  }
+  console.log(
+    `\n${dryRun ? '[dry-run] would update' : 'Updated'} ${changed} files`,
+  )
+  if (refusals.length) {
+    console.error(
+      `\nNot converted — ${refusals.length} sites need a decision; affected files were left unchanged:`,
+    )
+    for (const refusal of refusals)
+      console.error(`  ${refusal.file}:L${refusal.line} ${refusal.message}`)
+    process.exit(1)
+  }
+}
+
+const scriptPath = fileURLToPath(import.meta.url)
+const invokedPath = process.argv[1]
+if (invokedPath && fs.realpathSync(invokedPath) === fs.realpathSync(scriptPath))
+  main()

package/src/components/Badge/Badge.api.md

@@ -30,7 +30,7 @@
     name: 'label',
     description: 'Content displayed inside the badge',
     required: false,
-    type: 'Label | string | number'
+    type: 'string | number'
   }
 ]
 

package/src/components/Badge/types.ts

@@ -1,7 +1,3 @@
-interface Label {
-  toString(): string
-}
-
 export interface BadgeProps {
   /** Visual color theme of the badge */
   theme?: 'gray' | 'blue' | 'green' | 'amber' | 'red' | 'violet'
@@ -13,5 +9,5 @@ export interface BadgeProps {
   variant?: 'solid' | 'subtle' | 'outline' | 'ghost'
 
   /** Content displayed inside the badge */
-  label?: Label | string | number
+  label?: string | number
 }

package/src/components/Divider/Divider.api.md

@@ -13,7 +13,7 @@
     default: '"horizontal"'
   },
   {
-    name: 'position',
+    name: 'align',
     description: 'Where the action sits along the rule. Ignored without an `action`, since a\nplain rule has nothing to place.',
     required: false,
     type: '"start" | "center" | "end"',

package/src/components/Divider/Divider.cy.ts

@@ -41,6 +41,29 @@ describe('Divider', () => {
     cy.get('div').should('exist')
   })
 
+  it('accepts shared Button action fields', () => {
+    cy.mount(Divider, {
+      props: {
+        action: { label: 'Delete', theme: 'red', variant: 'solid', size: 'md' },
+      },
+    })
+
+    cy.contains('button', 'Delete')
+      .should('have.class', 'bg-surface-red-7')
+      .and('have.class', 'h-8')
+      .and('have.class', 'text-base-medium')
+  })
+
+  it('aligns an action along the divider', () => {
+    cy.mount(Divider, {
+      props: { align: 'start', action: { label: 'Add row' } },
+    })
+
+    cy.contains('button', 'Add row')
+      .parent()
+      .should('have.class', 'justify-start')
+  })
+
   it('does not overlap sibling content in vertical action mode', () => {
     cy.mount({
       render() {

package/src/components/Divider/Divider.md

@@ -2,6 +2,9 @@
 
 Separates content visually, either horizontally or vertically. It can also host a small inline action.
 
+Use `align="start|center|end"` to place an action along the rule. The action
+accepts the shared button fields such as `theme`, `variant`, `size`, and icons.
+
 ## Playground
 
 <ComponentPlayground name="Divider" />

package/src/components/Divider/Divider.playground.vue

@@ -13,7 +13,7 @@ const knobs: Knob[] = [
     ],
   },
   {
-    name: 'position',
+    name: 'align',
     type: 'tabs',
     default: 'center',
     options: [
@@ -29,7 +29,7 @@ function buildCode(v: Record<string, any>) {
   const attrs: string[] = []
   if (v.orientation !== 'horizontal')
     attrs.push(`orientation="${v.orientation}"`)
-  if (v.position !== 'center') attrs.push(`position="${v.position}"`)
+  if (v.align !== 'center') attrs.push(`align="${v.align}"`)
   if (v.withAction) attrs.push(`:action="{ label: 'Add row' }"`)
   if (!attrs.length) return '<Divider />'
   return ['<Divider', ...attrs.map((a) => '  ' + a), '/>'].join('\n')
@@ -50,7 +50,7 @@ function buildCode(v: Record<string, any>) {
           <span class="text-sm text-ink-gray-6 self-center">Before</span>
           <Divider
             orientation="vertical"
-            :position="values.position"
+            :align="values.align"
             flex-item
             :action="values.withAction ? { label: 'Add row' } : undefined"
           />
@@ -58,7 +58,7 @@ function buildCode(v: Record<string, any>) {
         </template>
         <Divider
           v-else
-          :position="values.position"
+          :align="values.align"
           :action="values.withAction ? { label: 'Add row' } : undefined"
         />
       </div>

package/src/components/Divider/Divider.vue

@@ -7,11 +7,8 @@
       :class="actionLineClasses"
     />
     <Button
-      :label="props.action.label"
-      :loading="props.action.loading"
+      v-bind="actionButtonProps"
       class="relative z-10"
-      size="sm"
-      variant="outline"
       @click="actionOnClick"
     />
   </div>
@@ -22,13 +19,20 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 import { Button } from '../../index'
+import { mergeActionProps } from '../shared/action'
 import type { DividerProps } from './types'
 
 const props = withDefaults(defineProps<DividerProps>(), {
   orientation: 'horizontal',
-  position: 'center',
+  align: 'center',
 })
 
+const actionButtonProps = computed(() =>
+  props.action
+    ? mergeActionProps({ size: 'sm', variant: 'outline' }, props.action)
+    : undefined,
+)
+
 const actionOnClick = computed(() => {
   return props.action?.onClick
 })
@@ -54,7 +58,7 @@ const actionContainerClasses = computed(() => {
       center: 'justify-center',
       start: 'justify-start pl-4',
       end: 'justify-end pr-4',
-    }[props.position]
+    }[props.align]
 
     return [...baseClasses, 'flex w-full min-h-7 items-center', positionClasses]
   }
@@ -64,7 +68,7 @@ const actionContainerClasses = computed(() => {
     center: 'items-center',
     start: 'items-start pt-4',
     end: 'items-end pb-4',
-  }[props.position]
+  }[props.align]
 
   return [...baseClasses, 'flex justify-center', heightClasses, positionClasses]
 })

package/src/components/Divider/stories/Action.vue

@@ -15,7 +15,7 @@
           <Divider
             orientation="vertical"
             flex-item
-            position="center"
+            align="center"
             :action="{ label: 'Edit', onClick }"
           />
           <span class="text-base text-ink-gray-7">Panel B</span>

package/src/components/Divider/types.ts

@@ -1,14 +1,7 @@
-/** The inline action a `Divider` can host on its rule. */
-export interface DividerAction {
-  /** Text of the action button. */
-  label: string
+import type { Action } from '../shared/action'
 
-  /** Called when the action button is clicked. */
-  onClick?: () => any
-
-  /** Shows a spinner in the action button and blocks further clicks. */
-  loading?: boolean
-}
+/** A shared button action with no component-specific callback context. */
+export type DividerAction = Action<void> & { label: string }
 
 export interface DividerProps {
   /** Which way the rule runs. */
@@ -18,7 +11,7 @@ export interface DividerProps {
    * Where the action sits along the rule. Ignored without an `action`, since a
    * plain rule has nothing to place.
    */
-  position?: 'start' | 'center' | 'end'
+  align?: 'start' | 'center' | 'end'
 
   /**
    * Stretches the divider to the cross-axis size of its flex parent

package/src/components/Icon/Icon.api.md

@@ -6,10 +6,16 @@
 
   const propsData = [
   {
-    name: 'name',
+    name: 'icon',
     description: 'Icon source. Supported forms:\n- `lucide-*` string  → rendered via the Tailwind mask plugin.\n- emoji / symbol string → rendered as plain text.\n- Vue component → rendered via `<component :is>`.\nAny other string (e.g. a bare feather-style name) is unsupported —\nit renders nothing and warns once in dev. Falsy values render nothing.',
     required: false,
     type: 'string | Component | null'
+  },
+  {
+    name: 'name',
+    description: 'Supported alternate name for `icon`. `icon` takes precedence when both\nprops are supplied.',
+    required: false,
+    type: 'string | Component | null'
   }
 ]
 </script>

package/src/components/Icon/Icon.cy.ts

@@ -3,7 +3,7 @@ import Icon from './Icon.vue'
 
 describe('<Icon />', () => {
   it('renders a lucide string as a span with the class', () => {
-    cy.mount(Icon, { props: { name: 'lucide-star' } })
+    cy.mount(Icon, { props: { icon: 'lucide-star' } })
     cy.get('span').should('have.class', 'lucide-star')
     cy.get('span').should('have.attr', 'aria-hidden', 'true')
     cy.get('span').should('be.empty')
@@ -11,7 +11,7 @@ describe('<Icon />', () => {
 
   it('passes through fallthrough class on lucide spans', () => {
     cy.mount(Icon, {
-      props: { name: 'lucide-check' },
+      props: { icon: 'lucide-check' },
       attrs: { class: 'size-4 text-ink-gray-6' },
     })
     cy.get('span')
@@ -21,18 +21,18 @@ describe('<Icon />', () => {
   })
 
   it('renders an emoji string as text content', () => {
-    cy.mount(Icon, { props: { name: '🚀' } })
+    cy.mount(Icon, { props: { icon: '🚀' } })
     cy.get('span').should('have.text', '🚀')
     cy.get('span').should('have.attr', 'aria-hidden', 'true')
   })
 
   it('treats other glyphs (no ASCII letters/digits) as emoji', () => {
-    cy.mount(Icon, { props: { name: '✨' } })
+    cy.mount(Icon, { props: { icon: '✨' } })
     cy.get('span').should('have.text', '✨')
   })
 
   it('renders nothing for an unsupported (non-lucide, non-emoji) string', () => {
-    cy.mount(Icon, { props: { name: 'check' } })
+    cy.mount(Icon, { props: { icon: 'check' } })
     cy.get('span').should('not.exist')
     cy.get('svg').should('not.exist')
   })
@@ -44,10 +44,42 @@ describe('<Icon />', () => {
         return h('svg', { 'data-cy': 'custom-icon' })
       },
     }
-    cy.mount(Icon, { props: { name: CustomIcon } })
+    cy.mount(Icon, { props: { icon: CustomIcon } })
     cy.get('[data-cy="custom-icon"]').should('exist')
   })
 
+  it('supports the name prop with string and Component values', () => {
+    const CustomIcon = {
+      render() {
+        return h('svg', { 'data-cy': 'name-component' })
+      },
+    }
+
+    cy.mount(Icon, { props: { name: 'lucide-star' } })
+    cy.get('span').should('have.class', 'lucide-star')
+
+    cy.mount(Icon, { props: { name: CustomIcon } })
+    cy.get('[data-cy="name-component"]').should('exist')
+  })
+
+  it('prefers icon unless it is undefined', () => {
+    cy.mount(Icon, {
+      props: { icon: 'lucide-check', name: 'lucide-star' },
+    })
+    cy.get('span')
+      .should('have.class', 'lucide-check')
+      .and('not.have.class', 'lucide-star')
+
+    cy.mount(Icon, { props: { icon: undefined, name: 'lucide-star' } })
+    cy.get('span').should('have.class', 'lucide-star')
+  })
+
+  it('treats an explicit null icon as the selected empty value', () => {
+    cy.mount(Icon, { props: { icon: null, name: 'lucide-star' } })
+    cy.get('span').should('not.exist')
+    cy.get('svg').should('not.exist')
+  })
+
   it('passes fallthrough attrs to the rendered Component', () => {
     const CustomIcon = {
       name: 'custom-icon',
@@ -56,22 +88,22 @@ describe('<Icon />', () => {
       },
     }
     cy.mount(Icon, {
-      props: { name: CustomIcon },
+      props: { icon: CustomIcon },
       attrs: { class: 'size-5' },
     })
     cy.get('[data-cy="custom-icon"]').should('have.class', 'size-5')
   })
 
-  it('renders nothing when name is falsy', () => {
-    cy.mount(Icon, { props: { name: null } })
+  it('renders nothing when the resolved value is empty or omitted', () => {
+    cy.mount(Icon, { props: { icon: '' } })
     cy.get('span').should('not.exist')
     cy.get('svg').should('not.exist')
 
-    cy.mount(Icon, { props: { name: '' } })
+    cy.mount(Icon, { props: {} })
     cy.get('span').should('not.exist')
     cy.get('svg').should('not.exist')
 
-    cy.mount(Icon, { props: {} })
+    cy.mount(Icon, { props: { name: null } })
     cy.get('span').should('not.exist')
     cy.get('svg').should('not.exist')
   })

package/src/components/Icon/Icon.md

@@ -6,6 +6,17 @@ components take an icon prop directly and render it through `Icon`
 internally — reach for `Icon` yourself only when you need an icon outside
 of one of those props.
 
+Pass the source through the canonical `icon` prop:
+
+```vue
+<Icon icon="lucide-circle-check" class="size-4" />
+```
+
+The existing `name` prop remains fully supported with the same value types.
+When both props are present, `icon` takes precedence; an explicit `icon=""` or
+`:icon="null"` intentionally renders nothing, while `:icon="undefined"` falls
+back to `name`.
+
 ## Lucide string
 
 <ComponentPreview name="Icon-Lucide" />

package/src/components/Icon/Icon.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { watchEffect } from 'vue'
+import { computed, watchEffect } from 'vue'
 import {
   isEmojiIconString,
   isLucideIconString,
@@ -11,28 +11,35 @@ defineOptions({ inheritAttrs: false })
 
 const props = defineProps<IconProps>()
 
+const resolvedIcon = computed(() =>
+  props.icon !== undefined ? props.icon : props.name,
+)
+
 watchEffect(() => {
-  warnUnsupportedIconString('Icon', 'name', props.name)
+  const sourceProp = props.icon !== undefined ? 'icon' : 'name'
+  warnUnsupportedIconString('Icon', sourceProp, resolvedIcon.value)
 })
 </script>
 
 <template>
   <span
-    v-if="typeof name === 'string' && isLucideIconString(name)"
-    :class="[name]"
+    v-if="typeof resolvedIcon === 'string' && isLucideIconString(resolvedIcon)"
+    :class="[resolvedIcon]"
     v-bind="$attrs"
     aria-hidden="true"
   />
   <span
-    v-else-if="typeof name === 'string' && isEmojiIconString(name)"
+    v-else-if="
+      typeof resolvedIcon === 'string' && isEmojiIconString(resolvedIcon)
+    "
     class="inline-flex items-center justify-center leading-none"
     v-bind="$attrs"
     aria-hidden="true"
-    >{{ name }}</span
+    >{{ resolvedIcon }}</span
   >
   <component
-    v-else-if="name && typeof name !== 'string'"
-    :is="name"
+    v-else-if="resolvedIcon && typeof resolvedIcon !== 'string'"
+    :is="resolvedIcon"
     v-bind="$attrs"
     aria-hidden="true"
   />

package/src/components/Icon/stories/ComponentIcon.vue

@@ -20,5 +20,5 @@ const CustomIcon = () =>
 </script>
 
 <template>
-  <Icon :name="CustomIcon" class="text-ink-gray-8" />
+  <Icon :icon="CustomIcon" class="text-ink-gray-8" />
 </template>

package/src/components/Icon/stories/Lucide.vue

@@ -4,9 +4,9 @@ import { Icon } from 'frappe-ui'
 
 <template>
   <div class="flex items-center gap-4 text-ink-gray-8">
-    <Icon name="lucide-plus" class="size-5" />
-    <Icon name="lucide-trash-2" class="size-5" />
-    <Icon name="lucide-check" class="size-5" />
-    <Icon name="🎉" class="text-xl" />
+    <Icon icon="lucide-plus" class="size-5" />
+    <Icon icon="lucide-trash-2" class="size-5" />
+    <Icon icon="lucide-check" class="size-5" />
+    <Icon icon="🎉" class="text-xl" />
   </div>
 </template>

package/src/components/Icon/types.ts

@@ -9,5 +9,11 @@ export interface IconProps {
    * Any other string (e.g. a bare feather-style name) is unsupported —
    * it renders nothing and warns once in dev. Falsy values render nothing.
    */
+  icon?: string | Component | null
+
+  /**
+   * Supported alternate name for `icon`. `icon` takes precedence when both
+   * props are supplied.
+   */
   name?: string | Component | null
 }

package/src/components/Progress/Progress.api.md

@@ -34,17 +34,9 @@
   },
   {
     name: 'intervals',
-    description: 'Whether to show interval markers on the progress bar',
+    description: 'Number of interval markers to show; omit for a continuous progress bar',
     required: false,
-    type: 'boolean',
-    default: 'false'
-  },
-  {
-    name: 'intervalCount',
-    description: 'Number of intervals to display if `intervals` is true',
-    required: false,
-    type: 'number',
-    default: '6'
+    type: 'number'
   }
 ]
 

package/src/components/Progress/Progress.cy.ts

@@ -42,12 +42,23 @@ describe('Progress', () => {
     }
   })
 
-  it('hint prop & slot', () => {
+  it('renders the label without a hint', () => {
+    cy.mount(Progress, { props: { label: 'Uploading', value: 20 } })
+
+    cy.contains('span', 'Uploading').should('be.visible')
+    cy.contains('20%').should('not.exist')
+  })
+
+  it('renders the hint prop without a label', () => {
+    cy.mount(Progress, { props: { value: 20, hint: true } })
+
+    cy.contains('span', '20%').should('be.visible')
+  })
+
+  it('renders the hint slot without a label or hint prop', () => {
     cy.mount(Progress, {
       props: {
-        label: 'label',
         value: 20,
-        hint: true,
       },
       slots: {
         hint: () => 'hint 20%',
@@ -65,8 +76,7 @@ describe('Progress', () => {
       props: {
         label: 'label',
         value,
-        intervals: true,
-        intervalCount,
+        intervals: intervalCount,
       },
     })
 
@@ -109,7 +119,7 @@ describe('Progress', () => {
       props: {
         label: 'label',
         value: 60,
-        intervals: true,
+        intervals: 6,
       },
     })
 

package/src/components/Progress/Progress.md

@@ -31,8 +31,8 @@ bar. Completing items is the most common source of a progress value.
 
 ## Multi-step form
 
-`intervals` turns the bar into a step indicator — one segment per step, filled
-up to the current one. This is what the interval variant is for.
+Pass the number of segments to `intervals` to turn the bar into a step
+indicator, filled up to the current step. Omit it for a continuous bar.
 
 <ComponentPreview name="Progress-MultiStepForm" />
 

package/src/components/Progress/Progress.playground.vue

@@ -17,8 +17,7 @@ const knobs: Knob[] = [
     ],
   },
   { name: 'hint', type: 'switch', default: true },
-  { name: 'intervals', type: 'switch', default: false },
-  { name: 'intervalCount', type: 'text', default: '6', width: '4rem' },
+  { name: 'intervals', type: 'text', default: '', width: '4rem' },
 ]
 
 function buildCode(v: Record<string, any>) {
@@ -26,11 +25,8 @@ function buildCode(v: Record<string, any>) {
   if (v.label) attrs.push(`label="${v.label}"`)
   if (v.size !== 'sm') attrs.push(`size="${v.size}"`)
   if (v.hint) attrs.push('hint')
-  if (v.intervals) {
-    attrs.push('intervals')
-    const ic = Number(v.intervalCount)
-    if (ic && ic !== 6) attrs.push(`:interval-count="${ic}"`)
-  }
+  const intervals = Number(v.intervals)
+  if (intervals > 0) attrs.push(`:intervals="${intervals}"`)
   return ['<Progress', ...attrs.map((a) => '  ' + a), '/>'].join('\n')
 }
 </script>
@@ -44,8 +40,7 @@ function buildCode(v: Record<string, any>) {
           :label="values.label || undefined"
           :size="values.size"
           :hint="values.hint"
-          :intervals="values.intervals"
-          :interval-count="Number(values.intervalCount) || 6"
+          :intervals="Number(values.intervals) || undefined"
         />
       </div>
     </template>

package/src/components/Progress/Progress.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="w-full space-y-[10px]">
     <div
-      v-if="props.label || props.hint"
+      v-if="props.label || props.hint || $slots.hint"
       class="flex items-baseline justify-between"
     >
       <span v-if="props.label" class="text-base-medium text-ink-gray-8">
@@ -42,7 +42,7 @@
       <!-- Interval Progress Bar -->
       <div
         v-else
-        v-for="index in intervalCount"
+        v-for="index in props.intervals"
         class="h-full w-full"
         :class="
           index <= filledIntervalCount
@@ -66,8 +66,6 @@ const props = withDefaults(defineProps<ProgressProps>(), {
   size: 'sm',
   hint: false,
   label: '',
-  intervals: false,
-  intervalCount: 6,
 })
 
 const indicatorContainerClasses = computed(() => {
@@ -104,7 +102,7 @@ const valueLabel = computed(
 )
 
 const filledIntervalCount = computed(() =>
-  Math.round((clampedValue.value / MAX_VALUE) * props.intervalCount),
+  Math.round((clampedValue.value / MAX_VALUE) * (props.intervals ?? 0)),
 )
 
 defineSlots<{

package/src/components/Progress/stories/MultiStepForm.vue

@@ -21,12 +21,7 @@ function continueForm() {
 
 <template>
   <div class="w-full max-w-[400px] rounded-7 border border-outline-gray-1 p-4">
-    <Progress
-      :value="percent"
-      :label="steps[step]"
-      :intervals="true"
-      :interval-count="steps.length"
-    >
+    <Progress :value="percent" :label="steps[step]" :intervals="steps.length">
       <template #hint>
         <span class="text-base text-ink-gray-5">
           Step {{ step + 1 }} of {{ steps.length }}

package/src/components/Progress/types.ts

@@ -11,9 +11,6 @@ export interface ProgressProps {
   /** Whether to show a hint/tooltip for the progress value */
   hint?: boolean
 
-  /** Whether to show interval markers on the progress bar */
-  intervals?: boolean
-
-  /** Number of intervals to display if `intervals` is true */
-  intervalCount?: number
+  /** Number of interval markers to show; omit for a continuous progress bar */
+  intervals?: number
 }

package/src/components/shared/action.ts

@@ -1,15 +1,15 @@
 /**
  * Shared action-button config for components that render caller-provided
- * actions (`Dialog`, `Alert`, `SidebarCard`): `ButtonProps` plus a
- * context-aware `onClick`.
+ * actions (`Dialog`, `Alert`, `SidebarCard`, `Divider`): `ButtonProps` plus
+ * `onClick`.
  */
 import type { ButtonProps } from '../Button'
 
 /**
  * Internal generic behind the public action types (`AlertAction`,
- * `DialogAction`): `ButtonProps` plus an `onClick` that receives the
- * component's context — `{ close }` for Dialog, `{ dismiss }` for Alert
- * and SidebarCard. Not exported from the package root.
+ * `DialogAction`, `DividerAction`): `ButtonProps` plus `onClick`. Dialog
+ * receives `{ close }`, Alert and SidebarCard receive `{ dismiss }`, and
+ * Divider has no callback context. Not exported from the package root.
  */
 export type Action<Ctx> = ButtonProps & {
   /** Called on click with the component's context (e.g. `{ dismiss }` or `{ close }`). */

package/src/components/shared/tabs/Pill.vue

@@ -108,8 +108,8 @@ function hasLabel(label: PillProps['label']) {
 
 <template>
   <span :class="rootClasses" :data-state="active ? 'active' : 'inactive'">
-    <Icon v-if="icon" :name="icon" :class="iconClass" />
-    <Icon v-else-if="iconLeft" :name="iconLeft" :class="iconClass" />
+    <Icon v-if="icon" :icon="icon" :class="iconClass" />
+    <Icon v-else-if="iconLeft" :icon="iconLeft" :class="iconClass" />
 
     <span
       v-if="$slots.prefix"