@getmicdrop/svelte-components 2.3.0 → 2.6.0

package/dist/components/Checkbox/Checkbox.svelte

@@ -9,6 +9,8 @@
   export let name = "";
   /** @type {boolean} Whether the checkbox is disabled */
   export let disabled = false;
+  /** @type {string} Color variant */
+  export let color = "primary";
   /** @type {string} Additional CSS classes */
   let className = "";
   export { className as class };
@@ -19,6 +21,23 @@
     checked = event.target.checked;
     dispatch("change", { checked, value });
   }
+
+  // Color classes matching flowbite-svelte
+  const colorClasses = {
+    primary: "text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600",
+    red: "text-red-600 focus:ring-red-500 dark:focus:ring-red-600",
+    green: "text-green-600 focus:ring-green-500 dark:focus:ring-green-600",
+    blue: "text-blue-600 focus:ring-blue-500 dark:focus:ring-blue-600"
+  };
+
+  $: inputClasses = [
+    "w-4 h-4 rounded",
+    "bg-gray-100 border-gray-300",
+    "dark:bg-gray-700 dark:border-gray-600 dark:ring-offset-gray-800",
+    "focus:ring-2",
+    colorClasses[color] || colorClasses.primary,
+    disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"
+  ].join(" ");
 </script>
 
 <label class="checkbox {className}" class:checkbox--disabled={disabled}>
@@ -29,13 +48,13 @@
     {disabled}
     bind:checked
     on:change={handleChange}
-    class="checkbox__input"
+    on:click
+    on:focus
+    on:blur
+    on:keydown
+    on:keyup
+    class={inputClasses}
   />
