@blokkli/editor 2.0.0-alpha.58 → 2.0.0-alpha.59

package/dist/runtime/editor/components/Panel/Details/index.vue.d.ts

@@ -0,0 +1,25 @@
+type __VLS_Props = {
+    title: string;
+    description?: string;
+};
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_12: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_12) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/editor/components/Panel/Item/index.d.vue.ts

@@ -0,0 +1,65 @@
+import type { BlokkliIcon } from '#blokkli-build/icons';
+import type { ThemeColorName } from './../../../../../global/types/theme.js';
+type __VLS_Props = {
+    /**
+     * The title of the item.
+     */
+    title: string;
+    /**
+     * The optional description.
+     */
+    description?: string;
+    /**
+     * The icon.
+     */
+    icon?: BlokkliIcon;
+    /**
+     * Use a predefined theme color by name or provide the colors.
+     */
+    theme?: ThemeColorName | {
+        background: string;
+        color: string;
+    };
+    /**
+     * If the item is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * If true, the item is displayed as muted/inactive, without being disabled.
+     */
+    muted?: boolean;
+    /**
+     * If true, the item is displayed in an active state (e.g. opened).
+     */
+    active?: boolean;
+    /**
+     * Whether to render a button. Automatically set to true if a default slot is provided.
+     */
+    isButton?: boolean;
+    /**
+     * When provided, renders a drag handle in the actions area. Bind the
+     * `handleProps` slot prop from `<Reorder>` here to make the item draggable.
+     */
+    handleProps?: Record<string, unknown>;
+};
+declare var __VLS_14: {}, __VLS_16: {}, __VLS_18: {};
+type __VLS_Slots = {} & {
+    description?: (props: typeof __VLS_14) => any;
+} & {
+    actions?: (props: typeof __VLS_16) => any;
+} & {
+    default?: (props: typeof __VLS_18) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    click: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/editor/components/Panel/Item/index.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="_bk_w-full bk-panel-item">
+    <div
+      class="_bk_bg-white _bk_w-full _bk_grid _bk_grid-cols-[1fr_auto] _bk_group/panel-item _bk_relative"
+      :class="{
+  '_bk_hover:bg-mono-100': renderAsButton,
+  '_bk_bg-white! _bk_pointer-events-none! _bk_text-mono-300': disabled,
+  '_bk_bg-mono-100! _bk_text-mono-500 _bk_hover:bg-mono-200!': muted,
+  '_bk_bg-white!': active
+}"
+    >
+      <button
+        v-if="handleProps"
+        class="_bk_absolute _bk_top-0 _bk_left-0 _bk_w-panel-gap _bk_bottom-0 _bk_py-panel-gap _bk_overflow-hidden _bk_text-mono-400 _bk_hover:text-accent-600 _bk_invisible _bk_group-hover/panel-item:visible _bk_group/handle"
+        v-bind="handleProps"
+        :title="$t('dragToMove', 'Drag to move')"
+      >
+        <div
+          type="button"
+          class="_bk_flex _bk_items-center _bk_justify-center _bk_cursor-grab _bk_w-panel-gap _bk_h-full"
+        >
+          <div class="_bk_flex _bk_flex-col _bk_gap-3">
+            <div
+              v-for="n in 3"
+              :key="'dot_' + n"
+              class="_bk_bg-current _bk_rounded-full _bk_size-[4px]"
+            />
+          </div>
+        </div>
+      </button>
+      <Component
+        :is="renderAsButton ? 'button' : 'div'"
+        class="_bk_p-panel-gap _bk_flex _bk_gap-8 _bk_w-full _bk_col-start-1 _bk_-col-end-1 _bk_row-start-1"
+        type="button"
+        @click.prevent="$emit('click')"
+      >
+        <div
+          v-if="icon"
+          class="_bk_size-[36px] _bk_p-5 _bk_shrink-0 _bk_rounded"
+          :class="[
+  namedTheme && typeof props.theme !== 'object' ? [
+    'bk-scheme-' + namedTheme,
+    '_bk_bg-scheme-normal',
+    '_bk_text-scheme-text'
+  ] : void 0,
+  {
+    '_bk_opacity-30': disabled || muted
+  }
+]"
+          :style="typeof theme === 'object' ? theme : void 0"
+        >
+          <Icon :name="icon" />
+        </div>
+        <div>
+          <div class="_bk_text-sm _bk_font-semibold">{{ title }}</div>
+          <div v-if="description || $slots.description" class="_bk_text-xs">
+            <slot name="description">{{ description }}</slot>
+          </div>
+        </div>
+      </Component>
+      <div
+        v-if="$slots.actions"
+        class="_bk_row-start-1 _bk_col-start-2 _bk_flex _bk_items-center _bk_pr-15 _bk_relative _bk_opacity-50 _bk_group-hover/panel-item:opacity-100"
+      >
+        <slot name="actions" />
+      </div>
+    </div>
+
+    <slot />
+  </div>
+</template>
+
+<script setup>
+import Icon from "#blokkli/editor/components/Icon/index.vue";
+import { computed, useSlots, useBlokkli } from "#imports";
+const props = defineProps({
+  title: { type: String, required: true },
+  description: { type: String, required: false },
+  icon: { type: null, required: false },
+  theme: { type: [String, Object], required: false },
+  disabled: { type: Boolean, required: false },
+  muted: { type: Boolean, required: false },
+  active: { type: Boolean, required: false },
+  isButton: { type: Boolean, required: false },
+  handleProps: { type: Object, required: false }
+});
+defineEmits(["click"]);
+const slots = useSlots();
+const { $t } = useBlokkli();
+const renderAsButton = computed(
+  () => !!slots.default || !!props.isButton
+);
+const namedTheme = computed(() => {
+  if (typeof props.theme === "string") {
+    return props.theme;
+  }
+  return "accent";
+});
+</script>

