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

package/package.json

@@ -1,15 +1,21 @@
 {
   "name": "frappe-ui",
-  "version": "1.0.0-beta.2",
+  "version": "1.0.0-beta.21",
   "description": "A set of components and utilities for rapid UI development",
   "type": "module",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.css",
+    "**/*.vue"
+  ],
   "imports": {
     "#components/*": "./src/components/*",
     "#molecules/*": "./src/molecules/*",
     "#composables/*": "./src/composables/*",
     "#utils/*": "./src/utils/*"
   },
+  "bin": {
+    "tokens-v2": "./tailwind/migrate-tokens-v2.js"
+  },
   "scripts": {
     "test": "vitest --run",
     "test:coverage": "vitest --run --coverage",
@@ -17,8 +23,8 @@
     "test:cypress:coverage": "cross-env COVERAGE=true cypress run --component",
     "coverage": "yarn test:coverage && yarn test:cypress:coverage && yarn coverage:merge",
     "coverage:merge": "tsx .github/scripts/merge-coverage.ts",
-    "type-check": "vue-tsc --noEmit",
-    "type-check:tsc": "tsc --noEmit",
+    "type-check": "vue-tsc --noEmit -p tsconfig.app.json",
+    "type-check:tsc": "tsc --noEmit -p tsconfig.app.json",
     "format": "prettier -w ./src",
     "bump-and-release": "yarn test && git pull --rebase origin main && yarn run release-patch",
     "release-patch": "yarn version --patch && git push && git push --tags",
@@ -31,13 +37,18 @@
     "docs:build": "vitepress build docs",
     "docs:preview": "vitepress preview docs",
     "docs:gen": "tsx docs/scripts/propsgen.ts",
-    "docs:gen:all": "yarn docs:gen --all"
+    "docs:gen:all": "yarn docs:gen --all",
+    "sync-tokens": "node tailwind/figma-tokens-to-theme.js"
   },
   "exports": {
     ".": {
       "import": "./src/index.ts",
       "types": "./src/index.ts"
     },
+    "./experimental": {
+      "import": "./experimental.ts",
+      "types": "./experimental.ts"
+    },
     "./frappe": {
       "import": "./frappe/index.js"
     },
@@ -45,6 +56,14 @@
       "import": "./src/molecules/editor/index.ts",
       "types": "./src/molecules/editor/index.ts"
     },
+    "./list": {
+      "import": "./src/molecules/list/index.ts",
+      "types": "./src/molecules/list/index.ts"
+    },
+    "./code-editor": {
+      "import": "./src/components/CodeEditor/index.ts",
+      "types": "./src/components/CodeEditor/index.ts"
+    },
     "./drive": {
       "import": "./frappe/drive/index.js"
     },
@@ -65,12 +84,23 @@
     "./vite": {
       "import": "./vite/index.js"
     },
+    "./vitepress": {
+      "types": "./vitepress/index.d.ts",
+      "node": "./vitepress/index.node.ts",
+      "default": "./vitepress/index.ts"
+    },
     "./style.css": {
       "import": "./src/style.css"
     },
     "./editor-style.css": {
       "import": "./src/molecules/editor/style.css"
     },
