@byyuurin/ui 0.0.10 → 0.1.0

package/dist/runtime/components/AvatarGroup.vue

@@ -1,87 +1,60 @@
-<script lang="ts">
-import type { VariantProps } from '@byyuurin/ui-kit'
-import type { PrimitiveProps } from 'reka-ui'
-import type { avatarGroup } from '../theme'
-import type { ComponentAttrs } from '../types'
-
-export interface AvatarGroupSlots {
-  default?: (props?: {}) => any
-}
-
-type AvatarGroupVariants = VariantProps<typeof avatarGroup>
-
-export interface AvatarGroupProps extends ComponentAttrs<typeof avatarGroup> {
-  /**
-   * The element or component this component should render as.
-   * @default "div"
-   */
-  as?: PrimitiveProps['as']
-  size?: AvatarGroupVariants['size']
-  /**
-   * The maximum number of avatars to display.
-   */
-  max?: number | string
-}
+<script>
+import theme from "#build/ui/avatar-group";
 </script>
 
-<script setup lang="ts">
-import { Primitive } from 'reka-ui'
-import { computed } from 'vue'
-import { provideAvatarGroup } from '../app/injections'
-import { useTheme } from '../composables/useTheme'
-import Avatar from './Avatar.vue'
-
-const props = defineProps<AvatarGroupProps>()
-const slots = defineSlots<AvatarGroupSlots>()
-
-const max = computed(() => typeof props.max === 'string' ? Number.parseInt(props.max, 10) : props.max)
-
+<script setup>
+import { Primitive } from "reka-ui";
+import { computed } from "vue";
+import { useAppConfig } from "#imports";
+import { provideAvatarGroup } from "../composables/useAvatarGroup";
+import { cv, merge } from "../utils/style";
+import Avatar from "./Avatar.vue";
+const props = defineProps({
+  as: { type: null, required: false },
+  size: { type: null, required: false },
+  max: { type: [Number, String], required: false },
+  ui: { type: null, required: false },
+  class: { type: [Object, String, Number, Boolean, null, Array], required: false, skipCheck: true }
+});
+const slots = defineSlots();
+const max = computed(() => typeof props.max === "string" ? Number.parseInt(props.max, 10) : props.max);
 const children = computed(() => {
-  let nodes = slots.default?.()
-
+  let nodes = slots.default?.();
   if (Array.isArray(nodes) && nodes?.length) {
     nodes = nodes.flatMap((child) => {
-      if (typeof child.type === 'symbol') {
-        // `v-if="false"` or commented node
-        if (typeof child.children === 'string')
-          return null
-
-        return child.children
+      if (typeof child.type === "symbol") {
+        if (typeof child.children === "string")
+          return null;
+        return child.children;
       }
-
-      return child
-    }).filter(Boolean)
+      return child;
+    }).filter(Boolean);
   }
-
-  return nodes || []
-})
-
+  return nodes || [];
+});
 const visibleAvatars = computed(() => {
   if (children.value.length === 0)
-    return []
-
+    return [];
   if (!max.value || max.value <= 0)
-    return [...children.value].reverse()
-
-  return [...children.value].slice(0, max.value).reverse()
-})
-
+    return [...children.value].reverse();
+  return [...children.value].slice(0, max.value).reverse();
+});
 const hiddenCount = computed(() => {
   if (children.value.length === 0)
-    return 0
-
-  return children.value.length - visibleAvatars.value.length
-})
-
-const { generateStyle } = useTheme()
-const style = computed(() => generateStyle('avatarGroup', props))
-
-provideAvatarGroup(computed(() => props))
+    return 0;
+  return children.value.length - visibleAvatars.value.length;
+});
+const appConfig = useAppConfig();
+const ui = computed(() => {
+  const styler = cv(merge(theme, appConfig.ui.avatarGroup));
+  return styler(props);
+});
+provideAvatarGroup(computed(() => props));
 </script>
 
 <template>
