@stachelock/ui 0.4.0 → 0.5.0

package/dist/DynamicForm.vue_vue_type_script_setup_true_lang-CxSaO5Cl.js.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicForm.vue_vue_type_script_setup_true_lang-CxSaO5Cl.js","sources":["../src/components/forms/DynamicForm.vue"],"sourcesContent":["<!--\n  @component DynamicForm\n  @description Schema-driven form component with validation.\n  \n  Renders forms from a schema definition with sections, fields, conditional\n  visibility, and integrated validation via vee-validate.\n  \n  @props\n  - schema (DynamicFormSchema, required): Form schema with sections and fields\n  - modelValue (object, optional): Form data via v-model\n  - loading (boolean, optional): Loading state for submit button\n  - showActions (boolean, optional): Show submit/cancel buttons\n  - showCancelButton (boolean, optional): Show cancel button\n  - submitButtonText (string, optional): Submit button text\n  - cancelButtonText (string, optional): Cancel button text\n  - actionsAlignment (string, optional): Button alignment - left/center/right\n  - formError (string, optional): Form-level error message\n  \n  @emits\n  - update:modelValue: Emitted when form data changes\n  - submit: Emitted on form submit with data and error setter\n  - cancel: Emitted when cancel is clicked\n  - field-change: Emitted when any field value changes\n  \n  @exposes\n  - validate(): Promise<boolean> - Validate form and return validity\n  - reset(): void - Reset form to initial values\n  - setFieldValue(name, value): void - Set a field value\n  - getFieldValue(name): any - Get a field value\n  - formData: Record<string, any> - Current form data\n  \n  @example\n  <DynamicForm\n    :schema=\"formSchema\"\n    v-model=\"formData\"\n    @submit=\"handleSubmit\"\n    @cancel=\"handleCancel\"\n  />\n-->\n<template>\n  <form\n    ref=\"formRef\"\n    :class=\"formClasses\"\n    @submit.prevent=\"handleSubmit\"\n  >\n    <!-- Form title and description -->\n    <div v-if=\"schema.title || schema.description\" class=\"sl-mb-6\">\n      <h2 v-if=\"schema.title\" class=\"sl-text-lg sl-font-semibold sl-text-gray-900 sl-mb-2\">\n        {{ schema.title }}\n      </h2>\n      <p v-if=\"schema.description\" class=\"sl-text-sm sl-text-gray-600\">\n        {{ schema.description }}\n      </p>\n    </div>\n\n    <!-- Form sections -->\n    <div v-for=\"(section, sectionIndex) in formSections\" :key=\"section.id || sectionIndex\">\n      <!-- Section header -->\n      <div v-if=\"section.title || section.description\" class=\"sl-mb-4\">\n        <h3 v-if=\"section.title\" class=\"sl-text-md sl-font-medium sl-text-gray-900 sl-mb-1\">\n          {{ section.title }}\n        </h3>\n        <p v-if=\"section.description\" class=\"sl-text-sm sl-text-gray-600\">\n          {{ section.description }}\n        </p>\n      </div>\n\n      <!-- Section fields -->\n      <div :class=\"sectionClasses(section)\">\n        <div\n          v-for=\"field in section.fields\"\n          :key=\"field.name\"\n          :class=\"fieldClasses(field)\"\n        >\n          <!-- Conditional rendering -->\n          <SlDynamicFormField\n            v-if=\"shouldShowField(field)\"\n            :field=\"field\"\n            v-model=\"formData[field.name]\"\n            :form-data=\"formData\"\n            @field-change=\"handleFieldChange\"\n          />\n        </div>\n      </div>\n    </div>\n\n    <!-- Form actions -->\n    <div\n      v-if=\"showActions\"\n      :class=\"[\n        'sl-flex sl-gap-3',\n        actionsAlignment === 'center' ? 'sl-justify-center' :\n        actionsAlignment === 'right' ? 'sl-justify-end' :\n        'sl-justify-start'\n      ]\"\n    >\n      <SlButton\n        v-if=\"showCancelButton\"\n        variant=\"outline\"\n        :disabled=\"loading\"\n        type=\"button\"\n        @click=\"handleCancel\"\n      >\n        {{ cancelButtonText || 'Cancel' }}\n      </SlButton>\n      \n      <SlButton\n        :variant=\"submitButtonVariant\"\n        :loading=\"loading\"\n        :disabled=\"!isFormValid || loading\"\n        type=\"submit\"\n      >\n        {{ submitButtonText || 'Submit' }}\n      </SlButton>\n    </div>\n    \n    <!-- Form-level errors -->\n    <div v-if=\"formError\" class=\"sl-mt-4\">\n      <div class=\"sl-bg-red-50 sl-border sl-border-red-200 sl-rounded-md sl-p-4\">\n        <div class=\"sl-flex\">\n          <ExclamationCircleIcon class=\"sl-h-5 sl-w-5 sl-text-red-400\" />\n          <div class=\"sl-ml-3\">\n            <h3 class=\"sl-text-sm sl-font-medium sl-text-red-800\">\n              Form Error\n            </h3>\n            <div class=\"sl-mt-2 sl-text-sm sl-text-red-700\">\n              <p>{{ formError }}</p>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </form>\n</template>\n\n<script setup lang=\"ts\">\n/**\n * DynamicForm - Schema-driven form component\n * \n * Renders forms dynamically from a schema definition. Supports sections,\n * conditional fields, validation, and form-level error handling.\n * \n * ## Features\n * - Schema-driven form generation\n * - Multi-section support with columns\n * - Conditional field visibility\n * - vee-validate integration\n * - Field change callbacks\n * - Form-level error display\n * \n * ## Schema Structure\n * ```typescript\n * {\n *   title?: string,\n *   description?: string,\n *   sections: [\n *     {\n *       title?: string,\n *       columns?: 1 | 2 | 3,\n *       fields: [\n *         { name: 'email', type: 'text', label: 'Email', rules: schema }\n *       ]\n *     }\n *   ]\n * }\n * ```\n * \n * @module components/forms/DynamicForm\n * @see {@link DynamicFormSchema} for schema interface\n * @see {@link DynamicFormField} for field configuration\n */\nimport { computed, reactive, ref, watch } from 'vue'\nimport { useForm } from 'vee-validate'\nimport { ExclamationCircleIcon } from '@heroicons/vue/24/outline'\nimport SlButton from '../UiButton.vue'\nimport SlDynamicFormField from './DynamicFormField.vue'\nimport type { \n  DynamicFormSchema, \n  DynamicFormSection,\n  DynamicFormField,\n  ButtonVariant \n} from '../../types/form'\n\nimport type { FormData } from '../../types/form'\n\ninterface Props {\n  schema: DynamicFormSchema\n  modelValue?: FormData\n  loading?: boolean\n  showActions?: boolean\n  showCancelButton?: boolean\n  submitButtonText?: string\n  cancelButtonText?: string\n  submitButtonVariant?: ButtonVariant\n  actionsAlignment?: 'left' | 'center' | 'right'\n  formError?: string\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  showActions: true,\n  showCancelButton: false,\n  submitButtonVariant: 'primary',\n  actionsAlignment: 'right'\n})\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: FormData): void\n  (e: 'submit', data: FormData, ctx: { setErrors: (errors: Record<string, string>) => void }): void\n  (e: 'cancel'): void\n  (e: 'field-change', field: DynamicFormField, value: FormValue, formData: FormData): void\n}>()\n\nconst formRef = ref<HTMLFormElement>()\nconst formData = reactive<FormData>({})\n\n// Initialize form with vee-validate\nconst { handleSubmit: veeHandleSubmit, setErrors, errors, meta, validate: veeValidate, resetForm: veeResetForm, setFieldTouched } = useForm({\n  keepValuesOnUnmount: true\n})\n\n// Get default value based on field type\nconst getDefaultValue = (type: string) => {\n  switch (type) {\n    case 'checkbox':\n    case 'switch':\n      return false\n    case 'select':\n      return null\n    case 'number':\n      return 0\n    default:\n      return ''\n  }\n}\n\n// Initialize form data\nconst initializeFormData = () => {\n  const initialData = { ...props.modelValue } || {}\n  \n  // Set default values from schema\n  props.schema.sections.forEach(section => {\n    section.fields.forEach(field => {\n      if (!(field.name in initialData)) {\n        initialData[field.name] = field.defaultValue ?? getDefaultValue(field.type)\n      }\n    })\n  })\n  \n  Object.assign(formData, initialData)\n}\n\n// Watch for external changes to modelValue\nwatch(\n  () => props.modelValue,\n  (newValue) => {\n    if (newValue) {\n      Object.assign(formData, newValue)\n    }\n  },\n  { deep: true }\n)\n\n// Watch form data changes and emit updates\nwatch(\n  formData,\n  (newData) => {\n    emit('update:modelValue', { ...newData })\n  },\n  { deep: true }\n)\n\n// Initialize form data on mount\ninitializeFormData()\n\nconst formSections = computed(() => {\n  return props.schema.sections.filter(section => \n    section.condition ? section.condition(formData) : true\n  )\n})\n\nconst formClasses = computed(() => {\n  const baseClasses = ['sl-space-y-6']\n  \n  if (props.schema.className) {\n    baseClasses.push(props.schema.className)\n  }\n  \n  return baseClasses.join(' ')\n})\n\nconst sectionClasses = (section: DynamicFormSection) => {\n  const baseClasses = [\n    'sl-grid',\n    'sl-gap-4'\n  ]\n  \n  // Grid columns based on section layout\n  const columns = section.columns || 1\n  baseClasses.push(`sl-grid-cols-1`)\n  \n  if (columns > 1) {\n    baseClasses.push(`md:sl-grid-cols-${Math.min(columns, 3)}`)\n  }\n  \n  if (section.className) {\n    baseClasses.push(section.className)\n  }\n  \n  return baseClasses.join(' ')\n}\n\nconst fieldClasses = (field: DynamicFormField) => {\n  const baseClasses: string[] = []\n  \n  // Field span\n  if (field.colSpan && field.colSpan > 1) {\n    baseClasses.push(`sl-col-span-${Math.min(field.colSpan, 3)}`)\n  }\n  \n  if (field.className) {\n    baseClasses.push(field.className)\n  }\n  \n  return baseClasses.join(' ')\n}\n\nconst shouldShowField = (field: DynamicFormField): boolean => {\n  if (field.condition) {\n    return field.condition(formData, field)\n  }\n  return true\n}\n\nconst isFormValid = computed(() => {\n  return meta.value.valid\n})\n\nconst handleSubmit = veeHandleSubmit((values) => {\n  emit('submit', values, { setErrors })\n})\n\nconst handleCancel = () => {\n  emit('cancel')\n}\n\nconst handleFieldChange = (field: DynamicFormField, value: FormValue) => {\n  emit('field-change', field, value, formData)\n  \n  // Handle field dependencies\n  if (field.onFieldChange) {\n    field.onFieldChange(value, field, formData)\n  }\n}\n\n// Expose form methods matching DynamicFormRef interface\n\n/** Submit the form */\nconst submitForm = async (): Promise<void> => {\n  await handleSubmit()\n}\n\n/** Reset form to initial values */\nconst resetForm = (): void => {\n  veeResetForm()\n  Object.keys(formData).forEach(key => {\n    delete formData[key]\n  })\n  initializeFormData()\n}\n\n/** Build FormValidationResult from current state */\nconst buildValidationResult = (): { valid: boolean; errors: Record<string, string>; values: FormData } => {\n  // Filter out undefined values from errors\n  const filteredErrors: Record<string, string> = {}\n  for (const [key, value] of Object.entries(errors.value)) {\n    if (value !== undefined) {\n      filteredErrors[key] = value\n    }\n  }\n  return {\n    valid: meta.value.valid,\n    errors: filteredErrors,\n    values: { ...formData }\n  }\n}\n\n/** Validate form and return result */\nconst validateForm = async (): Promise<{ valid: boolean; errors: Record<string, string>; values: FormData }> => {\n  await veeValidate()\n  return buildValidationResult()\n}\n\n/** Validate including nested forms */\nconst validateWithChildren = async (): Promise<{ valid: boolean; errors: Record<string, string>; values: FormData }> => {\n  // For now, same as validateForm since we don't have nested form support yet\n  await veeValidate()\n  return buildValidationResult()\n}\n\n/** Trigger pseudo-submit (validate without actual submit) */\nconst handlePseudoSubmit = async (): Promise<void> => {\n  await veeValidate()\n}\n\n/** Get current form metadata */\nconst getFormMeta = () => {\n  return {\n    valid: meta.value.valid,\n    dirty: meta.value.dirty,\n    touched: meta.value.touched,\n    pending: meta.value.pending\n  }\n}\n\n/** Set touched state for all fields */\nconst setTouched = (value: boolean): void => {\n  props.schema.sections.forEach(section => {\n    section.fields.forEach(field => {\n      setFieldTouched(field.name, value)\n    })\n  })\n}\n\n/** Highlight a field with an error */\nconst highlightFieldWithError = (fieldName: string, message?: string): void => {\n  if (message) {\n    setErrors({ [fieldName]: message })\n  }\n  setFieldTouched(fieldName, true)\n}\n\n/** Clear field errors */\nconst clearFieldErrors = (fieldName?: string): void => {\n  if (fieldName) {\n    setErrors({ [fieldName]: '' })\n  } else {\n    const clearedErrors: Record<string, string> = {}\n    Object.keys(errors.value).forEach(key => {\n      clearedErrors[key] = ''\n    })\n    setErrors(clearedErrors)\n  }\n}\n\n/** Get current validation errors */\nconst getCurrentErrors = (): Record<string, string> => {\n  // Filter out undefined values from errors\n  const filteredErrors: Record<string, string> = {}\n  for (const [key, value] of Object.entries(errors.value)) {\n    if (value !== undefined) {\n      filteredErrors[key] = value\n    }\n  }\n  return filteredErrors\n}\n\n// Legacy methods for backwards compatibility\nconst setFieldValue = (fieldName: string, value: any) => {\n  formData[fieldName] = value\n}\n\nconst getFieldValue = (fieldName: string) => {\n  return formData[fieldName]\n}\n\ndefineExpose({\n  // DynamicFormRef interface methods\n  submitForm,\n  resetForm,\n  validateForm,\n  validateWithChildren,\n  handlePseudoSubmit,\n  getFormMeta,\n  setTouched,\n  highlightFieldWithError,\n  clearFieldErrors,\n  getCurrentErrors,\n  // Legacy/additional methods\n  validate: validateForm,\n  reset: resetForm,\n  setFieldValue,\n  getFieldValue,\n  formData,\n  formRef\n})\n</script>\n"],"names":["props","__props","emit","__emit","formRef","ref","formData","reactive","veeHandleSubmit","setErrors","errors","meta","veeValidate","veeResetForm","setFieldTouched","useForm","getDefaultValue","type","initializeFormData","initialData","section","field","watch","newValue","newData","formSections","computed","formClasses","baseClasses","sectionClasses","columns","fieldClasses","shouldShowField","isFormValid","handleSubmit","values","handleCancel","handleFieldChange","value","submitForm","resetForm","key","buildValidationResult","filteredErrors","validateForm","__expose","fieldName","message","clearedErrors","_createElementBlock","_cache","_withModifiers","_unref","args","_openBlock","_hoisted_1","_hoisted_2","_toDisplayString","_hoisted_3","_Fragment","_renderList","sectionIndex","_hoisted_4","_hoisted_5","_hoisted_6","_createElementVNode","_normalizeClass","_createBlock","SlDynamicFormField","$event","SlButton","_createVNode","_hoisted_7","_hoisted_8","_hoisted_9","ExclamationCircleIcon","_hoisted_10","_hoisted_11"],"mappings":"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"}
+{"version":3,"file":"DynamicForm.vue_vue_type_script_setup_true_lang-CxSaO5Cl.js","sources":["../src/components/forms/DynamicForm.vue"],"sourcesContent":["<!--\n  @component DynamicForm\n  @description Schema-driven form component with validation.\n  \n  Renders forms from a schema definition with sections, fields, conditional\n  visibility, and integrated validation via vee-validate.\n  \n  @props\n  - schema (DynamicFormSchema, required): Form schema with sections and fields\n  - modelValue (object, optional): Form data via v-model\n  - loading (boolean, optional): Loading state for submit button\n  - showActions (boolean, optional): Show submit/cancel buttons\n  - showCancelButton (boolean, optional): Show cancel button\n  - submitButtonText (string, optional): Submit button text\n  - cancelButtonText (string, optional): Cancel button text\n  - actionsAlignment (string, optional): Button alignment - left/center/right\n  - formError (string, optional): Form-level error message\n  \n  @emits\n  - update:modelValue: Emitted when form data changes\n  - submit: Emitted on form submit with data and error setter\n  - cancel: Emitted when cancel is clicked\n  - field-change: Emitted when any field value changes\n  \n  @exposes\n  - validate(): Promise<boolean> - Validate form and return validity\n  - reset(): void - Reset form to initial values\n  - setFieldValue(name, value): void - Set a field value\n  - getFieldValue(name): any - Get a field value\n  - formData: Record<string, any> - Current form data\n  \n  @example\n  <DynamicForm\n    :schema=\"formSchema\"\n    v-model=\"formData\"\n    @submit=\"handleSubmit\"\n    @cancel=\"handleCancel\"\n  />\n-->\n<template>\n  <form\n    ref=\"formRef\"\n    :class=\"formClasses\"\n    @submit.prevent=\"handleSubmit\"\n  >\n    <!-- Form title and description -->\n    <div v-if=\"schema.title || schema.description\" class=\"sl-mb-6\">\n      <h2 v-if=\"schema.title\" class=\"sl-text-lg sl-font-semibold sl-text-gray-900 sl-mb-2\">\n        {{ schema.title }}\n      </h2>\n      <p v-if=\"schema.description\" class=\"sl-text-sm sl-text-gray-600\">\n        {{ schema.description }}\n      </p>\n    </div>\n\n    <!-- Form sections -->\n    <div v-for=\"(section, sectionIndex) in formSections\" :key=\"section.id || sectionIndex\">\n      <!-- Section header -->\n      <div v-if=\"section.title || section.description\" class=\"sl-mb-4\">\n        <h3 v-if=\"section.title\" class=\"sl-text-md sl-font-medium sl-text-gray-900 sl-mb-1\">\n          {{ section.title }}\n        </h3>\n        <p v-if=\"section.description\" class=\"sl-text-sm sl-text-gray-600\">\n          {{ section.description }}\n        </p>\n      </div>\n\n      <!-- Section fields -->\n      <div :class=\"sectionClasses(section)\">\n        <div\n          v-for=\"field in section.fields\"\n          :key=\"field.name\"\n          :class=\"fieldClasses(field)\"\n        >\n          <!-- Conditional rendering -->\n          <SlDynamicFormField\n            v-if=\"shouldShowField(field)\"\n            :field=\"field\"\n            v-model=\"formData[field.name]\"\n            :form-data=\"formData\"\n            @field-change=\"handleFieldChange\"\n          />\n        </div>\n      </div>\n    </div>\n\n    <!-- Form actions -->\n    <div\n      v-if=\"showActions\"\n      :class=\"[\n        'sl-flex sl-gap-3',\n        actionsAlignment === 'center' ? 'sl-justify-center' :\n        actionsAlignment === 'right' ? 'sl-justify-end' :\n        'sl-justify-start'\n      ]\"\n    >\n      <SlButton\n        v-if=\"showCancelButton\"\n        variant=\"outline\"\n        :disabled=\"loading\"\n        type=\"button\"\n        @click=\"handleCancel\"\n      >\n        {{ cancelButtonText || 'Cancel' }}\n      </SlButton>\n      \n      <SlButton\n        :variant=\"submitButtonVariant\"\n        :loading=\"loading\"\n        :disabled=\"!isFormValid || loading\"\n        type=\"submit\"\n      >\n        {{ submitButtonText || 'Submit' }}\n      </SlButton>\n    </div>\n    \n    <!-- Form-level errors -->\n    <div v-if=\"formError\" class=\"sl-mt-4\">\n      <div class=\"sl-bg-red-50 sl-border sl-border-red-200 sl-rounded-md sl-p-4\">\n        <div class=\"sl-flex\">\n          <ExclamationCircleIcon class=\"sl-h-5 sl-w-5 sl-text-red-400\" />\n          <div class=\"sl-ml-3\">\n            <h3 class=\"sl-text-sm sl-font-medium sl-text-red-800\">\n              Form Error\n            </h3>\n            <div class=\"sl-mt-2 sl-text-sm sl-text-red-700\">\n              <p>{{ formError }}</p>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </form>\n</template>\n\n<script setup lang=\"ts\">\n/**\n * DynamicForm - Schema-driven form component\n * \n * Renders forms dynamically from a schema definition. Supports sections,\n * conditional fields, validation, and form-level error handling.\n * \n * ## Features\n * - Schema-driven form generation\n * - Multi-section support with columns\n * - Conditional field visibility\n * - vee-validate integration\n * - Field change callbacks\n * - Form-level error display\n * \n * ## Schema Structure\n * ```typescript\n * {\n *   title?: string,\n *   description?: string,\n *   sections: [\n *     {\n *       title?: string,\n *       columns?: 1 | 2 | 3,\n *       fields: [\n *         { name: 'email', type: 'text', label: 'Email', rules: schema }\n *       ]\n *     }\n *   ]\n * }\n * ```\n * \n * @module components/forms/DynamicForm\n * @see {@link DynamicFormSchema} for schema interface\n * @see {@link DynamicFormField} for field configuration\n */\nimport { computed, reactive, ref, watch } from 'vue'\nimport { useForm } from 'vee-validate'\nimport { ExclamationCircleIcon } from '@heroicons/vue/24/outline'\nimport SlButton from '../UiButton.vue'\nimport SlDynamicFormField from './DynamicFormField.vue'\nimport type { \n  DynamicFormSchema, \n  DynamicFormSection,\n  DynamicFormField,\n  ButtonVariant \n} from '../../types/form'\n\nimport type { FormData, FormValue } from '../../types/form'\n\ninterface Props {\n  schema: DynamicFormSchema\n  modelValue?: FormData\n  loading?: boolean\n  showActions?: boolean\n  showCancelButton?: boolean\n  submitButtonText?: string\n  cancelButtonText?: string\n  submitButtonVariant?: ButtonVariant\n  actionsAlignment?: 'left' | 'center' | 'right'\n  formError?: string\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  showActions: true,\n  showCancelButton: false,\n  submitButtonVariant: 'primary',\n  actionsAlignment: 'right'\n})\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: FormData): void\n  (e: 'submit', data: FormData, ctx: { setErrors: (errors: Record<string, string>) => void }): void\n  (e: 'cancel'): void\n  (e: 'field-change', field: DynamicFormField, value: FormValue, formData: FormData): void\n}>()\n\nconst formRef = ref<HTMLFormElement>()\nconst formData = reactive<FormData>({})\n\n// Initialize form with vee-validate\nconst { handleSubmit: veeHandleSubmit, setErrors, errors, meta, validate: veeValidate, resetForm: veeResetForm, setFieldTouched } = useForm({\n  keepValuesOnUnmount: true\n})\n\n// Get default value based on field type\nconst getDefaultValue = (type: string) => {\n  switch (type) {\n    case 'checkbox':\n    case 'switch':\n      return false\n    case 'select':\n      return null\n    case 'number':\n      return 0\n    default:\n      return ''\n  }\n}\n\n// Initialize form data\nconst initializeFormData = () => {\n  const initialData = { ...props.modelValue } || {}\n  \n  // Set default values from schema\n  props.schema.sections.forEach(section => {\n    section.fields.forEach(field => {\n      if (!(field.name in initialData)) {\n        initialData[field.name] = field.defaultValue ?? getDefaultValue(field.type)\n      }\n    })\n  })\n  \n  Object.assign(formData, initialData)\n}\n\n// Watch for external changes to modelValue\nwatch(\n  () => props.modelValue,\n  (newValue) => {\n    if (newValue) {\n      Object.assign(formData, newValue)\n    }\n  },\n  { deep: true }\n)\n\n// Watch form data changes and emit updates\nwatch(\n  formData,\n  (newData) => {\n    emit('update:modelValue', { ...newData })\n  },\n  { deep: true }\n)\n\n// Initialize form data on mount\ninitializeFormData()\n\nconst formSections = computed(() => {\n  return props.schema.sections.filter(section => \n    section.condition ? section.condition(formData) : true\n  )\n})\n\nconst formClasses = computed(() => {\n  const baseClasses = ['sl-space-y-6']\n  \n  if (props.schema.className) {\n    baseClasses.push(props.schema.className)\n  }\n  \n  return baseClasses.join(' ')\n})\n\nconst sectionClasses = (section: DynamicFormSection) => {\n  const baseClasses = [\n    'sl-grid',\n    'sl-gap-4'\n  ]\n  \n  // Grid columns based on section layout\n  const columns = section.columns || 1\n  baseClasses.push(`sl-grid-cols-1`)\n  \n  if (columns > 1) {\n    baseClasses.push(`md:sl-grid-cols-${Math.min(columns, 3)}`)\n  }\n  \n  if (section.className) {\n    baseClasses.push(section.className)\n  }\n  \n  return baseClasses.join(' ')\n}\n\nconst fieldClasses = (field: DynamicFormField) => {\n  const baseClasses: string[] = []\n  \n  // Field span\n  if (field.colSpan && field.colSpan > 1) {\n    baseClasses.push(`sl-col-span-${Math.min(field.colSpan, 3)}`)\n  }\n  \n  if (field.className) {\n    baseClasses.push(field.className)\n  }\n  \n  return baseClasses.join(' ')\n}\n\nconst shouldShowField = (field: DynamicFormField): boolean => {\n  if (field.condition) {\n    return field.condition(formData, field)\n  }\n  return true\n}\n\nconst isFormValid = computed(() => {\n  return meta.value.valid\n})\n\nconst handleSubmit = veeHandleSubmit((values) => {\n  emit('submit', values, { setErrors })\n})\n\nconst handleCancel = () => {\n  emit('cancel')\n}\n\nconst handleFieldChange = (field: DynamicFormField, value: FormValue) => {\n  emit('field-change', field, value, formData)\n  \n  // Handle field dependencies\n  if (field.onFieldChange) {\n    field.onFieldChange(value, field, formData)\n  }\n}\n\n// Expose form methods matching DynamicFormRef interface\n\n/** Submit the form */\nconst submitForm = async (): Promise<void> => {\n  await handleSubmit()\n}\n\n/** Reset form to initial values */\nconst resetForm = (): void => {\n  veeResetForm()\n  Object.keys(formData).forEach(key => {\n    delete formData[key]\n  })\n  initializeFormData()\n}\n\n/** Build FormValidationResult from current state */\nconst buildValidationResult = (): { valid: boolean; errors: Record<string, string>; values: FormData } => {\n  // Filter out undefined values from errors\n  const filteredErrors: Record<string, string> = {}\n  for (const [key, value] of Object.entries(errors.value)) {\n    if (value !== undefined) {\n      filteredErrors[key] = value\n    }\n  }\n  return {\n    valid: meta.value.valid,\n    errors: filteredErrors,\n    values: { ...formData }\n  }\n}\n\n/** Validate form and return result */\nconst validateForm = async (): Promise<{ valid: boolean; errors: Record<string, string>; values: FormData }> => {\n  await veeValidate()\n  return buildValidationResult()\n}\n\n/** Validate including nested forms */\nconst validateWithChildren = async (): Promise<{ valid: boolean; errors: Record<string, string>; values: FormData }> => {\n  // For now, same as validateForm since we don't have nested form support yet\n  await veeValidate()\n  return buildValidationResult()\n}\n\n/** Trigger pseudo-submit (validate without actual submit) */\nconst handlePseudoSubmit = async (): Promise<void> => {\n  await veeValidate()\n}\n\n/** Get current form metadata */\nconst getFormMeta = () => {\n  return {\n    valid: meta.value.valid,\n    dirty: meta.value.dirty,\n    touched: meta.value.touched,\n    pending: meta.value.pending\n  }\n}\n\n/** Set touched state for all fields */\nconst setTouched = (value: boolean): void => {\n  props.schema.sections.forEach(section => {\n    section.fields.forEach(field => {\n      setFieldTouched(field.name, value)\n    })\n  })\n}\n\n/** Highlight a field with an error */\nconst highlightFieldWithError = (fieldName: string, message?: string): void => {\n  if (message) {\n    setErrors({ [fieldName]: message })\n  }\n  setFieldTouched(fieldName, true)\n}\n\n/** Clear field errors */\nconst clearFieldErrors = (fieldName?: string): void => {\n  if (fieldName) {\n    setErrors({ [fieldName]: '' })\n  } else {\n    const clearedErrors: Record<string, string> = {}\n    Object.keys(errors.value).forEach(key => {\n      clearedErrors[key] = ''\n    })\n    setErrors(clearedErrors)\n  }\n}\n\n/** Get current validation errors */\nconst getCurrentErrors = (): Record<string, string> => {\n  // Filter out undefined values from errors\n  const filteredErrors: Record<string, string> = {}\n  for (const [key, value] of Object.entries(errors.value)) {\n    if (value !== undefined) {\n      filteredErrors[key] = value\n    }\n  }\n  return filteredErrors\n}\n\n// Legacy methods for backwards compatibility\nconst setFieldValue = (fieldName: string, value: any) => {\n  formData[fieldName] = value\n}\n\nconst getFieldValue = (fieldName: string) => {\n  return formData[fieldName]\n}\n\ndefineExpose({\n  // DynamicFormRef interface methods\n  submitForm,\n  resetForm,\n  validateForm,\n  validateWithChildren,\n  handlePseudoSubmit,\n  getFormMeta,\n  setTouched,\n  highlightFieldWithError,\n  clearFieldErrors,\n  getCurrentErrors,\n  // Legacy/additional methods\n  validate: validateForm,\n  reset: resetForm,\n  setFieldValue,\n  getFieldValue,\n  formData,\n  formRef\n})\n</script>\n"],"names":["props","__props","emit","__emit","formRef","ref","formData","reactive","veeHandleSubmit","setErrors","errors","meta","veeValidate","veeResetForm","setFieldTouched","useForm","getDefaultValue","type","initializeFormData","initialData","section","field","watch","newValue","newData","formSections","computed","formClasses","baseClasses","sectionClasses","columns","fieldClasses","shouldShowField","isFormValid","handleSubmit","values","handleCancel","handleFieldChange","value","submitForm","resetForm","key","buildValidationResult","filteredErrors","validateForm","__expose","fieldName","message","clearedErrors","_createElementBlock","_cache","_withModifiers","_unref","args","_openBlock","_hoisted_1","_hoisted_2","_toDisplayString","_hoisted_3","_Fragment","_renderList","sectionIndex","_hoisted_4","_hoisted_5","_hoisted_6","_createElementVNode","_normalizeClass","_createBlock","SlDynamicFormField","$event","SlButton","_createVNode","_hoisted_7","_hoisted_8","_hoisted_9","ExclamationCircleIcon","_hoisted_10","_hoisted_11"],"mappings":"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"}

