@personizely/ui 0.0.42

package/package.json

@@ -0,0 +1,117 @@
+{
+  "name": "@personizely/ui",
+  "web-types": "./web-types.json",
+  "version": "0.0.42",
+  "description": "Personizely UI is a Vue.js UI library with a simple API, based on Reka UI, inspired by shadcn-vue and Keen UI.",
+  "type": "module",
+  "main": "./dist/personizely-ui.js",
+  "exports": {
+    ".": {
+      "import": "./dist/personizely-ui.js",
+      "require": "./dist/personizely-ui.umd.cjs"
+    },
+    "./assets/personizely-ui.css": "./dist/personizely-ui.css"
+  },
+  "scripts": {
+    "build": "vite build --config vite.config.ts",
+    "build:types": "vue-tsc --project tsconfig.json --declaration --emitDeclarationOnly --outDir dist/types",
+    "build:web-types": "node scripts/generate.js",
+    "clean": "rimraf ./dist",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "vitepress build docs",
+    "docs:preview": "vitepress preview docs",
+    "postinstall": "patch-package",
+    "vue-typecheck": "vue-tsc --noEmit"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kilobyte2007/personizely-ui"
+  },
+  "keywords": [
+    "vue",
+    "vuejs",
+    "personizely",
+    "reka-ui",
+    "components",
+    "ui"
+  ],
+  "files": [
+    "dist",
+    "src",
+    "LICENSE.md",
+    "README.md",
+    "web-types.json",
+    "package-lock.json"
+  ],
+  "author": {
+    "name": "Sergiu Cazac"
+  },
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/kilobyte2007/personizely-ui/issues"
+  },
+  "homepage": "https://ui.personizely.dev/",
+  "dependencies": {
+    "@ctrl/tinycolor": "^4.1.0",
+    "@stylistic/eslint-plugin": "^2.12.1",
+    "@types/chroma-js": "^2.4.5",
+    "@types/lodash": "^4.17.0",
+    "@vueuse/core": "^10.11.1",
+    "autosize": "^3.0.20",
+    "chroma-js": "^3.1.2",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
+    "deepmerge": "^2.0.1",
+    "lodash": "^4.17.21",
+    "lodash.debounce": "^4.0.8",
+    "lucide-vue-next": "^0.364.0",
+    "patch-package": "^8.0.0",
+    "reka-ui": "^2.3.2",
+    "tailwind-merge": "^2.5.5",
+    "tailwindcss-animate": "^1.0.7",
+    "vue-component-meta": "^2.1.2",
+    "zod": "^3.23.5"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.17.0",
+    "@iconify/vue": "^4.2.0",
+    "@tailwindcss/postcss": "^4.0.0-beta.8",
+    "@tailwindcss/vite": "^4.0.0-beta.8",
+    "@vee-validate/rules": "^4.14.7",
+    "@vee-validate/zod": "^4.14.7",
+    "@vitejs/plugin-vue": "5.2.1",
+    "@vue/tsconfig": "^0.7.0",
+    "cross-env": "^7.0.3",
+    "eslint": "^9.17.0",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^6.6.0",
+    "eslint-plugin-standard": "^5.0.0",
+    "eslint-plugin-vue": "^9.32.0",
+    "globals": "^15.14.0",
+    "rimraf": "^2.7.1",
+    "tailwindcss": "^4.0.0-beta.8",
+    "ts-node": "^10.9.2",
+    "tsx": "^4.19.2",
+    "typescript": "^5.7.2",
+    "typescript-eslint": "^8.18.1",
+    "vee-validate": "^4.14.7",
+    "vite": "6.0.9",
+    "vite-plugin-banner": "^0.8.0",
+    "vitepress": "^1.5.0",
+    "vue": "^3.5.13",
+    "vue-docgen-api": "^4.79.2",
+    "vue-docgen-web-types": "^0.1.8",
+    "vue-tsc": "^2.1.10"
+  },
+  "peerDependencies": {
+    "vee-validate": "^4.14.7"
+  },
+  "overrides": {
+    "tailwindcss-animate": {
+      "tailwindcss": "^4.0.0-beta.8"
+    }
+  }
+}

