agnosticui-core 2.0.0-alpha.2

package/src/styles/ag-tokens.css

@@ -0,0 +1,193 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:where(html) {
+  --ag-drawer-width: 25rem;
+  --ag-sheet-height: 25vh;
+  --ag-space-0: 0;
+  --ag-space-1: 0.25rem;
+  --ag-space-2: 0.5rem;
+  --ag-space-3: 0.75rem;
+  --ag-space-4: 1rem;
+  --ag-space-5: 1.25rem;
+  --ag-space-6: 1.5rem;
+  --ag-space-7: 1.75rem;
+  --ag-space-8: 2rem;
+  --ag-space-9: 2.25rem;
+  --ag-space-10: 2.5rem;
+  --ag-space-12: 3rem;
+  --ag-space-14: 3.5rem;
+  --ag-font-size-xs: 0.75rem;
+  --ag-font-size-sm: 0.875rem;
+  --ag-font-size-base: 1rem;
+  --ag-font-size-md: 1.125rem;
+  --ag-font-size-lg: 1.25rem;
+  --ag-font-size-xl: 1.5rem;
+  --ag-font-size-2x: 2rem;
+  --ag-font-size-3x: 2.25rem;
+  --ag-font-size-4x: 2.5rem;
+  --ag-font-size-5x: 3rem;
+  --ag-line-height-sm: 1.25rem;
+  --ag-line-height-base: 1.5rem;
+  --ag-line-height-lg: 1.75rem;
+  --ag-radius-none: 0;
+  --ag-radius-sm: 0.25rem;
+  --ag-radius-md: 0.375rem;
+  --ag-radius-lg: 1rem;
+  --ag-radius-full: 9999px;
+  --ag-motion-fast: 100ms;
+  --ag-motion-medium-fast: 150ms;
+  --ag-motion-medium: 225ms;
+  --ag-motion-medium-slow: 325ms;
+  --ag-motion-slow: 480ms;
+  --ag-fx-duration-xs: 100ms;
+  --ag-fx-duration-sm: 150ms;
+  --ag-fx-duration-md: 225ms;
+  --ag-fx-duration-lg: 325ms;
+  --ag-fx-duration-xl: 480ms;
+  --ag-fx-ease-ease: ease;
+  --ag-fx-ease-ease-in: ease-in;
+  --ag-fx-ease-ease-out: ease-out;
+  --ag-fx-ease-ease-in-out: ease-in-out;
+  --ag-fx-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  --ag-fx-ease-spring-sm: cubic-bezier(0.5, 1.5, 0.5, 1);
+  --ag-fx-ease-spring-md: cubic-bezier(0.5, 1.8, 0.5, 1);
+  --ag-fx-ease-spring-lg: cubic-bezier(0.5, 2.5, 0.5, 1);
+  --ag-focus-width: 2px;
+  --ag-focus-offset: 2px;
+  --ag-shadow-none: none;
+  --ag-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --ag-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
+  --ag-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+  --ag-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+  --ag-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+  --ag-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  --ag-z-index-dropdown: 100;
+  --ag-z-index-modal: 1000;
+  --ag-z-index-toast: 1100;
+  --ag-z-index-sticky: 900;
+  --ag-border-width-1: 1px;
+  --ag-border-width-2: 2px;
+  --ag-border-width-3: 3px;
+  --ag-black: #1f2328;
+  --ag-white: #ffffff;
+  --ag-neutral-50: #f9fafb;
+  --ag-neutral-100: #f3f4f6;
+  --ag-neutral-200: #e5e7eb;
+  --ag-neutral-300: #d1d5db;
+  --ag-neutral-400: #9ca3af;
+  --ag-neutral-500: #6b7280;
+  --ag-neutral-600: #4b5563;
+  --ag-neutral-700: #2e3745;
+  --ag-neutral-800: #202736;
+  --ag-neutral-900: #111827;
+  --ag-blue-50: #ddf4ff;
+  --ag-blue-100: #b6e3ff;
+  --ag-blue-200: #80ccff;
+  --ag-blue-300: #54aeff;
+  --ag-blue-400: #218bff;
+  --ag-blue-500: #0969da;
+  --ag-blue-600: #0550ae;
+  --ag-blue-700: #033d8b;
+  --ag-blue-800: #0a3069;
+  --ag-blue-900: #002155;
+  --ag-green-50: #dafbe1;
+  --ag-green-100: #aceebb;
+  --ag-green-200: #6fdd8b;
+  --ag-green-300: #4ac26b;
+  --ag-green-400: #2da44e;
+  --ag-green-500: #238636;
+  --ag-green-600: #116329;
+  --ag-green-700: #044f1e;
+  --ag-green-800: #003d16;
+  --ag-green-900: #002d11;
+  --ag-yellow-50: #fff8c5;
+  --ag-yellow-100: #fae17d;
+  --ag-yellow-200: #eac54f;
+  --ag-yellow-300: #d4a72c;
+  --ag-yellow-400: #bf8700;
+  --ag-yellow-500: #9a6700;
+  --ag-yellow-600: #7d4e00;
+  --ag-yellow-700: #633c01;
+  --ag-yellow-800: #4d2d00;
+  --ag-yellow-900: #3b2300;
+  --ag-red-50: #ffebe9;
+  --ag-red-100: #ffcecb;
+  --ag-red-200: #ffaba8;
+  --ag-red-300: #ff8182;
+  --ag-red-400: #fa4549;
+  --ag-red-500: #cf222e;
+  --ag-red-600: #a40e26;
+  --ag-red-700: #82071e;
+  --ag-red-800: #660018;
+  --ag-red-900: #4c0014;
+  --ag-purple-50: #fbefff;
+  --ag-purple-100: #ecd8ff;
+  --ag-purple-200: #d8b9ff;
+  --ag-purple-300: #c297ff;
+  --ag-purple-400: #a475f9;
+  --ag-purple-500: #8250df;
+  --ag-purple-600: #6639ba;
+  --ag-purple-700: #512a97;
+  --ag-purple-800: #3e1f79;
+  --ag-purple-900: #2e1461;
+  --ag-coral-50: #fff0eb;
+  --ag-coral-100: #ffd6cc;
+  --ag-coral-200: #ffb4a1;
+  --ag-coral-300: #fd8c73;
+  --ag-coral-400: #ec6547;
+  --ag-coral-500: #c4432b;
+  --ag-coral-600: #9e2f1c;
+  --ag-coral-700: #801f0f;
+  --ag-coral-800: #691105;
+  --ag-coral-900: #510901;
+  --ag-text-primary: #111827;
+  --ag-text-secondary: #4b5563;
+  --ag-text-muted: #4b5563;
+  --ag-text-primary-muted: #2e3745;
+  --ag-text-primary-inverted: #ffffff;
+  --ag-background-primary: #ffffff;
+  --ag-background-primary-inverted: #1f2328;
+  --ag-background-secondary: #f3f4f6;
+  --ag-background-secondary-inverted: #111827;
+  --ag-background-tertiary: #e5e7eb;
+  --ag-background-disabled: #f3f4f6;
+  --ag-primary-background: #ddf4ff;
+  --ag-primary-text: #0550ae;
+  --ag-success-background: #dafbe1;
+  --ag-success-text: #116329;
+  --ag-info-background: #f3f4f6;
+  --ag-info-text: #4b5563;
+  --ag-warning-background: #fff8c5;
+  --ag-warning-text: #7d4e00;
+  --ag-danger-background: #ffebe9;
+  --ag-danger-text: #a40e26;
+  --ag-border: #e5e7eb;
+  --ag-border-subtle: #d1d5db;
+  --ag-primary: #0550ae;
+  --ag-primary-rgb: 5, 80, 174;
+  --ag-primary-border: #d1d5db;
+  --ag-primary-dark: #0a3069;
+  --ag-secondary: #6b7280;
+  --ag-secondary-dark: #4b5563;
+  --ag-danger-rgb: 202, 29, 29;
+  --ag-danger: #CA1D1D;
+  --ag-danger-dark: #a40e26;
+  --ag-error-text: #a40e26;
+  --ag-warning-rgb: 212, 167, 44;
+  --ag-warning: #d4a72c;
+  --ag-warning-dark: #9a6700;
+  --ag-success: #238636;
+  --ag-success-rgb: 26, 127, 55;
+  --ag-success-dark: #116329;
+  --ag-info: #4b5563;
+  --ag-info-dark: #2e3745;
+  --ag-focus: 37, 99, 235;
+  --ag-focus-dark: #218bff;
+  --ag-rating-filled: #bf8700;
+  --ag-rating-filled-primary: #0969da;
+  --ag-rating-filled-success: #238636;
+  --ag-rating-filled-warning: #9a6700;
+  --ag-rating-filled-danger: #cf222e;
+}

