kosui 0.1.2 → 0.4.0

package/dist/index.d.ts

@@ -29,7 +29,6 @@ export * from "./markdown/index.js";
 export * from "./menu/index.js";
 export * from "./modal/index.js";
 export * from "./popover/index.js";
-export * from "./portal/index.js";
 export * from "./progress/index.js";
 export * from "./shortcut/index.js";
 export * from "./skeleton/index.js";

package/dist/index.js

@@ -29,7 +29,6 @@ export * from "./markdown/index.js";
 export * from "./menu/index.js";
 export * from "./modal/index.js";
 export * from "./popover/index.js";
-export * from "./portal/index.js";
 export * from "./progress/index.js";
 export * from "./shortcut/index.js";
 export * from "./skeleton/index.js";

package/dist/input/field.d.ts

@@ -0,0 +1,8 @@
+import { type Color, type Shape } from "../base.js";
+export declare const INPUT_VARIANTS: readonly ["outlined", "filled", "plain"];
+export type InputVariant = (typeof INPUT_VARIANTS)[number];
+export declare const fieldClasses: ({ variant, color, shape, }: {
+    variant: InputVariant;
+    color: Color;
+    shape: Shape;
+}) => string;

package/dist/input/field.js

@@ -0,0 +1,7 @@
+import { baseClasses } from "../base.js";
+import { cn } from "../utils.js";
+export const INPUT_VARIANTS = ["outlined", "filled", "plain"];
+export const fieldClasses = ({ variant, color, shape, }) => cn("min-w-0 bg-transparent placeholder:text-m3-on-surface-variant focus-visible:outline-2 disabled:cursor-not-allowed disabled:text-m3-on-surface/38 disabled:placeholder:text-m3-on-surface/38", variant === "outlined" &&
+    "bg-m3-surface-container-lowest outline-1 outline-m3-outline hover:outline-m3-on-surface disabled:outline-m3-on-surface/12", variant === "filled" &&
+    "border-b border-m3-on-surface-variant bg-m3-surface-container-highest hover:border-m3-on-surface disabled:border-m3-on-surface/38 disabled:bg-m3-on-surface/4", color === "primary" && "focus-visible:outline-m3-primary", color === "secondary" && "focus-visible:outline-m3-secondary", color === "tertiary" && "focus-visible:outline-m3-tertiary", color === "error" && "focus-visible:outline-m3-error", (color === "plain" || color === "inherit") &&
+    "focus-visible:outline-current", "user-invalid:border-m3-error user-invalid:outline-m3-error user-invalid:focus-visible:outline-m3-error aria-invalid:border-m3-error aria-invalid:outline-m3-error", baseClasses({ shape }));

package/dist/input/index.d.ts

@@ -1 +1,2 @@
-export { default as Input, INPUT_COLORS, INPUT_RADII, INPUT_SIZES, INPUT_VARIANTS, type InputColor, type InputColorProp, type InputProps, type InputRadius, type InputRadiusProp, type InputSize, type InputSizeProp, type InputVariant, type InputVariantProp, } from "./input.svelte";
+export { INPUT_VARIANTS, type InputVariant } from "./field.js";
+export { default as Input, type InputProps } from "./input.svelte";

package/dist/input/index.js

@@ -1 +1,2 @@
-export { default as Input, INPUT_COLORS, INPUT_RADII, INPUT_SIZES, INPUT_VARIANTS, } from "./input.svelte";
+export { INPUT_VARIANTS } from "./field.js";
+export { default as Input } from "./input.svelte";

package/dist/input/input.svelte

@@ -1,54 +1,36 @@
 <script lang="ts" module>
