@alikhalilll/ui 1.2.2 → 1.2.4

package/dist/entries/drawer/components/ADrawer.vue.d.ts

@@ -23,9 +23,5 @@ declare const __VLS_base: import("vue").DefineComponent<DrawerRootProps, {}, {},
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};
+type __VLS_WithSlots<T, S> = T & (new () => (T extends new (...args: any) => infer R ? R : {}) & { $slots: S });
 //# sourceMappingURL=ADrawer.vue.d.ts.map

package/dist/entries/drawer/components/ADrawerContent.vue.d.ts

@@ -25,9 +25,5 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};
+type __VLS_WithSlots<T, S> = T & (new () => (T extends new (...args: any) => infer R ? R : {}) & { $slots: S });
 //# sourceMappingURL=ADrawerContent.vue.d.ts.map

package/dist/entries/drawer/components/ADrawerTrigger.vue.d.ts

@@ -7,9 +7,5 @@ declare const __VLS_base: import("vue").DefineComponent<DrawerTriggerProps, {},
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};
+type __VLS_WithSlots<T, S> = T & (new () => (T extends new (...args: any) => infer R ? R : {}) & { $slots: S });
 //# sourceMappingURL=ADrawerTrigger.vue.d.ts.map

package/dist/entries/input/components/AInput.vue.d.ts

@@ -28,9 +28,5 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};
+type __VLS_WithSlots<T, S> = T & (new () => (T extends new (...args: any) => infer R ? R : {}) & { $slots: S });
 //# sourceMappingURL=AInput.vue.d.ts.map

package/dist/entries/popover/components/APopover.vue.d.ts

@@ -16,9 +16,5 @@ declare const __VLS_base: import("vue").DefineComponent<PopoverRootProps, {}, {}
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};
+type __VLS_WithSlots<T, S> = T & (new () => (T extends new (...args: any) => infer R ? R : {}) & { $slots: S });
 //# sourceMappingURL=APopover.vue.d.ts.map

package/dist/entries/popover/components/APopoverContent.vue.d.ts

@@ -40,9 +40,5 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};
+type __VLS_WithSlots<T, S> = T & (new () => (T extends new (...args: any) => infer R ? R : {}) & { $slots: S });
 //# sourceMappingURL=APopoverContent.vue.d.ts.map

package/dist/entries/popover/components/APopoverTrigger.vue.d.ts

@@ -7,9 +7,5 @@ declare const __VLS_base: import("vue").DefineComponent<PopoverTriggerProps, {},
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};
+type __VLS_WithSlots<T, S> = T & (new () => (T extends new (...args: any) => infer R ? R : {}) & { $slots: S });
 //# sourceMappingURL=APopoverTrigger.vue.d.ts.map

package/dist/entries/responsive-popover/components/AResponsivePopover.vue.d.ts

@@ -42,9 +42,5 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};
+type __VLS_WithSlots<T, S> = T & (new () => (T extends new (...args: any) => infer R ? R : {}) & { $slots: S });
 //# sourceMappingURL=AResponsivePopover.vue.d.ts.map

package/dist/entries/responsive-popover/components/AResponsivePopoverContent.vue.d.ts

@@ -31,9 +31,5 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};
+type __VLS_WithSlots<T, S> = T & (new () => (T extends new (...args: any) => infer R ? R : {}) & { $slots: S });
 //# sourceMappingURL=AResponsivePopoverContent.vue.d.ts.map

package/dist/entries/responsive-popover/components/AResponsivePopoverTrigger.vue.d.ts

@@ -12,9 +12,5 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};
+type __VLS_WithSlots<T, S> = T & (new () => (T extends new (...args: any) => infer R ? R : {}) & { $slots: S });
 //# sourceMappingURL=AResponsivePopoverTrigger.vue.d.ts.map

package/dist/entries/tell-input/components/ACountryFlag.vue.d.ts

@@ -22,9 +22,5 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};
+type __VLS_WithSlots<T, S> = T & (new () => (T extends new (...args: any) => infer R ? R : {}) & { $slots: S });
 //# sourceMappingURL=ACountryFlag.vue.d.ts.map

package/dist/entries/tell-input/components/ACountrySelect.vue.d.ts

@@ -132,9 +132,5 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};
+type __VLS_WithSlots<T, S> = T & (new () => (T extends new (...args: any) => infer R ? R : {}) & { $slots: S });
 //# sourceMappingURL=ACountrySelect.vue.d.ts.map