package/src/styles/motion.styles.ts

@@ -0,0 +1,197 @@
+import { css } from 'lit';
+
+/**
+ * Shared motion styles - Reusable CSS keyframes and animation utilities
+ *
+ * These styles can be imported and used by any component that needs animation effects.
+ * Usage:
+ * ```
+ * import { motionStyles } from '../../styles/motion.styles.js';
+ *
+ * static styles = [motionStyles, css`...component-specific styles...`];
+ * ```
+ */
+export const motionStyles = css`
+  /* ============================================
+   * VARIABLES
+   * ============================================ */
+  :host {
+    /* Speed presets */
+    --ag-fx-duration-xs: 100ms;
+    --ag-fx-duration-sm: 150ms;
+    --ag-fx-duration-md: 200ms;
+    --ag-fx-duration-lg: 300ms;
+    --ag-fx-duration-xl: 500ms;
+
+    /* Easing presets */
+    --ag-fx-ease-ease: ease;
+    --ag-fx-ease-ease-in: ease-in;
+    --ag-fx-ease-ease-out: ease-out;
+    --ag-fx-ease-ease-in-out: ease-in-out;
+    --ag-fx-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+    --ag-fx-ease-spring-sm: cubic-bezier(0.5, 1.5, 0.5, 1);
+    --ag-fx-ease-spring-md: cubic-bezier(0.5, 2, 0.5, 1);
+    --ag-fx-ease-spring-lg: cubic-bezier(0.5, 2.5, 0.5, 1);
+  }
+
+  /* ============================================
+   * KEYFRAME ANIMATIONS
+   * ============================================ */
+
+  /* Bounce - vertical pop effect */
+  @keyframes ag-fx-bounce {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-25%); }
+  }
+
+  /* Pulse - scale grow/shrink */
+  @keyframes ag-fx-pulse {
+    0%, 100% { transform: scale(1); }
+    50% { transform: scale(1.1); }
+  }
+
+  /* Jelly - squash/stretch */
+  @keyframes ag-fx-jelly {
+    0%, 100% { transform: scale(1, 1); }
+    30% { transform: scale(1.12, 0.88); }
+    40% { transform: scale(0.88, 1.12); }
+    50% { transform: scale(1.05, 0.95); }
+    65% { transform: scale(0.98, 1.02); }
+    75% { transform: scale(1.02, 0.98); }
+  }
+
+  /* Shimmer - light sweep (mask animation) */
+  @keyframes ag-fx-shimmer {
+    0% { 
+      -webkit-mask-position: 50% 0;
+      mask-position: 50% 0;
+    }
+    100% { 
+      -webkit-mask-position: -125% 0;
+      mask-position: -125% 0;
+    }
+  }
+
+  /* Glow - box-shadow pulse */
+  @keyframes ag-fx-glow {
+    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--ag-primary-rgb), 0); }
+    50% { box-shadow: 0 0 14px 2px rgba(var(--ag-primary-rgb), var(--ag-fx-shadow-opacity, 0.4)); }
+  }
+
+  /* Flip - 3D rotation */
+  @keyframes ag-fx-flip {
+    0% { transform: perspective(400px) rotateY(0); }
+    100% { transform: perspective(400px) rotateY(360deg); }
+  }
+
+  /* Icon Reveal - clip path */
+  @keyframes ag-fx-icon-reveal {
+    0% { clip-path: circle(0% at 50% 50%); }
+    100% { clip-path: circle(150% at 50% 50%); }
+  }
+
+  /* Ripple - radial expansion */
+  @keyframes ag-fx-ripple {
+    0% { box-shadow: 0 0 0 0 rgba(var(--ag-primary-rgb), var(--ag-fx-shadow-opacity, 0.4)); }
+    100% { box-shadow: 0 0 1px 12px rgba(var(--ag-primary-rgb), 0); }
+  }
+
+  /* Highlight Sweep - background gradient sweep */
+  @keyframes ag-fx-highlight-sweep {
+    0% {
+      transform: translateX(-100%);
+    }
+    100% {
+      transform: translateX(100%);
+    }
+  }
+
+  /* Press-pop - quick press down/up */
+  @keyframes ag-fx-press-pop {
+    0%, 100% { transform: scale(1); }
+    50% { transform: scale(0.95); }
+  }
+
+  /* Tilt Press - 3D tilt */
+  @keyframes ag-fx-tilt-press {
+    0%, 100% { transform: perspective(500px) rotateX(0); }
+    50% { transform: perspective(500px) rotateX(10deg); }
+  }
+
+  /* Slide-in - entrance from below */
+  @keyframes ag-fx-slide-in {
+    from {
+      opacity: 0;
+      transform: translateY(20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  /* Grow - button increases in size */
+  @keyframes ag-fx-grow {
+    100% {
+      transform: scale(1.09);
+    }
+  }
+
+  /* Shrink - button decreases in size */
+  @keyframes ag-fx-shrink {
+    100% {
+      transform: scale(0.9);
+    }
+  }
+
+  /* Push - simulates physical press */
+  @keyframes ag-fx-push {
+    50% {
+      transform: translateY(4px);
+    }
+  }
+
+  /* Shake/Jitter effect */
+  @keyframes ag-fx-shake {
+    0%, 100% {
+      transform: translateX(0);
+    }
+    25% {
+      transform: translateX(-4px);
+    }
+    75% {
+      transform: translateX(4px);
+    }
+  }
+
+  /* Wobble effect */
+  @keyframes ag-fx-wobble {
+    0%, 100% {
+      transform: rotate(0deg);
+    }
+    25% {
+      transform: rotate(-3deg);
+    }
+    75% {
+      transform: rotate(3deg);
+    }
+  }
+
+  @keyframes ag-fx-pulse-wobble {
+    0% {
+      transform: scale(1) rotate(0deg);
+    }
+    50% {
+      transform: scale(1.09) rotate(0deg);
+    }
+    62.5% {
+      transform: scale(1.05) rotate(-3deg);
+    }
+    87.5% {
+      transform: scale(1.02) rotate(3deg);
+    }
+    100% {
+      transform: scale(1) rotate(0deg);
+    }
+  }
+`;