package/src/assets/index.css

@@ -0,0 +1,136 @@
+@import 'tailwindcss' source(none);
+@config '../../tailwind.config.ts';
+
+@variant dark (&:where(.dark, .dark *));
+@source '../../src/**/*.{js,ts,vue}';
+
+@theme {
+  @keyframes accordion-up {
+    0% {
+      height: var(--reka-accordion-content-height);
+      overflow: hidden;
+    }
+    100% {
+      height: 0;
+      overflow: hidden;
+    }
+  }
+
+  @keyframes accordion-down {
+    0% {
+      height: 0;
+      overflow: hidden;
+    }
+    100% {
+      height: var(--reka-accordion-content-height);
+      overflow: hidden;
+    }
+  }
+
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+
+  --radius: 0.5rem;
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: calc(var(--radius) + 2px);
+  --radius-xl: calc(var(--radius) + 4px);
+
+  --text-2xs: 0.65rem;
+
+  --color-background: hsl(0 0% 100%);
+  --color-foreground: hsl(222.2 84% 4.9%);
+
+  --color-muted: hsl(210 40% 96.1%);
+  --color-muted-foreground: hsl(215.4 16.3% 46.9%);
+
+  --color-popover: hsl(0 0% 100%);
+  --color-popover-foreground: hsl(222.2 84% 4.9%);
+
+  --color-card: hsl(0 0% 100%);
+  --color-card-foreground: hsl(222.2 84% 4.9%);
+
+  --color-border: hsl(214.3 31.8% 91.4%);
+  --color-input: hsl(214.3 31.8% 91.4%);
+
+  --color-primary: hsl(222.2 47.4% 11.2%);
+  --color-primary-foreground: hsl(210 40% 98%);
+
+  --color-secondary: hsl(210 40% 96.1%);
+  --color-secondary-foreground: hsl(222.2 47.4% 11.2%);
+
+  --color-accent: hsl(210 40% 96.1%);
+  --color-accent-foreground: hsl(222.2 47.4% 11.2%);
+
+  --color-destructive: hsl(0 84.2% 60.2%);
+  --color-destructive-foreground: hsl(210 40% 98%);
+
+  --color-error: hsl(var(--color-destructive));
+  --color-error-foreground: hsl(var(--color-destructive-foreground));
+
+  --color-warning: hsl(35.76 100% 50%);
+  --color-warning-foreground: hsl(210 40% 98%);
+
+  --color-success: hsl(122 39% 49%);
+  --color-success-foreground: hsl(210 40% 98%);
+
+  --color-ring: hsl(240 5% 64.9%);
+}
+
+@layer themes {
+  .dark {
+    --color-background: hsl(222.2 84% 4.9%);
+    --color-foreground: hsl(210 40% 98%);
+
+    --color-muted: hsl(217.2 32.6% 17.5%);
+    --color-muted-foreground: hsl(215 20.2% 65.1%);
+
+    --color-popover: hsl(222.2 84% 4.9%);
+    --color-popover-foreground: hsl(210 40% 98%);
+
+    --color-card: hsl(222.2 84% 4.9%);
+    --color-card-foreground: hsl(210 40% 98%);
+
+    --color-border: hsl(217.2 32.6% 17.5%);
+    --color-input: hsl(217.2 32.6% 17.5%);
+
+    --color-primary: hsl(210 40% 98%);
+    --color-primary-foreground: hsl(222.2 47.4% 11.2%);
+
+    --color-secondary: hsl(217.2 32.6% 17.5%);
+    --color-secondary-foreground: hsl(210 40% 98%);
+
+    --color-accent: hsl(217.2 32.6% 17.5%);
+    --color-accent-foreground: hsl(210 40% 98%);
+
+    --color-destructive: hsl(0 62.8% 30.6%);
+    --color-destructive-foreground: hsl(210 40% 98%);
+
+    --color-error: hsl(var(--color-destructive));
+    --color-error-foreground: hsl(var(--color-destructive-foreground));
+
+    --color-warning: hsl(0 84.2% 60.2%);
+    --color-warning-foreground: hsl(210 40% 98%);
+
+    --color-success: hsl(122 39% 49%);
+    --color-success-foreground: hsl(210 40% 98%);
+
+    --color-ring: hsl(212.7 26.8% 83.9%);
+  }
+}
+
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-border, currentColor);
+  }
+
+  [role="button"],
+  button {
+    user-select: none;
+    cursor: pointer;
+  }
+}