package/dist/entries/tell-input/components/ATellInput.vue.d.ts

@@ -137,9 +137,5 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};
+type __VLS_WithSlots<T, S> = T & (new () => (T extends new (...args: any) => infer R ? R : {}) & { $slots: S });
 //# sourceMappingURL=ATellInput.vue.d.ts.map

package/entries/drawer/components/ADrawer.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { DrawerRoot, type DrawerRootEmits, type DrawerRootProps } from 'vaul-vue';
+import { useForwardPropsEmits } from 'reka-ui';
+
+const props = withDefaults(defineProps<DrawerRootProps>(), {
+  shouldScaleBackground: true,
+});
+const emits = defineEmits<DrawerRootEmits>();
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <DrawerRoot data-slot="drawer" v-bind="forwarded">
+    <slot />
+  </DrawerRoot>
+</template>

package/entries/drawer/components/ADrawerContent.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { DrawerContent, DrawerPortal } from 'vaul-vue';
+import type { DialogContentEmits, DialogContentProps } from 'reka-ui';
+import { reactiveOmit } from '@vueuse/core';
+import { useForwardPropsEmits } from 'reka-ui';
+import { cn } from '@/utils';
+import ADrawerOverlay from './ADrawerOverlay.vue';
+
+defineOptions({ inheritAttrs: false });
+
+const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>();
+const emits = defineEmits<DialogContentEmits>();
+const delegated = reactiveOmit(props, 'class');
+const forwarded = useForwardPropsEmits(delegated, emits);
+</script>
+
+<template>
+  <DrawerPortal>
+    <ADrawerOverlay />
+    <DrawerContent
+      data-slot="drawer-content"
+      v-bind="{ ...$attrs, ...forwarded }"
+      :class="
+        cn(
+          'bg-background fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] shadow-2xl shadow-black/30 outline-none',
+          props.class
+        )
+      "
+    >
+      <div class="bg-muted mx-auto mt-4 h-2 w-[100px] rounded-full" />
+      <slot />
+    </DrawerContent>
+  </DrawerPortal>
+</template>

package/entries/drawer/components/ADrawerOverlay.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { DrawerOverlay } from 'vaul-vue';
+import type { DialogOverlayProps } from 'reka-ui';
+import { reactiveOmit } from '@vueuse/core';
+import { useForwardProps } from 'reka-ui';
+import { cn } from '@/utils';
+
+const props = defineProps<DialogOverlayProps & { class?: HTMLAttributes['class'] }>();
+const delegated = reactiveOmit(props, 'class');
+const forwarded = useForwardProps(delegated);
+</script>
+
+<template>
+  <DrawerOverlay
+    data-slot="drawer-overlay"
+    v-bind="forwarded"
+    :class="
+      cn(
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-40 bg-black/70',
+        props.class
+      )
+    "
+  />
+</template>

package/entries/drawer/components/ADrawerTrigger.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { DrawerTrigger, type DrawerTriggerProps } from 'vaul-vue';
+import { useForwardProps } from 'reka-ui';
+
+const props = defineProps<DrawerTriggerProps>();
+const forwarded = useForwardProps(props);
+</script>
+
+<template>
+  <DrawerTrigger data-slot="drawer-trigger" v-bind="forwarded">
+    <slot />
+  </DrawerTrigger>
+</template>

package/entries/drawer/index.ts

@@ -0,0 +1,4 @@
+export { default as ADrawer } from './components/ADrawer.vue';
+export { default as ADrawerTrigger } from './components/ADrawerTrigger.vue';
+export { default as ADrawerContent } from './components/ADrawerContent.vue';
+export { default as ADrawerOverlay } from './components/ADrawerOverlay.vue';

package/entries/input/components/AInput.vue