package/src/styles/nav-button-styles.ts

@@ -0,0 +1,30 @@
+import { css } from 'lit';
+
+export const NAV_BUTTON_STYLES = css`
+  ::slotted(.nav-button) {
+    width: 100%;
+    padding: var(--ag-space-2);
+    border: none;
+    background: transparent;
+    color: var(--ag-text-primary);
+    font-size: var(--ag-font-size-sm);
+    display: flex;
+    align-items: center;
+    gap: var(--ag-space-2);
+    text-align: start;
+    cursor: pointer;
+    border-radius: var(--ag-border-radius-sm);
+    transition: background 0.15s;
+  }
+
+  ::slotted(.nav-button:hover) {
+    background: var(--ag-background-secondary);
+  }
+
+  ::slotted(.nav-button[aria-current="page"]),
+  ::slotted(.nav-button.active) {
+    background: var(--ag-primary-background);
+    color: var(--ag-primary-text);
+    font-weight: 600;
+  }
+`;

package/src/styles/nav-sublink-styles.ts

@@ -0,0 +1,22 @@
+import { css } from 'lit';
+
+export const NAV_SUBLINK_STYLES = css`
+  ::slotted(.nav-sublink) {
+    display: block;
+    padding: var(--ag-space-2);
+    border-radius: var(--ag-radius-sm);
+    text-decoration: none;
+    color: var(--ag-text-primary);
+    font-size: var(--ag-font-size-sm);
+    transition: background 0.15s;
+        white-space: nowrap;
+  }
+  ::slotted(.nav-sublink:hover) {
+    background: var(--ag-background-secondary);
+  }
+  ::slotted(.nav-sublink.active) {
+    background: var(--ag-primary-background);
+    color: var(--ag-primary-text);
+    font-weight: 500;
+  }
+`;