package/dist/runtime/editor/components/Panel/Item/index.vue.d.ts

@@ -0,0 +1,65 @@
+import type { BlokkliIcon } from '#blokkli-build/icons';
+import type { ThemeColorName } from './../../../../../global/types/theme.js';
+type __VLS_Props = {
+    /**
+     * The title of the item.
+     */
+    title: string;
+    /**
+     * The optional description.
+     */
+    description?: string;
+    /**
+     * The icon.
+     */
+    icon?: BlokkliIcon;
+    /**
+     * Use a predefined theme color by name or provide the colors.
+     */
+    theme?: ThemeColorName | {
+        background: string;
+        color: string;
+    };
+    /**
+     * If the item is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * If true, the item is displayed as muted/inactive, without being disabled.
+     */
+    muted?: boolean;
+    /**
+     * If true, the item is displayed in an active state (e.g. opened).
+     */
+    active?: boolean;
+    /**
+     * Whether to render a button. Automatically set to true if a default slot is provided.
+     */
+    isButton?: boolean;
+    /**
+     * When provided, renders a drag handle in the actions area. Bind the
+     * `handleProps` slot prop from `<Reorder>` here to make the item draggable.
+     */
+    handleProps?: Record<string, unknown>;
+};
+declare var __VLS_14: {}, __VLS_16: {}, __VLS_18: {};
+type __VLS_Slots = {} & {
+    description?: (props: typeof __VLS_14) => any;
+} & {
+    actions?: (props: typeof __VLS_16) => any;
+} & {
+    default?: (props: typeof __VLS_18) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    click: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/editor/components/Panel/Section/index.d.vue.ts

@@ -0,0 +1,26 @@
+type __VLS_Props = {
+    title?: string;
+    help?: string;
+    disabled?: boolean;
+    padded?: boolean;
+    stickyActions?: boolean;
+};
+declare var __VLS_1: {}, __VLS_13: {}, __VLS_15: {}, __VLS_17: {};
+type __VLS_Slots = {} & {
+    'post-title'?: (props: typeof __VLS_1) => any;
+} & {
+    tabs?: (props: typeof __VLS_13) => any;
+} & {
+    default?: (props: typeof __VLS_15) => any;
+} & {
+    actions?: (props: typeof __VLS_17) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/editor/components/Panel/Section/index.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="_bk_w-full bk-panel-section">
+    <div class="bk-panel-section-inner">
+      <div v-if="title" class="_bk_flex _bk_items-center _bk_gap-5 _bk_mb-10">
+        <span class="_bk_text-lg _bk_text-mono-700 _bk_font-bold">{{ title }}</span>
+        <slot name="post-title" />
+        <div v-if="help" class="_bk_relative _bk_group/tooltip _bk_cursor-help _bk_group _bk_z-50">
+          <div
+            class="_bk_size-18 _bk_bg-mono-600 _bk_rounded-full _bk_p-3 _bk_pointer-events-none _bk_group-hover:bg-accent-700"
+          >
+            <Icon name="bk_mdi_question_mark" class="_bk_size-full _bk_text-mono-200" />
+          </div>
+          <Tooltip :label="help" placement="below-left" />
+        </div>
+        <hr class="_bk_flex-1 _bk_border-mono-300 _bk_ml-5" />
+      </div>
+      <div
+        v-if="$slots.tabs || $slots.default"
+        class="_bk_bg-white _bk_border _bk_border-mono-400 _bk_shadow-md"
+        :class="{ '_bk_pointer-events-none _bk_bg-mono-100!': disabled }"
+      >
+        <div
+          v-if="$slots.tabs"
+          class="_bk_border-b _bk_border-b-mono-400 _bk_bg-mono-200"
+          :class="{
+  '_bk_opacity-50': disabled
+}"
+        >
+          <slot name="tabs" />
+        </div>
+        <div
+          v-if="$slots.default"
+          class="bk-panel-section-inner"
+          :class="{
+  '_bk_opacity-50': disabled,
+  '_bk_p-panel-gap': padded
+}"
+        >
+          <slot />
+        </div>
+        <div
+          v-if="$slots.actions"
+          class="_bk_border-t _bk_border-t-mono-400 _bk_overflow-hidden _bk_bg-mono-200 _bk_p-panel-gap"
+          :class="{
+  '_bk_opacity-50': disabled,
+  '_bk_!border-t-0': !$slots.default,
+  '_bk_sticky _bk_bottom-0 _bk_z-50': stickyActions
+}"
+        >
+          <div
+            class="_bk_bg-white _bk_border _bk_border-mono-400 _bk_overflow-hidden _bk_rounded _bk_flex-wrap"
+          >
+            <div class="_bk_flex _bk_flex-wrap _bk_-mt-1 _bk_-mr-1">
+              <slot name="actions" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { Icon, Tooltip } from "#blokkli/editor/components";
+defineProps({
+  title: { type: String, required: false },
+  help: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  padded: { type: Boolean, required: false },
+  stickyActions: { type: Boolean, required: false }
+});
+defineOptions({
+  name: "PanelSection"
+});
+</script>
+
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
+.bk-panel-section {
+  container-type: inline-size;
+}
+@container (min-width: 500px) {
+  .bk-panel-section-inner {
+    --bk-panel-gap: 15px;
+  }
+}
+.bk-panel-section + .bk-panel-section {
+  margin-top: 20px;
+}
+@media (width >= 96rem) {
+  .bk-panel-section + .bk-panel-section {
+    margin-top: 30px;
+  }
+}
+</style>

