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

package/experimental/MultiEmailInput/types.ts

@@ -0,0 +1,138 @@
+import type { InputLabelingProps } from '../../src/composables/useInputLabeling'
+import type {
+  PopoverSide,
+  PopoverAlign,
+} from '../../src/components/Popover/types'
+import type { SelectionSize } from '../../src/components/shared/selection/utils'
+
+/** Sizes for the control and option rows (shared with the selection inputs). */
+export type MultiEmailInputSize = SelectionSize
+
+/** A suggestion shown in the dropdown. `value` is the email address. */
+export interface MultiEmailOption {
+  /** Display name; falls back to `value`. */
+  label: string
+  /** The email address — used as the chip value and the model entry. */
+  value: string
+  /**
+   * Avatar image URL. An `Avatar` always renders for a suggestion row and a
+   * chip — with this image when present, otherwise initials from `label`.
+   * Named `avatar` rather than the house `icon` field on purpose: this control
+   * is person-centric, so the leading visual is always a face / initials, never
+   * a generic icon or `Component`.
+   */
+  avatar?: string
+  /** Disables selecting this row. */
+  disabled?: boolean
+  [key: string]: any
+}
+
+export interface MultiEmailTagSlotProps {
+  /** The chip's email value. */
+  value: string
+  /** The matched suggestion for this email, if one has been seen. */
+  option: MultiEmailOption | null
+  /** Index of the chip in the model. */
+  index: number
+  /** Removes this chip from the model. */
+  removeTag: () => void
+}
+
+export interface MultiEmailItemSlotProps {
+  /** The suggestion currently being rendered. */
+  item: MultiEmailOption
+  /** Current input query. */
+  query: string
+}
+
+export interface MultiEmailInputProps extends InputLabelingProps {
+  /**
+   * Suggestions rendered in the dropdown. The host fetches these in response to
+   * `update:query` (already-selected entries are filtered out automatically).
+   */
+  options?: MultiEmailOption[]
+
+  /** Replaces the results with a loading state. */
+  loading?: boolean
+
+  /** Size of the control and option rows. */
+  size?: MultiEmailInputSize
+
+  /** Placeholder shown when there are no chips. */
+  placeholder?: string
+
+  /** Empty-state copy shown when there are no suggestions. */
+  emptyText?: string
+
+  /** Shown beside the spinner while `loading`. */
+  loadingText?: string
+
+  /** Disables the control. */
+  disabled?: boolean
+
+  /** Validator for typed addresses. Defaults to a practical email check. */
+  validate?: (value: string) => boolean
+
+  /** Builds the "create" row label for a typed address. */
+  createLabel?: (value: string) => string
+
+  /** Preferred popover side. */
+  side?: PopoverSide
+
+  /** Preferred popover alignment. */
+  align?: PopoverAlign
+
+  /** Gap between control and content. */
+  offset?: number
+
+  /** Teleport target for the popover content. */
+  portalTo?: string | HTMLElement
+}
+
+export interface MultiEmailInputEmits {
+  /** Fired when the model changes. Diff against the previous value if you need
+   * per-address add/remove notifications. */
+  'update:modelValue': [value: string[]]
+
+  /** Fired when the input query changes (debounce in the host). */
+  'update:query': [value: string]
+
+  /** A typed address failed validation. */
+  invalid: [value: string]
+
+  /** The input received focus. */
+  focus: [event: FocusEvent]
+
+  /** The input lost focus. */
+  blur: [event: FocusEvent]
+}
+
+export interface MultiEmailInputSlots {
+  /** Overrides the rendered label content. Receives `{ required }`. */
+  label?: (props: { required: boolean }) => any
+
+  /** Overrides the rendered description content. */
+  description?: () => any
+
+  /** Replaces a chip's inner content (avatar + text + remove button). */
+  tag?: (props: MultiEmailTagSlotProps) => any
+
+  /** Replaces the prefix (avatar) region of a suggestion row. */
+  'item-prefix'?: (props: MultiEmailItemSlotProps) => any
+
+  /** Replaces the label region of a suggestion row. */
+  'item-label'?: (props: MultiEmailItemSlotProps) => any
+
+  /** Replaces the suffix region of a suggestion row. */
+  'item-suffix'?: (props: MultiEmailItemSlotProps) => any
+
+  /** Fallback content rendered when there are no suggestions. */
+  empty?: (props: { query: string }) => any
+}
+
+export interface MultiEmailInputExposed {
+  /** Focuses the text input. */
+  focus: () => void
+  /** Clears all chips. */
+  reset: () => void
+}