-  import {
-    COLORS,
-    RADII,
-    SIZES,
-    type Color,
-    type ColorProp,
-    type Radius,
-    type RadiusProp,
-    type Size,
-    type SizeProp,
-  } from "../base.js";
-  import { noop, type ClassName, type ElementRef } from "../utils.js";
+  import type { ColorProp, ShapeProp, Size, SizeProp } from "../base.js";
+  import { fieldClasses, type InputVariant } from "./field.js";
+  import { cn, type ClassName } from "../utils.js";
   import type { HTMLInputAttributes } from "svelte/elements";
-  import { twMerge } from "tailwind-merge";
 
-  export const INPUT_VARIANTS = ["outlined", "filled", "inherit"] as const;
-  export type InputVariant = (typeof INPUT_VARIANTS)[number];
-  export type InputVariantProp = { variant?: InputVariant };
-
-  export const INPUT_COLORS = COLORS;
-  export type InputColor = Color;
-  export type InputColorProp = ColorProp;
-
-  export const INPUT_SIZES = SIZES;
-  export type InputSize = Size;
-  export type InputSizeProp = SizeProp;
-
-  export const INPUT_RADII = RADII;
-  export type InputRadius = Radius;
-  export type InputRadiusProp = RadiusProp;
-
-  export type InputProps = ElementRef &
-    ClassName &
-    InputVariantProp &
-    InputSizeProp &
-    InputRadiusProp &
-    InputColorProp &
-    Omit<HTMLInputAttributes, "size">;
+  export type InputProps = {
+    variant?: InputVariant;
+    el?: HTMLInputElement;
+  } & ClassName &
+    ColorProp &
+    SizeProp &
+    ShapeProp &
+    Omit<HTMLInputAttributes, "size" | "class">;
+
+  const SIZES: Record<Size, string> = {
+    xs: "h-7 px-2.5 text-xs",
+    sm: "h-9 px-3 text-sm",
+    md: "h-11 px-3.5 text-base",
+    lg: "h-13 px-4 text-lg",
+    xl: "h-15 px-5 text-xl",
+  };
 </script>
 
 <script lang="ts">
   let {
     value = $bindable(),
     el = $bindable(),
-    ref = noop,
     class: className,
     variant = "outlined",
     color = "primary",
     size = "sm",
-    radius = "md",
+    shape = "xs",
     ...restProps
   }: InputProps = $props();
 </script>
@@ -56,33 +38,6 @@
 <input
   bind:value
   bind:this={el}
-  use:ref
-  class={twMerge(
-    "disabled:cursor-not-allowed disabled:bg-m3-on-surface/12 disabled:text-m3-on-surface/38",
-
-    variant === "outlined" &&
-      "bg-m3-surface-container-lowest outline-1 outline-m3-outline-variant hover:outline-m3-outline/80 disabled:hover:outline-m3-outline-variant",
-    variant === "filled" &&
-      "bg-m3-surface-container hover:bg-m3-surface-container-high focus:outline-1",
-
-    color === "primary" && "focus-visible:outline-m3-primary",
-    color === "secondary" && "focus-visible:outline-m3-secondary",
-    color === "tertiary" && "focus-visible:outline-m3-tertiary",
-    color === "error" && "focus-visible:outline-m3-error",
-
-    size === "xs" && "px-2.5 py-1.5 text-xs",
-    size === "sm" && "px-3 py-1.5 text-sm",
-    size === "md" && "px-3.5 py-2 text-base",
-    size === "lg" && "px-4 py-2.5 text-lg",
-    size === "xl" && "px-5 py-4 text-xl",
-
-    radius == "xs" && "rounded-xs",
-    radius == "sm" && "rounded-sm",
-    radius == "md" && "rounded-lg",
-    radius == "lg" && "rounded-2xl",
-    radius == "xl" && "rounded-4xl",
-
-    className,
-  )}
+  class={cn(fieldClasses({ variant, color, shape }), SIZES[size], className)}
   {...restProps}
 />

package/dist/input/input.svelte.d.ts