@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { computed, useSlots } from 'vue';
+import { useVModel } from '@vueuse/core';
+import { cn } from '@/utils';
+import { controlHeight, controlPaddingX, controlTextSize, DEFAULT_SIZE, type Size } from '@/utils';
+
+const props = withDefaults(
+  defineProps<{
+    defaultValue?: string | number;
+    modelValue?: string | number;
+    class?: HTMLAttributes['class'];
+    /** Classes for the inner &lt;input&gt; element (useful when prefix/suffix are present). */
+    inputClass?: HTMLAttributes['class'];
+    /** Classes for the prefix wrapper. */
+    prefixClass?: HTMLAttributes['class'];
+    /** Classes for the suffix wrapper. */
+    suffixClass?: HTMLAttributes['class'];
+    size?: Size;
+  }>(),
+  { size: DEFAULT_SIZE }
+);
+
+const emits = defineEmits<{
+  (e: 'update:modelValue', payload: string | number): void;
+}>();
+
+defineSlots<{
+  /** Content rendered inside the input's border, left of the field. */
+  prefix?: () => unknown;
+  /** Content rendered inside the input's border, right of the field. */
+  suffix?: () => unknown;
+}>();
+
+const slots = useSlots();
+const hasPrefix = computed(() => !!slots.prefix);
+const hasSuffix = computed(() => !!slots.suffix);
+const hasAdornment = computed(() => hasPrefix.value || hasSuffix.value);
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+  passive: true,
+  defaultValue: props.defaultValue,
+});
+
+const sizeHeight = computed(() => controlHeight[props.size]);
+const sizePaddingX = computed(() => controlPaddingX[props.size]);
+const sizeText = computed(() => controlTextSize[props.size]);
+</script>
+
+<template>
+  <!--
+    When prefix or suffix slots are filled we render a wrapper that owns the border,
+    background and focus ring — so the visible "input" is the whole bar, not just the
+    native element. Otherwise we render the plain native input directly so consumers
+    can use AInput as a drop-in for <input>.
+  -->
+  <div
+    v-if="hasAdornment"
+    :data-size="props.size"
+    :class="
+      cn(
+        'border-input bg-background ring-offset-background focus-within:ring-ring inline-flex w-full items-center rounded-md border shadow-sm transition-colors focus-within:ring-1',
+        sizeHeight,
+        sizePaddingX,
+        sizeText,
+        props.class
+      )
+    "
+  >
+    <span
+      v-if="hasPrefix"
+      :class="cn('text-muted-foreground flex shrink-0 items-center pr-2', props.prefixClass)"
+    >
+      <slot name="prefix" />
+    </span>
+
+    <input
+      v-model="modelValue"
+      data-slot="input"
+      :class="
+        cn(
+          'placeholder:text-muted-foreground h-full min-w-0 flex-1 bg-transparent outline-none disabled:cursor-not-allowed disabled:opacity-50',
+          props.inputClass
+        )
+      "
+    />
+
+    <span
+      v-if="hasSuffix"
+      :class="cn('text-muted-foreground flex shrink-0 items-center pl-2', props.suffixClass)"
+    >
+      <slot name="suffix" />
+    </span>
+  </div>
+
+  <input
+    v-else
+    v-model="modelValue"
+    data-slot="input"
+    :data-size="props.size"
+    :class="
+      cn(
+        'border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex w-full rounded-md border py-1 shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-1 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
+        sizeHeight,
+        sizePaddingX,
+        sizeText,
+        props.class
+      )
+    "
+  />
+</template>

package/entries/input/index.ts

@@ -0,0 +1 @@
+export { default as AInput } from './components/AInput.vue';

package/entries/popover/components/APopover.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { PopoverRootEmits, PopoverRootProps } from 'reka-ui';
+import { PopoverRoot, useForwardPropsEmits } from 'reka-ui';
+
+/**
+ * Defaults `modal` to `true` so the popover locks page scroll, traps focus, and an overlay
+ * (rendered by APopoverContent when `overlay` is set) actually dims the page.
+ * Pass `:modal="false"` for tooltip-style non-modal popovers.
+ */
+const props = withDefaults(defineProps<PopoverRootProps>(), { modal: true });
+const emits = defineEmits<PopoverRootEmits>();
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <PopoverRoot v-slot="slotProps" data-slot="popover" v-bind="forwarded">
+    <slot v-bind="slotProps" />
+  </PopoverRoot>
+</template>