+    "./list-style.css": {
+      "import": "./src/molecules/list/style.css"
+    },
+    "./hljs-theme.css": {
+      "import": "./src/components/TextEditor/hljs-github.css"
+    },
     "./tsconfig.base.json": {
       "types": "./tsconfig.base.json",
       "default": "./tsconfig.base.json"
@@ -83,6 +113,9 @@
     "vite",
     "icons",
     "tailwind",
+    "vitepress",
+    "experimental",
+    "experimental.ts",
     "tsconfig.base.json"
   ],
   "repository": {
@@ -92,38 +125,59 @@
   "author": "Frappe Technologies Pvt. Ltd.",
   "license": "MIT",
   "dependencies": {
+    "@codemirror/lang-css": "^6.3.0",
+    "@codemirror/lang-html": "^6.4.9",
+    "@codemirror/lang-javascript": "^6.2.2",
+    "@codemirror/lang-json": "^6.0.1",
+    "@codemirror/lang-markdown": "^6.3.1",
+    "@codemirror/lang-python": "^6.1.6",
+    "@codemirror/lang-sass": "^6.0.2",
+    "@codemirror/lang-sql": "^6.8.0",
+    "@codemirror/lang-xml": "^6.1.0",
+    "@codemirror/lang-yaml": "^6.1.3",
     "@floating-ui/dom": "^1.7.4",
     "@headlessui/vue": "^1.7.14",
     "@popperjs/core": "^2.11.2",
     "@tailwindcss/forms": "^0.5.3",
     "@tailwindcss/line-clamp": "^0.4.4",
     "@tailwindcss/typography": "^0.5.16",
-    "@tiptap/core": "^3.11.0",
-    "@tiptap/extension-bubble-menu": "^3.11.0",
-    "@tiptap/extension-code": "^3.11.0",
-    "@tiptap/extension-code-block": "^3.11.0",
-    "@tiptap/extension-code-block-lowlight": "^3.11.0",
-    "@tiptap/extension-color": "^3.11.0",
-    "@tiptap/extension-heading": "^3.11.0",
-    "@tiptap/extension-highlight": "^3.11.0",
-    "@tiptap/extension-image": "^3.11.0",
-    "@tiptap/extension-link": "^3.11.0",
-    "@tiptap/extension-list": "^3.11.0",
-    "@tiptap/extension-mention": "^3.11.0",
-    "@tiptap/extension-node-range": "^3.11.0",
-    "@tiptap/extension-placeholder": "^3.11.0",
-    "@tiptap/extension-table": "^3.11.0",
-    "@tiptap/extension-task-item": "^3.11.0",
-    "@tiptap/extension-task-list": "^3.11.0",
-    "@tiptap/extension-text-align": "^3.11.0",
-    "@tiptap/extension-text-style": "^3.11.0",
-    "@tiptap/extension-typography": "^3.11.0",
-    "@tiptap/extensions": "^3.11.0",
-    "@tiptap/pm": "^3.11.0",
-    "@tiptap/starter-kit": "^3.11.0",
-    "@tiptap/suggestion": "^3.11.0",
-    "@tiptap/vue-3": "^3.11.0",
+    "@tiptap/core": "^3.26.0",
+    "@tiptap/extension-blockquote": "^3.26.0",
+    "@tiptap/extension-bold": "^3.26.0",
+    "@tiptap/extension-bubble-menu": "^3.26.0",
+    "@tiptap/extension-code": "^3.26.0",
+    "@tiptap/extension-code-block": "^3.26.0",
+    "@tiptap/extension-code-block-lowlight": "^3.26.0",
+    "@tiptap/extension-color": "^3.26.0",
+    "@tiptap/extension-document": "^3.26.0",
+    "@tiptap/extension-hard-break": "^3.26.0",
+    "@tiptap/extension-heading": "^3.26.0",
+    "@tiptap/extension-highlight": "^3.26.0",
+    "@tiptap/extension-horizontal-rule": "^3.26.0",
+    "@tiptap/extension-image": "^3.26.0",
+    "@tiptap/extension-italic": "^3.26.0",
+    "@tiptap/extension-link": "^3.26.0",
+    "@tiptap/extension-list": "^3.26.0",
+    "@tiptap/extension-mention": "^3.26.0",
+    "@tiptap/extension-node-range": "^3.26.0",
+    "@tiptap/extension-paragraph": "^3.26.0",
+    "@tiptap/extension-placeholder": "^3.26.0",
+    "@tiptap/extension-strike": "^3.26.0",
+    "@tiptap/extension-table": "^3.26.0",
+    "@tiptap/extension-task-item": "^3.26.0",
+    "@tiptap/extension-task-list": "^3.26.0",
+    "@tiptap/extension-text": "^3.26.0",
+    "@tiptap/extension-text-align": "^3.26.0",
+    "@tiptap/extension-text-style": "^3.26.0",
+    "@tiptap/extension-typography": "^3.26.0",
+    "@tiptap/extension-underline": "^3.26.0",
+    "@tiptap/extensions": "^3.26.0",
+    "@tiptap/pm": "^3.26.0",
+    "@tiptap/starter-kit": "^3.26.0",
+    "@tiptap/suggestion": "^3.26.0",
+    "@tiptap/vue-3": "^3.26.0",
     "@vueuse/core": "^10.4.1",
+    "codemirror": "^6.0.1",
     "dayjs": "^1.11.13",
     "dompurify": "^3.4.0",
     "echarts": "^5.6.0",
@@ -178,10 +232,26 @@
     "vue-tsc": "^3.2.7"
   },
   "resolutions": {
-    "prosemirror-model": "1.25.2",
-    "prosemirror-state": "1.4.3",
-    "prosemirror-view": "1.40.0",
-    "prosemirror-transform": "1.10.4",
+    "prosemirror-model": "1.25.7",
+    "prosemirror-state": "1.4.4",
+    "prosemirror-view": "1.41.8",
+    "prosemirror-transform": "1.12.0",
+    "@tiptap/extension-blockquote": "3.26.0",
+    "@tiptap/extension-bold": "3.26.0",
+    "@tiptap/extension-bullet-list": "3.26.0",
+    "@tiptap/extension-document": "3.26.0",
+    "@tiptap/extension-dropcursor": "3.26.0",
+    "@tiptap/extension-gapcursor": "3.26.0",
+    "@tiptap/extension-hard-break": "3.26.0",
+    "@tiptap/extension-horizontal-rule": "3.26.0",
+    "@tiptap/extension-italic": "3.26.0",
+    "@tiptap/extension-list-item": "3.26.0",
+    "@tiptap/extension-list-keymap": "3.26.0",
+    "@tiptap/extension-ordered-list": "3.26.0",
+    "@tiptap/extension-paragraph": "3.26.0",
+    "@tiptap/extension-strike": "3.26.0",
+    "@tiptap/extension-text": "3.26.0",
+    "@tiptap/extension-underline": "3.26.0",
     "defu": "^6.1.5",
     "esbuild": "^0.25.0",
     "lodash": "^4.18.0",

package/src/components/Alert/Alert.md

@@ -2,6 +2,10 @@
 
 A prominent message used to communicate important information, warnings, or status updates to the user.
 
+## Playground
+
+<ClientOnly><AlertBuilder /></ClientOnly>
+
 ## Themes
 <ComponentPreview name="Alert-Themes" />
 

package/src/components/Alert/Alert.vue

@@ -28,10 +28,10 @@ const classes = computed(() => {
 
 const icon = computed(() => {
   const data = {
-    yellow: { class: 'lucide-triangle-alert', css: 'text-ink-amber-3' },
-    blue: { class: 'lucide-info', css: 'text-ink-blue-3' },
-    red: { class: 'lucide-circle-x', css: 'text-ink-red-3' },
-    green: { class: 'lucide-circle-check', css: 'text-ink-green-3' },
+    yellow: { class: 'lucide-triangle-alert', css: 'text-ink-amber-6' },
+    blue: { class: 'lucide-info', css: 'text-ink-blue-6' },
+    red: { class: 'lucide-circle-x', css: 'text-ink-red-6' },
+    green: { class: 'lucide-circle-check', css: 'text-ink-green-6' },
   }
   return props.theme ? data[props.theme] : null
 })

package/src/components/Autocomplete/Autocomplete.vue

@@ -26,7 +26,7 @@
           }"
         >
           <div class="w-full space-y-1.5">
-            <label v-if="props.label" class="block text-xs text-ink-gray-5">
+            <label v-if="props.label" class="block text-base text-ink-gray-5">
               {{ props.label }}
             </label>
             <button
@@ -59,7 +59,7 @@
       <template #body="{ isOpen, togglePopover }">
         <div v-show="isOpen">
           <div
-            class="relative mt-1 rounded-lg bg-surface-modal text-base shadow-2xl"
+            class="relative mt-1 rounded-lg bg-surface-elevation-2 text-base shadow-2xl"
             :class="bodyClasses"
           >
             <ComboboxOptions
@@ -69,7 +69,7 @@
             >
               <div
                 v-if="!hideSearch"
-                class="sticky top-0 z-10 flex items-stretch space-x-1.5 bg-surface-modal py-1.5"
+                class="sticky top-0 z-10 flex items-stretch space-x-1.5 bg-surface-elevation-2 py-1.5"
               >
                 <div class="relative w-full">
                   <ComboboxInput
@@ -101,7 +101,7 @@
               >
                 <div
                   v-if="group.group && !group.hideLabel"
-                  class="sticky top-10 truncate bg-surface-modal px-2.5 py-1.5 text-sm font-medium text-ink-gray-5"
+                  class="sticky top-10 truncate bg-surface-elevation-2 px-2.5 py-1.5 text-sm-medium text-ink-gray-5"
                 >
                   {{ group.group }}
                 </div>
@@ -118,9 +118,9 @@
                 >
                   <li
                     :class="[
-                      'flex cursor-pointer items-center justify-between rounded px-2.5 py-1.5 text-base',
+                      'flex cursor-pointer items-center justify-between rounded px-2.5 py-1.5 text-base transition-colors duration-100 ease-out',
                       {
-                        'bg-surface-gray-3': active,
+                        'bg-surface-alpha-gray-2': active,
                         'opacity-50': option.disabled,
                       },
                     ]"

package/src/components/Avatar/Avatar.md

@@ -2,6 +2,10 @@
 
 A visual representation of a user, typically shown as an image, initials, or an icon.
 
+## Playground
+
+<ClientOnly><AvatarBuilder /></ClientOnly>
+
 ## Themes
 <ComponentPreview name="Avatar-Shapes" />
 

package/src/components/Avatar/Avatar.vue

@@ -25,7 +25,7 @@
     <div
       v-if="$slots.indicator"
       :class="[
-        'absolute bottom-0 right-0 grid place-items-center rounded-full bg-surface-white',
+        'absolute bottom-0 right-0 grid place-items-center rounded-full bg-surface-base',
         indicatorContainerClasses,
       ]"
     >
@@ -37,7 +37,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref, computed, useAttrs } from 'vue'
 import type { AvatarProps } from './types'
 
 const imgFetchError = ref(false)
