cisse-vue-ui 0.5.24 → 0.5.26

package/README.md

@@ -107,30 +107,51 @@ app.use(VueTailwindUI, { components: ['Button', 'CardComponent'] })
 | `TableAction` | Icon button for table row actions |
 | `Stepper` | Multi-step progress indicator with horizontal/vertical orientation |
 | `CollapsibleCard` | Card that can expand/collapse its content |
+| `Accordion` | Expandable content sections with single/multiple mode |
+| `Breadcrumb` | Navigation breadcrumb trail |
+| `Drawer` | Slide-out panel from any edge (left, right, top, bottom) |
+| `Popover` | Floating content panel triggered by click or hover |
+| `Timeline` | Vertical timeline for events/history display |
+| `Tooltip` | Hover tooltip with customizable position |
 
 ### Form
 
 | Component | Description |
 |-----------|-------------|
-| `FormInput` | Text input with label, validation, and icons |
-| `FormSelect` | Select dropdown with label and validation |
-| `FormGroup` | Form field wrapper with label and help text |
-| `FormLabel` | Styled form label |
-| `FormHelp` | Help text for form fields |
+| `FormInput` | Text input with validation states and ARIA support |
+| `FormSelect` | Select dropdown with search, multi-select, and validation |
+| `FormGroup` | Form field wrapper with label, help text, and error states |
+| `FormLabel` | Styled form label with required indicator |
+| `FormHelp` | Help/error text for form fields |
 | `SearchInput` | Search input with icon and clear button |
 | `Switch` | Toggle switch with label and description |
-| `Checkbox` | Checkbox with label and description |
+| `Checkbox` | Checkbox with label, description, and indeterminate state |
+| `Combobox` | Multi-select combobox with search and tags |
+| `DatePicker` | Calendar date picker with min/max dates |
+| `ColorPicker` | Color selection with swatches and custom input |
+| `FileUpload` | Drag-and-drop file upload with preview |
+| `Rating` | Star rating input with half-star support |
+| `Slider` | Single value slider input |
+| `RangeSlider` | Dual-handle range slider |
 
 ### Feedback
 
 | Component | Description |
 |-----------|-------------|
-| `Modal` | Modal dialog with header, body, footer slots |
+| `Modal` | Modal dialog with focus trap, ARIA support, and slots |
+| `ConfirmDialog` | Confirmation modal with customizable actions |
 | `Alert` | Alert banner with variants (info, success, warning, error) |
+| `Toast` | Individual toast notification with auto-dismiss |
+| `ToastContainer` | Toast notification container with positioning |
 | `LoadingSpinner` | Loading indicator with size variants |
+| `Progress` | Progress bar with percentage display |
+| `Skeleton` | Loading placeholder with animation |
+| `CardSkeleton` | Card loading skeleton |
+| `ListSkeleton` | List loading skeleton |
+| `TableSkeleton` | Table loading skeleton |
 | `PaginationControls` | Pagination with page numbers and navigation |
-| `NotificationList` | Toast notification container |
-| `NotificationComponent` | Individual toast notification |
+| `NotificationList` | Notification list container |
+| `NotificationComponent` | Individual notification item |
 | `EmptyState` | Placeholder for empty content with icon and action slot |
 
 ### Layout
@@ -153,7 +174,16 @@ app.use(VueTailwindUI, { components: ['Button', 'CardComponent'] })
 ## Composables
 
 ```typescript
-import { useNotifications, useDarkMode, useExportCSV, useDropdown, useModal } from 'cisse-vue-ui/composables'
+import {
+  useNotifications,
+  useDarkMode,
+  useExportCSV,
+  useDropdown,
+  useModal,
+  useToast,
+  useFocusTrap,
+  useId
+} from 'cisse-vue-ui/composables'
 ```
 
 ### useModal
@@ -252,6 +282,73 @@ const { exportToCSV } = useExportCSV()
 exportToCSV(data, columns, 'export.csv')
 ```
 
+### useToast
+
+Toast notification system with positioning and auto-dismiss:
+
+```typescript
+import { useToast } from 'cisse-vue-ui/composables'
+
+const { toasts, addToast, removeToast, clearToasts } = useToast()
+
+// Add a toast
+addToast({
+  type: 'success',
+  title: 'Success!',
+  message: 'Your changes have been saved.',
+  duration: 5000  // auto-dismiss after 5s
+})
+
+// Different toast types
+addToast({ type: 'error', title: 'Error', message: 'Something went wrong' })
+addToast({ type: 'warning', title: 'Warning', message: 'Please review' })
+addToast({ type: 'info', title: 'Info', message: 'New update available' })
+```
+
+```vue
+<template>
+  <!-- Add ToastContainer to your app root -->
+  <ToastContainer position="top-right" />
+</template>
+```
+
+### useFocusTrap
+
+Trap focus within a container (used internally by Modal):
+
+```typescript
+import { useFocusTrap } from 'cisse-vue-ui/composables'
+import { ref } from 'vue'
+
+const isActive = ref(true)
+const { containerRef } = useFocusTrap({
+  active: isActive,
+  focusFirst: true,      // Focus first focusable element on activate
+  restoreFocus: true     // Restore focus on deactivate
+})
+```
+
+### useId
+
+Generate unique IDs for accessibility (ARIA relationships):
+
+```typescript
+import { useId } from 'cisse-vue-ui/composables'
+
+const { id, related } = useId({ prefix: 'modal' })
+// id.value = 'cisse-modal-1'
+// related('title') = 'cisse-modal-1-title'
+// related('description') = 'cisse-modal-1-description'
+```
+
+```vue
+<template>
+  <div :id="id" role="dialog" :aria-labelledby="related('title')">
+    <h2 :id="related('title')">Dialog Title</h2>
+  </div>
+</template>
+```
+
 ## Types
 
 ```typescript

package/dist/{BadgeType.vue_vue_type_script_setup_true_lang-CnB5eNEM.js → BadgeType.vue_vue_type_script_setup_true_lang-tHRMWBb-.js}

@@ -79,7 +79,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         __props.display === "icon" || __props.display === "both" ? (openBlock(), createBlock(unref(Icon), {
           key: 0,
           icon: unref(icon),
-          class: "h-4 w-4"
+          class: "size-4"
         }, null, 8, ["icon"])) : createCommentVNode("", true),
         __props.display === "text" || __props.display === "both" ? (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(unref(label)), 1)) : createCommentVNode("", true)
       ], 2);
@@ -143,4 +143,4 @@ export {
   _sfc_main$2 as d,
   _sfc_main as e
 };
-//# sourceMappingURL=BadgeType.vue_vue_type_script_setup_true_lang-CnB5eNEM.js.map
+//# sourceMappingURL=BadgeType.vue_vue_type_script_setup_true_lang-tHRMWBb-.js.map