package/entries/popover/components/APopoverContent.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import {
+  PopoverContent,
+  type PopoverContentEmits,
+  type PopoverContentProps,
+  PopoverPortal,
+  useForwardPropsEmits,
+} from 'reka-ui';
+import { cn } from '@/utils';
+import APopoverOverlay from './APopoverOverlay.vue';
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(
+  defineProps<
+    PopoverContentProps & {
+      class?: HTMLAttributes['class'];
+      /** Dim the entire viewport behind the popover and block all interaction with the
+       *  page (clicks are captured by the overlay). Pair with `<APopover :modal="true">`
+       *  (the default) for the full modal behaviour. */
+      overlay?: boolean;
+      overlayClass?: HTMLAttributes['class'];
+      /**
+       * When true, the overlay also locks page scroll via `body { overflow: hidden }`.
+       * Off by default — `AResponsivePopover` opts in to this when `scrollLock="body"`.
+       */
+      overlayLockScroll?: boolean;
+    }
+  >(),
+  { align: 'center', sideOffset: 4, overlay: false, overlayLockScroll: false }
+);
+const emits = defineEmits<PopoverContentEmits>();
+const delegated = reactiveOmit(props, 'class', 'overlay', 'overlayClass', 'overlayLockScroll');
+const forwarded = useForwardPropsEmits(delegated, emits);
+</script>
+
+<template>
+  <PopoverPortal>
+    <!--
+      Overlay is a sibling of PopoverContent inside the same portal. Reka-ui's
+      DismissableLayer treats any pointer-down outside the content as a dismiss,
+      so clicking the overlay closes the popover for free. The overlay component
+      locks body scroll on mount and restores it on unmount.
+    -->
+    <APopoverOverlay
+      v-if="props.overlay"
+      :class="props.overlayClass"
+      :lock-scroll="props.overlayLockScroll"
+    />
+    <PopoverContent
+      data-slot="popover-content"
+      v-bind="{ ...$attrs, ...forwarded }"
+      :class="
+        cn(
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-[60] w-72 rounded-md border border-border/70 p-4 shadow-xl shadow-black/15 outline-none',
+          props.class
+        )
+      "
+    >
+      <slot />
+    </PopoverContent>
+  </PopoverPortal>
+</template>

package/entries/popover/components/APopoverOverlay.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { onBeforeUnmount, onMounted } from 'vue';
+import { cn } from '@/utils';
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(
+  defineProps<{
+    class?: HTMLAttributes['class'];
+    /**
+     * When true, set `body { overflow: hidden; touchAction: none }` for the lifetime of
+     * the overlay. Off by default because it breaks `position: sticky` on the host page.
+     * Prefer the event-based lock (see `AResponsivePopover`'s `scrollLock` prop) which
+     * keeps the page scrollbar in place.
+     */
+    lockScroll?: boolean;
+  }>(),
+  { lockScroll: false }
+);
+
+let prevBodyOverflow = '';
+let prevBodyTouchAction = '';
+let prevPaddingRight = '';
+
+function getScrollbarWidth() {
+  if (typeof window === 'undefined') return 0;
+  return window.innerWidth - document.documentElement.clientWidth;
+}
+
+onMounted(() => {
+  if (!props.lockScroll) return;
+  if (typeof document === 'undefined') return;
+  const body = document.body;
+  const sbw = getScrollbarWidth();
+  prevBodyOverflow = body.style.overflow;
+  prevBodyTouchAction = body.style.touchAction;
+  prevPaddingRight = body.style.paddingRight;
+  body.style.overflow = 'hidden';
+  body.style.touchAction = 'none';
+  // Compensate for the missing scrollbar so the layout doesn't jump.
+  if (sbw > 0) body.style.paddingRight = `${sbw}px`;
+});
+
+onBeforeUnmount(() => {
+  if (!props.lockScroll) return;
+  if (typeof document === 'undefined') return;
+  const body = document.body;
+  body.style.overflow = prevBodyOverflow;
+  body.style.touchAction = prevBodyTouchAction;
+  body.style.paddingRight = prevPaddingRight;
+});
+</script>
+
+<template>
+  <div
+    data-slot="popover-overlay"
+    aria-hidden="true"
+    :class="
+      cn(
+        // `fixed inset-0` covers the entire viewport; `pointer-events-auto` captures every
+        // click so it can never reach the page underneath. `z-50` keeps us above any normal
+        // page chrome; the popover content sits at `z-[60]`.
+        'fixed inset-0 z-50 bg-black/70 pointer-events-auto data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+        props.class
+      )
+    "
+  />
+</template>

package/entries/popover/components/APopoverTrigger.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { PopoverTriggerProps } from 'reka-ui';
+import { PopoverTrigger, useForwardProps } from 'reka-ui';
+
+const props = defineProps<PopoverTriggerProps>();
+const forwarded = useForwardProps(props);
+</script>
+
+<template>
+  <PopoverTrigger data-slot="popover-trigger" v-bind="forwarded">
+    <slot />
+  </PopoverTrigger>
+</template>