paket-ui 0.0.1

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

@@ -0,0 +1,6 @@
+import type { HTMLAttributes } from 'vue';
+type __VLS_Props = {
+    class?: HTMLAttributes['class'];
+};
+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/loading/LoadingCircular.vue

@@ -0,0 +1,46 @@
+<script setup>
+import { ProgressIndicator, ProgressRoot } from "reka-ui";
+const props = defineProps({
+  class: { type: null, required: false, default: void 0 },
+  value: { type: Number, required: false, default: 0 }
+});
+const RADIUS = 45;
+const circumference = 2 * Math.PI * RADIUS;
+const dashOffset = computed(() => props.value / 100 * circumference);
+const trackPath = computed(() => {
+  const r = RADIUS;
+  return `
+          M 50 50
+          m 0 -${r}
+          a ${r} ${r} 0 1 1 0 ${r * 2}
+          a ${r} ${r} 0 1 1 0 -${r * 2}
+          `;
+});
+</script>
+
+<template>
+  <div :class="cn('relative w-[52px] h-[52px]', props.class)">
+    <ProgressRoot :model-value="props.value" as-child>
+      <svg class="w-full h-full" viewBox="0 0 100 100">
+        <path
+          :d="trackPath"
+          class="fill-none stroke-outline-variant stroke-[12px]"
+        />
+        <ProgressIndicator as-child>
+          <path
+            :d="trackPath"
+            class="fill-none stroke-flux-primary stroke-[12px] transition-[stroke-dasharray,opacity] duration-700 data-[value='0']:opacity-0"
+            :style="{
+  'stroke-linecap': 'round',
+  'stroke-dasharray': `${dashOffset}px, ${circumference}px`,
+  'stroke-dashoffset': '0px'
+}"
+          />
+        </ProgressIndicator>
+      </svg>
+      <div class="absolute inset-0 flex items-center justify-center">
+        <span class="text-xs font-bold">{{ props.value }}%</span>
+      </div>
+    </ProgressRoot>
+  </div>
+</template>

package/dist/runtime/components/loading/LoadingCircular.vue.d.ts

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

package/dist/runtime/components/loading/LoadingIndicator.d.ts

