@getmicdrop/svelte-components 2.2.0 → 2.3.0

package/dist/components/Checkbox/Checkbox.svelte

@@ -0,0 +1,116 @@
+<script>
+  import { createEventDispatcher } from "svelte";
+
+  /** @type {boolean} Whether the checkbox is checked */
+  export let checked = false;
+  /** @type {string} The value attribute */
+  export let value = "";
+  /** @type {string} Name attribute for form submission */
+  export let name = "";
+  /** @type {boolean} Whether the checkbox is disabled */
+  export let disabled = false;
+  /** @type {string} Additional CSS classes */
+  let className = "";
+  export { className as class };
+
+  const dispatch = createEventDispatcher();
+
+  function handleChange(event) {
+    checked = event.target.checked;
+    dispatch("change", { checked, value });
+  }
+</script>
+
+<label class="checkbox {className}" class:checkbox--disabled={disabled}>
+  <input
+    type="checkbox"
+    {name}
+    {value}
+    {disabled}
+    bind:checked
+    on:change={handleChange}
+    class="checkbox__input"
+  />
+  <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 />
+    </span>
+  {/if}
+</label>
+
+<style>
+  .checkbox {
+    display: inline-flex;
+    align-items: flex-start;
+    gap: 0.5rem;
+    cursor: pointer;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
+  }
+
+  .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;
+  }
+</style>

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

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

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

@@ -0,0 +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"}

package/dist/components/Drawer/Drawer.svelte