@@ -47,6 +47,24 @@ const props = withDefaults(defineProps<AvatarProps>(), {
   shape: 'circle',
 })
 
+// Let a consumer size the avatar with a Tailwind utility (`class="size-16"`)
+// instead of the `size` prop enum. When a sizing utility is present we drop the
+// enum's `w-*/h-*` so the two don't both land on the root and fight; the class
+// (applied via inheritAttrs) then wins on its own. Handles responsive/variant
+// prefixes like `sm:size-16`.
+const attrs = useAttrs()
+const hasSizeOverride = computed(() => {
+  const cls = Array.isArray(attrs.class)
+    ? attrs.class.join(' ')
+    : typeof attrs.class === 'string'
+      ? attrs.class
+      : ''
+  return cls.split(/\s+/).some((token) => {
+    const base = token.includes(':') ? token.slice(token.lastIndexOf(':') + 1) : token
+    return /^-?(size|w|h|min-w|max-w|min-h|max-h)-/.test(base)
+  })
+})
+
 const shapeClasses = computed(() => {
   return {
     circle: 'rounded-full',
@@ -63,6 +81,7 @@ const shapeClasses = computed(() => {
 })
 
 const sizeClasses = computed(() => {
+  if (hasSizeOverride.value) return ''
   return {
     xs: 'w-4 h-4',
     sm: 'w-5 h-5',
@@ -81,8 +100,8 @@ const labelClasses = computed(() => {
     md: 'text-base',
     lg: 'text-base',
     xl: 'text-lg',
-    '2xl': 'text-xl',
-    '3xl': 'text-2xl',
+    '2xl': 'text-2xl',
+    '3xl': 'text-3xl',
   }[props.size]
   return ['font-medium', sizeClass]
 })

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

@@ -9,7 +9,7 @@
     name: 'theme',
     description: 'Visual color theme of the badge',
     required: false,
-    type: '"blue" | "red" | "green" | "gray" | "orange"',
+    type: '"blue" | "red" | "green" | "gray" | "amber" | "violet" | "orange"',
     default: '"gray"'
   },
   {

package/src/components/Badge/Badge.cy.ts

@@ -41,7 +41,7 @@ describe('<Badge />', () => {
         label: 'Blue',
       },
     })
-    cy.get('.inline-flex.rounded-full').should('have.class', 'text-ink-blue-2')
+    cy.get('.inline-flex.rounded-full').should('have.class', 'text-ink-blue-8')
     cy.get('.inline-flex.rounded-full').should('have.class', 'bg-surface-blue-2')
 
     // Green
@@ -51,18 +51,28 @@ describe('<Badge />', () => {
         label: 'Green',
       },
     })
-    cy.get('.inline-flex.rounded-full').should('have.class', 'text-ink-green-3')
+    cy.get('.inline-flex.rounded-full').should('have.class', 'text-ink-green-8')
     cy.get('.inline-flex.rounded-full').should('have.class', 'bg-surface-green-2')
 
-    // Orange
+    // Amber
+    cy.mount(Badge, {
+      props: {
+        theme: 'amber',
+        label: 'Amber',
+      },
+    })
+    cy.get('.inline-flex.rounded-full').should('have.class', 'text-ink-amber-8')
+    cy.get('.inline-flex.rounded-full').should('have.class', 'bg-surface-amber-2')
+
+    // Orange (deprecated alias for amber)
     cy.mount(Badge, {
       props: {
         theme: 'orange',
         label: 'Orange',
       },
     })
-    cy.get('.inline-flex.rounded-full').should('have.class', 'text-ink-amber-3')
-    cy.get('.inline-flex.rounded-full').should('have.class', 'bg-surface-amber-1')
+    cy.get('.inline-flex.rounded-full').should('have.class', 'text-ink-amber-8')
+    cy.get('.inline-flex.rounded-full').should('have.class', 'bg-surface-amber-2')
 
     // Red
     cy.mount(Badge, {
@@ -71,20 +81,30 @@ describe('<Badge />', () => {
         label: 'Red',
       },
     })
-    cy.get('.inline-flex.rounded-full').should('have.class', 'text-ink-red-4')
+    cy.get('.inline-flex.rounded-full').should('have.class', 'text-ink-red-8')
     cy.get('.inline-flex.rounded-full').should('have.class', 'bg-surface-red-2')
+
+    // Violet
+    cy.mount(Badge, {
+      props: {
+        theme: 'violet',
+        label: 'Violet',
+      },
+    })
+    cy.get('.inline-flex.rounded-full').should('have.class', 'text-ink-violet-8')
+    cy.get('.inline-flex.rounded-full').should('have.class', 'bg-surface-violet-2')
   })
 
   it('renders different variants with gray theme', () => {
-    // Solid
+    // Solid (gray uses semantic token; non-gray solids use raw palette)
     cy.mount(Badge, {
       props: {
         variant: 'solid',
         label: 'Solid',
       },
     })
-    cy.get('.inline-flex.rounded-full').should('have.class', 'text-ink-white')
-    cy.get('.inline-flex.rounded-full').should('have.class', 'bg-surface-gray-7')
+    cy.get('.inline-flex.rounded-full').should('have.class', 'text-ink-base')
+    cy.get('.inline-flex.rounded-full').should('have.class', 'bg-surface-gray-10')
 
     // Subtle (default)
     cy.mount(Badge, {
@@ -104,8 +124,7 @@ describe('<Badge />', () => {
       },
     })
     cy.get('.inline-flex.rounded-full').should('have.class', 'text-ink-gray-6')
-    cy.get('.inline-flex.rounded-full').should('have.class', 'bg-transparent')
-    cy.get('.inline-flex.rounded-full').should('have.class', 'border-outline-gray-1')
+    cy.get('.inline-flex.rounded-full').should('have.class', 'border-outline-gray-2')
 
     // Ghost
     cy.mount(Badge, {
@@ -115,7 +134,6 @@ describe('<Badge />', () => {
       },
     })
     cy.get('.inline-flex.rounded-full').should('have.class', 'text-ink-gray-6')
-    cy.get('.inline-flex.rounded-full').should('have.class', 'bg-transparent')
   })
 
   it('renders different sizes', () => {
@@ -149,7 +167,7 @@ describe('<Badge />', () => {
       },
     })
     cy.get('.inline-flex.rounded-full').should('have.class', 'h-6')
-    cy.get('.inline-flex.rounded-full').should('have.class', 'text-sm')
+    cy.get('.inline-flex.rounded-full').should('have.class', 'text-[13px]')
     cy.get('.inline-flex.rounded-full').should('have.class', 'px-2')
   })
 
@@ -250,7 +268,7 @@ describe('<Badge />', () => {
         prefix: () => h(TestIcon),
       },
     })
-    cy.get('[data-cy="prefix-icon"]').parent().should('have.class', 'max-h-4')
+    cy.get('[data-cy="prefix-icon"]').parent().should('have.class', 'size-2.5')
 
     // Test with md size (default)
     cy.mount(Badge, {
@@ -259,7 +277,7 @@ describe('<Badge />', () => {
         prefix: () => h(TestIcon),
       },
     })
-    cy.get('[data-cy="prefix-icon"]').parent().should('have.class', 'max-h-4')
+    cy.get('[data-cy="prefix-icon"]').parent().should('have.class', 'size-2.5')
 
     // Test with lg size
     cy.mount(Badge, {
@@ -268,6 +286,6 @@ describe('<Badge />', () => {
         prefix: () => h(TestIcon),
       },
     })
-    cy.get('[data-cy="prefix-icon"]').parent().should('have.class', 'max-h-6')
+    cy.get('[data-cy="prefix-icon"]').parent().should('have.class', 'size-3')
   })
 })

package/src/components/Badge/Badge.md

@@ -2,12 +2,28 @@
 
 A small label used to highlight status, counts, or metadata associated with an element.
 
-## Variants
+## Playground
 
-<ComponentPreview name="Badge-Variants" />
+<ClientOnly><BadgeBuilder /></ClientOnly>
 
-## Themes
+## Event status
 
-<ComponentPreview name="Badge-Themes" />
+<ComponentPreview name="Badge-EventStatus" />
+
+## Call metadata
+
+<ComponentPreview name="Badge-CallMeta" />
+
+## List status
+
+<ComponentPreview name="Badge-ListStatus" />
+
+## Row tags
+
+<ComponentPreview name="Badge-RowTags" />
+
+## Reactions
+
+<ComponentPreview name="Badge-Reactions" />
 
 <!-- @include: ./Badge.api.md -->