package/src/styles/table.css

@@ -0,0 +1,208 @@
+/* v2/lib/src/components/Table/core/table.css */
+
+/* Base Table Styles */
+.ag-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-family: inherit;
+  font-size: var(--ag-font-size-base);
+  color: var(--ag-text-primary);
+  background-color: var(--ag-background-primary);
+}
+
+.ag-table caption {
+  padding: var(--ag-space-3) 0;
+  font-weight: 600;
+  text-align: start;
+  color: var(--ag-text-primary);
+  caption-side: top;
+}
+
+.ag-table th,
+.ag-table td {
+  padding: var(--ag-space-3) var(--ag-space-4);
+  text-align: start;
+  border-bottom: var(--ag-border-width-1) solid var(--ag-border-subtle);
+  line-height: var(--ag-line-height-base);
+}
+
+.ag-table thead th {
+  font-weight: 600;
+  background-color: var(--ag-background-secondary);
+  color: var(--ag-text-primary);
+  vertical-align: bottom;
+}
+
+.ag-table tbody tr {
+  background-color: var(--ag-background-primary);
+  transition: background-color var(--ag-motion-fast);
+}
+
+.ag-table tfoot td,
+.ag-table tfoot th {
+  font-weight: 600;
+  background-color: var(--ag-background-secondary);
+  border-top: var(--ag-border-width-2) solid var(--ag-border);
+}
+
+/* Variant: Stacked (stronger hierarchy) */
+.ag-table--stacked thead th {
+  background-color: var(--ag-neutral-800);
+  color: var(--ag-white);
+  font-weight: 600;
+}
+
+[data-theme="dark"] .ag-table--stacked thead th {
+  background-color: var(--ag-neutral-700);
+  color: var(--ag-text-primary);
+}
+
+/* Variant: Minimal (ultra-light) */
+.ag-table--minimal thead th {
+  background-color: transparent;
+  border-bottom: var(--ag-border-width-2) solid var(--ag-border);
+  font-weight: 600;
+}
+
+.ag-table--minimal tbody tr {
+  background-color: transparent;
+}
+
+.ag-table--minimal th,
+.ag-table--minimal td {
+  border-bottom: var(--ag-border-width-1) solid var(--ag-border-subtle);
+}
+
+/* Variant: Monochrome (high contrast) */
+.ag-table--monochrome thead th {
+  background-color: var(--ag-black);
+  color: var(--ag-white);
+  font-weight: 700;
+  border-bottom: var(--ag-border-width-2) solid var(--ag-black);
+}
+
+[data-theme="dark"] .ag-table--monochrome thead th {
+  background-color: var(--ag-white);
+  color: var(--ag-black);
+  border-bottom-color: var(--ag-white);
+}
+
+.ag-table--monochrome tbody tr {
+  border-bottom: var(--ag-border-width-1) solid var(--ag-border);
+}
+
+/* Size: Small */
+.ag-table--small th,
+.ag-table--small td {
+  padding: var(--ag-space-2) var(--ag-space-3);
+  font-size: var(--ag-font-size-sm);
+}
+
+.ag-table--small caption {
+  padding: var(--ag-space-2) 0;
+  font-size: var(--ag-font-size-sm);
+}
+
+/* Size: Large */
+.ag-table--large th,
+.ag-table--large td {
+  padding: var(--ag-space-5) var(--ag-space-6);
+  font-size: var(--ag-font-size-md);
+}
+
+.ag-table--large caption {
+  padding: var(--ag-space-5) 0;
+  font-size: var(--ag-font-size-md);
+}
+
+/* Modifier: Striped */
+.ag-table--striped tbody tr:nth-child(even) {
+  background-color: var(--ag-background-secondary);
+}
+
+/* Modifier: Bordered */
+.ag-table--bordered th,
+.ag-table--bordered td {
+  border: var(--ag-border-width-1) solid var(--ag-border-subtle);
+}
+
+.ag-table--bordered thead th {
+  border-bottom-width: var(--ag-border-width-2);
+}
+
+/* Modifier: Hoverable */
+.ag-table--hoverable tbody tr:hover {
+  background-color: var(--ag-blue-50);
+  cursor: pointer;
+}
+
+[data-theme="dark"] .ag-table--hoverable tbody tr:hover {
+  background-color: var(--ag-neutral-800);
+}
+
+/* Combination: Striped + Hoverable */
+.ag-table--striped.ag-table--hoverable tbody tr:nth-child(even):hover {
+  background-color: var(--ag-blue-100);
+}
+
+[data-theme="dark"] .ag-table--striped.ag-table--hoverable tbody tr:nth-child(even):hover {
+  background-color: var(--ag-neutral-700);
+}
+
+/* Responsive: Mobile stacked layout */
+@media (max-width: 640px) {
+  .ag-table--responsive {
+    border: 0;
+  }
+
+  .ag-table--responsive thead {
+    display: none;
+  }
+
+  .ag-table--responsive tbody,
+  .ag-table--responsive tr,
+  .ag-table--responsive td {
+    display: block;
+    width: 100%;
+  }
+
+  .ag-table--responsive tr {
+    margin-bottom: var(--ag-space-4);
+    border: var(--ag-border-width-1) solid var(--ag-border);
+    border-radius: var(--ag-radius-md);
+    padding: var(--ag-space-3);
+    background-color: var(--ag-background-primary);
+  }
+
+  .ag-table--responsive td {
+    padding: var(--ag-space-2) 0;
+    border: none;
+    text-align: end;
+    position: relative;
+    padding-inline-start: 50%;
+  }
+
+  .ag-table--responsive td::before {
+    content: attr(data-label);
+    position: absolute;
+    inset-inline-start: 0;
+    width: 45%;
+    padding-inline-end: var(--ag-space-2);
+    font-weight: 600;
+    text-align: start;
+    color: var(--ag-text-secondary);
+  }
+}
+
+/* Accessibility: Visually hidden caption */
+.ag-table caption.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

