@byyuurin/ui 0.2.0 → 0.4.0

package/dist/runtime/components/Checkbox.vue

@@ -8,6 +8,7 @@ import { CheckboxIndicator, CheckboxRoot, Label, Primitive, useForwardProps } fr
 import { computed, useId } from "vue";
 import { useAppConfig } from "#imports";
 import { useFormField } from "../composables/useFormField";
+import { pick } from "../utils";
 import { cv, merge } from "../utils/style";
 import Icon from "./Icon.vue";
 defineOptions({ inheritAttrs: false });
@@ -35,14 +36,15 @@ const emit = defineEmits(["update:modelValue", "change"]);
 const slots = defineSlots();
 const modelValue = useVModel(props, "modelValue", emit);
 const rootProps = useForwardProps(reactivePick(props, "required", "value", "defaultValue"));
-const { id: _id, size, name, disabled, ariaAttrs, emitFormChange, emitFormInput } = useFormField(props);
+const { id: _id, name, size, color, disabled, ariaAttrs, emitFormChange, emitFormInput } = useFormField(props);
 const id = _id.value ?? useId();
 const appConfig = useAppConfig();
 const ui = computed(() => {
   const styler = cv(merge(theme, appConfig.ui.checkbox));
   return styler({
-    ...props,
+    ...pick(props, ["variant", "indicator", "required"]),
     size: size.value,
+    color: color.value,
     disabled: disabled.value
   });
 });

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

@@ -2,9 +2,10 @@ import type { VariantProps } from '@byyuurin/ui-kit';
 import type { CheckboxRootEmits, CheckboxRootProps, PrimitiveProps } from 'reka-ui';
 import theme from '#build/ui/checkbox';
 import type { ComponentBaseProps, ComponentUIProps, IconProps } from '../types';
+import type { ButtonHTMLAttributes } from '../types/html';
 import type { StaticSlot } from '../types/utils';
 type ThemeVariants = VariantProps<typeof theme>;
