@getmicdrop/svelte-components 2.6.0 → 2.6.3

package/dist/components/Button/Button.svelte

@@ -12,10 +12,9 @@
   import { classNames } from "../../utils/utils.js";
 
   // New clean API
-  export let variant = "blue-solid"; // blue-solid, blue-outline, gray-outline, red-solid, red-outline, red-text, gray-text, icon, toggle
+  export let variant = "blue-solid"; // blue-solid, blue-outline, gray-outline, red-solid, red-outline, red-text, gray-text
   export let size = ""; // full, full-md-auto, lg, md, sm, xs, nav, half
   export let minWidth = ""; // sm (100px), action (150px), modal (130px)
-  export let shape = ""; // circle (for toggle pills)
   export let disabled = false;
   export let loading = false;
   export let success = false;
@@ -24,7 +23,7 @@
   export let beforeIcon = null;
   export let afterIcon = null;
   export let responsive = false; // Enable lift/press microinteraction
-  export let active = false; // For nav items and toggle buttons - shows selected/current page state
+  export let active = false; // For nav items - shows selected/current page state
   export let href = null; // If provided, renders as <a> instead of <button>
   export let justify = ""; // between (for list-item style with icon on right)
 
@@ -33,22 +32,6 @@
 
   // Size classes
   $: sizeClass = (() => {
-    // Icon variant uses different sizing
-    if (variant === "icon") {
-      switch (size) {
-        case "lg":
-          return "p-3 min-h-0";
-        case "md":
-          return "p-2.5 min-h-0";
-        case "sm":
-          return "p-2 min-h-0";
-        case "xs":
-          return "p-1.5 min-h-0";
-        default:
-          return "p-2 min-h-0"; // Default to sm for icon buttons
-      }
-    }
-
     switch (size) {
       case "full":
         return "w-full";
@@ -87,16 +70,6 @@
     }
   })();
 
-  // Shape classes
-  $: shapeClass = (() => {
-    switch (shape) {
-      case "circle":
-        return "!rounded-full !w-8 !h-8 !min-h-[32px] !p-0";
-      default:
-        return "";
-    }
-  })();
-
   // Variant classes with consistent hover/active states
   $: variantClass = (() => {
     if (success) return "btn-success";
@@ -116,10 +89,6 @@
         return "btn-red-text";
       case "gray-text":
         return "btn-gray-text";
-      case "icon":
-        return "btn-icon";
-      case "toggle":
-        return "btn-toggle";
       default:
         return "btn-blue-solid";
     }
@@ -142,10 +111,6 @@
         return "text-red-600";
       case "gray-text":
         return "text-Text-Tartiary";
-      case "icon":
-        return ""; // Icon buttons inherit text color from className or use default gray
-      case "toggle":
-        return ""; // Handled by toggle variant states
       default:
         return "text-white";
     }
@@ -166,12 +131,11 @@
     href ? "no-underline hover:no-underline" : "",
     sizeClass,
     minWidthClass,
-    shapeClass,
     variantClass,
     textClass,
     disabledClass,
     responsive && !disabled ? "btn-responsive" : "",
-    active && (variant === "gray-text" || variant === "toggle") ? "btn-active" : "",
+    active ? "btn-active" : "",
     justifyClass,
     className
   );
@@ -284,7 +248,6 @@
     --tw-border-opacity: 1;
     border-color: rgb(29 78 216 / var(--tw-border-opacity, 1));
     background-color: transparent;
-    color: #1d4ed8; /* blue-700 for light mode */
 }
   .btn-blue-outline:hover:not(:disabled) {
     --tw-bg-opacity: 1;
@@ -473,94 +436,6 @@
     background-color: #374151;
   }
 
