pukaad-ui-lib 1.379.0 → 1.381.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "pukaad-ui-lib",
   "configKey": "pukaadUI",
-  "version": "1.379.0",
+  "version": "1.381.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/assets/css/core.css

@@ -1 +1 @@
-@import "tailwindcss";@import "tw-animate-css";@import "./system.css";@import "./scroll-bar.css";@custom-variant dark (&:is(.dark *));@theme inline{--radius-sm:calc(var(--radius) - 4px);--radius-md:calc(var(--radius) - 2px);--radius-lg:var(--radius);--radius-xl:calc(var(--radius) + 4px);--color-background:var(--background);--color-foreground:var(--foreground);--color-card:var(--card);--color-card-foreground:var(--card-foreground);--color-popover:var(--popover);--color-popover-foreground:var(--popover-foreground);--color-primary-foreground:var(--primary-foreground);--color-secondary-foreground:var(--secondary-foreground);--color-muted:var(--muted);--color-muted-foreground:var(--muted-foreground);--color-accent:var(--accent);--color-accent-foreground:var(--accent-foreground);--color-destructive:var(--destructive);--color-destructive-foreground:var(--destructive-foreground);--color-border:var(--border);--color-input:var(--input);--color-ring:var(--ring);--color-chart-1:var(--chart-1);--color-chart-2:var(--chart-2);--color-chart-3:var(--chart-3);--color-chart-4:var(--chart-4);--color-chart-5:var(--chart-5);--color-sidebar:var(--sidebar);--color-sidebar-foreground:var(--sidebar-foreground);--color-sidebar-primary:var(--sidebar-primary);--color-sidebar-primary-foreground:var(--sidebar-primary-foreground);--color-sidebar-accent:var(--sidebar-accent);--color-sidebar-accent-foreground:var(--sidebar-accent-foreground);--color-sidebar-border:var(--sidebar-border);--color-sidebar-ring:var(--sidebar-ring);--color-red:var(--red);--color-error:var(--error);--color-success:var(--success);--color-green:var(--green);--color-warning:var(--warning);--color-yellow:var(--yellow);--color-pink:var(--pink);--color-primary:var(--primary);--color-secondary:var(--secondary);--color-info:var(--info);--color-info-foreground:var(--info-foreground);--color-black:var(--black);--color-dark:var(--dark);--color-gray:var(--gray);--color-cloud:var(--cloud);--color-mercury:var(--mercury);--color-green-light:var(--green-light);--color-red-light:var(--red-light);--color-yellow-light:var(--yellow-light);--color-bright:var(--bright);--color-silver:var(--silver);--color-smoke:var(--smoke);--z-index-announce-tool:10;--z-index-navbar:11;--z-index-dropdown:12;--z-index-overlay:13;--z-index-loading:14;--z-index-drawer:15;--z-index-modal:16;--z-index-toast:100;--z-index-loading-page:101}:root{--radius:0.625rem;--red:#b71c1c;--success:#43a047;--green:#1b5e20;--warning:#f9a825;--yellow:#fbc02d;--info:#e3f2fd;--info-foreground:var(--primary);--black:#212121;--dark:#424242;--gray:#616161;--cloud:#c4c4c4;--mercury:#e0e0e0;--green-light:#e3f5e3;--red-light:#fde3e3;--yellow-light:#fef3c7;--bright:#f5f5f5;--silver:#f7f7f7;--smoke:#fafafa;--white:#fff;--pink:#ffe6f4;--background:var(--white);--foreground:var(--black);--card:var(--background);--card-foreground:var(--foreground);--popover:var(--background);--popover-foreground:var(--foreground);--primary:#1976b8;--primary-foreground:var(--white);--secondary:#22a7ef;--secondary-foreground:var(--white);--muted:oklch(0.97 0 0);--muted-foreground:var(--cloud);--accent:oklch(0.97 0 0);--accent-foreground:oklch(0.205 0 0);--destructive:#d32f2f;--destructive-foreground:var(--white);--border:var(--color-mercury);--input:var(--color-mercury);--ring:var(--mercury);--chart-1:oklch(0.646 0.222 41.116);--chart-2:oklch(0.6 0.118 184.704);--chart-3:oklch(0.398 0.07 227.392);--chart-4:oklch(0.828 0.189 84.429);--chart-5:oklch(0.769 0.188 70.08);--sidebar:oklch(0.985 0 0);--sidebar-foreground:var(--foreground);--sidebar-primary:oklch(0.205 0 0);--sidebar-primary-foreground:oklch(0.985 0 0);--sidebar-accent:oklch(0.97 0 0);--sidebar-accent-foreground:oklch(0.205 0 0);--sidebar-border:var(--color-mercury);--sidebar-ring:var(--color-mercury)}.dark{--background:oklch(0.145 0 0);--foreground:oklch(0.985 0 0);--card:oklch(0.145 0 0);--card-foreground:oklch(0.985 0 0);--popover:oklch(0.145 0 0);--popover-foreground:oklch(0.985 0 0);--primary:oklch(0.985 0 0);--primary-foreground:oklch(0.205 0 0);--secondary:oklch(0.269 0 0);--secondary-foreground:oklch(0.985 0 0);--muted:oklch(0.269 0 0);--muted-foreground:oklch(0.708 0 0);--accent:oklch(0.269 0 0);--accent-foreground:oklch(0.985 0 0);--destructive:oklch(0.396 0.141 25.723);--destructive-foreground:oklch(0.637 0.237 25.331);--border:oklch(0.269 0 0);--input:oklch(0.269 0 0);--ring:oklch(0.439 0 0);--chart-1:oklch(0.488 0.243 264.376);--chart-2:oklch(0.696 0.17 162.48);--chart-3:oklch(0.769 0.188 70.08);--chart-4:oklch(0.627 0.265 303.9);--chart-5:oklch(0.645 0.246 16.439);--sidebar:oklch(0.205 0 0);--sidebar-foreground:oklch(0.985 0 0);--sidebar-primary:oklch(0.488 0.243 264.376);--sidebar-primary-foreground:oklch(0.985 0 0);--sidebar-accent:oklch(0.269 0 0);--sidebar-accent-foreground:oklch(0.985 0 0);--sidebar-border:oklch(0.269 0 0);--sidebar-ring:oklch(0.439 0 0)}@layer base{*{@apply border-border outline-ring/50}body{@apply bg-background text-foreground}}
+@import "tailwindcss";@import "tw-animate-css";@import "./system.css";@import "./scroll-bar.css";@custom-variant dark (&:is(.dark *));@theme inline{--radius-sm:calc(var(--radius) - 4px);--radius-md:calc(var(--radius) - 2px);--radius-lg:var(--radius);--radius-xl:calc(var(--radius) + 4px);--color-background:var(--background);--color-foreground:var(--foreground);--color-card:var(--card);--color-card-foreground:var(--card-foreground);--color-popover:var(--popover);--color-popover-foreground:var(--popover-foreground);--color-primary-foreground:var(--primary-foreground);--color-secondary-foreground:var(--secondary-foreground);--color-muted:var(--muted);--color-muted-foreground:var(--muted-foreground);--color-accent:var(--accent);--color-accent-foreground:var(--accent-foreground);--color-destructive:var(--destructive);--color-destructive-foreground:var(--destructive-foreground);--color-border:var(--border);--color-input:var(--input);--color-ring:var(--ring);--color-chart-1:var(--chart-1);--color-chart-2:var(--chart-2);--color-chart-3:var(--chart-3);--color-chart-4:var(--chart-4);--color-chart-5:var(--chart-5);--color-sidebar:var(--sidebar);--color-sidebar-foreground:var(--sidebar-foreground);--color-sidebar-primary:var(--sidebar-primary);--color-sidebar-primary-foreground:var(--sidebar-primary-foreground);--color-sidebar-accent:var(--sidebar-accent);--color-sidebar-accent-foreground:var(--sidebar-accent-foreground);--color-sidebar-border:var(--sidebar-border);--color-sidebar-ring:var(--sidebar-ring);--color-red:var(--red);--color-error:var(--error);--color-success:var(--success);--color-green:var(--green);--color-warning:var(--warning);--color-yellow:var(--yellow);--color-pink:var(--pink);--color-primary:var(--primary);--color-secondary:var(--secondary);--color-info:var(--info);--color-info-foreground:var(--info-foreground);--color-black:var(--black);--color-dark:var(--dark);--color-gray:var(--gray);--color-cloud:var(--cloud);--color-mercury:var(--mercury);--color-green-light:var(--green-light);--color-red-light:var(--red-light);--color-yellow-light:var(--yellow-light);--color-bright:var(--bright);--color-silver:var(--silver);--color-smoke:var(--smoke);--z-index-content:10;--z-index-navbar:11;--z-index-dropdown:12;--z-index-overlay:13;--z-index-loading:14;--z-index-drawer:15;--z-index-modal:16;--z-index-toast:100;--z-index-loading-page:101}:root{--radius:0.625rem;--red:#b71c1c;--success:#43a047;--green:#1b5e20;--warning:#f9a825;--yellow:#fbc02d;--info:#e3f2fd;--info-foreground:var(--primary);--black:#212121;--dark:#424242;--gray:#616161;--cloud:#c4c4c4;--mercury:#e0e0e0;--green-light:#e3f5e3;--red-light:#fde3e3;--yellow-light:#fef3c7;--bright:#f5f5f5;--silver:#f7f7f7;--smoke:#fafafa;--white:#fff;--pink:#ffe6f4;--background:var(--white);--foreground:var(--black);--card:var(--background);--card-foreground:var(--foreground);--popover:var(--background);--popover-foreground:var(--foreground);--primary:#1976b8;--primary-foreground:var(--white);--secondary:#22a7ef;--secondary-foreground:var(--white);--muted:oklch(0.97 0 0);--muted-foreground:var(--cloud);--accent:oklch(0.97 0 0);--accent-foreground:oklch(0.205 0 0);--destructive:#d32f2f;--destructive-foreground:var(--white);--border:var(--color-mercury);--input:var(--color-mercury);--ring:var(--mercury);--chart-1:oklch(0.646 0.222 41.116);--chart-2:oklch(0.6 0.118 184.704);--chart-3:oklch(0.398 0.07 227.392);--chart-4:oklch(0.828 0.189 84.429);--chart-5:oklch(0.769 0.188 70.08);--sidebar:oklch(0.985 0 0);--sidebar-foreground:var(--foreground);--sidebar-primary:oklch(0.205 0 0);--sidebar-primary-foreground:oklch(0.985 0 0);--sidebar-accent:oklch(0.97 0 0);--sidebar-accent-foreground:oklch(0.205 0 0);--sidebar-border:var(--color-mercury);--sidebar-ring:var(--color-mercury)}.dark{--background:oklch(0.145 0 0);--foreground:oklch(0.985 0 0);--card:oklch(0.145 0 0);--card-foreground:oklch(0.985 0 0);--popover:oklch(0.145 0 0);--popover-foreground:oklch(0.985 0 0);--primary:oklch(0.985 0 0);--primary-foreground:oklch(0.205 0 0);--secondary:oklch(0.269 0 0);--secondary-foreground:oklch(0.985 0 0);--muted:oklch(0.269 0 0);--muted-foreground:oklch(0.708 0 0);--accent:oklch(0.269 0 0);--accent-foreground:oklch(0.985 0 0);--destructive:oklch(0.396 0.141 25.723);--destructive-foreground:oklch(0.637 0.237 25.331);--border:oklch(0.269 0 0);--input:oklch(0.269 0 0);--ring:oklch(0.439 0 0);--chart-1:oklch(0.488 0.243 264.376);--chart-2:oklch(0.696 0.17 162.48);--chart-3:oklch(0.769 0.188 70.08);--chart-4:oklch(0.627 0.265 303.9);--chart-5:oklch(0.645 0.246 16.439);--sidebar:oklch(0.205 0 0);--sidebar-foreground:oklch(0.985 0 0);--sidebar-primary:oklch(0.488 0.243 264.376);--sidebar-primary-foreground:oklch(0.985 0 0);--sidebar-accent:oklch(0.269 0 0);--sidebar-accent-foreground:oklch(0.985 0 0);--sidebar-border:oklch(0.269 0 0);--sidebar-ring:oklch(0.439 0 0)}@layer base{*{@apply border-border outline-ring/50}body{@apply bg-background text-foreground}}

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

@@ -1,7 +1,7 @@
 import type { HTMLAttributes } from "vue";
 import type { ButtonVariants } from "./ui/button/index.js";
 export type ButtonType = "button" | "submit" | "reset";
-export type ButtonVariant = "default" | "outline" | "ghost" | "link" | "text" | "icon";
+export type ButtonVariant = "default" | "outline" | "ghost" | "link" | "text" | "icon" | "glass";
 export type ButtonColor = "default" | "primary" | "secondary" | "destructive" | "info" | "warning" | "success";
 export type ButtonSize = ButtonVariants["size"];
 export interface ButtonProps {

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

@@ -1,7 +1,7 @@
 import type { HTMLAttributes } from "vue";
 import type { ButtonVariants } from "./ui/button/index.js";
 export type ButtonType = "button" | "submit" | "reset";
-export type ButtonVariant = "default" | "outline" | "ghost" | "link" | "text" | "icon";
+export type ButtonVariant = "default" | "outline" | "ghost" | "link" | "text" | "icon" | "glass";
 export type ButtonColor = "default" | "primary" | "secondary" | "destructive" | "info" | "warning" | "success";
 export type ButtonSize = ButtonVariants["size"];
 export interface ButtonProps {

package/dist/runtime/components/card/card-content/card-content-image.d.vue.ts

@@ -0,0 +1,7 @@
+import type { CardContentItem } from "#pukaad-ui/types/components/card/card-content";
+type __VLS_Props = {
+    item: CardContentItem;
+};
+declare const __VLS_export: 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: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/card/card-content/card-content-image.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="absolute inset-0 overflow-hidden rounded-[4px] bg-white">
+    <Image
+      :src="props.item.image"
+      :width="194"
+      :height="132"
+      fit="cover"
+      class="rounded-t-[4px]"
+    />
+
+    <p
+      class="absolute left-[8px] top-[140px] line-clamp-7 h-[168px] w-[178px] overflow-hidden break-words font-title-small-prominent text-black"
+    >
+      {{ props.item.content }}
+    </p>
+
+    <div
+      class="absolute left-[8px] top-[321px] w-[178px] truncate font-body-small text-gray"
+    >
+      {{ props.item.location }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  item: { type: Object, required: true }
+});
+</script>

package/dist/runtime/components/card/card-content/card-content-image.vue.d.ts

@@ -0,0 +1,7 @@
+import type { CardContentItem } from "#pukaad-ui/types/components/card/card-content";
+type __VLS_Props = {
+    item: CardContentItem;
+};
+declare const __VLS_export: 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: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/card/card-content/card-content-menu.d.vue.ts

@@ -0,0 +1,18 @@
+import type { CardContentMenuState } from "#pukaad-ui/types/components/card/card-content";
+type __VLS_Props = {
+    state?: CardContentMenuState;
+    isPinned?: boolean;
+    isBookmarked?: boolean;
+    isShow?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    action: (name: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onAction?: ((name: string) => any) | undefined;
+}>, {
+    isPinned: boolean;
+    isBookmarked: boolean;
+    isShow: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/card/card-content/card-content-menu.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="flex flex-col items-start gap-[8px]">
+    <Button
+      v-for="action in visibleActions"
+      :key="action.name"
+      :variant="action.variant ?? (action.isActive ? 'default' : 'glass')"
+      size="icon"
+      :color="action.color ?? 'primary'"
+      class="h-[40px] w-[40px] rounded-full"
+      @click.stop="emit('action', action.name)"
+    >
+      <Icon :name="action.icon" :size="20" />
+    </Button>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  state: { type: String, required: false },
+  isPinned: { type: Boolean, required: false, default: false },
+  isBookmarked: { type: Boolean, required: false, default: false },
+  isShow: { type: Boolean, required: false, default: false }
+});
+const emit = defineEmits(["action"]);
+const actions = computed(() => {
+  if (props.state === "my-content") {
+    return [
+      { name: "pin", icon: "lucide:pin", isActive: props.isPinned },
+      { name: "preview", icon: "lucide:tv-minimal-play" },
+      {
+        name: "delete",
+        icon: "lucide:trash-2",
+        variant: "default",
+        color: "destructive"
+      }
+    ];
+  }
+  if (props.state === "content") {
+    return [
+      { name: "bookmark", icon: "lucide:bookmark", isActive: props.isBookmarked },
+      { name: "preview", icon: "lucide:tv-minimal-play" }
+    ];
+  }
+  return [];
+});
+const visibleActions = computed(
+  () => actions.value.filter((action) => action.isActive || props.isShow)
+);
+</script>

package/dist/runtime/components/card/card-content/card-content-menu.vue.d.ts

@@ -0,0 +1,18 @@
+import type { CardContentMenuState } from "#pukaad-ui/types/components/card/card-content";
+type __VLS_Props = {
+    state?: CardContentMenuState;
+    isPinned?: boolean;
+    isBookmarked?: boolean;
+    isShow?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    action: (name: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onAction?: ((name: string) => any) | undefined;
+}>, {
+    isPinned: boolean;
+    isBookmarked: boolean;
+    isShow: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/card/card-content/card-content-post-it.d.vue.ts

@@ -0,0 +1,7 @@
+import type { CardContentItem } from "#pukaad-ui/types/components/card/card-content";
+type __VLS_Props = {
+    item: CardContentItem;
+};
+declare const __VLS_export: 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: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/card/card-content/card-content-post-it.vue

@@ -0,0 +1,29 @@
+<template>
+  <div
+    class="absolute inset-0 rounded-[4px]"
+    :style="{ backgroundColor: props.item.backgroundColor }"
+  >
+    <!-- กล่องข้อความกลางการ์ด (จัดกลางแนวตั้ง) -->
+    <div
+      class="absolute left-[8px] top-[64.5px] flex h-[216px] w-[178px] items-center overflow-hidden"
+    >
+      <p
+        class="line-clamp-9 w-full break-words text-center font-title-small-prominent text-black"
+      >
+        {{ props.item.content }}
+      </p>
+    </div>
+
+    <div
+      class="absolute left-[8px] top-[321px] w-[178px] truncate font-body-small text-gray"
+    >
+      {{ props.item.location }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  item: { type: Object, required: true }
+});
+</script>

package/dist/runtime/components/card/card-content/card-content-post-it.vue.d.ts

@@ -0,0 +1,7 @@
+import type { CardContentItem } from "#pukaad-ui/types/components/card/card-content";
+type __VLS_Props = {
+    item: CardContentItem;
+};
+declare const __VLS_export: 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: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/card/card-content/card-content-select.d.vue.ts

@@ -0,0 +1,10 @@
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/card/card-content/card-content-select.vue

@@ -0,0 +1,15 @@
+<template>
+  <!-- ติ๊กแล้ว = พื้น dark ไม่มีขอบ / ยังไม่ติ๊ก = พื้นขาว + ขอบเทา 2px (ตาม Figma) -->
+  <ShadCheckbox
+    v-model="modelValue"
+    aria-label="เลือกการ์ดนี้"
+    class="size-[32px] cursor-pointer rounded-full border-2 border-gray bg-white shadow-none transition-colors hover:bg-bright data-[state=checked]:border-dark data-[state=checked]:bg-dark data-[state=checked]:text-white data-[state=checked]:hover:bg-dark"
+    @click.stop
+  >
+    <Icon name="lucide:check" :size="20" />
+  </ShadCheckbox>
+</template>
+
+<script setup>
+const modelValue = defineModel({ type: Boolean, ...{ default: false } });
+</script>

package/dist/runtime/components/card/card-content/card-content-select.vue.d.ts

@@ -0,0 +1,10 @@
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/card/card-content/card-content-time.d.vue.ts

@@ -0,0 +1,7 @@
+import type { CardContentItem } from "#pukaad-ui/types/components/card/card-content";
+type __VLS_Props = {
+    item: CardContentItem;
+};
+declare const __VLS_export: 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: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/card/card-content/card-content-time.vue

@@ -0,0 +1,48 @@
+<template>
+  <div
+    v-if="timeState.text"
+    class="inline-flex items-center rounded-[4px] p-[4px] font-body-small text-white backdrop-blur-[4px]"
+    :class="timeState.color"
+  >
+    {{ timeState.text }}
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { useNow } from "@vueuse/core";
+import dayjs from "#pukaad-ui/runtime/utils/dayjs";
+import { useConvert } from "#pukaad-ui/runtime/composables/useConvert";
+const props = defineProps({
+  item: { type: Object, required: true }
+});
+const now = useNow({ interval: 1e3 });
+const { convertDate } = useConvert();
+const pad = (n) => String(n).padStart(2, "0");
+const timeState = computed(() => {
+  const { expireAt } = props.item;
+  if (!expireAt) return { text: "", color: "" };
+  const target = dayjs(expireAt);
+  if (!target.isValid()) return { text: "", color: "" };
+  const diffMs = target.diff(now.value);
+  if (diffMs <= 0) {
+    return {
+      text: `\u0E2B\u0E21\u0E14\u0E2D\u0E32\u0E22\u0E38 ${convertDate(expireAt, "D/M/BBBB")}`,
+      color: "bg-black/50"
+    };
+  }
+  if (target.diff(now.value, "hour", true) <= 24) {
+    const dur = dayjs.duration(diffMs);
+    const hh = pad(Math.floor(dur.asHours()));
+    return {
+      text: `${hh} : ${pad(dur.minutes())} : ${pad(dur.seconds())}`,
+      color: "bg-destructive"
+    };
+  }
+  const diffDays = Math.ceil(target.diff(now.value, "day", true));
+  return {
+    text: `\u0E40\u0E2B\u0E25\u0E37\u0E2D ${diffDays} \u0E27\u0E31\u0E19`,
+    color: diffDays < 7 ? "bg-warning" : "bg-success"
+  };
+});
+</script>

package/dist/runtime/components/card/card-content/card-content-time.vue.d.ts

@@ -0,0 +1,7 @@
+import type { CardContentItem } from "#pukaad-ui/types/components/card/card-content";
+type __VLS_Props = {
+    item: CardContentItem;
+};
+declare const __VLS_export: 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: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/card/card-content/card-content-video.d.vue.ts

@@ -0,0 +1,7 @@
+import type { CardContentItem } from "#pukaad-ui/types/components/card/card-content";
+type __VLS_Props = {
+    item: CardContentItem;
+};
+declare const __VLS_export: 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: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/card/card-content/card-content-video.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="absolute inset-0 overflow-hidden rounded-[4px] bg-black">
+    <Video
+      :src="props.item.video?.src ?? ''"
+      :poster="props.item.video?.poster"
+      :width="194"
+      :height="345"
+      fit="cover"
+      :controls="false"
+      hover-play
+      muted
+      loop
+      preload="none"
+    />
+
+    <div
+      class="absolute inset-x-0 bottom-0 flex h-[84px] flex-col justify-between bg-gradient-to-t from-black/70 to-transparent p-[8px]"
+    >
+      <p class="line-clamp-2 break-words font-title-small-prominent text-white">
+        {{ props.item.title }}
+      </p>
+      <div class="truncate font-body-small text-white">
+        {{ props.item.location }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  item: { type: Object, required: true }
+});
+</script>

package/dist/runtime/components/card/card-content/card-content-video.vue.d.ts

@@ -0,0 +1,7 @@
+import type { CardContentItem } from "#pukaad-ui/types/components/card/card-content";
+type __VLS_Props = {
+    item: CardContentItem;
+};
+declare const __VLS_export: 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: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/card/card-content/card-content.d.vue.ts

@@ -0,0 +1,21 @@
+import type { CardContentItem, CardContentProps } from "#pukaad-ui/types/components/card/card-content";
+export type { CardContentItem, CardContentMenuState, CardContentType, } from "#pukaad-ui/types/components/card/card-content";
+type __VLS_Props = CardContentProps;
+type __VLS_ModelProps = {
+    "selected"?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:selected": (value: boolean) => any;
+} & {
+    click: (item: CardContentItem) => any;
+    action: (name: string, item: CardContentItem) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onClick?: ((item: CardContentItem) => any) | undefined;
+    "onUpdate:selected"?: ((value: boolean) => any) | undefined;
+    onAction?: ((name: string, item: CardContentItem) => any) | undefined;
+}>, {
+    selectable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/card/card-content/card-content.vue

@@ -0,0 +1,75 @@
+<template>
+  <!--
+    ขอบใช้ outline ไม่ใช่ border
+    เพราะการ์ด fix 194x345 + overflow-hidden ถ้าใช้ border ตอน selectable ขอบ 1px→2px
+    จะกินเข้าใน คอนเทนต์ขยับ 1px — outline วาดนอกกล่อง ขนาดในคงที่ทุกสถานะ
+    selectable/selected = ขอบเทา 2px / ปกติ = silver 1px
+  -->
+  <div
+    :class="[
+  'relative h-[345px] w-[194px] cursor-pointer overflow-hidden rounded-[4px] bg-white outline outline-offset-0',
+  props.selectable || selected ? 'outline-2 outline-gray' : 'outline-1 outline-silver'
+]"
+    @mouseenter="hovering = true"
+    @mouseleave="hovering = false"
+    @click="handleClick"
+  >
+    <component :is="bodyComponent" v-if="bodyComponent" :item="props.item" />
+
+    <div v-if="showTime" class="absolute left-[8px] top-[8px] z-content">
+      <CardContentTime :item="props.item" />
+    </div>
+
+    <div v-if="hasMenu" class="absolute left-[146px] top-[8px] z-content">
+      <CardContentMenu
+        :state="props.state"
+        :is-pinned="!!props.item.pinned"
+        :is-bookmarked="!!props.item.bookmarked"
+        :is-show="hovering"
+        @action="onMenuAction"
+      />
+    </div>
+
+    <div
+      v-if="props.selectable"
+      class="absolute bottom-[8px] right-[8px] z-content"
+    >
+      <CardContentSelect v-model="selected" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref } from "vue";
+import CardContentPostIt from "./card-content-post-it.vue";
+import CardContentImage from "./card-content-image.vue";
+import CardContentVideo from "./card-content-video.vue";
+import CardContentTime from "./card-content-time.vue";
+import CardContentMenu from "./card-content-menu.vue";
+import CardContentSelect from "./card-content-select.vue";
+const props = defineProps({
+  item: { type: Object, required: true },
+  state: { type: String, required: false },
+  selectable: { type: Boolean, required: false, default: false }
+});
+const emit = defineEmits(["click", "action"]);
+const selected = defineModel("selected", { type: Boolean, ...{ default: false } });
+const handleClick = () => {
+  if (props.selectable) {
+    selected.value = !selected.value;
+  }
+  emit("click", props.item);
+};
+const hovering = ref(false);
+const BODY = {
+  postIt: CardContentPostIt,
+  image: CardContentImage,
+  video: CardContentVideo
+};
+const bodyComponent = computed(() => BODY[props.item.type]);
+const showTime = computed(() => !!props.item.expireAt);
+const hasMenu = computed(() => !props.selectable && !!props.state);
+const onMenuAction = (name) => {
+  emit("action", name, props.item);
+};
+</script>

package/dist/runtime/components/card/card-content/card-content.vue.d.ts

@@ -0,0 +1,21 @@
+import type { CardContentItem, CardContentProps } from "#pukaad-ui/types/components/card/card-content";
+export type { CardContentItem, CardContentMenuState, CardContentType, } from "#pukaad-ui/types/components/card/card-content";
+type __VLS_Props = CardContentProps;
+type __VLS_ModelProps = {
+    "selected"?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:selected": (value: boolean) => any;
+} & {
+    click: (item: CardContentItem) => any;
+    action: (name: string, item: CardContentItem) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onClick?: ((item: CardContentItem) => any) | undefined;
+    "onUpdate:selected"?: ((value: boolean) => any) | undefined;
+    onAction?: ((name: string, item: CardContentItem) => any) | undefined;
+}>, {
+    selectable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/card/{card-place-item.vue → card-place/card-place-item.vue}

@@ -57,7 +57,7 @@
 <script setup>
 import { ref } from "vue";
 import { useRouter } from "vue-router";
-import { useApi } from "../../composables/useApi";
+import { useApi } from "../../../composables/useApi";
 const modelValue = defineModel({ type: Object, ...{ default: () => ({}) } });
 const router = useRouter();
 const api = useApi();

package/dist/runtime/components/card/{card-place.vue → card-place/card-place.vue}

@@ -45,7 +45,7 @@
 
 <script setup>
 import { computed } from "vue";
-import { useConvert } from "../../composables/useConvert";
+import { useConvert } from "../../../composables/useConvert";
 const { convertNumber } = useConvert();
 const props = defineProps({
   item: { type: Object, required: false, default: () => ({}) }

package/dist/runtime/components/card/card-reaction.d.vue.ts

@@ -24,14 +24,14 @@ type __VLS_Props = {
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     disabled: boolean;
     id: string;
-    disabledPadding: boolean;
-    state: string;
     itemCount: Count;
     itemActive: Reacted;
     padding: string | number;
+    disabledPadding: boolean;
     disabledDividerTop: boolean;
     disabledDividerBottom: boolean;
     iconSize: number | string;
+    state: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/card/card-reaction.vue.d.ts

@@ -24,14 +24,14 @@ type __VLS_Props = {
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     disabled: boolean;
     id: string;
-    disabledPadding: boolean;
-    state: string;
     itemCount: Count;
     itemActive: Reacted;
     padding: string | number;
+    disabledPadding: boolean;
     disabledDividerTop: boolean;
     disabledDividerBottom: boolean;
     iconSize: number | string;
+    state: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/card/{card-user-blog.vue → card-user/card-user-blog.vue}

@@ -90,7 +90,7 @@ import { useRouter } from "vue-router";
 import { ref, watch } from "vue";
 import { useNuxtApp } from "nuxt/app";
 import { useConvert } from "#pukaad-ui/runtime/composables/useConvert";
-import { useApi } from "../../composables/useApi";
+import { useApi } from "../../../composables/useApi";
 const { convertNumber, convertDateTorelativeText } = useConvert();
 const { $toast, $alert } = useNuxtApp();
 const api = useApi();

package/dist/runtime/components/card/{card-user-item.vue → card-user/card-user-item.vue}

@@ -28,7 +28,7 @@
 <script setup>
 import { ref } from "vue";
 import { useRouter } from "vue-router";
-import { useApi } from "../../composables/useApi";
+import { useApi } from "../../../composables/useApi";
 const modelValue = defineModel({ type: Object, ...{
   default: () => ({})
 } });