package/experimental/MultiEmailInput/utils.ts

@@ -0,0 +1,60 @@
+// Row + sizing class helpers shared with the built-in selection components, so
+// MultiEmailInput's dropdown rows match Combobox / MultiSelect exactly.
+export {
+  inputFontSizeClasses,
+  itemClasses,
+  itemRootSizeClasses,
+  toItemListSize,
+} from '../../src/components/shared/selection/utils'
+
+/**
+ * Practical email validation, copied verbatim from Zod v4
+ * (`packages/zod/src/v4/core/regexes.ts`). Rejects a leading dot and consecutive
+ * dots, and requires a dotted domain with a 2+ character TLD. Kept as a flat,
+ * anchored `RegExp` literal so other variants can be added Zod-style later.
+ */
+export const emailRegex: RegExp =
+  /^(?!\.)(?!.*\.\.)([A-Za-z0-9_'+\-\.]*)[A-Za-z0-9_+-]@([A-Za-z0-9][A-Za-z0-9\-]*\.)+[A-Za-z]{2,}$/
+
+/** Default validator for typed addresses. */
+export function isValidEmail(value: string): boolean {
+  return emailRegex.test(value.trim())
+}
+
+/**
+ * Split a free-text blob into candidate tokens on comma, semicolon, newline and
+ * tab, keeping a quoted display name intact so `"Doe, John" <a@b.com>` (which
+ * contains a comma inside quotes) stays one token. Plain spaces are NOT
+ * separators for that reason — paste a comma/newline-separated list.
+ */
+export function splitEmailTokens(input: string): string[] {
+  const parts: string[] = []
+  let current = ''
+  let inQuotes = false
+  for (const char of input) {
+    if (char === '"') {
+      inQuotes = !inQuotes
+      current += char
+    } else if (
+      (char === ',' ||
+        char === ';' ||
+        char === '\n' ||
+        char === '\r' ||
+        char === '\t') &&
+      !inQuotes
+    ) {
+      if (current.trim()) parts.push(current.trim())
+      current = ''
+    } else {
+      current += char
+    }
+  }
+  if (current.trim()) parts.push(current.trim())
+  return parts
+}
+
+/** Reduce a `Name <email>` token to the bare address. */
+export function extractEmail(token: string): string {
+  const match = token.match(/<([^>]+)>/)
+  return (match ? match[1] : token).trim()
+}

package/experimental.ts

@@ -0,0 +1,12 @@
+// frappe-ui experimental — UNSTABLE. No backward-compatibility promise.
+
+export * from './experimental/FloatingWindow'
+export * from './experimental/MultiEmailInput'
+export { inputFontSizeClasses } from './src/components/Combobox/utils'
+export {
+  InputLabel,
+  InputDescription,
+  InputError,
+  LabelingWrapper,
+} from './src/components/InputLabeling'
+export { useInputLabeling } from './src/composables/useInputLabeling'

package/frappe/Billing/SignupBanner.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="!isSidebarCollapsed"
-    class="flex flex-col gap-3 shadow-sm rounded-lg py-2.5 px-3 bg-surface-white text-base"
+    class="flex flex-col gap-3 shadow-sm rounded-lg py-2.5 px-3 bg-surface-base text-base"
   >
     <div class="flex flex-col gap-1">
       <slot>

package/frappe/Billing/TrialBanner.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="!isSidebarCollapsed && showBanner"
-    class="flex flex-col gap-3 shadow-sm rounded-lg py-2.5 px-3 bg-surface-modal text-base"
+    class="flex flex-col gap-3 shadow-sm rounded-lg py-2.5 px-3 bg-surface-elevation-2 text-base"
   >
     <div class="flex flex-col gap-1">
       <div class="inline-flex text-ink-gray-9 gap-2 items-center font-medium">

package/frappe/DataImport/DataImport.vue

@@ -1,6 +1,6 @@
 <template>
   <header
-		class="sticky flex items-center justify-between space-x-28 top-0 z-10 border-b bg-surface-white px-3 py-2.5 sm:px-5"
+		class="sticky flex items-center justify-between space-x-28 top-0 z-10 border-b bg-surface-base px-3 py-2.5 sm:px-5"
     >
       <Breadcrumbs :items="breadcrumbs" />
       <ImportSteps class="flex-1 hidden lg:flex" v-if="step != 'list'" :data="data" :step="step" @updateStep="updateStep" />

package/frappe/DataImport/DataImportList.vue

@@ -2,7 +2,7 @@
     <div class="flex min-h-0 flex-col text-base py-5 w-[90%] lg:w-[700px] mx-auto">
 		<div class="flex items-center justify-between">
 			<div>
-				<div class="text-xl font-semibold mb-1 text-ink-gray-9">
+				<div class="text-lg font-semibold mb-1 text-ink-gray-9">
 					Data Import
 				</div>
 				<div class="text-ink-gray-6 leading-5">

package/frappe/DataImport/ImportSteps.vue

@@ -7,10 +7,10 @@
         @click="emit('updateStep', 'upload', { ...data })"
         >
             <FeatherIcon v-if="uploadStepCompleted" name="check" class="size-5 text-sm border rounded-[5px] p-0.5" :class="{
-                'text-ink-white bg-surface-gray-7': onUploadStep,
+                'text-ink-base bg-surface-gray-10': onUploadStep,
             }"/>
             <div v-else class="text-sm border rounded-[5px] px-1.5 py-0.5" :class="{
-                'text-ink-white bg-surface-gray-7': onUploadStep,
+                'text-ink-base bg-surface-gray-10': onUploadStep,
             }">
                 <span>
                     1