-  <Primitive :as="props.as" :class="style.root({ class: [props.class, props.ui?.root] })">
-    <Avatar v-if="hiddenCount > 0" :text="`+${hiddenCount}`" :class="style.base({ class: props.ui?.base })" />
-    <component :is="avatar" v-for="(avatar, index) in visibleAvatars" :key="index" :class="style.base({ class: props.ui?.base })" />
+  <Primitive :as="props.as" :class="ui.root({ class: [props.ui?.root, props.class] })" data-part="root">
+    <Avatar v-if="hiddenCount > 0" :text="`+${hiddenCount}`" :class="ui.base({ class: props.ui?.base })" data-part="base" />
+    <component :is="avatar" v-for="(avatar, index) in visibleAvatars" :key="index" :class="ui.base({ class: props.ui?.base })" data-part="base" />
   </Primitive>
 </template>

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

@@ -0,0 +1,30 @@
+import type { VariantProps } from '@byyuurin/ui-kit';
+import type { PrimitiveProps } from 'reka-ui';
+import theme from '#build/ui/avatar-group';
+import type { ComponentBaseProps, ComponentUIProps } from '../types';
+import type { StaticSlot } from '../types/utils';
+type ThemeVariants = VariantProps<typeof theme>;
+export interface AvatarGroupProps extends ComponentBaseProps {
+    /**
+     * The element or component this component should render as.
+     * @default "div"
+     */
+    as?: PrimitiveProps['as'];
+    size?: ThemeVariants['size'];
+    /**
+     * The maximum number of avatars to display.
+     */
+    max?: number | string;
+    ui?: ComponentUIProps<typeof theme>;
+}
+export interface AvatarGroupSlots {
+    default: StaticSlot;
+}
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<AvatarGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvatarGroupProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, AvatarGroupSlots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Badge.vue

@@ -1,72 +1,78 @@
-<script lang="ts">
-import type { VariantProps } from '@byyuurin/ui-kit'
-import type { PrimitiveProps } from 'reka-ui'
-import type { badge } from '../theme'
-import type { ComponentAttrs } from '../types'
-
-export interface BadgeEmits {
-  'update:show': [payload: boolean]
-}
-
-export interface BadgeSlots {
-  default?: (props?: {}) => any
-  content?: (props?: {}) => any
-}
-
-type BadgeVariants = VariantProps<typeof badge>
-
-export interface BadgeProps extends ComponentAttrs<typeof badge> {
-  /**
-   * The element or component this component should render as.
-   * @default "div"
-   */
-  as?: PrimitiveProps['as']
-  text?: string | number
-  size?: BadgeVariants['size']
-  position?: BadgeVariants['position']
-  show?: boolean
-  /** When `true`, keep the badge inside the component for rounded elements. */
-  inset?: boolean
-  /** When `true`, render the badge relatively to the parent. */
-  standalone?: boolean
-}
+<script>
+import theme from "#build/ui/badge";
 </script>
 