package/src/components/ui/accordion/Accordion.vue

@@ -0,0 +1,19 @@
+<template>
+  <AccordionRoot v-bind="forwarded">
+    <slot />
+  </AccordionRoot>
+</template>
+
+<script setup lang="ts">
+import {
+  AccordionRoot,
+  type AccordionRootEmits,
+  type AccordionRootProps,
+  useForwardPropsEmits
+} from 'reka-ui'
+
+const props = defineProps<AccordionRootProps>()
+const emits = defineEmits<AccordionRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>

package/src/components/ui/accordion/AccordionContent.vue

@@ -0,0 +1,24 @@
+<template>
+  <AccordionContent
+    v-bind="delegatedProps"
+    class="text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+  >
+    <div :class="cn('pb-4 pt-0', props.class)">
+      <slot />
+    </div>
+  </AccordionContent>
+</template>
+
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { AccordionContent, type AccordionContentProps } from 'reka-ui'
+import { cn } from '@/utils/tailwind'
+
+const props = defineProps<AccordionContentProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>

package/src/components/ui/accordion/AccordionItem.vue

@@ -0,0 +1,37 @@
+<template>
+  <AccordionItem
+    v-bind="omit(forwardedProps, ['title'])"
+    :class="cn('not-last:border-b', props.class)"
+  >
+    <AccordionTrigger>
+      <slot name="title">
+        {{ title }}
+      </slot>
+    </AccordionTrigger>
+    <AccordionContent>
+      <slot />
+    </AccordionContent>
+  </AccordionItem>
+</template>
+
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { AccordionItem, type AccordionItemProps, useForwardProps } from 'reka-ui'
+import { cn } from '@/utils/tailwind'
+import AccordionContent from './AccordionContent.vue'
+import AccordionTrigger from './AccordionTrigger.vue'
+import omit from 'lodash/omit'
+
+const props = defineProps<AccordionItemProps & {
+  class?: HTMLAttributes['class'],
+  title?: string
+}>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>

package/src/components/ui/accordion/AccordionTrigger.vue

@@ -0,0 +1,39 @@
+<template>
+  <AccordionHeader class="flex">
+    <AccordionTrigger
+      v-bind="delegatedProps"
+      :class="
+        cn(
+          'flex flex-1 items-center rounded-sm text-sm justify-between py-4 font-medium transition-all focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 [&[data-state=open]>svg]:rotate-180',
+          props.class,
+        )
+      "
+    >
+      <slot />
+      <slot name="icon">
+        <ChevronDown
+          class="size-3 shrink-0 transition-transform duration-200"
+        />
+      </slot>
+    </AccordionTrigger>
+  </AccordionHeader>
+</template>
+
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import {
+  AccordionHeader,
+  AccordionTrigger,
+  type AccordionTriggerProps
+} from 'reka-ui'
+import { ChevronDown } from 'lucide-vue-next'
+import { cn } from '@/utils/tailwind'
+
+const props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>

package/src/components/ui/accordion/index.ts

@@ -0,0 +1,2 @@
+export { default as Accordion } from './Accordion.vue'
+export { default as AccordionItem } from './AccordionItem.vue'

package/src/components/ui/alert/Alert.vue