-  /* ============================================
-     ICON VARIANT
-     Minimal icon-only buttons (info, close, delete)
-     ============================================ */
-  .btn-icon {
-    border-color: transparent;
-    background-color: transparent;
-    --tw-shadow: 0 0 #0000;
-    --tw-shadow-colored: 0 0 #0000;
-    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-  .btn-icon:hover:not(:disabled) {
-    background-color: hsl(var(--BG-Tertiary));
-}
-  .btn-icon:active:not(:disabled) {
-    background-color: hsl(var(--BG-Quaternary));
-}
-
-  /* Dark mode overrides for icon button */
-  :global(.dark) .btn-icon,
-  :global(.performer-portal.dark) .btn-icon {
-    background-color: transparent;
-  }
-  :global(.dark) .btn-icon:hover,
-  :global(.performer-portal.dark) .btn-icon:hover {
-    background-color: #1f2937;
-  }
-  :global(.dark) .btn-icon:active,
-  :global(.performer-portal.dark) .btn-icon:active {
-    background-color: #374151;
-  }
-
-  /* ============================================
-     TOGGLE VARIANT
-     For toggle pills (day-of-week selectors, etc.)
-     ============================================ */
-  .btn-toggle {
-    border-width: 1px;
-    border-color: hsl(var(--sidebar-border));
-    background-color: hsl(var(--BG-Tertiary));
-    color: hsl(var(--Text-Secondary));
-}
-  .btn-toggle:hover:not(:disabled) {
-    background-color: hsl(var(--BG-Quaternary));
-}
-  .btn-toggle:active:not(:disabled) {
-    background-color: hsl(var(--BG-Quaternary));
-}
-
-  /* Active state for toggle buttons */
-  .btn-toggle.btn-active {
-    --tw-border-opacity: 1;
-    border-color: rgb(2 132 254 / var(--tw-border-opacity, 1));
-    --tw-bg-opacity: 1;
-    background-color: rgb(2 132 254 / var(--tw-bg-opacity, 1));
-    --tw-text-opacity: 1;
-    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
-}
-  .btn-toggle.btn-active:hover:not(:disabled) {
-    --tw-border-opacity: 1;
-    border-color: rgb(30 64 175 / var(--tw-border-opacity, 1));
-    --tw-bg-opacity: 1;
-    background-color: rgb(30 64 175 / var(--tw-bg-opacity, 1));
-}
-
-  /* Dark mode overrides for toggle button */
-  :global(.dark) .btn-toggle,
-  :global(.performer-portal.dark) .btn-toggle {
-    background-color: #1f2937;
-    color: #9ca3af;
-    border-color: #374151;
-  }
-  :global(.dark) .btn-toggle:hover,
-  :global(.performer-portal.dark) .btn-toggle:hover {
-    background-color: #374151;
-  }
-  :global(.dark) .btn-toggle.btn-active,
-  :global(.performer-portal.dark) .btn-toggle.btn-active {
-    background-color: #3b82f6;
-    color: white;
-    border-color: #3b82f6;
-  }
-  :global(.dark) .btn-toggle.btn-active:hover,
-  :global(.performer-portal.dark) .btn-toggle.btn-active:hover {
-    background-color: #2563eb;
-    border-color: #2563eb;
-  }
-
   /* ============================================
      ACTIVE STATE (for nav items)
      Shows selected/current page state
@@ -730,14 +605,6 @@
     display: inline-flex;
     align-items: center;
     gap: 0.375rem; /* 6px - matches gap-1.5 */
-    white-space: nowrap;
-  }
-
-  /* Default icon sizing for SVGs in buttons - !important to override inline Tailwind classes */
-  .btn-content :global(svg) {
-    width: 1rem !important;  /* 16px - w-4 */
-    height: 1rem !important; /* 16px - h-4 */
-    flex-shrink: 0;
   }
 
   @media (min-width: 640px) {

package/dist/components/Button/Button.svelte.d.ts

@@ -4,7 +4,6 @@ type Button = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
     size?: string | undefined;
     className?: string | undefined;
     variant?: string | undefined;
-    shape?: string | undefined;
     success?: boolean | undefined;
     minWidth?: string | undefined;
     disabled?: boolean | undefined;
@@ -35,7 +34,6 @@ declare const Button: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWit
     size?: string | undefined;
     className?: string | undefined;
     variant?: string | undefined;
-    shape?: string | undefined;
     success?: boolean | undefined;
     minWidth?: string | undefined;
     disabled?: boolean | undefined;

package/dist/components/Button/Button.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Button/Button.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuPA;;;;;;;;;;;;;;;;;;;;;;;;;;;;eAAiS;sCAT3P,KAAK,EAAE,KAAK;;;;;6CALL,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Button/Button.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmNA;;;;;;;;;;;;;;;;;;;;;;;;;;;eAAyR;sCATnP,KAAK,EAAE,KAAK;;;;;6CALL,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}

package/dist/components/Calendar/Calendar.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Calendar.spec.d.ts.map

package/dist/components/Calendar/Calendar.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Calendar.spec.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Calendar/Calendar.spec.js"],"names":[],"mappings":""}

package/dist/components/Calendar/Calendar.spec.js

