pukaad-ui-lib 1.308.0 → 1.309.0

package/dist/module.json

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

package/dist/runtime/components/button.vue

@@ -4,16 +4,16 @@
   props.variant === 'text' || props.variant === 'link' ? '!p-0 !h-auto' : '',
   props.circle && 'rounded-full aspect-square',
   props.class
-]" :variant="props.variant" :color="props.color" :size="resolvedSize" :type="props.type"
-    :disabled="props.loading || props.disabled">
-    <span class="inline-grid place-items-center">
-      <span class="inline-flex items-center justify-center gap-[8px] [grid-area:1/1]"
-        :class="{ invisible: props.loading }">
-        <slot />
-      </span>
-      <ShadSpinner v-if="props.loading" class="[grid-area:1/1]" />
-    </span>
-  </ShadButton>
+]" :variant="props.variant" :color="props.color" :size="resolvedSize" :type="props.type"
+    :disabled="props.loading || props.disabled">
+    <span class="inline-grid place-items-center">
+      <span class="inline-flex items-center justify-center gap-[8px] [grid-area:1/1]"
+        :class="{ invisible: props.loading }">
+        <slot />
+      </span>
+      <ShadSpinner v-if="props.loading" class="[grid-area:1/1]" />
+    </span>
+  </ShadButton>
 </template>
 
 <script setup>

package/dist/runtime/components/input/input-date-picker.d.vue.ts

@@ -21,6 +21,7 @@ export interface InputDatePickerProps {
     isDateDisabled?: (date: DateValue) => boolean;
     defaultPlaceholder?: DateValue;
     reverseYears?: boolean;
+    variant?: "default" | "button";
 }
 type __VLS_Props = InputDatePickerProps;
 type __VLS_ModelProps = {
@@ -38,6 +39,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: Date | undefined) => any) | undefined;
 }>, {
+    variant: "default" | "button";
     disabled: boolean;
     required: boolean;
     id: string;

package/dist/runtime/components/input/input-date-picker.vue

@@ -6,7 +6,7 @@
     v-slot="{ errorMessage }"
     v-model="modelValue"
   >
-    <ShadFormItem>
+    <ShadFormItem :class="cn('flex flex-col w-full', props.class)">
       <ShadFormLabel v-if="props.label || $slots.label" class="w-full">
         <slot name="label">
           <div class="flex-1">
@@ -25,26 +25,37 @@
               :disabled="props.disabled"
               :class="
   cn(
-    'w-full flex items-center justify-between gap-2 font-body-large',
-    errorMessage && 'border-destructive hover:border-destructive',
-    props.class
+    'w-full flex items-center gap-2 font-body-large',
+    !modelValue && props.variant === 'button' ? 'justify-center' : 'justify-between',
+    errorMessage && 'border-destructive hover:border-destructive'
   )
 "
             >
-              <span v-if="modelValue">{{ formattedDate }}</span>
-              <span v-else class="text-cloud">{{ placeholder }}</span>
-              <Icon
-                v-if="modelValue"
-                name="lucide:x"
-                :size="16"
-                class="!pointer-events-auto cursor-pointer"
-                @click.stop.prevent="clearDate"
-              />
-              <Icon v-else name="lucide:calendar" :size="16" />
+              <!-- Filled State -->
+              <template v-if="modelValue">
+                <span>{{ formattedDate }}</span>
+                <Icon
+                  name="lucide:x"
+                  :size="16"
+                  class="!pointer-events-auto cursor-pointer shrink-0"
+                  @click.stop.prevent="clearDate"
+                />
+              </template>
+
+              <!-- Empty State: button mode -->
+              <template v-else-if="props.variant === 'button'">
+                <span>{{ placeholder }}</span>
+              </template>
+
+              <!-- Empty State: default mode -->
+              <template v-else>
+                <span class="text-cloud">{{ placeholder }}</span>
+                <Icon name="lucide:calendar" :size="16" class="shrink-0" />
+              </template>
             </Button>
           </PopoverTrigger>
           <PopoverContent class="w-auto p-0" align="start">
-            <div :class="cn('sm:flex', showTime && 'flex-row')">
+            <div :class="cn('sm:flex', props.showTime && 'flex-row')">
               <Calendar
                 v-model="calendarValue"
                 initial-focus
@@ -58,7 +69,7 @@
               />
               <!-- Time Picker -->
               <div
-                v-if="showTime"
+                v-if="props.showTime"
                 class="flex flex-col sm:flex-row sm:h-[300px] divide-y sm:divide-y-0 sm:divide-x sm:border-t-0"
               >
                 <!-- Hours -->
@@ -144,7 +155,8 @@ const props = defineProps({
   minValue: { type: Date, required: false },
   isDateDisabled: { type: Function, required: false },
   defaultPlaceholder: { type: null, required: false },
-  reverseYears: { type: Boolean, required: false }
+  reverseYears: { type: Boolean, required: false },
+  variant: { type: String, required: false, default: "default" }
 });
 const maxCalendarValue = computed(() => {
   if (!props.maxValue) return void 0;

package/dist/runtime/components/input/input-date-picker.vue.d.ts

@@ -21,6 +21,7 @@ export interface InputDatePickerProps {
     isDateDisabled?: (date: DateValue) => boolean;
     defaultPlaceholder?: DateValue;
     reverseYears?: boolean;
+    variant?: "default" | "button";
 }
 type __VLS_Props = InputDatePickerProps;
 type __VLS_ModelProps = {
@@ -38,6 +39,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: Date | undefined) => any) | undefined;
 }>, {
+    variant: "default" | "button";
     disabled: boolean;
     required: boolean;
     id: string;

package/package.json

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