@@ -0,0 +1,68 @@
+<template>
+  <div v-if="visible" :class="cn(alertVariants({ type }), dismissible ? 'pr-12' : '', props.class)" role="alert">
+    <slot name="icon">
+      <component
+        :is="icon"
+        v-if="!removeIcon"
+        class="w-4 h-4 absolute left-3.5 top-3.5"
+      />
+    </slot>
+    <h5 v-if="title || $slots.title" class="font-medium leading-tight tracking-tight" :class="!removeIcon ? 'pl-7' : ''">
+      <slot name="title">
+        {{ title }}
+      </slot>
+    </h5>
+    <div :class="!removeIcon ? 'pl-7' : ''" class="text-sm leading-normal">
+      <slot />
+    </div>
+    <Button
+      v-if="dismissible"
+      icon="x"
+      variant="ghost"
+      size="2xs"
+      class="absolute right-2 top-2"
+      type="button"
+      @click="dismiss"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Button } from '@/components/ui/button'
+import { Info, TriangleAlert, CircleCheck, CircleAlert } from 'lucide-vue-next'
+import type { HTMLAttributes } from 'vue'
+import { type AlertVariants, alertVariants } from '.'
+import { cn } from '@/utils/tailwind'
+
+const emit = defineEmits(['update:visible', 'dismiss'])
+
+const props = withDefaults(defineProps<{
+  type?: AlertVariants['type'],
+  class?: HTMLAttributes['class'],
+  removeIcon?: boolean,
+  title?: string,
+  dismissible?: boolean,
+  visible?: boolean
+}>(), {
+  type: 'info',
+  removeIcon: false,
+  dismissible: true,
+  visible: true
+})
+
+const icon = computed(() => {
+  return {
+    info: Info,
+    warning: TriangleAlert,
+    success: CircleCheck,
+    error: CircleAlert
+  }[props.type!]
+})
+
+const dismiss = () => {
+  emit('update:visible', false)
+  emit('dismiss')
+}
+</script>
+

package/src/components/ui/alert/index.ts

@@ -0,0 +1,22 @@
+import { type VariantProps, cva } from 'class-variance-authority'
+
+export { default as Alert } from './Alert.vue'
+
+export const alertVariants = cva('relative w-full rounded-lg border p-3', {
+  variants: {
+    type: {
+      info: 'bg-background text-foreground',
+      error:
+          'border-error/50 text-error dark:border-destructive',
+      warning:
+          'border-warning/50 text-warning dark:border-warning',
+      success:
+          'border-success/50 text-success dark:border-success'
+    }
+  },
+  defaultVariants: {
+    type: 'info'
+  }
+})
+
+export type AlertVariants = VariantProps<typeof alertVariants>

package/src/components/ui/alert-dialog/AlertDialog.vue

@@ -0,0 +1,66 @@
+<template>
+  <AlertDialogRoot v-bind="forwarded">
+    <AlertDialogTrigger as-child>
+      <slot name="trigger" />
+    </AlertDialogTrigger>
+    <AlertDialogContent :class="props.class">
+      <div class="flex flex-col gap-y-2 text-center sm:text-left">
+        <AlertDialogTitle class="text-lg font-medium">
+          <slot name="title">
+            {{ title }}
+          </slot>
+        </AlertDialogTitle>
+        <AlertDialogDescription class="text-sm text-muted-foreground">
+          <slot name="description">
+            {{ description }}
+          </slot>
+        </AlertDialogDescription>
+      </div>
+      <div class="flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2">
+        <AlertDialogCancel as-child @click="$emit('cancel')">
+          <Button variant="outline">
+            Cancel
+          </Button>
+        </AlertDialogCancel>
+        <AlertDialogAction as-child @click="$emit('confirm')">
+          <Button variant="default">
+            Confirm
+          </Button>
+        </AlertDialogAction>
+      </div>
+    </AlertDialogContent>
+  </AlertDialogRoot>
+</template>
+
+<script setup lang="ts">
+import {
+  type AlertDialogEmits,
+  type AlertDialogProps,
+  AlertDialogRoot,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogDescription,
+  AlertDialogTitle,
+  AlertDialogTrigger
+} from 'reka-ui'
+import AlertDialogContent from './AlertDialogContent.vue'
+import { Button } from '@/components/ui/button'
+import { useDelegatedProps } from '@/composables/delegated-props'
+import { useEmitAsProps } from '@/composables/emits-as-props'
+import { useForwardPropsEmits } from '@/composables/forward-props-emits'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<AlertDialogProps & {
+  class?: HTMLAttributes['class'],
+  title: string
+  description?: string
+}>()
+const emits = defineEmits<AlertDialogEmits & {
+  confirm: []
+  cancel: []
+}>()
+
+const delegatedProps = useDelegatedProps(props, ['class', 'title', 'description'])
+const delegatedEmits = useEmitAsProps(emits, ['confirm', 'cancel'])
+const forwarded = useForwardPropsEmits(delegatedProps, delegatedEmits)
+</script>

