@getmicdrop/venue-calendar 4.3.57 → 4.3.59

package/src/lib/theme.js

@@ -1,222 +1,222 @@
-/**
- * Theme Configuration for Embeddable Calendar Widget
- *
- * This module provides comprehensive theming options for the calendar widget.
- * All colors use HSL format for easy manipulation.
- *
- * Usage:
- * 1. Import and call applyTheme() with your custom theme
- * 2. Or set CSS custom properties directly on the widget container
- *
- * Example:
- * ```js
- * import { applyTheme, themes } from '@getmicdrop/venue-calendar/theme';
- * applyTheme(themes.dark);
- *
- * // Or custom theme:
- * applyTheme({
- *   brandPrimary: '270 76% 60%', // Purple
- *   textPrimary: '0 0% 100%',
- *   bgPrimary: '0 0% 10%',
- * });
- * ```
- */
-
-// Default light theme
-export const lightTheme = {
-  // Brand colors
-  brandPrimary: '217 91% 60%', // #2563EB - Blue
-
-  // Text colors
-  textPrimary: '0 0% 0%', // Black
-  textSecondary: '0 0% 40%', // Dark Gray
-  textTertiary: '0 0% 60%', // Gray
-
-  // Background colors
-  bgPrimary: '0 0% 100%', // White
-  bgSecondary: '0 0% 98%', // Light Gray
-  bgQuaternary: '0 0% 96%', // Very Light Gray
-
-  // Border/Stroke colors
-  strokePrimary: '0 0% 80%', // Medium Gray
-  strokeSecondary: '0 0% 90%', // Light Gray
-
-  // Status colors
-  statusOnSale: '217 91% 60%', // Blue
-  statusSellingFast: '38 92% 50%', // Orange
-  statusSoldOut: '0 84% 60%', // Red
-
-  // Calendar specific
-  todayBg: '217 91% 97%', // Light blue
-  todayText: '217 91% 50%', // Blue
-  eventDotOnSale: '217 91% 60%',
-  eventDotSellingFast: '38 92% 50%',
-  eventDotSoldOut: '0 84% 60%',
-
-  // Interaction states
-  hoverBg: '0 0% 96%',
-  focusRing: '217 91% 60%',
-};
-
-// Dark theme
-export const darkTheme = {
-  // Brand colors
-  brandPrimary: '217 91% 65%', // Lighter blue for dark mode
-
-  // Text colors
-  textPrimary: '0 0% 98%', // Near white
-  textSecondary: '0 0% 70%', // Light gray
-  textTertiary: '0 0% 50%', // Gray
-
-  // Background colors
-  bgPrimary: '0 0% 9%', // Very dark gray
-  bgSecondary: '0 0% 13%', // Dark gray
-  bgQuaternary: '0 0% 17%', // Slightly lighter
-
-  // Border/Stroke colors
-  strokePrimary: '0 0% 30%',
-  strokeSecondary: '0 0% 20%',
-
-  // Status colors
-  statusOnSale: '217 91% 65%',
-  statusSellingFast: '38 92% 55%',
-  statusSoldOut: '0 84% 65%',
-
-  // Calendar specific
-  todayBg: '217 50% 20%',
-  todayText: '217 91% 70%',
-  eventDotOnSale: '217 91% 65%',
-  eventDotSellingFast: '38 92% 55%',
-  eventDotSoldOut: '0 84% 65%',
-
-  // Interaction states
-  hoverBg: '0 0% 20%',
-  focusRing: '217 91% 65%',
-};
-
-// High contrast theme for accessibility
-export const highContrastTheme = {
-  brandPrimary: '217 100% 50%',
-  textPrimary: '0 0% 0%',
-  textSecondary: '0 0% 20%',
-  textTertiary: '0 0% 30%',
-  bgPrimary: '0 0% 100%',
-  bgSecondary: '0 0% 95%',
-  bgQuaternary: '0 0% 90%',
-  strokePrimary: '0 0% 0%',
-  strokeSecondary: '0 0% 30%',
-  statusOnSale: '217 100% 40%',
-  statusSellingFast: '30 100% 40%',
-  statusSoldOut: '0 100% 40%',
-  todayBg: '217 100% 90%',
-  todayText: '217 100% 30%',
-  eventDotOnSale: '217 100% 40%',
-  eventDotSellingFast: '30 100% 40%',
-  eventDotSoldOut: '0 100% 40%',
-  hoverBg: '217 100% 95%',
-  focusRing: '217 100% 40%',
-};
-
-// Preset themes collection
-export const themes = {
-  light: lightTheme,
-  dark: darkTheme,
-  highContrast: highContrastTheme,
-};
-
-/**
- * Apply a theme to the calendar widget
- * @param {Object} theme - Theme object with HSL color values
- * @param {HTMLElement} container - Optional container element (defaults to :root)
- */
-export function applyTheme(theme, container = document.documentElement) {
-  const cssVarMap = {
-    brandPrimary: '--brand-primary',
-    textPrimary: '--text-primary',
-    textSecondary: '--text-secondary',
-    textTertiary: '--text-tertiary',
-    bgPrimary: '--bg-primary',
-    bgSecondary: '--bg-secondary',
-    bgQuaternary: '--bg-quaternary',
-    strokePrimary: '--stroke-primary',
-    strokeSecondary: '--stroke-secondary',
-    statusOnSale: '--status-on-sale',
-    statusSellingFast: '--status-selling-fast',
-    statusSoldOut: '--status-sold-out',
-    todayBg: '--today-bg',
-    todayText: '--today-text',
-    eventDotOnSale: '--event-dot-on-sale',
-    eventDotSellingFast: '--event-dot-selling-fast',
-    eventDotSoldOut: '--event-dot-sold-out',
-    hoverBg: '--hover-bg',
-    focusRing: '--focus-ring',
-  };
-
-  Object.entries(theme).forEach(([key, value]) => {
-    const cssVar = cssVarMap[key];
-    if (cssVar) {
-      container.style.setProperty(cssVar, value);
-    }
-  });
-
-  // Sync data-theme attribute when a known preset is applied so SC
-  // components (Stripe theme detector, DarkModeToggle reader, etc.)
-  // see the same intent. Partial/custom themes don't trigger this —
-  // they edit a few CSS vars without flipping the overall light/dark
-  // mode signal.
-  if (container.setAttribute) {
-    if (theme === darkTheme) {
-      container.setAttribute('data-theme', 'dark');
-    } else if (theme === lightTheme || theme === highContrastTheme) {
-      container.setAttribute('data-theme', 'light');
-    }
-  }
-}
-
-/**
- * Generate CSS string for embedding
- * @param {Object} theme - Theme object
- * @returns {string} CSS string
- */
-export function generateThemeCSS(theme) {
-  const cssVarMap = {
-    brandPrimary: '--brand-primary',
-    textPrimary: '--text-primary',
-    textSecondary: '--text-secondary',
-    textTertiary: '--text-tertiary',
-    bgPrimary: '--bg-primary',
-    bgSecondary: '--bg-secondary',
-    bgQuaternary: '--bg-quaternary',
-    strokePrimary: '--stroke-primary',
-    strokeSecondary: '--stroke-secondary',
-    statusOnSale: '--status-on-sale',
-    statusSellingFast: '--status-selling-fast',
-    statusSoldOut: '--status-sold-out',
-    todayBg: '--today-bg',
-    todayText: '--today-text',
-    eventDotOnSale: '--event-dot-on-sale',
-    eventDotSellingFast: '--event-dot-selling-fast',
-    eventDotSoldOut: '--event-dot-sold-out',
-    hoverBg: '--hover-bg',
-    focusRing: '--focus-ring',
-  };
-
-  const lines = [];
-  Object.entries(theme).forEach(([key, value]) => {
-    const cssVar = cssVarMap[key];
-    if (cssVar) {
-      lines.push(`  ${cssVar}: ${value};`);
-    }
-  });
-
-  return `:root {\n${lines.join('\n')}\n}`;
-}
-
-export default {
-  themes,
-  lightTheme,
-  darkTheme,
-  highContrastTheme,
-  applyTheme,
-  generateThemeCSS,
-};
+/**
+ * Theme Configuration for Embeddable Calendar Widget
+ *
+ * This module provides comprehensive theming options for the calendar widget.
+ * All colors use HSL format for easy manipulation.
+ *
+ * Usage:
+ * 1. Import and call applyTheme() with your custom theme
+ * 2. Or set CSS custom properties directly on the widget container
+ *
+ * Example:
+ * ```js
+ * import { applyTheme, themes } from '@getmicdrop/venue-calendar/theme';
+ * applyTheme(themes.dark);
+ *
+ * // Or custom theme:
+ * applyTheme({
+ *   brandPrimary: '270 76% 60%', // Purple
+ *   textPrimary: '0 0% 100%',
+ *   bgPrimary: '0 0% 10%',
+ * });
+ * ```
+ */
+
+// Default light theme
+export const lightTheme = {
+  // Brand colors
+  brandPrimary: '217 91% 60%', // #2563EB - Blue
+
+  // Text colors
+  textPrimary: '0 0% 0%', // Black
+  textSecondary: '0 0% 40%', // Dark Gray
+  textTertiary: '0 0% 60%', // Gray
+
+  // Background colors
+  bgPrimary: '0 0% 100%', // White
+  bgSecondary: '0 0% 98%', // Light Gray
+  bgQuaternary: '0 0% 96%', // Very Light Gray
+
+  // Border/Stroke colors
+  strokePrimary: '0 0% 80%', // Medium Gray
+  strokeSecondary: '0 0% 90%', // Light Gray
+
+  // Status colors
+  statusOnSale: '217 91% 60%', // Blue
+  statusSellingFast: '38 92% 50%', // Orange
+  statusSoldOut: '0 84% 60%', // Red
+
+  // Calendar specific
+  todayBg: '217 91% 97%', // Light blue
+  todayText: '217 91% 50%', // Blue
+  eventDotOnSale: '217 91% 60%',
+  eventDotSellingFast: '38 92% 50%',
+  eventDotSoldOut: '0 84% 60%',
+
+  // Interaction states
+  hoverBg: '0 0% 96%',
+  focusRing: '217 91% 60%',
+};
+
+// Dark theme
+export const darkTheme = {
+  // Brand colors
+  brandPrimary: '217 91% 65%', // Lighter blue for dark mode
+
+  // Text colors
+  textPrimary: '0 0% 98%', // Near white
+  textSecondary: '0 0% 70%', // Light gray
+  textTertiary: '0 0% 50%', // Gray
+
+  // Background colors
+  bgPrimary: '0 0% 9%', // Very dark gray
+  bgSecondary: '0 0% 13%', // Dark gray
+  bgQuaternary: '0 0% 17%', // Slightly lighter
+
+  // Border/Stroke colors
+  strokePrimary: '0 0% 30%',
+  strokeSecondary: '0 0% 20%',
+
+  // Status colors
+  statusOnSale: '217 91% 65%',
+  statusSellingFast: '38 92% 55%',
+  statusSoldOut: '0 84% 65%',
+
+  // Calendar specific
+  todayBg: '217 50% 20%',
+  todayText: '217 91% 70%',
+  eventDotOnSale: '217 91% 65%',
+  eventDotSellingFast: '38 92% 55%',
+  eventDotSoldOut: '0 84% 65%',
+
+  // Interaction states
+  hoverBg: '0 0% 20%',
+  focusRing: '217 91% 65%',
+};
+
+// High contrast theme for accessibility
+export const highContrastTheme = {
+  brandPrimary: '217 100% 50%',
+  textPrimary: '0 0% 0%',
+  textSecondary: '0 0% 20%',
+  textTertiary: '0 0% 30%',
+  bgPrimary: '0 0% 100%',
+  bgSecondary: '0 0% 95%',
+  bgQuaternary: '0 0% 90%',
+  strokePrimary: '0 0% 0%',
+  strokeSecondary: '0 0% 30%',
+  statusOnSale: '217 100% 40%',
+  statusSellingFast: '30 100% 40%',
+  statusSoldOut: '0 100% 40%',
+  todayBg: '217 100% 90%',
+  todayText: '217 100% 30%',
+  eventDotOnSale: '217 100% 40%',
+  eventDotSellingFast: '30 100% 40%',
+  eventDotSoldOut: '0 100% 40%',
+  hoverBg: '217 100% 95%',
+  focusRing: '217 100% 40%',
+};
+
+// Preset themes collection
+export const themes = {
+  light: lightTheme,
+  dark: darkTheme,
+  highContrast: highContrastTheme,
+};
+
+/**
+ * Apply a theme to the calendar widget
+ * @param {Object} theme - Theme object with HSL color values
+ * @param {HTMLElement} container - Optional container element (defaults to :root)
+ */
+export function applyTheme(theme, container = document.documentElement) {
+  const cssVarMap = {
+    brandPrimary: '--brand-primary',
+    textPrimary: '--text-primary',
+    textSecondary: '--text-secondary',
+    textTertiary: '--text-tertiary',
+    bgPrimary: '--bg-primary',
+    bgSecondary: '--bg-secondary',
+    bgQuaternary: '--bg-quaternary',
+    strokePrimary: '--stroke-primary',
+    strokeSecondary: '--stroke-secondary',
+    statusOnSale: '--status-on-sale',
+    statusSellingFast: '--status-selling-fast',
+    statusSoldOut: '--status-sold-out',
+    todayBg: '--today-bg',
+    todayText: '--today-text',
+    eventDotOnSale: '--event-dot-on-sale',
+    eventDotSellingFast: '--event-dot-selling-fast',
+    eventDotSoldOut: '--event-dot-sold-out',
+    hoverBg: '--hover-bg',
+    focusRing: '--focus-ring',
+  };
+
+  Object.entries(theme).forEach(([key, value]) => {
+    const cssVar = cssVarMap[key];
+    if (cssVar) {
+      container.style.setProperty(cssVar, value);
+    }
+  });
+
+  // Sync data-theme attribute when a known preset is applied so SC
+  // components (Stripe theme detector, DarkModeToggle reader, etc.)
+  // see the same intent. Partial/custom themes don't trigger this —
+  // they edit a few CSS vars without flipping the overall light/dark
+  // mode signal.
+  if (container.setAttribute) {
+    if (theme === darkTheme) {
+      container.setAttribute('data-theme', 'dark');
+    } else if (theme === lightTheme || theme === highContrastTheme) {
+      container.setAttribute('data-theme', 'light');
+    }
+  }
+}
+
+/**
+ * Generate CSS string for embedding
+ * @param {Object} theme - Theme object
+ * @returns {string} CSS string
+ */
+export function generateThemeCSS(theme) {
+  const cssVarMap = {
+    brandPrimary: '--brand-primary',
+    textPrimary: '--text-primary',
+    textSecondary: '--text-secondary',
+    textTertiary: '--text-tertiary',
+    bgPrimary: '--bg-primary',
+    bgSecondary: '--bg-secondary',
+    bgQuaternary: '--bg-quaternary',
+    strokePrimary: '--stroke-primary',
+    strokeSecondary: '--stroke-secondary',
+    statusOnSale: '--status-on-sale',
+    statusSellingFast: '--status-selling-fast',
+    statusSoldOut: '--status-sold-out',
+    todayBg: '--today-bg',
+    todayText: '--today-text',
+    eventDotOnSale: '--event-dot-on-sale',
+    eventDotSellingFast: '--event-dot-selling-fast',
+    eventDotSoldOut: '--event-dot-sold-out',
+    hoverBg: '--hover-bg',
+    focusRing: '--focus-ring',
+  };
+
+  const lines = [];
+  Object.entries(theme).forEach(([key, value]) => {
+    const cssVar = cssVarMap[key];
+    if (cssVar) {
+      lines.push(`  ${cssVar}: ${value};`);
+    }
+  });
+
+  return `:root {\n${lines.join('\n')}\n}`;
+}
+
+export default {
+  themes,
+  lightTheme,
+  darkTheme,
+  highContrastTheme,
+  applyTheme,
+  generateThemeCSS,
+};

