paket-ui 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 KiriminAja
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,72 @@
+# Nakama UI (KiriminAja Design System)
+
+[![npm version][npm-version-src]][npm-version-href]
+[![npm downloads][npm-downloads-src]][npm-downloads-href]
+[![License][license-src]][license-href]
+[![Nuxt][nuxt-src]][nuxt-href]
+
+My new Nuxt module for doing amazing things.
+
+- [✨  Release Notes](/CHANGELOG.md)
+  <!-- - [🏀 Online playground](https://stackblitz.com/github/your-org/my-module?file=playground%2Fapp.vue) -->
+  <!-- - [📖 &nbsp;Documentation](https://example.com) -->
+
+## Features
+
+<!-- Highlight some of the features your module provide here -->
+
+- ⛰ &nbsp;Foo
+- 🚠 &nbsp;Bar
+- 🌲 &nbsp;Baz
+
+## Quick Setup
+
+Install the module to your Nuxt application with one command:
+
+```bash
+npx nuxi module add @nakama/ui
+```
+
+That's it! You can now use My Module in your Nuxt app ✨
+
+## Contribution
+
+<details>
+  <summary>Local development</summary>
+  
+  ```bash
+  # Install dependencies
+  npm install
+  
+  # Generate type stubs
+  npm run dev:prepare
+  
+  # Develop with the playground
+  npm run dev
+  
+  # Build the playground
+  npm run dev:build
+  
+  # Run ESLint
+  npm run lint
+  
+  # Run Vitest
+  npm run test
+  npm run test:watch
+  
+  # Release new version
+  npm run release
+  ```
+
+</details>
+
+<!-- Badges -->
+
+[npm-version-src]: https://img.shields.io/npm/v/@nakama/ui/latest.svg?style=flat&colorA=020420&colorB=00DC82
+[npm-version-href]: https://npmjs.com/package/@nakama/ui
+[npm-downloads-src]: https://img.shields.io/npm/dm/@nakama/ui.svg?style=flat&colorA=020420&colorB=00DC82
+[npm-downloads-href]: https://npm.chart.dev/@nakama/ui
+[license-src]: https://img.shields.io/npm/l/@nakama/ui.svg?style=flat&colorA=020420&colorB=00DC82
+[license-href]: https://npmjs.com/package/@nakama/ui
+[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js
+[nuxt-href]: https://nuxt.com

package/dist/module.d.mts

@@ -0,0 +1,10 @@
+import * as _nuxt_schema from '@nuxt/schema';
+
+interface ModuleOptions {
+    prefix?: string;
+    coloMode?: boolean;
+}
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+
+export { _default as default };
+export type { ModuleOptions };

package/dist/module.json

@@ -0,0 +1,13 @@
+{
+  "name": "paket-ui",
+  "version": "v0.0.1",
+  "docs": "https://github.com/kiriminaja/nakama-ui",
+  "configKey": "nakama",
+  "compatibility": {
+    "nuxt": ">=3.16.0"
+  },
+  "builder": {
+    "@nuxt/module-builder": "1.0.1",
+    "unbuild": "3.5.0"
+  }
+}

package/dist/module.mjs

@@ -0,0 +1,46 @@
+import { defu } from 'defu';
+import { defineNuxtModule, createResolver, addPlugin, addComponentsDir, addImportsDir, hasNuxtModule, installModule } from '@nuxt/kit';
+
+const name = "paket-ui";
+const version = "v0.0.1";
+
+const defaultOptions = {
+  prefix: "Nx"
+};
+
+const module = defineNuxtModule({
+  meta: {
+    name,
+    version,
+    docs: "https://github.com/kiriminaja/nakama-ui",
+    configKey: "nakama",
+    compatibility: {
+      nuxt: ">=3.16.0"
+    }
+  },
+  // Default configuration options of the Nuxt module
+  defaults: defaultOptions,
+  async setup(options, nuxt) {
+    const { resolve } = createResolver(import.meta.url);
+    async function registerModule(name2, key, options2) {
+      if (!hasNuxtModule(name2)) {
+        await installModule(name2, options2);
+      } else {
+        nuxt.options[key] = defu(nuxt.options[key], options2);
+      }
+    }
+    await registerModule("@nuxt/icon", "icon", {
+      cssLayer: "components"
+    });
+    addPlugin(resolve("./runtime/plugin"));
+    addPlugin(resolve("./runtime/utils/cn"));
+    addComponentsDir({
+      path: resolve("./runtime/components"),
+      prefix: options.prefix,
+      pathPrefix: false
+    });
+    addImportsDir(resolve("./runtime/composables"));
+  }
+});
+
+export { module as default };

package/dist/runtime/components/ProgressIndicator/ProgressBase.vue

@@ -0,0 +1,36 @@
+<script setup>
+import { ProgressIndicator, ProgressRoot } from "reka-ui";
+const props = defineProps({
+  progressValue: { type: Number, required: false },
+  class: { type: null, required: false },
+  classIndicator: { type: null, required: false }
+});
+const percentage = computed(() => {
+  if (props.progressValue === void 0) return 0;
+  if (props.progressValue < 0) return 0;
+  if (props.progressValue > 100) return 100;
+  return props.progressValue;
+});
+</script>
+
+<template>
+  <ProgressRoot
+    v-model="percentage"
+    :class="
+  cn(
+    'rounded-full relative h-4 w-full overflow-hidden bg-surface-container-low',
+    props.class
+  )
+"
+  >
+    <ProgressIndicator
+      :class="
+  cn(
+    'rounded-full block relative w-full h-full bg-flux-primary transition-transform overflow-hidden duration-500 ease-in-out',
+    props.classIndicator
+  )
+"
+      :style="`transform: translateX(-${100 - percentage}%)`"
+    />
+  </ProgressRoot>
+</template>

package/dist/runtime/components/ProgressIndicator/ProgressBase.vue.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLAttributes } from 'vue';
+type __VLS_Props = {
+    progressValue?: number;
+    class?: HTMLAttributes['class'];
+    classIndicator?: 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/ProgressIndicator/ProgressIndicator.vue

@@ -0,0 +1,46 @@
+<script setup>
+const props = defineProps({
+  class: { type: null, required: false },
+  inactiveClass: { type: null, required: false },
+  value: { type: Number, required: false },
+  max: { type: Number, required: false }
+});
+const percentage = computed(() => {
+  if (props.max && props.value) {
+    return Math.round(props.value / props.max * 100);
+  }
+  return 0;
+});
+</script>
+
+<template>
+  <div
+    :class="
+  cn(
+    'w-full flex text-flux-primary rounded-full h-3 gap-1 items-center',
+    props.class
+  )
+"
+  >
+    <div
+      v-if="percentage >= 1"
+      class="shrink-0 h-full bg-current rounded-full transition-all"
+      :style="{
+  width: percentage + '%'
+}"
+    ></div>
+    <div
+      v-if="percentage < 100"
+      :class="
+  cn(
+    'bg-secondary-container h-full rounded-full grow relative transition-all',
+    props.inactiveClass
+  )
+"
+    >
+      <span
+        class="bg-current rounded-full w-1.5 h-1.5 absolute top-1/2 right-0.5 -translate-y-1/2"
+      />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,9 @@
+import type { HTMLAttributes } from 'vue';
+type __VLS_Props = {
+    class?: HTMLAttributes['class'];
+    inactiveClass?: HTMLAttributes['class'];
+    value?: number;
+    max?: number;
+};
+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/Recorder/RecorderAudio.vue

@@ -0,0 +1,136 @@
+<script setup>
+import { useDevicesList, useUserMedia } from "@vueuse/core";
+const props = defineProps({
+  maxDuration: { type: Number, required: false, default: 0 }
+});
+const emits = defineEmits(["recorded"]);
+const currentAudio = shallowRef();
+const { audioInputs: microphones } = useDevicesList({
+  requestPermissions: true,
+  onUpdated() {
+    if (!microphones.value.find((i) => i.deviceId === currentAudio.value))
+      currentAudio.value = microphones.value[0]?.deviceId;
+  }
+});
+const audio = useTemplateRef("audio");
+const { stream, enabled } = useUserMedia({
+  constraints: reactive({ audio: { deviceId: currentAudio, video: false } })
+});
+const recordedChunks = shallowRef([]);
+const mediaRecorder = shallowRef(null);
+const audioFileSrc = shallowRef("");
+const durationTimer = shallowRef(null);
+const stopRecording = () => {
+  if (mediaRecorder.value && mediaRecorder.value.state === "recording") {
+    mediaRecorder.value.stop();
+  }
+  if (durationTimer.value) {
+    clearTimeout(durationTimer.value);
+    durationTimer.value = null;
+  }
+  enabled.value = false;
+};
+const toggleRecording = () => {
+  if (enabled.value) {
+    stopRecording();
+  } else {
+    enabled.value = true;
+  }
+};
+watchEffect(() => {
+  if (stream.value) {
+    recordedChunks.value = [];
+    if (mediaRecorder.value) {
+      mediaRecorder.value.stop();
+    }
+    if (durationTimer.value) {
+      clearTimeout(durationTimer.value);
+      durationTimer.value = null;
+    }
+    mediaRecorder.value = new MediaRecorder(stream.value);
+    if (props.maxDuration > 0) {
+      durationTimer.value = setTimeout(() => {
+        stopRecording();
+      }, props.maxDuration * 1e3);
+    }
+    mediaRecorder.value.ondataavailable = (event) => {
+      if (event.data.size > 0) {
+        recordedChunks.value.push(event.data);
+        const blob = new Blob(recordedChunks.value, { type: "audio/mp3" });
+        const newFile = new File(
+          [blob],
+          `recording-${(/* @__PURE__ */ new Date()).toISOString()}.mp3`,
+          {
+            type: "audio/mp3"
+          }
+        );
+        const dataTransfer = new DataTransfer();
+        dataTransfer.items.add(newFile);
+        emits("recorded", dataTransfer.files);
+      }
+    };
+    mediaRecorder.value.onstop = () => {
+      const blob = new Blob(recordedChunks.value, { type: "audio/mp3" });
+      audioFileSrc.value = URL.createObjectURL(blob);
+      if (durationTimer.value) {
+        clearTimeout(durationTimer.value);
+        durationTimer.value = null;
+      }
+    };
+    mediaRecorder.value.start();
+  }
+});
+watchEffect(() => {
+  if (audio.value?.audioRef) {
+    audio.value.audioRef.srcObject = stream.value;
+  }
+});
+watch(enabled, (value) => {
+  if (!audio.value) return;
+  audio.value.setAudioMuted(value);
+  if (!value && durationTimer.value) {
+    clearTimeout(durationTimer.value);
+    durationTimer.value = null;
+  }
+});
+onMounted(() => {
+  if (!enabled.value) {
+    enabled.value = true;
+  }
+});
+onBeforeUnmount(() => {
+  enabled.value = false;
+  if (durationTimer.value) {
+    clearTimeout(durationTimer.value);
+    durationTimer.value = null;
+  }
+});
+</script>
+
+<template>
+  <div
+    class="flex gap-2 text-center items-center bg-background rounded-full border border-outline-variant px-2.5 py-2"
+  >
+    <Icon
+      v-if="enabled"
+      name="material-symbols:fiber-manual-record"
+      class="animate-pulse text-flux-error"
+      size="20px"
+    />
+    <UiPlayerAudio
+      ref="audio"
+      class="!bg-transparent !p-0 grow"
+      :src="enabled ? void 0 : audioFileSrc"
+      autoplay
+    />
+    <UiButtonIconButton
+      class="p-0.5 border-none"
+      :icon-name="
+  enabled ? 'material-symbols:stop' : 'material-symbols:keyboard-voice'
+"
+      size="sm"
+      variant="outline"
+      @click="toggleRecording"
+    />
+  </div>
+</template>

package/dist/runtime/components/Recorder/RecorderAudio.vue.d.ts

@@ -0,0 +1,11 @@
+type __VLS_Props = {
+    maxDuration?: number;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    recorded: (value: FileList) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onRecorded?: ((value: FileList) => any) | undefined;
+}>, {
+    maxDuration: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/alert/AlertHelperForm.vue

@@ -0,0 +1,22 @@
+<template>
+  <div
+    :class="[
+  'flex items-center gap-2 text-sm',
+  variantConfigHelper[props.variant],
+  props.class
+]"
+  >
+    <Icon :name="icon" size="20px" class="shrink-0" />
+    <span class="font-semibold" v-text="description"></span>
+  </div>
+</template>
+
+<script setup>
+import { variantConfigHelper } from ".";
+const props = defineProps({
+  class: { type: null, required: false },
+  icon: { type: String, required: false, default: "material-symbols:info" },
+  description: { type: String, required: true },
+  variant: { type: null, required: false, default: "info" }
+});
+</script>

package/dist/runtime/components/alert/AlertHelperForm.vue.d.ts

@@ -0,0 +1,13 @@
+import type { HTMLAttributes } from "vue";
+import { variantConfigHelper } from ".";
+interface IInfoField {
+    class?: HTMLAttributes["class"];
+    icon?: string;
+    description: string;
+    variant?: keyof typeof variantConfigHelper;
+}
+declare const _default: import("vue").DefineComponent<IInfoField, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<IInfoField> & Readonly<{}>, {
+    variant: keyof typeof variantConfigHelper;
+    icon: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/alert/AlertPinLocation.vue

@@ -0,0 +1,57 @@
+<template>
+  <div
+    :class="[
+  'px-3.5 py-3 rounded-lg text-sm grid lg:flex gap-2 relative hover:ring-2 transition-all',
+  {
+    'bg-errorContainer text-onErrorContainer hover:ring-flux-error': isError,
+    'bg-secondary-container hover:ring-flux-primary': !isError
+  }
+]"
+  >
+    <NuxtImg
+      provider="provider"
+      width="44px"
+      class="shrink-0"
+      :src="
+  !isError ? '/svg/global/pin-icon.svg' : `/svg/global/location-not-pointed.svg`
+"
+      alt="not pointed"
+    />
+    <div class="grow">
+      <h4 class="font-semibold">
+        {{ isError ? "Belum Atur Pin Lokasi" : "Sudah Atur Pin Lokasi" }}
+      </h4>
+      <p
+        class="line-clamp-2 text-xs break-all"
+        v-text="
+  !isError && address ? address : 'Wajib tentukan pin lokasi untuk memudahkan kurir menemukan lokasimu.'
+"
+      ></p>
+    </div>
+    <Icon
+      v-if="withAction"
+      name="material-symbols:edit-outline"
+      size="24px"
+      class="shrink-0"
+    />
+    <button
+      v-if="withAction"
+      class="absolute inset-0"
+      type="button"
+      @click="emit('click')"
+    ></button>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  latitude: { type: null, required: false },
+  longitude: { type: null, required: false },
+  address: { type: null, required: false },
+  withAction: { type: Boolean, required: false }
+});
+const emit = defineEmits(["click"]);
+const isError = computed(
+  () => props.latitude === void 0 || props.latitude === null
+);
+</script>