-<script setup lang="ts">
-import { Primitive, Slot } from 'reka-ui'
-import { computed } from 'vue'
-import { useTheme } from '../composables/useTheme'
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-const props = withDefaults(defineProps<BadgeProps>(), {
-  position: 'top-right',
-})
-
-defineEmits<BadgeEmits>()
-defineSlots<BadgeSlots>()
-
-const show = defineModel<boolean>('show', { default: true })
-
-const { generateStyle } = useTheme()
-const style = computed(() => generateStyle('badge', props))
+<script setup>
+import { Primitive } from "reka-ui";
+import { computed } from "vue";
+import { useAppConfig } from "#imports";
+import { useComponentIcons } from "../composables/useComponentIcons";
+import { useFieldGroup } from "../composables/useFieldGroup";
+import { cv, merge } from "../utils/style";
+import Avatar from "./Avatar.vue";
+import Icon from "./Icon.vue";
+const props = defineProps({
+  as: { type: null, required: false, default: "span" },
+  variant: { type: null, required: false },
+  size: { type: null, required: false },
+  color: { type: null, required: false },
+  square: { type: Boolean, required: false },
+  label: { type: [String, Number], required: false },
+  ui: { type: null, required: false },
+  class: { type: [Object, String, Number, Boolean, null, Array], required: false, skipCheck: true },
+  icon: { type: [String, Object], required: false },
+  avatar: { type: Object, required: false },
+  leading: { type: Boolean, required: false },
+  leadingIcon: { type: [String, Object], required: false },
+  trailing: { type: Boolean, required: false },
+  trailingIcon: { type: [String, Object], required: false }
+});
+const slots = defineSlots();
+const { size, orientation } = useFieldGroup(props);
+const { isLeading, leadingIconName, isTrailing, trailingIconName } = useComponentIcons(props);
+const appConfig = useAppConfig();
+const ui = computed(() => {
+  const styler = cv(merge(theme, appConfig.ui.badge));
+  return styler({
+    ...props,
+    size: size.value,
+    fieldGroup: orientation.value,
+    square: props.square || !slots.default && !props.label
+  });
+});
 </script>
 
 <template>
-  <Primitive
-    :as="props.as"
-    :class="style.root({ class: [props.class, props.ui?.root] })"
-  >
-    <Slot v-bind="$attrs">
-      <slot></slot>
-    </Slot>
+  <Primitive :as="props.as" :class="ui.base({ class: [props.ui?.base, props.class] })" data-part="base">
+    <slot name="leading" :ui="ui">
+      <Icon
+        v-if="isLeading && leadingIconName"
+        :name="leadingIconName"
+        :class="ui.leadingIcon({ class: props.ui?.leadingIcon })"
+        data-part="leading-icon"
+      />
+      <Avatar
+        v-else-if="props.avatar"
+        :size="props.ui?.leadingAvatarSize || ui.leadingAvatarSize()"
+        v-bind="props.avatar"
+        :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })"
+        data-part="leading-avatar"
+      />
+    </slot>
+
+    <slot :ui="ui">
+      <span v-if="props.label" :class="ui.label({ class: props.ui?.label })" data-part="label">
+        {{ props.label }}
+      </span>
+    </slot>
 
-    <span v-if="show" :class="style.base({ class: props.ui?.base })">
-      <slot name="content">
-        {{ props.text }}
-      </slot>
-    </span>
+    <slot name="trailing" :ui="ui">
+      <Icon
+        v-if="isTrailing && trailingIconName"
+        :name="trailingIconName"
+        :class="ui.trailingIcon({ class: props.ui?.trailingIcon })"
+        data-part="trailing-icon"
+      />
+    </slot>
   </Primitive>
 </template>

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