-export interface CheckboxProps extends ComponentBaseProps, Pick<CheckboxRootProps, 'disabled' | 'required' | 'name' | 'value' | 'id' | 'defaultValue'> {
+export interface CheckboxProps extends ComponentBaseProps, Pick<CheckboxRootProps, 'disabled' | 'required' | 'name' | 'value' | 'id' | 'defaultValue'>, /** @vue-ignore */ Omit<ButtonHTMLAttributes, 'type' | 'disabled' | 'value' | 'name'> {
     /**
      * The element or component this component should render as.
      * @default "div"
@@ -44,6 +45,8 @@ export interface CheckboxSlots {
         description?: string;
     }>;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<CheckboxProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (event: Event) => any;
     "update:modelValue": (value: boolean | "indeterminate") => any;
@@ -54,8 +57,6 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Checkb
     disabled: boolean;
     required: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, CheckboxSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/CheckboxGroup.vue

@@ -8,7 +8,7 @@ import { CheckboxGroupRoot, useForwardProps, useForwardPropsEmits } from "reka-u
 import { computed, useId } from "vue";
 import { useAppConfig } from "#imports";
 import { useFormField } from "../composables/useFormField";
-import { get, omit } from "../utils";
+import { get, omit, pick } from "../utils";
 import { cv, merge } from "../utils/style";
 import Checkbox from "./Checkbox.vue";
 const props = defineProps({
@@ -91,9 +91,10 @@ const appConfig = useAppConfig();
 const ui = computed(() => {
   const styler = cv(merge(theme, appConfig.ui.checkboxGroup));
   return styler({
-    ...props,
+    ...pick(props, ["required", "orientation", "variant"]),
     size: size.value,
-    color: color.value
+    color: color.value,
+    disabled: disabled.value
   });
 });
 </script>

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

@@ -70,11 +70,15 @@ export interface CheckboxGroupSlots<T extends CheckboxGroupItem[] = CheckboxGrou
         };
     }>;
 }
-declare const __VLS_export: <T extends CheckboxGroupItem[], VK extends GetItemKeys<T> = "value">(__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<CheckboxGroupProps<T, VK> & {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends CheckboxGroupItem[], VK extends GetItemKeys<T> = "value">(__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<CheckboxGroupProps<T, VK> & {
         onChange?: ((event: Event) => any) | undefined;
         "onUpdate:modelValue"?: ((value: T[number][]) => any) | undefined;
-    }> & import("vue").PublicProps;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: CheckboxGroupSlots<CheckboxGroupItem[]>;
@@ -82,8 +86,8 @@ declare const __VLS_export: <T extends CheckboxGroupItem[], VK extends GetItemKe
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

package/dist/runtime/components/Chip.vue

@@ -8,6 +8,7 @@ import { Primitive, Slot } from "reka-ui";
 import { computed } from "vue";
 import { useAppConfig } from "#imports";
 import { useAvatarGroup } from "../composables/useAvatarGroup";
+import { pick } from "../utils";
 import { cv, merge } from "../utils/style";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
@@ -29,7 +30,10 @@ const { size } = useAvatarGroup(props);
 const appConfig = useAppConfig();
 const ui = computed(() => {
   const styler = cv(merge(theme, appConfig.ui.chip));
-  return styler({ ...props, size: size.value });
+  return styler({
+    ...pick(props, ["color", "position", "inset", "standalone"]),
+    size: size.value
+  });
 });
 </script>
 

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

@@ -32,6 +32,8 @@ export interface ChipSlots {
     default: StaticSlot;
     content: StaticSlot;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChipProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:show": (show: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<ChipProps> & Readonly<{
@@ -39,8 +41,6 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChipPr
 }>, {
     show: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ChipSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/Collapsible.vue

@@ -7,6 +7,7 @@ import { reactivePick } from "@vueuse/core";
 import { CollapsibleContent, CollapsibleRoot, CollapsibleTrigger, useForwardPropsEmits } from "reka-ui";
 import { computed } from "vue";
 import { useAppConfig } from "#imports";
+import { pick } from "../utils";
 import { cv, merge } from "../utils/style";
 const props = defineProps({
   as: { type: null, required: false },
@@ -23,7 +24,7 @@ const rootProps = useForwardPropsEmits(reactivePick(props, "as", "defaultOpen",
 const appConfig = useAppConfig();
 const ui = computed(() => {
   const styler = cv(merge(theme, appConfig.ui.collapsible));
-  return styler(props);
+  return styler(pick(props, []));
 });
 </script>
 

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

@@ -18,6 +18,8 @@ export interface CollapsibleSlots {
     }>;
     content: StaticSlot;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<CollapsibleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<CollapsibleProps> & Readonly<{
@@ -25,8 +27,6 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Collap
 }>, {
     unmountOnHide: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, CollapsibleSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/Drawer.vue

@@ -9,6 +9,7 @@ import { computed, toRef } from "vue";
 import { useAppConfig } from "#imports";
 import { useLocale } from "../composables/useLocale";
 import { usePortal } from "../composables/usePortal";
+import { pick } from "../utils";
 import { cv, merge } from "../utils/style";
 import Button from "./Button.vue";
 const props = defineProps({
@@ -53,7 +54,7 @@ const { t } = useLocale();
 const appConfig = useAppConfig();
 const ui = computed(() => {
   const styler = cv(merge(theme, appConfig.ui.drawer));
-  return styler(props);
+  return styler(pick(props, ["transition", "direction", "inset"]));
 });
 </script>
 

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

@@ -1,7 +1,7 @@
 import type { VariantProps } from '@byyuurin/ui-kit';
 import type { DialogContentEmits, DialogContentProps, DialogRootEmits, DialogRootProps } from 'reka-ui';
 import theme from '#build/ui/drawer';
-import type { ButtonProps, ComponentBaseProps, ComponentStyler, ComponentUIProps, IconProps } from '../types';
+import type { ButtonProps, ComponentBaseProps, ComponentStyler, ComponentUIProps, IconProps, LinkPropsKeys } from '../types';
 import type { EmitsToProps, StaticSlot } from '../types/utils';
 type ThemeVariants = VariantProps<typeof theme>;
 export interface DrawerProps extends ComponentBaseProps, DialogRootProps {
@@ -37,7 +37,7 @@ export interface DrawerProps extends ComponentBaseProps, DialogRootProps {
      * Display a close button to dismiss the drawer.
      * @default true
      */
-    close?: boolean | Partial<ButtonProps>;
+    close?: boolean | Omit<ButtonProps, LinkPropsKeys>;
     /** @default app.icons.close */
     closeIcon?: IconProps['name'];
     /**
@@ -75,6 +75,8 @@ export interface DrawerSlots {
         close: () => void;
     }>;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DrawerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (value: boolean) => any;
     "after-leave": () => any;
@@ -86,16 +88,14 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Drawer
     "onAfter-enter"?: (() => any) | undefined;
     "onClose-prevent"?: (() => any) | undefined;
 }>, {
-    overlay: boolean;
-    close: boolean | Partial<ButtonProps>;
+    close: boolean | Omit<ButtonProps, LinkPropsKeys>;
     transition: boolean;
+    overlay: boolean;
     direction: "top" | "right" | "bottom" | "left";
     modal: boolean;
     portal: boolean | string | HTMLElement;
     dismissible: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DrawerSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/DropdownMenu.vue

@@ -7,7 +7,7 @@ import { reactivePick } from "@vueuse/core";
 import { DropdownMenuArrow, DropdownMenuRoot, DropdownMenuTrigger, useForwardPropsEmits } from "reka-ui";
 import { computed, toRef } from "vue";
 import { useAppConfig } from "#imports";
-import { omit } from "../utils";
+import { omit, pick } from "../utils";
 import { cv, merge } from "../utils/style";
 import DropdownMenuContent from "./DropdownMenuContent.vue";
 const props = defineProps({
@@ -26,7 +26,7 @@ const props = defineProps({
   class: { type: [Object, String, Number, Boolean, null, Array], required: false, skipCheck: true },
   defaultOpen: { type: Boolean, required: false },
   open: { type: Boolean, required: false },
-  modal: { type: Boolean, required: false, default: true }
+  modal: { type: Boolean, required: false, default: false }
 });
 const emit = defineEmits(["update:open"]);
 const slots = defineSlots();
@@ -37,7 +37,7 @@ const getProxySlots = () => omit(slots, ["default"]);
 const appConfig = useAppConfig();
 const ui = computed(() => {
   const styler = cv(merge(theme, appConfig.ui.dropdownMenu));
-  return styler(props);
+  return styler(pick(props, ["size"]));
 });
 </script>
 

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

@@ -112,8 +112,12 @@ export type DropdownMenuSlots<A extends ArrayOrNested<DropdownMenuItem> = ArrayO
         index: number;
         ui: ComponentStyler<typeof theme>;
     }>;
-    'content-top': StaticSlot;
-    'content-bottom': StaticSlot;
+    'content-top': StaticSlot<{
+        sub: boolean;
+    }>;
+    'content-bottom': StaticSlot<{
+        sub: boolean;
+    }>;
 } & DynamicSlots<MergeTypes<T>, 'label' | 'description', {
     active?: boolean;
     index: number;
@@ -122,10 +126,14 @@ export type DropdownMenuSlots<A extends ArrayOrNested<DropdownMenuItem> = ArrayO
     index: number;
     ui: ComponentStyler<typeof theme>;
 }>;
-declare const __VLS_export: <T extends ArrayOrNested<DropdownMenuItem>>(__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<DropdownMenuProps<T> & {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends ArrayOrNested<DropdownMenuItem>>(__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<DropdownMenuProps<T> & {
         "onUpdate:open"?: ((payload: boolean) => any) | undefined;
-    }> & import("vue").PublicProps;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: DropdownMenuSlots<T, NestedItem<T>>;
@@ -133,8 +141,8 @@ declare const __VLS_export: <T extends ArrayOrNested<DropdownMenuItem>>(__VLS_pr
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

package/dist/runtime/components/DropdownMenuContent.vue

@@ -141,7 +141,7 @@ const groups = computed(
 
   <DropdownMenu.Portal v-bind="portalProps">
     <component :is="props.sub ? DropdownMenu.SubContent : DropdownMenu.Content" v-bind="{ ...contentProps, ...$attrs }" :class="props.class">
-      <slot name="content-top"></slot>
+      <slot name="content-top" :sub="props.sub ?? false"></slot>
 
       <div role="presentation" :class="props.ui.viewport({ class: props.uiOverride?.viewport })" data-part="viewport">
         <DropdownMenu.Group v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="props.ui.group({ class: props.uiOverride?.group })" data-part="group">
@@ -197,26 +197,25 @@ const groups = computed(
             >
               <ReuseItemTemplate :item="item" :index="index" />
             </DropdownMenu.CheckboxItem>
-            <DropdownMenu.Item
-              v-else
-              as-child
-              :disabled="item.disabled"
-              :text-value="get(item, props.labelKey)"
-              @select="item.onSelect"
-            >
-              <Link v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
+            <Link v-else v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
+              <DropdownMenu.Item
+                as-child
+                :disabled="item.disabled"
+                :text-value="get(item, props.labelKey)"
+                @select="item.onSelect"
+              >
                 <LinkBase v-bind="slotProps" :class="props.ui.item({ class: [props.uiOverride?.item, item.ui?.item, item.class], color: item.color, active })" data-part="item">
                   <ReuseItemTemplate :item="item" :active="active" :index="index" />
                 </LinkBase>
-              </Link>
-            </DropdownMenu.Item>
+              </DropdownMenu.Item>
+            </Link>
           </template>
         </DropdownMenu.Group>
       </div>
 
       <slot></slot>
 
-      <slot name="content-bottom"></slot>
+      <slot name="content-bottom" :sub="props.sub ?? false"></slot>
     </component>
   </DropdownMenu.Portal>
 </template>

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

@@ -29,14 +29,18 @@ export type DropdownMenuContentSlots<A extends ArrayOrNested<DropdownMenuItem> =
     index: number;
     ui: ComponentStyler<typeof theme>;
 }>;
-declare const __VLS_export: <T extends ArrayOrNested<DropdownMenuItem>>(__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<DropdownMenuContentProps<T> & {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends ArrayOrNested<DropdownMenuItem>>(__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<DropdownMenuContentProps<T> & {
         onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
         onPointerDownOutside?: ((event: import("reka-ui").PointerDownOutsideEvent) => any) | undefined;
         onFocusOutside?: ((event: import("reka-ui").FocusOutsideEvent) => any) | undefined;
         onInteractOutside?: ((event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any) | undefined;
         onCloseAutoFocus?: ((event: Event) => any) | undefined;
-    }> & import("vue").PublicProps;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: DropdownMenuContentSlots<T, NestedItem<T>>;
@@ -44,8 +48,8 @@ declare const __VLS_export: <T extends ArrayOrNested<DropdownMenuItem>>(__VLS_pr
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

package/dist/runtime/components/FieldGroup.vue

@@ -7,6 +7,7 @@ import { Primitive } from "reka-ui";
 import { computed } from "vue";
 import { useAppConfig } from "#imports";
 import { provideFieldGroup } from "../composables/useFieldGroup";
+import { pick } from "../utils";
 import { cv, merge } from "../utils/style";
 const props = defineProps({
   as: { type: null, required: false },
@@ -18,7 +19,7 @@ defineSlots();
 const appConfig = useAppConfig();
 const ui = computed(() => {
   const styler = cv(merge(theme, appConfig.ui.fieldGroup));
-  return styler(props);
+  return styler(pick(props, ["orientation", "size"]));
 });
 provideFieldGroup(computed(() => ({
   orientation: props.orientation,

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

@@ -21,11 +21,11 @@ export interface FieldGroupProps extends ComponentBaseProps {
 export interface FieldGroupSlots {
     default: StaticSlot;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FieldGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FieldGroupProps> & Readonly<{}>, {
     orientation: "horizontal" | "vertical";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, FieldGroupSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;