pukaad-ui-lib 1.435.0 → 1.437.0

package/dist/runtime/components/timeline.vue

@@ -1,60 +1,60 @@
 <template>
-  <div class="flex flex-col w-full">
-    <div
-      v-for="(item, index) in props.items"
-      :key="item.id ?? index"
-      class="flex gap-[8px] w-full"
-    >
-      <!-- dot + connecting line (โครงของ component เอง) -->
-      <div class="flex flex-col items-center w-[8px]">
-        <div class="w-[20px] h-[26px] flex items-center justify-center">
-          <div class="w-[10px] h-[10px] rounded-full bg-black shrink-0" />
-        </div>
-        <div class="w-[2px] flex-1 bg-bright" />
-      </div>
-
-      <!-- เนื้อหา — ปล่อยให้ผู้ใช้ครอบเองผ่าน slot ได้ ถ้าไม่ส่งมาใช้ default นี้ -->
-      <div
-        class="flex flex-col gap-[8px] flex-1 min-w-0"
-        :class="index < props.items.length - 1 ? 'pb-[16px]' : ''"
-      >
-        <slot name="content" :item="item" :index="index">
-          <div class="flex gap-[8px] w-full">
-            <Avatar :src="item.avatar" :alt="item.name" :size="30" />
-            <div class="flex flex-col gap-[8px] flex-1 min-w-0">
-              <div class="flex flex-col gap-[4px]">
-                <span class="font-body-large text-gray">{{ item.name }}</span>
-                <span
-                  v-if="item.time"
-                  class="font-body-small text-gray"
-                >
-                  {{ convertDateTime(item.time) }} น.
-                </span>
-              </div>
-              <slot name="description" :item="item" :index="index">
-                <CardOpeningHours
+  <div class="flex flex-col w-full">
+    <div
+      v-for="(item, index) in props.items"
+      :key="item.id ?? index"
+      class="flex gap-[8px] w-full"
+    >
+      <!-- dot + connecting line (โครงของ component เอง) -->
+      <div class="flex flex-col items-center w-[8px]">
+        <div class="w-[20px] h-[26px] flex items-center justify-center">
+          <div class="w-[10px] h-[10px] rounded-full bg-black shrink-0" />
+        </div>
+        <div class="w-[2px] flex-1 bg-bright" />
+      </div>
+
+      <!-- เนื้อหา — ปล่อยให้ผู้ใช้ครอบเองผ่าน slot ได้ ถ้าไม่ส่งมาใช้ default นี้ -->
+      <div
+        class="flex flex-col gap-[8px] flex-1 min-w-0"
+        :class="index < props.items.length - 1 ? 'pb-[16px]' : ''"
+      >
+        <slot name="content" :item="item" :index="index">
+          <div class="flex gap-[8px] w-full">
+            <Avatar :src="item.avatar" :alt="item.name" :size="30" />
+            <div class="flex flex-col gap-[8px] flex-1 min-w-0">
+              <div class="flex flex-col gap-[4px]">
+                <span class="font-body-large text-gray">{{ item.name }}</span>
+                <span
+                  v-if="item.time"
+                  class="font-body-small text-gray"
+                >
+                  {{ convertDateTime(item.time) }} น.
+                </span>
+              </div>
+              <slot name="description" :item="item" :index="index">
+                <CardOpeningHours
                   v-if="
   item.opening_hours || item.suggested_hours || item.hours
-"
+"
                   :items="
   item.opening_hours || item.suggested_hours || item.hours
-"
+"
                   :special-days="
   item.special_days || item.suggested_special_days
-"
-                  :open-status="item.open_status"
-                  class="text-gray w-full"
-                />
-                <p v-else class="font-body-large text-gray">
-                  {{ item.description }}
-                </p>
-              </slot>
-            </div>
-          </div>
-        </slot>
-      </div>
-    </div>
-  </div>
+"
+                  :open-status="item.open_status"
+                  class="text-gray w-full"
+                />
+                <p v-else class="font-body-large text-gray">
+                  {{ item.description }}
+                </p>
+              </slot>
+            </div>
+          </div>
+        </slot>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>

