@getmicdrop/svelte-components 5.5.1 → 5.5.4

package/dist/tailwind/preset.cjs

@@ -1,82 +1,82 @@
-const colors = {
-  'bg-primary': 'hsl(var(--bg-primary) / <alpha-value>)',
-  'bg-secondary': 'hsl(var(--bg-secondary) / <alpha-value>)',
-  'bg-tertiary': 'hsl(var(--bg-tertiary) / <alpha-value>)',
-  'bg-quaternary': 'hsl(var(--bg-quaternary) / <alpha-value>)',
-  'text-primary': 'hsl(var(--text-primary) / <alpha-value>)',
-  'text-secondary': 'hsl(var(--text-secondary) / <alpha-value>)',
-  'text-tertiary': 'hsl(var(--text-tertiary) / <alpha-value>)',
-  'text-head': 'hsl(var(--text-head) / <alpha-value>)',
-  'brand-primary': 'hsl(var(--brand-primary) / <alpha-value>)',
-  'accent-warning': 'hsl(var(--accent-warning) / <alpha-value>)',
-  'accent-danger': 'hsl(var(--accent-danger) / <alpha-value>)',
-  'accent-success': 'hsl(var(--accent-success) / <alpha-value>)',
-  'stroke-primary': 'hsl(var(--stroke-primary) / <alpha-value>)',
-  'stroke-secondary': 'hsl(var(--stroke-secondary) / <alpha-value>)',
-  border: 'hsl(var(--border) / <alpha-value>)',
-  card: 'hsl(var(--card) / <alpha-value>)',
-  'card-foreground': 'hsl(var(--card-foreground) / <alpha-value>)',
-  popover: 'hsl(var(--popover) / <alpha-value>)',
-  'popover-foreground': 'hsl(var(--popover-foreground) / <alpha-value>)',
-  muted: 'hsl(var(--muted) / <alpha-value>)',
-  'muted-foreground': 'hsl(var(--muted-foreground) / <alpha-value>)',
-  'hover-primary': 'hsl(var(--hover-primary) / <alpha-value>)',
-  'sidebar-background': 'hsl(var(--sidebar-background) / <alpha-value>)',
-  'sidebar-foreground': 'hsl(var(--sidebar-foreground) / <alpha-value>)',
-  'sidebar-border': 'hsl(var(--sidebar-border) / <alpha-value>)',
-  'sidebar-primary': 'hsl(var(--sidebar-primary) / <alpha-value>)',
-  'sidebar-primary-foreground': 'hsl(var(--sidebar-primary-foreground) / <alpha-value>)',
-};
-
-const borderRadius = {
-  none: '0px',
-  sm: '0.125rem',
-  DEFAULT: '0.25rem',
-  md: '0.375rem',
-  lg: '0.5rem',
-  xl: '0.75rem',
-  '2xl': '1rem',
-  '3xl': '1.5rem',
-  full: '9999px',
-};
-
-const boxShadow = {
-  sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
-  DEFAULT: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
-  md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
-  lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
-  xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
-  '2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
-  inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
-  none: 'none',
-  modal: '0 0 31px 0 rgb(0 0 0 / 0.1)',
-};
-
-const zIndex = {
-  auto: 'auto',
-  0: '0',
-  10: '10',
-  20: '20',
-  30: '30',
-  40: '40',
-  50: '50',
-  51: '51',
-  60: '60',
-  70: '70',
-  100: '100',
-};
-
-module.exports = {
-  theme: {
-    extend: {
-      colors,
-      borderRadius,
-      boxShadow,
-      zIndex,
-      fontFamily: {
-        sans: ['Inter', 'system-ui', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', 'sans-serif'],
-        mono: ['ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', 'monospace'],
-      },
-    },
-  },
-};
+const colors = {
+  'bg-primary': 'hsl(var(--bg-primary) / <alpha-value>)',
+  'bg-secondary': 'hsl(var(--bg-secondary) / <alpha-value>)',
+  'bg-tertiary': 'hsl(var(--bg-tertiary) / <alpha-value>)',
+  'bg-quaternary': 'hsl(var(--bg-quaternary) / <alpha-value>)',
+  'text-primary': 'hsl(var(--text-primary) / <alpha-value>)',
+  'text-secondary': 'hsl(var(--text-secondary) / <alpha-value>)',
+  'text-tertiary': 'hsl(var(--text-tertiary) / <alpha-value>)',
+  'text-head': 'hsl(var(--text-head) / <alpha-value>)',
+  'brand-primary': 'hsl(var(--brand-primary) / <alpha-value>)',
+  'accent-warning': 'hsl(var(--accent-warning) / <alpha-value>)',
+  'accent-danger': 'hsl(var(--accent-danger) / <alpha-value>)',
+  'accent-success': 'hsl(var(--accent-success) / <alpha-value>)',
+  'stroke-primary': 'hsl(var(--stroke-primary) / <alpha-value>)',
+  'stroke-secondary': 'hsl(var(--stroke-secondary) / <alpha-value>)',
+  border: 'hsl(var(--border) / <alpha-value>)',
+  card: 'hsl(var(--card) / <alpha-value>)',
+  'card-foreground': 'hsl(var(--card-foreground) / <alpha-value>)',
+  popover: 'hsl(var(--popover) / <alpha-value>)',
+  'popover-foreground': 'hsl(var(--popover-foreground) / <alpha-value>)',
+  muted: 'hsl(var(--muted) / <alpha-value>)',
+  'muted-foreground': 'hsl(var(--muted-foreground) / <alpha-value>)',
+  'hover-primary': 'hsl(var(--hover-primary) / <alpha-value>)',
+  'sidebar-background': 'hsl(var(--sidebar-background) / <alpha-value>)',
+  'sidebar-foreground': 'hsl(var(--sidebar-foreground) / <alpha-value>)',
+  'sidebar-border': 'hsl(var(--sidebar-border) / <alpha-value>)',
+  'sidebar-primary': 'hsl(var(--sidebar-primary) / <alpha-value>)',
+  'sidebar-primary-foreground': 'hsl(var(--sidebar-primary-foreground) / <alpha-value>)',
+};
+
+const borderRadius = {
+  none: '0px',
+  sm: '0.125rem',
+  DEFAULT: '0.25rem',
+  md: '0.375rem',
+  lg: '0.5rem',
+  xl: '0.75rem',
+  '2xl': '1rem',
+  '3xl': '1.5rem',
+  full: '9999px',
+};
+
+const boxShadow = {
+  sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+  DEFAULT: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
+  md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+  lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
+  xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
+  '2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
+  inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
+  none: 'none',
+  modal: '0 0 31px 0 rgb(0 0 0 / 0.1)',
+};
+
+const zIndex = {
+  auto: 'auto',
+  0: '0',
+  10: '10',
+  20: '20',
+  30: '30',
+  40: '40',
+  50: '50',
+  51: '51',
+  60: '60',
+  70: '70',
+  100: '100',
+};
+
+module.exports = {
+  theme: {
+    extend: {
+      colors,
+      borderRadius,
+      boxShadow,
+      zIndex,
+      fontFamily: {
+        sans: ['Inter', 'system-ui', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', 'sans-serif'],
+        mono: ['ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', 'monospace'],
+      },
+    },
+  },
+};

package/dist/tokens/tokens.css

@@ -1,87 +1,87 @@
-:root {
-  --bg-primary: 0 0% 100%;
-  --bg-secondary: 220 7% 97%;
-  --bg-tertiary: 220 7% 94%;
-  --bg-quaternary: 220 6% 91%;
-
-  --text-primary: 221 50% 10%;
-  --text-secondary: 220 20% 18%;
-  --text-tertiary: 221 9% 44%;
-  --text-head: 221 9% 44%;
-
-  --brand-primary: 209 99% 50%;
-
-  --accent-warning: 28 100% 59%;
-  --accent-danger: 0 100% 70%;
-  --accent-success: 131 77% 35%;
-
-  --stroke-primary: 216 6% 84%;
-  --stroke-secondary: 216 6% 84%;
-  --border: 220 13% 91%;
-
-  --card: 0 0% 100%;
-  --card-foreground: 224 71.4% 4.1%;
-  --popover: 0 0% 100%;
-  --popover-foreground: 224 71.4% 4.1%;
-  --muted: 220 14.3% 95.9%;
-  --muted-foreground: 220 8.9% 46.1%;
-  --hover-primary: 210 20% 96%;
-
-  --sidebar-background: 0 0% 100%;
-  --sidebar-foreground: 220 20% 18%;
-  --sidebar-border: 220 13% 91%;
-  --sidebar-primary: 221 65% 54%;
-  --sidebar-primary-foreground: 221 50% 10%;
-
-  --BG-Primary: var(--bg-primary);
-  --BG-Secondary: var(--bg-secondary);
-  --BG-Tertiary: var(--bg-tertiary);
-  --BG-Quaternary: var(--bg-quaternary);
-  --Text-Primary: var(--text-primary);
-  --Text-Secondary: var(--text-secondary);
-  --Text-Tartiary: var(--text-tertiary);
-  --Text-Head: var(--text-head);
-  --Brand-Primary: var(--brand-primary);
-  --Accent-Warning: var(--accent-warning);
-  --Accent-Danger: var(--accent-danger);
-  --Accent-Success: var(--accent-success);
-  --Stroke-Primary: var(--stroke-primary);
-  --Stroke-Secondary: var(--stroke-secondary);
-}
-
-[data-theme="dark"],
-.dark {
-  --bg-primary: 220 20% 18%;
-  --bg-secondary: 221 50% 10%;
-  --bg-tertiary: 221 50% 6%;
-  --bg-quaternary: 0 0% 0%;
-
-  --text-primary: 220 7% 97%;
-  --text-secondary: 220 7% 94%;
-  --text-tertiary: 220 6% 91%;
-  --text-head: 220 9% 70%;
-
-  --brand-primary: 220 89% 63%;
-
-  --accent-warning: 30 100% 70%;
-  --accent-danger: 0 100% 70%;
-  --accent-success: 142 71% 45%;
-
-  --stroke-primary: 220 20% 28%;
-  --stroke-secondary: 220 20% 28%;
-  --border: 215 27.9% 16.9%;
-
-  --card: 224 20% 10%;
-  --card-foreground: 210 20% 98%;
-  --popover: 224 71.4% 4.1%;
-  --popover-foreground: 210 20% 98%;
-  --muted: 215 27.9% 16.9%;
-  --muted-foreground: 217.9 10.6% 64.9%;
-  --hover-primary: 222 10% 39%;
-
-  --sidebar-background: 220 20% 18%;
-  --sidebar-foreground: 220 7% 94%;
-  --sidebar-border: 215 20% 20%;
-  --sidebar-primary: 221 65% 54%;
-  --sidebar-primary-foreground: 220 7% 97%;
-}
+:root {
+  --bg-primary: 0 0% 100%;
+  --bg-secondary: 220 7% 97%;
+  --bg-tertiary: 220 7% 94%;
+  --bg-quaternary: 220 6% 91%;
+
+  --text-primary: 221 50% 10%;
+  --text-secondary: 220 20% 18%;
+  --text-tertiary: 221 9% 44%;
+  --text-head: 221 9% 44%;
+
+  --brand-primary: 209 99% 50%;
+
+  --accent-warning: 28 100% 59%;
+  --accent-danger: 0 100% 70%;
+  --accent-success: 131 77% 35%;
+
+  --stroke-primary: 216 6% 84%;
+  --stroke-secondary: 216 6% 84%;
+  --border: 220 13% 91%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 224 71.4% 4.1%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 224 71.4% 4.1%;
+  --muted: 220 14.3% 95.9%;
+  --muted-foreground: 220 8.9% 46.1%;
+  --hover-primary: 210 20% 96%;
+
+  --sidebar-background: 0 0% 100%;
+  --sidebar-foreground: 220 20% 18%;
+  --sidebar-border: 220 13% 91%;
+  --sidebar-primary: 221 65% 54%;
+  --sidebar-primary-foreground: 221 50% 10%;
+
+  --BG-Primary: var(--bg-primary);
+  --BG-Secondary: var(--bg-secondary);
+  --BG-Tertiary: var(--bg-tertiary);
+  --BG-Quaternary: var(--bg-quaternary);
+  --Text-Primary: var(--text-primary);
+  --Text-Secondary: var(--text-secondary);
+  --Text-Tartiary: var(--text-tertiary);
+  --Text-Head: var(--text-head);
+  --Brand-Primary: var(--brand-primary);
+  --Accent-Warning: var(--accent-warning);
+  --Accent-Danger: var(--accent-danger);
+  --Accent-Success: var(--accent-success);
+  --Stroke-Primary: var(--stroke-primary);
+  --Stroke-Secondary: var(--stroke-secondary);
+}
+
+[data-theme="dark"],
+.dark {
+  --bg-primary: 220 20% 18%;
+  --bg-secondary: 221 50% 10%;
+  --bg-tertiary: 221 50% 6%;
+  --bg-quaternary: 0 0% 0%;
+
+  --text-primary: 220 7% 97%;
+  --text-secondary: 220 7% 94%;
+  --text-tertiary: 220 6% 91%;
+  --text-head: 220 9% 70%;
+
+  --brand-primary: 220 89% 63%;
+
+  --accent-warning: 30 100% 70%;
+  --accent-danger: 0 100% 70%;
+  --accent-success: 142 71% 45%;
+
+  --stroke-primary: 220 20% 28%;
+  --stroke-secondary: 220 20% 28%;
+  --border: 215 27.9% 16.9%;
+
+  --card: 224 20% 10%;
+  --card-foreground: 210 20% 98%;
+  --popover: 224 71.4% 4.1%;
+  --popover-foreground: 210 20% 98%;
+  --muted: 215 27.9% 16.9%;
+  --muted-foreground: 217.9 10.6% 64.9%;
+  --hover-primary: 222 10% 39%;
+
+  --sidebar-background: 220 20% 18%;
+  --sidebar-foreground: 220 7% 94%;
+  --sidebar-border: 215 20% 20%;
+  --sidebar-primary: 221 65% 54%;
+  --sidebar-primary-foreground: 220 7% 97%;
+}

package/dist/utils/transitions.d.ts

@@ -0,0 +1,24 @@
+/**
+ * A safe version of Svelte's slide transition that guards against NaN height values.
+ *
+ * When an element is inside an {#if} block and the condition becomes true,
+ * Svelte tries to animate from height 0. If the element hasn't been measured yet,
+ * offsetHeight can be 0 or undefined, leading to NaN in the animation.
+ *
+ * This wrapper checks if the element is measurable and skips the animation if not.
+ *
+ * @param {HTMLElement} node - The element to transition
+ * @param {Object} params - Transition parameters
+ * @param {number} [params.delay=0] - Delay before transition starts (ms)
+ * @param {number} [params.duration=400] - Duration of transition (ms)
+ * @param {Function} [params.easing] - Easing function
+ * @param {'x'|'y'} [params.axis='y'] - Axis to slide on
+ * @returns {Object} Transition configuration
+ */
+export function safeSlide(node: HTMLElement, params?: {
+    delay?: number | undefined;
+    duration?: number | undefined;
+    easing?: Function | undefined;
+    axis?: "y" | "x" | undefined;
+}): Object;
+//# sourceMappingURL=transitions.d.ts.map

package/dist/utils/transitions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"transitions.d.ts","sourceRoot":"","sources":["../../src/lib/utils/transitions.js"],"names":[],"mappings":"AAWA;;;;;;;;;;;;;;;;GAgBG;AACH,gCARW,WAAW,WAEnB;IAAwB,KAAK;IACL,QAAQ;IACN,MAAM;IACP,IAAI;CAC7B,GAAU,MAAM,CAkBlB"}

package/dist/utils/transitions.js

@@ -0,0 +1,62 @@
+/**
+ * Safe transition utilities that guard against NaN values
+ *
+ * The standard Svelte slide transition can produce "Invalid keyframe value for property height: NaNpx"
+ * when the element hasn't been measured yet (e.g., during SSR hydration or when mounted in an unmeasured container).
+ *
+ * These utilities wrap Svelte's transitions with guards against invalid values.
+ */
+
+import { slide as svelteSlide } from 'svelte/transition';
+
+/**
+ * A safe version of Svelte's slide transition that guards against NaN height values.
+ *
+ * When an element is inside an {#if} block and the condition becomes true,
+ * Svelte tries to animate from height 0. If the element hasn't been measured yet,
+ * offsetHeight can be 0 or undefined, leading to NaN in the animation.
+ *
+ * This wrapper checks if the element is measurable and skips the animation if not.
+ *
+ * @param {HTMLElement} node - The element to transition
+ * @param {Object} params - Transition parameters
+ * @param {number} [params.delay=0] - Delay before transition starts (ms)
+ * @param {number} [params.duration=400] - Duration of transition (ms)
+ * @param {Function} [params.easing] - Easing function
+ * @param {'x'|'y'} [params.axis='y'] - Axis to slide on
+ * @returns {Object} Transition configuration
+ */
+export function safeSlide(node, params = {}) {
+  // Check if the element is measurable
+  const height = node.offsetHeight;
+  const width = node.offsetWidth;
+
+  // If element has no dimensions (not yet in DOM or hidden), skip animation
+  if ((!height && !width) || !isFinite(height) || !isFinite(width)) {
+    return {
+      delay: params.delay || 0,
+      duration: 0,
+      css: () => ''
+    };
+  }
+
+  // Element is measurable, use standard slide
+  return svelteSlide(node, params);
+}
+
+/**
+ * CSS-based slide alternative using grid-template-rows.
+ * This approach doesn't require JS measurement and never produces NaN.
+ *
+ * Usage in Svelte:
+ * ```svelte
+ * <div class="grid {isOpen ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'} transition-all duration-200">
+ *   <div class="overflow-hidden">
+ *     <!-- content -->
+ *   </div>
+ * </div>
+ * ```
+ *
+ * This is an alternative approach documented here for reference.
+ * The grid-based approach is more performant but requires wrapping content.
+ */