@@ -0,0 +1,45 @@
+import type { VariantProps } from '@byyuurin/ui-kit';
+import type { PrimitiveProps } from 'reka-ui';
+import theme from '#build/ui/badge';
+import type { UseComponentIconsProps } from '../composables/useComponentIcons';
+import type { ComponentBaseProps, ComponentStyler, ComponentUIProps } from '../types';
+import type { StaticSlot } from '../types/utils';
+type ThemeVariants = VariantProps<typeof theme>;
+export interface BadgeProps extends ComponentBaseProps, Omit<UseComponentIconsProps, 'loading' | 'loadingIcon'> {
+    /**
+     * The element or component this component should render as.
+     * @default "div"
+     */
+    as?: PrimitiveProps['as'];
+    /** @default "solid" */
+    variant?: ThemeVariants['variant'];
+    /** @default "md" */
+    size?: ThemeVariants['size'];
+    /** @default "primary" */
+    color?: ThemeVariants['color'];
+    /** Render the badge with equal padding on all sides. */
+    square?: boolean;
+    label?: string | number;
+    ui?: ComponentUIProps<typeof theme>;
+}
+export interface BadgeSlots {
+    leading: StaticSlot<{
+        ui: ComponentStyler<typeof theme>;
+    }>;
+    default: StaticSlot<{
+        ui: ComponentStyler<typeof theme>;
+    }>;
+    trailing: StaticSlot<{
+        ui: ComponentStyler<typeof theme>;
+    }>;
+}
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<BadgeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BadgeProps> & Readonly<{}>, {
+    as: import("reka-ui").AsTag | import("vue").Component;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, BadgeSlots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Breadcrumb.vue

@@ -1,101 +1,81 @@
-<script lang="ts">
-import type { PrimitiveProps } from 'reka-ui'
-import type { breadcrumb } from '../theme'
-import type { ComponentAttrs, DynamicSlots, LinkProps } from '../types'
-
-export interface BreadcrumbItem extends Omit<LinkProps, 'raw' | 'custom'> {
-  label?: string
-  icon?: string
-  slot?: string
-  [key: string]: any
-}
-
-type SlotProps<T extends BreadcrumbItem> = (props: { item: T, index: number, active?: boolean }) => any
-
-export type BreadcrumbSlots<T extends BreadcrumbItem = BreadcrumbItem> = {
-  'item'?: SlotProps<T>
-  'item-leading'?: SlotProps<T>
-  'item-label'?: SlotProps<T>
-  'item-trailing'?: SlotProps<T>
-  'separator'?: any
-} & DynamicSlots<T, 'leading' | 'label' | 'trailing', SlotProps<T>>
-
-export interface BreadcrumbProps<T extends BreadcrumbItem = BreadcrumbItem> extends ComponentAttrs<typeof breadcrumb> {
-  /**
-   * The element or component this component should render as.
-   * @default "nav"
-   */
-  as?: PrimitiveProps['as']
-  items?: T[]
-  /**
-   * The icon to use as a separator.
-   * @default app.icons.chevronRight
-   */
-  separatorIcon?: string
-  /**
-   * The key used to get the label from the item.
-   * @default "label"
-   */
-  labelKey?: string
-}
+<script>
+import theme from "#build/ui/breadcrumb";
 </script>
 
-<script setup lang="ts" generic="T extends BreadcrumbItem">
-import { Primitive } from 'reka-ui'
-import { computed } from 'vue'
-import { useLocale } from '../composables/useLocale'
-import { useTheme } from '../composables/useTheme'
-import { get, pickLinkProps } from '../utils'
-import Link from './Link.vue'
-import LinkBase from './LinkBase.vue'
-
-const props = withDefaults(defineProps<BreadcrumbProps<T>>(), {
-  as: 'nav',
-  labelKey: 'label',
-})
-
-const slots = defineSlots<BreadcrumbSlots<T>>()
-
-const { dir } = useLocale()
-const { theme, generateStyle } = useTheme()
-
-const separatorIcon = computed(() => props.separatorIcon || (dir.value === 'rtl' ? theme.value.app.icons.chevronLeft : theme.value.app.icons.chevronRight))
-
-const style = computed(() => generateStyle('breadcrumb', props))
+<script setup>
+import { Primitive } from "reka-ui";
+import { computed } from "vue";
+import { useAppConfig } from "#imports";
+import { useLocale } from "../composables/useLocale";
+import { get, pickLinkProps } from "../utils";
+import { cv, merge } from "../utils/style";
+import Avatar from "./Avatar.vue";
+import Icon from "./Icon.vue";
+import Link from "./Link.vue";
+import LinkBase from "./LinkBase.vue";
+const props = defineProps({
+  as: { type: null, required: false, default: "nav" },
+  items: { type: Array, required: false },
+  separatorIcon: { type: String, required: false },
+  labelKey: { type: null, required: false, default: "label" },
+  ui: { type: null, required: false },
+  class: { type: [Object, String, Number, Boolean, null, Array], required: false, skipCheck: true }
+});
+const slots = defineSlots();
+const { dir } = useLocale();
+const appConfig = useAppConfig();
+const separatorIcon = computed(() => props.separatorIcon || (dir.value === "rtl" ? appConfig.ui.icons.chevronLeft : appConfig.ui.icons.chevronRight));
+const ui = computed(() => {
+  const styler = cv(merge(theme, appConfig.ui.breadcrumb));
+  return styler(props);
+});
 </script>
 
 <template>
-  <Primitive :as="props.as" aria-label="breadcrumb" :class="style.root({ class: [props.class, props.ui?.root] })">
-    <ol :class="style.list({ class: props.ui?.list })">
+  <Primitive :as="props.as" aria-label="breadcrumb" :class="ui.root({ class: [props.ui?.root, props.class] })" data-part="root">
+    <ol :class="ui.list({ class: props.ui?.list })" data-part="list">
       <template v-for="(item, index) in props.items" :key="index">
-        <li :class="style.item({ class: props.ui?.item })">
+        <li :class="ui.item({ class: [props.ui?.item, item.ui?.item] })" data-part="item">
           <Link v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
             <LinkBase
               v-bind="slotProps"
               as="span"
-              :aria-current="active && (index === items!.length - 1) ? 'page' : undefined"
-              :class="style.link({ class: props.ui?.link, active: index === items!.length - 1, disabled: item.disabled, to: !!item.to })"
+              :aria-current="(item.active ?? active) && index === items.length - 1 ? 'page' : void 0"
+              :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], active: item.active ?? index === items.length - 1, disabled: item.disabled, to: !!item.to })"
+              data-part="link"
             >