package/dist/DynamicFormField.vue_vue_type_script_setup_true_lang-CSLSRFM7.js.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicFormField.vue_vue_type_script_setup_true_lang-CSLSRFM7.js","sources":["../src/components/forms/DynamicFormField.vue"],"sourcesContent":["<!--\n  @component DynamicFormField\n  @description Renders a single field based on field configuration.\n  \n  Used by DynamicForm to render individual fields. Maps field type to\n  appropriate input component and passes configuration props.\n  \n  @props\n  - field (DynamicFormField, required): Field configuration object\n  - modelValue (any, optional): Field value via v-model\n  - formData (object, optional): Complete form data for conditional logic\n  \n  @emits\n  - update:modelValue: Emitted when field value changes\n  - field-change: Emitted with field and value on change\n  \n  @example\n  <DynamicFormField\n    :field=\"{ name: 'email', type: 'email', label: 'Email' }\"\n    v-model=\"formData.email\"\n  />\n-->\n<template>\n  <component\n    :is=\"fieldComponent\"\n    v-if=\"fieldComponent\"\n    v-bind=\"componentProps\"\n    v-on=\"componentEvents\"\n    :model-value=\"fieldValue\"\n    @update:model-value=\"handleFieldChange\"\n  />\n  \n  <!-- Fallback for unknown field types -->\n  <div \n    v-else\n    class=\"sl-p-4 sl-bg-yellow-50 sl-border sl-border-yellow-200 sl-rounded-md\"\n  >\n    <div class=\"sl-flex\">\n      <ExclamationTriangleIcon class=\"sl-h-5 sl-w-5 sl-text-yellow-400\" />\n      <div class=\"sl-ml-3\">\n        <h3 class=\"sl-text-sm sl-font-medium sl-text-yellow-800\">\n          Unknown field type\n        </h3>\n        <div class=\"sl-mt-2 sl-text-sm sl-text-yellow-700\">\n          <p>Field type \"{{ field.type }}\" is not supported.</p>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\n/**\n * DynamicFormField - Field renderer for DynamicForm\n * \n * Dynamically loads and renders the appropriate input component based on\n * the field type configuration. Handles prop mapping and event forwarding.\n * \n * ## Supported Field Types\n * - text, email, password, number, tel, url → UiTextInput\n * - textarea → TextAreaInput\n * - select → SelectInput\n * - combobox → ComboboxInput\n * - checkbox → CheckboxInput\n * - switch → SwitchInput\n * \n * @module components/forms/DynamicFormField\n * @see {@link DynamicFormField} for field configuration\n */\nimport { computed, defineAsyncComponent } from 'vue'\nimport UiTextInput from '../inputs/TextInput.vue'\nimport { ExclamationTriangleIcon } from '@heroicons/vue/24/outline'\nimport type { DynamicFormField, FormData, FormValue } from '../../types/form'\n\ninterface Props {\n  field: DynamicFormField\n  modelValue?: FormValue\n  formData?: FormData\n}\n\nconst props = defineProps<Props>()\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: FormValue]\n  'field-change': [field: DynamicFormField, value: FormValue]\n}>()\n\n// Component mapping for dynamic loading\nconst componentMap: Record<string, () => Promise<unknown>> = {\n  text: () => Promise.resolve(UiTextInput),\n  email: () => Promise.resolve(UiTextInput), \n  password: () => Promise.resolve(UiTextInput),\n  number: () => Promise.resolve(UiTextInput),\n  tel: () => Promise.resolve(UiTextInput),\n  url: () => Promise.resolve(UiTextInput),\n  textarea: () => import('../inputs/TextAreaInput.vue'),\n  select: () => import('../inputs/SelectInput.vue'),\n  combobox: () => import('../inputs/ComboboxInput.vue'),\n  checkbox: () => import('../inputs/CheckboxInput.vue'),\n  switch: () => import('../inputs/SwitchInput.vue'),\n}\n\nconst fieldComponent = computed(() => {\n  const componentLoader = componentMap[props.field.type]\n  if (componentLoader) {\n    return defineAsyncComponent({\n      loader: componentLoader,\n      errorComponent: () => null,\n      delay: 0\n    })\n  }\n  return null\n})\n\nconst fieldValue = computed({\n  get: () => props.modelValue ?? props.field.defaultValue ?? getDefaultValue(),\n  set: (value) => {\n    emit('update:modelValue', value)\n    emit('field-change', props.field, value)\n  }\n})\n\nconst componentProps = computed(() => {\n  const baseProps: Record<string, unknown> = {\n    name: props.field.name,\n    label: props.field.label,\n    placeholder: props.field.placeholder,\n    disabled: props.field.disabled,\n    rules: props.field.validation,\n    validateOnMount: props.field.validateOnMount,\n    tertiaryLabel: props.field.tertiaryLabel,\n    successMessage: props.field.successMessage\n  }\n\n  // Type-specific props\n  switch (props.field.type) {\n    case 'text':\n    case 'email':\n    case 'password':\n    case 'number':\n    case 'tel':\n    case 'url':\n      return {\n        ...baseProps,\n        type: props.field.inputType || props.field.type,\n        maxlength: props.field.maxLength,\n        minlength: props.field.minLength,\n        min: props.field.min,\n        max: props.field.max,\n        step: props.field.step,\n        spellcheck: props.field.spellcheck,\n        autocomplete: props.field.autocomplete\n      }\n    \n    case 'textarea':\n      return {\n        ...baseProps,\n        rows: props.field.rows,\n        maxlength: props.field.maxLength,\n        spellcheck: props.field.spellcheck\n      }\n    \n    case 'select':\n      return {\n        ...baseProps,\n        items: props.field.options || [],\n        multiple: props.field.multiple,\n        itemKey: props.field.optionKey || 'value',\n        itemText: props.field.optionLabel || 'label',\n        showAll: props.field.showSelectAll\n      }\n    \n    case 'combobox':\n      return {\n        ...baseProps,\n        items: props.field.options || [],\n        itemKey: props.field.optionKey || 'value',\n        itemText: props.field.optionLabel || 'label',\n        customQuery: props.field.customQuery,\n        loading: props.field.loading\n      }\n    \n    case 'checkbox':\n      return {\n        ...baseProps,\n        description: props.field.description,\n        immediate: props.field.immediate ?? true,\n        isDescriptionHtml: props.field.isDescriptionHtml\n      }\n    \n    case 'switch':\n      return {\n        ...baseProps,\n        description: props.field.description,\n        immediate: props.field.immediate ?? true,\n        boxShadow: props.field.boxShadow,\n        hideMainLabel: props.field.hideMainLabel,\n        textTrue: props.field.textTrue,\n        textFalse: props.field.textFalse\n      }\n    \n    default:\n      return baseProps\n  }\n})\n\nconst componentEvents = computed(() => {\n  const baseEvents: Record<string, Function> = {}\n  \n  // Add event handlers based on field configuration\n  if (props.field.onBlur) {\n    baseEvents.blur = props.field.onBlur\n  }\n  \n  if (props.field.onFocus) {\n    baseEvents.focus = props.field.onFocus\n  }\n  \n  if (props.field.onChange) {\n    baseEvents['update:modelValue'] = (value: any) => {\n      fieldValue.value = value\n      props.field.onChange?.(value, props.field, props.formData ?? {})\n    }\n  }\n  \n  return baseEvents\n})\n\nconst getDefaultValue = () => {\n  switch (props.field.type) {\n    case 'checkbox':\n    case 'switch':\n      return false\n    case 'select':\n      return props.field.multiple ? [] : null\n    case 'number':\n      return props.field.min || 0\n    default:\n      return ''\n  }\n}\n\nconst handleFieldChange = (value: any) => {\n  fieldValue.value = value\n}\n</script>\n"],"names":["props","__props","emit","__emit","componentMap","UiTextInput","fieldComponent","computed","componentLoader","defineAsyncComponent","fieldValue","getDefaultValue","value","componentProps","baseProps","componentEvents","baseEvents","handleFieldChange","_createBlock","_resolveDynamicComponent","_mergeProps","_toHandlers","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_hoisted_2","_createVNode","_unref","ExclamationTriangleIcon","_hoisted_3","_cache","_hoisted_4","_toDisplayString"],"mappings":"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"}
+{"version":3,"file":"DynamicFormField.vue_vue_type_script_setup_true_lang-CSLSRFM7.js","sources":["../src/components/forms/DynamicFormField.vue"],"sourcesContent":["<!--\n  @component DynamicFormField\n  @description Renders a single field based on field configuration.\n  \n  Used by DynamicForm to render individual fields. Maps field type to\n  appropriate input component and passes configuration props.\n  \n  @props\n  - field (DynamicFormField, required): Field configuration object\n  - modelValue (any, optional): Field value via v-model\n  - formData (object, optional): Complete form data for conditional logic\n  \n  @emits\n  - update:modelValue: Emitted when field value changes\n  - field-change: Emitted with field and value on change\n  \n  @example\n  <DynamicFormField\n    :field=\"{ name: 'email', type: 'email', label: 'Email' }\"\n    v-model=\"formData.email\"\n  />\n-->\n<template>\n  <component\n    :is=\"fieldComponent\"\n    v-if=\"fieldComponent\"\n    v-bind=\"componentProps\"\n    v-on=\"componentEvents\"\n    :model-value=\"fieldValue\"\n    @update:model-value=\"handleFieldChange\"\n  />\n  \n  <!-- Fallback for unknown field types -->\n  <div \n    v-else\n    class=\"sl-p-4 sl-bg-yellow-50 sl-border sl-border-yellow-200 sl-rounded-md\"\n  >\n    <div class=\"sl-flex\">\n      <ExclamationTriangleIcon class=\"sl-h-5 sl-w-5 sl-text-yellow-400\" />\n      <div class=\"sl-ml-3\">\n        <h3 class=\"sl-text-sm sl-font-medium sl-text-yellow-800\">\n          Unknown field type\n        </h3>\n        <div class=\"sl-mt-2 sl-text-sm sl-text-yellow-700\">\n          <p>Field type \"{{ field.type }}\" is not supported.</p>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\n/**\n * DynamicFormField - Field renderer for DynamicForm\n * \n * Dynamically loads and renders the appropriate input component based on\n * the field type configuration. Handles prop mapping and event forwarding.\n * \n * ## Supported Field Types\n * - text, email, password, number, tel, url → UiTextInput\n * - textarea → TextAreaInput\n * - select → SelectInput\n * - combobox → ComboboxInput\n * - checkbox → CheckboxInput\n * - switch → SwitchInput\n * \n * @module components/forms/DynamicFormField\n * @see {@link DynamicFormField} for field configuration\n */\nimport { computed, defineAsyncComponent } from 'vue'\nimport UiTextInput from '../inputs/TextInput.vue'\nimport { ExclamationTriangleIcon } from '@heroicons/vue/24/outline'\nimport type { DynamicFormField, FormData, FormValue } from '../../types/form'\n\ninterface Props {\n  field: DynamicFormField\n  modelValue?: FormValue\n  formData?: FormData\n}\n\nconst props = defineProps<Props>()\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: FormValue]\n  'field-change': [field: DynamicFormField, value: FormValue]\n}>()\n\nimport type { Component } from 'vue';\n\n// Component mapping for dynamic loading\nconst componentMap: Record<string, () => Promise<Component>> = {\n  text: () => Promise.resolve(UiTextInput as Component),\n  email: () => Promise.resolve(UiTextInput as Component), \n  password: () => Promise.resolve(UiTextInput as Component),\n  number: () => Promise.resolve(UiTextInput as Component),\n  tel: () => Promise.resolve(UiTextInput as Component),\n  url: () => Promise.resolve(UiTextInput as Component),\n  textarea: () => import('../inputs/TextAreaInput.vue') as Promise<Component>,\n  select: () => import('../inputs/SelectInput.vue') as Promise<Component>,\n  combobox: () => import('../inputs/ComboboxInput.vue') as Promise<Component>,\n  checkbox: () => import('../inputs/CheckboxInput.vue') as Promise<Component>,\n  switch: () => import('../inputs/SwitchInput.vue') as Promise<Component>,\n}\n\nconst fieldComponent = computed(() => {\n  const componentLoader = componentMap[props.field.type]\n  if (componentLoader) {\n    return defineAsyncComponent({\n      loader: componentLoader,\n      errorComponent: () => null,\n      delay: 0\n    })\n  }\n  return null\n})\n\nconst fieldValue = computed({\n  get: () => props.modelValue ?? props.field.defaultValue ?? getDefaultValue(),\n  set: (value) => {\n    emit('update:modelValue', value)\n    emit('field-change', props.field, value)\n  }\n})\n\nconst componentProps = computed(() => {\n  const baseProps: Record<string, unknown> = {\n    name: props.field.name,\n    label: props.field.label,\n    placeholder: props.field.placeholder,\n    disabled: props.field.disabled,\n    rules: props.field.validation,\n    validateOnMount: props.field.validateOnMount,\n    tertiaryLabel: props.field.tertiaryLabel,\n    successMessage: props.field.successMessage\n  }\n\n  // Type-specific props\n  switch (props.field.type) {\n    case 'text':\n    case 'email':\n    case 'password':\n    case 'number':\n    case 'tel':\n    case 'url':\n      return {\n        ...baseProps,\n        type: props.field.inputType || props.field.type,\n        maxlength: props.field.maxLength,\n        minlength: props.field.minLength,\n        min: props.field.min,\n        max: props.field.max,\n        step: props.field.step,\n        spellcheck: props.field.spellcheck,\n        autocomplete: props.field.autocomplete\n      }\n    \n    case 'textarea':\n      return {\n        ...baseProps,\n        rows: props.field.rows,\n        maxlength: props.field.maxLength,\n        spellcheck: props.field.spellcheck\n      }\n    \n    case 'select':\n      return {\n        ...baseProps,\n        items: props.field.options || [],\n        multiple: props.field.multiple,\n        itemKey: props.field.optionKey || 'value',\n        itemText: props.field.optionLabel || 'label',\n        showAll: props.field.showSelectAll\n      }\n    \n    case 'combobox':\n      return {\n        ...baseProps,\n        items: props.field.options || [],\n        itemKey: props.field.optionKey || 'value',\n        itemText: props.field.optionLabel || 'label',\n        customQuery: props.field.customQuery,\n        loading: props.field.loading\n      }\n    \n    case 'checkbox':\n      return {\n        ...baseProps,\n        description: props.field.description,\n        immediate: props.field.immediate ?? true,\n        isDescriptionHtml: props.field.isDescriptionHtml\n      }\n    \n    case 'switch':\n      return {\n        ...baseProps,\n        description: props.field.description,\n        immediate: props.field.immediate ?? true,\n        boxShadow: props.field.boxShadow,\n        hideMainLabel: props.field.hideMainLabel,\n        textTrue: props.field.textTrue,\n        textFalse: props.field.textFalse\n      }\n    \n    default:\n      return baseProps\n  }\n})\n\nconst componentEvents = computed(() => {\n  const baseEvents: Record<string, Function> = {}\n  \n  // Add event handlers based on field configuration\n  if (props.field.onBlur) {\n    baseEvents.blur = props.field.onBlur\n  }\n  \n  if (props.field.onFocus) {\n    baseEvents.focus = props.field.onFocus\n  }\n  \n  if (props.field.onChange) {\n    baseEvents['update:modelValue'] = (value: any) => {\n      fieldValue.value = value\n      props.field.onChange?.(value, props.field, props.formData ?? {})\n    }\n  }\n  \n  return baseEvents\n})\n\nconst getDefaultValue = () => {\n  switch (props.field.type) {\n    case 'checkbox':\n    case 'switch':\n      return false\n    case 'select':\n      return props.field.multiple ? [] : null\n    case 'number':\n      return props.field.min || 0\n    default:\n      return ''\n  }\n}\n\nconst handleFieldChange = (value: any) => {\n  fieldValue.value = value\n}\n</script>\n"],"names":["props","__props","emit","__emit","componentMap","UiTextInput","fieldComponent","computed","componentLoader","defineAsyncComponent","fieldValue","getDefaultValue","value","componentProps","baseProps","componentEvents","baseEvents","handleFieldChange","_createBlock","_resolveDynamicComponent","_mergeProps","_toHandlers","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_hoisted_2","_createVNode","_unref","ExclamationTriangleIcon","_hoisted_3","_cache","_hoisted_4","_toDisplayString"],"mappings":"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"}

