paket-ui 0.0.1

package/dist/runtime/components/select/SelectMultiple.vue

@@ -0,0 +1,119 @@
+<script setup>
+import { useVModel } from "@vueuse/core";
+import {
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectItemText,
+  SelectPortal,
+  SelectRoot,
+  SelectTrigger,
+  SelectValue,
+  SelectViewport
+} from "reka-ui";
+const props = defineProps({
+  class: { type: null, required: false, default: void 0 },
+  modelValue: { type: Array, required: false, default: void 0 },
+  defaultModelValue: { type: Array, required: false, default: void 0 },
+  options: { type: Array, required: true },
+  placeholder: { type: String, required: false, default: "Pilih Satu" },
+  valueKey: { type: String, required: false, default: "id" },
+  labelKey: { type: String, required: false, default: "label" },
+  invalid: { type: Boolean, required: false },
+  widthContent: { type: String, required: false, default: void 0 },
+  icon: { type: String, required: false, default: "material-symbols:keyboard-arrow-down" }
+});
+const emits = defineEmits(["update:modelValue", "select-all"]);
+const modelValue = useVModel(props, "modelValue", emits, {
+  defaultValue: props.defaultModelValue
+});
+const onSelectAll = (e) => {
+  e.preventDefault();
+  modelValue.value = [];
+  emits("select-all");
+};
+</script>
+
+<template>
+  <SelectRoot v-model="modelValue" multiple>
+    <slot>
+      <SelectTrigger
+        :class="
+  cn(
+    'flex justify-between relative text-left items-start pl-2.5 pr-10 py-2 text-sm rounded-lg border border-outline-variant focus-visible:outline-none ring-0 focus-visible:ring-offset-1 focus-visible:ring-offset-flux-primary disabled:cursor-not-allowed disabled:opacity-50 peer focus-visible:text-onSurface focus-visible:bg-surfaceContainerLowest',
+    [
+      props.invalid ? 'text-flux-error ring-inset-1 ring-inset-flux-error focus:border-flux-error bg-surfaceContainerLow' : 'text-onSurface ring-inset-0 ring-inset-flux-primary focus:border-flux-primary bg-surfaceContainerLowest'
+    ],
+    props.class
+  )
+"
+      >
+        <SelectValue>
+          <template #default="{ selectedLabel }">
+            <slot
+              v-if="selectedLabel.length"
+              name="label"
+              :count="selectedLabel.length"
+            >
+              <span>{{ selectedLabel.length + " Terpilih" }}</span>
+            </slot>
+            <span v-else class="text-flux-outline">{{ placeholder }}</span>
+          </template>
+        </SelectValue>
+        <Icon
+          :name="props.icon"
+          class="text-flux-primary shrink-0 absolute right-2.5 top-1/2 -translate-y-1/2"
+          size="24px"
+        />
+      </SelectTrigger>
+    </slot>
+
+    <SelectPortal>
+      <SelectContent
+        class="bg-background rounded-md shadow-lg z-100 border border-outline-variant p-2"
+        :class="{ 'w-[--reka-select-trigger-width]': !widthContent }"
+        :style="{ width: widthContent }"
+        position="popper"
+        :body-lock="false"
+        :side-offset="4"
+      >
+        <UiScrollAreaBase
+          class="h-fit max-h-60"
+          class-viewport="h-fit max-h-60"
+        >
+          <SelectViewport class="w-full h-full">
+            <SelectGroup>
+              <SelectItem
+                class="text-sm text-on-surface rounded-xl flex items-center justify-between gap-1 px-4 py-2 data-[highlighted]:outline-none data-[highlighted]:bg-surface-container cursor-default"
+                value="all"
+                @select="onSelectAll"
+              >
+                <SelectItemText> Semua </SelectItemText>
+              </SelectItem>
+              <SelectItem
+                v-for="(option, index) in options"
+                :key="`option-${option[props.valueKey]}-${index}`"
+                class="text-sm text-on-surface rounded-xl flex items-center gap-2 px-4 py-2 data-[highlighted]:outline-none data-[highlighted]:bg-surface-container group cursor-default data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed"
+                :value="option[props.valueKey] || '-'"
+                :disabled="!!option.disabled"
+              >
+                <div
+                  class="flex-none w-6 h-6 rounded-md flex justify-center items-center border-2 border-outline-variant bg-transparent group-data-[state=checked]:bg-flux-primary group-data-[state=checked]:border-flux-primary"
+                >
+                  <Icon
+                    name="material-symbols:check"
+                    class="text-background hidden group-data-[state=checked]:block"
+                    size="20px"
+                  />
+                </div>
+                <SelectItemText>
+                  {{ option[labelKey] }}
+                </SelectItemText>
+              </SelectItem>
+            </SelectGroup>
+          </SelectViewport>
+        </UiScrollAreaBase>
+      </SelectContent>
+    </SelectPortal>
+  </SelectRoot>
+</template>

