@eslamdevui/ui 3.2.0-beta.1

package/dist/runtime/components/Tooltip.vue.d.ts

@@ -0,0 +1,50 @@
+import type { TooltipRootProps, TooltipRootEmits, TooltipContentProps, TooltipContentEmits, TooltipArrowProps } from 'reka-ui';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/tooltip';
+import type { KbdProps } from '../types';
+import type { EmitsToProps, ComponentConfig } from '../types/utils';
+type Tooltip = ComponentConfig<typeof theme, AppConfig, 'tooltip'>;
+export interface TooltipProps extends TooltipRootProps {
+    /** The text content of the tooltip. */
+    text?: string;
+    /** The keyboard keys to display in the tooltip. */
+    kbds?: KbdProps['value'][] | KbdProps[];
+    /**
+     * The content of the tooltip.
+     * @defaultValue { side: 'bottom', sideOffset: 8, collisionPadding: 8 }
+     */
+    content?: Omit<TooltipContentProps, 'as' | 'asChild'> & Partial<EmitsToProps<TooltipContentEmits>>;
+    /**
+     * Display an arrow alongside the tooltip.
+     * @defaultValue false
+     */
+    arrow?: boolean | Omit<TooltipArrowProps, 'as' | 'asChild'>;
+    /**
+     * Render the tooltip in a portal.
+     * @defaultValue true
+     */
+    portal?: boolean | string | HTMLElement;
+    class?: any;
+    ui?: Tooltip['slots'];
+}
+export interface TooltipEmits extends TooltipRootEmits {
+}
+export interface TooltipSlots {
+    default(props: {
+        open: boolean;
+    }): any;
+    content(props?: {}): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<TooltipProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<TooltipProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    portal: boolean | string | HTMLElement;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, TooltipSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Tree.vue

@@ -0,0 +1,121 @@
+<script>
+import theme from "#build/ui/tree";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { TreeRoot, TreeItem, useForwardPropsEmits } from "reka-ui";
+import { reactivePick, createReusableTemplate } from "@vueuse/core";
+import { useAppConfig } from "#imports";
+import { get } from "../utils";
+import { tv } from "../utils/tv";
+import UIcon from "./Icon.vue";
+const props = defineProps({
+  as: { type: null, required: false },
+  color: { type: null, required: false },
+  size: { type: null, required: false },
+  valueKey: { type: null, required: false, default: "value" },
+  labelKey: { type: null, required: false, default: "label" },
+  trailingIcon: { type: String, required: false },
+  expandedIcon: { type: String, required: false },
+  collapsedIcon: { type: String, required: false },
+  items: { type: null, required: false },
+  modelValue: { type: null, required: false },
+  defaultValue: { type: null, required: false },
+  multiple: { type: Boolean, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false },
+  expanded: { type: Array, required: false },
+  defaultExpanded: { type: Array, required: false },
+  selectionBehavior: { type: String, required: false },
+  propagateSelect: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  bubbleSelect: { type: Boolean, required: false }
+});
+const emits = defineEmits(["update:expanded", "update:modelValue"]);
+const slots = defineSlots();
+const appConfig = useAppConfig();
+const rootProps = useForwardPropsEmits(reactivePick(props, "as", "modelValue", "defaultValue", "items", "multiple", "expanded", "disabled", "propagateSelect", "bubbleSelect"), emits);
+const [DefineTreeTemplate, ReuseTreeTemplate] = createReusableTemplate();
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.tree || {} })({
+  color: props.color,
+  size: props.size
+}));
+function getItemLabel(item) {
+  return get(item, props.labelKey);
+}
+function getItemValue(item) {
+  return get(item, props.valueKey) ?? get(item, props.labelKey);
+}
+function getDefaultOpenedItems(item) {
+  const currentItem = item.defaultExpanded ? getItemValue(item) : null;
+  const childItems = item.children?.flatMap((child) => getDefaultOpenedItems(child)) ?? [];
+  return [currentItem, ...childItems].filter(Boolean);
+}
+const defaultExpanded = computed(
+  () => props.defaultExpanded ?? props.items?.flatMap((item) => getDefaultOpenedItems(item))
+);
+</script>
+
+<template>
+  <DefineTreeTemplate v-slot="{ items, level }">
+    <li
+      v-for="(item, index) in items"
+      :key="`${level}-${index}`"
+      :class="level > 0 ? ui.itemWithChildren({ class: [props.ui?.itemWithChildren, item.ui?.itemWithChildren] }) : ui.item({ class: [props.ui?.item, item.ui?.item] })"
+    >
+      <TreeItem
+        v-slot="{ isExpanded, isSelected }"
+        as-child
+        :level="level"
+        :value="item"
+        @toggle="item.onToggle"
+        @select="item.onSelect"
+      >
+        <button :disabled="item.disabled || disabled" :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], selected: isSelected, disabled: item.disabled || disabled })">
+          <slot :name="item.slot || 'item'" v-bind="{ index, level, expanded: isExpanded, selected: isSelected }" :item="item">
+            <slot :name="item.slot ? `${item.slot}-leading` : 'item-leading'" v-bind="{ index, level, expanded: isExpanded, selected: isSelected }" :item="item">
+              <UIcon
+                v-if="item.icon"
+                :name="item.icon"
+                :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, item.ui?.linkLeadingIcon] })"
+              />
+              <UIcon
+                v-else-if="item.children?.length"
+                :name="isExpanded ? expandedIcon ?? appConfig.ui.icons.folderOpen : collapsedIcon ?? appConfig.ui.icons.folder"
+                :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, item.ui?.linkLeadingIcon] })"
+              />
+            </slot>
+
+            <span v-if="getItemLabel(item) || !!slots[item.slot ? `${item.slot}-label` : 'item-label']" :class="ui.linkLabel({ class: [props.ui?.linkLabel, item.ui?.linkLabel] })">
+              <slot :name="item.slot ? `${item.slot}-label` : 'item-label'" v-bind="{ item, index, level, expanded: isExpanded, selected: isSelected }" :item="item">
+                {{ getItemLabel(item) }}
+              </slot>
+            </span>
+
+            <span v-if="item.trailingIcon || item.children?.length || !!slots[item.slot ? `${item.slot}-trailing` : 'item-trailing']" :class="ui.linkTrailing({ class: [props.ui?.linkTrailing, item.ui?.linkTrailing] })">
+              <slot :name="item.slot ? `${item.slot}-trailing` : 'item-trailing'" v-bind="{ item, index, level, expanded: isExpanded, selected: isSelected }" :item="item">
+                <UIcon v-if="item.trailingIcon" :name="item.trailingIcon" :class="ui.linkTrailingIcon({ class: [props.ui?.linkTrailingIcon, item.ui?.linkTrailingIcon] })" />
+                <UIcon v-else-if="item.children?.length" :name="trailingIcon ?? appConfig.ui.icons.chevronDown" :class="ui.linkTrailingIcon({ class: [props.ui?.linkTrailingIcon, item.ui?.linkTrailingIcon] })" />
+              </slot>
+            </span>
+          </slot>
+        </button>
+
+        <ul v-if="item.children?.length && isExpanded" :class="ui.listWithChildren({ class: [props.ui?.listWithChildren, item.ui?.listWithChildren] })">
+          <ReuseTreeTemplate :items="item.children" :level="level + 1" />
+        </ul>
+      </TreeItem>
+    </li>
+  </DefineTreeTemplate>
+
+  <TreeRoot
+    v-bind="rootProps"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    :get-key="getItemValue"
+    :default-expanded="defaultExpanded"
+    :selection-behavior="selectionBehavior"
+  >
+    <ReuseTreeTemplate :items="items" :level="0" />
+  </TreeRoot>
+</template>

