@getmicdrop/svelte-components 2.3.0 → 2.6.0

package/dist/components/Tabs/Tabs.svelte

@@ -0,0 +1,181 @@
+<script>
+  import { setContext, onMount } from "svelte";
+  import { writable } from "svelte/store";
+
+  /** @type {'underline' | 'pill' | 'full'} Tab style variant */
+  export let tabStyle = "underline";
+  /** @type {string} CSS classes for the content area (flowbite API) */
+  export let contentClass = "";
+  /** @type {string|number|undefined} Currently active tab value (bindable) */
+  export let activeTabValue = undefined;
+  /** @type {string} Additional CSS classes */
+  let className = "";
+  export { className as class };
+
+  // Create a store for the active tab
+  const activeTab = writable(activeTabValue);
+  const tabItems = writable([]);
+
+  // Keep activeTabValue in sync with store
+  $: if (activeTabValue !== undefined) {
+    activeTab.set(activeTabValue);
+  }
+  $: activeTabValue = $activeTab;
+
+  // Provide context to TabItem children
+  setContext("tabs", {
+    activeTab,
+    tabItems,
+    tabStyle,
+    registerTab: (id, title, open) => {
+      tabItems.update(items => {
+        // Avoid duplicates
+        if (items.find(item => item.id === id)) return items;
+        return [...items, { id, title }];
+      });
+      // If this tab has open prop and no active tab set, make it active
+      if (open && $activeTab === undefined) {
+        activeTab.set(id);
+      }
+      return id;
+    },
+    setActiveTab: (id) => {
+      activeTab.set(id);
+    }
+  });
+
+  // Ensure first tab is selected if none selected
+  $: if ($tabItems.length > 0 && $activeTab === undefined) {
+    activeTab.set($tabItems[0].id);
+  }
+</script>
+
+<div class="tabs tabs--{tabStyle} {className}">
+  <div class="tabs__list" role="tablist">
+    {#each $tabItems as tab (tab.id)}
+      <button
+        type="button"
+        role="tab"
+        class="tabs__tab"
+        class:tabs__tab--active={$activeTab === tab.id}
+        aria-selected={$activeTab === tab.id}
+        tabindex={$activeTab === tab.id ? 0 : -1}
+        on:click={() => activeTab.set(tab.id)}
+      >
+        {tab.title}
+      </button>
+    {/each}
+  </div>
+  <div class="tabs__content {contentClass}">
+    <slot />
+  </div>
+</div>
+
+<style>
+  .tabs {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .tabs__list {
+    display: flex;
+    gap: 0;
+    border-bottom: 1px solid hsl(var(--Stroke-Primary, 220 13% 85%));
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+  }
+
+  .tabs__list::-webkit-scrollbar {
+    display: none;
+  }
+
+  .tabs--pill .tabs__list {
+    border-bottom: none;
+    gap: 0.5rem;
+    background-color: hsl(var(--BG-Secondary, 220 14% 96%));
+    padding: 0.25rem;
+    border-radius: 0.5rem;
+  }
+
+  .tabs--full .tabs__list {
+    border-bottom: none;
+  }
+
+  .tabs__tab {
+    padding: 0.75rem 1rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: hsl(var(--Text-Secondary, 220 9% 46%));
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    position: relative;
+    transition: all 0.15s ease;
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
+
+  .tabs__tab:hover {
+    color: hsl(var(--Text-Primary, 220 13% 13%));
+  }
+
+  .tabs__tab--active {
+    color: hsl(var(--Brand-Primary, 221 83% 53%));
+  }
+
+  /* Underline style (default) */
+  .tabs--underline .tabs__tab--active::after {
+    content: "";
+    position: absolute;
+    bottom: -1px;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background-color: hsl(var(--Brand-Primary, 221 83% 53%));
+  }
+
+  /* Pill style */
+  .tabs--pill .tabs__tab {
+    border-radius: 0.375rem;
+    padding: 0.5rem 0.75rem;
+  }
+
+  .tabs--pill .tabs__tab--active {
+    background-color: hsl(var(--BG-Primary, 0 0% 100%));
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  }
+
+  .tabs--pill .tabs__tab--active::after {
+    display: none;
+  }
+
+  .tabs__content {
+    padding-top: 1rem;
+  }
+
+  /* Dark mode */
+  :global(.dark) .tabs__list {
+    border-bottom-color: hsl(var(--Stroke-Primary, 220 13% 30%));
+  }
+
+  :global(.dark) .tabs__tab {
+    color: hsl(var(--Text-Secondary, 220 9% 70%));
+  }
+
+  :global(.dark) .tabs__tab:hover {
+    color: hsl(var(--Text-Primary, 0 0% 95%));
+  }
+
+  :global(.dark) .tabs__tab--active {
+    color: hsl(var(--Brand-Primary, 221 83% 60%));
+  }
+
+  :global(.dark) .tabs--pill .tabs__list {
+    background-color: hsl(var(--BG-Secondary, 220 13% 20%));
+  }
+
+  :global(.dark) .tabs--pill .tabs__tab--active {
+    background-color: hsl(var(--BG-Primary, 220 13% 15%));
+  }
+</style>

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

@@ -0,0 +1,46 @@
+export default Tabs;
+type Tabs = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
+    class?: string | undefined;
+    tabStyle?: "pill" | "full" | "underline" | undefined;
+    contentClass?: string | undefined;
+    activeTabValue?: string | number | undefined;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> & {
+    $$bindings?: string | undefined;
+};
+declare const Tabs: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    class?: string | undefined;
+    tabStyle?: "pill" | "full" | "underline" | undefined;
+    contentClass?: string | undefined;
+    activeTabValue?: string | number | undefined;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+//# sourceMappingURL=Tabs.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Tabs/Tabs.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;AA6FA;;;;qBAhBW,MAAM,GAAC,MAAM,GAAC,SAAS;;;;;;;eAgB0I;sCATtI,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/Typography/Typography.svelte

@@ -0,0 +1,50 @@
+<script>
+  /**
+   * Typography component for consistent text styling across the application.
+   * Renders semantic HTML elements (h1-h6, p) with configurable font weights.
+   *
+   * @example
+   * <Typography variant="h1" weight="bold">Page Title</Typography>
+   * <Typography variant="p" weight="regular">Body text</Typography>
+   */
+
+  /** @type {'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p'} The semantic element to render */
+  export let variant = 'p';
+
+  /** @type {'bold' | 'semibold' | 'medium' | 'regular'} Font weight variant */
+  export let weight = 'regular';
+
+  /** @type {string} Additional CSS classes */
+  let className = '';
+  export { className as class };
+
+  /** @type {string} Text content (alternative to slot) */
+  export let text = '';
+
+  const sizeMap = {
+    h1: 'text-3xl',
+    h2: 'text-2xl',
+    h3: 'text-xl',
+    h4: 'text-lg',
+    h5: 'text-base',
+    h6: 'text-xs',
+    p: 'text-sm',
+  };
+
+  const weightMap = {
+    bold: 'font-bold',
+    semibold: 'font-semibold',
+    medium: 'font-medium',
+    regular: 'font-normal',
+  };
+
+  $: computedClass = `${sizeMap[variant]} ${weightMap[weight]} ${className}`.trim();
+</script>
+
+<svelte:element this={variant} class={computedClass} {...$$restProps}>
+  {#if text}
+    {text}
+  {:else}
+    <slot />
+  {/if}
+</svelte:element>

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

@@ -0,0 +1,48 @@
+export default Typography;
+type Typography = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    class?: string | undefined;
+    variant?: "h3" | "h1" | "p" | "h2" | "h4" | "h5" | "h6" | undefined;
+    text?: string | undefined;
+    weight?: "medium" | "bold" | "semibold" | "regular" | undefined;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> & {
+    $$bindings?: string | undefined;
+};
+declare const Typography: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    class?: string | undefined;
+    variant?: "h3" | "h1" | "p" | "h2" | "h4" | "h5" | "h6" | undefined;
+    text?: string | undefined;
+    weight?: "medium" | "bold" | "semibold" | "regular" | undefined;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+//# sourceMappingURL=Typography.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Typography.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Typography/Typography.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;AA0EA;;;;;;;;;;;;eAA0K;sCATpI,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/pages/performers/ShowDetails.svelte.d.ts

@@ -1,7 +1,7 @@
 export default ShowDetails;
 type ShowDetails = SvelteComponent<{
-    status: any;
     venue: any;
+    status: any;
     formattedStartTime: any;
     showFullDate: any;
     formattedDoorsOpenTime: any;
@@ -16,8 +16,8 @@ type ShowDetails = SvelteComponent<{
     $$bindings?: string | undefined;
 };
 declare const ShowDetails: $$__sveltets_2_IsomorphicComponent<{
-    status: any;
     venue: any;
+    status: any;
     formattedStartTime: any;
     showFullDate: any;
     formattedDoorsOpenTime: any;

package/dist/components/pages/performers/ShowItemCard.svelte.d.ts

@@ -3,8 +3,8 @@ type ShowItemCard = SvelteComponent<{
     title: any;
     details: any;
     image: any;
-    status: any;
     id: any;
+    status: any;
     location: any;
     role: any;
     startDateTime: any;
@@ -24,8 +24,8 @@ declare const ShowItemCard: $$__sveltets_2_IsomorphicComponent<{
     title: any;
     details: any;
     image: any;
-    status: any;
     id: any;
+    status: any;
     location: any;
     role: any;
     startDateTime: any;

package/dist/components/pages/settings/tabs/CustomImageDropzone.svelte.d.ts

@@ -1,9 +1,9 @@
 export default CustomImageDropzone;
 type CustomImageDropzone = SvelteComponent<{
+    shape?: string | undefined;
     label?: string | undefined;
     readonly?: boolean | undefined;
     existingImages?: any[] | undefined;
-    shape?: string | undefined;
 }, {
     upload: CustomEvent<any>;
     delete: CustomEvent<any>;
@@ -13,10 +13,10 @@ type CustomImageDropzone = SvelteComponent<{
     $$bindings?: string | undefined;
 };
 declare const CustomImageDropzone: $$__sveltets_2_IsomorphicComponent<{
+    shape?: string | undefined;
     label?: string | undefined;
     readonly?: boolean | undefined;
     existingImages?: any[] | undefined;
-    shape?: string | undefined;
 }, {
     upload: CustomEvent<any>;
     delete: CustomEvent<any>;

package/dist/index.d.ts

@@ -10,6 +10,10 @@ export { default as ButtonSaveDemo } from "./components/Button/ButtonSaveDemo.sv
 export { default as Card } from "./components/Card.svelte";
 export { default as DarkModeToggle } from "./components/DarkModeToggle.svelte";
 export { default as Drawer } from "./components/Drawer/Drawer.svelte";
+export { default as Dropdown } from "./components/Dropdown/Dropdown.svelte";
+export { default as DropdownItem } from "./components/Dropdown/DropdownItem.svelte";
+export { default as SelectDropdown } from "./components/Dropdown/SelectDropdown.svelte";
+export { default as EmptyState } from "./components/EmptyState/EmptyState.svelte";
 export { default as ErrorDisplay } from "./components/ErrorDisplay.svelte";
 export { default as FormActions } from "./components/FormActions.svelte";
 export { default as FormValidationSummary } from "./components/FormValidationSummary.svelte";
@@ -17,7 +21,10 @@ export { default as PageLoader } from "./components/PageLoader.svelte";
 export { default as Pagination } from "./components/Pagination/Pagination.svelte";
 export { default as Radio } from "./components/Radio/Radio.svelte";
 export { default as Skeleton } from "./components/Skeleton/Skeleton.svelte";
+export { default as Tabs } from "./components/Tabs/Tabs.svelte";
+export { default as TabItem } from "./components/Tabs/TabItem.svelte";
 export { default as Toggle } from "./components/Toggle.svelte";
+export { default as Typography } from "./components/Typography/Typography.svelte";
 export { default as ValidationError } from "./components/ValidationError.svelte";
 export { default as CropImage } from "./components/CropImage/CropImage.svelte";
 export { default as Icon } from "./components/Icons/Icon.svelte";
@@ -54,9 +61,13 @@ export { default as WarningIcon } from "./components/Icons/WarningIcon.svelte";
 export { default as Input } from "./components/Input/Input.svelte";
 export { default as MultiSelect } from "./components/Input/MultiSelect.svelte";
 export { default as OTPInput } from "./components/Input/OTPInput.svelte";
+export { default as Search } from "./components/Input/Search.svelte";
 export { default as Select } from "./components/Input/Select.svelte";
+export { default as Textarea } from "./components/Input/Textarea.svelte";
+export { default as Label } from "./components/Label/Label.svelte";
 export { default as BottomNav } from "./components/Layout/BottomNav.svelte";
 export { default as Header } from "./components/Layout/Header.svelte";
+export { default as PageLayout } from "./components/Layout/PageLayout.svelte";
 export { default as Modal } from "./components/Modal/Modal.svelte";
 export { default as ConfirmationModal } from "./components/Modal/ConfirmationModal.svelte";
 export { default as StatusModal } from "./components/Modal/StatusModal.svelte";

package/dist/index.js

@@ -11,6 +11,10 @@ export { default as ButtonSaveDemo } from './components/Button/ButtonSaveDemo.sv
 export { default as Card } from './components/Card.svelte';
 export { default as DarkModeToggle } from './components/DarkModeToggle.svelte';
 export { default as Drawer } from './components/Drawer/Drawer.svelte';
+export { default as Dropdown } from './components/Dropdown/Dropdown.svelte';
+export { default as DropdownItem } from './components/Dropdown/DropdownItem.svelte';
+export { default as SelectDropdown } from './components/Dropdown/SelectDropdown.svelte';
+export { default as EmptyState } from './components/EmptyState/EmptyState.svelte';
 export { default as ErrorDisplay } from './components/ErrorDisplay.svelte';
 export { default as FormActions } from './components/FormActions.svelte';
 export { default as FormValidationSummary } from './components/FormValidationSummary.svelte';
@@ -18,7 +22,10 @@ export { default as PageLoader } from './components/PageLoader.svelte';
 export { default as Pagination } from './components/Pagination/Pagination.svelte';
 export { default as Radio } from './components/Radio/Radio.svelte';
 export { default as Skeleton } from './components/Skeleton/Skeleton.svelte';
+export { default as Tabs } from './components/Tabs/Tabs.svelte';
+export { default as TabItem } from './components/Tabs/TabItem.svelte';
 export { default as Toggle } from './components/Toggle.svelte';
+export { default as Typography } from './components/Typography/Typography.svelte';
 export { default as ValidationError } from './components/ValidationError.svelte';
 
 // Calendar Components
@@ -66,11 +73,17 @@ export { default as WarningIcon } from './components/Icons/WarningIcon.svelte';
 export { default as Input } from './components/Input/Input.svelte';
 export { default as MultiSelect } from './components/Input/MultiSelect.svelte';
 export { default as OTPInput } from './components/Input/OTPInput.svelte';
+export { default as Search } from './components/Input/Search.svelte';
 export { default as Select } from './components/Input/Select.svelte';
+export { default as Textarea } from './components/Input/Textarea.svelte';
+
+// Label Component
+export { default as Label } from './components/Label/Label.svelte';
 
 // Layout Components
 export { default as BottomNav } from './components/Layout/BottomNav.svelte';
 export { default as Header } from './components/Layout/Header.svelte';
+export { default as PageLayout } from './components/Layout/PageLayout.svelte';
 
 // Modal Components
 export { default as Modal } from './components/Modal/Modal.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getmicdrop/svelte-components",
-  "version": "2.3.0",
+  "version": "2.6.0",
   "description": "Shared component library for Micdrop applications",
   "type": "module",
   "main": "./dist/index.js",