package/dist/runtime/components/tooltip.vue

@@ -1,16 +1,16 @@
 <template>
-  <ShadTooltipProvider :delay-duration="props.delay">
-    <ShadTooltip>
-      <ShadTooltipTrigger as-child>
-        <slot />
-      </ShadTooltipTrigger>
-      <ShadTooltipContent :side="props.position" :class="props.class">
-        <slot name="text">
-          <p>{{ props.text }}</p>
-        </slot>
-      </ShadTooltipContent>
-    </ShadTooltip>
-  </ShadTooltipProvider>
+  <ShadTooltipProvider :delay-duration="props.delay">
+    <ShadTooltip>
+      <ShadTooltipTrigger as-child>
+        <slot />
+      </ShadTooltipTrigger>
+      <ShadTooltipContent :side="props.position" :class="props.class">
+        <slot name="text">
+          <p>{{ props.text }}</p>
+        </slot>
+      </ShadTooltipContent>
+    </ShadTooltip>
+  </ShadTooltipProvider>
 </template>
 
 <script setup>

package/dist/runtime/components/ui/accordion/Accordion.vue

@@ -20,7 +20,7 @@ const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
-  <AccordionRoot v-slot="slotProps" data-slot="accordion" v-bind="forwarded">
-    <slot v-bind="slotProps" />
-  </AccordionRoot>
+  <AccordionRoot v-slot="slotProps" data-slot="accordion" v-bind="forwarded">
+    <slot v-bind="slotProps" />
+  </AccordionRoot>
 </template>

package/dist/runtime/components/ui/accordion/AccordionContent.vue

@@ -12,13 +12,13 @@ const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>
-  <AccordionContent
-    data-slot="accordion-content"
-    v-bind="delegatedProps"
-    class="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
-  >
-    <div :class="cn('pt-0 pb-4', props.class)">
-      <slot />
-    </div>
-  </AccordionContent>
+  <AccordionContent
+    data-slot="accordion-content"
+    v-bind="delegatedProps"
+    class="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+  >
+    <div :class="cn('pt-0 pb-4', props.class)">
+      <slot />
+    </div>
+  </AccordionContent>
 </template>

package/dist/runtime/components/ui/accordion/AccordionItem.vue

@@ -15,12 +15,12 @@ const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-  <AccordionItem
-    v-slot="slotProps"
-    data-slot="accordion-item"
-    v-bind="forwardedProps"
-    :class="cn('border-b ', props.class)"
-  >
-    <slot v-bind="slotProps" />
-  </AccordionItem>
+  <AccordionItem
+    v-slot="slotProps"
+    data-slot="accordion-item"
+    v-bind="forwardedProps"
+    :class="cn('border-b ', props.class)"
+  >
+    <slot v-bind="slotProps" />
+  </AccordionItem>
 </template>

package/dist/runtime/components/ui/accordion/AccordionTrigger.vue

@@ -11,25 +11,25 @@ const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>
-  <AccordionHeader class="flex">
-    <AccordionTrigger
-      data-slot="accordion-trigger"
-      v-bind="delegatedProps"
+  <AccordionHeader class="flex">
+    <AccordionTrigger
+      data-slot="accordion-trigger"
+      v-bind="delegatedProps"
       :class="
   cn(
     'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180',
     props.class
   )
-"
-    >
-      <slot />
-      <slot name="icon">
-        <Icon
-          name="lucide:chevron-down"
-          class="text-gray pointer-events-none shrink-0 translate-y-0.5 transition-transform duration-200"
-          :size="24"
-        />
-      </slot>
-    </AccordionTrigger>
-  </AccordionHeader>
+"
+    >
+      <slot />
+      <slot name="icon">
+        <Icon
+          name="lucide:chevron-down"
+          class="text-gray pointer-events-none shrink-0 translate-y-0.5 transition-transform duration-200"
+          :size="24"
+        />
+      </slot>
+    </AccordionTrigger>
+  </AccordionHeader>
 </template>