package/dist/BadgeType.vue_vue_type_script_setup_true_lang-tHRMWBb-.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BadgeType.vue_vue_type_script_setup_true_lang-tHRMWBb-.js","sources":["../src/components/type/TextType.vue","../src/components/type/NumberType.vue","../src/components/type/DateType.vue","../src/components/type/BooleanType.vue","../src/components/core/StatusBadge.vue","../src/components/type/BadgeType.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n/**\n * Text type component - default text rendering\n */\ndefineProps<{\n  value: unknown\n}>()\n</script>\n\n<template>\n  <span>{{ value ?? '' }}</span>\n</template>\n","<script lang=\"ts\" setup>\n/**\n * Number type component - formatted number display\n */\nconst { value, locale = 'en-US' } = defineProps<{\n  value: unknown\n  locale?: string\n}>()\n\nconst formattedValue = () => {\n  if (value === null || value === undefined) return ''\n  const num = Number(value)\n  return isNaN(num) ? String(value) : num.toLocaleString(locale)\n}\n</script>\n\n<template>\n  <span>{{ formattedValue() }}</span>\n</template>\n","<script lang=\"ts\" setup>\n/**\n * Date type component - formatted date display\n */\nconst { value, format = 'date', locale = 'en-US' } = defineProps<{\n  value: unknown\n  format?: 'date' | 'datetime' | 'time'\n  locale?: string\n}>()\n\nconst formattedValue = () => {\n  if (!value) return ''\n\n  try {\n    const date = new Date(String(value))\n    if (isNaN(date.getTime())) return String(value)\n\n    switch (format) {\n      case 'datetime':\n        return date.toLocaleString(locale)\n      case 'time':\n        return date.toLocaleTimeString(locale)\n      default:\n        return date.toLocaleDateString(locale)\n    }\n  } catch {\n    return ''\n  }\n}\n</script>\n\n<template>\n  <span>{{ formattedValue() }}</span>\n</template>\n","<script lang=\"ts\" setup>\nimport { Icon } from '@iconify/vue'\n\n/**\n * Boolean type component - displays boolean as Yes/No with icons\n */\nconst {\n  value,\n  display = 'text',\n  trueLabel = 'Yes',\n  falseLabel = 'No',\n} = defineProps<{\n  value: unknown\n  display?: 'text' | 'icon' | 'both'\n  trueLabel?: string\n  falseLabel?: string\n}>()\n\nconst boolValue = Boolean(value)\nconst label = boolValue ? trueLabel : falseLabel\nconst icon = boolValue ? 'lucide:check-circle' : 'lucide:x-circle'\nconst colorClass = boolValue\n  ? 'text-green-600 dark:text-green-400'\n  : 'text-red-600 dark:text-red-400'\n</script>\n\n<template>\n  <span\n    :class=\"colorClass\"\n    class=\"inline-flex items-center gap-1\"\n  >\n    <Icon\n      v-if=\"display === 'icon' || display === 'both'\"\n      :icon=\"icon\"\n      class=\"size-4\"\n    />\n    <span v-if=\"display === 'text' || display === 'both'\">{{ label }}</span>\n  </span>\n</template>\n","<script lang=\"ts\" setup>\nimport type { StatusBadgeVariant } from '@/types'\n\nconst { variant = 'default' } = defineProps<{\n  variant?: StatusBadgeVariant\n}>()\n\nconst variantClasses: Record<StatusBadgeVariant, string> = {\n  default: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200',\n  success: 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400',\n  error: 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400',\n  warning: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400',\n  info: 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400',\n  blue: 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400',\n  orange: 'bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-400',\n  green: 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400',\n  red: 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400',\n  yellow: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400',\n  purple: 'bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-400',\n  pink: 'bg-pink-100 text-pink-800 dark:bg-pink-900/30 dark:text-pink-400',\n  gray: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200',\n}\n</script>\n\n<template>\n  <span\n    :class=\"variantClasses[variant]\"\n    class=\"inline-flex rounded-full px-2 py-1 text-xs font-semibold\"\n  >\n    <slot />\n  </span>\n</template>\n","<script lang=\"ts\" setup>\nimport StatusBadge from '@/components/core/StatusBadge.vue'\nimport type { StatusBadgeVariant } from '@/types'\n\n/**\n * Badge type component - displays value as a badge\n */\nconst { value, variant = 'default', formatter } = defineProps<{\n  value: unknown\n  variant?: StatusBadgeVariant\n  formatter?: (value: unknown) => string\n}>()\n\nconst displayValue = formatter ? formatter(value) : String(value ?? '')\n</script>\n\n<template>\n  <StatusBadge :variant=\"variant\">\n    {{ displayValue }}\n  </StatusBadge>\n</template>\n"],"names":["_openBlock","_createElementBlock","_normalizeClass","_unref","_createBlock","_renderSlot","StatusBadge"],"mappings":";;;;;;;;;AAUE,aAAAA,UAAA,GAAAC,mBAA8B,8BAArB,QAAA,SAAK,EAAA,GAAA,CAAA;AAAA;;;;;;;;;;ACDhB,UAAM,iBAAiB,MAAM;AAC3B,UAAI,QAAA,UAAU,QAAQ,QAAA,UAAU,OAAW,QAAO;AAClD,YAAM,MAAM,OAAO,QAAA,KAAK;AACxB,aAAO,MAAM,GAAG,IAAI,OAAO,QAAA,KAAK,IAAI,IAAI,eAAe,QAAA,MAAM;AAAA,IAC/D;;AAIE,aAAAD,UAAA,GAAAC,mBAAmC,8BAA1B,gBAAc,GAAA,CAAA;AAAA;;;;;;;;;;;ACPzB,UAAM,iBAAiB,MAAM;AAC3B,UAAI,CAAC,QAAA,MAAO,QAAO;AAEnB,UAAI;AACF,cAAM,OAAO,IAAI,KAAK,OAAO,aAAK,CAAC;AACnC,YAAI,MAAM,KAAK,QAAA,CAAS,EAAG,QAAO,OAAO,QAAA,KAAK;AAE9C,gBAAQ,QAAA,QAAA;AAAA,UACN,KAAK;AACH,mBAAO,KAAK,eAAe,QAAA,MAAM;AAAA,UACnC,KAAK;AACH,mBAAO,KAAK,mBAAmB,QAAA,MAAM;AAAA,UACvC;AACE,mBAAO,KAAK,mBAAmB,QAAA,MAAM;AAAA,QAAA;AAAA,MAE3C,QAAQ;AACN,eAAO;AAAA,MACT;AAAA,IACF;;AAIE,aAAAD,UAAA,GAAAC,mBAAmC,8BAA1B,gBAAc,GAAA,CAAA;AAAA;;;;;;;;;;;;;ACdzB,UAAM,YAAY,QAAQ,QAAA,KAAK;AAC/B,UAAM,QAAQ,YAAY,QAAA,YAAY,QAAA;AACtC,UAAM,OAAO,YAAY,wBAAwB;AACjD,UAAM,aAAa,YACf,uCACA;;0BAIFA,mBAUO,QAAA;AAAA,QATJ,OAAKC,eAAA,CAAEC,MAAA,UAAA,GACF,gCAAgC,CAAA;AAAA,MAAA;QAG9B,QAAA,sBAAsB,QAAA,YAAO,uBADrCC,YAIED,MAAA,IAAA,GAAA;AAAA;UAFC,MAAMA,MAAA,IAAA;AAAA,UACP,OAAM;AAAA,QAAA;QAEI,QAAA,sBAAsB,QAAA,YAAO,UAAzCH,UAAA,GAAAC,mBAAwE,oCAAfE,MAAA,KAAA,CAAK,GAAA,CAAA;;;;;;;;;;;AC7BlE,UAAM,iBAAqD;AAAA,MACzD,SAAS;AAAA,MACT,SAAS;AAAA,MACT,OAAO;AAAA,MACP,SAAS;AAAA,MACT,MAAM;AAAA,MACN,MAAM;AAAA,MACN,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,KAAK;AAAA,MACL,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,MAAM;AAAA,IAAA;;0BAKNF,mBAKO,QAAA;AAAA,QAJJ,OAAKC,eAAA,CAAE,eAAe,QAAA,OAAO,GACxB,0DAA0D,CAAA;AAAA,MAAA;QAEhEG,WAAQ,KAAA,QAAA,SAAA;AAAA,MAAA;;;;;;;;;;;;AChBZ,UAAM,eAAe,QAAA,YAAY,QAAA,UAAU,QAAA,KAAK,IAAI,OAAO,QAAA,SAAS,EAAE;;0BAIpED,YAEcE,aAAA,EAFA,SAAS,QAAA,WAAO;AAAA,yBAC5B,MAAkB;AAAA,0CAAfH,MAAA,YAAA,CAAY,GAAA,CAAA;AAAA,QAAA;;;;;;"}

package/dist/{BadgeType.vue_vue_type_script_setup_true_lang-CJb63H1I.cjs → BadgeType.vue_vue_type_script_setup_true_lang-zs0NXN4g.cjs}

@@ -80,7 +80,7 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
         __props.display === "icon" || __props.display === "both" ? (vue.openBlock(), vue.createBlock(vue.unref(vue$1.Icon), {
           key: 0,
           icon: vue.unref(icon),
-          class: "h-4 w-4"
+          class: "size-4"
         }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
         __props.display === "text" || __props.display === "both" ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1, vue.toDisplayString(vue.unref(label)), 1)) : vue.createCommentVNode("", true)
       ], 2);
