@getmicdrop/svelte-components 3.0.0 → 3.1.0

package/dist/components/Layout/BottomNav.svelte

@@ -33,88 +33,25 @@
 <!--
   BOTTOM NAV - Mobile only (hidden on desktop via CSS)
   Simple 4-tab navigation: Home, Shows, Availability, Profile
+  Uses Flowbite bottom navigation pattern
 -->
 
 {#each links as { label, href, icon }}
   <a
     {href}
-    class="bottom-nav-item"
-    class:active={isActive(href, currentPath)}
+    class="flex-1 flex items-center justify-center py-3 px-2 no-underline bg-transparent border-none cursor-pointer min-w-0
+      text-gray-500 dark:text-gray-400 transition-colors duration-150
+      hover:text-gray-900 hover:no-underline dark:hover:text-white
+      select-none touch-manipulation
+      {isActive(href, currentPath) ? 'text-blue-700 dark:text-blue-500' : ''}"
     aria-label={label}
+    style="-webkit-tap-highlight-color: transparent; -webkit-touch-callout: none;"
   >
-    <span class="bottom-nav-icon">
+    <span class="relative flex items-center justify-center transition-transform duration-150 active:scale-[0.8]">
       <Icon name={icon} size="24" />
       {#if label === "Shows" && shows?.invitation?.length > 0}
-        <span class="notification-dot" />
+        <span class="absolute -top-1 -right-1 w-2 h-2 bg-red-500 rounded-full"></span>
       {/if}
     </span>
   </a>
 {/each}
-
-<style>
-  /* Bottom nav item */
-  .bottom-nav-item {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0.75rem 0.5rem;
-    color: hsl(var(--Text-Tartiary));
-    text-decoration: none;
-    transition: color 0.15s ease;
-    background: transparent;
-    border: none;
-    cursor: pointer;
-    min-width: 0;
-    -webkit-tap-highlight-color: transparent;
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-         user-select: none;
-    touch-action: manipulation;
-  }
-
-  .bottom-nav-item:hover {
-    color: hsl(var(--Text-Primary));
-    text-decoration: none;
-  }
-
-  .bottom-nav-item.active {
-    color: hsl(var(--primary-700));
-  }
-
-  .bottom-nav-icon {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
-  }
-
-  /* Scale down on press */
-  .bottom-nav-item:active .bottom-nav-icon {
-    transform: scale(0.8);
-    transition: transform 0.1s ease-out;
-  }
-
-  .notification-dot {
-    position: absolute;
-    top: -4px;
-    right: -4px;
-    width: 8px;
-    height: 8px;
-    background-color: #ef4444;
-    border-radius: 50%;
-  }
-
-  /* Dark mode */
-  :global(.dark) .bottom-nav-item,
-  :global(.performer-portal.dark) .bottom-nav-item {
-    color: hsl(var(--Text-Tartiary));
-  }
-
-  :global(.dark) .bottom-nav-item.active,
-  :global(.performer-portal.dark) .bottom-nav-item.active {
-    color: hsl(var(--primary-700));
-  }
-</style>

package/dist/components/Layout/BottomNav.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BottomNav.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Layout/BottomNav.svelte.js"],"names":[],"mappings":";;;;;;;;AAkEA;;;;mBAAgI;6CATnF,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":"BottomNav.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Layout/BottomNav.svelte.js"],"names":[],"mappings":";;;;;;;;AAoEA;;;;mBAAgI;6CATnF,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/Layout/Header.stories.svelte

@@ -1,8 +1,9 @@
-<script context="module">
-  import { Story, Template } from "@storybook/addon-svelte-csf";
-  import Header from "./Header.svelte";
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
 
-  export const meta = {
+    import Header from "./Header.svelte";
+
+  const { Story } = defineMeta({
     title: "Components/Layout/Header",
     component: Header,
     argTypes: {
@@ -11,16 +12,14 @@
       avatar: { control: "text" },
       signoutHandler: { action: "signout" },
     },
-  };
+  });
 
   function handleSignout() {
     alert("User signed out");
   }
+
 </script>
 
-<Template let:args>
-  <Header {...args} />
-</Template>
 
 <Story
   name="Default Header"

package/dist/components/Layout/Header.stories.svelte.d.ts

@@ -1,23 +1,3 @@
-export namespace meta {
-    export let title: string;
-    export { Header as component };
-    export namespace argTypes {
-        namespace name {
-            let control: string;
-        }
-        namespace email {
-            let control_1: string;
-            export { control_1 as control };
-        }
-        namespace avatar {
-            let control_2: string;
-            export { control_2 as control };
-        }
-        namespace signoutHandler {
-            let action: string;
-        }
-    }
-}
 export default Header;
 type Header = SvelteComponent<{
     [x: string]: never;

package/dist/components/Layout/Header.stories.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Header.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Layout/Header.stories.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgEA;;;;mBAAkH;mBA5D7F,iBAAiB;6CAmDO,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;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;IACtG,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Header.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Layout/Header.stories.svelte.js"],"names":[],"mappings":";;;;;;;;AA+DA;;;;mBAAkH;mBA1D3F,iBAAiB;6CAiDK,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;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;IACtG,eAAe,QAAQ,CAAC"}