package/dist/runtime/components/select/SelectMultiple.vue.d.ts

@@ -0,0 +1,45 @@
+import { type AcceptableValue } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+type __VLS_Props = {
+    class?: HTMLAttributes['class'];
+    modelValue?: AcceptableValue[];
+    defaultModelValue?: AcceptableValue[];
+    options: Record<string, AcceptableValue>[];
+    placeholder?: string;
+    valueKey?: string;
+    labelKey?: string;
+    invalid?: boolean;
+    widthContent?: string;
+    icon?: string;
+};
+declare var __VLS_6: {}, __VLS_16: {
+    count: number;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+} & {
+    label?: (props: typeof __VLS_16) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (payload?: AcceptableValue[] | undefined) => any;
+    "select-all": () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((payload?: AcceptableValue[] | undefined) => any) | undefined;
+    "onSelect-all"?: (() => any) | undefined;
+}>, {
+    class: HTMLAttributes["class"];
+    modelValue: AcceptableValue[];
+    icon: string;
+    placeholder: string;
+    valueKey: string;
+    labelKey: string;
+    defaultModelValue: AcceptableValue[];
+    widthContent: string;
+}, {}, {}, {}, 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/select/SelectOption.vue

@@ -0,0 +1,96 @@
+<template>
+  <div>
+    <UiLabelBaseLabel v-if="label" :is-required="required" :text="label" />
+    <HeadlessListbox v-model="selectedItem">
+      <div class="relative">
+        <HeadlessListboxButton
+          type="button"
+          class="relative w-full cursor-default rounded-xl border border-outlineVariant py-2.5 focus:border-transparent focus:ring-inset transition-all pl-3 pr-10 text-left focus:outline-none focus:ring-2 focus:ring-flux-primary sm:text-sm"
+        >
+          <span class="block truncate">{{
+            selectedItem ? selectedItem[labelKey] : placeholder
+          }}</span>
+          <span
+            class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"
+          >
+            <Icon
+              name="material-symbols:keyboard-arrow-down"
+              class="h-5 w-5"
+              aria-hidden="true"
+            />
+          </span>
+        </HeadlessListboxButton>
+
+        <transition
+          leave-active-class="transition duration-100 ease-in"
+          leave-from-class="opacity-100"
+          leave-to-class="opacity-0"
+        >
+          <HeadlessListboxOptions
+            :class="
+  cn(
+    'absolute mt-1 max-h-60 w-full overflow-auto z-10 rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm',
+    props.optionPopClass
+  )
+"
+          >
+            <HeadlessListboxOption
+              v-for="(item, key) in options"
+              v-slot="{ active, selected }"
+              :key="`select-${key}`"
+              :value="item"
+              as="template"
+            >
+              <li
+                :class="[
+  active ? 'bg-primaryContainer text-flux-primary' : 'text-gray-900',
+  'relative cursor-default select-none py-2 pl-10 pr-4'
+]"
+              >
+                <span
+                  :class="[
+  selected ? 'font-medium' : 'font-normal',
+  'block truncate'
+]"
+                  >{{ item[labelKey] }}</span
+                >
+                <span
+                  v-if="selected"
+                  class="absolute inset-y-0 left-0 flex items-center pl-3 text-flux-primary"
+                >
+                  <Icon
+                    name="material-symbols:check"
+                    class="h-5 w-5"
+                    aria-hidden="true"
+                  />
+                </span>
+              </li>
+            </HeadlessListboxOption>
+          </HeadlessListboxOptions>
+        </transition>
+      </div>
+    </HeadlessListbox>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  modelValue: { type: [Number, String], required: false },
+  valueKey: { type: String, required: false, default: "id" },
+  placeholder: { type: String, required: false, default: "Pilih Satu" },
+  labelKey: { type: String, required: false, default: "label" },
+  label: { type: String, required: false },
+  required: { type: Boolean, required: false, default: false },
+  optionPopClass: { type: null, required: false },
+  options: { type: Array, required: false }
+});
+const emit = defineEmits(["update:modelValue"]);
+const selectedItem = computed({
+  get: () => props.options?.find((item) => item[props.valueKey] === props.modelValue),
+  set: (newValue) => {
+    if (newValue) {
+      emit("update:modelValue", newValue[props.valueKey]);
+    }
+  }
+});
+</script>

