paket-ui 0.0.1

package/dist/runtime/components/attachment/BaseAttachment.vue

@@ -0,0 +1,52 @@
+<script setup>
+import { findFallbackIcon, iconFallbackSizeConfig } from ".";
+const props = defineProps({
+  type: { type: String, required: false, default: "image" },
+  src: { type: String, required: false },
+  alt: { type: String, required: false, default: "none" },
+  openable: { type: Boolean, required: false, default: true },
+  dismissable: { type: Boolean, required: false },
+  width: { type: String, required: false, default: "72px" },
+  height: { type: String, required: false, default: "72px" },
+  iconFallbackSize: { type: null, required: false, default: "default" }
+});
+const emits = defineEmits(["onDismiss"]);
+const handleOpen = () => {
+  if (!props.openable) return;
+  return window.open(props.src, "_blank");
+};
+const handleDismiss = (e) => {
+  e.stopPropagation();
+  emits("onDismiss");
+};
+const makeIcon = computed(() => findFallbackIcon(props.type));
+</script>
+
+<template>
+  <div
+    class="relative rounded-xl overflow-hidden"
+    :class="{ 'cursor-pointer': openable }"
+    :style="{ width, height }"
+    @click="handleOpen"
+  >
+    <div
+      v-if="props.dismissable"
+      class="absolute top-1 right-1 bg-surfaceContainerLow text-flux-primary rounded-full w-4 h-4 flex items-center justify-center cursor-pointer"
+      @click="handleDismiss"
+    >
+      <Icon name="mdi:close" size="12px" />
+    </div>
+    <img
+      v-if="props.type === 'image' && props.src"
+      :src="props.src"
+      :alt="alt"
+      class="w-full h-full object-cover"
+    />
+    <div
+      v-else
+      class="w-full h-full bg-secondaryContainer text-flux-secondary flex justify-center items-center"
+    >
+      <Icon :name="makeIcon" :size="iconFallbackSizeConfig[iconFallbackSize]" />
+    </div>
+  </div>
+</template>

package/dist/runtime/components/attachment/BaseAttachment.vue.d.ts