@@ -0,0 +1,195 @@
+<script>
+  import { createEventDispatcher, onDestroy } from "svelte";
+  import { fly, fade } from "svelte/transition";
+  import { cubicOut } from "svelte/easing";
+
+  /** @type {boolean} Whether the drawer is visible */
+  export let show = false;
+  /** @type {string} Optional title for the drawer header */
+  export let title = "";
+  /** @type {'left' | 'right' | 'top' | 'bottom'} Which side the drawer slides from */
+  export let placement = "left";
+  /** @type {string} Width of the drawer (for left/right placement) */
+  export let width = "320px";
+  /** @type {string} Height of the drawer (for top/bottom placement) */
+  export let height = "auto";
+  /** @type {number} Transition duration in ms */
+  export let duration = 200;
+  /** @type {boolean} Whether clicking the backdrop closes the drawer */
+  export let closeOnBackdropClick = true;
+  /** @type {boolean} Whether pressing Escape closes the drawer */
+  export let closeOnEscape = true;
+
+  const dispatch = createEventDispatcher();
+
+  function close() {
+    dispatch("close");
+  }
+
+  function handleBackdropClick(e) {
+    if (closeOnBackdropClick && e.target === e.currentTarget) {
+      close();
+    }
+  }
+
+  function handleKeydown(e) {
+    if (closeOnEscape && e.key === "Escape" && show) {
+      close();
+    }
+  }
+
+  // Calculate transition params based on placement
+  $: transitionParams = (() => {
+    switch (placement) {
+      case "left":
+        return { x: -320, duration, easing: cubicOut };
+      case "right":
+        return { x: 320, duration, easing: cubicOut };
+      case "top":
+        return { y: -320, duration, easing: cubicOut };
+      case "bottom":
+        return { y: 320, duration, easing: cubicOut };
+      default:
+        return { x: -320, duration, easing: cubicOut };
+    }
+  })();
+
+  // Lock body scroll when drawer is open
+  $: if (typeof document !== "undefined") {
+    if (show) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+  }
+
+  onDestroy(() => {
+    if (typeof document !== "undefined") {
+      document.body.style.overflow = "";
+    }
+  });
+</script>
+
+<svelte:window on:keydown={handleKeydown} />
+
+{#if show}
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
+  <div
+    class="drawer-backdrop"
+    on:click={handleBackdropClick}
+    transition:fade={{ duration: 150 }}
+  >
+    <div
+      class="drawer drawer--{placement}"
+      style="--drawer-width: {width}; --drawer-height: {height};"
+      on:click|stopPropagation
+      transition:fly={transitionParams}
+    >
+      <!-- Optional header with title -->
+      {#if title || $$slots.header}
+        <div class="drawer__header">
+          {#if $$slots.header}
+            <slot name="header" />
+          {:else}
+            <h3 class="drawer__title">{title}</h3>
+          {/if}
+        </div>
+      {/if}
+
+      <!-- Content slot -->
+      <div class="drawer__content">
+        <slot />
+      </div>
+
+      <!-- Actions slot (optional) -->
+      {#if $$slots.actions}
+        <div class="drawer__actions">
+          <slot name="actions" />
+        </div>
+      {/if}
+    </div>
+  </div>
+{/if}
+
+<style>
+  .drawer-backdrop {
+    position: fixed;
+    inset: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: var(--z-modal, 50);
+    display: flex;
+    touch-action: none;
+  }
+
+  .drawer {
+    position: absolute;
+    background-color: hsl(var(--BG-Primary, 0 0% 100%));
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  /* Placement variants */
+  .drawer--left {
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: var(--drawer-width, 320px);
+    max-width: 100vw;
+  }
+
+  .drawer--right {
+    right: 0;
+    top: 0;
+    bottom: 0;
+    width: var(--drawer-width, 320px);
+    max-width: 100vw;
+  }
+
+  .drawer--top {
+    top: 0;
+    left: 0;
+    right: 0;
+    height: var(--drawer-height, auto);
+    max-height: 100vh;
+  }
+
+  .drawer--bottom {
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: var(--drawer-height, auto);
+    max-height: 100vh;
+  }
+
+  .drawer__header {
+    padding: 1rem 1.5rem;
+    border-bottom: 1px solid hsl(var(--Stroke-Primary, 220 13% 85%));
+    flex-shrink: 0;
+  }
+
+  .drawer__title {
+    font-size: 1.125rem;
+    font-weight: 600;
+    color: hsl(var(--Text-Primary, 220 13% 13%));
+    margin: 0;
+  }
+
+  .drawer__content {
+    flex: 1;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .drawer__actions {
+    padding: 1rem 1.5rem;
+    border-top: 1px solid hsl(var(--Stroke-Primary, 220 13% 85%));
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+</style>

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

@@ -0,0 +1,68 @@
+export default Drawer;
+type Drawer = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
+    duration?: number | undefined;
+    title?: string | undefined;
+    show?: boolean | undefined;
+    placement?: "left" | "right" | "top" | "bottom" | undefined;
+    width?: string | undefined;
+    height?: string | undefined;
+    closeOnBackdropClick?: boolean | undefined;
+    closeOnEscape?: boolean | undefined;
+}, {
+    header: {};
+    default: {};
+    actions: {};
+}>, {
+    click: PointerEvent;
+    close: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    header: {};
+    default: {};
+    actions: {};
+}> & {
+    $$bindings?: string | undefined;
+};
+declare const Drawer: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    duration?: number | undefined;
+    title?: string | undefined;
+    show?: boolean | undefined;
+    placement?: "left" | "right" | "top" | "bottom" | undefined;
+    width?: string | undefined;
+    height?: string | undefined;
+    closeOnBackdropClick?: boolean | undefined;
+    closeOnEscape?: boolean | undefined;
+}, {
+    header: {};
+    default: {};
+    actions: {};
+}>, {
+    click: PointerEvent;
+    close: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    header: {};
+    default: {};
+    actions: {};
+}, {}, 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=Drawer.svelte.d.ts.map

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

@@ -0,0 +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"}

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

@@ -4,8 +4,9 @@ type Input = SvelteComponent<{
     size?: string | undefined;
     className?: string | undefined;
     disabled?: boolean | undefined;
-    label?: string | undefined;
+    value?: string | undefined;
     name?: string | undefined;
+    label?: string | undefined;
     icon?: null | undefined;
     required?: boolean | undefined;
     optional?: boolean | undefined;
@@ -25,7 +26,6 @@ type Input = SvelteComponent<{
     readonly?: boolean | undefined;
     controlled?: boolean | undefined;
     onButtonClick?: null | undefined;
-    value?: string | undefined;
     autocomplete?: null | undefined;
     autofocus?: boolean | undefined;
     showPasswordToggle?: boolean | undefined;
@@ -52,8 +52,9 @@ declare const Input: $$__sveltets_2_IsomorphicComponent<{
     size?: string | undefined;
     className?: string | undefined;
     disabled?: boolean | undefined;
-    label?: string | undefined;
+    value?: string | undefined;
     name?: string | undefined;
+    label?: string | undefined;
     icon?: null | undefined;
     required?: boolean | undefined;
     optional?: boolean | undefined;
@@ -73,7 +74,6 @@ declare const Input: $$__sveltets_2_IsomorphicComponent<{
     readonly?: boolean | undefined;
     controlled?: boolean | undefined;
     onButtonClick?: null | undefined;
-    value?: string | undefined;
     autocomplete?: null | undefined;
     autofocus?: boolean | undefined;
     showPasswordToggle?: boolean | undefined;

package/dist/components/Input/MultiSelect.svelte.d.ts

@@ -2,12 +2,12 @@ export default MultiSelect;
 type MultiSelect = SvelteComponent<{
     error?: string | undefined;
     disabled?: boolean | undefined;
-    label?: string | undefined;
+    value?: any[] | undefined;
     name?: string | undefined;
+    label?: string | undefined;
     required?: boolean | undefined;
     placeholder?: string | undefined;
     id?: string | undefined;
-    value?: any[] | undefined;
     animateFocus?: boolean | undefined;
     items?: any[] | undefined;
     hideClear?: boolean | undefined;
@@ -21,12 +21,12 @@ type MultiSelect = SvelteComponent<{
 declare const MultiSelect: $$__sveltets_2_IsomorphicComponent<{
     error?: string | undefined;
     disabled?: boolean | undefined;
-    label?: string | undefined;
+    value?: any[] | undefined;
     name?: string | undefined;
+    label?: string | undefined;
     required?: boolean | undefined;
     placeholder?: string | undefined;
     id?: string | undefined;
-    value?: any[] | undefined;
     animateFocus?: boolean | undefined;
     items?: any[] | undefined;
     hideClear?: boolean | undefined;

package/dist/components/Input/Select.svelte.d.ts

@@ -2,12 +2,12 @@ export default Select;
 type Select = SvelteComponent<{
     error?: string | undefined;
     disabled?: boolean | undefined;
-    label?: string | undefined;
+    value?: string | undefined;
     name?: string | undefined;
+    label?: string | undefined;
     required?: boolean | undefined;
     placeholder?: string | undefined;
     id?: string | undefined;
-    value?: string | undefined;
     animateFocus?: boolean | undefined;
     items?: any[] | undefined;
 }, {
@@ -20,12 +20,12 @@ type Select = SvelteComponent<{
 declare const Select: $$__sveltets_2_IsomorphicComponent<{
     error?: string | undefined;
     disabled?: boolean | undefined;
-    label?: string | undefined;
+    value?: string | undefined;
     name?: string | undefined;
+    label?: string | undefined;
     required?: boolean | undefined;
     placeholder?: string | undefined;
     id?: string | undefined;
-    value?: string | undefined;
     animateFocus?: boolean | undefined;
     items?: any[] | undefined;
 }, {

package/dist/components/Layout/Header.svelte

@@ -79,7 +79,7 @@
           class="avatar-button"
           on:click={() => showDesktopDropdown = !showDesktopDropdown}
         >
-          <Avatar src={avatar} dot={{ color: "green" }} rounded size="sm" />
+          <Avatar src={avatar} rounded size="md" />
         </button>
 
         {#if showDesktopDropdown}
@@ -137,7 +137,7 @@
     <div class="header-avatar-wrapper">
       <!-- Mobile: triggers bottom sheet -->
       <button class="avatar-button avatar-button--mobile" on:click={() => showMobileSheet = true}>
-        <Avatar src={avatar} dot={{ color: "green" }} rounded size="sm" />
+        <Avatar src={avatar} rounded size="md" />
       </button>
 
       <!-- Desktop: triggers dropdown -->
@@ -145,7 +145,7 @@
         class="avatar-button avatar-button--desktop"
         on:click={() => showDesktopDropdown = !showDesktopDropdown}
       >
-        <Avatar src={avatar} dot={{ color: "green" }} rounded size="sm" />
+        <Avatar src={avatar} rounded size="md" />
       </button>
 
       <!-- Desktop dropdown -->
@@ -294,13 +294,23 @@
     margin-left: 0.25rem;
   }
 
+  /* Fix avatar image aspect ratio and border radius */
+  :global(.avatar-button img) {
+    -o-object-fit: cover !important;
+       object-fit: cover !important;
+    aspect-ratio: 1 / 1 !important;
+    border-radius: 0.5rem !important;
+  }
+
   .avatar-button {
     background: none;
     border: none;
     padding: 0;
     cursor: pointer;
-    border-radius: 9999px;
+    border-radius: 0.5rem;
     transition: opacity 0.15s;
+    min-width: 40px;
+    min-height: 40px;
   }
 
   .avatar-button:hover {