package/dist/runtime/editor/components/Panel/Section/index.vue.d.ts

@@ -0,0 +1,26 @@
+type __VLS_Props = {
+    title?: string;
+    help?: string;
+    disabled?: boolean;
+    padded?: boolean;
+    stickyActions?: boolean;
+};
+declare var __VLS_1: {}, __VLS_13: {}, __VLS_15: {}, __VLS_17: {};
+type __VLS_Slots = {} & {
+    'post-title'?: (props: typeof __VLS_1) => any;
+} & {
+    tabs?: (props: typeof __VLS_13) => any;
+} & {
+    default?: (props: typeof __VLS_15) => any;
+} & {
+    actions?: (props: typeof __VLS_17) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/editor/components/Panel/Sheet/index.d.vue.ts

@@ -0,0 +1,20 @@
+type __VLS_Props = {
+    title: string;
+};
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/editor/components/Panel/Sheet/index.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="_bk_absolute _bk_inset-0 _bk_z-50 _bk_flex _bk_flex-col _bk_justify-end">
+    <div
+      class="bk-panel-sheet-backdrop _bk_absolute _bk_inset-0 _bk_bg-mono-200/90 _bk_backdrop-blur-sm"
+      @click="$emit('close')"
+    />
+    <div
+      class="bk-panel-sheet-sheet _bk_relative _bk_z-50 _bk_shadow-lg-inverted _bk_rounded-t-xl _bk_overflow-hidden"
+    >
+      <div
+        class="_bk_flex _bk_items-center _bk_justify-between _bk_text-xs _bk_uppercase _bk_tracking-wide _bk_font-semibold _bk_text-mono-500 _bk_pl-10 _bk_h-40 _bk_sticky _bk_top-0 _bk_bg-mono-200 _bk_z-10 _bk_border-b _bk_border-b-mono-200"
+      >
+        <span>{{ title }}</span>
+        <button
+          class="_bk_size-40 _bk_flex _bk_items-center _bk_justify-center _bk_border-none _bk_cursor-pointer _bk_bg-transparent _bk_text-mono-500 _bk_hover:bg-mono-100 _bk_hover:text-mono-700"
+          @click.prevent="$emit('close')"
+        >
+          <Icon name="bk_mdi_close" class="_bk_size-15" />
+        </button>
+      </div>
+      <div class="_bk_overflow-auto bk-scrollbar-light _bk_h-[500px]">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { Icon } from "#blokkli/editor/components";
+defineProps({
+  title: { type: String, required: true }
+});
+defineEmits(["close"]);
+</script>

package/dist/runtime/editor/components/Panel/Sheet/index.vue.d.ts

@@ -0,0 +1,20 @@
+type __VLS_Props = {
+    title: string;
+};
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/editor/components/Panel/Tabs/index.d.vue.ts

@@ -0,0 +1,28 @@
+export type PanelTabItem<Id extends string = string> = {
+    id: Id;
+    label: string;
+};
+declare const __VLS_export: <T extends string = string>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<({
+        tabs: PanelTabItem<T>[];
+    } & {
+        modelValue: T;
+    }) & {
+        "onUpdate:modelValue"?: ((value: T) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: (evt: "update:modelValue", value: T) => void;
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/editor/components/Panel/Tabs/index.vue

@@ -0,0 +1,25 @@
+<template>
+  <div role="tablist" class="_bk_inline-flex _bk_-mb-1">
+    <button
+      v-for="tab in tabs"
+      :key="tab.id"
+      type="button"
+      role="tab"
+      :aria-selected="modelValue === tab.id"
+      class="_bk_px-15 _bk_py-8 _bk_text-base _bk_font-semibold _bk_border _bk_first:border-l-0 _bk_border-t-0!"
+      :class="
+  modelValue === tab.id ? '_bk_text-accent-700 _bk_border-mono-400 _bk_border-b-white! _bk_bg-white' : '_bk_text-mono-500 _bk_border-transparent _bk_hover:text-mono-800'
+"
+      @click.prevent="modelValue = tab.id"
+    >
+      {{ tab.label }}
+    </button>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  tabs: { type: Array, required: true }
+});
+const modelValue = defineModel({ type: null, ...{ required: true } });
+</script>

package/dist/runtime/editor/components/Panel/Tabs/index.vue.d.ts

@@ -0,0 +1,28 @@
+export type PanelTabItem<Id extends string = string> = {
+    id: Id;
+    label: string;
+};
+declare const __VLS_export: <T extends string = string>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<({
+        tabs: PanelTabItem<T>[];
+    } & {
+        modelValue: T;
+    }) & {
+        "onUpdate:modelValue"?: ((value: T) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: (evt: "update:modelValue", value: T) => void;
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/editor/components/Pill/index.d.vue.ts

@@ -0,0 +1,28 @@
+import type { BlokkliIcon } from '#blokkli-build/icons';
+import type { ThemeColorName } from './../../../../global/types/theme.js';
+type __VLS_Props = {
+    text?: string | number;
+    icon?: BlokkliIcon;
+    scheme?: ThemeColorName;
+    variant?: 'light' | 'normal' | 'dark';
+    tag?: string;
+};
+declare var __VLS_13: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_13) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    tag: string;
+    text: string | number;
+    icon: BlokkliIcon;
+    scheme: ThemeColorName;
+    variant: "light" | "normal" | "dark";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/editor/components/Pill/index.vue

@@ -0,0 +1,37 @@
+<template>
+  <component
+    :is="tag"
+    class="_bk_inline-flex _bk_items-center _bk_rounded-full _bk_px-5 _bk_py-3 _bk_uppercase _bk_text-[10px] _bk_font-semibold _bk_tracking-wide _bk_leading-none"
+    :class="[
+  'bk-scheme-' + scheme,
+  {
+    '_bk_bg-scheme-light _bk_text-scheme-dark': variant === 'light',
+    '_bk_bg-scheme-normal _bk_text-scheme-text': variant === 'normal',
+    '_bk_bg-scheme-dark _bk_text-scheme-light': variant === 'dark',
+    '_bk_hover:bg-scheme-light-hover': isInteractive && variant === 'light',
+    '_bk_hover:bg-scheme-normal-hover': isInteractive && variant === 'normal',
+    '_bk_hover:bg-scheme-dark-hover': isInteractive && variant === 'dark'
+  }
+]"
+  >
+    <Icon v-if="icon" :name="icon" class="_bk_size-10 _bk_mr-2" />
+    <slot>
+      {{ text }}
+    </slot>
+  </component>
+</template>
+
+<script setup>
+import { computed } from "#imports";
+import Icon from "../Icon/index.vue";
+const props = defineProps({
+  text: { type: [String, Number], required: false, default: "" },
+  icon: { type: null, required: false, default: void 0 },
+  scheme: { type: String, required: false, default: "accent" },
+  variant: { type: String, required: false, default: "light" },
+  tag: { type: String, required: false, default: "div" }
+});
+const isInteractive = computed(
+  () => props.tag === "button" || props.tag === "a"
+);
+</script>

package/dist/runtime/editor/components/Pill/index.vue.d.ts

@@ -0,0 +1,28 @@
+import type { BlokkliIcon } from '#blokkli-build/icons';
+import type { ThemeColorName } from './../../../../global/types/theme.js';
+type __VLS_Props = {
+    text?: string | number;
+    icon?: BlokkliIcon;
+    scheme?: ThemeColorName;
+    variant?: 'light' | 'normal' | 'dark';
+    tag?: string;
+};
+declare var __VLS_13: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_13) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    tag: string;
+    text: string | number;
+    icon: BlokkliIcon;
+    scheme: ThemeColorName;
+    variant: "light" | "normal" | "dark";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};