package/src/components/ui/alert-dialog/AlertDialogContent.vue

@@ -0,0 +1,44 @@
+<template>
+  <AlertDialogPortal :to="options.portalTo">
+    <AlertDialogOverlay
+      class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+    />
+    <AlertDialogContent
+      v-bind="forwarded"
+      :class="
+        cn(
+          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:rounded-lg',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </AlertDialogContent>
+  </AlertDialogPortal>
+</template>
+
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import {
+  AlertDialogContent,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  type AlertDialogContentEmits,
+  type AlertDialogContentProps,
+  useForwardPropsEmits
+} from 'reka-ui'
+import { cn } from '@/utils/tailwind'
+import { getOptions } from '@/options-provider'
+
+const props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<AlertDialogContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const options = getOptions()
+</script>

package/src/components/ui/alert-dialog/AlertDialogProvider.vue

@@ -0,0 +1,27 @@
+<template>
+  <AlertDialog
+    v-for="(item, index) in items"
+    :key="index"
+    :title="item.title"
+    :description="item.description"
+    :default-open="true"
+    @confirm="confirm(item)"
+    @cancel="cancel(item)"
+  />
+</template>
+
+<script setup lang="ts">
+import AlertDialog from '@/components/ui/alert-dialog/AlertDialog.vue'
+import { useAlertDialog, type Item } from '@/components/ui/alert-dialog/useAlertDialog'
+
+const { items } = useAlertDialog()
+
+const confirm = async (item: Item) => {
+  await item.onConfirm()
+  items.splice(items.indexOf(item), 1)
+}
+const cancel = (item: Item) => {
+  item.onCancel?.()
+  items.splice(items.indexOf(item), 1)
+}
+</script>

package/src/components/ui/alert-dialog/AlertDialogTrigger.vue

@@ -0,0 +1,11 @@
+<template>
+  <AlertDialogTrigger v-bind="props">
+    <slot />
+  </AlertDialogTrigger>
+</template>
+
+<script setup lang="ts">
+import { AlertDialogTrigger, type AlertDialogTriggerProps } from 'reka-ui'
+
+const props = defineProps<AlertDialogTriggerProps>()
+</script>

package/src/components/ui/alert-dialog/index.ts

@@ -0,0 +1,3 @@
+export { default as AlertDialog } from './AlertDialog.vue'
+export { default as AlertDialogProvider } from './AlertDialogProvider.vue'
+export { useAlertDialog } from './useAlertDialog'

package/src/components/ui/alert-dialog/useAlertDialog.ts

@@ -0,0 +1,19 @@
+import { reactive } from 'vue'
+
+export interface Item {
+  title: string
+  description?: string
+  onConfirm: () => any
+  onCancel?: () => any
+}
+
+const items = reactive<Item[]>([])
+
+export const useAlertDialog = () => {
+  return {
+    confirm (item: Item) {
+      items.push(item)
+    },
+    items
+  }
+}