@@ -142,4 +142,4 @@ exports._sfc_main$2 = _sfc_main$4;
 exports._sfc_main$3 = _sfc_main$3;
 exports._sfc_main$4 = _sfc_main$2;
 exports._sfc_main$5 = _sfc_main;
-//# sourceMappingURL=BadgeType.vue_vue_type_script_setup_true_lang-CJb63H1I.cjs.map
+//# sourceMappingURL=BadgeType.vue_vue_type_script_setup_true_lang-zs0NXN4g.cjs.map

package/dist/BadgeType.vue_vue_type_script_setup_true_lang-zs0NXN4g.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BadgeType.vue_vue_type_script_setup_true_lang-zs0NXN4g.cjs","sources":["../src/components/type/TextType.vue","../src/components/type/NumberType.vue","../src/components/type/DateType.vue","../src/components/type/BooleanType.vue","../src/components/core/StatusBadge.vue","../src/components/type/BadgeType.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n/**\n * Text type component - default text rendering\n */\ndefineProps<{\n  value: unknown\n}>()\n</script>\n\n<template>\n  <span>{{ value ?? '' }}</span>\n</template>\n","<script lang=\"ts\" setup>\n/**\n * Number type component - formatted number display\n */\nconst { value, locale = 'en-US' } = defineProps<{\n  value: unknown\n  locale?: string\n}>()\n\nconst formattedValue = () => {\n  if (value === null || value === undefined) return ''\n  const num = Number(value)\n  return isNaN(num) ? String(value) : num.toLocaleString(locale)\n}\n</script>\n\n<template>\n  <span>{{ formattedValue() }}</span>\n</template>\n","<script lang=\"ts\" setup>\n/**\n * Date type component - formatted date display\n */\nconst { value, format = 'date', locale = 'en-US' } = defineProps<{\n  value: unknown\n  format?: 'date' | 'datetime' | 'time'\n  locale?: string\n}>()\n\nconst formattedValue = () => {\n  if (!value) return ''\n\n  try {\n    const date = new Date(String(value))\n    if (isNaN(date.getTime())) return String(value)\n\n    switch (format) {\n      case 'datetime':\n        return date.toLocaleString(locale)\n      case 'time':\n        return date.toLocaleTimeString(locale)\n      default:\n        return date.toLocaleDateString(locale)\n    }\n  } catch {\n    return ''\n  }\n}\n</script>\n\n<template>\n  <span>{{ formattedValue() }}</span>\n</template>\n","<script lang=\"ts\" setup>\nimport { Icon } from '@iconify/vue'\n\n/**\n * Boolean type component - displays boolean as Yes/No with icons\n */\nconst {\n  value,\n  display = 'text',\n  trueLabel = 'Yes',\n  falseLabel = 'No',\n} = defineProps<{\n  value: unknown\n  display?: 'text' | 'icon' | 'both'\n  trueLabel?: string\n  falseLabel?: string\n}>()\n\nconst boolValue = Boolean(value)\nconst label = boolValue ? trueLabel : falseLabel\nconst icon = boolValue ? 'lucide:check-circle' : 'lucide:x-circle'\nconst colorClass = boolValue\n  ? 'text-green-600 dark:text-green-400'\n  : 'text-red-600 dark:text-red-400'\n</script>\n\n<template>\n  <span\n    :class=\"colorClass\"\n    class=\"inline-flex items-center gap-1\"\n  >\n    <Icon\n      v-if=\"display === 'icon' || display === 'both'\"\n      :icon=\"icon\"\n      class=\"size-4\"\n    />\n    <span v-if=\"display === 'text' || display === 'both'\">{{ label }}</span>\n  </span>\n</template>\n","<script lang=\"ts\" setup>\nimport type { StatusBadgeVariant } from '@/types'\n\nconst { variant = 'default' } = defineProps<{\n  variant?: StatusBadgeVariant\n}>()\n\nconst variantClasses: Record<StatusBadgeVariant, string> = {\n  default: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200',\n  success: 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400',\n  error: 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400',\n  warning: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400',\n  info: 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400',\n  blue: 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400',\n  orange: 'bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-400',\n  green: 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400',\n  red: 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400',\n  yellow: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400',\n  purple: 'bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-400',\n  pink: 'bg-pink-100 text-pink-800 dark:bg-pink-900/30 dark:text-pink-400',\n  gray: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200',\n}\n</script>\n\n<template>\n  <span\n    :class=\"variantClasses[variant]\"\n    class=\"inline-flex rounded-full px-2 py-1 text-xs font-semibold\"\n  >\n    <slot />\n  </span>\n</template>\n","<script lang=\"ts\" setup>\nimport StatusBadge from '@/components/core/StatusBadge.vue'\nimport type { StatusBadgeVariant } from '@/types'\n\n/**\n * Badge type component - displays value as a badge\n */\nconst { value, variant = 'default', formatter } = defineProps<{\n  value: unknown\n  variant?: StatusBadgeVariant\n  formatter?: (value: unknown) => string\n}>()\n\nconst displayValue = formatter ? formatter(value) : String(value ?? '')\n</script>\n\n<template>\n  <StatusBadge :variant=\"variant\">\n    {{ displayValue }}\n  </StatusBadge>\n</template>\n"],"names":["_openBlock","_createElementBlock","_normalizeClass","_unref","_createBlock","Icon","_renderSlot","StatusBadge"],"mappings":";;;;;;;;;;AAUE,aAAAA,cAAA,GAAAC,uBAA8B,kCAArB,QAAA,SAAK,EAAA,GAAA,CAAA;AAAA;;;;;;;;;;ACDhB,UAAM,iBAAiB,MAAM;AAC3B,UAAI,QAAA,UAAU,QAAQ,QAAA,UAAU,OAAW,QAAO;AAClD,YAAM,MAAM,OAAO,QAAA,KAAK;AACxB,aAAO,MAAM,GAAG,IAAI,OAAO,QAAA,KAAK,IAAI,IAAI,eAAe,QAAA,MAAM;AAAA,IAC/D;;AAIE,aAAAD,IAAAA,UAAA,GAAAC,IAAAA,mBAAmC,kCAA1B,gBAAc,GAAA,CAAA;AAAA;;;;;;;;;;;ACPzB,UAAM,iBAAiB,MAAM;AAC3B,UAAI,CAAC,QAAA,MAAO,QAAO;AAEnB,UAAI;AACF,cAAM,OAAO,IAAI,KAAK,OAAO,aAAK,CAAC;AACnC,YAAI,MAAM,KAAK,QAAA,CAAS,EAAG,QAAO,OAAO,QAAA,KAAK;AAE9C,gBAAQ,QAAA,QAAA;AAAA,UACN,KAAK;AACH,mBAAO,KAAK,eAAe,QAAA,MAAM;AAAA,UACnC,KAAK;AACH,mBAAO,KAAK,mBAAmB,QAAA,MAAM;AAAA,UACvC;AACE,mBAAO,KAAK,mBAAmB,QAAA,MAAM;AAAA,QAAA;AAAA,MAE3C,QAAQ;AACN,eAAO;AAAA,MACT;AAAA,IACF;;AAIE,aAAAD,IAAAA,UAAA,GAAAC,IAAAA,mBAAmC,kCAA1B,gBAAc,GAAA,CAAA;AAAA;;;;;;;;;;;;;ACdzB,UAAM,YAAY,QAAQ,QAAA,KAAK;AAC/B,UAAM,QAAQ,YAAY,QAAA,YAAY,QAAA;AACtC,UAAM,OAAO,YAAY,wBAAwB;AACjD,UAAM,aAAa,YACf,uCACA;;8BAIFA,IAAAA,mBAUO,QAAA;AAAA,QATJ,OAAKC,IAAAA,eAAA,CAAEC,IAAAA,MAAA,UAAA,GACF,gCAAgC,CAAA;AAAA,MAAA;QAG9B,QAAA,sBAAsB,QAAA,YAAO,2BADrCC,IAAAA,YAIED,IAAAA,MAAAE,MAAAA,IAAA,GAAA;AAAA;UAFC,MAAMF,IAAAA,MAAA,IAAA;AAAA,UACP,OAAM;AAAA,QAAA;QAEI,QAAA,sBAAsB,QAAA,YAAO,UAAzCH,IAAAA,UAAA,GAAAC,uBAAwE,wCAAfE,IAAAA,MAAA,KAAA,CAAK,GAAA,CAAA;;;;;;;;;;;AC7BlE,UAAM,iBAAqD;AAAA,MACzD,SAAS;AAAA,MACT,SAAS;AAAA,MACT,OAAO;AAAA,MACP,SAAS;AAAA,MACT,MAAM;AAAA,MACN,MAAM;AAAA,MACN,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,KAAK;AAAA,MACL,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,MAAM;AAAA,IAAA;;8BAKNF,IAAAA,mBAKO,QAAA;AAAA,QAJJ,OAAKC,IAAAA,eAAA,CAAE,eAAe,QAAA,OAAO,GACxB,0DAA0D,CAAA;AAAA,MAAA;QAEhEI,eAAQ,KAAA,QAAA,SAAA;AAAA,MAAA;;;;;;;;;;;;AChBZ,UAAM,eAAe,QAAA,YAAY,QAAA,UAAU,QAAA,KAAK,IAAI,OAAO,QAAA,SAAS,EAAE;;8BAIpEF,gBAEcG,aAAA,EAFA,SAAS,QAAA,WAAO;AAAA,6BAC5B,MAAkB;AAAA,kDAAfJ,IAAAA,MAAA,YAAA,CAAY,GAAA,CAAA;AAAA,QAAA;;;;;;;;;;;;"}