@@ -28,10 +28,10 @@
         @click="moveToMapStep()"
         >
             <FeatherIcon v-if="mapStepCompleted" name="check" class="size-5 text-sm border rounded-[5px] p-0.5" :class="{
-                'text-ink-white bg-surface-gray-7': onMapStep,
+                'text-ink-base bg-surface-gray-10': onMapStep,
             }"/>
             <div v-else class="text-sm border rounded-[5px] px-1.5 py-0.5" :class="{
-                'text-ink-white bg-surface-gray-7': onMapStep,
+                'text-ink-base bg-surface-gray-10': onMapStep,
             }">
                 <span>
                     2
@@ -49,10 +49,10 @@
         @click="moveToPreviewStep()"
         >
             <FeatherIcon v-if="previewStepCompleted" name="check" class="size-5 text-sm border rounded-[5px] p-0.5" :class="{
-                'text-ink-white bg-surface-gray-7': onPreviewStep,
+                'text-ink-base bg-surface-gray-10': onPreviewStep,
             }"/>
             <div v-else class="text-sm border rounded-[5px] px-1.5 py-0.5" :class="{
-                'text-ink-white bg-surface-gray-7': onPreviewStep,
+                'text-ink-base bg-surface-gray-10': onPreviewStep,
             }">
                 <span>
                     3

package/frappe/DataImport/MappingStep.vue

@@ -2,7 +2,7 @@
     <div class="w-[85%] lg:w-[700px] mx-auto py-12 space-y-8 text-base">
        <div class="flex justify-between">
             <div class="space-y-2">
-                <div class="text-lg font-semibold text-ink-gray-9">
+                <div class="text-md font-semibold text-ink-gray-9">
                     <span>
                         Map Data
                     </span>

package/frappe/DataImport/PreviewStep.vue

@@ -2,7 +2,7 @@
     <div class="text-base h-full flex flex-col w-[90%] lg:w-[700px] mx-auto py-12 space-y-10">
         <div class="flex flex-col space-y-1">
             <div class="flex items-center justify-between text-ink-gray-7">
