frappe-ui 0.1.178 → 0.1.179

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "0.1.178",
+  "version": "0.1.179",
   "description": "A set of components and utilities for rapid UI development",
   "main": "./src/index.ts",
   "type": "module",

package/src/components/Charts/NumberChart.vue

@@ -3,46 +3,52 @@
     class="flex max-h-[140px] items-center gap-2 overflow-hidden bg-surface-white text-ink-gray-8 px-6 pt-5"
     :class="config.delta ? 'pb-6' : 'pb-3'"
   >
-    <div class="flex w-full flex-col">
-      <span class="truncate text-sm font-medium">
-        {{ config.title }}
-      </span>
-      <div
-        class="flex-1 flex-shrink-0 truncate text-[24px] font-semibold leading-10"
-      >
-        {{ config.prefix }}{{ formatValue(config.value, 1, true)
-        }}{{ config.suffix }}
+    <slot name="body">
+      <div class="flex w-full flex-col">
+        <slot name="title">
+          <span class="truncate text-sm font-medium text-ink-gray-5">
+            {{ config.title }}
+          </span>
+        </slot>
+        <slot name="subtitle" v-bind="{ formatValue }">
+          <div
+            class="flex-1 flex-shrink-0 truncate text-[24px] text-ink-gray-6 font-semibold leading-10"
+          >
+            {{ config.prefix }}{{ formatValue(config.value, 1, true)
+            }}{{ config.suffix }}
+          </div>
+        </slot>
+        <slot name="delta" v-bind="{ formatValue }">
+          <div
+            v-if="config.delta"
+            class="flex items-center gap-0.5 text-xs font-medium"
+            :class="[
+              config.negativeIsBetter
+                ? config.delta >= 0
+                  ? 'text-ink-red-4'
+                  : 'text-ink-green-3'
+                : config.delta >= 0
+                  ? 'text-ink-green-3'
+                  : 'text-ink-red-4',
+            ]"
+          >
+            <span class="">
+              {{ config.delta >= 0 ? '↑' : '↓' }}
+            </span>
+            <span>
+              {{ config.deltaPrefix }}{{ formatValue(config.delta, 1, true)
+              }}{{ config.deltaSuffix }}
+            </span>
+          </div>
+        </slot>
       </div>
-      <div
-        v-if="config.delta"
-        class="flex items-center gap-0.5 text-xs font-medium"
-        :class="[
-          config.negativeIsBetter
-            ? config.delta >= 0
-              ? 'text-ink-red-4'
-              : 'text-ink-green-3'
-            : config.delta >= 0
-              ? 'text-ink-green-3'
-              : 'text-ink-red-4',
-        ]"
-      >
-        <span class="">
-          {{ config.delta >= 0 ? '↑' : '↓' }}
-        </span>
-        <span>
-          {{ config.deltaPrefix }}{{ formatValue(config.delta, 1, true)
-          }}{{ config.deltaSuffix }}
-        </span>
-      </div>
-    </div>
+    </slot>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
 import { formatValue } from './helpers'
 import { NumberChartConfig } from './types'
 
-const props = defineProps<{ config: NumberChartConfig }>()
-const error = ref('')
+defineProps<{ config: NumberChartConfig }>()
 </script>

package/src/components/Dialog/Dialog.story.vue

@@ -2,25 +2,78 @@
 import { ref } from 'vue'
 import Dialog from './Dialog.vue'
 import { Button } from '../Button'
+import { Dropdown } from '../Dropdown'
+import LucideSettings from '~icons/lucide/settings'
+import LucideStar from '~icons/lucide/star'
+import LucideChevronDown from '~icons/lucide/chevron-down'
 
 const dialog1 = ref(false)
 const dialog2 = ref(false)
+const dialog3 = ref(false)
+const dialog4 = ref(false)
+const dialog5 = ref(false)
+const dialog6 = ref(false)
 