@@ -0,0 +1,131 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+
+// Mock FullCalendar since it's complex and requires DOM
+vi.mock('@fullcalendar/core', () => ({
+  Calendar: vi.fn().mockImplementation(() => ({
+    render: vi.fn(),
+    destroy: vi.fn(),
+    next: vi.fn(),
+    prev: vi.fn(),
+    today: vi.fn(),
+    getDate: vi.fn(() => new Date()),
+    changeView: vi.fn(),
+  })),
+}));
+
+vi.mock('@fullcalendar/daygrid', () => ({
+  default: {},
+}));
+
+vi.mock('@fullcalendar/interaction', () => ({
+  default: {},
+}));
+
+vi.mock('$app/environment', () => ({
+  browser: true,
+}));
+
+// Import after mocks
+import Calendar from './Calendar.svelte';
+
+describe('Calendar', () => {
+  describe('basic rendering', () => {
+    it('renders calendar container', () => {
+      const { container } = render(Calendar);
+      expect(container.querySelector('.calendar-wrapper')).toBeTruthy();
+    });
+
+    it('renders with default variant availability', () => {
+      const { container } = render(Calendar);
+      expect(container.querySelector('.calendar-wrapper')).toBeTruthy();
+    });
+  });
+
+  describe('props', () => {
+    it('accepts variant prop', () => {
+      const { container } = render(Calendar, { variant: 'scheduler' });
+      expect(container.querySelector('.calendar-wrapper')).toBeTruthy();
+    });
+
+    it('accepts view prop', () => {
+      const { container } = render(Calendar, { view: 'dayGridMonth' });
+      expect(container.querySelector('.calendar-wrapper')).toBeTruthy();
+    });
+
+    it('accepts events prop', () => {
+      const events = [
+        { title: 'Event 1', start: '2025-01-01' },
+        { title: 'Event 2', start: '2025-01-02' },
+      ];
+      const { container } = render(Calendar, { events });
+      expect(container.querySelector('.calendar-wrapper')).toBeTruthy();
+    });
+
+    it('accepts selectedDates prop', () => {
+      const selectedDates = ['2025-01-01', '2025-01-02'];
+      const { container } = render(Calendar, { selectedDates });
+      expect(container.querySelector('.calendar-wrapper')).toBeTruthy();
+    });
+
+    it('accepts compact prop', () => {
+      const { container } = render(Calendar, { compact: true });
+      // Component renders with compact mode - verify container exists
+      expect(container.querySelector('.calendar-wrapper')).toBeTruthy();
+    });
+
+    it('accepts readOnly prop', () => {
+      const { container } = render(Calendar, { readOnly: true });
+      expect(container.querySelector('.calendar-wrapper')).toBeTruthy();
+    });
+
+    it('accepts showNavigation prop', () => {
+      const { container } = render(Calendar, { showNavigation: false });
+      expect(container.querySelector('.calendar-wrapper')).toBeTruthy();
+    });
+
+    it('accepts showLegend prop', () => {
+      const { container } = render(Calendar, { showLegend: false });
+      expect(container.querySelector('.calendar-wrapper')).toBeTruthy();
+    });
+  });
+
+  describe('variant styles', () => {
+    it('renders availability variant', () => {
+      const { container } = render(Calendar, { variant: 'availability' });
+      expect(container.querySelector('.calendar-wrapper')).toBeTruthy();
+    });
+
+    it('renders scheduler variant', () => {
+      const { container } = render(Calendar, { variant: 'scheduler' });
+      expect(container.querySelector('.calendar-wrapper')).toBeTruthy();
+    });
+
+    it('renders display variant', () => {
+      const { container } = render(Calendar, { variant: 'display' });
+      expect(container.querySelector('.calendar-wrapper')).toBeTruthy();
+    });
+
+    it('renders public variant', () => {
+      const { container } = render(Calendar, { variant: 'public' });
+      expect(container.querySelector('.calendar-wrapper')).toBeTruthy();
+    });
+  });
+
+  describe('saveStatus states', () => {
+    it('handles saving status', () => {
+      const { container } = render(Calendar, { saveStatus: 'saving' });
+      expect(container.querySelector('.calendar-wrapper')).toBeTruthy();
+    });
+
+    it('handles saved status', () => {
+      const { container } = render(Calendar, { saveStatus: 'saved' });
+      expect(container.querySelector('.calendar-wrapper')).toBeTruthy();
+    });
+
+    it('handles empty status', () => {
+      const { container } = render(Calendar, { saveStatus: '' });
+      expect(container.querySelector('.calendar-wrapper')).toBeTruthy();
+    });
+  });
+});