package/dist/Badge-BsWJrQII.js

@@ -1,108 +0,0 @@
-import { o as e, r as t } from "./keyboard-Crrnn87b.js";
-import { n, t as r } from "./sizing-CFDo_qh_.js";
-import "svelte/internal/disclose-version";
-import * as i from "svelte/internal/client";
-//#region node_modules/@getmicdrop/svelte-components/dist/tokens/variants.js
-var a = {
-	success: "text-status-success-text bg-status-success-bg",
-	warning: "text-status-warning-text bg-status-warning-bg",
-	error: "text-status-error-text bg-status-error-bg",
-	danger: "text-status-error-text bg-status-error-bg",
-	info: "text-status-info-text bg-status-info-bg",
-	brand: "text-brand-primary-foreground bg-brand-primary",
-	neutral: "text-text-primary bg-muted",
-	red: "text-status-error-text bg-status-error-bg",
-	blue: "text-status-info-text bg-status-info-bg",
-	purple: "text-brand-primary bg-status-info-bg",
-	green: "text-status-success-text bg-status-success-bg",
-	orange: "text-status-warning-text bg-status-warning-bg",
-	yellow: "text-status-warning-text bg-status-warning-bg",
-	gray: "text-text-primary bg-muted",
-	pink: "text-accent-danger bg-status-error-bg",
-	indigo: "text-brand-primary bg-status-info-bg",
-	cyan: "text-status-info-text bg-status-info-bg",
-	notification: "text-white bg-accent-danger"
-}, o = {
-	success: "border-status-success-border",
-	warning: "border-status-warning-border",
-	error: "border-status-error-border",
-	danger: "border-status-error-border",
-	info: "border-status-info-border",
-	brand: "border-stroke-primary",
-	neutral: "border-stroke-primary",
-	red: "border-status-error-border",
-	blue: "border-status-info-border",
-	purple: "border-status-info-border",
-	green: "border-status-success-border",
-	orange: "border-status-warning-border",
-	yellow: "border-status-warning-border",
-	gray: "border-stroke-primary",
-	pink: "border-status-error-border",
-	indigo: "border-status-info-border",
-	cyan: "border-status-info-border",
-	notification: "border-status-error-border"
-}, s = {
-	info: "text-status-info-text border border-status-info-border bg-status-info-bg",
-	success: "text-status-success-text border border-status-success-border bg-status-success-bg",
-	warning: "text-status-warning-text border border-status-warning-border bg-status-warning-bg",
-	danger: "text-status-error-text border border-status-error-border bg-status-error-bg"
-}, c = {
-	blue: "fill-brand-primary",
-	gray: "fill-muted-foreground",
-	green: "fill-accent-success",
-	red: "fill-accent-danger",
-	yellow: "fill-accent-warning",
-	pink: "fill-accent-danger",
-	purple: "fill-brand-primary",
-	white: "fill-white"
-};
-function l(e) {
-	return `border ${o[String(e || "neutral").toLowerCase()] || o.neutral}`;
-}
-//#endregion
-//#region node_modules/@getmicdrop/svelte-components/dist/primitives/Badges/Badge.svelte
-var u = i.from_html("<span class=\"w-1.5 h-1.5 rounded-full bg-current shrink-0\"></span>"), d = i.from_html("<!> <!> <!>", 1);
-function f(o, s) {
-	i.push(s, !0);
-	let c = i.prop(s, "as", 3, "div"), f = i.prop(s, "size", 3, "md"), p = i.prop(s, "class", 3, ""), m = i.prop(s, "variant", 3, "neutral"), h = i.prop(s, "tone", 3, "default"), g = i.prop(s, "textColor", 3, null), _ = i.prop(s, "bgColor", 3, null), v = i.prop(s, "showDot", 3, !1), y = i.prop(s, "pill", 3, !1), b = i.prop(s, "shape", 3, "rounded"), x = i.prop(s, "large", 3, !1), S = i.derived(() => () => x() ? "lg" : r[f()] || f() || "md"), C = i.derived(() => (() => {
-		let e = n[i.get(S)()] || n.md;
-		return h() === "minimal" ? e.replaceAll(/\bp[xy]?-[^\s]+/g, "").trim() : e;
-	})()), w = i.derived(() => h() === "minimal" ? "" : y() ? "rounded-full min-w-5 h-5 px-1.5 justify-center" : b() === "pill" ? "rounded-full" : "rounded"), T = i.derived(() => String(m()).toLowerCase()), E = "text-white", D = { notification: "text-accent-danger" }, O = i.derived(() => (() => {
-		let e = a[i.get(T)] || a.neutral;
-		if (h() === "outlined") return `${e} ${l(i.get(T))}`;
-		if (h() === "minimal") {
-			let t = e.replaceAll(/\bbg-[^\s]+/g, "").trim(), n = D[i.get(T)];
-			return n ? t.includes(E) ? t.replace(E, n) : n : t;
-		}
-		return e;
-	})()), k = i.derived(() => (() => {
-		let e = [];
-		return g() && e.push(`color: ${g()}`), _() && e.push(`background-color: ${_()}`), e.length > 0 ? e.join("; ") : void 0;
-	})());
-	var A = i.comment(), j = i.first_child(A);
-	i.element(j, () => c() === "span" ? "span" : "div", !1, (n, r) => {
-		i.attribute_effect(n, (e) => ({
-			class: e,
-			style: i.get(k),
-			role: s.onclick ? "button" : void 0,
-			tabindex: s.onclick ? 0 : void 0,
-			onclick: s.onclick ? (e) => s.onclick(e) : void 0,
-			onkeydown: s.onclick ? (e) => {
-				t(e) && e.target === e.currentTarget && (e.preventDefault(), e.currentTarget.click());
-			} : void 0
-		}), [() => e("inline-flex items-center gap-1.5", i.get(C), i.get(O), i.get(w), p())]);
-		var a = d(), o = i.first_child(a), c = (e) => {
-			var t = u();
-			i.append(e, t);
-		};
-		i.if(o, (e) => {
-			v() && e(c);
-		});
-		var l = i.sibling(o, 2);
-		i.snippet(l, () => s.leftIcon ?? i.noop);
-		var f = i.sibling(l, 2);
-		i.snippet(f, () => s.children ?? i.noop), i.append(r, a);
-	}), i.append(o, A), i.pop();
-}
-//#endregion
-export { c as i, s as n, a as r, f as t };