-              <slot :name="((item.slot || 'item') as keyof BreadcrumbSlots<T>)" :item="item" :index="index">
-                <slot :name="(`${item.slot || 'item'}-leading` as keyof BreadcrumbSlots<T>)" :item="item" :active="index === items!.length - 1" :index="index">
-                  <span v-if="item.icon" :class="style.linkLeadingIcon({ class: [item.icon, props.ui?.linkLeadingIcon] })"></span>
+              <slot :name="item.slot || 'item'" :item="item" :index="index" :active="item.active ?? index === items.length - 1" :ui="ui">
+                <slot :name="`${item.slot || 'item'}-leading`" :item="item" :active="item.active ?? index === items.length - 1" :index="index" :ui="ui">
+                  <Icon
+                    v-if="item.icon"
+                    :name="item.icon"
+                    :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, item.ui?.linkLeadingIcon], active: item.active ?? index === items.length - 1 })"
+                    data-part="link-leading-icon"
+                  />
+                  <Avatar
+                    v-else-if="item.avatar"
+                    :size="props.ui?.linkLeadingAvatarSize || ui.linkLeadingAvatarSize()"
+                    v-bind="item.avatar"
+                    :class="ui.linkLeadingAvatar({ class: [props.ui?.linkLeadingAvatar, item.ui?.linkLeadingAvatar], active: item.active ?? index === items.length - 1 })"
+                    data-part="link-leading-avatar"
+                  />
                 </slot>
 
-                <span v-if="get(item, props.labelKey) || slots[(`${item.slot || 'item'}-label` as keyof BreadcrumbSlots<T>)]" :class="style.linkLabel({ class: props.ui?.linkLabel })">
-                  <slot :name="(`${item.slot || 'item'}-label` as keyof BreadcrumbSlots<T>)" :item="item" :active="index === items!.length - 1" :index="index">
+                <span v-if="get(item, props.labelKey) || slots[`${item.slot || 'item'}-label`]" :class="ui.linkLabel({ class: [props.ui?.linkLabel, item.ui?.linkLabel] })" data-part="link-label">
+                  <slot :name="`${item.slot || 'item'}-label`" :item="item" :active="item.active ?? index === items.length - 1" :index="index">
                     {{ get(item, props.labelKey) }}
                   </slot>
                 </span>
 