package/dist/runtime/components/alert/AlertPinLocation.vue.d.ts

@@ -0,0 +1,13 @@
+import type { IFAddresses } from '~~/services/settings/pickup-address/types';
+type __VLS_Props = {
+    latitude?: IFAddresses['latitude'];
+    longitude?: IFAddresses['longitude'];
+    address?: IFAddresses['address'];
+    withAction?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    click: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/alert/BaseAlert.vue

@@ -0,0 +1,54 @@
+<script setup>
+import { iconSizeConfig, variantConfig } from ".";
+const props = defineProps({
+  class: { type: null, required: false, default: void 0 },
+  variant: { type: null, required: false, default: "info" },
+  iconSize: { type: null, required: false, default: "default" },
+  title: { type: String, required: false, default: void 0 },
+  description: { type: String, required: false, default: void 0 },
+  descriptionAsHtml: { type: Boolean, required: false },
+  iconName: { type: String, required: false, default: "mdi:information" },
+  descriptionClass: { type: null, required: false, default: void 0 }
+});
+const slots = useSlots();
+</script>
+
+<template>
+  <div
+    :class="
+  cn(
+    'flex gap-2 px-3 py-2 rounded-lg',
+    variantConfig[props.variant],
+    props.description ? 'items-start' : 'items-center',
+    props.class
+  )
+"
+  >
+    <Icon
+      :name="props.iconName"
+      :size="iconSizeConfig[props.iconSize]"
+      class="flex-none"
+    />
+
+    <div class="grow flex flex-col gap-1">
+      <p v-if="props.title" class="font-semibold text-xs">
+        {{ props.title }}
+      </p>
+      <div v-if="props.description || slots.default" class="text-xs">
+        <slot>
+          <div
+            v-if="props.description && props.descriptionAsHtml"
+            v-html="props.description"
+          ></div>
+          <p
+            v-if="props.description && !props.descriptionAsHtml"
+            :class="cn(props.descriptionClass)"
+          >
+            {{ props.description }}
+          </p>
+        </slot>
+      </div>
+    </div>
+    <slot name="trailing" />
+  </div>
+</template>

package/dist/runtime/components/alert/BaseAlert.vue.d.ts

@@ -0,0 +1,34 @@
+import type { HTMLAttributes } from 'vue';
+import { iconSizeConfig, variantConfig } from '.';
+type __VLS_Props = {
+    class?: HTMLAttributes['class'];
+    variant?: keyof typeof variantConfig;
+    iconSize?: keyof typeof iconSizeConfig;
+    title?: string;
+    description?: string;
+    descriptionAsHtml?: boolean;
+    iconName?: string;
+    descriptionClass?: HTMLAttributes['class'];
+};
+declare var __VLS_5: {}, __VLS_7: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_5) => any;
+} & {
+    trailing?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    title: string;
+    class: HTMLAttributes["class"];
+    iconName: string;
+    variant: keyof typeof variantConfig;
+    description: string;
+    iconSize: keyof typeof iconSizeConfig;
+    descriptionClass: HTMLAttributes["class"];
+}, {}, {}, {}, 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;
+    };
+};

package/dist/runtime/components/alert/index.d.ts

@@ -0,0 +1,20 @@
+export declare const variantConfig: {
+    primary: string;
+    info: string;
+    success: string;
+    warning: string;
+    error: string;
+    default: string;
+};
+export declare const variantConfigHelper: {
+    primary: string;
+    info: string;
+    success: string;
+    warning: string;
+    error: string;
+};
+export declare const iconSizeConfig: {
+    default: string;
+    xs: string;
+    sm: string;
+};

package/dist/runtime/components/alert/index.js

@@ -0,0 +1,20 @@
+export const variantConfig = {
+  primary: "text-flux-primary bg-primaryContainer",
+  info: "text-flux-info bg-infoContainer",
+  success: "text-flux-success bg-successContainer",
+  warning: "text-flux-warning bg-warningContainer",
+  error: "text-flux-error bg-errorContainer",
+  default: "text-on-surface bg-surface-container"
+};
+export const variantConfigHelper = {
+  primary: "text-flux-primary",
+  info: "text-flux-info",
+  success: "text-flux-success",
+  warning: "text-flux-warningYellow",
+  error: "text-flux-error"
+};
+export const iconSizeConfig = {
+  default: "20px",
+  xs: "12px",
+  sm: "16px"
+};