-const createPromise = () => {
+// Dropdown state
+const selectedOption = ref('Option 1')
+
+const dropdownOptions = [
+  {
+    label: 'Option 1',
+    onClick: () => {
+      selectedOption.value = 'Option 1'
+    },
+  },
+  {
+    label: 'Option 2',
+    onClick: () => {
+      selectedOption.value = 'Option 2'
+    },
+  },
+  {
+    label: 'Option 3',
+    onClick: () => {
+      selectedOption.value = 'Option 3'
+    },
+  },
+  {
+    group: 'Advanced Options',
+    items: [
+      {
+        label: 'Advanced Option A',
+        icon: LucideSettings,
+        onClick: () => {
+          selectedOption.value = 'Advanced Option A'
+        },
+      },
+      {
+        label: 'Advanced Option B',
+        icon: LucideStar,
+        onClick: () => {
+          selectedOption.value = 'Advanced Option B'
+        },
+      },
+    ],
+  },
+]
+
+const createPromise = (): Promise<void> => {
   return new Promise((resolve) => {
     setTimeout(resolve, 2000)
   })
 }
 </script>
+
 <template>
   <Story :layout="{ width: 500, type: 'grid' }">
-    <Variant title="With options" autoPropsDisabled>
-      <Button @click="dialog1 = true">Show Dialog</Button>
+    <!-- 1. Basic Dialog with Actions -->
+    <Variant title="Basic Dialog with Actions" autoPropsDisabled>
+      <Button @click="dialog1 = true">Show Confirmation Dialog</Button>
       <Dialog
         :options="{
-          title: 'Confirm',
-          message: 'Are you sure you want to confirm this action?',
-          size: 'xl',
+          title: 'Confirm Action',
+          message: 'Are you sure you want to proceed with this action?',
+          size: 'lg',
           icon: {
             name: 'alert-triangle',
             appearance: 'warning',
@@ -29,27 +82,133 @@ const createPromise = () => {
             {
               label: 'Confirm',
               variant: 'solid',
-              onClick: () => {
-                return createPromise()
-              },
+              onClick: () => createPromise(),
             },
           ],
         }"
         v-model="dialog1"
       />
     </Variant>
-    <Variant title="With slots" autoPropsDisabled>
-      <Button @click="dialog2 = true">Show Dialog</Button>
+
+    <!-- 2. Custom Content with Slots -->
+    <Variant title="Custom Content with Slots" autoPropsDisabled>
+      <Button @click="dialog2 = true">Show Custom Dialog</Button>
       <Dialog v-model="dialog2">
         <template #body-title>
-          <h3>Custom Title</h3>
+          <h3 class="text-2xl font-semibold text-blue-600">
+            Custom Title with Styling
+          </h3>
         </template>
         <template #body-content>
-          <p>Custom Body</p>
+          <div class="space-y-4">
+            <p class="text-gray-700">
+              This dialog uses custom slots for flexible content layout.
+            </p>
+            <div class="bg-blue-50 p-4 rounded-lg">
+              <p class="text-blue-800">
+                You can put any content here including forms, lists, or other
+                components.
+              </p>
+            </div>
+          </div>
+        </template>
+        <template #actions="{ close }">
+          <div class="flex justify-start flex-row-reverse gap-2">
+            <Button variant="solid" @click="close">Save Changes</Button>
+            <Button variant="outline" @click="close">Cancel</Button>
+          </div>
+        </template>
+      </Dialog>
+    </Variant>
+
+    <!-- 3. Different Sizes -->
+    <Variant title="Different Sizes" autoPropsDisabled>
+      <div class="space-x-2">
+        <Button @click="dialog3 = true">Small Dialog</Button>
+        <Button @click="dialog4 = true">Large Dialog</Button>
+      </div>
+
+      <!-- Small Dialog -->
+      <Dialog
+        :options="{
+          title: 'Small Dialog',
+          message: 'This is a small dialog.',
+          size: 'sm',
+          actions: [{ label: 'OK', variant: 'solid' }],
+        }"
+        v-model="dialog3"
+      />
+
+      <!-- Large Dialog -->
+      <Dialog
+        :options="{
+          title: 'Large Dialog',
+          message: 'This is a large dialog with more space for content.',
+          size: '4xl',
+          actions: [{ label: 'OK', variant: 'solid' }],
+        }"
+        v-model="dialog4"
+      />
+    </Variant>
+
+    <!-- 4. Disable Outside Click -->
+    <Variant title="Disable Outside Click to Close" autoPropsDisabled>
+      <Button @click="dialog5 = true">Show Modal Dialog</Button>
+      <Dialog
+        :options="{
+          title: 'Modal Dialog',
+          message:
+            'This dialog cannot be closed by clicking outside. Use the buttons or ESC key.',
+          actions: [{ label: 'Close', variant: 'solid' }],
+        }"
+        :disable-outside-click-to-close="true"
+        v-model="dialog5"
+      />
+    </Variant>
+
+    <!-- 5. Dialog with Interactive Components -->
+    <Variant title="Dialog with Interactive Components" autoPropsDisabled>
+      <Button @click="dialog6 = true">Show Settings Dialog</Button>
+      <Dialog v-model="dialog6">
+        <template #body-title>
+          <h3 class="text-2xl font-semibold text-ink-gray-9">
+            Settings Dialog
+          </h3>
+        </template>
+        <template #body-content>
+          <div class="space-y-6 text-base">
+            <p class="text-gray-700">
+              This dialog contains interactive elements to test proper layering.
+            </p>
+
+            <div class="space-y-3">
+              <label class="block text-sm font-medium text-gray-700">
+                Select an option:
+              </label>
+              <Dropdown :options="dropdownOptions" placement="left">
+                <Button variant="outline">
+                  {{ selectedOption }}
+
+                  <template #suffix>
+                    <LucideChevronDown class="h-4 w-4 text-gray-500" />
+                  </template>
+                </Button>
+              </Dropdown>
+            </div>
+
+            <div class="bg-gray-50 text-p-sm p-4 text-ink-gray-6 rounded-lg">
+              <p><strong>Selected value:</strong> {{ selectedOption }}</p>
+              <p class="mt-1">
+                Interactive components should work properly within dialogs.
+              </p>
+            </div>
+          </div>
         </template>