-                <div class="flex items-center space-x-2 text-lg font-semibold text-ink-gray-9">
+                <div class="flex items-center space-x-2 text-md font-semibold text-ink-gray-9">
                     <span>
                         Review and Import
                     </span>
@@ -47,8 +47,8 @@
             </div>
             <div class="rounded-md bg-surface-amber-2 p-2 space-y-2 text-xs">
                 <div v-for="warning in warnings" class="flex items-center space-x-2">
-                    <FeatherIcon name="alert-circle" class="size-3 text-ink-amber-3" />
-                    <div v-html="warning.message" class="text-ink-amber-3"></div>
+                    <FeatherIcon name="alert-circle" class="size-3 text-ink-amber-6" />
+                    <div v-html="warning.message" class="text-ink-amber-6"></div>
                 </div>
             </div>
         </div>
@@ -71,7 +71,7 @@
                         </th>
                     </tr>
                 </thead>
-                <tbody class="bg-surface-white divide-y divide-surface-gray-2">
+                <tbody class="bg-surface-base divide-y divide-surface-gray-2">
                     <tr v-for="(row, rowIndex) in previewData" :key="rowIndex">
                         <td
                             v-for="column in previewColumns"
@@ -117,12 +117,12 @@
                             </th>
                         </tr>
                     </thead>
-                    <tbody class="bg-surface-white divide-y divide-surface-gray-2">
+                    <tbody class="bg-surface-base divide-y divide-surface-gray-2">
                         <tr v-for="(row, rowIndex) in filteredLogs" :key="rowIndex" class="group">
                             <td class="px-3 py-2 text-sm text-ink-gray-7 border-r">
                                 <div class="flex items-center justify-center space-x-2">
                                     <div v-if="row.success" class="size-1.5 bg-surface-green-3 rounded"></div>
-                                    <div v-else class="size-1.5 bg-surface-red-5 rounded"></div>
+                                    <div v-else class="size-1.5 bg-surface-red-7 rounded"></div>
                                     <div>
                                         {{ JSON.parse(row["row_indexes"])[0] - 1 }}
                                     </div>