-  <span class="checkbox__box">
-    <svg class="checkbox__check" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M1 5L4.5 8.5L11 1" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-    </svg>
-  </span>
   {#if $$slots.default}
     <span class="checkbox__label">
       <slot />
@@ -46,7 +65,7 @@
 <style>
   .checkbox {
     display: inline-flex;
-    align-items: flex-start;
+    align-items: center;
     gap: 0.5rem;
     cursor: pointer;
     -webkit-user-select: none;
@@ -56,61 +75,16 @@
 
   .checkbox--disabled {
     cursor: not-allowed;
-    opacity: 0.5;
-  }
-
-  .checkbox__input {
-    position: absolute;
-    opacity: 0;
-    width: 0;
-    height: 0;
-  }
-
-  .checkbox__box {
-    flex-shrink: 0;
-    width: 1.125rem;
-    height: 1.125rem;
-    border: 2px solid hsl(var(--Stroke-Primary, 220 13% 85%));
-    border-radius: 0.25rem;
-    background-color: hsl(var(--BG-Primary, 0 0% 100%));
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: all 0.15s ease;
-    margin-top: 0.1875rem; /* Align with text baseline */
-  }
-
-  .checkbox__check {
-    width: 0.75rem;
-    height: 0.75rem;
-    color: white;
-    opacity: 0;
-    transform: scale(0.5);
-    transition: all 0.15s ease;
-  }
-
-  .checkbox__input:checked + .checkbox__box {
-    background-color: hsl(var(--Brand-Primary, 221 83% 53%));
-    border-color: hsl(var(--Brand-Primary, 221 83% 53%));
-  }
-
-  .checkbox__input:checked + .checkbox__box .checkbox__check {
-    opacity: 1;
-    transform: scale(1);
-  }
-
-  .checkbox__input:focus-visible + .checkbox__box {
-    outline: 2px solid hsl(var(--Brand-Primary, 221 83% 53%));
-    outline-offset: 2px;
-  }
-
-  .checkbox__input:disabled + .checkbox__box {
-    background-color: hsl(var(--BG-Secondary, 220 14% 96%));
   }
 
   .checkbox__label {
-    color: hsl(var(--Text-Primary, 220 13% 13%));
     font-size: 0.875rem;
     line-height: 1.5;
+    color: var(--text-primary, #1f2937);
+  }
+
+  :global(.dark) .checkbox__label,
+  :global(.micdrop.dark) .checkbox__label {
+    color: #f3f4f6;
   }
 </style>

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

@@ -1,6 +1,7 @@
 export default Checkbox;
 type Checkbox = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
     class?: string | undefined;
+    color?: string | undefined;
     disabled?: boolean | undefined;
     checked?: boolean | undefined;
     value?: string | undefined;
@@ -8,6 +9,11 @@ type Checkbox = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
 }, {
     default: {};
 }>, {
+    click: PointerEvent;
+    focus: FocusEvent;
+    blur: FocusEvent;
+    keydown: KeyboardEvent;
+    keyup: KeyboardEvent;
     change: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
@@ -18,6 +24,7 @@ type Checkbox = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
 };
 declare const Checkbox: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
     class?: string | undefined;
+    color?: string | undefined;
     disabled?: boolean | undefined;
     checked?: boolean | undefined;
     value?: string | undefined;
@@ -25,6 +32,11 @@ declare const Checkbox: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsW
 }, {
     default: {};
 }>, {
+    click: PointerEvent;
+    focus: FocusEvent;
+    blur: FocusEvent;
+    keydown: KeyboardEvent;
+    keyup: KeyboardEvent;
     change: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Checkbox/Checkbox.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAiEA;;;;;;;;;;;;;;eAAyK;sCATnI,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":"Checkbox.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Checkbox/Checkbox.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAgFA;;;;;;;;;;;;;;;;;;;;eAAiL;sCAT3I,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/Drawer/Drawer.svelte

@@ -5,6 +5,8 @@
 
   /** @type {boolean} Whether the drawer is visible */
   export let show = false;
+  /** @type {boolean} Flowbite-style hidden prop (inverse of show) */
+  export let hidden = true;
   /** @type {string} Optional title for the drawer header */
   export let title = "";
   /** @type {'left' | 'right' | 'top' | 'bottom'} Which side the drawer slides from */
@@ -19,10 +21,19 @@
   export let closeOnBackdropClick = true;
   /** @type {boolean} Whether pressing Escape closes the drawer */
   export let closeOnEscape = true;
+  /** @type {string} Optional id for the drawer element */
+  export let id = "";
+  /** @type {object|undefined} Custom transition params (flowbite API) */
+  export let transitionParams = undefined;
 
   const dispatch = createEventDispatcher();
 
+  // Support both show and hidden props (flowbite uses hidden)
+  $: isVisible = show || !hidden;
+
   function close() {
+    hidden = true;
+    show = false;
     dispatch("close");
   }
 
@@ -33,13 +44,13 @@
   }
 
   function handleKeydown(e) {
-    if (closeOnEscape && e.key === "Escape" && show) {
+    if (closeOnEscape && e.key === "Escape" && isVisible) {
       close();
     }
   }
 
-  // Calculate transition params based on placement
-  $: transitionParams = (() => {
+  // Calculate transition params based on placement (use custom if provided)
+  $: computedTransitionParams = transitionParams || (() => {
     switch (placement) {
       case "left":
         return { x: -320, duration, easing: cubicOut };
@@ -56,7 +67,7 @@
 
   // Lock body scroll when drawer is open
   $: if (typeof document !== "undefined") {
-    if (show) {
+    if (isVisible) {
       document.body.style.overflow = "hidden";
     } else {
       document.body.style.overflow = "";
@@ -72,7 +83,7 @@
 
 <svelte:window on:keydown={handleKeydown} />
 
-{#if show}
+{#if isVisible}
   <!-- svelte-ignore a11y-click-events-have-key-events -->
   <!-- svelte-ignore a11y-no-static-element-interactions -->
   <div
@@ -81,10 +92,11 @@
     transition:fade={{ duration: 150 }}
   >
     <div
+      {id}
       class="drawer drawer--{placement}"
       style="--drawer-width: {width}; --drawer-height: {height};"
       on:click|stopPropagation
-      transition:fly={transitionParams}
+      transition:fly={computedTransitionParams}
     >
       <!-- Optional header with title -->
       {#if title || $$slots.header}

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

@@ -3,11 +3,14 @@ type Drawer = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
     duration?: number | undefined;
     title?: string | undefined;
     show?: boolean | undefined;
+    hidden?: boolean | undefined;
     placement?: "left" | "right" | "top" | "bottom" | undefined;
     width?: string | undefined;
     height?: string | undefined;
     closeOnBackdropClick?: boolean | undefined;
     closeOnEscape?: boolean | undefined;
+    id?: string | undefined;
+    transitionParams?: object | undefined;
 }, {
     header: {};
     default: {};
@@ -28,11 +31,14 @@ declare const Drawer: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWit
     duration?: number | undefined;
     title?: string | undefined;
     show?: boolean | undefined;
+    hidden?: boolean | undefined;
     placement?: "left" | "right" | "top" | "bottom" | undefined;
     width?: string | undefined;
     height?: string | undefined;
     closeOnBackdropClick?: boolean | undefined;
     closeOnEscape?: boolean | undefined;
+    id?: string | undefined;
+    transitionParams?: object | undefined;
 }, {
     header: {};
     default: {};

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

@@ -1 +1 @@
-{"version":3,"file":"Drawer.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Drawer/Drawer.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA0IA;;;;;;;;;;;;;;;;;;;;;;eAAyN;sCATnL,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":"Drawer.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Drawer/Drawer.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwJA;;;;;;;;;;;uBAfW,MAAM,GAAC,SAAS;;;;;;;;;;;;;;eAe+N;sCATpN,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/Dropdown/Dropdown.svelte

@@ -0,0 +1,193 @@
+<script>
+  import { createEventDispatcher, onMount, onDestroy, tick } from "svelte";
+
+  /** @type {boolean} Whether the dropdown is open */
+  export let open = false;
+  /** @type {string} Current active URL for highlighting (flowbite API) */
+  export let activeUrl = "";
+  /** @type {'bottom-start' | 'bottom-end' | 'bottom' | 'top-start' | 'top-end' | 'top'} Placement */
+  export let placement = "bottom-start";
+  /** @type {string} Additional CSS classes */
+  let className = "";
+  export { className as class };
+  /** @type {string} Accessible label for the dropdown menu */
+  export let ariaLabel = "Menu";
+
+  const dispatch = createEventDispatcher();
+
+  let dropdownRef;
+  let focusedIndex = -1;
+  let menuItems = [];
+
+  // Update menu items when dropdown opens
+  async function updateMenuItems() {
+    await tick();
+    if (dropdownRef) {
+      menuItems = Array.from(dropdownRef.querySelectorAll('[role="menuitem"]:not([disabled])'));
+    }
+  }
+
+  // Focus a specific menu item by index
+  function focusItem(index) {
+    if (menuItems.length === 0) return;
+    if (index < 0) index = menuItems.length - 1;
+    if (index >= menuItems.length) index = 0;
+    focusedIndex = index;
+    menuItems[focusedIndex]?.focus();
+  }
+
+  // Get trigger element (previous sibling)
+  function getTriggerElement() {
+    const parent = dropdownRef?.parentElement;
+    if (parent) {
+      const siblings = Array.from(parent.children);
+      const dropdownIndex = siblings.indexOf(dropdownRef);
+      if (dropdownIndex > 0) {
+        return siblings[dropdownIndex - 1];
+      }
+    }
+    return null;
+  }
+
+  function handleClickOutside(event) {
+    if (dropdownRef && !dropdownRef.contains(event.target)) {
+      const trigger = getTriggerElement();
+      if (trigger?.contains(event.target)) {
+        return; // Let the trigger handle toggling
+      }
+      open = false;
+    }
+  }
+
+  function handleKeydown(event) {
+    if (!open) return;
+
+    // Only handle if event originated from within this dropdown or its trigger
+    const trigger = getTriggerElement();
+    if (!dropdownRef?.contains(event.target) && !trigger?.contains(event.target)) {
+      return;
+    }
+
+    switch (event.key) {
+      case "Escape":
+        open = false;
+        trigger?.focus();
+        event.preventDefault();
+        break;
+      case "ArrowDown":
+        focusItem(focusedIndex + 1);
+        event.preventDefault();
+        break;
+      case "ArrowUp":
+        focusItem(focusedIndex - 1);
+        event.preventDefault();
+        break;
+      case "Home":
+        focusItem(0);
+        event.preventDefault();
+        break;
+      case "End":
+        focusItem(menuItems.length - 1);
+        event.preventDefault();
+        break;
+      case "Tab":
+        open = false;
+        break;
+    }
+  }
+
+  // Watch for open state changes
+  $: if (open) {
+    focusedIndex = -1;
+    updateMenuItems();
+  }
+
+  onMount(() => {
+    document.addEventListener("click", handleClickOutside, true);
+    document.addEventListener("keydown", handleKeydown);
+  });
+
+  onDestroy(() => {
+    if (typeof document !== "undefined") {
+      document.removeEventListener("click", handleClickOutside, true);
+      document.removeEventListener("keydown", handleKeydown);
+    }
+  });
+
+  // Provide context for DropdownItem
+  import { setContext } from "svelte";
+  setContext("dropdown", {
+    activeUrl,
+    close: () => { open = false; }
+  });
+</script>
+
+{#if open}
+  <div
+    bind:this={dropdownRef}
+    class="dropdown dropdown--{placement} {className}"
+    role="menu"
+    aria-label={ariaLabel}
+    {...$$restProps}
+  >
+    <slot />
+  </div>
+{/if}
+
+<style>
+  .dropdown {
+    position: absolute;
+    z-index: 50;
+    min-width: 10rem;
+    background-color: hsl(var(--BG-Primary, 0 0% 100%));
+    border: 1px solid hsl(var(--Stroke-Primary, 220 13% 85%));
+    border-radius: 0.5rem;
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    padding: 0.25rem 0;
+    margin-top: 0.25rem;
+  }
+
+  .dropdown--bottom-start {
+    top: 100%;
+    left: 0;
+  }
+
+  .dropdown--bottom-end {
+    top: 100%;
+    right: 0;
+  }
+
+  .dropdown--bottom {
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .dropdown--top-start {
+    bottom: 100%;
+    left: 0;
+    margin-top: 0;
+    margin-bottom: 0.25rem;
+  }
+
+  .dropdown--top-end {
+    bottom: 100%;
+    right: 0;
+    margin-top: 0;
+    margin-bottom: 0.25rem;
+  }
+
+  .dropdown--top {
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    margin-top: 0;
+    margin-bottom: 0.25rem;
+  }
+
+  /* Dark mode */
+  :global(.dark) .dropdown {
+    background-color: hsl(var(--BG-Primary, 220 13% 15%));
+    border-color: hsl(var(--Stroke-Primary, 220 13% 30%));
+  }
+</style>

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

@@ -0,0 +1,50 @@
+export default Dropdown;
+type Dropdown = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    class?: string | undefined;
+    open?: boolean | undefined;
+    placement?: "top" | "bottom" | "bottom-start" | "bottom-end" | "top-start" | "top-end" | undefined;
+    activeUrl?: string | undefined;
+    ariaLabel?: string | undefined;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> & {
+    $$bindings?: string | undefined;
+};
+declare const Dropdown: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    class?: string | undefined;
+    open?: boolean | undefined;
+    placement?: "top" | "bottom" | "bottom-start" | "bottom-end" | "top-start" | "top-end" | undefined;
+    activeUrl?: string | undefined;
+    ariaLabel?: string | 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=Dropdown.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Dropdown/Dropdown.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAgKA;;;;;;;;;;;;;eAAyL;sCATnJ,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/Dropdown/DropdownItem.svelte

@@ -0,0 +1,111 @@
+<script>
+  import { getContext, createEventDispatcher } from "svelte";
+
+  /** @type {string|undefined} Optional href to make the item a link */
+  export let href = undefined;
+  /** @type {boolean} Whether the item is disabled */
+  export let disabled = false;
+  /** @type {string} Additional CSS classes */
+  let className = "";
+  export { className as class };
+
+  const dispatch = createEventDispatcher();
+  const context = getContext("dropdown");
+
+  $: isActive = context?.activeUrl && href && context.activeUrl === href;
+
+  function handleClick(event) {
+    if (disabled) {
+      event.preventDefault();
+      return;
+    }
+    dispatch("click", event);
+    // Close dropdown after click (unless it's a link that will navigate)
+    if (!href && context?.close) {
+      context.close();
+    }
+  }
+
+  function handleKeydown(event) {
+    if (event.key === "Enter" || event.key === " ") {
+      handleClick(event);
+    }
+  }
+</script>
+
+{#if href}
+  <a
+    {href}
+    class="dropdown-item {className}"
+    class:dropdown-item--active={isActive}
+    class:dropdown-item--disabled={disabled}
+    role="menuitem"
+    tabindex={disabled ? -1 : 0}
+    on:click={handleClick}
+    on:keydown={handleKeydown}
+  >
+    <slot />
+  </a>
+{:else}
+  <button
+    type="button"
+    class="dropdown-item {className}"
+    class:dropdown-item--disabled={disabled}
+    role="menuitem"
+    tabindex={disabled ? -1 : 0}
+    {disabled}
+    on:click={handleClick}
+    on:keydown={handleKeydown}
+  >
+    <slot />
+  </button>
+{/if}
+
+<style>
+  .dropdown-item {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding: 0.5rem 1rem;
+    font-size: 0.875rem;
+    color: hsl(var(--Text-Primary, 220 13% 13%));
+    background: transparent;
+    border: none;
+    text-align: left;
+    cursor: pointer;
+    text-decoration: none;
+    transition: background-color 0.15s ease;
+  }
+
+  .dropdown-item:hover:not(.dropdown-item--disabled) {
+    background-color: hsl(var(--BG-Secondary, 220 14% 96%));
+  }
+
+  .dropdown-item:focus {
+    outline: none;
+    background-color: hsl(var(--BG-Secondary, 220 14% 96%));
+  }
+
+  .dropdown-item--active {
+    background-color: hsl(var(--Brand-Primary, 221 83% 53%) / 0.1);
+    color: hsl(var(--Brand-Primary, 221 83% 53%));
+  }
+
+  .dropdown-item--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  /* Dark mode */
+  :global(.dark) .dropdown-item {
+    color: hsl(var(--Text-Primary, 0 0% 95%));
+  }
+
+  :global(.dark) .dropdown-item:hover:not(.dropdown-item--disabled) {
+    background-color: hsl(var(--BG-Secondary, 220 13% 20%));
+  }
+
+  :global(.dark) .dropdown-item:focus {
+    background-color: hsl(var(--BG-Secondary, 220 13% 20%));
+  }
+</style>

package/dist/components/Dropdown/DropdownItem.svelte.d.ts

@@ -0,0 +1,48 @@
+export default DropdownItem;
+type DropdownItem = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
+    class?: string | undefined;
+    disabled?: boolean | undefined;
+    href?: string | undefined;
+}, {
+    default: {};
+}>, {
+    click: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> & {
+    $$bindings?: string | undefined;
+};
+declare const DropdownItem: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    class?: string | undefined;
+    disabled?: boolean | undefined;
+    href?: string | undefined;
+}, {
+    default: {};
+}>, {
+    click: CustomEvent<any>;
+} & {
+    [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=DropdownItem.svelte.d.ts.map

package/dist/components/Dropdown/DropdownItem.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Dropdown/DropdownItem.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAuEA;;;WAjBW,MAAM,GAAC,SAAS;;;;;;;;;eAiBgI;sCATrH,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"}