package/dist/{Button.vue_vue_type_script_setup_true_lang-Dn8aHGGg.js → Button.vue_vue_type_script_setup_true_lang-BHpVJnRn.js}

@@ -24,7 +24,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$2, [
         __props.showAvatar ? (openBlock(), createElementBlock("div", _hoisted_2$2, [..._cache[0] || (_cache[0] = [
-          createElementVNode("div", { class: "w-10 h-10 rounded-full bg-gray-200 dark:bg-gray-700 animate-pulse" }, null, -1),
+          createElementVNode("div", { class: "size-10 rounded-full bg-gray-200 dark:bg-gray-700 animate-pulse" }, null, -1),
           createElementVNode("div", { class: "flex-1 space-y-2" }, [
             createElementVNode("div", { class: "h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse w-1/2" }),
             createElementVNode("div", { class: "h-3 bg-gray-200 dark:bg-gray-700 rounded animate-pulse w-1/3" })
@@ -101,12 +101,12 @@ const _hoisted_1 = {
 };
 const _hoisted_2 = {
   key: 0,
-  class: "shrink-0 w-10 h-10 rounded-full bg-gray-200 dark:bg-gray-700 animate-pulse"
+  class: "shrink-0 size-10 rounded-full bg-gray-200 dark:bg-gray-700 animate-pulse"
 };
 const _hoisted_3 = { class: "flex-1 min-w-0 space-y-2" };
 const _hoisted_4 = {
   key: 1,
-  class: "shrink-0 w-8 h-8 rounded bg-gray-200 dark:bg-gray-700 animate-pulse"
+  class: "shrink-0 size-8 rounded bg-gray-200 dark:bg-gray-700 animate-pulse"
 };
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "ListSkeleton",
@@ -184,7 +184,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       xl: "size-6"
     };
     const classes = computed(() => [
-      "inline-flex items-center justify-center font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed",
+      "inline-flex items-center justify-center font-medium rounded-lg transition-colors focus:outline-hidden focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed",
       variantClasses[props.variant],
       sizeClasses[props.size],
       props.block && "w-full"
@@ -242,4 +242,4 @@ export {
   _sfc_main$3 as b,
   _sfc_main$1 as c
 };
-//# sourceMappingURL=Button.vue_vue_type_script_setup_true_lang-Dn8aHGGg.js.map
+//# sourceMappingURL=Button.vue_vue_type_script_setup_true_lang-BHpVJnRn.js.map

package/dist/Button.vue_vue_type_script_setup_true_lang-BHpVJnRn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.vue_vue_type_script_setup_true_lang-BHpVJnRn.js","sources":["../src/components/feedback/CardSkeleton.vue","../src/components/feedback/TableSkeleton.vue","../src/components/feedback/ListSkeleton.vue","../src/components/core/Button.vue"],"sourcesContent":["<script lang=\"ts\" setup>\r\nwithDefaults(\r\n  defineProps<{\r\n    /** Show avatar/icon placeholder */\r\n    showAvatar?: boolean\r\n    /** Number of text lines */\r\n    lines?: number\r\n    /** Show action buttons */\r\n    showActions?: boolean\r\n  }>(),\r\n  {\r\n    showAvatar: false,\r\n    lines: 3,\r\n    showActions: false,\r\n  },\r\n)\r\n</script>\r\n\r\n<template>\r\n  <div class=\"bg-white dark:bg-gray-900 rounded-lg shadow-md p-4 space-y-4\" aria-hidden=\"true\">\r\n    <!-- Header with avatar -->\r\n    <div v-if=\"showAvatar\" class=\"flex items-center gap-3\">\r\n      <div class=\"size-10 rounded-full bg-gray-200 dark:bg-gray-700 animate-pulse\" />\r\n      <div class=\"flex-1 space-y-2\">\r\n        <div class=\"h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse w-1/2\" />\r\n        <div class=\"h-3 bg-gray-200 dark:bg-gray-700 rounded animate-pulse w-1/3\" />\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Content lines -->\r\n    <div class=\"space-y-2\">\r\n      <div\r\n        v-for=\"line in lines\"\r\n        :key=\"line\"\r\n        class=\"h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse\"\r\n        :style=\"{ width: line === lines ? '60%' : '100%' }\"\r\n      />\r\n    </div>\r\n\r\n    <!-- Actions -->\r\n    <div v-if=\"showActions\" class=\"flex justify-end gap-2 pt-2\">\r\n      <div class=\"h-8 w-20 bg-gray-200 dark:bg-gray-700 rounded animate-pulse\" />\r\n      <div class=\"h-8 w-20 bg-gray-200 dark:bg-gray-700 rounded animate-pulse\" />\r\n    </div>\r\n  </div>\r\n</template>\r\n","<script lang=\"ts\" setup>\r\nwithDefaults(\r\n  defineProps<{\r\n    /** Number of rows */\r\n    rows?: number\r\n    /** Number of columns */\r\n    columns?: number\r\n    /** Show header */\r\n    showHeader?: boolean\r\n  }>(),\r\n  {\r\n    rows: 5,\r\n    columns: 4,\r\n    showHeader: true,\r\n  },\r\n)\r\n</script>\r\n\r\n<template>\r\n  <div class=\"w-full\" aria-hidden=\"true\">\r\n    <!-- Header -->\r\n    <div\r\n      v-if=\"showHeader\"\r\n      class=\"flex gap-4 px-4 py-3 border-b border-gray-200 dark:border-gray-700\"\r\n    >\r\n      <div\r\n        v-for=\"col in columns\"\r\n        :key=\"`header-${col}`\"\r\n        class=\"flex-1 h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse\"\r\n        :style=\"{ maxWidth: col === 1 ? '30%' : '20%' }\"\r\n      />\r\n    </div>\r\n    <!-- Rows -->\r\n    <div\r\n      v-for=\"row in rows\"\r\n      :key=\"`row-${row}`\"\r\n      class=\"flex items-center gap-4 px-4 py-4 border-b border-gray-100 dark:border-gray-800\"\r\n    >\r\n      <div\r\n        v-for=\"col in columns\"\r\n        :key=\"`cell-${row}-${col}`\"\r\n        class=\"flex-1 h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse\"\r\n        :style=\"{\r\n          maxWidth: col === 1 ? '40%' : col === columns ? '15%' : '25%',\r\n          opacity: 1 - (row * 0.1)\r\n        }\"\r\n      />\r\n    </div>\r\n  </div>\r\n</template>\r\n","<script lang=\"ts\" setup>\r\nwithDefaults(\r\n  defineProps<{\r\n    /** Number of items */\r\n    items?: number\r\n    /** Show avatar/icon placeholder */\r\n    showAvatar?: boolean\r\n    /** Show secondary text */\r\n    showSecondary?: boolean\r\n    /** Show action button */\r\n    showAction?: boolean\r\n  }>(),\r\n  {\r\n    items: 5,\r\n    showAvatar: true,\r\n    showSecondary: true,\r\n    showAction: false,\r\n  },\r\n)\r\n</script>\r\n\r\n<template>\r\n  <div class=\"divide-y divide-gray-200 dark:divide-gray-700\" aria-hidden=\"true\">\r\n    <div\r\n      v-for=\"item in items\"\r\n      :key=\"item\"\r\n      class=\"flex items-center gap-4 py-4 px-4\"\r\n    >\r\n      <!-- Avatar -->\r\n      <div\r\n        v-if=\"showAvatar\"\r\n        class=\"shrink-0 size-10 rounded-full bg-gray-200 dark:bg-gray-700 animate-pulse\"\r\n      />\r\n\r\n      <!-- Content -->\r\n      <div class=\"flex-1 min-w-0 space-y-2\">\r\n        <div\r\n          class=\"h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse\"\r\n          :style=\"{ width: `${60 + Math.random() * 30}%` }\"\r\n        />\r\n        <div\r\n          v-if=\"showSecondary\"\r\n          class=\"h-3 bg-gray-200 dark:bg-gray-700 rounded animate-pulse\"\r\n          :style=\"{ width: `${40 + Math.random() * 20}%` }\"\r\n        />\r\n      </div>\r\n\r\n      <!-- Action -->\r\n      <div\r\n        v-if=\"showAction\"\r\n        class=\"shrink-0 size-8 rounded bg-gray-200 dark:bg-gray-700 animate-pulse\"\r\n      />\r\n    </div>\r\n  </div>\r\n</template>\r\n","<script lang=\"ts\" setup>\nimport { computed, resolveComponent } from 'vue'\nimport { Icon } from '@iconify/vue'\n\nexport type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' | 'success'\nexport type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n\nconst props = withDefaults(\n  defineProps<{\n    /** Button variant */\n    variant?: ButtonVariant\n    /** Button size */\n    size?: ButtonSize\n    /** Icon to show (left side) */\n    icon?: string\n    /** Icon on right side */\n    iconRight?: string\n    /** Loading state */\n    loading?: boolean\n    /** Disabled state */\n    disabled?: boolean\n    /** Full width */\n    block?: boolean\n    /** Link href (renders as <a>) */\n    href?: string\n    /** Router link (renders as RouterLink) */\n    to?: string\n    /** Button type */\n    type?: 'button' | 'submit' | 'reset'\n  }>(),\n  {\n    variant: 'primary',\n    size: 'md',\n    type: 'button',\n  },\n)\n\nconst emit = defineEmits<{\n  click: [event: MouseEvent]\n}>()\n\nconst variantClasses: Record<ButtonVariant, string> = {\n  primary: 'bg-primary text-primary-foreground hover:bg-primary/90 focus:ring-primary',\n  secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/90 focus:ring-secondary',\n  outline: 'border border-gray-300 bg-transparent text-gray-700 hover:bg-gray-50 focus:ring-primary dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800',\n  ghost: 'bg-transparent text-gray-700 hover:bg-gray-100 focus:ring-primary dark:text-gray-300 dark:hover:bg-gray-800',\n  danger: 'bg-red-500 text-white hover:bg-red-600 focus:ring-red-500',\n  success: 'bg-green-500 text-white hover:bg-green-600 focus:ring-green-500',\n}\n\nconst sizeClasses: Record<ButtonSize, string> = {\n  xs: 'px-2 py-1 text-xs gap-1',\n  sm: 'px-3 py-1.5 text-sm gap-1.5',\n  md: 'px-4 py-2 text-sm gap-2',\n  lg: 'px-5 py-2.5 text-base gap-2',\n  xl: 'px-6 py-3 text-lg gap-2.5',\n}\n\nconst iconSizeClasses: Record<ButtonSize, string> = {\n  xs: 'size-3',\n  sm: 'size-4',\n  md: 'size-4',\n  lg: 'size-5',\n  xl: 'size-6',\n}\n\nconst classes = computed(() => [\n  'inline-flex items-center justify-center font-medium rounded-lg transition-colors focus:outline-hidden focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed',\n  variantClasses[props.variant],\n  sizeClasses[props.size],\n  props.block && 'w-full',\n])\n\nconst component = computed(() => {\n  if (props.to) {\n    try {\n      const RouterLink = resolveComponent('RouterLink')\n      if (typeof RouterLink !== 'string') return RouterLink\n    } catch {\n      // RouterLink not available\n    }\n  }\n  if (props.href) return 'a'\n  return 'button'\n})\n\nconst componentProps = computed(() => {\n  if (props.to) return { to: props.to }\n  if (props.href) return { href: props.href }\n  return { type: props.type, disabled: props.disabled || props.loading }\n})\n\nconst handleClick = (event: MouseEvent) => {\n  if (props.disabled || props.loading) return\n  emit('click', event)\n}\n</script>\n\n<template>\n  <component\n    :is=\"component\"\n    v-bind=\"componentProps\"\n    :class=\"classes\"\n    @click=\"handleClick\"\n  >\n    <Icon\n      v-if=\"loading\"\n      icon=\"lucide:loader-2\"\n      :class=\"[iconSizeClasses[size], 'animate-spin']\"\n    />\n    <Icon\n      v-else-if=\"icon\"\n      :icon=\"icon\"\n      :class=\"iconSizeClasses[size]\"\n    />\n    <slot />\n    <Icon\n      v-if=\"iconRight && !loading\"\n      :icon=\"iconRight\"\n      :class=\"iconSizeClasses[size]\"\n    />\n  </component>\n</template>\n"],"names":["_openBlock","_createElementBlock","_hoisted_1","_hoisted_2","_createElementVNode","_hoisted_3","_Fragment","_renderList","_normalizeStyle","_hoisted_4","_createBlock","_resolveDynamicComponent","_mergeProps","_unref","_normalizeClass","_renderSlot"],"mappings":"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"}

package/dist/{Button.vue_vue_type_script_setup_true_lang-B3pJ5qJ7.cjs → Button.vue_vue_type_script_setup_true_lang-CLmHDal2.cjs}

@@ -25,7 +25,7 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, [
         __props.showAvatar ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$2, [..._cache[0] || (_cache[0] = [
-          vue.createElementVNode("div", { class: "w-10 h-10 rounded-full bg-gray-200 dark:bg-gray-700 animate-pulse" }, null, -1),
+          vue.createElementVNode("div", { class: "size-10 rounded-full bg-gray-200 dark:bg-gray-700 animate-pulse" }, null, -1),
           vue.createElementVNode("div", { class: "flex-1 space-y-2" }, [
             vue.createElementVNode("div", { class: "h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse w-1/2" }),
             vue.createElementVNode("div", { class: "h-3 bg-gray-200 dark:bg-gray-700 rounded animate-pulse w-1/3" })
@@ -102,12 +102,12 @@ const _hoisted_1 = {
 };
 const _hoisted_2 = {
   key: 0,
-  class: "shrink-0 w-10 h-10 rounded-full bg-gray-200 dark:bg-gray-700 animate-pulse"
+  class: "shrink-0 size-10 rounded-full bg-gray-200 dark:bg-gray-700 animate-pulse"
 };
 const _hoisted_3 = { class: "flex-1 min-w-0 space-y-2" };
 const _hoisted_4 = {
   key: 1,
-  class: "shrink-0 w-8 h-8 rounded bg-gray-200 dark:bg-gray-700 animate-pulse"
+  class: "shrink-0 size-8 rounded bg-gray-200 dark:bg-gray-700 animate-pulse"
 };
 const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
   __name: "ListSkeleton",
@@ -185,7 +185,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       xl: "size-6"
     };
     const classes = vue.computed(() => [
-      "inline-flex items-center justify-center font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed",
+      "inline-flex items-center justify-center font-medium rounded-lg transition-colors focus:outline-hidden focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed",
       variantClasses[props.variant],
       sizeClasses[props.size],
       props.block && "w-full"
@@ -241,4 +241,4 @@ exports._sfc_main = _sfc_main;
 exports._sfc_main$1 = _sfc_main$2;
 exports._sfc_main$2 = _sfc_main$3;
 exports._sfc_main$3 = _sfc_main$1;
-//# sourceMappingURL=Button.vue_vue_type_script_setup_true_lang-B3pJ5qJ7.cjs.map
+//# sourceMappingURL=Button.vue_vue_type_script_setup_true_lang-CLmHDal2.cjs.map

package/dist/Button.vue_vue_type_script_setup_true_lang-CLmHDal2.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.vue_vue_type_script_setup_true_lang-CLmHDal2.cjs","sources":["../src/components/feedback/CardSkeleton.vue","../src/components/feedback/TableSkeleton.vue","../src/components/feedback/ListSkeleton.vue","../src/components/core/Button.vue"],"sourcesContent":["<script lang=\"ts\" setup>\r\nwithDefaults(\r\n  defineProps<{\r\n    /** Show avatar/icon placeholder */\r\n    showAvatar?: boolean\r\n    /** Number of text lines */\r\n    lines?: number\r\n    /** Show action buttons */\r\n    showActions?: boolean\r\n  }>(),\r\n  {\r\n    showAvatar: false,\r\n    lines: 3,\r\n    showActions: false,\r\n  },\r\n)\r\n</script>\r\n\r\n<template>\r\n  <div class=\"bg-white dark:bg-gray-900 rounded-lg shadow-md p-4 space-y-4\" aria-hidden=\"true\">\r\n    <!-- Header with avatar -->\r\n    <div v-if=\"showAvatar\" class=\"flex items-center gap-3\">\r\n      <div class=\"size-10 rounded-full bg-gray-200 dark:bg-gray-700 animate-pulse\" />\r\n      <div class=\"flex-1 space-y-2\">\r\n        <div class=\"h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse w-1/2\" />\r\n        <div class=\"h-3 bg-gray-200 dark:bg-gray-700 rounded animate-pulse w-1/3\" />\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Content lines -->\r\n    <div class=\"space-y-2\">\r\n      <div\r\n        v-for=\"line in lines\"\r\n        :key=\"line\"\r\n        class=\"h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse\"\r\n        :style=\"{ width: line === lines ? '60%' : '100%' }\"\r\n      />\r\n    </div>\r\n\r\n    <!-- Actions -->\r\n    <div v-if=\"showActions\" class=\"flex justify-end gap-2 pt-2\">\r\n      <div class=\"h-8 w-20 bg-gray-200 dark:bg-gray-700 rounded animate-pulse\" />\r\n      <div class=\"h-8 w-20 bg-gray-200 dark:bg-gray-700 rounded animate-pulse\" />\r\n    </div>\r\n  </div>\r\n</template>\r\n","<script lang=\"ts\" setup>\r\nwithDefaults(\r\n  defineProps<{\r\n    /** Number of rows */\r\n    rows?: number\r\n    /** Number of columns */\r\n    columns?: number\r\n    /** Show header */\r\n    showHeader?: boolean\r\n  }>(),\r\n  {\r\n    rows: 5,\r\n    columns: 4,\r\n    showHeader: true,\r\n  },\r\n)\r\n</script>\r\n\r\n<template>\r\n  <div class=\"w-full\" aria-hidden=\"true\">\r\n    <!-- Header -->\r\n    <div\r\n      v-if=\"showHeader\"\r\n      class=\"flex gap-4 px-4 py-3 border-b border-gray-200 dark:border-gray-700\"\r\n    >\r\n      <div\r\n        v-for=\"col in columns\"\r\n        :key=\"`header-${col}`\"\r\n        class=\"flex-1 h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse\"\r\n        :style=\"{ maxWidth: col === 1 ? '30%' : '20%' }\"\r\n      />\r\n    </div>\r\n    <!-- Rows -->\r\n    <div\r\n      v-for=\"row in rows\"\r\n      :key=\"`row-${row}`\"\r\n      class=\"flex items-center gap-4 px-4 py-4 border-b border-gray-100 dark:border-gray-800\"\r\n    >\r\n      <div\r\n        v-for=\"col in columns\"\r\n        :key=\"`cell-${row}-${col}`\"\r\n        class=\"flex-1 h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse\"\r\n        :style=\"{\r\n          maxWidth: col === 1 ? '40%' : col === columns ? '15%' : '25%',\r\n          opacity: 1 - (row * 0.1)\r\n        }\"\r\n      />\r\n    </div>\r\n  </div>\r\n</template>\r\n","<script lang=\"ts\" setup>\r\nwithDefaults(\r\n  defineProps<{\r\n    /** Number of items */\r\n    items?: number\r\n    /** Show avatar/icon placeholder */\r\n    showAvatar?: boolean\r\n    /** Show secondary text */\r\n    showSecondary?: boolean\r\n    /** Show action button */\r\n    showAction?: boolean\r\n  }>(),\r\n  {\r\n    items: 5,\r\n    showAvatar: true,\r\n    showSecondary: true,\r\n    showAction: false,\r\n  },\r\n)\r\n</script>\r\n\r\n<template>\r\n  <div class=\"divide-y divide-gray-200 dark:divide-gray-700\" aria-hidden=\"true\">\r\n    <div\r\n      v-for=\"item in items\"\r\n      :key=\"item\"\r\n      class=\"flex items-center gap-4 py-4 px-4\"\r\n    >\r\n      <!-- Avatar -->\r\n      <div\r\n        v-if=\"showAvatar\"\r\n        class=\"shrink-0 size-10 rounded-full bg-gray-200 dark:bg-gray-700 animate-pulse\"\r\n      />\r\n\r\n      <!-- Content -->\r\n      <div class=\"flex-1 min-w-0 space-y-2\">\r\n        <div\r\n          class=\"h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse\"\r\n          :style=\"{ width: `${60 + Math.random() * 30}%` }\"\r\n        />\r\n        <div\r\n          v-if=\"showSecondary\"\r\n          class=\"h-3 bg-gray-200 dark:bg-gray-700 rounded animate-pulse\"\r\n          :style=\"{ width: `${40 + Math.random() * 20}%` }\"\r\n        />\r\n      </div>\r\n\r\n      <!-- Action -->\r\n      <div\r\n        v-if=\"showAction\"\r\n        class=\"shrink-0 size-8 rounded bg-gray-200 dark:bg-gray-700 animate-pulse\"\r\n      />\r\n    </div>\r\n  </div>\r\n</template>\r\n","<script lang=\"ts\" setup>\nimport { computed, resolveComponent } from 'vue'\nimport { Icon } from '@iconify/vue'\n\nexport type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' | 'success'\nexport type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n\nconst props = withDefaults(\n  defineProps<{\n    /** Button variant */\n    variant?: ButtonVariant\n    /** Button size */\n    size?: ButtonSize\n    /** Icon to show (left side) */\n    icon?: string\n    /** Icon on right side */\n    iconRight?: string\n    /** Loading state */\n    loading?: boolean\n    /** Disabled state */\n    disabled?: boolean\n    /** Full width */\n    block?: boolean\n    /** Link href (renders as <a>) */\n    href?: string\n    /** Router link (renders as RouterLink) */\n    to?: string\n    /** Button type */\n    type?: 'button' | 'submit' | 'reset'\n  }>(),\n  {\n    variant: 'primary',\n    size: 'md',\n    type: 'button',\n  },\n)\n\nconst emit = defineEmits<{\n  click: [event: MouseEvent]\n}>()\n\nconst variantClasses: Record<ButtonVariant, string> = {\n  primary: 'bg-primary text-primary-foreground hover:bg-primary/90 focus:ring-primary',\n  secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/90 focus:ring-secondary',\n  outline: 'border border-gray-300 bg-transparent text-gray-700 hover:bg-gray-50 focus:ring-primary dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800',\n  ghost: 'bg-transparent text-gray-700 hover:bg-gray-100 focus:ring-primary dark:text-gray-300 dark:hover:bg-gray-800',\n  danger: 'bg-red-500 text-white hover:bg-red-600 focus:ring-red-500',\n  success: 'bg-green-500 text-white hover:bg-green-600 focus:ring-green-500',\n}\n\nconst sizeClasses: Record<ButtonSize, string> = {\n  xs: 'px-2 py-1 text-xs gap-1',\n  sm: 'px-3 py-1.5 text-sm gap-1.5',\n  md: 'px-4 py-2 text-sm gap-2',\n  lg: 'px-5 py-2.5 text-base gap-2',\n  xl: 'px-6 py-3 text-lg gap-2.5',\n}\n\nconst iconSizeClasses: Record<ButtonSize, string> = {\n  xs: 'size-3',\n  sm: 'size-4',\n  md: 'size-4',\n  lg: 'size-5',\n  xl: 'size-6',\n}\n\nconst classes = computed(() => [\n  'inline-flex items-center justify-center font-medium rounded-lg transition-colors focus:outline-hidden focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed',\n  variantClasses[props.variant],\n  sizeClasses[props.size],\n  props.block && 'w-full',\n])\n\nconst component = computed(() => {\n  if (props.to) {\n    try {\n      const RouterLink = resolveComponent('RouterLink')\n      if (typeof RouterLink !== 'string') return RouterLink\n    } catch {\n      // RouterLink not available\n    }\n  }\n  if (props.href) return 'a'\n  return 'button'\n})\n\nconst componentProps = computed(() => {\n  if (props.to) return { to: props.to }\n  if (props.href) return { href: props.href }\n  return { type: props.type, disabled: props.disabled || props.loading }\n})\n\nconst handleClick = (event: MouseEvent) => {\n  if (props.disabled || props.loading) return\n  emit('click', event)\n}\n</script>\n\n<template>\n  <component\n    :is=\"component\"\n    v-bind=\"componentProps\"\n    :class=\"classes\"\n    @click=\"handleClick\"\n  >\n    <Icon\n      v-if=\"loading\"\n      icon=\"lucide:loader-2\"\n      :class=\"[iconSizeClasses[size], 'animate-spin']\"\n    />\n    <Icon\n      v-else-if=\"icon\"\n      :icon=\"icon\"\n      :class=\"iconSizeClasses[size]\"\n    />\n    <slot />\n    <Icon\n      v-if=\"iconRight && !loading\"\n      :icon=\"iconRight\"\n      :class=\"iconSizeClasses[size]\"\n    />\n  </component>\n</template>\n"],"names":["_openBlock","_createElementBlock","_hoisted_1","_hoisted_2","_createElementVNode","_hoisted_3","_Fragment","_renderList","_normalizeStyle","_hoisted_4","computed","resolveComponent","_createBlock","_resolveDynamicComponent","_mergeProps","_unref","Icon","_normalizeClass","_renderSlot"],"mappings":"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"}

package/dist/{Combobox.vue_vue_type_script_setup_true_lang-BS_MitQQ.cjs → Combobox.vue_vue_type_script_setup_true_lang-B8WioleN.cjs}

@@ -81,7 +81,7 @@ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
         "aria-invalid": props.invalid || void 0,
         "aria-required": props.required || void 0,
         "aria-describedby": props.describedBy || void 0,
-        class: "mt-1 block w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-800 placeholder-gray-400 shadow-sm user-invalid:border-red-500 user-invalid:text-red-600 focus:border-primary focus:ring-1 focus:ring-primary focus:outline-none focus:user-invalid:border-red-500 focus:user-invalid:ring-red-500 disabled:border-gray-200 disabled:bg-gray-50 disabled:text-gray-500 disabled:shadow-none dark:border-gray-700 dark:bg-gray-900 dark:text-gray-200 dark:placeholder-gray-500 dark:focus:border-primary dark:focus:ring-primary dark:disabled:border-gray-800 dark:disabled:bg-gray-950 dark:disabled:text-gray-500"
+        class: "mt-1 block w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-800 placeholder-gray-400 shadow-sm user-invalid:border-red-500 user-invalid:text-red-600 focus:border-primary focus:ring-1 focus:ring-primary focus:outline-hidden focus:user-invalid:border-red-500 focus:user-invalid:ring-red-500 disabled:border-gray-200 disabled:bg-gray-50 disabled:text-gray-500 disabled:shadow-none dark:border-gray-700 dark:bg-gray-900 dark:text-gray-200 dark:placeholder-gray-500 dark:focus:border-primary dark:focus:ring-primary dark:disabled:border-gray-800 dark:disabled:bg-gray-950 dark:disabled:text-gray-500"
       }, _ctx.$attrs), null, 16, _hoisted_1$b)), [
         [vue.vModelDynamic, modelValue.value]
       ]);
@@ -294,7 +294,7 @@ const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
                       ref: searchInputRef,
                       "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchQuery.value = $event),
                       type: "text",
-                      class: "flex-1 bg-transparent text-sm outline-none dark:text-white",
+                      class: "flex-1 bg-transparent text-sm outline-hidden dark:text-white",
                       placeholder: "Search...",
                       "aria-label": "Search options",
                       onKeydown: handleKeydown
@@ -452,7 +452,7 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$8, [
         vue.createVNode(vue.unref(vue$1.Icon), {
           icon: __props.icon,
-          class: "absolute top-1/2 left-3 h-5 w-5 -translate-y-1/2 text-gray-400"
+          class: "absolute top-1/2 left-3 size-5 -translate-y-1/2 text-gray-400"
         }, null, 8, ["icon"]),
         vue.createElementVNode("input", {
           disabled: __props.disabled,
@@ -523,7 +523,7 @@ const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
           "aria-describedby": __props.description ? descriptionId.value : void 0,
           disabled: __props.disabled,
           class: vue.normalizeClass([
-            "relative inline-flex shrink-0 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2",
+            "relative inline-flex shrink-0 items-center rounded-full transition-colors focus:outline-hidden focus:ring-2 focus:ring-primary focus:ring-offset-2",
             switchSizes[__props.size],
             __props.modelValue ? "bg-primary" : "bg-gray-300 dark:bg-gray-600"
           ]),
@@ -885,7 +885,7 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
                       "aria-disabled": day.isDisabled || void 0,
                       disabled: day.isDisabled,
                       class: vue.normalizeClass([
-                        "h-8 w-8 rounded text-sm transition",
+                        "size-8 rounded text-sm transition",
                         day.isDisabled && "cursor-not-allowed opacity-30",
                         !day.isCurrentMonth && "text-gray-400 dark:text-gray-600",
                         day.isCurrentMonth && !day.isSelected && !day.isToday && "text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700",
@@ -1081,7 +1081,7 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
           vue.createElementVNode("div", _hoisted_3$4, [
             vue.createVNode(vue.unref(vue$1.Icon), {
               icon: "heroicons:cloud-arrow-up",
-              class: vue.normalizeClass(["w-12 h-12 mx-auto text-gray-400", { "text-primary-500": isDragging.value }])
+              class: vue.normalizeClass(["size-12 mx-auto text-gray-400", { "text-primary-500": isDragging.value }])
             }, null, 8, ["class"]),
             vue.createElementVNode("p", _hoisted_4$2, vue.toDisplayString(__props.label), 1),
             __props.description ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_5$2, vue.toDisplayString(__props.description), 1)) : vue.createCommentVNode("", true),
@@ -1096,7 +1096,7 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
             }, [
               vue.createVNode(vue.unref(vue$1.Icon), {
                 icon: getFileIcon(uploadedFile.file),
-                class: "w-8 h-8 text-gray-400"
+                class: "size-8 text-gray-400"
               }, null, 8, ["icon"]),
               vue.createElementVNode("div", _hoisted_8$1, [
                 vue.createElementVNode("p", _hoisted_9, vue.toDisplayString(uploadedFile.file.name), 1),
@@ -1109,7 +1109,7 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
               }, [
                 vue.createVNode(vue.unref(vue$1.Icon), {
                   icon: "heroicons:x-mark",
-                  class: "w-5 h-5"
+                  class: "size-5"
                 })
               ], 8, _hoisted_11)
             ]);
@@ -1151,11 +1151,11 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     const sizeClasses = vue.computed(() => {
       switch (props.size) {
         case "sm":
-          return "w-4 h-4";
+          return "size-4";
         case "lg":
-          return "w-8 h-8";
+          return "size-8";
         default:
-          return "w-6 h-6";
+          return "size-6";
       }
     });
     const getStarState = (index2) => {
@@ -1197,7 +1197,7 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
             return vue.openBlock(), vue.createElementBlock("button", {
               key: index2,
               type: "button",
-              class: vue.normalizeClass(["relative focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-1 rounded", [
+              class: vue.normalizeClass(["relative focus:outline-hidden focus:ring-2 focus:ring-primary-500 focus:ring-offset-1 rounded", [
                 __props.readonly || __props.disabled ? "cursor-default" : "cursor-pointer",
                 __props.disabled && "opacity-50"
               ]]),
@@ -1320,13 +1320,13 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
           onClick: togglePicker
         }, [
           vue.createElementVNode("span", {
-            class: "w-6 h-6 rounded border border-gray-200 dark:border-gray-600",
+            class: "size-6 rounded border border-gray-200 dark:border-gray-600",
             style: vue.normalizeStyle({ backgroundColor: __props.modelValue })
           }, null, 4),
           vue.createElementVNode("span", _hoisted_4$1, vue.toDisplayString(__props.modelValue), 1),
           vue.createVNode(vue.unref(vue$1.Icon), {
             icon: "heroicons:chevron-down",
-            class: vue.normalizeClass(["w-4 h-4 text-gray-400", { "rotate-180": isOpen.value }])
+            class: vue.normalizeClass(["size-4 text-gray-400", { "rotate-180": isOpen.value }])
           }, null, 8, ["class"])
         ], 10, _hoisted_3$2),
         (vue.openBlock(), vue.createBlock(vue.Teleport, {
@@ -1353,7 +1353,7 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
                     return vue.openBlock(), vue.createElementBlock("button", {
                       key: color,
                       type: "button",
-                      class: vue.normalizeClass(["w-8 h-8 rounded-lg border-2 transition-transform hover:scale-110 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-1", [
+                      class: vue.normalizeClass(["size-8 rounded-lg border-2 transition-transform hover:scale-110 focus:outline-hidden focus:ring-2 focus:ring-primary-500 focus:ring-offset-1", [
                         __props.modelValue === color ? "border-primary-500 ring-2 ring-primary-500 ring-offset-1" : "border-transparent"
                       ]]),
                       style: vue.normalizeStyle({ backgroundColor: color }),
@@ -1363,7 +1363,7 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
                       __props.modelValue === color ? (vue.openBlock(), vue.createBlock(vue.unref(vue$1.Icon), {
                         key: 0,
                         icon: "heroicons:check",
-                        class: vue.normalizeClass(["w-4 h-4 mx-auto", [
+                        class: vue.normalizeClass(["size-4 mx-auto", [
                           ["#ffffff", "#f9fafb", "#f3f4f6", "#e5e7eb", "#eab308", "#f59e0b"].includes(color) ? "text-gray-800" : "text-white"
                         ]])
                       }, null, 8, ["class"])) : vue.createCommentVNode("", true)
@@ -1374,7 +1374,7 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
                   vue.createElementVNode("input", {
                     type: "color",
                     value: __props.modelValue,
-                    class: "w-8 h-8 rounded cursor-pointer border-0 p-0",
+                    class: "size-8 rounded cursor-pointer border-0 p-0",
                     onInput: handleNativeInput
                   }, null, 40, _hoisted_8),
                   vue.withDirectives(vue.createElementVNode("input", {
@@ -1507,7 +1507,7 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
             style: vue.normalizeStyle(rangeStyle.value)
           }, null, 6),
           vue.createElementVNode("div", {
-            class: vue.normalizeClass(["absolute top-1/2 -translate-y-1/2 -translate-x-1/2 w-5 h-5 rounded-full border-2 shadow transition-shadow", [
+            class: vue.normalizeClass(["absolute top-1/2 -translate-y-1/2 -translate-x-1/2 size-5 rounded-full border-2 shadow transition-shadow", [
               __props.disabled ? "bg-gray-300 border-gray-400 cursor-not-allowed" : "bg-white border-primary-500 cursor-grab hover:shadow-md active:cursor-grabbing",
               dragging.value === "min" && "ring-4 ring-primary-200 dark:ring-primary-800"
             ]]),
@@ -1515,7 +1515,7 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
             onMousedown: _cache[0] || (_cache[0] = ($event) => handleMouseDown("min"))
           }, null, 38),
           vue.createElementVNode("div", {
-            class: vue.normalizeClass(["absolute top-1/2 -translate-y-1/2 -translate-x-1/2 w-5 h-5 rounded-full border-2 shadow transition-shadow", [
+            class: vue.normalizeClass(["absolute top-1/2 -translate-y-1/2 -translate-x-1/2 size-5 rounded-full border-2 shadow transition-shadow", [
               __props.disabled ? "bg-gray-300 border-gray-400 cursor-not-allowed" : "bg-white border-primary-500 cursor-grab hover:shadow-md active:cursor-grabbing",
               dragging.value === "max" && "ring-4 ring-primary-200 dark:ring-primary-800"
             ]]),
@@ -1670,7 +1670,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
             disabled: __props.disabled,
             "aria-autocomplete": "list",
             "aria-controls": listboxId.value,
-            class: "flex-1 border-none bg-transparent text-sm text-gray-900 outline-none placeholder:text-gray-400 dark:text-gray-100 dark:placeholder:text-gray-500",
+            class: "flex-1 border-none bg-transparent text-sm text-gray-900 outline-hidden placeholder:text-gray-400 dark:text-gray-100 dark:placeholder:text-gray-500",
             onClick: _cache[1] || (_cache[1] = vue.withModifiers(() => {
             }, ["stop"]))
           }, null, 8, _hoisted_2)), [
@@ -1686,14 +1686,14 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
             }, [
               vue.createVNode(vue.unref(vue$1.Icon), {
                 icon: "lucide:x",
-                class: "h-4 w-4",
+                class: "size-4",
                 "aria-hidden": "true"
               })
             ])) : vue.createCommentVNode("", true),
             vue.createVNode(vue.unref(vue$1.Icon), {
               icon: "lucide:chevron-down",
               class: vue.normalizeClass([
-                "h-4 w-4 text-gray-400 transition-transform",
+                "size-4 text-gray-400 transition-transform",
                 isOpen.value && "rotate-180"
               ]),
               "aria-hidden": "true"
@@ -1738,7 +1738,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                     __props.multiple ? (vue.openBlock(), vue.createElementBlock("span", {
                       key: 0,
                       class: vue.normalizeClass([
-                        "flex h-4 w-4 items-center justify-center rounded border",
+                        "flex size-4 items-center justify-center rounded border",
                         isSelected(option) ? "border-primary bg-primary text-white" : "border-gray-300 dark:border-gray-600"
                       ]),
                       "aria-hidden": "true"
@@ -1746,14 +1746,14 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                       isSelected(option) ? (vue.openBlock(), vue.createBlock(vue.unref(vue$1.Icon), {
                         key: 0,
                         icon: "lucide:check",
-                        class: "h-3 w-3"
+                        class: "size-3"
                       })) : vue.createCommentVNode("", true)
                     ], 2)) : vue.createCommentVNode("", true),
                     vue.createElementVNode("span", _hoisted_6, vue.toDisplayString(option.label), 1),
                     !__props.multiple && isSelected(option) ? (vue.openBlock(), vue.createBlock(vue.unref(vue$1.Icon), {
                       key: 1,
                       icon: "lucide:check",
-                      class: "h-4 w-4 text-primary",
+                      class: "size-4 text-primary",
                       "aria-hidden": "true"
                     })) : vue.createCommentVNode("", true)
                   ], 10, _hoisted_5);
@@ -1781,4 +1781,4 @@ exports._sfc_main$6 = _sfc_main$7;
 exports._sfc_main$7 = _sfc_main$5;
 exports._sfc_main$8 = _sfc_main$4;
 exports._sfc_main$9 = _sfc_main$3;
-//# sourceMappingURL=Combobox.vue_vue_type_script_setup_true_lang-BS_MitQQ.cjs.map
+//# sourceMappingURL=Combobox.vue_vue_type_script_setup_true_lang-B8WioleN.cjs.map