@@ -312,11 +312,11 @@ const importErrorCount = computed(() => {
 
 const importBannerClass = computed(() => {
     if (importErrorCount.value == 0) {
-        return 'bg-surface-green-2 text-ink-green-3'
+        return 'bg-surface-green-2 text-ink-green-6'
     } else if (importSuccessCount.value == 0) {
-        return 'bg-surface-red-2 text-ink-red-3'
+        return 'bg-surface-red-2 text-ink-red-6'
     } else {
-        return 'bg-surface-amber-2 text-ink-amber-3'
+        return 'bg-surface-amber-2 text-ink-amber-6'
     }
 })
 

package/frappe/DataImport/TemplateModal.vue

@@ -37,7 +37,7 @@
                                     <label
                                         :for="`checkbox-${doctype}-${field.fieldname}`"
                                         :class="{
-                                            'text-ink-red-3': field.reqd
+                                            'text-ink-red-6': field.reqd
                                         }">
                                         {{ field.label || field.fieldname }}
                                     </label>

package/frappe/DataImport/UploadStep.vue

@@ -2,7 +2,7 @@
     <div class="text-base h-full flex flex-col w-[85%] lg:w-[700px] mx-auto pt-12 space-y-8">
         <div class="flex flex-col space-y-1 text-ink-gray-7">
             <div class="flex items-center justify-between">
-                <div class="flex items-center space-x-2 text-xl font-semibold text-ink-gray-9">
+                <div class="flex items-center space-x-2 text-lg font-semibold text-ink-gray-9">
                     <span>
                         Choose Import
                     </span>
@@ -47,7 +47,7 @@
                         </span>
                     </div>
                 </div>
-                <div v-else-if="showFileSelector && uploading" class="w-4/5 lg:w-2/5 bg-surface-white border rounded-md p-2">
+                <div v-else-if="showFileSelector && uploading" class="w-4/5 lg:w-2/5 bg-surface-base border rounded-md p-2">
                     <div class="space-y-2">
                         <div class="font-medium">
                             {{ uploadingdFile.name }}
@@ -58,14 +58,14 @@
                     </div>
                     <div class="w-full bg-surface-gray-1 h-1 rounded-full mt-3">
                         <div
-                            class="bg-surface-gray-7 h-1 rounded-full transition-all duration-500 ease-in-out"
+                            class="bg-surface-gray-10 h-1 rounded-full transition-all duration-500 ease-in-out"
                             :style="`width: ${uploadProgress}%`"
                         ></div>
                     </div>
                 </div>
             </div>
             <div v-else-if="importFile" class="h-[300px] flex items-center justify-center bg-surface-gray-1 border border-dashed border-outline-gray-3 rounded-md">
-                <div class="w-4/5 lg:w-2/5 bg-surface-white border rounded-md p-2 flex items-center justify-between items-center">
+                <div class="w-4/5 lg:w-2/5 bg-surface-base border rounded-md p-2 flex items-center justify-between items-center">
                     <div class="space-y-2">
                         <div class="font-medium leading-5 text-ink-gray-9">
                             {{ importFile.file_name || importFile.split("/").pop() }}
@@ -76,7 +76,7 @@
                     </div>
                     <FeatherIcon
                         name="trash-2"
-                        class="size-4 stroke-1.5 text-ink-red-3 cursor-pointer"
+                        class="size-4 stroke-1.5 text-ink-red-6 cursor-pointer"
                         @click="deleteFile"
                     />
                 </div>

package/frappe/Filter/Filter.vue

@@ -133,7 +133,7 @@ const filterCount = computed(() =>
 
 <template>
   <Popover
-    popover-class="mt-2 p-2 rounded-lg border bg-surface-modal shadow-xl max-w-xl"
+    popover-class="mt-2 p-2 rounded-lg border bg-surface-elevation-2 shadow-xl max-w-xl"
     placement="bottom-end"
     :matchTargetWidth="true"
   >

package/frappe/Help/HelpModal.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-show="show"
-    class="fixed z-50 right-0 w-80 h-[calc(100%_-_80px)] text-ink-gray-9 m-5 mt-[62px] p-3 flex gap-2 flex-col justify-between rounded-lg bg-surface-modal shadow-2xl"
+    class="fixed z-50 right-0 w-80 h-[calc(100%_-_80px)] text-ink-gray-9 m-5 mt-[62px] p-3 flex gap-2 flex-col justify-between rounded-lg bg-surface-elevation-2 shadow-2xl"
     :class="{ 'top-[calc(100%_-_120px)] border': minimize }"
     @click.stop
   >

package/frappe/Link/stories/Suffix.vue

@@ -76,7 +76,7 @@ const selectedUser = computed(() =>
                   class="inline-flex shrink-0 items-center gap-1 rounded-full px-1.5 py-0.5 text-p-xs"
                   :class="
                     selectedUser.enabled
-                      ? 'bg-surface-green-1 text-ink-green-3'
+                      ? 'bg-surface-green-1 text-ink-green-6'
                       : 'bg-surface-gray-2 text-ink-gray-5'
                   "
                 >
@@ -85,7 +85,7 @@ const selectedUser = computed(() =>
                     :class="
                       selectedUser.enabled
                         ? 'bg-surface-green-3'
-                        : 'bg-surface-gray-5'
+                        : 'bg-surface-gray-8'
                     "
                   />
                   {{ selectedUser.enabled ? 'Active' : 'Disabled' }}

package/frappe/Onboarding/GettingStartedBanner.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="!isSidebarCollapsed"
-    class="flex flex-col gap-3 shadow-sm rounded-lg py-2.5 px-3 bg-surface-modal text-base"
+    class="flex flex-col gap-3 shadow-sm rounded-lg py-2.5 px-3 bg-surface-elevation-2 text-base"
   >
     <div
       v-if="stepsCompleted != totalSteps"

package/frappe/drive/components/AppSwitcher.vue

@@ -22,7 +22,7 @@ const open = ref(false)
 <template>
   <div class="fixed left-0 top-0 h-screen w-3 z-40" @mouseenter="open = true" />
   <aside
-    class="fixed left-0 top-0 h-screen z-50 transition-transform duration-300 ease-out bg-surface-white border-r border-gray-200 px-2"
+    class="fixed left-0 top-0 h-screen z-50 transition-transform duration-300 ease-out bg-surface-base border-r border-gray-200 px-2"
     :class="!open && '-translate-x-full'"
     @mouseleave="open = false"
   >

package/frappe/drive/components/InfoDialog.vue

@@ -1,7 +1,7 @@
 <template>
   <Dialog v-model="open" @close="dialogType = ''">
     <template #body-title>
-      <h3 class="text-2xl font-semibold leading-6 text-ink-gray-9 cursor-pointer pr-2" @click="emitter.emit('rename')">
+      <h3 class="text-xl font-semibold leading-6 text-ink-gray-9 cursor-pointer pr-2" @click="emitter.emit('rename')">
         {{ entity.title }}
       </h3>
     </template>
@@ -190,12 +190,12 @@ onKeyDown('D', () => {
 const accessConfig = {
   team: {
     icon: LucideBuilding2,
-    color: 'bg-surface-blue-2 text-ink-blue-2',
+    color: 'bg-surface-blue-2 text-ink-blue-5',
     label: 'Team',
   },
   public: {
     icon: LucideGlobe2,
-    color: 'bg-surface-red-2 text-ink-red-3',
+    color: 'bg-surface-red-2 text-ink-red-6',
     label: 'Public',
   },
   restricted: {

package/frappe/drive/components/MoveDialog.vue

@@ -3,7 +3,7 @@
     <template #body-main>
       <div class="p-4 sm:px-6">
         <div class="flex w-full justify-between gap-x-15 mb-4">
-          <div class="font-semibold text-2xl flex text-nowrap overflow-hidden">
+          <div class="font-semibold text-xl flex text-nowrap overflow-hidden">
             <template v-if="props.entities.length > 1">
               Moving {{ props.entities.length }} items
             </template>
@@ -75,7 +75,7 @@
                           ? 'bg-surface-gray-3'
                           : 'hover:bg-surface-gray-2',
                         entities[0].parent_entity === node.value
-                          ? 'cursor-not-allowed hover:bg-surface-white'
+                          ? 'cursor-not-allowed hover:bg-surface-base'
                           : 'group',
                       ]"
                     >

package/frappe/drive/components/Select/Select.vue

@@ -84,7 +84,7 @@ const labelFunction = (val: SelectValue_, selected = false) => {
         <SelectContent
           :hide-when-detached="true"
           :align="'start'"
-          class="z-10 min-w-[--reka-select-trigger-width] mt-1 bg-surface-modal overflow-hidden rounded-lg shadow-2xl"
+          class="z-10 min-w-[--reka-select-trigger-width] mt-1 bg-surface-elevation-2 overflow-hidden rounded-lg shadow-2xl"
         >
           <SelectViewport
             class="max-h-60 overflow-auto p-1.5"
@@ -99,7 +99,7 @@ const labelFunction = (val: SelectValue_, selected = false) => {
                   <hr v-if="optionOrGroup.group === true" class="my-1.5" />
                   <SelectLabel
                     v-else
-                    class="px-2.5 pt-3 pb-1.5 text-sm font-medium text-ink-gray-5 sticky top-0 bg-surface-modal z-10"
+                    class="px-2.5 pt-3 pb-1.5 text-sm font-medium text-ink-gray-5 sticky top-0 bg-surface-elevation-2 z-10"
                   >
                     {{ optionOrGroup.group }}
                   </SelectLabel>

package/frappe/drive/components/ShareDialog.vue

@@ -4,7 +4,7 @@
       <div class="p-4">
         <!-- Header -->
         <div class="flex w-full justify-between gap-x-2 mb-4">
-          <div class="font-semibold text-2xl flex text-nowrap overflow-hidden">
+          <div class="font-semibold text-xl flex text-nowrap overflow-hidden">
             Sharing "
             <div class="truncate max-w-[80%]">
               {{ entity?.title }}