@@ -0,0 +1,24 @@
+import { iconFallbackSizeConfig } from '.';
+type __VLS_Props = {
+    type?: 'image' | 'file' | 'video';
+    src?: string;
+    alt?: string;
+    openable?: boolean;
+    dismissable?: boolean;
+    width?: string;
+    height?: string;
+    iconFallbackSize?: keyof typeof iconFallbackSizeConfig;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    onDismiss: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onOnDismiss?: (() => any) | undefined;
+}>, {
+    type: "image" | "file" | "video";
+    width: string;
+    alt: string;
+    height: string;
+    openable: boolean;
+    iconFallbackSize: keyof typeof iconFallbackSizeConfig;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/attachment/ChipAttachment.vue

@@ -0,0 +1,57 @@
+<script setup>
+import { findFallbackIcon, iconFallbackSizeConfig } from ".";
+const props = defineProps({
+  class: { type: null, required: false, default: void 0 },
+  type: { type: String, required: false, default: "image" },
+  src: { type: String, required: false, default: void 0 },
+  label: { type: String, required: false, default: void 0 },
+  dismissable: { type: Boolean, required: false, default: true },
+  iconFallbackSize: { type: null, required: false, default: "xs" },
+  invalid: { type: Boolean, required: false },
+  invalidMessage: { type: [String, null], required: false, default: void 0 }
+});
+const emits = defineEmits(["onDismiss", "onClick"]);
+const handleClick = () => emits("onClick");
+const handleDismiss = (e) => {
+  e.stopPropagation();
+  emits("onDismiss");
+};
+const makeIcon = computed(() => findFallbackIcon(props.type));
+</script>
+
+<template>
+  <div
+    :class="
+  cn(
+    'bg-surface-container-high p-1.5 rounded-md flex flex-col gap-2',
+    props.class
+  )
+"
+    @click="handleClick"
+  >
+    <div class="flex items-center justify-between gap-2">
+      <div class="flex items-center gap-2 justify-start overflow-hidden">
+        <Icon
+          :name="makeIcon"
+          class="text-outline flex-none"
+          :size="iconFallbackSizeConfig[iconFallbackSize]"
+        />
+        <span
+          class="text-xs font-semibold line-clamp-1"
+          :class="{ 'text-flux-error': props.invalid }"
+          >{{ props.label }}</span
+        >
+      </div>
+      <Icon
+        v-if="props.dismissable"
+        name="mdi:close"
+        class="text-flux-primary cursor-pointer flex-none"
+        :size="iconFallbackSizeConfig[iconFallbackSize]"
+        @click="handleDismiss"
+      />
+    </div>
+    <p v-if="props.invalid" class="text-[8px] font-medium text-flux-error">
+      {{ props.invalidMessage }}
+    </p>
+  </div>
+</template>

package/dist/runtime/components/attachment/ChipAttachment.vue.d.ts

@@ -0,0 +1,28 @@
+import type { HTMLAttributes } from 'vue';
+import { iconFallbackSizeConfig } from '.';
+type __VLS_Props = {
+    class?: HTMLAttributes['class'];
+    type?: 'image' | 'file' | 'video' | 'audio' | 'contact' | 'location';
+    src?: string;
+    label?: string;
+    dismissable?: boolean;
+    iconFallbackSize?: keyof typeof iconFallbackSizeConfig;
+    invalid?: boolean;
+    invalidMessage?: string | null;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    onClick: () => void;
+    onDismiss: () => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onOnClick?: (() => any) | undefined;
+    onOnDismiss?: (() => any) | undefined;
+}>, {
+    type: "image" | "file" | "video" | "audio" | "contact" | "location";
+    label: string;
+    class: HTMLAttributes["class"];
+    src: string;
+    dismissable: boolean;
+    iconFallbackSize: keyof typeof iconFallbackSizeConfig;
+    invalidMessage: string | null;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,15 @@
+export declare const iconFallbackConfig: {
+    image: string;
+    file: string;
+    video: string;
+    contact: string;
+    audio: string;
+    location: string;
+};
+export declare const iconFallbackSizeConfig: {
+    default: string;
+    xs: string;
+    sm: string;
+    lg: string;
+};
+export declare const findFallbackIcon: (type: keyof typeof iconFallbackConfig) => string;

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

@@ -0,0 +1,15 @@
+export const iconFallbackConfig = {
+  image: "material-symbols:image-outline",
+  file: "material-symbols:description-outline",
+  video: "mdi:videocam-outline",
+  contact: "material-symbols:person-outline",
+  audio: "material-symbols:audio-file-outline",
+  location: "material-symbols:location-on-outline"
+};
+export const iconFallbackSizeConfig = {
+  default: "36px",
+  xs: "20px",
+  sm: "28px",
+  lg: "44px"
+};
+export const findFallbackIcon = (type) => iconFallbackConfig[type];

package/dist/runtime/components/avatar/BaseAvatar.vue

@@ -0,0 +1,41 @@
+<script setup>
+import { sizeConfig, variantConfig, textSizeConfig } from ".";
+const props = defineProps({
+  size: { type: null, required: false, default: "default" },
+  class: { type: null, required: false, default: void 0 },
+  src: { type: String, required: false, default: void 0 },
+  variant: { type: null, required: false, default: "primary" },
+  shape: { type: String, required: false, default: "circle" },
+  alt: { type: String, required: false, default: "profile" },
+  text: { type: String, required: false, default: void 0 }
+});
+</script>
+
+<template>
+  <div
+    :class="
+  cn(
+    'overflow-hidden',
+    shape === 'circle' ? 'rounded-full' : 'rounded-none',
+    variantConfig[props.variant],
+    sizeConfig[size],
+    {
+      'flex-none flex items-center justify-center': props.text
+    },
+    props.class
+  )
+"
+  >
+    <span v-if="props.text" :class="[textSizeConfig[size], 'font-bold']">
+      {{ InitialName(props.text) }}
+    </span>
+    <slot>
+      <img
+        v-if="!props.text"
+        :src="src || '/svg/avatar/avatar-ang-2.svg'"
+        :alt="alt"
+        class="w-full h-full object-fill"
+      />
+    </slot>
+  </div>
+</template>

package/dist/runtime/components/avatar/BaseAvatar.vue.d.ts

@@ -0,0 +1,31 @@
+import type { HTMLAttributes } from 'vue';
+import { sizeConfig, variantConfig } from '.';
+type __VLS_Props = {
+    size?: keyof typeof sizeConfig;
+    class?: HTMLAttributes['class'];
+    src?: string;
+    variant?: keyof typeof variantConfig;
+    shape?: 'circle' | 'square';
+    alt?: string;
+    text?: string;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    text: string;
+    class: HTMLAttributes["class"];
+    size: keyof typeof sizeConfig;
+    src: string;
+    variant: keyof typeof variantConfig;
+    alt: string;
+    shape: "circle" | "square";
+}, {}, {}, {}, 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/avatar/IconAvatar.vue

@@ -0,0 +1,28 @@
+<script setup>
+import { iconSizeConfig, sizeConfig } from ".";
+const props = defineProps({
+  size: { type: null, required: false, default: "default" },
+  class: { type: null, required: false },
+  iconName: { type: String, required: false, default: "mdi:account" },
+  iconColor: { type: String, required: false, default: "text-flux-info" },
+  backgroundColor: { type: String, required: false, default: "bg-infoContainer" },
+  shape: { type: String, required: false, default: "circle" }
+});
+</script>
+
+<template>
+  <div
+    :class="
+  cn(
+    'flex items-center justify-center',
+    shape === 'circle' ? 'rounded-full' : 'rounded-none',
+    backgroundColor,
+    iconColor,
+    sizeConfig[size],
+    props.class
+  )
+"
+  >
+    <Icon :name="iconName" :size="iconSizeConfig[size]" />
+  </div>
+</template>

package/dist/runtime/components/avatar/IconAvatar.vue.d.ts

@@ -0,0 +1,18 @@
+import type { HTMLAttributes } from 'vue';
+import { sizeConfig } from '.';
+type __VLS_Props = {
+    size?: keyof typeof sizeConfig;
+    class?: HTMLAttributes['class'];
+    iconName?: string;
+    iconColor?: string;
+    backgroundColor?: string;
+    shape?: 'circle' | 'square';
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: keyof typeof sizeConfig;
+    iconName: string;
+    shape: "circle" | "square";
+    iconColor: string;
+    backgroundColor: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,27 @@
+export declare const variantConfig: {
+    primary: string;
+    info: string;
+    infoContainer: string;
+    success: string;
+    warning: string;
+    secondary: string;
+    tertiary: string;
+};
+export declare const sizeConfig: {
+    default: string;
+    xs: string;
+    sm: string;
+    lg: string;
+};
+export declare const iconSizeConfig: {
+    default: string;
+    xs: string;
+    sm: string;
+    lg: string;
+};
+export declare const textSizeConfig: {
+    default: string;
+    xs: string;
+    sm: string;
+    lg: string;
+};

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

@@ -0,0 +1,27 @@
+export const variantConfig = {
+  primary: "bg-flux-primary text-on-primary",
+  info: "bg-flux-info text-on-info",
+  infoContainer: "bg-info-container text-flux-info",
+  success: "bg-flux-success text-on-success",
+  warning: "bg-flux-warning text-on-warning",
+  secondary: "bg-flux-secondary text-on-secondary",
+  tertiary: "bg-flux-tertiary text-on-tertiary"
+};
+export const sizeConfig = {
+  default: "h-8 w-8",
+  xs: "h-4 w-4",
+  sm: "h-6 w-6",
+  lg: "h-10 w-10"
+};
+export const iconSizeConfig = {
+  default: "20px",
+  xs: "12px",
+  sm: "16px",
+  lg: "24px"
+};
+export const textSizeConfig = {
+  default: "text-xs",
+  xs: "text-xxs",
+  sm: "text-xs",
+  lg: "text-sm"
+};

package/dist/runtime/components/badge/BaseBadge.vue

@@ -0,0 +1,26 @@
+<script setup>
+import { sizeConfig, variantConfig, textSizeConfig } from ".";
+const props = defineProps({
+  class: { type: null, required: false, default: void 0 },
+  variant: { type: null, required: false, default: "primary" },
+  size: { type: null, required: false, default: "default" },
+  label: { type: String, required: false, default: "" },
+  bgColor: { type: String, required: false, default: void 0 }
+});
+</script>
+
+<template>
+  <div
+    :class="
+  cn(
+    'py-1 px-2 rounded-full inline-flex font-semibold text-center',
+    variantConfig[variant],
+    sizeConfig[size],
+    props.class
+  )
+"
+    :style="{ backgroundColor: bgColor }"
+  >
+    <span :class="cn('text-xs', textSizeConfig[size])" v-html="label"></span>
+  </div>
+</template>

package/dist/runtime/components/badge/BaseBadge.vue.d.ts

@@ -0,0 +1,17 @@
+import type { HTMLAttributes } from 'vue';
+import { sizeConfig, variantConfig } from '.';
+type __VLS_Props = {
+    class?: HTMLAttributes['class'];
+    variant?: keyof typeof variantConfig;
+    size?: keyof typeof sizeConfig;
+    label?: string;
+    bgColor?: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    label: string;
+    class: HTMLAttributes["class"];
+    size: keyof typeof sizeConfig;
+    variant: keyof typeof variantConfig;
+    bgColor: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/badge/IconBadge.vue

@@ -0,0 +1,37 @@
+<script setup>
+import { iconSizeConfig, sizeConfig, variantConfig, textSizeConfig } from ".";
+const props = defineProps({
+  class: { type: null, required: false, default: void 0 },
+  variant: { type: null, required: false, default: "primary" },
+  size: { type: null, required: false, default: "default" },
+  label: { type: String, required: false, default: "" },
+  iconName: { type: String, required: false, default: "mdi:circle" },
+  bgColor: { type: String, required: false, default: void 0 },
+  iconSize: { type: null, required: false, default: void 0 },
+  textClass: { type: null, required: false, default: void 0 }
+});
+</script>
+
+<template>
+  <div
+    :class="
+  cn(
+    'rounded-full flex items-center gap-1',
+    variantConfig[variant],
+    sizeConfig[size],
+    props.class
+  )
+"
+    :style="{ backgroundColor: bgColor }"
+  >
+    <Icon
+      class="flex-none"
+      :name="iconName"
+      :size="iconSizeConfig[iconSize ?? size]"
+    />
+    <span
+      :class="cn('text-xs font-medium', textSizeConfig[size], props.textClass)"
+      >{{ label }}</span
+    >
+  </div>
+</template>

package/dist/runtime/components/badge/IconBadge.vue.d.ts

@@ -0,0 +1,23 @@
+import type { HTMLAttributes } from 'vue';
+import { iconSizeConfig, sizeConfig, variantConfig } from '.';
+type __VLS_Props = {
+    class?: HTMLAttributes['class'];
+    variant?: keyof typeof variantConfig;
+    size?: keyof typeof sizeConfig;
+    label?: string;
+    iconName?: string;
+    bgColor?: string;
+    iconSize?: keyof typeof iconSizeConfig;
+    textClass?: HTMLAttributes['class'];
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    label: string;
+    class: HTMLAttributes["class"];
+    size: keyof typeof sizeConfig;
+    iconName: string;
+    variant: keyof typeof variantConfig;
+    iconSize: keyof typeof iconSizeConfig;
+    bgColor: string;
+    textClass: HTMLAttributes["class"];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,45 @@
+export declare const variantConfig: {
+    primary: string;
+    primaryOutline: string;
+    primaryOutlineActive: string;
+    primaryTransparent: string;
+    info: string;
+    infoContainer: string;
+    infoTransparent: string;
+    infoOutline: string;
+    success: string;
+    successContainer: string;
+    successTransparent: string;
+    successOutline: string;
+    warning: string;
+    warningContainer: string;
+    warningTransparent: string;
+    warningOutline: string;
+    warningYellow: string;
+    warningYellowTransparent: string;
+    warningYellowOutline: string;
+    error: string;
+    errorContainer: string;
+    errorTransparent: string;
+    errorOutline: string;
+    black: string;
+    blackContainer: string;
+    outline: string;
+    secondaryContainer: string;
+    container: string;
+};
+export declare const sizeConfig: {
+    default: string;
+    xs: string;
+    xl: string;
+};
+export declare const iconSizeConfig: {
+    default: string;
+    xs: string;
+    xl: string;
+};
+export declare const textSizeConfig: {
+    default: string;
+    xs: string;
+    xl: string;
+};

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

@@ -0,0 +1,45 @@
+export const variantConfig = {
+  primary: "bg-primaryContainer text-flux-primary",
+  primaryOutline: "border border-flux-primary text-flux-primary",
+  primaryOutlineActive: "text-flux-primary border border-flux-primary bg-surfaceContainer",
+  primaryTransparent: "text-flux-primary",
+  info: "bg-flux-info text-onInfo",
+  infoContainer: "bg-info-container text-flux-info",
+  infoTransparent: "text-flux-info",
+  infoOutline: "border border-flux-info text-flux-info",
+  success: "bg-flux-success text-onSuccess",
+  successContainer: "bg-successContainer text-flux-success",
+  successTransparent: "text-flux-success",
+  successOutline: "border border-flux-success text-flux-success",
+  warning: "bg-flux-warning text-onWarning",
+  warningContainer: "bg-warningContainer text-flux-warning",
+  warningTransparent: "text-flux-warning",
+  warningOutline: "border border-flux-warning text-flux-warning",
+  warningYellow: "bg-flux-warningYellow text-onWarningYellow",
+  warningYellowTransparent: "text-flux-warningYellow",
+  warningYellowOutline: "border border-flux-warningYellow text-flux-warningYellow",
+  error: "bg-flux-error text-onError",
+  errorContainer: "bg-errorContainer text-flux-error",
+  errorTransparent: "text-flux-error",
+  errorOutline: "border border-flux-error text-flux-error",
+  black: "bg-onSurfaceVariant text-surface",
+  blackContainer: "bg-surfaceContainerHigh text-onSurface",
+  outline: "text-flux-outline border border-outlineVariant",
+  secondaryContainer: "bg-secondary-container text-flux-secondary",
+  container: "bg-surface-container text-on-surface"
+};
+export const sizeConfig = {
+  default: "py-1 px-2",
+  xs: "px-1.5 py-0.5",
+  xl: "py-2 px-3.5"
+};
+export const iconSizeConfig = {
+  default: "14px",
+  xs: "12px",
+  xl: "16px"
+};
+export const textSizeConfig = {
+  default: "text-xs",
+  xs: "text-xxs",
+  xl: "text-sm"
+};

package/dist/runtime/components/badge/location.vue

@@ -0,0 +1,18 @@
+<template>
+    <div :class="[
+  'flex items-center font-medium gap-1.5',
+  {
+    'text-flux-error': !valid,
+    'text-flux-success': valid
+  }
+]">
+        <Icon size="22px" :name="valid ? 'material-symbols:location-on-outline' : 'material-symbols:location-off-outline'"/>
+        <span v-text="valid ? 'Sudah Pin Lokasi' : 'Belum Pin Lokasi'"></span>
+    </div>
+</template>
+
+<script setup>
+defineProps({
+  valid: { type: Boolean, required: true }
+});
+</script>

package/dist/runtime/components/badge/location.vue.d.ts

@@ -0,0 +1,5 @@
+type __VLS_Props = {
+    valid: boolean;
+};
+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/button/BaseButton.vue

@@ -0,0 +1,32 @@
+<script setup>
+import { iconSizeConfig, sizeConfig, variantConfig } from ".";
+const props = defineProps({
+  class: { type: null, required: false },
+  variant: { type: null, required: false, default: "primary" },
+  size: { type: null, required: false, default: "default" },
+  label: { type: String, required: false, default: "" },
+  disabled: { type: Boolean, required: false },
+  loading: { type: Boolean, required: false }
+});
+</script>
+
+<template>
+  <button
+    :class="
+  cn(
+    'rounded-full flex justify-center items-center gap-2 text-sm font-semibold disabled:opacity-40 disabled:cursor-not-allowed hover:saturate-150',
+    variantConfig[variant],
+    sizeConfig[size],
+    props.class
+  )
+"
+    :disabled="disabled || loading"
+  >
+    <Icon
+      v-if="loading"
+      name="svg-spinners:ring-resize"
+      :size="iconSizeConfig[size]"
+    />
+    {{ label }}
+  </button>
+</template>

package/dist/runtime/components/button/BaseButton.vue.d.ts

@@ -0,0 +1,16 @@
+import type { HTMLAttributes } from 'vue';
+import { sizeConfig, variantConfig } from '.';
+type __VLS_Props = {
+    class?: HTMLAttributes['class'];
+    variant?: keyof typeof variantConfig;
+    size?: keyof typeof sizeConfig;
+    label?: string;
+    disabled?: boolean;
+    loading?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    label: string;
+    size: keyof typeof sizeConfig;
+    variant: keyof typeof variantConfig;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;