@getmicdrop/svelte-components 2.2.0 → 2.4.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?: "full" | "underline" | "pill" | 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?: "full" | "underline" | "pill" | 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/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/performers/SwitchOption.svelte.d.ts

@@ -1,8 +1,8 @@
 export default SwitchOption;
 type SwitchOption = SvelteComponent<{
     onToggle: any;
-    label?: string | undefined;
     checked?: boolean | undefined;
+    label?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> & {
@@ -10,8 +10,8 @@ type SwitchOption = SvelteComponent<{
 };
 declare const SwitchOption: $$__sveltets_2_IsomorphicComponent<{
     onToggle: any;
-    label?: string | undefined;
     checked?: boolean | undefined;
+    label?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

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

@@ -1,8 +1,8 @@
 export default VenueInfo;
 type VenueInfo = SvelteComponent<{
     size?: string | undefined;
-    image?: string | undefined;
     name?: string | undefined;
+    image?: string | undefined;
     location?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -11,8 +11,8 @@ type VenueInfo = SvelteComponent<{
 };
 declare const VenueInfo: $$__sveltets_2_IsomorphicComponent<{
     size?: string | undefined;
-    image?: string | undefined;
     name?: string | undefined;
+    image?: string | undefined;
     location?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;

package/dist/components/pages/performers/VenueItemCard.svelte

@@ -96,7 +96,7 @@
           <DotsHorizontalOutline
             data-testid="dropdown-menu"
             triggeredBy=".more-menu"
-            class="more-menu text-primary-700 border border-primary-700 rounded-lg h-auto w-9 px-1.5 hover:bg-primary-50 cursor-pointer transition-colors"
+            class="more-menu text-primary-700 dark:text-primary-400 border border-primary-700 dark:border-primary-500 rounded-lg h-auto w-9 px-1.5 hover:bg-primary-50 dark:hover:bg-primary-900/30 cursor-pointer transition-colors"
           />
 
           <Dropdown class="shadow-none min-w-[200px]" triggeredBy=".more-menu">
@@ -125,7 +125,7 @@
           <DotsHorizontalOutline
             data-testid="dropdown-menu"
             triggeredBy=".more-menu"
-            class="more-menu text-gray-800 border border-gray-300 rounded-lg h-10 w-10 p-2 hover:bg-gray-50 cursor-pointer transition-colors"
+            class="more-menu text-gray-800 dark:text-gray-200 border border-gray-300 dark:border-gray-600 rounded-lg h-10 w-10 p-2 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer transition-colors"
           />
           <Dropdown
             class="shadow-none min-w-[200px]"

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

@@ -1,7 +1,7 @@
 export default VenueItemCard;
 type VenueItemCard = SvelteComponent<{
-    image: any;
     name: any;
+    image: any;
     end: any;
     start: any;
     status: any;
@@ -27,8 +27,8 @@ type VenueItemCard = SvelteComponent<{
     $$bindings?: string | undefined;
 };
 declare const VenueItemCard: $$__sveltets_2_IsomorphicComponent<{
-    image: any;
     name: any;
+    image: any;
     end: any;
     start: any;
     status: any;

package/dist/components/pages/profile/profile-form.svelte

@@ -195,7 +195,7 @@
             label={field.label}
             error={formErrors.extraDetails?.gender}
             required={field.required}
-            placeholder="Select gender"
+            placeholder=""
             on:change={(event) => {
               console.log("Gender selected:", event.detail);
             }}

package/dist/constants/formOptions.d.ts

@@ -7,10 +7,13 @@
  *   import { GENDER_OPTIONS } from './formOptions';
  *   <Select items={GENDER_OPTIONS} label="Gender" />
  */
-export const GENDER_OPTIONS: {
+export const GENDER_OPTIONS: ({
     name: string;
     value: number;
-}[];
+} | {
+    name: string;
+    value: null;
+})[];
 export const ETHNICITY_OPTIONS: {
     name: string;
     value: number;

package/dist/constants/formOptions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"formOptions.d.ts","sourceRoot":"","sources":["../../src/lib/constants/formOptions.js"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH;;;IAIE;AAEF;;;IAQE"}
+{"version":3,"file":"formOptions.d.ts","sourceRoot":"","sources":["../../src/lib/constants/formOptions.js"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH;;;;;;KAKE;AAEF;;;IAQE"}

package/dist/constants/formOptions.js

@@ -11,7 +11,8 @@
 export const GENDER_OPTIONS = [
   { name: "Male", value: 1 },
   { name: "Female", value: 2 },
-  { name: "Non-Binary", value: 3 },
+  { name: "Non-binary", value: 3 },
+  { name: "Rather not say", value: null },
 ];
 
 export const ETHNICITY_OPTIONS = [

package/dist/index.d.ts

@@ -1,15 +1,26 @@
+export { default as Accordion } from "./components/Accordion/Accordion.svelte";
+export { default as AccordionItem } from "./components/Accordion/AccordionItem.svelte";
 export { default as Alert } from "./components/Alert/Alert.svelte";
 export { default as Badge } from "./components/Badges/Badge.svelte";
 export { default as BottomSheet } from "./components/BottomSheet/BottomSheet.svelte";
 export { default as Breadcrumb } from "./components/Breadcrumb/Breadcrumb.svelte";
 export { default as Button } from "./components/Button/Button.svelte";
+export { default as Checkbox } from "./components/Checkbox/Checkbox.svelte";
 export { default as ButtonSaveDemo } from "./components/Button/ButtonSaveDemo.svelte";
 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 ErrorDisplay } from "./components/ErrorDisplay.svelte";
 export { default as FormActions } from "./components/FormActions.svelte";
 export { default as FormValidationSummary } from "./components/FormValidationSummary.svelte";
 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 ValidationError } from "./components/ValidationError.svelte";
 export { default as CropImage } from "./components/CropImage/CropImage.svelte";
@@ -47,11 +58,16 @@ 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 Modal } from "./components/Modal/Modal.svelte";
 export { default as ConfirmationModal } from "./components/Modal/ConfirmationModal.svelte";
+export { default as StatusModal } from "./components/Modal/StatusModal.svelte";
+export { default as InputModal } from "./components/Modal/InputModal.svelte";
 export { default as ModalStateManager } from "./components/Modal/ModalStateManager.svelte";
 export { default as ModalTestWrapper } from "./components/Modal/ModalTestWrapper.svelte";
 export { default as PlaceAutocomplete } from "./components/PlaceAutocomplete/PlaceAutocomplete.svelte";

package/dist/index.js

@@ -1,16 +1,27 @@
 // Core Components
+export { default as Accordion } from './components/Accordion/Accordion.svelte';
+export { default as AccordionItem } from './components/Accordion/AccordionItem.svelte';
 export { default as Alert } from './components/Alert/Alert.svelte';
 export { default as Badge } from './components/Badges/Badge.svelte';
 export { default as BottomSheet } from './components/BottomSheet/BottomSheet.svelte';
 export { default as Breadcrumb } from './components/Breadcrumb/Breadcrumb.svelte';
 export { default as Button } from './components/Button/Button.svelte';
+export { default as Checkbox } from './components/Checkbox/Checkbox.svelte';
 export { default as ButtonSaveDemo } from './components/Button/ButtonSaveDemo.svelte';
 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 ErrorDisplay } from './components/ErrorDisplay.svelte';
 export { default as FormActions } from './components/FormActions.svelte';
 export { default as FormValidationSummary } from './components/FormValidationSummary.svelte';
 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 ValidationError } from './components/ValidationError.svelte';
 
@@ -59,7 +70,12 @@ 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';
@@ -68,6 +84,8 @@ export { default as Header } from './components/Layout/Header.svelte';
 // Modal Components
 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';
+export { default as InputModal } from './components/Modal/InputModal.svelte';
 export { default as ModalStateManager } from './components/Modal/ModalStateManager.svelte';
 export { default as ModalTestWrapper } from './components/Modal/ModalTestWrapper.svelte';
 

package/package.json

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