components-svelte 0.1.0

package/dist/components/code-group/CodeSelectDropdown.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+  import { Check, ChevronDown } from "@lucide/svelte";
+  import { DropdownMenu } from "bits-ui";
+  import { cn } from "../../utils/cn";
+
+  type CodeSelectDropdownProps = {
+    selectedOption?: string;
+    setSelectedOption: (option: string) => void;
+    options: string[];
+  };
+
+  let {
+    selectedOption,
+    setSelectedOption,
+    options,
+  }: CodeSelectDropdownProps = $props();
+
+  let isOpen = $state(false);
+  let hasOptions = $derived(options.length > 1);
+
+  function selectOption(option: string) {
+    isOpen = false;
+    setSelectedOption(option);
+  }
+</script>
+
+<DropdownMenu.Root bind:open={isOpen}>
+  <DropdownMenu.Trigger
+    class="group group min-w-16 select-none overflow-hidden rounded-lg bg-transparent px-2 py-[5px] font-medium text-primary text-xs disabled:pointer-events-none dark:bg-transparent dark:text-primary-light [&>span]:line-clamp-1"
+    disabled={!hasOptions}
+  >
+    <div
+      class="flex min-w-16 items-center gap-1.5 rounded-lg px-2 py-1 group-hover:bg-primary/10 dark:group-hover:bg-primary-light/10"
+    >
+      <p class="truncate">{selectedOption}</p>
+      {#if hasOptions}<ChevronDown class="min-w-3" size={12} />{/if}
+    </div>
+  </DropdownMenu.Trigger>
+
+  <DropdownMenu.Portal>
+    <DropdownMenu.Content
+      class="relative max-h-96 min-w-(--anchor-width) overflow-y-auto rounded-2xl border-standard bg-stone-50 p-1 text-stone-950/70 shadow-stone-500/5 shadow-xl dark:border-stone-800/50 dark:bg-[#0F1117] dark:text-white/70 dark:shadow-none dark:shadow-stone-500/5"
+      style="text-rendering: geometricPrecision"
+    >
+      {#each options as option}
+        {@const isSelected = option === selectedOption}
+        <DropdownMenu.Item
+          class={cn(
+            "group relative flex w-full cursor-pointer select-none items-center justify-between gap-2 rounded-md px-2 py-1 text-sm outline-0 hover:bg-stone-950/3 focus:bg-stone-950/5 data-[highlighted]:bg-stone-950/5 data-[highlighted]:text-stone-950/75 data-disabled:pointer-events-none data-disabled:cursor-default data-disabled:opacity-50 dark:focus:bg-white/5 dark:hover:bg-white/3 dark:data-[highlighted]:bg-white/5 dark:data-[highlighted]:text-white/75",
+            "rounded-xl py-1.5 text-xs",
+            "hover:bg-primary/10 hover:text-primary dark:hover:bg-primary-light/10 dark:hover:text-primary-light",
+            isSelected && "font-medium text-primary dark:text-primary-light",
+            !isSelected && "text-stone-500 dark:text-white/50"
+          )}
+          onSelect={() => selectOption(option)}
+          textValue={option}
+        >
+          {option}
+          <Check
+            class={cn(
+              "size-3.5 shrink-0 text-primary dark:text-primary-light",
+              !isSelected && "opacity-0"
+            )}
+            strokeWidth={2.5}
+          />
+        </DropdownMenu.Item>
+      {/each}
+    </DropdownMenu.Content>
+  </DropdownMenu.Portal>
+</DropdownMenu.Root>
+
+<script lang="ts" module>
+  export type { CodeSelectDropdownProps };
+</script>

package/dist/components/code-group/CodeSelectDropdown.svelte.d.ts

@@ -0,0 +1,9 @@
+export type { CodeSelectDropdownProps };
+type CodeSelectDropdownProps = {
+    selectedOption?: string;
+    setSelectedOption: (option: string) => void;
+    options: string[];
+};
+declare const CodeSelectDropdown: import("svelte").Component<CodeSelectDropdownProps, {}, "">;
+type CodeSelectDropdown = ReturnType<typeof CodeSelectDropdown>;
+export default CodeSelectDropdown;

package/dist/components/code-group/LanguageDropdown.svelte

@@ -0,0 +1,134 @@
+<script lang="ts">
+  import { ChevronsUpDown, Check } from "@lucide/svelte";
+  import { cn } from "../../utils/cn";
+  import { getDisplayName } from "../../utils/shiki/snippet-presets";
+  import type { CodeBlockTheme } from "../../utils/shiki/code-styling";
+  import LanguageIcon from "./LanguageIcon.svelte";
+
+  type LanguageDropdownProps = {
+    selectedLanguage: string;
+    setSelectedLanguage: (language: string, index: number) => void;
+    languages: string[];
+    codeBlockTheme?: CodeBlockTheme;
+  };
+
+  let {
+    selectedLanguage,
+    setSelectedLanguage,
+    languages,
+    codeBlockTheme = "system",
+  }: LanguageDropdownProps = $props();
+
+  let isOpen = $state(false);
+  let rootRef = $state<HTMLDivElement>();
+  let hasOptions = $derived(languages.length > 1);
+
+  function selectLanguage(language: string, index: number) {
+    isOpen = false;
+    setSelectedLanguage(language, index);
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (event.key === "Escape") {
+      isOpen = false;
+    }
+  }
+
+  function handleWindowClick(event: MouseEvent) {
+    if (isOpen && rootRef && !rootRef.contains(event.target as Node)) {
+      isOpen = false;
+    }
+  }
+</script>
+
+<svelte:window onkeydown={handleKeydown} onclick={handleWindowClick} />
+
+<div class="relative" bind:this={rootRef}>
+  <button
+    type="button"
+    class="group cursor-default select-none bg-transparent pb-1 font-medium text-xs dark:bg-transparent"
+    disabled={!hasOptions}
+    aria-haspopup="menu"
+    aria-expanded={isOpen}
+    onclick={() => (isOpen = !isOpen)}
+  >
+    <div
+      class={cn(
+        "flex items-center gap-1 rounded-[10px] border py-[5px] pr-1.5 pl-2.5 text-stone-500 dark:text-stone-400",
+        hasOptions ? "cursor-pointer" : "cursor-default",
+        hasOptions &&
+          codeBlockTheme === "system" &&
+          "hover:bg-stone-200/50 hover:text-primary dark:hover:bg-stone-700/70 dark:hover:text-primary-light",
+        hasOptions &&
+          codeBlockTheme === "dark" &&
+          "hover:bg-stone-700/70 hover:text-primary-light",
+        isOpen &&
+          "border-stone-600/50 ring-1 dark:border-stone-400/50 dark:ring-stone-800/50",
+        isOpen && codeBlockTheme === "system" && "ring-stone-200/70",
+        isOpen && codeBlockTheme === "dark" && "ring-stone-800/50",
+        !isOpen && "border-transparent"
+      )}
+    >
+      <LanguageIcon language={selectedLanguage} />
+      <p class="truncate font-medium">{getDisplayName(selectedLanguage)}</p>
+      {#if hasOptions}<ChevronsUpDown class="size-3.5 shrink-0" />{/if}
+    </div>
+  </button>
+
+  {#if isOpen && hasOptions}
+    <div
+      class={cn(
+        "absolute top-full right-0 z-50 min-w-[170px] overflow-y-auto rounded-2xl border-standard bg-white p-1 text-stone-950/70 shadow-stone-500/5 shadow-xl dark:bg-stone-950 dark:text-white/70 dark:shadow-none dark:shadow-stone-500/5",
+        "min-w-[170px] overflow-y-auto border p-1",
+        codeBlockTheme === "system" &&
+          "border-stone-200/70 bg-white dark:border-white/10 dark:bg-[#0F1117]",
+        codeBlockTheme === "dark" && "border-white/10 bg-[#0F1117]"
+      )}
+      role="menu"
+      style="text-rendering: geometricPrecision"
+    >
+      {#each languages as language, i}
+        {@const isSelected = language === selectedLanguage}
+        <button
+          type="button"
+          class={cn(
+            "group relative flex w-full cursor-pointer select-none items-center justify-between gap-2 rounded-md px-2 py-1 text-sm outline-0",
+            "flex items-center gap-1.5 py-1.5 text-xs",
+            codeBlockTheme === "system" &&
+              "hover:bg-primary/10 hover:text-primary focus:bg-primary/10 focus:text-primary dark:hover:bg-primary-light/10 dark:hover:text-primary-light",
+            codeBlockTheme === "dark" &&
+              "text-primary-light hover:bg-primary-light/10 hover:text-primary-light dark:text-primary-light",
+            isSelected &&
+              codeBlockTheme === "system" &&
+              "font-medium text-primary dark:text-primary-light",
+            isSelected &&
+              codeBlockTheme === "dark" &&
+              "font-medium text-primary-light dark:text-primary-light",
+            !isSelected &&
+              codeBlockTheme === "system" &&
+              "text-stone-500 dark:text-white/50",
+            !isSelected && codeBlockTheme === "dark" && "text-white/50"
+          )}
+          role="menuitem"
+          onclick={() => selectLanguage(language, i)}
+        >
+          <LanguageIcon language={language} />
+          <div class="flex min-w-0 flex-1 items-center font-medium">
+            {getDisplayName(language)}
+          </div>
+          <Check
+            class={cn(
+              "size-3.5 shrink-0 text-primary dark:text-primary-light",
+              !isSelected && "opacity-0"
+            )}
+            strokeWidth={2.5}
+          />
+        </button>
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<script lang="ts" module>
+  export type { LanguageDropdownProps };
+</script>

package/dist/components/code-group/LanguageDropdown.svelte.d.ts

@@ -0,0 +1,11 @@
+export type { LanguageDropdownProps };
+import type { CodeBlockTheme } from "../../utils/shiki/code-styling";
+type LanguageDropdownProps = {
+    selectedLanguage: string;
+    setSelectedLanguage: (language: string, index: number) => void;
+    languages: string[];
+    codeBlockTheme?: CodeBlockTheme;
+};
+declare const LanguageDropdown: import("svelte").Component<LanguageDropdownProps, {}, "">;
+type LanguageDropdown = ReturnType<typeof LanguageDropdown>;
+export default LanguageDropdown;

package/dist/components/code-group/LanguageIcon.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { cn } from "../../utils/cn";
+  import { getLanguageIconUrl } from "../../utils/icon-utils";
+
+  type LanguageIconProps = {
+    language: string;
+    class?: string;
+  };
+
+  let { language, class: className }: LanguageIconProps = $props();
+  let url = $derived(getLanguageIconUrl(language));
+</script>
+
+{#if url}
+  <svg
+    class={cn("size-3.5 shrink-0", className)}
+    style={`-webkit-mask-image: url(${url}); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; mask-image: url(${url}); mask-repeat: no-repeat; mask-position: center; mask-size: 100%; background-color: currentColor;`}
+    aria-hidden="true"
+  ></svg>
+{/if}
+
+<script lang="ts" module>
+  export type { LanguageIconProps };
+</script>

package/dist/components/code-group/LanguageIcon.svelte.d.ts

@@ -0,0 +1,8 @@
+export type { LanguageIconProps };
+type LanguageIconProps = {
+    language: string;
+    class?: string;
+};
+declare const LanguageIcon: import("svelte").Component<LanguageIconProps, {}, "">;
+type LanguageIcon = ReturnType<typeof LanguageIcon>;
+export default LanguageIcon;

package/dist/components/code-group/context.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from "svelte";
+import type { CodeBlockProps } from "../code-block/types";
+type CodeGroupChild = Omit<CodeBlockProps, "children"> & {
+    id: symbol;
+    children?: Snippet;
+    codeString: string;
+};
+type CodeGroupContext = {
+    register: (child: CodeGroupChild) => void;
+    unregister: (id: symbol) => void;
+};
+declare const CODE_GROUP_CONTEXT: unique symbol;
+export type { CodeGroupChild, CodeGroupContext };
+export { CODE_GROUP_CONTEXT };

package/dist/components/code-group/context.js

@@ -0,0 +1,2 @@
+const CODE_GROUP_CONTEXT = Symbol("code-group-context");
+export { CODE_GROUP_CONTEXT };

package/dist/components/code-group/index.d.ts

@@ -0,0 +1,8 @@
+export type { CodeGroupProps } from "./CodeGroup.svelte";
+export { default as CodeGroup } from "./CodeGroup.svelte";
+export type { CodeGroupSelectProps, ExampleCodeSnippet } from "./CodeGroupSelect.svelte";
+export { default as CodeGroupSelect } from "./CodeGroupSelect.svelte";
+export type { LanguageDropdownProps } from "./LanguageDropdown.svelte";
+export { default as LanguageDropdown } from "./LanguageDropdown.svelte";
+export type { LanguageIconProps } from "./LanguageIcon.svelte";
+export { default as LanguageIcon } from "./LanguageIcon.svelte";

package/dist/components/code-group/index.js

@@ -0,0 +1,4 @@
+export { default as CodeGroup } from "./CodeGroup.svelte";
+export { default as CodeGroupSelect } from "./CodeGroupSelect.svelte";
+export { default as LanguageDropdown } from "./LanguageDropdown.svelte";
+export { default as LanguageIcon } from "./LanguageIcon.svelte";

package/dist/components/color/Color.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { cn } from "../../utils/cn";
+  import { Classes } from "../../constants/selectors";
+  import { setContext } from "svelte";
+  import type { Snippet } from "svelte";
+
+  type ColorVariant = "compact" | "table";
+
+  type ColorProps = {
+    children?: Snippet;
+    variant: ColorVariant;
+    class?: string;
+  };
+
+  let { children, variant, class: className }: ColorProps = $props();
+
+  // svelte-ignore state_referenced_locally
+  setContext("color-context", variant);
+</script>
+
+<div
+  class={cn(
+    Classes.Color,
+    "group flex py-6",
+    variant === "table" && "flex-col gap-6",
+    variant === "compact" && "flex-row flex-wrap gap-x-2 gap-y-4",
+    className
+  )}
+  data-variant={variant}
+>
+  {#if children}
+    {@render children()}
+  {/if}
+</div>

package/dist/components/color/Color.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from "svelte";
+type ColorVariant = "compact" | "table";
+type ColorProps = {
+    children?: Snippet;
+    variant: ColorVariant;
+    class?: string;
+};
+declare const Color: import("svelte").Component<ColorProps, {}, "">;
+type Color = ReturnType<typeof Color>;
+export default Color;

package/dist/components/color/ColorItem.svelte

@@ -0,0 +1,140 @@
+<script lang="ts">
+  import { cn } from "../../utils/cn";
+  import { Classes } from "../../constants/selectors";
+  import { copyToClipboard } from "../../utils/copy-to-clipboard";
+  import { getContext } from "svelte";
+  import type { Snippet } from "svelte";
+
+  type ColorItemProps = {
+    value: string | { light: string; dark: string };
+    name?: string;
+  };
+
+  let { value, name }: ColorItemProps = $props();
+
+  let copyState: "idle" | "copied" = $state("idle");
+  let timeoutRef: ReturnType<typeof setTimeout> | null = null;
+
+  let darkMode = $state(false);
+
+  function getIsDarkTheme() {
+    if (typeof document === "undefined") return false;
+    return document.documentElement.classList.contains("dark");
+  }
+
+  $effect(() => {
+    darkMode = getIsDarkTheme();
+    const observer = new MutationObserver(() => {
+      darkMode = getIsDarkTheme();
+    });
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
+    return () => observer.disconnect();
+  });
+
+  type ColorVariantLocal = "compact" | "table";
+  let variant = getContext<string>("color-context") as string;
+
+  let currentColor = $derived.by(() => {
+    if (typeof value === "string") return value;
+    const theme = darkMode ? "dark" : "light";
+    return (value as any)[theme];
+  });
+
+  async function handleCopy() {
+    const result = await copyToClipboard(currentColor);
+    if (result === "error") return;
+    copyState = "copied";
+    if (timeoutRef) clearTimeout(timeoutRef);
+    timeoutRef = setTimeout(() => (copyState = "idle"), 2000);
+  }
+
+  $effect(() => {
+    return () => {
+      if (timeoutRef) clearTimeout(timeoutRef);
+    };
+  });
+</script>
+
+<div
+  class={cn(
+    Classes.ColorItem,
+    (variant as string) === "compact" && "flex shrink-0 flex-col gap-2",
+    (variant as string) === "table" && "w-full max-w-[50px] md:max-w-[60px]"
+  )}
+>
+  {#if (variant as string) === "table"}
+    <div title={currentColor} class="contents">
+      <button
+        aria-label={name || `Color ${currentColor}`}
+        aria-pressed={copyState === "copied"}
+        aria-roledescription={copyState === "copied" ? "Copied" : "Copy"}
+        class={cn(
+          "relative flex cursor-copy items-center justify-center rounded-lg border border-stone-200 dark:border-stone-800",
+          (variant as string) === "compact" && "aspect-square max-h-[104px]",
+          (variant as string) === "table" && "aspect-square w-full md:h-10"
+        )}
+        data-component-part="color-item-button"
+        onclick={handleCopy}
+        style={`background-color: ${currentColor}`}
+        type="button"
+      >
+        <svg
+          aria-hidden="true"
+          class={cn(
+            "pointer-events-none absolute inset-0 m-auto opacity-0 transition-opacity duration-100",
+            "filter-[drop-shadow(0_0_2px_rgb(0_0_0/0.1))_drop-shadow(0_0_4px_rgb(0_0_0/0.1))] text-white dark:text-white",
+            copyState === "copied" && "opacity-100"
+          )}
+          fill="currentColor"
+          viewBox="0 0 448 512"
+          width="14"
+          height="14"
+        >
+          <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>
+      </button>
+    </div>
+  {:else}
+    <button
+      aria-label={name || `Color ${currentColor}`}
+      aria-pressed={copyState === "copied"}
+      aria-roledescription={copyState === "copied" ? "Copied" : "Copy"}
+      class={cn(
+        "relative flex cursor-copy items-center justify-center rounded-lg border border-stone-200 dark:border-stone-800",
+        (variant as string) === "compact" && "aspect-square max-h-[104px]",
+        (variant as string) === "table" && "aspect-square w-full md:h-10"
+      )}
+      data-component-part="color-item-button"
+      onclick={handleCopy}
+      style={`background-color: ${currentColor}`}
+      type="button"
+    >
+      <svg
+        aria-hidden="true"
+        class={cn(
+          "pointer-events-none absolute inset-0 m-auto opacity-0 transition-opacity duration-100",
+          "filter-[drop-shadow(0_0_2px_rgb(0_0_0/0.1))_drop-shadow(0_0_4px_rgb(0_0_0/0.1))] text-white dark:text-white",
+          copyState === "copied" && "opacity-100"
+        )}
+        fill="currentColor"
+        viewBox="0 0 448 512"
+        width="14"
+        height="14"
+      >
+        <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>
+    </button>
+  {/if}
+  {#if (variant as string) === "compact"}
+    <div class="flex w-[104px] min-w-0 flex-col gap-0.5">
+      {#if name}
+        <p class="m-0 truncate text-center font-medium text-sm text-stone-900 dark:text-stone-200" data-component-part="color-item-name" title={name}>
+          {name}
+        </p>
+      {/if}
+      <p class="m-0 truncate text-center font-mono text-stone-600 text-xs dark:text-stone-400" data-component-part="color-item-value" title={currentColor}>
+        {currentColor}
+      </p>
+    </div>
+  {/if}
+</div>

package/dist/components/color/ColorItem.svelte.d.ts

@@ -0,0 +1,10 @@
+type ColorItemProps = {
+    value: string | {
+        light: string;
+        dark: string;
+    };
+    name?: string;
+};
+declare const ColorItem: import("svelte").Component<ColorItemProps, {}, "">;
+type ColorItem = ReturnType<typeof ColorItem>;
+export default ColorItem;

package/dist/components/color/ColorRow.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { cn } from "../../utils/cn";
+  import { Classes } from "../../constants/selectors";
+  import type { Snippet } from "svelte";
+
+  type ColorRowProps = {
+    children?: Snippet;
+    title?: string;
+  };
+
+  let { children, title }: ColorRowProps = $props();
+</script>
+
+<div class={cn(Classes.ColorRow, "flex flex-col gap-2 md:flex-row md:items-center")}>
+  {#if title}
+    <div class="w-full shrink-0 md:w-[120px]" data-component-part="color-row-title-container">
+      <p class="m-0 truncate font-medium text-sm text-stone-900 tracking-[-0.1px] dark:text-stone-200" data-component-part="color-row-title" title={title}>
+        {title}
+      </p>
+    </div>
+  {/if}
+  <div class="flex w-full gap-1 md:gap-2" data-component-part="color-row-items-container">
+    {#if children}
+      {@render children()}
+    {/if}
+  </div>
+</div>

package/dist/components/color/ColorRow.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from "svelte";
+type ColorRowProps = {
+    children?: Snippet;
+    title?: string;
+};
+declare const ColorRow: import("svelte").Component<ColorRowProps, {}, "">;
+type ColorRow = ReturnType<typeof ColorRow>;
+export default ColorRow;

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

@@ -0,0 +1 @@
+export declare const Color: any;

package/dist/components/color/index.js

@@ -0,0 +1,8 @@
+import ColorBase from "./Color.svelte";
+import ColorRow from "./ColorRow.svelte";
+import ColorItem from "./ColorItem.svelte";
+// @ts-ignore - Svelte component assignment
+export const Color = Object.assign(ColorBase, {
+    Row: ColorRow,
+    Item: ColorItem,
+});

package/dist/components/columns/Box.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  type BoxProps = {
+    children?: Snippet;
+  };
+
+  let { children }: BoxProps = $props();
+</script>
+
+<div class="flex h-24 items-center justify-center rounded-lg bg-stone-200 text-sm text-stone-500 dark:bg-stone-800">
+  {#if children}
+    {@render children()}
+  {/if}
+</div>

package/dist/components/columns/Box.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from "svelte";
+type BoxProps = {
+    children?: Snippet;
+};
+declare const Box: import("svelte").Component<BoxProps, {}, "">;
+type Box = ReturnType<typeof Box>;
+export default Box;

package/dist/components/columns/Columns.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import { Classes } from "../../constants/selectors";
+  import { cn } from "../../utils/cn";
+  import { DEFAULT_COLS, type ColCount } from "./constants";
+
+  type ColumnsProps = {
+    children?: Snippet;
+    cols?: ColCount | `${ColCount}`;
+    class?: string;
+  };
+
+  let { children, cols = DEFAULT_COLS, class: className }: ColumnsProps = $props();
+
+  let numCols = $derived(Number(cols) || DEFAULT_COLS);
+</script>
+
+<div
+  class={cn(
+    Classes.Columns,
+    "prose dark:prose-invert grid max-w-none gap-4",
+    "sm:grid-cols-[repeat(var(--cols),minmax(0,1fr))]",
+    "@2xl/columns-container:grid-cols-[repeat(var(--cols),minmax(0,1fr))] @[0px]/columns-container:grid-cols-1",
+    className
+  )}
+  style={`--cols: ${numCols}`}
+>
+  {#if children}
+    {@render children()}
+  {/if}
+</div>

package/dist/components/columns/Columns.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from "svelte";
+import { type ColCount } from "./constants";
+type ColumnsProps = {
+    children?: Snippet;
+    cols?: ColCount | `${ColCount}`;
+    class?: string;
+};
+declare const Columns: import("svelte").Component<ColumnsProps, {}, "">;
+type Columns = ReturnType<typeof Columns>;
+export default Columns;

package/dist/components/columns/constants.d.ts

@@ -0,0 +1,5 @@
+declare const COL_OPTIONS: readonly [1, 2, 3, 4];
+type ColCount = (typeof COL_OPTIONS)[number];
+declare const DEFAULT_COLS = 2;
+export { COL_OPTIONS, DEFAULT_COLS };
+export type { ColCount };

package/dist/components/columns/constants.js

@@ -0,0 +1,3 @@
+const COL_OPTIONS = [1, 2, 3, 4];
+const DEFAULT_COLS = 2;
+export { COL_OPTIONS, DEFAULT_COLS };

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

@@ -0,0 +1,5 @@
+import Columns from "./Columns.svelte";
+export { COL_OPTIONS, DEFAULT_COLS } from "./constants";
+export type { ColCount } from "./constants";
+export type { default as ColumnsProps } from "./Columns.svelte";
+export { Columns };

package/dist/components/columns/index.js

@@ -0,0 +1,3 @@
+import Columns from "./Columns.svelte";
+export { COL_OPTIONS, DEFAULT_COLS } from "./constants";
+export { Columns };