@@ -1,21 +1,11 @@
-import { type Color, type ColorProp, type Radius, type RadiusProp, type Size, type SizeProp } from "../base.js";
-import { type ClassName, type ElementRef } from "../utils.js";
+import type { ColorProp, ShapeProp, SizeProp } from "../base.js";
+import { type InputVariant } from "./field.js";
+import { type ClassName } from "../utils.js";
 import type { HTMLInputAttributes } from "svelte/elements";
-export declare const INPUT_VARIANTS: readonly ["outlined", "filled", "inherit"];
-export type InputVariant = (typeof INPUT_VARIANTS)[number];
-export type InputVariantProp = {
+export type InputProps = {
     variant?: InputVariant;
-};
-export declare const INPUT_COLORS: readonly ["primary", "secondary", "tertiary", "error", "plain", "inherit"];
-export type InputColor = Color;
-export type InputColorProp = ColorProp;
-export declare const INPUT_SIZES: readonly ["xs", "sm", "md", "lg", "xl"];
-export type InputSize = Size;
-export type InputSizeProp = SizeProp;
-export declare const INPUT_RADII: readonly ["none", "xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "full"];
-export type InputRadius = Radius;
-export type InputRadiusProp = RadiusProp;
-export type InputProps = ElementRef & ClassName & InputVariantProp & InputSizeProp & InputRadiusProp & InputColorProp & Omit<HTMLInputAttributes, "size">;
+    el?: HTMLInputElement;
+} & ClassName & ColorProp & SizeProp & ShapeProp & Omit<HTMLInputAttributes, "size" | "class">;
 declare const Input: import("svelte").Component<InputProps, {}, "el" | "value">;
 type Input = ReturnType<typeof Input>;
 export default Input;

package/dist/link/link.svelte

@@ -1,61 +1,52 @@
 <script module lang="ts">
-  import { baseClasses, type Variants } from "../base.js";
-  import { noop, type ClassName, type ElementRef } from "../utils.js";
+  import {
+    baseClasses,
+    type ColorProp,
+    type UnderlineProp,
+  } from "../base.js";
+  import { cn, type ClassName, type ElementRef } from "../utils.js";
   import type { Snippet } from "svelte";
-  import type {
-    HTMLAnchorAttributes,
-    HTMLButtonAttributes,
-  } from "svelte/elements";
-  import { twMerge } from "tailwind-merge";
+  import type { HTMLAnchorAttributes } from "svelte/elements";
 
   export type LinkProps = {
+    href: string;
     children: Snippet;
   } & ElementRef &
     ClassName &
-    Variants &
-    HTMLButtonAttributes &
-    HTMLAnchorAttributes;
+    ColorProp &
+    UnderlineProp &
+    Omit<HTMLAnchorAttributes, "href">;
 </script>
 
 <script lang="ts">
   let {
+    href,
     children,
     el = $bindable(),
-    ref = noop,
     class: className,
-    variant = "text",
     color = "primary",
-    shape = "rounded",
-    underline = "hover",
-    href,
+    underline = "always",
     ...props
   }: LinkProps = $props();
-
-  const classes = $derived(
-    twMerge(
-      baseClasses({
-        variant,
-        color,
-        shape,
-        underline,
-        hover: true,
-        focus: true,
-      }),
-      variant !== "text" &&
-        "flex h-9 items-center justify-center gap-2 text-nowrap transition-all active:scale-95",
-      "cursor-pointer",
-      className,
-    ),
-  );
 </script>
 
-{#if href}
-  <!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
-  <a bind:this={el} use:ref class={classes} {href} {...props}>
-    {@render children()}
-  </a>
-{:else}
-  <button bind:this={el} use:ref class={classes} {...props}>
-    {@render children()}
-  </button>
-{/if}
+<!-- eslint-disable svelte/no-navigation-without-resolve -->
+<a
+  bind:this={el}
+  {href}
+  class={cn(
+    baseClasses({
+      variant: "text",
+      color,
+      shape: "xs",
+      underline,
+      hover: true,
+      focus: true,
+    }),
+    className,
+  )}
+  {...props}
+>
+  {@render children()}
+</a>
+<!-- eslint-enable svelte/no-navigation-without-resolve -->

package/dist/link/link.svelte.d.ts

@@ -1,10 +1,11 @@
-import { type Variants } from "../base.js";
+import { type ColorProp, type UnderlineProp } from "../base.js";
 import { type ClassName, type ElementRef } from "../utils.js";
 import type { Snippet } from "svelte";
-import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
+import type { HTMLAnchorAttributes } from "svelte/elements";
 export type LinkProps = {
+    href: string;
     children: Snippet;
-} & ElementRef & ClassName & Variants & HTMLButtonAttributes & HTMLAnchorAttributes;
+} & ElementRef & ClassName & ColorProp & UnderlineProp & Omit<HTMLAnchorAttributes, "href">;
 declare const Link: import("svelte").Component<LinkProps, {}, "el">;
 type Link = ReturnType<typeof Link>;
 export default Link;

package/dist/markdown/index.d.ts

@@ -1,25 +1,2 @@
-export { default as MarkdownBlockquote } from "./markdown-blockquote.svelte";
-export { default as MarkdownBr } from "./markdown-br.svelte";
-export { default as MarkdownCode } from "./markdown-code.svelte";
-export { default as MarkdownCodespan } from "./markdown-codespan.svelte";
-export { getMarkdownContext, MarkdownContext, setMarkdownContext, type MarkdownComponentProps, } from "./markdown-context.svelte";
-export { default as MarkdownDef } from "./markdown-def.svelte";
-export { default as MarkdownDel } from "./markdown-del.svelte";
-export { default as MarkdownEm } from "./markdown-em.svelte";
-export { default as MarkdownEscape } from "./markdown-escape.svelte";
-export { default as MarkdownHeading } from "./markdown-heading.svelte";
-export { default as MarkdownHr } from "./markdown-hr.svelte";
-export { default as MarkdownHtml } from "./markdown-html.svelte";
-export { default as MarkdownImage } from "./markdown-image.svelte";
-export { default as MarkdownLink } from "./markdown-link.svelte";
-export { default as MarkdownListItem } from "./markdown-list-item.svelte";
-export { default as MarkdownList } from "./markdown-list.svelte";
-export { default as MarkdownParagraph } from "./markdown-paragraph.svelte";
-export { default as MarkdownSpace } from "./markdown-space.svelte";
-export { default as MarkdownStrong } from "./markdown-strong.svelte";
-export { default as MarkdownTableCell } from "./markdown-table-cell.svelte";
-export { default as MarkdownTable } from "./markdown-table.svelte";
-export { default as MarkdownText } from "./markdown-text.svelte";
-export { default as MarkdownToken } from "./markdown-token.svelte";
-export { default as MarkdownTokens } from "./markdown-tokens.svelte";
-export { default as Markdown } from "./markdown.svelte";
+export { default as Markdown, type MarkdownProps } from "./markdown.svelte";
+export type { MarkdownRenderers, MarkdownSnippetProps } from "./types.js";

package/dist/markdown/index.js

@@ -1,25 +1 @@
-export { default as MarkdownBlockquote } from "./markdown-blockquote.svelte";
-export { default as MarkdownBr } from "./markdown-br.svelte";
-export { default as MarkdownCode } from "./markdown-code.svelte";
-export { default as MarkdownCodespan } from "./markdown-codespan.svelte";
-export { getMarkdownContext, MarkdownContext, setMarkdownContext, } from "./markdown-context.svelte";
-export { default as MarkdownDef } from "./markdown-def.svelte";
-export { default as MarkdownDel } from "./markdown-del.svelte";
-export { default as MarkdownEm } from "./markdown-em.svelte";
-export { default as MarkdownEscape } from "./markdown-escape.svelte";
-export { default as MarkdownHeading } from "./markdown-heading.svelte";
-export { default as MarkdownHr } from "./markdown-hr.svelte";
-export { default as MarkdownHtml } from "./markdown-html.svelte";
-export { default as MarkdownImage } from "./markdown-image.svelte";
-export { default as MarkdownLink } from "./markdown-link.svelte";
-export { default as MarkdownListItem } from "./markdown-list-item.svelte";
-export { default as MarkdownList } from "./markdown-list.svelte";
-export { default as MarkdownParagraph } from "./markdown-paragraph.svelte";
-export { default as MarkdownSpace } from "./markdown-space.svelte";
-export { default as MarkdownStrong } from "./markdown-strong.svelte";
-export { default as MarkdownTableCell } from "./markdown-table-cell.svelte";
-export { default as MarkdownTable } from "./markdown-table.svelte";
-export { default as MarkdownText } from "./markdown-text.svelte";
-export { default as MarkdownToken } from "./markdown-token.svelte";
-export { default as MarkdownTokens } from "./markdown-tokens.svelte";
 export { default as Markdown } from "./markdown.svelte";

package/dist/markdown/markdown-tokens.svelte

@@ -1,13 +1,173 @@
-<script lang="ts">
-  import { MarkdownToken } from "./index.js";
-  import type { MarkedToken } from "marked";
+<script module lang="ts">
+  import { Link } from "../link/index.js";
+  import { cn } from "../utils.js";
+  import type { MarkedToken, Tokens } from "marked";
+  import type { Snippet } from "svelte";
+  import type { MarkdownRenderers, MarkdownSnippetProps } from "./types.js";
 
   export type MarkdownTokensProps = {
     tokens: MarkedToken[];
+    renderers: MarkdownRenderers;
   };
-  let { tokens }: MarkdownTokensProps = $props();
+
+  type AnyRenderer = Snippet<[MarkdownSnippetProps<MarkedToken>]>;
+
+  const HEADINGS = ["text-2xl", "text-xl", "text-lg"];
+
+  function rendererFor(token: MarkedToken, renderers: MarkdownRenderers) {
+    const name = token.type === "list_item" ? "listItem" : token.type;
+    return (renderers as Record<string, AnyRenderer | undefined>)[name];
+  }
+
+  function language(info: string | undefined) {
+    const name = info?.split(/\s/)[0];
+    return name ? `language-${name}` : undefined;
+  }
 </script>
 
-{#each tokens as token (token)}
-  <MarkdownToken {token} />
+<script lang="ts">
+  import Self from "./markdown-tokens.svelte";
+
+  let { tokens, renderers }: MarkdownTokensProps = $props();
+</script>
+
+{#snippet cell(token: Tokens.TableCell)}
+  {#snippet children()}
+    <Self tokens={token.tokens as MarkedToken[]} {renderers} />
+  {/snippet}
+  {#if renderers.tableCell}
+    {@render renderers.tableCell({ token, children })}
+  {:else}
+    <svelte:element
+      this={token.header ? "th" : "td"}
+      style:text-align={token.align}
+      class={cn(
+        "border border-m3-outline-variant px-3 py-1.5 text-start",
+        token.header && "bg-m3-surface-container font-medium",
+      )}
+    >
+      {@render children()}
+    </svelte:element>
+  {/if}
+{/snippet}
+
+{#snippet defaultRenderer({
+  token,
+  children,
+}: MarkdownSnippetProps<MarkedToken>)}
+  {#if token.type === "blockquote"}
+    <blockquote
+      class="flex flex-col gap-3 border-l-4 border-m3-outline-variant pl-4 text-m3-on-surface-variant"
+    >
+      {@render children()}
+    </blockquote>
+  {:else if token.type === "br"}
+    <br />
+  {:else if token.type === "checkbox"}
+    <input
+      type="checkbox"
+      checked={token.checked}
+      disabled
+      class="mr-2 size-4 align-[-0.125em] accent-m3-primary"
+    />
+  {:else if token.type === "code"}
+    <pre
+      class="overflow-x-auto rounded-md bg-m3-surface-container p-3 text-sm"><code
+        class={language(token.lang)}>{token.text}</code
+      ></pre>
+  {:else if token.type === "codespan"}
+    <code class="rounded-sm bg-m3-surface-container px-1 py-0.5 text-[0.875em]"
+      >{token.text}</code
+    >
+  {:else if token.type === "del"}
+    <del>{@render children()}</del>
+  {:else if token.type === "em"}
+    <em>{@render children()}</em>
+  {:else if token.type === "heading"}
+    <svelte:element
+      this={`h${token.depth}`}
+      class={cn("font-medium", HEADINGS[token.depth - 1] ?? "text-base")}
+    >
+      {@render children()}
+    </svelte:element>
+  {:else if token.type === "hr"}
+    <hr class="border-m3-outline-variant" />
+  {:else if token.type === "image"}
+    {#if token.href}
+      <img
+        src={token.href}
+        alt={token.text}
+        title={token.title}
+        loading="lazy"
+        class="inline max-w-full"
+      />
+    {:else}
+      {token.text}
+    {/if}
+  {:else if token.type === "link"}
+    {#if token.href}
+      <Link href={token.href} title={token.title}>{@render children()}</Link>
+    {:else}
+      {@render children()}
+    {/if}
+  {:else if token.type === "list"}
+    <svelte:element
+      this={token.ordered ? "ol" : "ul"}
+      start={token.ordered && token.start !== 1
+        ? token.start || undefined
+        : undefined}
+      class={cn("space-y-1 pl-6", token.ordered ? "list-decimal" : "list-disc")}
+    >
+      {@render children()}
+    </svelte:element>
+  {:else if token.type === "list_item"}
+    <li class={cn("space-y-2", token.task && "list-none")}>
+      {@render children()}
+    </li>
+  {:else if token.type === "paragraph"}
+    <p>{@render children()}</p>
+  {:else if token.type === "strong"}
+    <strong>{@render children()}</strong>
+  {:else if token.type === "table"}
+    <div class="overflow-x-auto">
+      <table class="border-collapse text-sm">
+        {@render children()}
+      </table>
+    </div>
+  {:else if token.type !== "def" && token.type !== "space"}
+    {@render children()}
+  {/if}
+{/snippet}
+
+{#each tokens as token, index (index)}
+  {#snippet children()}
+    {#if token.type === "list"}
+      <Self tokens={token.items as MarkedToken[]} {renderers} />
+    {:else if token.type === "table"}
+      <thead>
+        <tr>
+          {#each token.header as header, column (column)}
+            {@render cell(header)}
+          {/each}
+        </tr>
+      </thead>
+      <tbody>
+        {#each token.rows as row, rowIndex (rowIndex)}
+          <tr>
+            {#each row as data, column (column)}
+              {@render cell(data)}
+            {/each}
+          </tr>
+        {/each}
+      </tbody>
+    {:else if "tokens" in token && token.tokens}
+      <Self tokens={token.tokens as MarkedToken[]} {renderers} />
+    {:else if "text" in token}
+      {token.text}
+    {/if}
+  {/snippet}
+  {@render (rendererFor(token, renderers) ?? defaultRenderer)({
+    token,
+    children,
+  })}
 {/each}

package/dist/markdown/markdown-tokens.svelte.d.ts

@@ -1,6 +1,8 @@
 import type { MarkedToken } from "marked";
+import type { MarkdownRenderers } from "./types.js";
 export type MarkdownTokensProps = {
     tokens: MarkedToken[];
+    renderers: MarkdownRenderers;
 };
 declare const MarkdownTokens: import("svelte").Component<MarkdownTokensProps, {}, "">;
 type MarkdownTokens = ReturnType<typeof MarkdownTokens>;