@@ -0,0 +1,60 @@
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    throttle: {
+        type: NumberConstructor;
+        default: number;
+    };
+    duration: {
+        type: NumberConstructor;
+        default: number;
+    };
+    height: {
+        type: NumberConstructor;
+        default: number;
+    };
+    color: {
+        type: (StringConstructor | BooleanConstructor)[];
+        default: string;
+    };
+    errorColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    estimatedProgress: {
+        type: () => (duration: number, elapsed: number) => number;
+        required: false;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    throttle: {
+        type: NumberConstructor;
+        default: number;
+    };
+    duration: {
+        type: NumberConstructor;
+        default: number;
+    };
+    height: {
+        type: NumberConstructor;
+        default: number;
+    };
+    color: {
+        type: (StringConstructor | BooleanConstructor)[];
+        default: string;
+    };
+    errorColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    estimatedProgress: {
+        type: () => (duration: number, elapsed: number) => number;
+        required: false;
+    };
+}>> & Readonly<{}>, {
+    throttle: number;
+    duration: number;
+    height: number;
+    color: string | boolean;
+    errorColor: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/runtime/components/loading/LoadingIndicator.js

@@ -0,0 +1,66 @@
+import { defineComponent, h } from "vue";
+import { useLoadingIndicator } from "#app/composables/loading-indicator";
+export default defineComponent({
+  name: "UiLoadingIndicator",
+  props: {
+    throttle: {
+      type: Number,
+      default: 200
+    },
+    duration: {
+      type: Number,
+      default: 2e3
+    },
+    height: {
+      type: Number,
+      default: 3
+    },
+    color: {
+      type: [String, Boolean],
+      default: "bg-gradient-to-r from-primaryContainer to-flux-primary"
+    },
+    errorColor: {
+      type: String,
+      default: "bg-gradient-to-r from-errorContainer to-flux-error"
+    },
+    estimatedProgress: {
+      type: Function,
+      required: false
+    }
+  },
+  setup(props, { slots, expose }) {
+    const { progress, isLoading, error, start, finish, clear } = useLoadingIndicator({
+      duration: props.duration,
+      throttle: props.throttle,
+      estimatedProgress: props.estimatedProgress
+    });
+    expose({
+      progress,
+      isLoading,
+      error,
+      start,
+      finish,
+      clear
+    });
+    return () => h("div", {
+      class: [
+        "absolute bottom-0 left-0 right-0",
+        error.value ? props.errorColor : props.color,
+        {
+          "opacity-100": isLoading.value,
+          "opacity-0": !isLoading.value
+        }
+      ],
+      style: {
+        pointerEvents: "none",
+        width: "auto",
+        height: `${props.height}px`,
+        backgroundSize: `${100 / progress.value * 100}% auto`,
+        transform: `scaleX(${progress.value}%)`,
+        transformOrigin: "left",
+        transition: "transform 0.1s, height 0.4s, opacity 0.4s",
+        zIndex: 999999
+      }
+    }, slots);
+  }
+});

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

@@ -0,0 +1,11 @@
+<script setup>
+const props = defineProps({
+  class: { type: null, required: false }
+});
+</script>
+
+<template>
+  <div :class="['w-full flex justify-center items-center', props.class]">
+    <div class="w-10 h-10 animate-spin rounded-full border-4 border-surfaceContainerHigh border-t-transparent"></div>
+  </div>
+</template>

package/dist/runtime/components/loading/SpinnerLoading.vue.d.ts

@@ -0,0 +1,6 @@
+import type { HTMLAttributes } from 'vue';
+type __VLS_Props = {
+    class?: HTMLAttributes['class'];
+};
+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/player/Audio.vue

@@ -0,0 +1,104 @@
+<script setup>
+import { useMediaControls } from "@vueuse/core";
+const audioRef = useTemplateRef("audioRef");
+const { playing, currentTime, muted, duration } = useMediaControls(audioRef);
+const props = defineProps({
+  src: { type: String, required: false },
+  autoplay: { type: Boolean, required: false },
+  loop: { type: Boolean, required: false }
+});
+const convertToMinutesSeconds = (seconds) => {
+  const mins = Math.floor(seconds / 60);
+  const secs = Math.floor(seconds % 60);
+  return `${String(mins).padStart(2, "0")}:${String(secs).padStart(2, "0")}`;
+};
+const getBlobDuration = () => {
+  const tempVideoEl = document.createElement("video");
+  const durationP = new Promise((resolve, _reject) => {
+    tempVideoEl.addEventListener("loadedmetadata", () => {
+      if (tempVideoEl.duration === Infinity) {
+        tempVideoEl.currentTime = Number.MAX_SAFE_INTEGER;
+        tempVideoEl.ontimeupdate = () => {
+          tempVideoEl.ontimeupdate = null;
+          resolve(tempVideoEl.duration);
+          tempVideoEl.currentTime = 0;
+        };
+      } else resolve(tempVideoEl.duration);
+    });
+    tempVideoEl.onerror = (_event) => resolve(0);
+  });
+  tempVideoEl.src = props.src || "";
+  return durationP;
+};
+watchEffect(async () => {
+  if (props.src && props.src.startsWith("blob:"))
+    duration.value = await getBlobDuration();
+  else duration.value = duration.value || 0;
+});
+defineExpose({
+  audioRef,
+  playing,
+  currentTime,
+  muted,
+  duration,
+  setAudioMuted: (value) => muted.value = value,
+  setAudioPlaying: (value) => playing.value = value
+});
+</script>
+
+<template>
+  <div class="bg-black/5 dark:bg-white/10 px-2 py-1.5 rounded-lg">
+    <audio
+      ref="audioRef"
+      class="hidden"
+      :autoplay="props.autoplay"
+      :src="props.src"
+      :loop="props.loop"
+      :muted="muted"
+      controls
+    ></audio>
+
+    <div class="flex items-center gap-1.5">
+      <UiButtonIconButton
+        v-if="props.src"
+        class="p-0.5 border-none"
+        variant="outline"
+        size="sm"
+        :icon-name="
+  playing ? 'material-symbols:pause' : 'material-symbols:play-arrow'
+"
+        @click="playing = !playing"
+      />
+      <div class="text-xs shrink-0">
+        {{ convertToMinutesSeconds(currentTime) }}
+      </div>
+      <UiPlayerScrubber
+        v-if="props.src"
+        v-model="currentTime"
+        class="grow block min-w-44"
+        type="range"
+        :max="duration"
+        step="0.1"
+      />
+      <template v-if="props.src">
+        <UiButtonIconButton
+          class="p-0.5 border-none"
+          variant="outline"
+          size="sm"
+          :icon-name="
+  muted ? 'material-symbols:volume-off' : 'material-symbols:volume-up'
+"
+          @click="muted = !muted"
+        />
+        <UiButtonLinkButton
+          class="p-0.5 border-none"
+          variant="outline"
+          size="sm"
+          icon="material-symbols:download"
+          download
+          :to="props.src"
+        />
+      </template>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/player/Audio.vue.d.ts

@@ -0,0 +1,15 @@
+type __VLS_Props = {
+    src?: string;
+    autoplay?: boolean;
+    loop?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {
+    audioRef: any;
+    playing: import("vue").ShallowRef<boolean, boolean>;
+    currentTime: import("vue").ShallowRef<number, number>;
+    muted: import("vue").ShallowRef<boolean, boolean>;
+    duration: import("vue").ShallowRef<number, number>;
+    setAudioMuted: (value: boolean) => boolean;
+    setAudioPlaying: (value: boolean) => boolean;
+}, {}, {}, {}, 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/player/Scrubber.vue

@@ -0,0 +1,48 @@
+<script setup>
+import { useEventListener, useMouseInElement, useVModel } from "@vueuse/core";
+const props = defineProps({
+  min: { type: Number, default: 0 },
+  max: { type: Number, default: 100 },
+  secondary: { type: Number, default: 0 },
+  modelValue: { type: Number, required: true }
+});
+const emit = defineEmits(["update:modelValue"]);
+const scrubber = shallowRef();
+const scrubbing = shallowRef(false);
+const pendingValue = shallowRef(0);
+useEventListener("mouseup", () => scrubbing.value = false, { passive: true });
+const value = useVModel(props, "modelValue", emit);
+const { elementX, elementWidth } = useMouseInElement(scrubber);
+watch([scrubbing, elementX], () => {
+  const progress = Math.max(0, Math.min(1, elementX.value / elementWidth.value));
+  pendingValue.value = progress * props.max;
+  if (scrubbing.value) value.value = pendingValue.value;
+});
+</script>
+
+<template>
+  <div
+    ref="scrubber"
+    class="relative rounded-full h-2 transition-all cursor-pointer select-none flex gap-0.5"
+    @mousedown="scrubbing = true"
+  >
+    <div
+      class="relative h-full bg-flux-primary rounded-l-full rounded-r-md"
+      :style="{ width: `${value / max * 100}%` }"
+    />
+    <div
+      class="relative h-full"
+      :class="{
+  'w-1': scrubbing,
+  'w-0.5': !scrubbing
+}"
+    >
+      <span
+        class="absolute w-full -top-0.5 -bottom-0.5 left-0 right-0 bg-flux-primary rounded-full"
+      />
+    </div>
+    <div
+      class="relative h-full flex-1 bg-outline-variant rounded-r-full rounded-l-md"
+    />
+  </div>
+</template>

package/dist/runtime/components/player/Scrubber.vue.d.ts

@@ -0,0 +1,44 @@
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    min: {
+        type: NumberConstructor;
+        default: number;
+    };
+    max: {
+        type: NumberConstructor;
+        default: number;
+    };
+    secondary: {
+        type: NumberConstructor;
+        default: number;
+    };
+    modelValue: {
+        type: NumberConstructor;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    min: {
+        type: NumberConstructor;
+        default: number;
+    };
+    max: {
+        type: NumberConstructor;
+        default: number;
+    };
+    secondary: {
+        type: NumberConstructor;
+        default: number;
+    };
+    modelValue: {
+        type: NumberConstructor;
+        required: true;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {
+    max: number;
+    secondary: number;
+    min: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/runtime/components/player/Video.vue

@@ -0,0 +1,163 @@
+<script setup>
+import { useFullscreen, useMediaControls } from "@vueuse/core";
+const props = defineProps({
+  class: { type: null, required: false },
+  src: { type: String, required: true },
+  type: { type: String, required: false },
+  options: { type: Array, required: false, default: () => ["download"] }
+});
+const video = useTemplateRef("video");
+const loop = ref(false);
+const {
+  playing,
+  buffered,
+  currentTime,
+  duration,
+  waiting,
+  volume,
+  muted,
+  supportsPictureInPicture,
+  togglePictureInPicture
+} = useMediaControls(video, {
+  src: {
+    src: props.src,
+    type: props.type
+  }
+});
+const { toggle: toggleFullScreen } = useFullscreen(video);
+const endBuffer = computed(
+  () => buffered.value.length > 0 ? buffered.value[buffered.value.length - 1][1] : 0
+);
+const formatDuration = (seconds) => {
+  return new Date(1e3 * seconds).toISOString().slice(14, 19);
+};
+</script>
+
+<template>
+  <div
+    :class="cn('outline-none', props.class)"
+    :tabindex="0"
+    autofocus
+    @keydown.prevent.space="playing = !playing"
+    @keydown.right="currentTime += 10"
+    @keydown.left="currentTime -= 10"
+  >
+    <div
+      class="relative bg-black rounded-md overflow-hidden group/controls w-full h-full grid place-items-center"
+    >
+      <video
+        ref="video"
+        class="w-full aspect-video"
+        :loop="loop"
+        @click="playing = !playing"
+      />
+      <div
+        v-if="waiting"
+        class="absolute inset-0 grid place-items-center pointer-events-none bg-black bg-opacity-20"
+      >
+        <Icon
+          class="text-white"
+          name="line-md:loading-twotone-loop"
+          size="24px"
+        />
+      </div>
+      <div
+        class="absolute inset-x-0 bottom-0 p-4 flex flex-col gap-1 bg-gradient-to-b from-transparent to-black/80 opacity-0 transition-all duration-300 group-hover/controls:opacity-100"
+      >
+        <div
+          class="flex justify-between gap-2 items-center text-white text-xxs"
+        >
+          <span>{{ formatDuration(currentTime) }}</span>
+          <span>{{ formatDuration(duration) }}</span>
+        </div>
+
+        <UiPlayerScrubber
+          v-model="currentTime"
+          :max="duration"
+          :secondary="endBuffer"
+        />
+
+        <div class="grid grid-cols-3 text-white pt-1">
+          <div class="flex pl-1">
+            <div class="flex gap-1 items-center group/volume">
+              <Icon
+                class="flex-none"
+                :name="
+  muted || volume === 0 ? 'material-symbols:volume-off' : 'material-symbols:volume-up'
+"
+                size="20px"
+                @click="muted = !muted"
+              />
+              <UiPlayerScrubber
+                v-model="volume"
+                :max="1"
+                class="w-0 group-hover/volume:w-20 transition-all duration-300 ease-in-out"
+              />
+            </div>
+          </div>
+
+          <div class="flex gap-2 items-center justify-center">
+            <Icon
+              name="material-symbols:replay-10"
+              size="20px"
+              @click="currentTime -= 10"
+            />
+            <Icon
+              :name="
+  playing ? 'material-symbols:pause' : 'material-symbols:play-arrow'
+"
+              size="20px"
+              @click="playing = !playing"
+            />
+            <Icon
+              name="material-symbols:forward-10"
+              size="20px"
+              @click="currentTime += 10"
+            />
+          </div>
+
+          <div class="flex gap-1 items-center justify-end">
+            <Icon
+              name="material-symbols:fullscreen"
+              size="20px"
+              @click="toggleFullScreen"
+            />
+            <UiDropdown
+              class="p-1 rounded-md border-none"
+              content-class="z-[1000]"
+              :show-arrow="false"
+              :side-offset="2"
+              icon-name="material-symbols:more-vert"
+              icon-class="text-white"
+              variant="outline"
+              size="xs"
+            >
+              <template #content>
+                <UiDropdownItem
+                  v-if="options.includes('download')"
+                  label="Download"
+                  icon="material-symbols:download"
+                  @click="() => createDownloadLink(props.src, { newTab: true })"
+                />
+                <UiDropdownItem
+                  v-if="
+  options.includes('picture_in_picture') && supportsPictureInPicture
+"
+                  label="Picture in Picture"
+                  icon="material-symbols:picture-in-picture-alt-outline"
+                  @click="togglePictureInPicture"
+                />
+                <UiDropdownItem
+                  v-if="options.includes('repeat')"
+                  label="Loop"
+                  icon="material-symbols:repeat-rounded"
+                  @click="loop = !loop"
+                />
+              </template>
+            </UiDropdown>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/player/Video.vue.d.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes } from 'vue';
+type __VLS_Props = {
+    class?: HTMLAttributes['class'];
+    src: string;
+    type?: string;
+    options?: Array<'download' | 'picture_in_picture' | 'repeat'>;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    options: Array<"download" | "picture_in_picture" | "repeat">;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/popover/Popover.vue

@@ -0,0 +1,30 @@
+<script setup>
+import {
+  HoverCardArrow,
+  HoverCardContent,
+  HoverCardPortal,
+  HoverCardRoot,
+  HoverCardTrigger
+} from "reka-ui";
+const props = defineProps({
+  class: { type: null, required: false }
+});
+const open = ref(false);
+</script>
+
+<template>
+  <HoverCardRoot v-model:open="open">
+    <HoverCardTrigger as="div" :class="cn(props.class)">
+      <slot />
+    </HoverCardTrigger>
+    <HoverCardPortal>
+      <HoverCardContent
+        class="z-90 max-w-72 data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade text-on-inverse-surface select-none rounded-lg bg-inverse-surface p-2.5 text-xs shadow-sm will-change-[transform,opacity]"
+        :side-offset="5"
+      >
+        <slot name="content" />
+        <HoverCardArrow class="fill-inverse-surface" :width="12" :height="6" />
+      </HoverCardContent>
+    </HoverCardPortal>
+  </HoverCardRoot>
+</template>

package/dist/runtime/components/popover/Popover.vue.d.ts

@@ -0,0 +1,18 @@
+import type { HTMLAttributes } from 'vue';
+type __VLS_Props = {
+    class?: HTMLAttributes['class'];
+};
+declare var __VLS_10: {}, __VLS_20: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_10) => any;
+} & {
+    content?: (props: typeof __VLS_20) => 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;
+    };
+};