paket-ui 0.0.1

package/dist/runtime/components/input/InputRadio.vue.d.ts

@@ -0,0 +1,22 @@
+import type { HTMLAttributes } from 'vue';
+type __VLS_Props = {
+    defaultValue?: string;
+    modelValue?: string;
+    class?: HTMLAttributes['class'];
+    id?: HTMLAttributes['id'];
+    size?: string;
+    value: string;
+    label: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (payload: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((payload: string) => any) | undefined;
+}>, {
+    class: HTMLAttributes["class"];
+    size: string;
+    modelValue: string;
+    id: string;
+    defaultValue: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/input/InputText.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="flex flex-col">
+    <div v-if="label" class="mb-1 flex justify-between">
+      <UiLabelBaseLabel
+        v-if="label"
+        :text="label"
+        :for="id"
+        :is-required="required"
+        :class="cn('inline-block', props.labelClass)"
+      />
+      <span v-if="hint && props.maxLength" class="text-xs text-flux-outline">
+        {{ content?.toString().length ?? 0 }} / {{ props.maxLength }}
+      </span>
+    </div>
+    <div class="relative">
+      <div
+        v-if="slots.leading"
+        class="absolute left-3 top-1/2 text-sm -translate-y-1/2"
+      >
+        <slot name="leading" />
+      </div>
+      <UiInputField
+        :id="id"
+        v-model="content"
+        :class="[inputClasses]"
+        :type="type"
+        :max="max"
+        :allow-emoji="allowEmoji"
+        :placeholder="placeholder ?? label ?? ''"
+        :required="required"
+        :autocomplete="autocomplete"
+        :max-length="maxLength"
+        :maxlength="maxLength"
+        :invalid="!!errorMessage"
+        :inputmode="inputmode"
+        :input-mask="inputMask"
+        :tabindex="tabIndex"
+        :local-tel="localTel"
+        :disabled="disabled"
+      />
+      <div
+        v-if="slots.trailing || props.trailing"
+        class="absolute right-3 top-1/2 text-xs -translate-y-1/2"
+      >
+        <slot name="trailing">{{ props.trailing }}</slot>
+      </div>
+    </div>
+    <p
+      v-if="errorMessage"
+      class="text-flux-error text-xs mt-1 font-semibold"
+      v-text="errorMessage"
+    />
+  </div>
+</template>
+
+<script setup>
+import { useVModel } from "@vueuse/core";
+const props = defineProps({
+  id: { type: String, required: false },
+  modelValue: { type: [String, Number], required: false },
+  errorMessage: { type: String, required: false },
+  label: { type: String, required: false },
+  autocomplete: { type: null, required: false },
+  inputClass: { type: null, required: false },
+  placeholder: { type: null, required: false },
+  type: { type: null, required: false },
+  disabled: { type: null, required: false },
+  required: { type: Boolean, required: false },
+  inputMask: { type: null, required: false },
+  maxLength: { type: null, required: false },
+  maxClipboardLength: { type: Number, required: false },
+  inputmode: { type: null, required: false },
+  labelClass: { type: null, required: false },
+  inputWrapperClass: { type: null, required: false },
+  tabIndex: { type: [String, Number], required: false },
+  allowEmoji: { type: Boolean, required: false },
+  trailing: { type: String, required: false },
+  max: { type: null, required: false },
+  localTel: { type: Boolean, required: false },
+  hint: { type: Boolean, required: false }
+});
+const emit = defineEmits(["update:modelValue", "removeError", "focus", "blur"]);
+const slots = useSlots();
+const content = useVModel(props, "modelValue", emit);
+const inputClasses = computed(
+  () => cn([
+    {
+      "pl-10": slots.leading,
+      "pr-10": slots.trailing || props.trailing
+    },
+    props.inputClass
+  ])
+);
+</script>

package/dist/runtime/components/input/InputText.vue.d.ts

@@ -0,0 +1,50 @@
+import type { HTMLAttributes, InputHTMLAttributes } from 'vue';
+import type { inputMaskingConfiguration } from '.';
+type __VLS_Props = {
+    id?: string;
+    modelValue?: string | number;
+    errorMessage?: string;
+    label?: string;
+    autocomplete?: InputHTMLAttributes['autocomplete'];
+    inputClass?: HTMLAttributes['class'];
+    placeholder?: InputHTMLAttributes['placeholder'];
+    type?: InputHTMLAttributes['type'];
+    disabled?: InputHTMLAttributes['disabled'];
+    required?: boolean;
+    inputMask?: keyof typeof inputMaskingConfiguration;
+    maxLength?: HTMLInputElement['maxLength'];
+    maxClipboardLength?: number;
+    inputmode?: HTMLAttributes['inputmode'];
+    labelClass?: HTMLAttributes['class'];
+    inputWrapperClass?: HTMLAttributes['class'];
+    tabIndex?: string | number;
+    allowEmoji?: boolean;
+    trailing?: string;
+    max?: InputHTMLAttributes['max'];
+    localTel?: boolean;
+    hint?: boolean;
+};
+declare var __VLS_5: {}, __VLS_11: {};
+type __VLS_Slots = {} & {
+    leading?: (props: typeof __VLS_5) => any;
+} & {
+    trailing?: (props: typeof __VLS_11) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value?: string | number | undefined) => void;
+    removeError: () => void;
+    blur: (evt: FocusEvent) => void;
+    focus: (evt: FocusEvent) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onBlur?: ((evt: FocusEvent) => any) | undefined;
+    onFocus?: ((evt: FocusEvent) => any) | undefined;
+    "onUpdate:modelValue"?: ((value?: string | number | undefined) => any) | undefined;
+    onRemoveError?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/input/TextArea.vue

@@ -0,0 +1,75 @@
+<script setup>
+import { useVModel } from "@vueuse/core";
+import { BASE_CLASS, BASE_INVALID_CLASS, inputMaskingConfiguration } from ".";
+const props = defineProps({
+  class: { type: null, required: false, default: void 0 },
+  defaultValue: { type: [String, Number, null], required: false, default: void 0 },
+  modelValue: { type: [String, Number, null], required: false, default: void 0 },
+  invalid: { type: Boolean, required: false },
+  inputMask: { type: null, required: false, default: "default" },
+  maxlength: { type: null, required: false, default: void 0 },
+  allowEmoji: { type: Boolean, required: false }
+});
+const emits = defineEmits(["update:modelValue"]);
+const modelValue = useVModel(props, "modelValue", emits, {
+  passive: true,
+  defaultValue: props.defaultValue
+});
+const maskedValue = computed({
+  get: () => inputMaskingConfiguration[props.inputMask].get(
+    modelValue.value || void 0
+  ),
+  set: (value) => modelValue.value = inputMaskingConfiguration[props.inputMask].set(value)
+});
+const onInput = (e) => {
+  const inputEl = e.target;
+  if (!props.allowEmoji && emojiRegex.test(inputEl.value)) {
+    modelValue.value = inputEl.value = inputEl.value.replace(emojiRegex, "");
+  }
+};
+const onPaste = (event) => {
+  event.preventDefault();
+  const clipboardData = (event.clipboardData?.getData("text/plain") || "").trim();
+  const start = textInputRef.value?.selectionStart ?? 0;
+  const end = textInputRef.value?.selectionEnd ?? 0;
+  const currentValue = modelValue.value?.toString() ?? "";
+  let newValue = currentValue.slice(0, start) + clipboardData + currentValue.slice(end);
+  newValue = inputMaskingConfiguration[props.inputMask].set(newValue);
+  if (!props.allowEmoji && emojiRegex.test(newValue?.toString() || "")) {
+    newValue = newValue?.toString().replace(emojiRegex, "");
+  }
+  if (props.maxlength) {
+    newValue = newValue?.toString().slice(0, parseInt(props.maxlength.toString()));
+  }
+  modelValue.value = newValue;
+  nextTick(() => {
+    const pos = start + clipboardData.length;
+    textInputRef.value?.setSelectionRange(pos, pos);
+  });
+};
+const textInputRef = ref(null);
+defineExpose({
+  textInputRef,
+  focus: () => {
+    textInputRef.value?.focus?.();
+  }
+});
+</script>
+
+<template>
+  <textarea
+    ref="textInputRef"
+    v-model="maskedValue"
+    :class="
+  cn(
+    BASE_CLASS,
+    'flex min-h-[76px]',
+    props.invalid ? BASE_INVALID_CLASS : '',
+    props.class
+  )
+"
+    :maxlength="maxlength"
+    @paste="onPaste"
+    @input="onInput"
+  />
+</template>

package/dist/runtime/components/input/TextArea.vue.d.ts

@@ -0,0 +1,26 @@
+import type { HTMLAttributes } from 'vue';
+import { inputMaskingConfiguration } from '.';
+type __VLS_Props = {
+    class?: HTMLAttributes['class'];
+    defaultValue?: string | number | null;
+    modelValue?: string | number | null;
+    invalid?: boolean;
+    inputMask?: keyof typeof inputMaskingConfiguration;
+    maxlength?: HTMLTextAreaElement['maxLength'] | string;
+    allowEmoji?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {
+    textInputRef: any;
+    focus: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (payload: string | number | null) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((payload: string | number | null) => any) | undefined;
+}>, {
+    class: HTMLAttributes["class"];
+    modelValue: string | number | null;
+    maxlength: HTMLTextAreaElement["maxLength"] | string;
+    defaultValue: string | number | null;
+    inputMask: keyof typeof inputMaskingConfiguration;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/input/index.d.ts

@@ -0,0 +1,36 @@
+export declare const inputMaskingConfiguration: {
+    default: {
+        get: (modelValue?: string | number) => string | number | undefined;
+        set: (value?: string | number) => string | number | undefined;
+    };
+    number: {
+        get: (modelValue?: string | number) => string | undefined;
+        set: (value?: string | number) => string | undefined;
+    };
+    npwp: {
+        get: (modelValue?: string | number) => string | undefined;
+        set: (value?: string | number) => string | undefined;
+    };
+    numbering: {
+        get: (modelValue?: string | number) => string | undefined;
+        set: (value?: string | number) => number | undefined;
+    };
+    url: {
+        get: (modelValue?: string | number) => string | number | undefined;
+        set: (value?: string | number) => string;
+    };
+    urlHost: {
+        get: (modelValue?: string | number) => string | number | undefined;
+        set: (value?: string | number) => string;
+    };
+    waOfferCode: {
+        get: (modelValue?: string | number) => string | undefined;
+        set: (value?: string | number) => string | undefined;
+    };
+    waButtonLabel: {
+        get: (modelValue?: string | number) => string | undefined;
+        set: (value?: string | number) => string | undefined;
+    };
+};
+export declare const BASE_CLASS: string[];
+export declare const BASE_INVALID_CLASS = "text-flux-error ring-offset-1 border-flux-error ring-offset-flux-error focus:border-flux-error bg-surface-container-low";

package/dist/runtime/components/input/index.js

@@ -0,0 +1,60 @@
+export const inputMaskingConfiguration = {
+  default: {
+    get: (modelValue) => modelValue,
+    set: (value) => value
+  },
+  number: {
+    get: (modelValue) => modelValue?.toString().replace(/\D/g, ""),
+    set: (value) => value?.toString().replace(/\D/g, "")
+  },
+  npwp: {
+    get: (modelValue) => {
+      const masked = modelValue?.toString().replace(
+        /^(\d{0,2})(\d{0,3})(\d{0,3})(\d{0,1})(\d{0,3})(\d{0,4})$/,
+        (_match, p1, p2, p3, p4, p5, p6) => {
+          let result = p1;
+          if (p2) result += "." + p2;
+          if (p3) result += "." + p3;
+          if (p4) result += "." + p4;
+          if (p5) result += "-" + p5;
+          if (p6) result += "." + p6;
+          return result;
+        }
+      );
+      return masked;
+    },
+    set: (value) => value?.toString().replace(/\D/g, "")
+  },
+  numbering: {
+    get: (modelValue) => modelValue ? Number(modelValue).toLocaleString("id-ID") : void 0,
+    set: (value) => value ? Number(value.toString().replace(/\D/g, "")) : void 0
+  },
+  url: {
+    get: (modelValue) => modelValue,
+    set: (value) => {
+      let url = value?.toString().replace(/ /g, "") || "";
+      url = url.replace(/^https?:\/\//, "");
+      return url ? "https://" + url : "";
+    }
+  },
+  urlHost: {
+    get: (modelValue) => modelValue,
+    set: (value) => {
+      const url = value?.toString().replace(/ /g, "") || "";
+      return url.replace(/^https?:\/\//, "");
+    }
+  },
+  waOfferCode: {
+    get: (modelValue) => modelValue?.toString().replace(/[^a-zA-Z0-9]/g, ""),
+    set: (value) => value?.toString().replace(/[^a-zA-Z0-9]/g, "")
+  },
+  waButtonLabel: {
+    get: (modelValue) => modelValue?.toString().replace(/[^a-zA-Z0-9 .,:_\-/'&+!?()]/g, ""),
+    set: (value) => value?.toString().replace(/[^a-zA-Z0-9 .,:_\-/'&+!?()]/g, "")
+  }
+};
+export const BASE_CLASS = [
+  "w-full px-2.5 py-2 text-sm rounded-lg border border-outline-variant ring-inset placeholder:text-flux-outline focus-visible:outline-none ring-0 focus-visible:ring-offset-1 focus-visible:ring-offset-flux-primary disabled:cursor-not-allowed disabled:opacity-50 peer focus-visible:text-on-surface focus-visible:bg-surface-container-lowest read-only:bg-surface-container-low autofill:bg-background",
+  "text-onSurface ring-offset-0 ring-offset-flux-primary focus:border-flux-primary bg-background dark:bg-surface-container-high"
+];
+export const BASE_INVALID_CLASS = "text-flux-error ring-offset-1 border-flux-error ring-offset-flux-error focus:border-flux-error bg-surface-container-low";

package/dist/runtime/components/label/BaseLabel.vue

@@ -0,0 +1,18 @@
+<script setup>
+const props = defineProps({
+  class: { type: null, required: false },
+  text: { type: String, required: false },
+  isRequired: { type: Boolean, required: false },
+  as: { type: String, required: false }
+});
+</script>
+
+<template>
+  <component
+    :is="as ?? 'label'"
+    :class="cn('text-xs font-medium', props.class)"
+  >
+    {{ props.text || "This is Text" }}
+    <span v-if="isRequired" class="text-flux-error">*</span>
+  </component>
+</template>

package/dist/runtime/components/label/BaseLabel.vue.d.ts

@@ -0,0 +1,9 @@
+import type { HTMLAttributes } from 'vue';
+type __VLS_Props = {
+    class?: HTMLAttributes['class'];
+    text?: string;
+    isRequired?: boolean;
+    as?: string;
+};
+declare const _default: 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>;
+export default _default;

package/dist/runtime/components/label/ErrorLabel.vue

@@ -0,0 +1,13 @@
+<script setup>
+const props = defineProps({
+  class: { type: null, required: false },
+  text: { type: String, required: false },
+  isRequired: { type: Boolean, required: false, default: true }
+});
+</script>
+
+<template>
+  <span :class="cn('text-xs text-flux-error font-medium', props.class)">
+    <span v-if="isRequired">*</span>{{ props.text || "This is Text" }}
+  </span>
+</template>

package/dist/runtime/components/label/ErrorLabel.vue.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from 'vue';
+type __VLS_Props = {
+    class?: HTMLAttributes['class'];
+    text?: string;
+    isRequired?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    isRequired: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/label/Form.vue

@@ -0,0 +1,16 @@
+<template>
+    <div class="mb-1 box-between flex">
+        <label :for="for" class="text-xs font-semibold block text-onSurface">
+            <span>{{label}} </span>
+            <span v-if="required" class="text-flux-error">*</span>
+        </label>
+    </div>
+</template>
+
+<script setup>
+defineProps({
+  for: { type: String, required: false },
+  label: { type: String, required: true },
+  required: { type: Boolean, required: false }
+});
+</script>

package/dist/runtime/components/label/Form.vue.d.ts

@@ -0,0 +1,7 @@
+type __VLS_Props = {
+    for?: string;
+    label: string;
+    required?: boolean;
+};
+declare const _default: 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>;
+export default _default;

package/dist/runtime/components/label/HintLabel.vue

@@ -0,0 +1,23 @@
+<script setup>
+import { useForwardProps } from "reka-ui";
+const props = defineProps({
+  class: { type: null, required: false },
+  text: { type: String, required: false },
+  isRequired: { type: Boolean, required: false },
+  as: { type: String, required: false },
+  hint: { type: String, required: false }
+});
+const forwarded = useForwardProps(props);
+defineOptions({
+  inheritAttrs: false
+});
+</script>
+
+<template>
+  <div class="flex gap-2 justify-between">
+    <UiLabelBaseLabel v-bind="{ ...$attrs, ...forwarded, hint: void 0 }" />
+    <span class="text-xs text-flux-outline">
+      {{ props.hint }}
+    </span>
+  </div>
+</template>

package/dist/runtime/components/label/HintLabel.vue.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from 'vue';
+type __VLS_Props = {
+    class?: HTMLAttributes['class'];
+    text?: string;
+    isRequired?: boolean;
+    as?: string;
+    hint?: string;
+};
+declare const _default: 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>;
+export default _default;

package/dist/runtime/components/label/LabelSection.vue

@@ -0,0 +1,39 @@
+<template>
+  <div
+    class="flex flex-row justify-between items-center gap-y-2 gap-x-3 w-full h-fit"
+  >
+    <div class="flex items-center gap-1">
+      <div
+        v-if="icon"
+        class="p-1 mr-2 rounded-full bg-secondary-container text-flux-primary"
+      >
+        <Icon :name="icon" size="24px" />
+      </div>
+      <div>
+        <h3 class="font-bold" v-text="title"></h3>
+        <slot name="sub" />
+      </div>
+      <UiPopover v-if="slots.popover">
+        <Icon
+          name="material-symbols:info-outline"
+          size="20px"
+          class="text-flux-primary"
+        />
+        <template #content>
+          <slot name="popover" />
+        </template>
+      </UiPopover>
+    </div>
+    <div v-if="slots.default" class="flex items-center gap-3">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  title: { type: String, required: true },
+  icon: { type: String, required: false }
+});
+const slots = useSlots();
+</script>

package/dist/runtime/components/label/LabelSection.vue.d.ts

@@ -0,0 +1,20 @@
+type __VLS_Props = {
+    title: string;
+    icon?: string;
+};
+declare var __VLS_5: {}, __VLS_15: {}, __VLS_17: {};
+type __VLS_Slots = {} & {
+    sub?: (props: typeof __VLS_5) => any;
+} & {
+    popover?: (props: typeof __VLS_15) => any;
+} & {
+    default?: (props: typeof __VLS_17) => any;
+};
+declare const __VLS_component: 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 _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/listbox/Listbox.vue

@@ -0,0 +1,17 @@
+<script setup>
+import { ListboxContent, ListboxRoot } from "reka-ui";
+const props = defineProps({
+  class: { type: null, required: false },
+  scrollableAreaClass: { type: null, required: false }
+});
+</script>
+
+<template>
+  <ListboxRoot>
+    <UiScrollAreaBase :class="scrollableAreaClass">
+      <ListboxContent :class="cn('flex flex-col', props.class)">
+        <slot />
+      </ListboxContent>
+    </UiScrollAreaBase>
+  </ListboxRoot>
+</template>

package/dist/runtime/components/listbox/Listbox.vue.d.ts

@@ -0,0 +1,17 @@
+import type { HTMLAttributes } from 'vue';
+type __VLS_Props = {
+    class?: HTMLAttributes['class'];
+    scrollableAreaClass?: HTMLAttributes['class'];
+};
+declare var __VLS_14: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_14) => any;
+};
+declare const __VLS_component: 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 _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/listbox/ListboxItem.vue

@@ -0,0 +1,34 @@
+<script setup>
+import { ListboxItem, ListboxItemIndicator } from "reka-ui";
+const props = defineProps({
+  class: { type: null, required: false },
+  indicatorClass: { type: null, required: false },
+  indicator: { type: Boolean, required: false }
+});
+</script>
+
+<template>
+  <ListboxItem
+    :class="
+  cn(
+    'select-none outline-none data-[highlighted]:bg-surface-container-low data-[state=checked]:bg-surface-container-low data-[disabled]:opacity-50',
+    props.class
+  )
+"
+  >
+    <ListboxItemIndicator
+      v-if="props.indicator"
+      :class="
+  cn(
+    'absolute left-0 inline-flex items-center justify-center',
+    props.indicatorClass
+  )
+"
+    >
+      <slot name="indicator">
+        <Icon name="material-symbols:check" />
+      </slot>
+    </ListboxItemIndicator>
+    <slot />
+  </ListboxItem>
+</template>

package/dist/runtime/components/listbox/ListboxItem.vue.d.ts

@@ -0,0 +1,20 @@
+import type { HTMLAttributes } from 'vue';
+type __VLS_Props = {
+    class?: HTMLAttributes['class'];
+    indicatorClass?: HTMLAttributes['class'];
+    indicator?: boolean;
+};
+declare var __VLS_10: {}, __VLS_16: {};
+type __VLS_Slots = {} & {
+    indicator?: (props: typeof __VLS_10) => any;
+} & {
+    default?: (props: typeof __VLS_16) => any;
+};
+declare const __VLS_component: 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 _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/loading/BounceLoading.vue

@@ -0,0 +1,19 @@
+<script setup>
+const props = defineProps({
+  class: { type: null, required: false }
+});
+</script>
+
+<template>
+  <div :class="['inline-flex justify-center items-center gap-1', props.class]">
+    <div
+      class="w-3 h-3 animate-bounce rounded-full bg-surfaceContainerHigh dark:bg-on-surface-variant"
+    ></div>
+    <div
+      class="w-3 h-3 animate-[bounce_1s_infinite_200ms] rounded-full bg-surfaceContainerHigh dark:bg-on-surface-variant"
+    ></div>
+    <div
+      class="w-3 h-3 animate-[bounce_1s_infinite_400ms] rounded-full bg-surfaceContainerHigh dark:bg-on-surface-variant"
+    ></div>
+  </div>
+</template>