-        <template #actions>
-          <Button variant="solid">Confirm</Button>
-          <Button class="ml-2" @click="dialog2 = false">Close</Button>
+        <template #actions="{ close }">
+          <div class="flex space-x-2">
+            <Button variant="solid" @click="close">Save Settings</Button>
+            <Button variant="outline" @click="close">Cancel</Button>
+          </div>
         </template>
       </Dialog>
     </Variant>

package/src/components/Dialog/Dialog.vue

@@ -1,44 +1,17 @@
 <template>
-  <TransitionRoot
-    as="template"
-    :show="isOpen"
-    @after-leave="$emit('after-leave')"
-  >
-    <HDialog
-      as="div"
-      class="fixed inset-0 z-10 overflow-y-auto"
-      @close="!disableOutsideClickToClose && close()"
-    >
-      <div
-        class="flex min-h-screen flex-col items-center px-4 py-4 text-center"
-        :class="dialogPositionClasses"
+  <DialogRoot v-model:open="isOpen" @update:open="handleOpenChange">
+    <DialogPortal>
+      <DialogOverlay
+        class="fixed inset-0 bg-black-overlay-200 backdrop-filter backdrop-blur-[12px] overflow-y-auto dialog-overlay"
+        :data-dialog="options.title"
+        @after-leave="$emit('after-leave')"
       >
-        <TransitionChild
-          as="template"
-          enter="ease-out duration-150"
-          enter-from="opacity-0"
-          enter-to="opacity-100"
-          leave="ease-in duration-150"
-          leave-from="opacity-100"
-          leave-to="opacity-0"
+        <div
+          class="flex min-h-screen flex-col items-center px-4 py-4 text-center"
+          :class="dialogPositionClasses"
         >
-          <div
-            class="fixed inset-0 bg-black-overlay-200 transition-opacity dark:backdrop-filter dark:backdrop-blur-[1px]"
-            :data-dialog="options.title"
-          />
-        </TransitionChild>
-
-        <TransitionChild
-          as="template"
-          enter="ease-out duration-150"
-          enter-from="opacity-50 translate-y-2 scale-95"
-          enter-to="opacity-100 translate-y-0 scale-100"
-          leave="ease-in duration-150"
-          leave-from="opacity-100 translate-y-0 scale-100"
-          leave-to="opacity-50 translate-y-4 translate-y-4 scale-95"
-        >
-          <DialogPanel
-            class="my-8 inline-block w-full transform overflow-hidden rounded-xl bg-surface-modal text-left align-middle shadow-xl transition-all"
+          <DialogContent
+            class="my-8 inline-block w-full transform overflow-hidden rounded-xl bg-surface-modal text-left align-middle shadow-xl dialog-content"
             :class="{
               'max-w-7xl': options.size === '7xl',
               'max-w-6xl': options.size === '6xl',
@@ -52,6 +25,14 @@
               'max-w-sm': options.size === 'sm',
               'max-w-xs': options.size === 'xs',
             }"
