pukaad-ui-lib 1.290.0 → 1.292.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "pukaad-ui-lib",
   "configKey": "pukaadUI",
-  "version": "1.290.0",
+  "version": "1.292.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-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;--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-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}}

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

@@ -1,7 +1,7 @@
 import type { HTMLAttributes } from "vue";
 export type ButtonType = "button" | "submit" | "reset";
 export type ButtonVariant = "default" | "outline" | "ghost" | "link" | "text" | "icon";
-export type ButtonColor = "default" | "primary" | "secondary" | "destructive";
+export type ButtonColor = "default" | "primary" | "secondary" | "destructive" | "info";
 export interface ButtonProps {
     type?: ButtonType;
     class?: HTMLAttributes["class"];

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

@@ -1,7 +1,7 @@
 import type { HTMLAttributes } from "vue";
 export type ButtonType = "button" | "submit" | "reset";
 export type ButtonVariant = "default" | "outline" | "ghost" | "link" | "text" | "icon";
-export type ButtonColor = "default" | "primary" | "secondary" | "destructive";
+export type ButtonColor = "default" | "primary" | "secondary" | "destructive" | "info";
 export interface ButtonProps {
     type?: ButtonType;
     class?: HTMLAttributes["class"];

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

@@ -1,8 +1,16 @@
 <template>
   <div class="flex gap-[16px] items-center">
-    <Image v-if="coverImage" :src="coverImage" width="227" height="128"
-      class="rounded-[4px] flex-shrink-0 object-cover" />
-    <div v-else class="w-[227px] h-[128px] rounded-[4px] flex-shrink-0 bg-cloud flex items-center justify-center">
+    <Image
+      v-if="coverImage"
+      :src="coverImage"
+      width="227"
+      height="128"
+      class="rounded-[4px] flex-shrink-0 object-cover"
+    />
+    <div
+      v-else
+      class="w-[227px] h-[128px] rounded-[4px] flex-shrink-0 bg-cloud flex items-center justify-center"
+    >
       <Icon name="pukaad:map-location-dot" :size="36" class="text-gray" />
     </div>
     <div class="flex flex-col gap-[4px]">
@@ -11,7 +19,11 @@
       </div>
 
       <div class="flex items-center gap-[4px] font-body-medium text-gray">
-        <InputRating :size="10" readonly :model-value="props.item?.rating || 0" />
+        <InputRating
+          :size="10"
+          readonly
+          :model-value="props.item?.rating || 0"
+        />
         <template v-if="props.item?.like_count !== void 0">
           <span>•</span>
           <span>ถูกใจ {{ convertNumber(props.item.like_count) }}</span>
@@ -21,7 +33,10 @@
       <div v-if="placeAddress" class="font-body-medium text-gray">
         {{ placeAddress }}
       </div>
-      <div v-if="props.item?.description" class="font-body-medium text-gray line-clamp-2">
+      <div
+        v-if="props.item?.description"
+        class="font-body-medium text-gray line-clamp-2"
+      >
         {{ props.item.description }}
       </div>
     </div>
@@ -29,13 +44,18 @@
 </template>
 
 <script setup>
+import { computed } from "vue";
 import { useConvert } from "../../composables/useConvert";
 const { convertNumber } = useConvert();
 const props = defineProps({
   item: { type: Object, required: false, default: () => ({}) }
 });
-const coverImage = computed(() => props.item?.cover_image || props.item?.image_cover || "");
-const placeName = computed(() => props.item?.name || props.item?.business_name || "");
+const coverImage = computed(
+  () => props.item?.cover_image || props.item?.image_cover || ""
+);
+const placeName = computed(
+  () => props.item?.name || props.item?.business_name || ""
+);
 const placeAddress = computed(() => {
   if (typeof props.item?.address === "string") return props.item.address;
   return props.item?.full_address || "";

package/dist/runtime/components/input/input-address.d.vue.ts

@@ -49,11 +49,11 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     label: string;
     required: boolean;
     name: string;
-    gap: string;
     placeholder: string;
     labelDetail: string;
     placeholderDetail: string;
     requiredDetail: boolean;
+    gap: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/input/input-address.vue.d.ts

@@ -49,11 +49,11 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     label: string;
     required: boolean;
     name: string;
-    gap: string;
     placeholder: string;
     labelDetail: string;
     placeholderDetail: string;
     requiredDetail: boolean;
+    gap: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/input/input-password.d.vue.ts

@@ -22,8 +22,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
 }>, {
     id: string;
     name: string;
-    disabledForgotPassword: boolean;
     new: boolean;
+    disabledForgotPassword: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/input/input-password.vue.d.ts

@@ -22,8 +22,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
 }>, {
     id: string;
     name: string;
-    disabledForgotPassword: boolean;
     new: boolean;
+    disabledForgotPassword: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/modal/modal-password-confirmed.d.vue.ts

@@ -24,8 +24,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     }) => any) | undefined;
 }>, {
     title: string;
-    confirmText: string;
     disabledForgotPassword: boolean;
+    confirmText: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/modal/modal-password-confirmed.vue.d.ts

@@ -24,8 +24,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     }) => any) | undefined;
 }>, {
     title: string;
-    confirmText: string;
     disabledForgotPassword: boolean;
+    confirmText: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/modal/modal-password-verify.d.vue.ts

@@ -32,8 +32,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
 }>, {
     title: string;
     mode: "login" | "secure";
-    confirmText: string;
     disabledForgotPassword: boolean;
+    confirmText: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/modal/modal-password-verify.vue.d.ts

@@ -32,8 +32,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
 }>, {
     title: string;
     mode: "login" | "secure";
-    confirmText: string;
     disabledForgotPassword: boolean;
+    confirmText: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/ui/button/index.d.ts

@@ -2,7 +2,7 @@ import type { VariantProps } from "class-variance-authority";
 export { default as Button } from "./Button.vue.js";
 export declare const buttonVariants: (props?: ({
     variant?: "link" | "text" | "default" | "outline" | "ghost" | "icon" | null | undefined;
-    color?: "default" | "primary" | "secondary" | "destructive" | null | undefined;
+    color?: "default" | "primary" | "secondary" | "destructive" | "info" | null | undefined;
     size?: "default" | "icon" | "icon-sm" | "icon-xs" | "sm" | "lg" | "icon-lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type ButtonVariants = VariantProps<typeof buttonVariants>;

package/dist/runtime/components/ui/button/index.js

@@ -16,7 +16,8 @@ export const buttonVariants = cva(
         default: "text-foreground",
         primary: "text-primary",
         secondary: "text-secondary ",
-        destructive: "text-destructive"
+        destructive: "text-destructive",
+        info: "text-info-foreground"
       },
       size: {
         default: "h-9 px-4 py-2 has-[>svg]:px-3",
@@ -49,6 +50,11 @@ export const buttonVariants = cva(
         color: "destructive",
         class: "bg-destructive text-destructive-foreground hover:bg-destructive/90"
       },
+      {
+        variant: "default",
+        color: "info",
+        class: "bg-info text-info-foreground hover:bg-info/90"
+      },
       {
         variant: "outline",
         color: "default",
@@ -69,6 +75,11 @@ export const buttonVariants = cva(
         color: "destructive",
         class: "border border-destructive text-destructive hover:text-destructive/90 bg-white"
       },
+      {
+        variant: "outline",
+        color: "info",
+        class: "border border-info-foreground text-info-foreground hover:text-info-foreground/90 bg-white"
+      },
       {
         variant: "ghost",
         color: "default",
@@ -89,6 +100,11 @@ export const buttonVariants = cva(
         color: "destructive",
         class: "text-destructive hover:bg-destructive/90 hover:text-destructive-foreground"
       },
+      {
+        variant: "ghost",
+        color: "info",
+        class: "text-info-foreground hover:bg-info hover:text-info-foreground"
+      },
       {
         variant: "icon",
         color: "default",
@@ -109,6 +125,11 @@ export const buttonVariants = cva(
         color: "destructive",
         class: "text-destructive hover:bg-destructive/90 hover:text-destructive-foreground"
       },
+      {
+        variant: "icon",
+        color: "info",
+        class: "text-info-foreground hover:bg-info hover:text-info-foreground"
+      },
       // text variant - just plain text with color, no background or hover effects
       {
         variant: "text",
@@ -130,6 +151,11 @@ export const buttonVariants = cva(
         color: "destructive",
         class: "text-destructive hover:opacity-80"
       },
+      {
+        variant: "text",
+        color: "info",
+        class: "text-info-foreground hover:opacity-80"
+      },
       // link variant - inline link style, primary blue by default, no padding
       {
         variant: "link",
@@ -150,6 +176,11 @@ export const buttonVariants = cva(
         variant: "link",
         color: "destructive",
         class: "text-destructive hover:opacity-80"
+      },
+      {
+        variant: "link",
+        color: "info",
+        class: "text-info-foreground hover:opacity-80"
       }
     ],
     defaultVariants: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pukaad-ui-lib",
-  "version": "1.290.0",
+  "version": "1.292.0",
   "description": "pukaad-ui for MeMSG",
   "repository": {
     "type": "git",