@getmicdrop/svelte-components 5.17.3 → 5.18.0

package/dist/recipes/modals/ConfirmationModal.stories.svelte

@@ -1,119 +1,119 @@
-<script module>
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-
-  import Modal from "./ConfirmationModal.svelte";
-
-  import SuccessIcon from "./../../assets/svg/Success-icon.svg";
-  import AttachmentIcon from "./../../assets/svg/attachment-square.svg";
-  import TickIcon from "./../../assets/icons/tick-01.png";
-
-  import ArrowLeft from "./../../assets/svg/arrow-left-02.svg";
-
-  const { Story } = defineMeta({
-    title: "Components/Modal",
-    component: Modal,
-    argTypes: {
-      title: { control: "text" },
-      description: { control: "text" },
-      warningText: { control: "text" },
-    },
-  });
-
-</script>
-
-<script>
-  
-  function handleAction(label) {
-    console.log(label + " action triggered");
-  }
-</script>
-
-
-<Story
-  name="Interactive Custom Modal"
-  args={{
-    show: true,
-    title: "Are you sure?",
-    description: "Please confirm that you want to proceed with this action.",
-    warningText: "This action is irreversible!",
-    actions: [
-      {
-        label: "Cancel",
-        onClick: () => console.log("Cancelled"),
-        variant: "gray-outline",
-      },
-      { label: "Confirm", onClick: () => console.log("Confirmed") },
-    ],
-    icon: SuccessIcon,
-  }}
-></Story>
-
-<Story
-  name="Success Modal"
-  args={{
-    show: true,
-    title: "Avail requests sent",
-    actions: [{ label: "Confirm", onClick: () => console.log("Confirmed") }],
-    icon: SuccessIcon,
-  }}
-></Story>
-
-<Story
-  name="Confirm Modal"
-  args={{
-    show: true,
-    title: "Create New Tracking Link",
-    description:
-      "Enter a name for your tracking link. This name will be used for reference on your dashboard.",
-    actions: [
-      {
-        label: "Cancel",
-        onClick: () => console.log("Cancelled"),
-        variant: "gray-outline",
-      },
-      { label: "Confirm", onClick: () => console.log("Confirmed") },
-    ],
-    icon: AttachmentIcon,
-  }}
-></Story>
-
-<Story
-  name="Password Reset Modal"
-  args={{
-    show: true,
-    title: "Password Reset!",
-    description:
-      "Your password has been successfully reset, click below to continue your access.",
-    actions: [
-      {
-        label: "Return to the login Screen",
-        onClick: () => console.log("Cancelled"),
-        variant: "blue-outline",
-        beforeIcon: ArrowLeft,
-      },
-    ],
-    icon: TickIcon,
-  }}
-></Story>
-
-<Story
-  name="Info Modal"
-  args={{
-    show: true,
-    title: "Please fill out your profile",
-    description:
-      "Your information may be used for show promotion, so please provide as much as you can.",
-    actions: [{ label: "Confirm", onClick: () => console.log("Confirmed") }],
-  }}
-></Story>
-
-<Story
-  name="Warning Modal"
-  args={{
-    show: true,
-    title: "Are you sure?",
-    description: "Please confirm that you want to proceed with this action.",
-    closeBtn: true,
-    warningText: "This action is irreversible!",
-  }}
-  />
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
+  import Modal from "./ConfirmationModal.svelte";
+
+  import SuccessIcon from "./../../assets/svg/Success-icon.svg";
+  import AttachmentIcon from "./../../assets/svg/attachment-square.svg";
+  import TickIcon from "./../../assets/icons/tick-01.png";
+
+  import ArrowLeft from "./../../assets/svg/arrow-left-02.svg";
+
+  const { Story } = defineMeta({
+    title: "Components/Modal",
+    component: Modal,
+    argTypes: {
+      title: { control: "text" },
+      description: { control: "text" },
+      warningText: { control: "text" },
+    },
+  });
+
+</script>
+
+<script>
+  
+  function handleAction(label) {
+    console.log(label + " action triggered");
+  }
+</script>
+
+
+<Story
+  name="Interactive Custom Modal"
+  args={{
+    show: true,
+    title: "Are you sure?",
+    description: "Please confirm that you want to proceed with this action.",
+    warningText: "This action is irreversible!",
+    actions: [
+      {
+        label: "Cancel",
+        onClick: () => console.log("Cancelled"),
+        variant: "gray-outline",
+      },
+      { label: "Confirm", onClick: () => console.log("Confirmed") },
+    ],
+    icon: SuccessIcon,
+  }}
+></Story>
+
+<Story
+  name="Success Modal"
+  args={{
+    show: true,
+    title: "Avail requests sent",
+    actions: [{ label: "Confirm", onClick: () => console.log("Confirmed") }],
+    icon: SuccessIcon,
+  }}
+></Story>
+
+<Story
+  name="Confirm Modal"
+  args={{
+    show: true,
+    title: "Create New Tracking Link",
+    description:
+      "Enter a name for your tracking link. This name will be used for reference on your dashboard.",
+    actions: [
+      {
+        label: "Cancel",
+        onClick: () => console.log("Cancelled"),
+        variant: "gray-outline",
+      },
+      { label: "Confirm", onClick: () => console.log("Confirmed") },
+    ],
+    icon: AttachmentIcon,
+  }}
+></Story>
+
+<Story
+  name="Password Reset Modal"
+  args={{
+    show: true,
+    title: "Password Reset!",
+    description:
+      "Your password has been successfully reset, click below to continue your access.",
+    actions: [
+      {
+        label: "Return to the login Screen",
+        onClick: () => console.log("Cancelled"),
+        variant: "blue-outline",
+        beforeIcon: ArrowLeft,
+      },
+    ],
+    icon: TickIcon,
+  }}
+></Story>
+
+<Story
+  name="Info Modal"
+  args={{
+    show: true,
+    title: "Please fill out your profile",
+    description:
+      "Your information may be used for show promotion, so please provide as much as you can.",
+    actions: [{ label: "Confirm", onClick: () => console.log("Confirmed") }],
+  }}
+></Story>
+
+<Story
+  name="Warning Modal"
+  args={{
+    show: true,
+    title: "Are you sure?",
+    description: "Please confirm that you want to proceed with this action.",
+    closeBtn: true,
+    warningText: "This action is irreversible!",
+  }}
+  />