+            @escape-key-down="close()"
+            @interact-outside="
+              (e: Event) => {
+                if (props.disableOutsideClickToClose) {
+                  e.preventDefault()
+                }
+              }
+            "
           >
             <slot name="body">
               <slot name="body-main">
@@ -83,35 +64,22 @@
                               </slot>
                             </DialogTitle>
                           </div>
-                          <Button variant="ghost" @click="close">
-                            <template #icon>
-                              <svg
-                                width="16"
-                                height="16"
-                                viewBox="0 0 16 16"
-                                fill="none"
-                                xmlns="http://www.w3.org/2000/svg"
-                                class="text-ink-gray-9"
-                              >
-                                <path
-                                  fill-rule="evenodd"
-                                  clip-rule="evenodd"
-                                  d="M12.8567 3.85355C13.052 3.65829 13.052 3.34171 12.8567 3.14645C12.6615 2.95118 12.3449 2.95118 12.1496 3.14645L8.00201 7.29405L3.85441 3.14645C3.65914 2.95118 3.34256 2.95118 3.1473 3.14645C2.95204 3.34171 2.95204 3.65829 3.1473 3.85355L7.29491 8.00116L3.14645 12.1496C2.95118 12.3449 2.95118 12.6615 3.14645 12.8567C3.34171 13.052 3.65829 13.052 3.85355 12.8567L8.00201 8.70827L12.1505 12.8567C12.3457 13.052 12.6623 13.052 12.8576 12.8567C13.0528 12.6615 13.0528 12.3449 12.8576 12.1496L8.70912 8.00116L12.8567 3.85355Z"
-                                  fill="currentColor"
-                                />
-                              </svg>
-                            </template>
-                          </Button>
+                          <DialogClose as-child>
+                            <Button variant="ghost" @click="close">
+                              <template #icon>
+                                <LucideX class="h-4 w-4 text-ink-gray-9" />
+                              </template>
+                            </Button>
+                          </DialogClose>
                         </div>
                       </slot>
 
                       <slot name="body-content">
-                        <p
-                          class="text-p-base text-ink-gray-7"
-                          v-if="options.message"
-                        >
-                          {{ options.message }}
-                        </p>
+                        <DialogDescription as-child v-if="options.message">
+                          <p class="text-p-base text-ink-gray-7">
+                            {{ options.message }}
+                          </p>
+                        </DialogDescription>
                       </slot>
                     </div>
                   </div>
@@ -136,25 +104,37 @@
                 </slot>
               </div>
             </slot>
-          </DialogPanel>
-        </TransitionChild>
-      </div>
-    </HDialog>
-  </TransitionRoot>
+          </DialogContent>
+        </div>
+      </DialogOverlay>
+    </DialogPortal>
+  </DialogRoot>
 </template>
 
 <script setup lang="ts">
 import {
-  DialogPanel,
+  DialogRoot,
+  DialogPortal,
+  DialogOverlay,
+  DialogContent,
   DialogTitle,
-  Dialog as HDialog,
-  TransitionChild,
-  TransitionRoot,
-} from '@headlessui/vue'
+  DialogDescription,
+  DialogClose,
+} from 'reka-ui'
 import { computed, reactive } from 'vue'
 import { Button } from '../Button'
 import FeatherIcon from '../FeatherIcon.vue'