package/dist/{EmptyState.vue_vue_type_script_setup_true_lang-Dxy-cLPT.js → EmptyState.vue_vue_type_script_setup_true_lang-7mcKkOWP.js}

@@ -1,8 +1,8 @@
-import { defineComponent as u, createElementBlock as l, openBlock as s, normalizeClass as o, createCommentVNode as n, createElementVNode as a, renderSlot as i, createBlock as f, resolveDynamicComponent as h, toDisplayString as c } from "vue";
+import { defineComponent as f, createElementBlock as l, openBlock as s, normalizeClass as o, createCommentVNode as n, createElementVNode as a, renderSlot as i, createBlock as u, resolveDynamicComponent as h, toDisplayString as c } from "vue";
 const k = {
   key: 0,
-  class: "sl-mx-auto sl-mb-4"
-}, x = ["href"], b = /* @__PURE__ */ u({
+  class: "sl-flex sl-justify-center sl-mb-4"
+}, y = ["href"], b = /* @__PURE__ */ f({
   __name: "EmptyState",
   props: {
     title: {},
@@ -17,14 +17,14 @@ const k = {
     const r = m, d = () => {
       r("action");
     };
-    return (e, y) => (s(), l("div", {
+    return (e, x) => (s(), l("div", {
       class: o(["sl-text-center", t.compact ? "sl-py-6" : "sl-py-12"])
     }, [
       t.icon || e.$slots.icon ? (s(), l("div", k, [
         i(e.$slots, "icon", {}, () => [
-          (s(), f(h(t.icon), {
+          (s(), u(h(t.icon), {
             class: o([
-              "sl-mx-auto sl-text-gray-400 dark:sl-text-slate-500",
+              "sl-text-gray-400 dark:sl-text-slate-500",
               t.compact ? "sl-h-10 sl-w-10" : "sl-h-12 sl-w-12"
             ]),
             "aria-hidden": "true"
@@ -57,7 +57,7 @@ const k = {
             key: 0,
             href: t.actionHref,
             class: "sl-inline-flex sl-items-center sl-rounded-md sl-bg-stachelock-600 sl-px-4 sl-py-2 sl-text-sm sl-font-medium sl-text-white sl-shadow-sm hover:sl-bg-stachelock-700 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-stachelock-500 focus:sl-ring-offset-2 sl-transition-colors"
-          }, c(t.actionLabel), 9, x)) : (s(), l("button", {
+          }, c(t.actionLabel), 9, y)) : (s(), l("button", {
             key: 1,
             type: "button",
             onClick: d,
@@ -71,4 +71,4 @@ const k = {
 export {
   b as _
 };
-//# sourceMappingURL=EmptyState.vue_vue_type_script_setup_true_lang-Dxy-cLPT.js.map
+//# sourceMappingURL=EmptyState.vue_vue_type_script_setup_true_lang-7mcKkOWP.js.map

package/dist/EmptyState.vue_vue_type_script_setup_true_lang-7mcKkOWP.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.vue_vue_type_script_setup_true_lang-7mcKkOWP.js","sources":["../src/components/empty-state/EmptyState.vue"],"sourcesContent":["<!--\n  @component EmptyState\n  @description Generic empty state display with customizable content.\n  \n  A flexible empty state component with icon, title, description,\n  and action button support.\n  \n  @props\n  - title (string, required): Main heading text\n  - description (string, optional): Description text\n  - icon (Component, optional): Icon component to display\n  - actionLabel (string, optional): Action button label\n  - actionHref (string, optional): Action button link\n  - compact (boolean, optional): Use compact layout\n  \n  @emits\n  - action: Emitted when action button is clicked\n  \n  @slots\n  - icon: Custom icon slot\n  - description: Custom description content\n  - action: Custom action content\n  \n  @example\n  <EmptyState\n    title=\"No items found\"\n    description=\"Get started by creating a new item.\"\n    action-label=\"Create Item\"\n    @action=\"handleCreate\"\n  >\n    <template #icon>\n      <PlusIcon class=\"sl-h-12 sl-w-12\" />\n    </template>\n  </EmptyState>\n-->\n<template>\n  <div \n    class=\"sl-text-center\"\n    :class=\"compact ? 'sl-py-6' : 'sl-py-12'\"\n  >\n    <!-- Icon -->\n    <div v-if=\"icon || $slots.icon\" class=\"sl-flex sl-justify-center sl-mb-4\">\n      <slot name=\"icon\">\n        <component \n          :is=\"icon\" \n          :class=\"[\n            'sl-text-gray-400 dark:sl-text-slate-500',\n            compact ? 'sl-h-10 sl-w-10' : 'sl-h-12 sl-w-12'\n          ]\"\n          aria-hidden=\"true\" \n        />\n      </slot>\n    </div>\n\n    <!-- Title -->\n    <h3 \n      :class=\"[\n        'sl-font-medium sl-text-gray-900 dark:sl-text-white',\n        compact ? 'sl-text-sm' : 'sl-text-lg'\n      ]\"\n    >\n      {{ title }}\n    </h3>\n\n    <!-- Description -->\n    <div \n      v-if=\"description || $slots.description\" \n      :class=\"[\n        'sl-text-gray-500 dark:sl-text-slate-400',\n        compact ? 'sl-mt-1 sl-text-sm' : 'sl-mt-2 sl-text-base'\n      ]\"\n    >\n      <slot name=\"description\">\n        <p>{{ description }}</p>\n      </slot>\n    </div>\n\n    <!-- Action -->\n    <div \n      v-if=\"actionLabel || $slots.action\" \n      :class=\"compact ? 'sl-mt-4' : 'sl-mt-6'\"\n    >\n      <slot name=\"action\">\n        <a\n          v-if=\"actionHref\"\n          :href=\"actionHref\"\n          class=\"sl-inline-flex sl-items-center sl-rounded-md sl-bg-stachelock-600 sl-px-4 sl-py-2 sl-text-sm sl-font-medium sl-text-white sl-shadow-sm hover:sl-bg-stachelock-700 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-stachelock-500 focus:sl-ring-offset-2 sl-transition-colors\"\n        >\n          {{ actionLabel }}\n        </a>\n        <button\n          v-else\n          type=\"button\"\n          @click=\"handleAction\"\n          class=\"sl-inline-flex sl-items-center sl-rounded-md sl-bg-stachelock-600 sl-px-4 sl-py-2 sl-text-sm sl-font-medium sl-text-white sl-shadow-sm hover:sl-bg-stachelock-700 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-stachelock-500 focus:sl-ring-offset-2 sl-transition-colors\"\n        >\n          {{ actionLabel }}\n        </button>\n      </slot>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport type { Component } from 'vue';\n\ninterface Props {\n  title: string;\n  description?: string;\n  icon?: Component;\n  actionLabel?: string;\n  actionHref?: string;\n  compact?: boolean;\n}\n\nwithDefaults(defineProps<Props>(), {\n  compact: false,\n});\n\nconst emit = defineEmits<{\n  action: [];\n}>();\n\nconst handleAction = (): void => {\n  emit('action');\n};\n</script>\n\n"],"names":["emit","__emit","handleAction","_createElementBlock","_normalizeClass","__props","$slots","_openBlock","_hoisted_1","_renderSlot","_ctx","_createBlock","_resolveDynamicComponent","_createElementVNode","_hoisted_2"],"mappings":";;;;;;;;;;;;;;;;AAuHA,UAAMA,IAAOC,GAIPC,IAAe,MAAY;AAC/B,MAAAF,EAAK,QAAQ;AAAA,IACf;2BAzFEG,EAgEM,OAAA;AAAA,MA/DJ,OAAKC,EAAA,CAAC,kBACEC,EAAA,UAAO,YAAA,UAAA,CAAA;AAAA,IAAA;MAGJA,EAAA,QAAQC,EAAAA,OAAO,QAA1BC,KAAAJ,EAWM,OAXNK,GAWM;AAAA,QAVJC,EASOC,sBATP,MASO;AAAA,WARLH,KAAAI,EAOEC,EANKP,EAAA,IAAI,GAAA;AAAA,YACR,OAAKD,EAAA;AAAA;cAAuEC,EAAA,UAAO,oBAAA;AAAA,YAAA;YAIpF,eAAY;AAAA,UAAA;;;MAMlBQ,EAOK,MAAA;AAAA,QANF,OAAKT,EAAA;AAAA;UAA0EC,EAAA,UAAO,eAAA;AAAA,QAAA;WAKpFA,EAAA,KAAK,GAAA,CAAA;AAAA,MAKFA,EAAA,eAAeC,EAAAA,OAAO,oBAD9BH,EAUM,OAAA;AAAA;QARH,OAAKC,EAAA;AAAA;UAA+DC,EAAA,UAAO,uBAAA;AAAA,QAAA;;QAK5EI,EAEOC,6BAFP,MAEO;AAAA,UADLG,EAAwB,aAAlBR,EAAA,WAAW,GAAA,CAAA;AAAA,QAAA;;MAMbA,EAAA,eAAeC,EAAAA,OAAO,eAD9BH,EAqBM,OAAA;AAAA;QAnBH,SAAOE,EAAA,UAAO,YAAA,SAAA;AAAA,MAAA;QAEfI,EAgBOC,wBAhBP,MAgBO;AAAA,UAdGL,EAAA,mBADRF,EAMI,KAAA;AAAA;YAJD,MAAME,EAAA;AAAA,YACP,OAAM;AAAA,UAAA,KAEHA,EAAA,WAAW,GAAA,GAAAS,CAAA,WAEhBX,EAOS,UAAA;AAAA;YALP,MAAK;AAAA,YACJ,SAAOD;AAAA,YACR,OAAM;AAAA,UAAA,KAEHG,EAAA,WAAW,GAAA,CAAA;AAAA,QAAA;;;;;"}

package/dist/NotificationContainer.vue_vue_type_style_index_0_lang-DSfNw4Ge.js

@@ -0,0 +1,110 @@
+import { defineComponent as h, computed as m, createBlock as l, openBlock as o, Teleport as k, createElementBlock as i, createCommentVNode as u, Fragment as a, renderList as d } from "vue";
+import { useNotifications as y } from "./composables/useNotifications.js";
+import { _ as f } from "./NotificationToast.vue_vue_type_script_setup_true_lang-CU__ORw8.js";
+const g = {
+  key: 0,
+  class: "sl-notifications-position sl-notifications-tl"
+}, C = {
+  key: 1,
+  class: "sl-notifications-position sl-notifications-tc"
+}, A = {
+  key: 2,
+  class: "sl-notifications-position sl-notifications-tr"
+}, N = {
+  key: 3,
+  class: "sl-notifications-position sl-notifications-bl"
+}, B = {
+  key: 4,
+  class: "sl-notifications-position sl-notifications-bc"
+}, T = {
+  key: 5,
+  class: "sl-notifications-position sl-notifications-br"
+}, P = /* @__PURE__ */ h({
+  __name: "NotificationContainer",
+  setup(x) {
+    const {
+      activeNotifications: p,
+      hideNotification: _,
+      executeAction: v,
+      bringToFront: b
+    } = y(), n = m(() => {
+      const e = {
+        tl: [],
+        tc: [],
+        tr: [],
+        bl: [],
+        bc: [],
+        br: []
+      };
+      for (const s of p.value) {
+        const t = s.position || "br";
+        e[t].push(s);
+      }
+      return e;
+    }), c = (e) => {
+      _(e);
+    }, r = (e, s) => {
+      if (s.label === "bringToFront") {
+        b(e.id);
+        return;
+      }
+      v(e.id, s), s.action !== "dismiss" && !e.sticky && setTimeout(() => {
+        _(e);
+      }, 100);
+    };
+    return (e, s) => (o(), l(k, { to: "body" }, [
+      n.value.tl.length > 0 ? (o(), i("div", g, [
+        (o(!0), i(a, null, d(n.value.tl, (t) => (o(), l(f, {
+          key: t.id,
+          notification: t,
+          onClose: c,
+          onAction: r
+        }, null, 8, ["notification"]))), 128))
+      ])) : u("", !0),
+      n.value.tc.length > 0 ? (o(), i("div", C, [
+        (o(!0), i(a, null, d(n.value.tc, (t) => (o(), l(f, {
+          key: t.id,
+          notification: t,
+          onClose: c,
+          onAction: r
+        }, null, 8, ["notification"]))), 128))
+      ])) : u("", !0),
+      n.value.tr.length > 0 ? (o(), i("div", A, [
+        (o(!0), i(a, null, d(n.value.tr, (t) => (o(), l(f, {
+          key: t.id,
+          notification: t,
+          onClose: c,
+          onAction: r
+        }, null, 8, ["notification"]))), 128))
+      ])) : u("", !0),
+      n.value.bl.length > 0 ? (o(), i("div", N, [
+        (o(!0), i(a, null, d(n.value.bl, (t) => (o(), l(f, {
+          key: t.id,
+          notification: t,
+          onClose: c,
+          onAction: r
+        }, null, 8, ["notification"]))), 128))
+      ])) : u("", !0),
+      n.value.bc.length > 0 ? (o(), i("div", B, [
+        (o(!0), i(a, null, d(n.value.bc, (t) => (o(), l(f, {
+          key: t.id,
+          notification: t,
+          onClose: c,
+          onAction: r
+        }, null, 8, ["notification"]))), 128))
+      ])) : u("", !0),
+      n.value.br.length > 0 ? (o(), i("div", T, [
+        (o(!0), i(a, null, d(n.value.br, (t) => (o(), l(f, {
+          key: t.id,
+          notification: t,
+          onClose: c,
+          onAction: r
+        }, null, 8, ["notification"]))), 128))
+      ])) : u("", !0)
+    ]));
+  }
+});
+export {
+  P as _
+};
+//# sourceMappingURL=NotificationContainer.vue_vue_type_style_index_0_lang-DSfNw4Ge.js.map

package/dist/NotificationContainer.vue_vue_type_style_index_0_lang-DSfNw4Ge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationContainer.vue_vue_type_style_index_0_lang-DSfNw4Ge.js","sources":["../src/components/notifications/NotificationContainer.vue"],"sourcesContent":["<!--\n  @component NotificationContainer\n  @description Container for rendering all active notifications with proper positioning\n  \n  Place this component once at the root of your app to enable the notification\n  system. It automatically renders all active notifications from the useNotifications\n  composable with support for stacking, positioning, and actions.\n  \n  ## Features\n  - Automatic notification stacking with offset calculation\n  - Position-aware containers (6 positions: tr, tl, tc, br, bl, bc)\n  - Card stacking mode for many notifications\n  - Action button handling (dismiss, link, callback)\n  - Pause/resume support\n  - Works with importing packages (teleports to body)\n  \n  @example\n  // In App.vue or main layout\n  <template>\n    <div id=\"app\">\n      <RouterView />\n      <NotificationContainer />\n    </div>\n  </template>\n  \n  @example\n  // Using notifications in any component\n  <script setup>\n  import { useNotifications } from '@stachelock/ui'\n  \n  const { success, error, showNotification } = useNotifications()\n  \n  // Simple notifications\n  success('Saved!', 'Your changes were saved successfully.')\n  error('Error', 'Something went wrong.')\n  \n  // With actions\n  showNotification({\n    title: 'Confirm Delete',\n    message: 'Are you sure you want to delete this item?',\n    theme: 'warning',\n    autoClose: false,\n    actions: [\n      { label: 'Delete', action: 'callback', callback: () => deleteItem(), theme: 'danger' },\n      { label: 'Cancel', action: 'dismiss' }\n    ]\n  })\n  </script>\n-->\n<template>\n  <Teleport to=\"body\">\n    <!-- Top Left -->\n    <div \n      v-if=\"notificationsByPosition.tl.length > 0\"\n      class=\"sl-notifications-position sl-notifications-tl\"\n    >\n      <NotificationToast\n        v-for=\"notification in notificationsByPosition.tl\"\n        :key=\"notification.id\"\n        :notification=\"notification\"\n        @close=\"handleClose\"\n        @action=\"handleAction\"\n      />\n    </div>\n\n    <!-- Top Center -->\n    <div \n      v-if=\"notificationsByPosition.tc.length > 0\"\n      class=\"sl-notifications-position sl-notifications-tc\"\n    >\n      <NotificationToast\n        v-for=\"notification in notificationsByPosition.tc\"\n        :key=\"notification.id\"\n        :notification=\"notification\"\n        @close=\"handleClose\"\n        @action=\"handleAction\"\n      />\n    </div>\n\n    <!-- Top Right -->\n    <div \n      v-if=\"notificationsByPosition.tr.length > 0\"\n      class=\"sl-notifications-position sl-notifications-tr\"\n    >\n      <NotificationToast\n        v-for=\"notification in notificationsByPosition.tr\"\n        :key=\"notification.id\"\n        :notification=\"notification\"\n        @close=\"handleClose\"\n        @action=\"handleAction\"\n      />\n    </div>\n\n    <!-- Bottom Left -->\n    <div \n      v-if=\"notificationsByPosition.bl.length > 0\"\n      class=\"sl-notifications-position sl-notifications-bl\"\n    >\n      <NotificationToast\n        v-for=\"notification in notificationsByPosition.bl\"\n        :key=\"notification.id\"\n        :notification=\"notification\"\n        @close=\"handleClose\"\n        @action=\"handleAction\"\n      />\n    </div>\n\n    <!-- Bottom Center -->\n    <div \n      v-if=\"notificationsByPosition.bc.length > 0\"\n      class=\"sl-notifications-position sl-notifications-bc\"\n    >\n      <NotificationToast\n        v-for=\"notification in notificationsByPosition.bc\"\n        :key=\"notification.id\"\n        :notification=\"notification\"\n        @close=\"handleClose\"\n        @action=\"handleAction\"\n      />\n    </div>\n\n    <!-- Bottom Right (Default) -->\n    <div \n      v-if=\"notificationsByPosition.br.length > 0\"\n      class=\"sl-notifications-position sl-notifications-br\"\n    >\n      <NotificationToast\n        v-for=\"notification in notificationsByPosition.br\"\n        :key=\"notification.id\"\n        :notification=\"notification\"\n        @close=\"handleClose\"\n        @action=\"handleAction\"\n      />\n    </div>\n  </Teleport>\n</template>\n\n<script setup lang=\"ts\">\n/**\n * NotificationContainer - Global notification renderer with position-aware containers\n * \n * Renders all active notifications from the notification system, grouped by position.\n * Uses Teleport to render notifications at the body level for proper z-index.\n * \n * ## Setup\n * Add this component once in your app root:\n * ```vue\n * <template>\n *   <div id=\"app\">\n *     <YourContent />\n *     <NotificationContainer />\n *   </div>\n * </template>\n * ```\n * \n * ## Usage\n * Then use the composable anywhere:\n * ```typescript\n * import { useNotifications } from '@stachelock/ui'\n * \n * const { success, error, warning, info, showNotification } = useNotifications()\n * \n * // Simple notifications (defaults to bottom-right)\n * success('Saved!', 'Your changes were saved successfully.')\n * error('Error', 'Something went wrong.')\n * \n * // Position-specific notifications\n * showNotification({\n *   title: 'Top Right',\n *   message: 'This appears in the top right.',\n *   position: 'tr'\n * })\n * \n * // Advanced notification with actions\n * showNotification({\n *   title: 'Session Expiring',\n *   message: 'Your session will expire in 5 minutes.',\n *   theme: 'warning',\n *   position: 'br',\n *   priority: 'high',\n *   autoClose: false,\n *   actions: [\n *     { label: 'Extend Session', action: 'callback', callback: extendSession, theme: 'primary' },\n *     { label: 'Logout', action: 'callback', callback: logout, theme: 'secondary' }\n *   ]\n * })\n * ```\n */\nimport { computed } from 'vue';\nimport { \n  useNotifications, \n  type NotificationState, \n  type NotificationAction,\n  type NotificationPosition\n} from '../../composables/useNotifications';\nimport NotificationToast from './NotificationToast.vue';\n\nconst { \n  activeNotifications, \n  hideNotification, \n  executeAction, \n  bringToFront \n} = useNotifications();\n\n// Group notifications by position\nconst notificationsByPosition = computed(() => {\n  const groups: Record<NotificationPosition, NotificationState[]> = {\n    tl: [],\n    tc: [],\n    tr: [],\n    bl: [],\n    bc: [],\n    br: []\n  };\n  \n  for (const notification of activeNotifications.value) {\n    const pos = notification.position || 'br';\n    groups[pos].push(notification);\n  }\n  \n  return groups;\n});\n\nconst handleClose = (notification: NotificationState) => {\n  hideNotification(notification);\n};\n\nconst handleAction = (notification: NotificationState, action: NotificationAction) => {\n  // Handle special \"bring to front\" action for card stacking\n  if (action.label === 'bringToFront') {\n    bringToFront(notification.id);\n    return;\n  }\n  \n  // Execute the action\n  executeAction(notification.id, action);\n  \n  // Auto-dismiss after callback/link actions unless sticky\n  if (action.action !== 'dismiss' && !notification.sticky) {\n    // Small delay to let any callback complete\n    setTimeout(() => {\n      hideNotification(notification);\n    }, 100);\n  }\n};\n</script>\n\n<style>\n/* Position containers - these are fixed positioned containers for each corner/edge */\n.sl-notifications-position {\n  position: fixed;\n  z-index: 9999;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 24px;\n  pointer-events: none;\n  max-height: calc(100vh - 48px);\n  overflow: visible;\n}\n\n/* Allow pointer events on individual notifications and set proper width */\n.sl-notifications-position > * {\n  pointer-events: auto;\n  width: 384px; /* max-w-sm equivalent */\n  max-width: calc(100vw - 48px);\n}\n\n/* Top positions */\n.sl-notifications-tl {\n  top: 0;\n  left: 0;\n  align-items: flex-start;\n}\n\n.sl-notifications-tc {\n  top: 0;\n  left: 50%;\n  transform: translateX(-50%);\n  align-items: center;\n}\n\n.sl-notifications-tr {\n  top: 0;\n  right: 0;\n  align-items: flex-end;\n}\n\n/* Bottom positions - flex-direction reversed so new items appear at bottom */\n.sl-notifications-bl {\n  bottom: 0;\n  left: 0;\n  align-items: flex-start;\n  flex-direction: column-reverse;\n}\n\n.sl-notifications-bc {\n  bottom: 0;\n  left: 50%;\n  transform: translateX(-50%);\n  align-items: center;\n  flex-direction: column-reverse;\n}\n\n.sl-notifications-br {\n  bottom: 0;\n  right: 0;\n  align-items: flex-end;\n  flex-direction: column-reverse;\n}\n\n/* Mobile adjustments */\n@media (max-width: 640px) {\n  .sl-notifications-position {\n    padding: 16px;\n    left: 0;\n    right: 0;\n  }\n  \n  .sl-notifications-position > * {\n    width: 100%;\n    max-width: 100%;\n  }\n  \n  .sl-notifications-tl,\n  .sl-notifications-tc,\n  .sl-notifications-tr {\n    top: 0;\n    align-items: stretch;\n  }\n  \n  .sl-notifications-bl,\n  .sl-notifications-bc,\n  .sl-notifications-br {\n    bottom: 0;\n    align-items: stretch;\n  }\n  \n  /* On mobile, center positions take full width */\n  .sl-notifications-tc,\n  .sl-notifications-bc {\n    transform: none;\n  }\n}\n</style>\n"],"names":["activeNotifications","hideNotification","executeAction","bringToFront","useNotifications","notificationsByPosition","computed","groups","notification","pos","handleClose","handleAction","action","_createBlock","_Teleport","_openBlock","_createElementBlock","_hoisted_1","_Fragment","_renderList","NotificationToast","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6"],"mappings":"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"}

package/dist/NotificationToast.vue_vue_type_script_setup_true_lang-CU__ORw8.js

@@ -0,0 +1,238 @@
+import { defineComponent as J, computed as e, createBlock as k, openBlock as r, unref as h, withCtx as v, createVNode as w, createElementBlock as o, createCommentVNode as c, normalizeStyle as K, normalizeClass as i, createElementVNode as d, resolveDynamicComponent as P, toDisplayString as y, Fragment as Q, renderList as U, withModifiers as C } from "vue";
+import { r as g, a as Z } from "./InformationCircleIcon-B322GNIt.js";
+import { r as $ } from "./ExclamationCircleIcon-DjxYk45_.js";
+import { r as _ } from "./ExclamationTriangleIcon-BNKYmV_J.js";
+import { r as tt } from "./XMarkIcon-DNvCkiOy.js";
+import { S as st, h as et } from "./transition-_rPfnoET.js";
+const lt = ["aria-live"], at = { class: "sl-flex sl-items-start" }, rt = {
+  key: 1,
+  class: "sl-mt-3 sl-flex sl-gap-2"
+}, it = ["onClick"], ft = /* @__PURE__ */ J({
+  __name: "NotificationToast",
+  props: {
+    notification: {}
+  },
+  emits: ["close", "action"],
+  setup(l, { emit: z }) {
+    const s = l, u = z, S = () => {
+      u("close", s.notification);
+    }, M = (t) => {
+      u("action", s.notification, t);
+    }, B = () => {
+      s.notification.isCardMode && s.notification.cardStackIndex !== 0 && u("action", s.notification, { label: "bringToFront", action: "callback" });
+    }, I = () => {
+    }, N = e(() => {
+      const t = {
+        primary: "sl-bg-primary-600 dark:sl-bg-primary-700 sl-text-white",
+        secondary: "sl-bg-gray-600 dark:sl-bg-gray-700 sl-text-white",
+        dark: "sl-bg-gray-800 dark:sl-bg-gray-900 sl-text-white",
+        light: "sl-bg-white dark:sl-bg-gray-800 sl-text-gray-800 dark:sl-text-gray-100 sl-border sl-border-gray-200 dark:sl-border-gray-700",
+        warning: "sl-bg-amber-500 dark:sl-bg-amber-600 sl-text-white",
+        danger: "sl-bg-red-500 dark:sl-bg-red-600 sl-text-white",
+        success: "sl-bg-emerald-500 dark:sl-bg-emerald-600 sl-text-white",
+        info: "sl-bg-blue-500 dark:sl-bg-blue-600 sl-text-white",
+        ghost: "sl-bg-white dark:sl-bg-gray-800 sl-text-gray-800 dark:sl-text-gray-100 sl-border sl-border-gray-200 dark:sl-border-gray-700"
+      };
+      return t[s.notification.theme] || t.primary;
+    }), O = e(() => {
+      const t = {
+        default: "",
+        compact: "",
+        expanded: ""
+      };
+      return t[s.notification.variant] || t.default;
+    }), T = e(() => s.notification.priority === "urgent" ? "sl-animate-pulse" : ""), A = e(() => {
+      const t = "sl-absolute sl-top-0 sl-left-0 sl-right-0 sl-h-1";
+      return s.notification.priority === "urgent" ? `${t} sl-bg-red-400 dark:sl-bg-red-500` : s.notification.priority === "high" ? `${t} sl-bg-amber-400 dark:sl-bg-amber-500` : "";
+    }), F = e(() => s.notification.isCardMode ? "sl-cursor-pointer hover:sl-scale-[1.02] sl-transition-transform" : ""), L = e(() => {
+      const t = {};
+      return s.notification.maxWidth && (t.maxWidth = `${s.notification.maxWidth}px`), s.notification.isCardMode && (t.transform = `translate(${s.notification.cardOffsetX || 0}px, ${s.notification.cardOffsetY || 0}px)`, t.zIndex = s.notification.zIndex || 1), t;
+    }), b = e(() => {
+      const t = s.notification.theme;
+      return ["light", "ghost"].includes(t) ? "sl-text-gray-800 dark:sl-text-gray-100" : "sl-text-white";
+    }), V = e(() => {
+      const t = s.notification.theme;
+      return ["light", "ghost"].includes(t) ? "sl-text-gray-500 dark:sl-text-gray-400" : "sl-text-white/90";
+    }), W = e(() => {
+      const t = {
+        primary: "focus:sl-ring-primary-400 dark:focus:sl-ring-primary-500",
+        secondary: "focus:sl-ring-gray-400 dark:focus:sl-ring-gray-500",
+        dark: "focus:sl-ring-gray-400 dark:focus:sl-ring-gray-500",
+        light: "focus:sl-ring-gray-300 dark:focus:sl-ring-gray-600",
+        warning: "focus:sl-ring-amber-300 dark:focus:sl-ring-amber-500",
+        danger: "focus:sl-ring-red-300 dark:focus:sl-ring-red-500",
+        success: "focus:sl-ring-emerald-300 dark:focus:sl-ring-emerald-500",
+        info: "focus:sl-ring-blue-300 dark:focus:sl-ring-blue-500",
+        ghost: "focus:sl-ring-gray-300 dark:focus:sl-ring-gray-600"
+      };
+      return t[s.notification.theme] || t.primary;
+    }), D = e(() => {
+      const t = s.notification.theme, a = "sl-ml-4 sl-inline-flex sl-rounded-md sl-opacity-70 hover:sl-opacity-100 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-offset-2 sl-transition-opacity", n = ["light", "ghost"].includes(t) ? "sl-text-gray-400 dark:sl-text-gray-500 hover:sl-text-gray-500 dark:hover:sl-text-gray-400" : "sl-text-white/70 hover:sl-text-white";
+      return `${a} ${n}`;
+    }), p = e(() => {
+      if (s.notification.icon)
+        return s.notification.icon;
+      const t = s.notification.theme, a = {
+        primary: g,
+        secondary: g,
+        dark: $,
+        light: g,
+        warning: _,
+        danger: $,
+        success: Z,
+        info: g,
+        ghost: g
+      };
+      return a[t] || a.primary;
+    }), E = e(() => {
+      const t = {
+        compact: "sl-h-5 sl-w-5",
+        default: "sl-h-6 sl-w-6",
+        expanded: "sl-h-7 sl-w-7"
+      };
+      return t[s.notification.variant] || t.default;
+    }), R = e(() => {
+      const t = {
+        compact: "sl-text-xs sl-font-medium",
+        default: "sl-text-sm sl-font-medium",
+        expanded: "sl-text-base sl-font-semibold"
+      };
+      return t[s.notification.variant] || t.default;
+    }), X = e(() => {
+      const t = {
+        compact: "sl-mt-0.5 sl-text-xs",
+        default: "sl-mt-1 sl-text-sm",
+        expanded: "sl-mt-2 sl-text-sm"
+      };
+      return t[s.notification.variant] || t.default;
+    }), Y = e(() => {
+      const t = {
+        compact: "sl-p-3",
+        default: "sl-p-4",
+        expanded: "sl-p-5"
+      };
+      return t[s.notification.variant] || t.default;
+    }), j = e(() => {
+      const t = {
+        compact: "sl-ml-2 sl-w-0 sl-flex-1",
+        default: "sl-ml-3 sl-w-0 sl-flex-1 sl-pt-0.5",
+        expanded: "sl-ml-4 sl-w-0 sl-flex-1 sl-pt-0.5"
+      };
+      return t[s.notification.variant] || t.default;
+    }), q = (t) => {
+      const a = "sl-rounded sl-px-2 sl-py-1 sl-text-xs sl-font-medium sl-transition-colors focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-offset-1", n = s.notification.theme, f = ["light", "ghost"].includes(n), m = {
+        primary: {
+          light: "sl-bg-primary-100 sl-text-primary-700 hover:sl-bg-primary-200 dark:sl-bg-primary-800 dark:sl-text-primary-200 dark:hover:sl-bg-primary-700",
+          dark: "sl-bg-white/20 sl-text-white hover:sl-bg-white/30"
+        },
+        secondary: {
+          light: "sl-bg-gray-100 sl-text-gray-700 hover:sl-bg-gray-200 dark:sl-bg-gray-700 dark:sl-text-gray-200 dark:hover:sl-bg-gray-600",
+          dark: "sl-bg-white/20 sl-text-white hover:sl-bg-white/30"
+        },
+        danger: {
+          light: "sl-bg-red-100 sl-text-red-700 hover:sl-bg-red-200 dark:sl-bg-red-900 dark:sl-text-red-200 dark:hover:sl-bg-red-800",
+          dark: "sl-bg-white/20 sl-text-white hover:sl-bg-white/30"
+        }
+      }, H = t.theme || "secondary", x = m[H] || m.secondary;
+      return `${a} ${f ? x.light : x.dark}`;
+    }, G = e(() => {
+      const t = s.notification.position, a = {
+        tr: "sl-translate-x-full sl-opacity-0",
+        tl: "-sl-translate-x-full sl-opacity-0",
+        br: "sl-translate-x-full sl-opacity-0",
+        bl: "-sl-translate-x-full sl-opacity-0",
+        tc: "-sl-translate-y-full sl-opacity-0",
+        bc: "sl-translate-y-full sl-opacity-0"
+      };
+      return a[t] || a.br;
+    });
+    return (t, a) => (r(), k(h(st), {
+      appear: "",
+      show: l.notification.isOpen,
+      as: "template",
+      onAfterLeave: I
+    }, {
+      default: v(() => [
+        w(h(et), {
+          as: "template",
+          enter: "sl-duration-300 sl-ease-out sl-transform",
+          "enter-from": G.value,
+          "enter-to": "sl-translate-y-0 sl-opacity-100 sl-translate-x-0",
+          leave: "sl-duration-200 sl-ease-in",
+          "leave-from": "sl-opacity-100",
+          "leave-to": "sl-opacity-0"
+        }, {
+          default: v(() => [
+            l.notification.isOpen ? (r(), o("div", {
+              key: 0,
+              class: i([
+                N.value,
+                O.value,
+                T.value,
+                F.value,
+                "sl-pointer-events-auto sl-overflow-hidden sl-rounded-lg sl-shadow-lg sl-ring-1 sl-ring-black/5 dark:sl-ring-white/10 sl-transition-all sl-duration-200 sl-relative"
+              ]),
+              style: K(L.value),
+              onClick: B,
+              role: "alert",
+              "aria-live": l.notification.priority === "urgent" ? "assertive" : "polite"
+            }, [
+              d("div", {
+                class: i(Y.value)
+              }, [
+                d("div", at, [
+                  p.value ? (r(), k(P(p.value), {
+                    key: 0,
+                    class: i([E.value, V.value, "sl-flex-shrink-0"]),
+                    "aria-hidden": "true"
+                  }, null, 8, ["class"])) : c("", !0),
+                  d("div", {
+                    class: i(j.value)
+                  }, [
+                    d("p", {
+                      class: i([R.value, b.value])
+                    }, y(l.notification.title), 3),
+                    l.notification.message ? (r(), o("p", {
+                      key: 0,
+                      class: i([X.value, b.value, "sl-opacity-90"])
+                    }, y(l.notification.message), 3)) : c("", !0),
+                    l.notification.actions && l.notification.actions.length > 0 ? (r(), o("div", rt, [
+                      (r(!0), o(Q, null, U(l.notification.actions, (n, f) => (r(), o("button", {
+                        key: f,
+                        type: "button",
+                        class: i(q(n)),
+                        onClick: C((m) => M(n), ["stop"])
+                      }, y(n.label), 11, it))), 128))
+                    ])) : c("", !0)
+                  ], 2),
+                  l.notification.dismissible !== !1 ? (r(), o("button", {
+                    key: 1,
+                    type: "button",
+                    onClick: C(S, ["stop"]),
+                    class: i([D.value, W.value])
+                  }, [
+                    a[0] || (a[0] = d("span", { class: "sl-sr-only" }, "Close", -1)),
+                    w(h(tt), {
+                      class: "sl-h-5 sl-w-5",
+                      "aria-hidden": "true"
+                    })
+                  ], 2)) : c("", !0)
+                ])
+              ], 2),
+              l.notification.priority === "urgent" || l.notification.priority === "high" ? (r(), o("div", {
+                key: 0,
+                class: i(A.value)
+              }, null, 2)) : c("", !0)
+            ], 14, lt)) : c("", !0)
+          ]),
+          _: 1
+        }, 8, ["enter-from"])
+      ]),
+      _: 1
+    }, 8, ["show"]));
+  }
+});
+export {
+  ft as _
+};
+//# sourceMappingURL=NotificationToast.vue_vue_type_script_setup_true_lang-CU__ORw8.js.map