package/dist/runtime/components/select/SelectOption.vue.d.ts

@@ -0,0 +1,21 @@
+type __VLS_Props = {
+    modelValue?: number | string;
+    valueKey?: string;
+    placeholder?: string;
+    labelKey?: string;
+    label?: string;
+    required?: boolean;
+    optionPopClass?: HTMLAttributes['inputmode'];
+    options?: Record<string, number | string>[];
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: string | number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
+}>, {
+    required: boolean;
+    placeholder: string;
+    valueKey: string;
+    labelKey: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/select/SelectWithInput.vue

@@ -0,0 +1,46 @@
+<script setup>
+import { useElementSize, useVModel } from "@vueuse/core";
+const props = defineProps({
+  modelValue: { type: String, required: false },
+  modelValueOption: { type: String, required: false },
+  class: { type: null, required: false },
+  invalid: { type: Boolean, required: false },
+  errorMessage: { type: String, required: false },
+  placeholder: { type: null, required: false },
+  options: { type: Array, required: true }
+});
+const emit = defineEmits(["update:modelValue", "update:modelValueOption"]);
+const modelValue = useVModel(props, "modelValue", emit);
+const modelValueOption = useVModel(props, "modelValueOption", emit);
+const elementWrapper = useTemplateRef("elementWrapper");
+const { width } = useElementSize(elementWrapper);
+</script>
+
+<template>
+  <div
+    ref="elementWrapper"
+    :class="
+  cn(
+    'w-full flex items-center gap-1 rounded-lg border divide-x divide-flux-outline border-outlineVariant ring-0',
+    [
+      props.invalid ? 'ring-offset-1 ring-offset-flux-error bg-surfaceContainerLow' : 'ring-offset-0 ring-offset-flux-primary bg-background dark:bg-surface-container-high'
+    ],
+    props.class
+  )
+"
+  >
+    <UiSelectBase
+      v-model="modelValueOption"
+      class="border-none focus-visible:ring-offset-0 text-xs rounded-r-none ring-offset-0"
+      :options="props.options"
+      :invalid="props.invalid"
+      :width-content="Math.round(width) + 'px'"
+    />
+    <UiInputField
+      v-model="modelValue"
+      :placeholder="props.placeholder"
+      class="border-none flex-1 pl-0 focus-visible:ring-offset-0 rounded-l-none ring-offset-0"
+      :invalid="props.invalid"
+    />
+  </div>
+</template>

package/dist/runtime/components/select/SelectWithInput.vue.d.ts

@@ -0,0 +1,21 @@
+import type { InputHTMLAttributes } from 'vue';
+type __VLS_Props = {
+    modelValue?: string;
+    modelValueOption?: string;
+    class?: InputHTMLAttributes['class'];
+    invalid?: boolean;
+    errorMessage?: string;
+    placeholder?: InputHTMLAttributes['placeholder'];
+    options: {
+        id: string;
+        label: string;
+    }[];
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value?: string | undefined) => void;
+    "update:modelValueOption": (value?: string | undefined) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value?: string | undefined) => any) | undefined;
+    "onUpdate:modelValueOption"?: ((value?: string | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/stepper/Stepper.vue

@@ -0,0 +1,99 @@
+<script setup>
+import { useVModel } from "@vueuse/core";
+import {
+  StepperDescription,
+  StepperIndicator,
+  StepperItem,
+  StepperRoot,
+  StepperSeparator,
+  StepperTitle,
+  StepperTrigger
+} from "reka-ui";
+const props = defineProps({
+  class: { type: null, required: false },
+  itemClass: { type: null, required: false },
+  triggerClass: { type: null, required: false },
+  separatorClass: { type: null, required: false },
+  modelValue: { type: Number, required: false },
+  options: { type: Array, required: true }
+});
+const emit = defineEmits(["update:modelValue"]);
+const modelValue = useVModel(props, "modelValue", emit, {
+  defaultValue: 1
+});
+</script>
+
+<template>
+  <StepperRoot
+    v-model="modelValue"
+    :default-value="2"
+    :class="cn('flex gap-2 w-full', props.class)"
+  >
+    <StepperItem
+      v-for="item in options"
+      :key="item.step"
+      :class="
+  cn(
+    'w-full flex justify-center gap-2 relative group px-4',
+    props.itemClass
+  )
+"
+      :step="item.step"
+      :disabled="item.disabled"
+      :completed="item.completed"
+    >
+      <template #default="{ state }">
+        <StepperTrigger
+          class="inline-flex border-2 shadow-sm items-center border-outline-variant justify-center rounded-full w-10 h-10 shrink-0"
+          :class="
+  cn(
+    'group-data-[state=inactive]:text-on-surface',
+    'group-data-[state=completed]:bg-flux-primary group-data-[state=completed]:text-on-primary group-data-[state=completed]:border-flux-primary',
+    'group-data-[state=active]:bg-secondary-container group-data-[state=active]:text-flux-primary group-data-[state=active]:border-flux-primary',
+    'group-data-[disabled]:opacity-100 group-data-[disabled]:cursor-default',
+    props.triggerClass
+  )
+"
+        >
+          <StepperIndicator v-if="item.icon">
+            <Icon
+              :name="
+  state === 'active' ? 'svg-spinners:3-dots-bounce' : item.icon
+"
+              size="24px"
+              class="w-5 h-5"
+            />
+          </StepperIndicator>
+        </StepperTrigger>
+
+        <StepperSeparator
+          v-if="item.step !== options[options.length - 1].step"
+          :class="
+  cn(
+    `absolute block indicator top-1/2 -translate-y-1/2 left-[calc(50%+30px)] right-[calc(-50%+20px)] h-2 rounded-full bg-outline-variant shrink-0`,
+    `data-[state=completed]:bg-flux-primary`,
+    `data-[state=active]:bg-secondary-container data-[state=active]:text-flux-primary data-[state=active]:border-flux-primary`,
+    props.separatorClass
+  )
+"
+        />
+
+        <div class="absolute text-center top-full left-0 w-full mt-2">
+          <StepperTitle class="font-medium text-sm">
+            {{ item.title }}
+          </StepperTitle>
+          <StepperDescription
+            v-if="item.description"
+            class="hidden sm:block text-xs"
+          >
+            {{ item.description }}
+          </StepperDescription>
+        </div>
+      </template>
+    </StepperItem>
+  </StepperRoot>
+</template>
+
+<style scoped>
+.indicator[data-state=active]{animation:linear-x 10s linear infinite;background-image:repeating-linear-gradient(123deg,transparent,transparent .75rem,currentColor 10px,currentColor 1rem)}@keyframes linear-x{0%{background-position-x:0}to{background-position-x:160px}}
+</style>

package/dist/runtime/components/stepper/Stepper.vue.d.ts

@@ -0,0 +1,23 @@
+import type { HTMLAttributes } from 'vue';
+type OptionT = {
+    step: number;
+    title: string;
+    description?: string;
+    icon?: string;
+    disabled?: boolean;
+    completed?: boolean;
+};
+type __VLS_Props = {
+    class?: HTMLAttributes['class'];
+    itemClass?: HTMLAttributes['class'];
+    triggerClass?: HTMLAttributes['class'];
+    separatorClass?: HTMLAttributes['class'];
+    modelValue?: number;
+    options: OptionT[];
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (payload?: number | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((payload?: number | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/switch/Switch.vue

@@ -0,0 +1,42 @@
+<script setup>
+import { useVModel } from "@vueuse/core";
+import { SwitchRoot, SwitchThumb } from "reka-ui";
+const props = defineProps({
+  class: { type: null, required: false, default: "" },
+  thumbClass: { type: null, required: false, default: "" },
+  modelValue: { type: Boolean, required: false, default: false }
+});
+const emit = defineEmits(["update:modelValue"]);
+const modelValue = useVModel(props, "modelValue", emit, {
+  defaultValue: false
+});
+const slots = useSlots();
+</script>
+
+<template>
+  <SwitchRoot
+    v-model="modelValue"
+    :class="
+  cn(
+    'w-12 h-7 shrink-0 shadow-sm flex data-[state=unchecked]:bg-surface-container-highest data-[state=checked]:bg-flux-primary border-2 border-flux-outline data-[state=checked]:border-flux-primary rounded-full relative transition-[background] focus-within:outline-flux-primary',
+    props.class
+  )
+"
+  >
+    <SwitchThumb
+      :class="
+  cn(
+    {
+      'w-3 h-3 translate-x-1.5': !slots.icon,
+      'w-5 h-5 translate-x-0.5': slots.icon
+    },
+    'my-auto bg-flux-outline data-[state=unchecked]:text-surface-container-highest data-[state=check]:text-flux-primary flex items-center justify-center shadow-xl rounded-full transition-transform will-change-transform',
+    'data-[state=checked]:translate-x-[calc(100%+1px)] data-[state=checked]:bg-on-primary data-[state=checked]:w-5 data-[state=checked]:h-5',
+    props.thumbClass
+  )
+"
+    >
+      <slot name="icon" :value="modelValue" />
+    </SwitchThumb>
+  </SwitchRoot>
+</template>

package/dist/runtime/components/switch/Switch.vue.d.ts

@@ -0,0 +1,28 @@
+import type { HTMLAttributes } from 'vue';
+type __VLS_Props = {
+    class?: HTMLAttributes['class'];
+    thumbClass?: HTMLAttributes['class'];
+    modelValue?: boolean;
+};
+declare var __VLS_10: {
+    value: boolean;
+};
+type __VLS_Slots = {} & {
+    icon?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (v: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((v: boolean) => any) | undefined;
+}>, {
+    class: HTMLAttributes["class"];
+    modelValue: boolean;
+    thumbClass: 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/table/TableWrapper.vue

@@ -0,0 +1,61 @@
+<script setup>
+const props = defineProps({
+  class: { type: null, required: false },
+  headerClass: { type: null, required: false },
+  headerWrapperClass: { type: null, required: false },
+  bodyClass: { type: null, required: false }
+});
+const slots = defineSlots();
+</script>
+
+<template>
+  <UiCardBaseCard
+    :class="
+  cn(
+    {
+      'p-0 divide-y border-0 shadow divide-outline-variant': slots.tabs
+    },
+    props.class
+  )
+"
+  >
+    <slot name="tabs" />
+    <div
+      :class="{
+  'p-4': slots.tabs
+}"
+    >
+      <slot name="filter" />
+      <UiCardBaseCard
+        :class="
+  cn(
+    'sticky top-[var(--navbar-height)] z-10 p-0 pt-4 border-0 mt-0.5 rounded-none',
+    props.headerWrapperClass
+  )
+"
+      >
+        <div
+          :class="
+  cn(
+    'grid gap-3 text-xs items-center font-semibold py-2 px-3 bg-primary-container uppercase dark:bg-secondary-container border border-outline-variant rounded-t-lg',
+    props.headerClass
+  )
+"
+        >
+          <slot name="header" />
+        </div>
+      </UiCardBaseCard>
+      <div
+        :class="
+  cn(
+    'border border-outline-variant rounded-b-lg divide-y divide-outline-variant border-t-0 text-sm',
+    props.bodyClass
+  )
+"
+      >
+        <slot />
+      </div>
+      <slot name="pagination" />
+    </div>
+  </UiCardBaseCard>
+</template>

package/dist/runtime/components/table/TableWrapper.vue.d.ts

@@ -0,0 +1,15 @@
+import type { HTMLAttributes } from 'vue';
+type __VLS_Props = {
+    class?: HTMLAttributes['class'];
+    headerClass?: HTMLAttributes['class'];
+    headerWrapperClass?: HTMLAttributes['class'];
+    bodyClass?: HTMLAttributes['class'];
+};
+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;
+    };
+};