package/dist/runtime/components/Tree.vue.d.ts

@@ -0,0 +1,113 @@
+import type { TreeRootProps, TreeRootEmits } from 'reka-ui';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/tree';
+import type { DynamicSlots, GetItemKeys, GetModelValue, GetModelValueEmits, NestedItem, ComponentConfig } from '../types/utils';
+type Tree = ComponentConfig<typeof theme, AppConfig, 'tree'>;
+export type TreeItem = {
+    /**
+     * @IconifyIcon
+     */
+    icon?: string;
+    label?: string;
+    /**
+     * @IconifyIcon
+     */
+    trailingIcon?: string;
+    defaultExpanded?: boolean;
+    disabled?: boolean;
+    value?: string;
+    slot?: string;
+    children?: TreeItem[];
+    onToggle?(e: Event): void;
+    onSelect?(e?: Event): void;
+    class?: any;
+    ui?: Pick<Tree['slots'], 'item' | 'itemWithChildren' | 'link' | 'linkLeadingIcon' | 'linkLabel' | 'linkTrailing' | 'linkTrailingIcon' | 'listWithChildren'>;
+    [key: string]: any;
+};
+export interface TreeProps<T extends TreeItem[] = TreeItem[], VK extends GetItemKeys<T> = 'value', M extends boolean = false> extends Pick<TreeRootProps<T>, 'expanded' | 'defaultExpanded' | 'selectionBehavior' | 'propagateSelect' | 'disabled' | 'bubbleSelect'> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'ul'
+     */
+    as?: any;
+    /**
+     * @defaultValue 'primary'
+     */
+    color?: Tree['variants']['color'];
+    /**
+     * @defaultValue 'md'
+     */
+    size?: Tree['variants']['size'];
+    /**
+     * The key used to get the value from the item.
+     * @defaultValue 'value'
+     */
+    valueKey?: VK;
+    /**
+     * The key used to get the label from the item.
+     * @defaultValue 'label'
+     */
+    labelKey?: keyof NestedItem<T>;
+    /**
+     * The icon displayed on the right side of a parent node.
+     * @defaultValue appConfig.ui.icons.chevronDown
+     * @IconifyIcon
+     */
+    trailingIcon?: string;
+    /**
+     * The icon displayed when a parent node is expanded.
+     * @defaultValue appConfig.ui.icons.folderOpen
+     * @IconifyIcon
+     */
+    expandedIcon?: string;
+    /**
+     * The icon displayed when a parent node is collapsed.
+     * @defaultValue appConfig.ui.icons.folder
+     * @IconifyIcon
+     */
+    collapsedIcon?: string;
+    items?: T;
+    /** The controlled value of the Tree. Can be bind as `v-model`. */
+    modelValue?: GetModelValue<T, VK, M>;
+    /** The value of the Tree when initially rendered. Use when you do not need to control the state of the Tree. */
+    defaultValue?: GetModelValue<T, VK, M>;
+    /** Whether multiple options can be selected or not. */
+    multiple?: M & boolean;
+    class?: any;
+    ui?: Tree['slots'];
+}
+export type TreeEmits<A extends TreeItem[], VK extends GetItemKeys<A> | undefined, M extends boolean> = Omit<TreeRootEmits, 'update:modelValue'> & GetModelValueEmits<A, VK, M>;
+type SlotProps<T extends TreeItem> = (props: {
+    item: T;
+    index: number;
+    level: number;
+    expanded: boolean;
+    selected: boolean;
+}) => any;
+export type TreeSlots<A extends TreeItem[] = TreeItem[], T extends NestedItem<A> = NestedItem<A>> = {
+    'item': SlotProps<T>;
+    'item-leading': SlotProps<T>;
+    'item-label': SlotProps<T>;
+    'item-trailing': SlotProps<T>;
+} & DynamicSlots<T, undefined, {
+    index: number;
+    level: number;
+    expanded: boolean;
+    selected: boolean;
+}>;
+declare const _default: <T extends TreeItem[], VK extends GetItemKeys<T> = "value", M extends boolean = false>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly "onUpdate:modelValue"?: ((payload: GetModelValue<T, VK, M>) => any) | undefined;
+        readonly "onUpdate:expanded"?: ((val: string[]) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:modelValue" | "onUpdate:expanded"> & TreeProps<T, VK, M> & Partial<{}>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: TreeSlots<T, NestedItem<T>>;
+    emit: ((evt: "update:modelValue", payload: GetModelValue<T, VK, M>) => void) & ((evt: "update:expanded", val: string[]) => void);
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/runtime/components/color-mode/ColorModeAvatar.vue

@@ -0,0 +1,16 @@
+<script>
+
+</script>
+
+<script setup>
+defineOptions({ inheritAttrs: false });
+defineProps({
+  light: { type: String, required: true },
+  dark: { type: String, required: true }
+});
+</script>
+
+<template>
+  <UAvatar :src="light" class="dark:hidden" v-bind="$attrs" />
+  <UAvatar :src="dark" class="hidden dark:block" v-bind="$attrs" />
+</template>

package/dist/runtime/components/color-mode/ColorModeAvatar.vue.d.ts

@@ -0,0 +1,7 @@
+import type { AvatarProps } from '@eslamdevui/ui';
+export interface ColorModeAvatarProps extends /** @vue-ignore */ Omit<AvatarProps, 'src'> {
+    light: string;
+    dark: string;
+}
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/color-mode/ColorModeButton.vue

@@ -0,0 +1,45 @@
+<script>
+
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { useColorMode, useAppConfig } from "#imports";
+import { useLocalePro } from "../../composables/useLocalePro";
+defineOptions({ inheritAttrs: false });
+defineProps({
+  color: { type: null, required: false, default: "neutral" },
+  variant: { type: null, required: false, default: "ghost" }
+});
+defineSlots();
+const { t } = useLocalePro();
+const colorMode = useColorMode();
+const appConfig = useAppConfig();
+const isDark = computed({
+  get() {
+    return colorMode.value === "dark";
+  },
+  set(_isDark) {
+    colorMode.preference = _isDark ? "dark" : "light";
+  }
+});
+</script>
+
+<template>
+  <ClientOnly v-if="!colorMode?.forced">
+    <UButton
+      :icon="isDark ? appConfig.ui.icons.dark : appConfig.ui.icons.light"
+      :color="color"
+      :variant="variant"
+      :aria-label="isDark ? t('colorMode.switchToLight') : t('colorMode.switchToDark')"
+      v-bind="$attrs"
+      @click="isDark = !isDark"
+    />
+
+    <template #fallback>
+      <slot name="fallback">
+        <div class="size-8" />
+      </slot>
+    </template>
+  </ClientOnly>
+</template>

package/dist/runtime/components/color-mode/ColorModeButton.vue.d.ts

@@ -0,0 +1,24 @@
+import type { ButtonProps } from '@eslamdevui/ui';
+export interface ColorModeButtonProps extends /** @vue-ignore */ Pick<ButtonProps, 'as' | 'size' | 'disabled' | 'ui'> {
+    /**
+     * @defaultValue 'neutral'
+     */
+    color?: ButtonProps['color'];
+    /**
+     * @defaultValue 'ghost'
+     */
+    variant?: ButtonProps['variant'];
+}
+export interface ColorModeButtonSlots {
+    fallback(props?: {}): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ColorModeButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeButtonProps> & Readonly<{}>, {
+    color: ButtonProps["color"];
+    variant: ButtonProps["variant"];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ColorModeButtonSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/color-mode/ColorModeImage.vue

@@ -0,0 +1,17 @@
+<script>
+
+</script>
+
+<script setup>
+import ImageComponent from "#build/ui-image-component";
+defineOptions({ inheritAttrs: false });
+defineProps({
+  dark: { type: String, required: true },
+  light: { type: String, required: true }
+});
+</script>
+
+<template>
+  <component :is="ImageComponent" :src="light" class="dark:hidden" v-bind="$attrs" />
+  <component :is="ImageComponent" :src="dark" class="hidden dark:block" v-bind="$attrs" />
+</template>

package/dist/runtime/components/color-mode/ColorModeImage.vue.d.ts

@@ -0,0 +1,6 @@
+export interface ColorModeImageProps {
+    dark: string;
+    light: string;
+}
+declare const _default: import("vue").DefineComponent<ColorModeImageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeImageProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/color-mode/ColorModeSelect.vue

@@ -0,0 +1,49 @@
+<script>
+
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { useColorMode, useAppConfig } from "#imports";
+import { useLocalePro } from "../../composables/useLocalePro";
+defineOptions({ inheritAttrs: false });
+defineProps({});
+const { t } = useLocalePro();
+const colorMode = useColorMode();
+const appConfig = useAppConfig();
+const items = computed(() => [
+  { label: t("colorMode.system"), value: "system", icon: appConfig.ui.icons.system },
+  { label: t("colorMode.light"), value: "light", icon: appConfig.ui.icons.light },
+  { label: t("colorMode.dark"), value: "dark", icon: appConfig.ui.icons.dark }
+]);
+const preference = computed({
+  get() {
+    return items.value.find((option) => option.value === colorMode.preference) || items.value[0];
+  },
+  set(option) {
+    colorMode.preference = option.value;
+  }
+});
+</script>
+
+<template>
+  <ClientOnly v-if="!colorMode?.forced">
+    <USelectMenu
+      v-model="preference"
+      :search-input="false"
+      :icon="preference?.icon"
+      v-bind="$attrs"
+      :items="items"
+    />
+    <template #fallback>
+      <USelectMenu
+        :search-input="false"
+        :icon="items[0]?.icon"
+        v-bind="$attrs"
+        :model-value="items[0]"
+        :items="items"
+        disabled
+      />
+    </template>
+  </ClientOnly>
+</template>

package/dist/runtime/components/color-mode/ColorModeSelect.vue.d.ts

@@ -0,0 +1,7 @@
+import type { SelectMenuProps } from '@eslamdevui/ui';
+export interface ColorModeSelectProps extends 
+/** @vue-ignore */
+Pick<SelectMenuProps<any>, 'color' | 'variant' | 'size' | 'trailingIcon' | 'selectedIcon' | 'content' | 'arrow' | 'portal' | 'disabled' | 'ui'> {
+}
+declare const _default: import("vue").DefineComponent<ColorModeSelectProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeSelectProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/color-mode/ColorModeSwitch.vue

@@ -0,0 +1,44 @@
+<script>
+
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { useColorMode, useAppConfig } from "#imports";
+import { useLocalePro } from "../../composables/useLocalePro";
+defineOptions({ inheritAttrs: false });
+defineProps({});
+const { t } = useLocalePro();
+const colorMode = useColorMode();
+const appConfig = useAppConfig();
+const isDark = computed({
+  get() {
+    return colorMode.value === "dark";
+  },
+  set(_isDark) {
+    colorMode.preference = _isDark ? "dark" : "light";
+  }
+});
+</script>
+
+<template>
+  <ClientOnly v-if="!colorMode?.forced">
+    <USwitch
+      v-model="isDark"
+      :checked-icon="appConfig.ui.icons.dark"
+      :unchecked-icon="appConfig.ui.icons.light"
+      :aria-label="isDark ? t('colorMode.switchToLight') : t('colorMode.switchToDark')"
+      v-bind="$attrs"
+    />
+
+    <template #fallback>
+      <USwitch
+        :checked-icon="appConfig.ui.icons.dark"
+        :unchecked-icon="appConfig.ui.icons.light"
+        :aria-label="isDark ? t('colorMode.switchToLight') : t('colorMode.switchToDark')"
+        v-bind="$attrs"
+        disabled
+      />
+    </template>
+  </ClientOnly>
+</template>

package/dist/runtime/components/color-mode/ColorModeSwitch.vue.d.ts

@@ -0,0 +1,7 @@
+import type { SwitchProps } from '@eslamdevui/ui';
+export interface ColorModeSwitchProps extends 
+/** @vue-ignore */
+Pick<SwitchProps, 'as' | 'color' | 'size' | 'disabled' | 'ui'> {
+}
+declare const _default: import("vue").DefineComponent<ColorModeSwitchProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeSwitchProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/locale/LocaleSelect.vue

@@ -0,0 +1,61 @@
+<script>
+
+</script>
+
+<script setup>
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  locales: { type: Array, required: false }
+});
+const modelValue = defineModel({ type: null });
+function getEmojiFlag(locale) {
+  const languageToCountry = {
+    ar: "sa",
+    bn: "bd",
+    ca: "es",
+    ckb: "iq",
+    cs: "cz",
+    da: "dk",
+    el: "gr",
+    en: "gb",
+    et: "ee",
+    he: "il",
+    hi: "in",
+    hy: "am",
+    ja: "jp",
+    km: "kh",
+    ko: "kr",
+    nb: "no",
+    sv: "se",
+    uk: "ua",
+    ur: "pk",
+    vi: "vn"
+  };
+  const baseLanguage = locale.split("-")[0]?.toLowerCase() || locale;
+  const countryCode = languageToCountry[baseLanguage] || locale.replace(/^.*-/, "").slice(0, 2);
+  return countryCode.toUpperCase().split("").map((char) => String.fromCodePoint(127397 + char.charCodeAt(0))).join("");
+}
+</script>
+
+<template>
+  <USelectMenu
+    v-model="modelValue"
+    :search-input="false"
+    value-key="code"
+    label-key="name"
+    :items="props.locales"
+    v-bind="$attrs"
+  >
+    <template #leading>
+      <span v-if="modelValue" class="size-5 text-center">
+        {{ getEmojiFlag(modelValue) }}
+      </span>
+    </template>
+
+    <template #item-leading="{ item }">
+      <span class="size-5 text-center">
+        {{ getEmojiFlag(item.code) }}
+      </span>
+    </template>
+  </USelectMenu>
+</template>

package/dist/runtime/components/locale/LocaleSelect.vue.d.ts

@@ -0,0 +1,16 @@
+import type { SelectMenuProps, Locale } from '@eslamdevui/ui';
+export interface LocaleSelectProps extends 
+/** @vue-ignore */
+Pick<SelectMenuProps<any>, 'color' | 'variant' | 'size' | 'trailingIcon' | 'selectedIcon' | 'content' | 'arrow' | 'portal' | 'disabled' | 'ui'> {
+    locales?: Locale<any>[];
+}
+declare const _default: import("vue").DefineComponent<LocaleSelectProps & {
+    modelValue?: string | undefined;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<LocaleSelectProps & {
+    modelValue?: string | undefined;
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/composables/color-mode/useColorMode.d.ts

@@ -0,0 +1,3 @@
+export declare const useColorMode: () => {
+    forced: boolean;
+};

package/dist/runtime/composables/color-mode/useColorMode.js

@@ -0,0 +1,5 @@
+export const useColorMode = () => {
+  return {
+    forced: true
+  };
+};

package/dist/runtime/composables/defineLocale.d.ts

@@ -0,0 +1,11 @@
+import type { Locale, Direction } from '../types/locale';
+import type { DeepPartial } from '../types/utils';
+interface DefineLocaleOptions<M> {
+    name: string;
+    code: string;
+    dir?: Direction;
+    messages: M;
+}
+export declare function defineLocale<M>(options: DefineLocaleOptions<M>): Locale<M>;
+export declare function extendLocale<M>(locale: Locale<M>, options: Partial<DefineLocaleOptions<DeepPartial<M>>>): Locale<M>;
+export {};

package/dist/runtime/composables/defineLocale.js

@@ -0,0 +1,9 @@
+import { defu } from "defu";
+// @__NO_SIDE_EFFECTS__
+export function defineLocale(options) {
+  return defu(options, { dir: "ltr" });
+}
+// @__NO_SIDE_EFFECTS__
+export function extendLocale(locale, options) {
+  return defu(options, locale);
+}

package/dist/runtime/composables/defineShortcuts.d.ts

@@ -0,0 +1,15 @@
+import type { MaybeRef } from 'vue';
+type Handler = (e?: any) => void;
+export interface ShortcutConfig {
+    handler: Handler;
+    usingInput?: string | boolean;
+}
+export interface ShortcutsConfig {
+    [key: string]: ShortcutConfig | Handler | false | null | undefined;
+}
+export interface ShortcutsOptions {
+    chainDelay?: number;
+}
+export declare function extractShortcuts(items: any[] | any[][]): Record<string, Handler>;
+export declare function defineShortcuts(config: MaybeRef<ShortcutsConfig>, options?: ShortcutsOptions): import("@vueuse/shared").Fn;
+export {};