package/src/svelte.d.ts

@@ -0,0 +1,5 @@
+declare module '*.svelte' {
+  import type { ComponentType, SvelteComponent } from 'svelte';
+  const component: ComponentType<SvelteComponent>;
+  export default component;
+}

package/src/types/fx.ts

@@ -0,0 +1,36 @@
+/**
+ * Shared FX (effects) types used across FX-enabled components
+ *
+ * This module exports the FxProps interface that can be used to:
+ * 1. Add FX capabilities to custom components
+ * 2. Extend existing FX components
+ * 3. Maintain type consistency across your application
+ *
+ * @example
+ * ```typescript
+ * import type { FxProps } from 'agnosticui-core';
+ *
+ * // Add FX to your custom component
+ * export interface MyCardFxProps extends CardProps, FxProps {}
+ *
+ * export class MyCardFx extends Card implements FxProps {
+ *   // Use the same FX pattern as ButtonFx and IconButtonFx
+ * }
+ * ```
+ */
+
+/**
+ * FX props interface - shared by ButtonFx, IconButtonFx, and other FX components
+ *
+ * @public
+ */
+export interface FxProps {
+  /** Animation effect name (e.g., 'pulse', 'bounce', 'wobble', 'pulse-wobble') */
+  fx?: string;
+  /** Animation duration/speed variant */
+  fxSpeed?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  /** Animation easing function */
+  fxEase?: 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'bounce' | 'spring-sm' | 'spring-md' | 'spring-lg';
+  /** Disable all FX animations */
+  fxDisabled?: boolean;
+}

package/src/types/vue.d.ts

@@ -0,0 +1,6 @@
+// Vue module declarations
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue';
+  const component: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
+  export default component;
+}