-                <slot :name="(`${item.slot || 'item'}-trailing` as keyof BreadcrumbSlots<T>)" :item="item" :active="index === items!.length - 1" :index="index"></slot>
+                <slot :name="`${item.slot || 'item'}-trailing`" :item="item" :active="item.active ?? index === items.length - 1" :index="index"></slot>
               </slot>
             </LinkBase>
           </Link>
         </li>
 
-        <li v-if="index < items!.length - 1" role="presentation" aria-hidden="true" :class="style.separator({ class: props.ui?.separator })">
-          <slot name="separator">
-            <span :class="style.separatorIcon({ class: [separatorIcon, props.ui?.separatorIcon] })"></span>
+        <li v-if="index < items.length - 1" role="presentation" aria-hidden="true" :class="ui.separator({ class: [props.ui?.separator, item.ui?.separator] })" data-part="separator">
+          <slot name="separator" :ui="ui">
+            <Icon :name="separatorIcon" :class="ui.separatorIcon({ class: [props.ui?.separatorIcon, item.ui?.separatorIcon] })" data-part="separator-icon" />
           </slot>
         </li>
       </template>

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

@@ -0,0 +1,79 @@
+import type { PrimitiveProps } from 'reka-ui';
+import theme from '#build/ui/breadcrumb';
+import type { AvatarProps, ComponentBaseProps, ComponentStyler, ComponentUIProps, IconProps, LinkProps } from '../types';
+import type { DynamicSlots, GetItemKeys, StaticSlot } from '../types/utils';
+export interface BreadcrumbItem extends Omit<LinkProps, 'raw' | 'custom'> {
+    label?: string;
+    icon?: IconProps['name'];
+    avatar?: AvatarProps;
+    slot?: string;
+    ui?: Pick<ComponentUIProps<typeof theme>, 'item' | 'link' | 'linkLeadingIcon' | 'linkLeadingAvatar' | 'linkLabel' | 'separator' | 'separatorIcon'>;
+    [key: string]: any;
+}
+export interface BreadcrumbProps<T extends BreadcrumbItem = BreadcrumbItem> extends ComponentBaseProps {
+    /**
+     * The element or component this component should render as.
+     * @default "nav"
+     */
+    as?: PrimitiveProps['as'];
+    items?: T[];
+    /**
+     * The icon to use as a separator.
+     * @default app.icons.chevronRight
+     */
+    separatorIcon?: string;
+    /**
+     * The key used to get the label from the item.
+     * @default "label"
+     */
+    labelKey?: GetItemKeys<T>;
+    ui?: ComponentUIProps<typeof theme>;
+}
+export type BreadcrumbSlots<T extends BreadcrumbItem = BreadcrumbItem> = {
+    'item': StaticSlot<{
+        item: T;
+        index: number;
+        active: boolean;
+        ui: ComponentStyler<typeof theme>;
+    }>;
+    'item-leading': StaticSlot<{
+        item: T;
+        index: number;
+        active: boolean;
+        ui: ComponentStyler<typeof theme>;
+    }>;
+    'item-label': StaticSlot<{
+        item: T;
+        index: number;
+        active: boolean;
+    }>;
+    'item-trailing': StaticSlot<{
+        item: T;
+        index: number;
+        active: boolean;
+    }>;
+    'separator': StaticSlot<{
+        ui: ComponentStyler<typeof theme>;
+    }>;
+} & DynamicSlots<T, 'label' | 'trailing', {
+    index: number;
+    active: boolean;
+}> & DynamicSlots<T, 'leading', {
+    index: number;
+    active?: boolean;
+    ui: ComponentStyler<typeof theme>;
+}>;
+declare const __VLS_export: <T extends BreadcrumbItem>(__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<BreadcrumbProps<T>> & import("vue").PublicProps;
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: BreadcrumbSlots<T>;
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T as K]: T[K];
+} & {};