package/dist/recipes/modals/ConfirmationModal.svelte

@@ -1,162 +1,162 @@
-<script>
-  import Button from "../../primitives/Button/Button.svelte";
-  import Cancel from "../../assets/svg/cancel.svg";
-  import Modal from "../../primitives/Modal/Modal.svelte";
-  import { typography } from '../../tokens/typography';
-  import { triggerHaptic } from '../../utils/haptic.js';
-
-  let {
-    open = $bindable(false),
-    size = "md",
-    title = "",
-    description = "",
-    warningText = "",
-    actions = [],
-    icon = null,
-    customIcon = null,
-    closeBtn = false,
-    primaryButtonText = "",
-    secondaryButtonText = "",
-    variant = "default",
-    loading = false,
-    disabled = false,
-    /** Enable haptic feedback on action clicks (default: true) */
-    haptic = true,
-    onconfirm,
-    oncancel,
-    onclose,
-    ...restProps
-  } = $props();
-
-  let resolvedIcon = $derived(customIcon || icon);
-
-  let resolvedActions = $derived(actions.length > 0 ? actions : buildActionsFromProps());
-
-  function buildActionsFromProps() {
-    const result = [];
-
-    if (secondaryButtonText) {
-      result.push({
-        label: secondaryButtonText,
-        variant: "alternative",
-        onClick: () => oncancel?.()
-      });
-    }
-
-    if (primaryButtonText) {
-      result.push({
-        label: primaryButtonText,
-        variant: variant === "danger" ? "red" : "default",
-        onClick: () => onconfirm?.(),
-        primary: true
-      });
-    }
-
-    return result;
-  }
-
-  const handleAction = (action) => {
-    if (disabled || loading) return;
-
-    // Trigger haptic feedback based on action type (QOL Bible)
-    if (haptic) {
-      const actionVariant = getVariant(action);
-      const isDanger = actionVariant === 'red' || actionVariant === 'red-outline' || actionVariant === 'ghost-red';
-      triggerHaptic(isDanger ? 'heavy' : 'medium');
-    }
-
-    action.onClick?.();
-    open = false;
-  };
-
-  const handleClose = () => {
-    if (disabled || loading) return;
-    onclose?.();
-    open = false;
-  };
-
-  const getVariant = (action) => {
-    if (action.variant) return action.variant;
-
-    const { strokebtn, deemphasized, btnDanger, danger, textBtn } = action;
-
-    if (strokebtn && deemphasized) return "alternative";
-    if ((strokebtn && danger) || (btnDanger && strokebtn)) return "red-outline";
-    if (strokebtn) return "outline";
-    if (textBtn && danger) return "ghost-red";
-    if (danger || btnDanger || action.label === "Delete") return "red";
-
-    return undefined;
-  };
-
-  const cleanActionProps = (action) => {
-    const {
-      strokebtn,
-      deemphasized,
-      btnDanger,
-      danger,
-      textBtn,
-      label,
-      onClick,
-      beforeIcon,
-      afterIcon,
-      primary,
-      ...rest
-    } = action;
-    return rest;
-  };
-</script>
-
-<Modal bind:open {size} oncancel={handleClose} {...restProps}>
-  {#snippet header()}
-    <div>
-      {#if closeBtn}
-        <div class="flex justify-end -mt-2 -mr-2 mb-2">
-          <Button variant="icon" size="xs" onclick={handleClose} {disabled}>
-            <img src={Cancel} alt="Close" class="w-5 h-5" />
-          </Button>
-        </div>
-      {/if}
-      {#if resolvedIcon}
-        <div class="flex justify-center mb-4">
-          <img src={resolvedIcon} alt="" class="w-12 h-12" />
-        </div>
-      {/if}
-      {#if title}
-        <h2 class={typography.h2}>{title}</h2>
-      {/if}
-    </div>
-  {/snippet}
-
-  {#snippet body()}
-    <div class="mt-4">
-      {#if description}
-        <p class={`${typography.smMuted} leading-relaxed`}>
-          {description}
-        </p>
-      {/if}
-      {#if warningText}
-        <p class={`${typography.label} text-red-600 dark:text-red-400 mt-3`}>
-          {warningText}
-        </p>
-      {/if}
-    </div>
-  {/snippet}
-
-  {#snippet footer()}
-    <div class="flex justify-end gap-3">
-      {#each resolvedActions as action}
-        <Button
-          size="md"
-          variant={getVariant(action)}
-          {...cleanActionProps(action)}
-          disabled={disabled || action.disabled}
-          loading={action.primary && loading}
-          onclick={() => handleAction(action)}
-        >
-          {action.label}
-        </Button>
-      {/each}
-    </div>
-  {/snippet}
-</Modal>
+<script>
+  import Button from "../../primitives/Button/Button.svelte";
+  import Cancel from "../../assets/svg/cancel.svg";
+  import Modal from "../../primitives/Modal/Modal.svelte";
+  import { typography } from '../../tokens/typography';
+  import { triggerHaptic } from '../../utils/haptic.js';
+
+  let {
+    open = $bindable(false),
+    size = "md",
+    title = "",
+    description = "",
+    warningText = "",
+    actions = [],
+    icon = null,
+    customIcon = null,
+    closeBtn = false,
+    primaryButtonText = "",
+    secondaryButtonText = "",
+    variant = "default",
+    loading = false,
+    disabled = false,
+    /** Enable haptic feedback on action clicks (default: true) */
+    haptic = true,
+    onconfirm,
+    oncancel,
+    onclose,
+    ...restProps
+  } = $props();
+
+  let resolvedIcon = $derived(customIcon || icon);
+
+  let resolvedActions = $derived(actions.length > 0 ? actions : buildActionsFromProps());
+
+  function buildActionsFromProps() {
+    const result = [];
+
+    if (secondaryButtonText) {
+      result.push({
+        label: secondaryButtonText,
+        variant: "alternative",
+        onClick: () => oncancel?.()
+      });
+    }
+
+    if (primaryButtonText) {
+      result.push({
+        label: primaryButtonText,
+        variant: variant === "danger" ? "red" : "default",
+        onClick: () => onconfirm?.(),
+        primary: true
+      });
+    }
+
+    return result;
+  }
+
+  const handleAction = (action) => {
+    if (disabled || loading) return;
+
+    // Trigger haptic feedback based on action type (QOL Bible)
+    if (haptic) {
+      const actionVariant = getVariant(action);
+      const isDanger = actionVariant === 'red' || actionVariant === 'red-outline' || actionVariant === 'ghost-red';
+      triggerHaptic(isDanger ? 'heavy' : 'medium');
+    }
+
+    action.onClick?.();
+    open = false;
+  };
+
+  const handleClose = () => {
+    if (disabled || loading) return;
+    onclose?.();
+    open = false;
+  };
+
+  const getVariant = (action) => {
+    if (action.variant) return action.variant;
+
+    const { strokebtn, deemphasized, btnDanger, danger, textBtn } = action;
+
+    if (strokebtn && deemphasized) return "alternative";
+    if ((strokebtn && danger) || (btnDanger && strokebtn)) return "red-outline";
+    if (strokebtn) return "outline";
+    if (textBtn && danger) return "ghost-red";
+    if (danger || btnDanger || action.label === "Delete") return "red";
+
+    return undefined;
+  };
+
+  const cleanActionProps = (action) => {
+    const {
+      strokebtn,
+      deemphasized,
+      btnDanger,
+      danger,
+      textBtn,
+      label,
+      onClick,
+      beforeIcon,
+      afterIcon,
+      primary,
+      ...rest
+    } = action;
+    return rest;
+  };
+</script>
+
+<Modal bind:open {size} oncancel={handleClose} {...restProps}>
+  {#snippet header()}
+    <div>
+      {#if closeBtn}
+        <div class="flex justify-end -mt-2 -mr-2 mb-2">
+          <Button variant="icon" size="xs" onclick={handleClose} {disabled}>
+            <img src={Cancel} alt="Close" class="w-5 h-5" />
+          </Button>
+        </div>
+      {/if}
+      {#if resolvedIcon}
+        <div class="flex justify-center mb-4">
+          <img src={resolvedIcon} alt="" class="w-12 h-12" />
+        </div>
+      {/if}
+      {#if title}
+        <h2 class={typography.h2}>{title}</h2>
+      {/if}
+    </div>
+  {/snippet}
+
+  {#snippet body()}
+    <div class="mt-4">
+      {#if description}
+        <p class={`${typography.smMuted} leading-relaxed`}>
+          {description}
+        </p>
+      {/if}
+      {#if warningText}
+        <p class={`${typography.label} text-red-600 dark:text-red-400 mt-3`}>
+          {warningText}
+        </p>
+      {/if}
+    </div>
+  {/snippet}
+
+  {#snippet footer()}
+    <div class="flex justify-end gap-3">
+      {#each resolvedActions as action}
+        <Button
+          size="md"
+          variant={getVariant(action)}
+          {...cleanActionProps(action)}
+          disabled={disabled || action.disabled}
+          loading={action.primary && loading}
+          onclick={() => handleAction(action)}
+        >
+          {action.label}
+        </Button>
+      {/each}
+    </div>
+  {/snippet}
+</Modal>