components-svelte 0.1.0

package/dist/components/callout/Callout.svelte

@@ -0,0 +1,317 @@
+<script lang="ts">
+  import Color from "color";
+  import type { Snippet } from "svelte";
+  import Icon from "../icon/Icon.svelte";
+  import { Classes } from "../../constants/selectors";
+  import { cn } from "../../utils/cn";
+  import type { IconLibrary, IconType } from "../../utils/icon-utils";
+
+  export type CalloutVariant =
+    | "info"
+    | "warning"
+    | "note"
+    | "tip"
+    | "check"
+    | "danger"
+    | "custom";
+
+  export type CalloutProps = {
+    children?: Snippet;
+    title?: string;
+    variant?: CalloutVariant;
+    icon?: Snippet | string;
+    iconType?: IconType;
+    iconLibrary?: IconLibrary;
+    color?: string;
+    class?: string;
+    ariaLabel?: string;
+  };
+
+  const variantConfig = {
+    info: {
+      icon: "info",
+      defaultAriaLabel: "Info",
+      className:
+        "border border-stone-200 bg-stone-50 dark:border-stone-700 dark:bg-white/10",
+      childrenClassName: "text-stone-800 dark:text-stone-300",
+    },
+    warning: {
+      icon: "warning",
+      defaultAriaLabel: "Warning",
+      className:
+        'border border-yellow-200 bg-yellow-50 dark:border-yellow-900 dark:bg-yellow-600/20 **:data-[component-part="callout-icon"]:mt-px',
+      childrenClassName: "text-yellow-800 dark:text-yellow-300",
+    },
+    note: {
+      icon: "note",
+      defaultAriaLabel: "Note",
+      className:
+        "border border-blue-200 bg-blue-50 dark:border-blue-900 dark:bg-blue-600/20",
+      childrenClassName: "text-blue-800 dark:text-blue-300",
+    },
+    tip: {
+      icon: "tip",
+      defaultAriaLabel: "Tip",
+      className:
+        'border border-green-200 bg-green-50 dark:border-green-900 dark:bg-green-600/20 **:data-[component-part="callout-icon"]:mt-px',
+      childrenClassName: "text-green-800 dark:text-green-300",
+    },
+    check: {
+      icon: "check",
+      defaultAriaLabel: "Check",
+      className:
+        "border border-green-200 bg-green-50 dark:border-green-900 dark:bg-green-600/20",
+      childrenClassName: "text-green-800 dark:text-green-300",
+    },
+    danger: {
+      icon: "danger",
+      defaultAriaLabel: "Danger",
+      className:
+        "border border-red-200 bg-red-50 dark:border-red-900 dark:bg-red-600/20",
+      childrenClassName: "text-red-800 dark:text-red-300",
+    },
+  } as const;
+
+  let {
+    children,
+    title,
+    variant = "custom",
+    icon,
+    iconType,
+    iconLibrary,
+    color,
+    class: className,
+    ariaLabel,
+  }: CalloutProps = $props();
+
+  let customColor = $derived.by(() => {
+    if (variant !== "custom" || !color) return undefined;
+
+    try {
+      const baseColor = Color(color);
+      return {
+        hexColor: baseColor.hex(),
+        isDarkColor: baseColor.isDark(),
+        lighterTextColor: baseColor.lighten(0.5),
+        darkerTextColor: baseColor.darken(0.5),
+      };
+    } catch {
+      return undefined;
+    }
+  });
+
+  let finalColor = $derived(
+    variant === "custom" && color && customColor ? color : undefined
+  );
+
+  let variantClassName = $derived.by(() => {
+    if (variant === "custom") {
+      if (customColor) {
+        return "border border-(--callout-border-color-light,#71717a33) bg-(--callout-bg-color-light,#71717a1a) dark:border-(--callout-border-color-dark,#71717a4d) dark:bg-(--callout-bg-color-dark,#71717a1a)";
+      }
+
+      return "border border-stone-500/20 bg-stone-50/50 dark:border-stone-500/30 dark:bg-stone-500/10";
+    }
+
+    return variantConfig[variant].className;
+  });
+
+  let childrenClassName = $derived.by(() => {
+    if (variant === "custom") {
+      if (customColor) {
+        return "mt-1 text-(--callout-text-color) dark:text-(--dark-callout-text-color)";
+      }
+
+      return "text-stone-900 dark:text-stone-200";
+    }
+
+    return variantConfig[variant].childrenClassName;
+  });
+
+  let customStyle = $derived.by(() => {
+    if (customColor) {
+      const { hexColor, isDarkColor } = customColor;
+
+      return {
+        "--callout-border-color-light": `${hexColor}33`,
+        "--callout-bg-color-light": `${hexColor}1a`,
+        "--callout-border-color-dark": `${hexColor}${isDarkColor ? "66" : "4d"}`,
+        "--callout-bg-color-dark": `${hexColor}${isDarkColor ? "4d" : "1a"}`,
+      } as Record<string, string>;
+    }
+
+    return {};
+  });
+
+  let customTextStyle = $derived.by(() => {
+    if (customColor) {
+      return {
+        "--callout-text-color": customColor.darkerTextColor.hex(),
+        "--dark-callout-text-color": customColor.lighterTextColor.hex(),
+      } as Record<string, string>;
+    }
+
+    return {};
+  });
+
+  let combinedCustomStyle = $derived({ ...customStyle, ...customTextStyle });
+
+  function styleToString(s: Record<string, string>): string {
+    return Object.entries(s)
+      .map(([key, value]) => `${key}:${value}`)
+      .join(";");
+  }
+
+  let config = $derived(
+    variant === "custom" ? undefined : variantConfig[variant]
+  );
+</script>
+
+{#snippet InfoIconSnippet()}
+  <svg
+    aria-label={ariaLabel || "Info"}
+    class="size-5 flex-none text-stone-800 dark:text-stone-300"
+    fill="currentColor"
+    role="img"
+    viewBox="0 0 20 20"
+  >
+    <path d="M8 0C3.58125 0 0 3.58125 0 8C0 12.4187 3.58125 16 8 16C12.4187 16 16 12.4187 16 8C16 3.58125 12.4187 0 8 0ZM8 14.5C4.41563 14.5 1.5 11.5841 1.5 8C1.5 4.41594 4.41563 1.5 8 1.5C11.5844 1.5 14.5 4.41594 14.5 8C14.5 11.5841 11.5844 14.5 8 14.5ZM9.25 10.5H8.75V7.75C8.75 7.3375 8.41563 7 8 7H7C6.5875 7 6.25 7.3375 6.25 7.75C6.25 8.1625 6.5875 8.5 7 8.5H7.25V10.5H6.75C6.3375 10.5 6 10.8375 6 11.25C6 11.6625 6.3375 12 6.75 12H9.25C9.66406 12 10 11.6641 10 11.25C10 10.8359 9.66563 10.5 9.25 10.5ZM8 6C8.55219 6 9 5.55219 9 5C9 4.44781 8.55219 4 8 4C7.44781 4 7 4.44687 7 5C7 5.55313 7.44687 6 8 6Z" />
+  </svg>
+{/snippet}
+
+{#snippet WarningIconSnippet()}
+  <svg
+    aria-label={ariaLabel || "Warning"}
+    class="size-5 flex-none text-yellow-800 dark:text-yellow-300"
+    fill="none"
+    role="img"
+    stroke="currentColor"
+    stroke-width="2"
+    viewBox="0 0 24 24"
+  >
+    <path
+      d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+{/snippet}
+
+{#snippet NoteIconSnippet()}
+  <svg
+    aria-label={ariaLabel || "Note"}
+    class="size-4 text-blue-800 dark:text-blue-300"
+    fill="currentColor"
+    height="14"
+    role="img"
+    viewBox="0 0 14 14"
+    width="14"
+  >
+    <path
+      clip-rule="evenodd"
+      d="M7 1.3C10.14 1.3 12.7 3.86 12.7 7C12.7 10.14 10.14 12.7 7 12.7C5.48908 12.6974 4.0408 12.096 2.97241 11.0276C1.90403 9.9592 1.30264 8.51092 1.3 7C1.3 3.86 3.86 1.3 7 1.3ZM7 0C3.14 0 0 3.14 0 7C0 10.86 3.14 14 7 14C10.86 14 14 10.86 14 7C14 3.14 10.86 0 7 0ZM8 3H6V8H8V3ZM8 9H6V11H8V9Z"
+      fill-rule="evenodd"
+    />
+  </svg>
+{/snippet}
+
+{#snippet TipIconSnippet()}
+  <svg
+    aria-label={ariaLabel || "Tip"}
+    class="h-auto w-3.5 text-green-800 dark:text-green-300"
+    fill="currentColor"
+    height="14"
+    role="img"
+    viewBox="0 0 11 14"
+    width="11"
+  >
+    <path d="M3.12794 12.4232C3.12794 12.5954 3.1776 12.7634 3.27244 12.907L3.74114 13.6095C3.88471 13.8248 4.21067 14 4.46964 14H6.15606C6.41415 14 6.74017 13.825 6.88373 13.6095L7.3508 12.9073C7.43114 12.7859 7.49705 12.569 7.49705 12.4232L7.50055 11.3513H3.12521L3.12794 12.4232ZM5.31288 0C2.52414 0.00875889 0.5 2.26889 0.5 4.78826C0.5 6.00188 0.949566 7.10829 1.69119 7.95492C2.14321 8.47011 2.84901 9.54727 3.11919 10.4557C3.12005 10.4625 3.12175 10.4698 3.12261 10.4771H7.50342C7.50427 10.4698 7.50598 10.463 7.50684 10.4557C7.77688 9.54727 8.48281 8.47011 8.93484 7.95492C9.67728 7.13181 10.1258 6.02703 10.1258 4.78826C10.1258 2.15486 7.9709 0.000106649 5.31288 0ZM7.94902 7.11267C7.52078 7.60079 6.99082 8.37878 6.6077 9.18794H4.02051C3.63739 8.37878 3.10743 7.60079 2.67947 7.11294C2.11997 6.47551 1.8126 5.63599 1.8126 4.78826C1.8126 3.09829 3.12794 1.31944 5.28827 1.3126C7.2435 1.3126 8.81315 2.88226 8.81315 4.78826C8.81315 5.63599 8.50688 6.47551 7.94902 7.11267ZM4.87534 2.18767C3.66939 2.18767 2.68767 3.16939 2.68767 4.37534C2.68767 4.61719 2.88336 4.81288 3.12521 4.81288C3.36705 4.81288 3.56274 4.61599 3.56274 4.37534C3.56274 3.6515 4.1515 3.06274 4.87534 3.06274C5.11719 3.06274 5.31288 2.86727 5.31288 2.62548C5.31288 2.38369 5.11599 2.18767 4.87534 2.18767Z" />
+  </svg>
+{/snippet}
+
+{#snippet CheckIconSnippet()}
+  <svg
+    aria-label={ariaLabel || "Check"}
+    class="h-auto w-3.5 text-green-800 dark:text-green-300"
+    fill="currentColor"
+    role="img"
+    viewBox="0 0 448 512"
+  >
+    <path d="M438.6 105.4C451.1 117.9 451.1 138.1 438.6 150.6L182.6 406.6C170.1 419.1 149.9 419.1 137.4 406.6L9.372 278.6C-3.124 266.1-3.124 245.9 9.372 233.4C21.87 220.9 42.13 220.9 54.63 233.4L159.1 338.7L393.4 105.4C405.9 92.88 426.1 92.88 438.6 105.4H438.6z" />
+  </svg>
+{/snippet}
+
+{#snippet DangerIconSnippet()}
+  <svg
+    aria-label={ariaLabel || "Danger"}
+    class="size-4 flex-none text-red-800 dark:text-red-300"
+    fill="currentColor"
+    height="14"
+    role="img"
+    viewBox="0 0 512 512"
+    width="14"
+  >
+    <path d="M17.1 292c-12.9-22.3-12.9-49.7 0-72L105.4 67.1c12.9-22.3 36.6-36 62.4-36l176.6 0c25.7 0 49.5 13.7 62.4 36L494.9 220c12.9 22.3 12.9 49.7 0 72L406.6 444.9c-12.9 22.3-36.6 36-62.4 36l-176.6 0c-25.7 0-49.5-13.7-62.4-36L17.1 292zm41.6-48c-4.3 7.4-4.3 16.6 0 24l88.3 152.9c4.3 7.4 12.2 12 20.8 12l176.6 0c8.6 0 16.5-4.6 20.8-12L453.4 268c4.3-7.4 4.3-16.6 0-24L365.1 91.1c-4.3-7.4-12.2-12-20.8-12l-176.6 0c-8.6 0-16.5 4.6-20.8 12L58.6 244zM256 128c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-112c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z" />
+  </svg>
+{/snippet}
+
+<div
+  class={cn(
+    Classes.Callout,
+    "my-4 flex gap-3 overflow-hidden rounded-2xl px-5 py-4",
+    variantClassName,
+    className
+  )}
+  data-callout-type={variant}
+  style={styleToString(combinedCustomStyle)}
+>
+  {#if variant === "custom"}
+    {#if icon}
+      <div
+        class="mt-0.5 w-4"
+        data-component-part="callout-icon"
+        aria-label={ariaLabel}
+      >
+        {#if typeof icon === "string"}
+          <Icon
+            class="m-0! size-4 shrink-0"
+            color={finalColor}
+            icon={icon}
+            iconLibrary={iconLibrary}
+            iconType={iconType}
+          />
+        {:else}
+          {@render icon()}
+        {/if}
+      </div>
+    {/if}
+  {:else if config}
+    <div class="mt-0.5 w-4" data-component-part="callout-icon">
+      {#if config.icon === "info"}{@render InfoIconSnippet()}
+      {:else if config.icon === "warning"}{@render WarningIconSnippet()}
+      {:else if config.icon === "note"}{@render NoteIconSnippet()}
+      {:else if config.icon === "tip"}{@render TipIconSnippet()}
+      {:else if config.icon === "check"}{@render CheckIconSnippet()}
+      {:else if config.icon === "danger"}{@render DangerIconSnippet()}
+      {/if}
+    </div>
+  {/if}
+  <div
+    class={cn(
+      "prose dark:prose-invert w-full min-w-0 text-sm [&_a]:border-current [&_a]:text-current! [&_code]:text-current! [&_kbd]:bg-stone-100 [&_kbd]:text-current! dark:[&_kbd]:bg-stone-800 [&_strong]:text-current!",
+      title && "[&>:nth-child(2)]:mt-3",
+      childrenClassName
+    )}
+    data-component-part="callout-content"
+    style={styleToString(customTextStyle)}
+  >
+    {#if title}
+      <div class="font-semibold" data-component-part="callout-title">
+        {title}
+      </div>
+    {/if}
+    {#if children}
+      {@render children()}
+    {/if}
+  </div>
+</div>

package/dist/components/callout/Callout.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Snippet } from "svelte";
+import type { IconLibrary, IconType } from "../../utils/icon-utils";
+export type CalloutVariant = "info" | "warning" | "note" | "tip" | "check" | "danger" | "custom";
+export type CalloutProps = {
+    children?: Snippet;
+    title?: string;
+    variant?: CalloutVariant;
+    icon?: Snippet | string;
+    iconType?: IconType;
+    iconLibrary?: IconLibrary;
+    color?: string;
+    class?: string;
+    ariaLabel?: string;
+};
+declare const Callout: import("svelte").Component<CalloutProps, {}, "">;
+type Callout = ReturnType<typeof Callout>;
+export default Callout;

package/dist/components/callout/Check.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import Callout, { type CalloutProps } from "./Callout.svelte";
+
+  let { children, ...props }: Omit<CalloutProps, "variant"> = $props();
+</script>
+
+<Callout variant="check" {...props}>
+  {#if children}{@render children()}{/if}
+</Callout>

package/dist/components/callout/Check.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type CalloutProps } from "./Callout.svelte";
+declare const Check: import("svelte").Component<Omit<CalloutProps, "variant">, {}, "">;
+type Check = ReturnType<typeof Check>;
+export default Check;

package/dist/components/callout/Danger.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import Callout, { type CalloutProps } from "./Callout.svelte";
+
+  let { children, ...props }: Omit<CalloutProps, "variant"> = $props();
+</script>
+
+<Callout variant="danger" {...props}>
+  {#if children}{@render children()}{/if}
+</Callout>

package/dist/components/callout/Danger.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type CalloutProps } from "./Callout.svelte";
+declare const Danger: import("svelte").Component<Omit<CalloutProps, "variant">, {}, "">;
+type Danger = ReturnType<typeof Danger>;
+export default Danger;

package/dist/components/callout/Info.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import Callout, { type CalloutProps } from "./Callout.svelte";
+
+  let { children, ...props }: Omit<CalloutProps, "variant"> = $props();
+</script>
+
+<Callout variant="info" {...props}>
+  {#if children}{@render children()}{/if}
+</Callout>

package/dist/components/callout/Info.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type CalloutProps } from "./Callout.svelte";
+declare const Info: import("svelte").Component<Omit<CalloutProps, "variant">, {}, "">;
+type Info = ReturnType<typeof Info>;
+export default Info;

package/dist/components/callout/Note.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import Callout, { type CalloutProps } from "./Callout.svelte";
+
+  let { children, ...props }: Omit<CalloutProps, "variant"> = $props();
+</script>
+
+<Callout variant="note" {...props}>
+  {#if children}{@render children()}{/if}
+</Callout>

package/dist/components/callout/Note.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type CalloutProps } from "./Callout.svelte";
+declare const Note: import("svelte").Component<Omit<CalloutProps, "variant">, {}, "">;
+type Note = ReturnType<typeof Note>;
+export default Note;

package/dist/components/callout/Tip.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import Callout, { type CalloutProps } from "./Callout.svelte";
+
+  let { children, ...props }: Omit<CalloutProps, "variant"> = $props();
+</script>
+
+<Callout variant="tip" {...props}>
+  {#if children}{@render children()}{/if}
+</Callout>

package/dist/components/callout/Tip.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type CalloutProps } from "./Callout.svelte";
+declare const Tip: import("svelte").Component<Omit<CalloutProps, "variant">, {}, "">;
+type Tip = ReturnType<typeof Tip>;
+export default Tip;

package/dist/components/callout/Warning.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import Callout, { type CalloutProps } from "./Callout.svelte";
+
+  let { children, ...props }: Omit<CalloutProps, "variant"> = $props();
+</script>
+
+<Callout variant="warning" {...props}>
+  {#if children}{@render children()}{/if}
+</Callout>

package/dist/components/callout/Warning.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type CalloutProps } from "./Callout.svelte";
+declare const Warning: import("svelte").Component<Omit<CalloutProps, "variant">, {}, "">;
+type Warning = ReturnType<typeof Warning>;
+export default Warning;

package/dist/components/callout/index.d.ts

@@ -0,0 +1,8 @@
+export type { CalloutProps, CalloutVariant } from "./Callout.svelte";
+export { default as Callout } from "./Callout.svelte";
+export { default as Check } from "./Check.svelte";
+export { default as Danger } from "./Danger.svelte";
+export { default as Info } from "./Info.svelte";
+export { default as Note } from "./Note.svelte";
+export { default as Tip } from "./Tip.svelte";
+export { default as Warning } from "./Warning.svelte";

package/dist/components/callout/index.js

@@ -0,0 +1,8 @@
+export { default as Callout } from "./Callout.svelte";
+// Backward compatibility exports
+export { default as Check } from "./Check.svelte";
+export { default as Danger } from "./Danger.svelte";
+export { default as Info } from "./Info.svelte";
+export { default as Note } from "./Note.svelte";
+export { default as Tip } from "./Tip.svelte";
+export { default as Warning } from "./Warning.svelte";

package/dist/components/card/Card.svelte

@@ -0,0 +1,172 @@
+<script lang="ts">
+  import { ArrowUpRight } from "@lucide/svelte";
+  import Icon from "../icon/Icon.svelte";
+  import { Classes } from "../../constants/selectors";
+  import { cn } from "../../utils/cn";
+  import { isRemoteUrl } from "../../utils/is-remote-url";
+  import type { IconLibrary, IconType } from "../../utils/icon-utils";
+  import type { Snippet } from "svelte";
+
+  type CardProps = {
+    title?: string | Snippet;
+    icon?: string | Snippet;
+    iconType?: IconType;
+    iconLibrary?: IconLibrary;
+    color?: string;
+    horizontal?: boolean;
+    href?: string;
+    img?: string;
+    children?: string | Snippet;
+    disabled?: boolean;
+    cta?: string;
+    arrow?: boolean;
+    as?: string;
+    class?: string;
+  };
+
+  let {
+    title,
+    icon,
+    iconType,
+    iconLibrary,
+    color,
+    horizontal,
+    href,
+    img,
+    children,
+    disabled,
+    cta,
+    arrow,
+    as,
+    class: className,
+  }: CardProps = $props();
+
+  // Svelte Icon handling — mirrors React Card Icon logic
+  let iconSnippet: Snippet | undefined = $derived.by(() => {
+    if (typeof icon === "string") {
+      return undefined; // Will render via Icon component in template
+    }
+    return icon as Snippet | undefined;
+  });
+  let isIconString = $derived(typeof icon === "string");
+  let resolvedHref = $derived(disabled ? undefined : href);
+  let Component: any = $derived(disabled ? "div" : as || (href !== undefined ? "a" : "div"));
+  let isExternalLink = $derived(isRemoteUrl(resolvedHref ?? ""));
+  let shouldShowArrowIcon = $derived(arrow ?? isExternalLink);
+  let cardClass = $derived(
+    cn(
+      Classes.Card,
+      "group relative my-2 block w-full overflow-hidden rounded-2xl border border-stone-950/10 bg-white font-normal ring-2 ring-transparent dark:border-white/10 dark:bg-background-dark",
+      resolvedHref && "cursor-pointer",
+      resolvedHref && "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary dark:focus-visible:ring-primary-light",
+      className
+    )
+  );
+</script>
+
+{#snippet renderIcon()}
+  {#if icon}
+    {#if isIconString}
+      <Icon
+        class="m-0! size-6 shrink-0"
+        color={color}
+        icon={icon as string}
+        iconLibrary={iconLibrary}
+        iconType={iconType}
+        overrideColor={!!color}
+      />
+    {:else if iconSnippet}
+      <div class="size-6 fill-stone-800 text-stone-800 dark:fill-stone-100 dark:text-stone-100" data-component-part="card-icon">
+        {@render iconSnippet()}
+      </div>
+    {/if}
+  {/if}
+{/snippet}
+
+{#snippet cardContent()}
+  {#if img}
+    {@const imageAlt = img.match(/\/([^/]+)\.[^.]+$/)?.[1] ?? ""}
+    <img alt={imageAlt} class="not-prose w-full object-cover object-center" data-component-part="card-image" src={img} />
+  {/if}
+  <div class={cn("relative px-6 py-5", horizontal && "flex items-center gap-x-4")} data-component-part="card-content-container">
+    {#if resolvedHref}
+      <div
+        aria-hidden="true"
+        class={cn("absolute top-5 right-5 text-stone-400 group-hover:text-primary dark:text-stone-500 dark:group-hover:text-primary-light", !shouldShowArrowIcon && "hidden")}
+        data-component-part="card-arrow"
+      >
+        <ArrowUpRight class="size-4" />
+      </div>
+    {/if}
+    {@render renderIcon()}
+    <div class="min-w-0 flex-1">
+      {#if title}
+        <h2
+          class={cn("not-prose wrap-break-word font-semibold text-base text-stone-800 dark:text-white", icon !== null && icon !== undefined && !horizontal && "mt-4")}
+          data-component-part="card-title"
+        >
+          {#if typeof title === "string"}
+            {title}
+          {:else}
+            {@render title()}
+          {/if}
+        </h2>
+      {/if}
+      <div
+        class={cn(
+          "prose wrap-break-word mt-1 font-normal text-base leading-6",
+          title ? "text-stone-600 dark:text-stone-400" : "text-stone-700 dark:text-stone-300",
+          horizontal && "mt-0 leading-6"
+        )}
+        data-component-part="card-content"
+      >
+        {#if children}
+          {#if typeof children === "string"}
+            {children}
+          {:else}
+            {@render children()}
+          {/if}
+        {/if}
+      </div>
+      {#if cta}
+        <div class="mt-8" data-component-part="card-cta">
+          <span
+            class={cn(
+              "flex flex-row items-center gap-2 text-left font-medium text-sm text-stone-600 dark:text-stone-400",
+              !disabled && "group-hover:text-primary group-hover:dark:text-primary-light",
+              disabled && "opacity-50"
+            )}
+          >
+            {cta}
+            <svg aria-hidden="true" class="h-6 rotate-0 overflow-visible" height="24" viewBox="0 -9 3 24" width="3">
+              <path d="M0 0L3 3L0 6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5" />
+            </svg>
+          </span>
+        </div>
+      {/if}
+    </div>
+  </div>
+{/snippet}
+
+<!-- Svelte GenericCard — mirrors React GenericCard, 1:1 Tailwind/classes — use plain div/a for HMR, not svelte:element -->
+{#if Component === "a"}
+  <a
+    class={cardClass}
+    data-card-debug={cardClass}
+    data-component="card"
+    href={resolvedHref}
+    target={isExternalLink ? "_blank" : undefined}
+    rel={isExternalLink ? "noreferrer" : undefined}
+  >
+    {@render cardContent()}
+  </a>
+{:else}
+  <div
+    class={cardClass}
+    data-card-debug={cardClass}
+    data-component="card"
+  >
+    {@render cardContent()}
+  </div>
+{/if}
+

package/dist/components/card/Card.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { IconLibrary, IconType } from "../../utils/icon-utils";
+import type { Snippet } from "svelte";
+type CardProps = {
+    title?: string | Snippet;
+    icon?: string | Snippet;
+    iconType?: IconType;
+    iconLibrary?: IconLibrary;
+    color?: string;
+    horizontal?: boolean;
+    href?: string;
+    img?: string;
+    children?: string | Snippet;
+    disabled?: boolean;
+    cta?: string;
+    arrow?: boolean;
+    as?: string;
+    class?: string;
+};
+declare const Card: import("svelte").Component<CardProps, {}, "">;
+type Card = ReturnType<typeof Card>;
+export default Card;

package/dist/components/card/index.d.ts

@@ -0,0 +1,3 @@
+import Card from "./Card.svelte";
+export { Card };
+export type { default as CardProps } from "./Card.svelte";

package/dist/components/card/index.js

@@ -0,0 +1,2 @@
+import Card from "./Card.svelte";
+export { Card };