-import type { DialogProps, DialogIcon } from './types'
+import type {
+  DialogProps,
+  DialogIcon,
+  DialogAction,
+  DialogActionContext,
+} from './types'
+
+// Type for dialog action with reactive loading state
+type ReactiveDialogAction = DialogAction & {
+  loading: boolean
+}
 
 const props = withDefaults(defineProps<DialogProps>(), {
   options: () => ({}),
@@ -167,7 +147,7 @@ const emit = defineEmits<{
   (event: 'after-leave'): void
 }>()
 
-const actions = computed(() => {
+const actions = computed((): ReactiveDialogAction[] => {
   let actions = props.options.actions
   if (!actions?.length) return []
 
@@ -183,12 +163,15 @@ const actions = computed(() => {
               if (action.onClick) {
                 // deprecated: uncomment this when we remove the backwards compatibility
                 // let context: DialogActionContext = { close }
-                let backwardsCompatibleContext = function () {
+                type BackwardsCompatibleDialogActionContext = (() => void) &
+                  DialogActionContext
+
+                let backwardsCompatibleContext = (() => {
                   console.warn(
-                    'Value passed to onClick is a context object. Please use context.close() instead of context() to close the dialog.'
+                    'Value passed to onClick is a context object. Please use context.close() instead of context() to close the dialog.',
                   )
                   close()
-                }
+                }) as BackwardsCompatibleDialogActionContext
                 backwardsCompatibleContext.close = close
                 await action.onClick(backwardsCompatibleContext)
               }
@@ -205,7 +188,7 @@ const isOpen = computed({
   get() {
     return props.modelValue
   },
-  set(val) {
+  set(val: boolean) {
     emit('update:modelValue', val)
     if (!val) {
       emit('close')
@@ -213,6 +196,10 @@ const isOpen = computed({
   },
 })
 
+function handleOpenChange(open: boolean) {
+  isOpen.value = open
+}
+
 function close() {
   isOpen.value = false
 }
@@ -229,31 +216,92 @@ const icon = computed(() => {
 
 const dialogPositionClasses = computed(() => {
   const position = props.options?.position || 'center'
-  return {
+  const classMap: Record<string, string> = {
     center: 'justify-center',
     top: 'pt-[20vh]',
-  }[position]
+  }
+  return classMap[position]
 })
 
 const dialogIconBgClasses = computed(() => {
   const appearance = icon.value?.appearance
   if (!appearance) return 'bg-surface-gray-2'
-  return {
+  const classMap: Record<string, string> = {
     warning: 'bg-surface-amber-2',
     info: 'bg-surface-blue-2',
     danger: 'bg-surface-red-2',
     success: 'bg-surface-green-2',
-  }[appearance]
+  }
+  return classMap[appearance]
 })
 
 const dialogIconClasses = computed(() => {
   const appearance = icon.value?.appearance
   if (!appearance) return 'text-ink-gray-5'
-  return {
+  const classMap: Record<string, string> = {
     warning: 'text-ink-amber-3',
     info: 'text-ink-blue-3',
     danger: 'text-ink-red-4',
     success: 'text-ink-green-3',
-  }[appearance]
+  }
+  return classMap[appearance]
 })
 </script>
+
+<style scoped>
+@keyframes dialog-overlay-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes dialog-overlay-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes dialog-content-in {
+  from {
+    opacity: 0.5;
+    transform: scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes dialog-content-out {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0.5;
+    transform: scale(0.98);
+  }
+}
+
+:global(.dialog-overlay[data-state='open']) {
+  animation: dialog-overlay-in 100ms ease-out;
+}
+
+:global(.dialog-overlay[data-state='closed']) {
+  animation: dialog-overlay-out 150ms ease-in;
+}
+
+:global(.dialog-content[data-state='open']) {
+  animation: dialog-content-in 100ms ease-out;
+}
+
+:global(.dialog-content[data-state='closed']) {
+  animation: dialog-content-out 150ms ease-in;
+}
+</style>

package/src/components/Dialog/index.ts

@@ -1,2 +1,14 @@
-export { default as Dialog } from './Dialog.vue'
-export type { DialogProps } from './types'
+import DialogMain from './Dialog.vue'
+import { DialogTitle, DialogDescription } from 'reka-ui'
+export type { DialogProps } from './types'
+
+type DialogExport = typeof DialogMain & {
+  Title: typeof DialogTitle
+  Description: typeof DialogDescription
+}
+
+const Dialog = DialogMain as DialogExport
+Dialog.Title = DialogTitle
+Dialog.Description = DialogDescription
+
+export { Dialog }

package/src/components/Dialog/types.ts

@@ -27,10 +27,10 @@ type DialogOptions = {
   position?: 'top' | 'center'
 }
 
-type DialogActionContext = {
+export type DialogActionContext = {
   close: () => void
 }
-type DialogAction = ButtonProps & {
+export type DialogAction = ButtonProps & {
   onClick?: (context: DialogActionContext) => void | Promise<void>
 }
 

package/src/components/KeyboardShortcut.vue

@@ -0,0 +1,33 @@
+<template>
+  <div
+    class="inline-flex items-center gap-0.5 text-sm"
+    :class="{
+      'bg-surface-gray-2 rounded-sm text-ink-gray-5 py-0.5 px-1': bg,
+      'text-ink-gray-4': !bg,
+    }"
+  >
+    <span v-if="ctrl || meta">
+      <LucideCommand v-if="isMac" class="w-3 h-3" />
+      <span v-else>Ctrl</span>
+    </span>
+    <span v-if="shift"><LucideShift class="w-3 h-3" /></span>
+    <span v-if="alt"><LucideAlt class="w-3 h-3" /></span>
+    <slot></slot>
+  </div>
+</template>
+<script setup lang="ts">
+import LucideCommand from '~icons/lucide/command'
+import LucideShift from '~icons/lucide/arrow-big-up'
+import LucideAlt from '~icons/lucide/option'
+
+const isMac = navigator.userAgent.includes('Mac')
+
+defineProps({
+  meta: Boolean,
+  ctrl: Boolean,
+  shift: Boolean,
+  alt: Boolean,
+  shortcut: String,
+  bg: Boolean,
+})
+</script>

package/src/components/Password/Password.story.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { Password } from './index'
+import { ref } from 'vue'
+
+const value = ref('')
+</script>
+
+<template>
+  <Story title="Password" :layout="{ width: 500, type: 'grid' }">
+    <div class="p-2">
+      <Password v-model="value" />
+    </div>
+  </Story>
+</template>

package/src/components/Password/Password.vue

@@ -0,0 +1,58 @@
+<template>
+  <FormControl
+    :type="show ? 'text' : 'password'"
+    :value="modelValue || value"
+    v-bind="$attrs"
+    @keydown.meta.i.prevent="show = !show"
+    @keydown.ctrl.i.prevent="show = !show"
+  >
+    <template #prefix v-if="$slots.prefix">
+      <slot name="prefix" />
+    </template>
+    <template #suffix>
+      <Tooltip>
+        <template #body>
+          <div
+            class="rounded bg-surface-gray-7 py-1.5 px-2 text-xs text-ink-white shadow-xl"
+          >
+            <span class="flex items-center gap-1">
+              {{ show ? 'Hide Password' : 'Show Password' }}
+              <KeyboardShortcut
+                bg
+                ctrl
+                class="!bg-surface-gray-5 !text-ink-gray-2 px-1"
+              >
+                <span class="font-mono leading-none tracking-widest">+I</span>
+              </KeyboardShortcut>
+            </span>
+          </div>
+        </template>
+        <div>
+          <component
+            v-show="showEye"
+            :is="show ? LucideEyeOff : LucideEye"
+            class="h-3 cursor-pointer mr-1"
+            @click="show = !show"
+          />
+        </div>
+      </Tooltip>
+    </template>
+  </FormControl>
+</template>
+<script setup lang="ts">
+import LucideEye from '~icons/lucide/eye'
+import LucideEyeOff from '~icons/lucide/eye-off'
+import KeyboardShortcut from '../KeyboardShortcut.vue'
+import FormControl from '../FormControl/FormControl.vue'
+import Tooltip from '../Tooltip/Tooltip.vue'
+import type { PasswordProps } from './types'
+import { ref, computed } from 'vue'
+
+const props = defineProps<PasswordProps>()
+
+const show = ref(false)
+const showEye = computed(() => {
+  let v = props.modelValue || props.value
+  return !v?.includes('*')
+})
+</script>

package/src/components/Password/index.ts

@@ -0,0 +1,2 @@
+export { default as Password } from './Password.vue'
+export type { PasswordProps } from './types'

package/src/components/Password/types.ts

@@ -0,0 +1,4 @@
+export interface PasswordProps {
+  modelValue?: string | null
+  value?: string | null
+}

package/src/index.ts

@@ -31,6 +31,7 @@ export * from './components/Popover'
 export * from './components/Rating'
 export { default as Resource } from './components/Resource.vue'
 export * from './components/Select'
+export * from './components/Password'
 export * from './components/Spinner'
 export * from './components/Switch'
 export * from './components/TabButtons'
@@ -67,6 +68,7 @@ export { default as CommandPaletteItem } from './components/CommandPalette/Comma
 export { default as ListFilter } from './components/ListFilter/ListFilter.vue'
 export { default as Calendar } from './components/Calendar/Calendar.vue'
 export { default as NestedPopover } from './components/ListFilter/NestedPopover.vue'
+export { default as KeyboardShortcut } from './components/KeyboardShortcut.vue'
 export * from './components/CircularProgressBar'
 export * from './components/Tree'
 export { default as FrappeUIProvider } from './components/Provider/FrappeUIProvider.vue'