package/dist/runtime/components/ui/alert/Alert.vue

@@ -8,11 +8,11 @@ const props = defineProps({
 </script>
 
 <template>
-  <div
-    data-slot="alert"
-    :class="cn(alertVariants({ variant }), props.class)"
-    role="alert"
-  >
-    <slot />
-  </div>
+  <div
+    data-slot="alert"
+    :class="cn(alertVariants({ variant }), props.class)"
+    role="alert"
+  >
+    <slot />
+  </div>
 </template>

package/dist/runtime/components/ui/alert/AlertDescription.vue

@@ -6,10 +6,10 @@ const props = defineProps({
 </script>
 
 <template>
-  <div
-    data-slot="alert-description"
-    :class="cn('text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed', props.class)"
-  >
-    <slot />
-  </div>
+  <div
+    data-slot="alert-description"
+    :class="cn('text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed', props.class)"
+  >
+    <slot />
+  </div>
 </template>

package/dist/runtime/components/ui/alert/AlertTitle.vue

@@ -6,10 +6,10 @@ const props = defineProps({
 </script>
 
 <template>
-  <div
-    data-slot="alert-title"
-    :class="cn('col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight', props.class)"
-  >
-    <slot />
-  </div>
+  <div
+    data-slot="alert-title"
+    :class="cn('col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight', props.class)"
+  >
+    <slot />
+  </div>
 </template>

package/dist/runtime/components/ui/alert-dialog/AlertDialog.vue

@@ -9,7 +9,7 @@ const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
-  <AlertDialogRoot v-slot="slotProps" data-slot="alert-dialog" v-bind="forwarded">
-    <slot v-bind="slotProps" />
-  </AlertDialogRoot>
+  <AlertDialogRoot v-slot="slotProps" data-slot="alert-dialog" v-bind="forwarded">
+    <slot v-bind="slotProps" />
+  </AlertDialogRoot>
 </template>

package/dist/runtime/components/ui/alert-dialog/AlertDialogAction.vue

@@ -12,7 +12,7 @@ const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>
-  <AlertDialogAction v-bind="delegatedProps" :class="cn(buttonVariants(), props.class)">
-    <slot />
-  </AlertDialogAction>
+  <AlertDialogAction v-bind="delegatedProps" :class="cn(buttonVariants(), props.class)">
+    <slot />
+  </AlertDialogAction>
 </template>

package/dist/runtime/components/ui/alert-dialog/AlertDialogCancel.vue

@@ -12,14 +12,14 @@ const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>
-  <AlertDialogCancel
-    v-bind="delegatedProps"
+  <AlertDialogCancel
+    v-bind="delegatedProps"
     :class="cn(
   buttonVariants({ variant: 'outline' }),
   'mt-2 sm:mt-0',
   props.class
-)"
-  >
-    <slot />
-  </AlertDialogCancel>
+)"
+  >
+    <slot />
+  </AlertDialogCancel>
 </template>

package/dist/runtime/components/ui/alert-dialog/AlertDialogContent.vue

@@ -23,22 +23,22 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-  <AlertDialogPortal>
-    <AlertDialogOverlay
-      data-slot="alert-dialog-overlay"
-      class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80"
-    />
-    <AlertDialogContent
-      data-slot="alert-dialog-content"
-      v-bind="{ ...$attrs, ...forwarded }"
+  <AlertDialogPortal>
+    <AlertDialogOverlay
+      data-slot="alert-dialog-overlay"
+      class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80"
+    />
+    <AlertDialogContent
+      data-slot="alert-dialog-content"
+      v-bind="{ ...$attrs, ...forwarded }"
       :class="
   cn(
     'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
     props.class
   )
-"
-    >
-      <slot />
-    </AlertDialogContent>
-  </AlertDialogPortal>
+"
+    >
+      <slot />
+    </AlertDialogContent>
+  </AlertDialogPortal>
 </template>

package/dist/runtime/components/ui/alert-dialog/AlertDialogDescription.vue

@@ -11,11 +11,11 @@ const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>
-  <AlertDialogDescription
-    data-slot="alert-dialog-description"
-    v-bind="delegatedProps"
-    :class="cn('font-body-medium text-gray', props.class)"
-  >
-    <slot />
-  </AlertDialogDescription>
+  <AlertDialogDescription
+    data-slot="alert-dialog-description"
+    v-bind="delegatedProps"
+    :class="cn('font-body-medium text-gray', props.class)"
+  >
+    <slot />
+  </AlertDialogDescription>
 </template>

package/dist/runtime/components/ui/alert-dialog/AlertDialogFooter.vue

@@ -6,15 +6,15 @@ const props = defineProps({
 </script>
 
 <template>
-  <div
-    data-slot="alert-dialog-footer"
+  <div
+    data-slot="alert-dialog-footer"
     :class="
   cn(
     'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
     props.class
   )
-"
-  >
-    <slot />
-  </div>
+"
+  >
+    <slot />
+  </div>
 </template>

package/dist/runtime/components/ui/alert-dialog/AlertDialogHeader.vue

@@ -6,10 +6,10 @@ const props = defineProps({
 </script>
 
 <template>
-  <div
-    data-slot="alert-dialog-header"
-    :class="cn('flex flex-col gap-2 text-center sm:text-left', props.class)"
-  >
-    <slot />
-  </div>
+  <div
+    data-slot="alert-dialog-header"
+    :class="cn('flex flex-col gap-2 text-center sm:text-left', props.class)"
+  >
+    <slot />
+  </div>
 </template>

package/dist/runtime/components/ui/alert-dialog/AlertDialogTitle.vue

@@ -11,11 +11,11 @@ const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>
-  <AlertDialogTitle
-    data-slot="alert-dialog-title"
-    v-bind="delegatedProps"
-    :class="cn('font-body-large-prominent', props.class)"
-  >
-    <slot />
-  </AlertDialogTitle>
+  <AlertDialogTitle
+    data-slot="alert-dialog-title"
+    v-bind="delegatedProps"
+    :class="cn('font-body-large-prominent', props.class)"
+  >
+    <slot />
+  </AlertDialogTitle>
 </template>

package/dist/runtime/components/ui/alert-dialog/AlertDialogTrigger.vue

@@ -7,7 +7,7 @@ const props = defineProps({
 </script>
 
 <template>
-  <AlertDialogTrigger data-slot="alert-dialog-trigger" v-bind="props">
-    <slot />
-  </AlertDialogTrigger>
+  <AlertDialogTrigger data-slot="alert-dialog-trigger" v-bind="props">
+    <slot />
+  </AlertDialogTrigger>
 </template>

package/dist/runtime/components/ui/avatar/Avatar.vue

@@ -7,10 +7,10 @@ const props = defineProps({
 </script>
 
 <template>
-  <AvatarRoot
-    data-slot="avatar"
-    :class="cn('relative flex size-8 shrink-0 overflow-hidden rounded-full', props.class)"
-  >
-    <slot />
-  </AvatarRoot>
+  <AvatarRoot
+    data-slot="avatar"
+    :class="cn('relative flex size-8 shrink-0 overflow-hidden rounded-full', props.class)"
+  >
+    <slot />
+  </AvatarRoot>
 </template>

package/dist/runtime/components/ui/avatar/AvatarFallback.vue

@@ -12,16 +12,16 @@ const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>
-  <AvatarFallback
-    data-slot="avatar-fallback"
-    v-bind="delegatedProps"
+  <AvatarFallback
+    data-slot="avatar-fallback"
+    v-bind="delegatedProps"
     :class="
   cn(
     'bg-muted flex size-full items-center justify-center rounded-full',
     props.class
   )
-"
-  >
-    <slot />
-  </AvatarFallback>
+"
+  >
+    <slot />
+  </AvatarFallback>
 </template>

package/dist/runtime/components/ui/avatar/AvatarImage.vue

@@ -10,11 +10,11 @@ const props = defineProps({
 </script>
 
 <template>
-  <AvatarImage
-    data-slot="avatar-image"
-    v-bind="props"
-    class="aspect-square size-full"
-  >
-    <slot />
-  </AvatarImage>
+  <AvatarImage
+    data-slot="avatar-image"
+    v-bind="props"
+    class="aspect-square size-full"
+  >
+    <slot />
+  </AvatarImage>
 </template>

package/dist/runtime/components/ui/badge/Badge.vue

@@ -13,11 +13,11 @@ const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>
-  <Primitive
-    data-slot="badge"
-    :class="cn(badgeVariants({ variant }), props.class)"
-    v-bind="delegatedProps"
-  >
-    <slot />
-  </Primitive>
+  <Primitive
+    data-slot="badge"
+    :class="cn(badgeVariants({ variant }), props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </Primitive>
 </template>

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

@@ -1,6 +1,6 @@
 import type { VariantProps } from "class-variance-authority";
 export { default as Badge } from "./Badge.vue.js";
 export declare const badgeVariants: (props?: ({
-    variant?: "default" | "outline" | "primary" | "secondary" | "destructive" | "warning" | "success" | "bright" | null | undefined;
+    variant?: "default" | "outline" | "primary" | "secondary" | "destructive" | "warning" | "success" | "bright" | "orange" | "gray" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type BadgeVariants = VariantProps<typeof badgeVariants>;

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

@@ -12,6 +12,8 @@ export const badgeVariants = cva(
         success: "border-transparent bg-success text-white [a&]:hover:bg-success/90",
         warning: "border-warning bg-warning text-white [a&]:hover:bg-warning/80",
         bright: "border-transparent bg-bright text-bright-foreground [a&]:hover:bg-bright/90",
+        orange: "border-transparent bg-orange text-white [a&]:hover:bg-orange/90",
+        gray: "border-transparent bg-gray text-white [a&]:hover:bg-gray/90",
         outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground "
       }
     },

package/dist/runtime/components/ui/breadcrumb/Breadcrumb.vue

@@ -5,11 +5,11 @@ const props = defineProps({
 </script>
 
 <template>
-  <nav
-    aria-label="breadcrumb"
-    data-slot="breadcrumb"
-    :class="props.class"
-  >
-    <slot />
-  </nav>
+  <nav
+    aria-label="breadcrumb"
+    data-slot="breadcrumb"
+    :class="props.class"
+  >
+    <slot />
+  </nav>
 </template>

package/dist/runtime/components/ui/breadcrumb/BreadcrumbEllipsis.vue

@@ -6,15 +6,15 @@ const props = defineProps({
 </script>
 
 <template>
-  <span
-    data-slot="breadcrumb-ellipsis"
-    role="presentation"
-    aria-hidden="true"
-    :class="cn('flex size-9 items-center justify-center', props.class)"
-  >
-    <slot>
-      <Icon name="lucide:ellipsis" class="size-4" />
-    </slot>
-    <span class="sr-only">More</span>
-  </span>
+  <span
+    data-slot="breadcrumb-ellipsis"
+    role="presentation"
+    aria-hidden="true"
+    :class="cn('flex size-9 items-center justify-center', props.class)"
+  >
+    <slot>
+      <Icon name="lucide:ellipsis" class="size-4" />
+    </slot>
+    <span class="sr-only">More</span>
+  </span>
 </template>

package/dist/runtime/components/ui/breadcrumb/BreadcrumbItem.vue

@@ -6,10 +6,10 @@ const props = defineProps({
 </script>
 
 <template>
-  <li
-    data-slot="breadcrumb-item"
-    :class="cn('inline-flex items-center gap-1.5', props.class)"
-  >
-    <slot />
-  </li>
+  <li
+    data-slot="breadcrumb-item"
+    :class="cn('inline-flex items-center gap-1.5', props.class)"
+  >
+    <slot />
+  </li>
 </template>