plasma-svelte 0.0.1

package/dist/input/Input.svelte

@@ -0,0 +1,227 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLInputAttributes } from "svelte/elements";
+
+  type InputSize = "sm" | "md" | "lg" | "small" | "medium" | "large";
+
+  interface Props extends Omit<HTMLInputAttributes, "size" | "prefix"> {
+    value?: string | number;
+    size?: InputSize;
+    invalid?: boolean;
+    clearable?: boolean;
+    prefix?: Snippet;
+    suffix?: Snippet;
+  }
+
+  let {
+    value = $bindable(""),
+    size = "md",
+    type = "text",
+    placeholder = "",
+    disabled = false,
+    readonly = false,
+    invalid = false,
+    clearable = false,
+    prefix,
+    suffix,
+    class: customClass = "",
+    ...restProps
+  }: Props = $props();
+
+  // Normalize size strings
+  const resolvedSize = $derived(
+    size === "small"
+      ? "sm"
+      : size === "large"
+        ? "lg"
+        : size === "medium"
+          ? "md"
+          : size,
+  );
+
+  function handleClear() {
+    value = "";
+  }
+</script>
+
+<div
+  class="plasma-input-container plasma-input--{resolvedSize} {customClass}"
+  class:plasma-input--disabled={disabled}
+  class:plasma-input--invalid={invalid}
+  class:plasma-input--readonly={readonly}
+>
+  {#if prefix}
+    <div class="plasma-input-prefix">
+      {@render prefix()}
+    </div>
+  {/if}
+
+  <input
+    {type}
+    {placeholder}
+    {disabled}
+    {readonly}
+    bind:value
+    class="plasma-input-field"
+    {...restProps}
+  />
+
+  {#if clearable && value && !disabled && !readonly}
+    <button
+      type="button"
+      class="plasma-input-clear-btn"
+      onclick={handleClear}
+      tabindex="-1"
+      aria-label="Clear input"
+    >
+      <svg
+        role="img"
+        aria-label="prefix-icon"
+        viewBox="0 0 16 16"
+        width="12"
+        height="12"
+        fill="currentColor"
+      >
+        <path
+          d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"
+        />
+      </svg>
+    </button>
+  {/if}
+
+  {#if suffix}
+    <div class="plasma-input-suffix">
+      {@render suffix()}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .plasma-input-container {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    width: 100%;
+    box-sizing: border-box;
+    font-family: var(--plasma-font-sans);
+    background-color: var(--plasma-color-view-bg);
+    border: 1px solid var(--plasma-color-border);
+    border-radius: var(--plasma-radius-md);
+    color: var(--plasma-color-text);
+    transition: var(--plasma-transition-fast);
+  }
+
+  .plasma-input-container:hover:not(.plasma-input--disabled):not(
+      :focus-within
+    ) {
+    border-color: var(--plasma-color-border-hover);
+  }
+
+  .plasma-input-container:focus-within:not(.plasma-input--disabled) {
+    border-color: var(--plasma-color-highlight);
+    box-shadow: var(--plasma-shadow-focus);
+  }
+
+  /* --------------------------------------------------------------------------
+     Invalid State
+     -------------------------------------------------------------------------- */
+  .plasma-input-container.plasma-input--invalid {
+    border-color: var(--plasma-color-negative);
+  }
+
+  .plasma-input-container.plasma-input--invalid:focus-within {
+    box-shadow: 0 0 0 2px rgba(218, 68, 83, 0.35);
+  }
+
+  /* --------------------------------------------------------------------------
+     Inner Input Field
+     -------------------------------------------------------------------------- */
+  .plasma-input-field {
+    width: 100%;
+    flex: 1;
+    min-width: 0;
+    border: none;
+    outline: none;
+    background: transparent;
+    color: inherit;
+    font-family: inherit;
+    font-size: inherit;
+    line-height: 1.5;
+    padding: 0;
+  }
+  /* --------------------------------------------------------------------------
+     Disabled & Readonly
+     -------------------------------------------------------------------------- */
+  .plasma-input-container.plasma-input--disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+    background-color: var(--plasma-color-surface-sunken);
+  }
+
+  .plasma-input-container.plasma-input--disabled .plasma-input-field {
+    cursor: not-allowed;
+  }
+
+  .plasma-input-container.plasma-input--readonly {
+    background-color: var(--plasma-color-surface-sunken);
+  }
+
+  .plasma-input-field::placeholder {
+    color: var(--plasma-color-text-muted);
+    opacity: 0.75;
+  }
+
+  /* --------------------------------------------------------------------------
+     Prefix, Suffix & Clear Button
+     -------------------------------------------------------------------------- */
+  .plasma-input-prefix,
+  .plasma-input-suffix {
+    display: inline-flex;
+    align-items: center;
+    color: var(--plasma-color-text-muted);
+    flex-shrink: 0;
+  }
+
+  .plasma-input-clear-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    border: none;
+    color: var(--plasma-color-text-muted);
+    cursor: pointer;
+    padding: 2px;
+    border-radius: var(--plasma-radius-full);
+    transition: var(--plasma-transition-fast);
+    flex-shrink: 0;
+  }
+
+  .plasma-input-clear-btn:hover {
+    color: var(--plasma-color-text);
+    background-color: var(--plasma-color-surface-hover);
+  }
+
+  /* --------------------------------------------------------------------------
+     Sizing
+     -------------------------------------------------------------------------- */
+  .plasma-input--sm {
+    height: var(--plasma-control-height-sm);
+    padding: 0 var(--plasma-space-sm);
+    font-size: var(--plasma-font-size-xs);
+    gap: var(--plasma-space-2xs);
+  }
+
+  .plasma-input--md {
+    height: var(--plasma-control-height-md);
+    padding: 0 var(--plasma-space-md);
+    font-size: var(--plasma-font-size-base);
+    gap: var(--plasma-space-xs);
+  }
+
+  .plasma-input--lg {
+    height: var(--plasma-control-height-lg);
+    padding: 0 var(--plasma-space-lg);
+    font-size: var(--plasma-font-size-md);
+    gap: var(--plasma-space-sm);
+  }
+</style>

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

@@ -0,0 +1,14 @@
+import type { Snippet } from "svelte";
+import type { HTMLInputAttributes } from "svelte/elements";
+type InputSize = "sm" | "md" | "lg" | "small" | "medium" | "large";
+interface Props extends Omit<HTMLInputAttributes, "size" | "prefix"> {
+    value?: string | number;
+    size?: InputSize;
+    invalid?: boolean;
+    clearable?: boolean;
+    prefix?: Snippet;
+    suffix?: Snippet;
+}
+declare const Input: import("svelte").Component<Props, {}, "value">;
+type Input = ReturnType<typeof Input>;
+export default Input;

package/dist/layout/Flex.svelte

@@ -0,0 +1,110 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+  import { resolveSpacing, type PlasmaSpacing } from "./utils.js";
+
+  type FlexDirection = "row" | "column" | "row-reverse" | "column-reverse";
+  type FlexJustify =
+    | "start"
+    | "end"
+    | "center"
+    | "between"
+    | "around"
+    | "evenly"
+    | "flex-start"
+    | "flex-end"
+    | "space-between"
+    | "space-around"
+    | "space-evenly";
+  type FlexAlign =
+    | "start"
+    | "end"
+    | "center"
+    | "baseline"
+    | "stretch"
+    | "flex-start"
+    | "flex-end";
+  type FlexWrap = boolean | "wrap" | "nowrap" | "wrap-reverse";
+
+  interface Props extends HTMLAttributes<HTMLDivElement> {
+    vertical?: boolean;
+    direction?: FlexDirection;
+    justify?: FlexJustify;
+    align?: FlexAlign;
+    wrap?: FlexWrap;
+    gap?: PlasmaSpacing;
+    inline?: boolean;
+    children?: Snippet;
+  }
+
+  let {
+    vertical = false,
+    direction,
+    justify,
+    align,
+    wrap = false,
+    gap = "sm",
+    inline = false,
+    children,
+    class: customClass = "",
+    style = "",
+    ...restProps
+  }: Props = $props();
+
+  const resolvedDirection = $derived(
+    direction || (vertical ? "column" : "row")
+  );
+
+  const resolvedJustify = $derived.by(() => {
+    if (!justify) return undefined;
+    switch (justify) {
+      case "start": return "flex-start";
+      case "end": return "flex-end";
+      case "between": return "space-between";
+      case "around": return "space-around";
+      case "evenly": return "space-evenly";
+      default: return justify;
+    }
+  });
+
+  const resolvedAlign = $derived.by(() => {
+    if (!align) return undefined;
+    switch (align) {
+      case "start": return "flex-start";
+      case "end": return "flex-end";
+      default: return align;
+    }
+  });
+
+  const resolvedWrap = $derived.by(() => {
+    if (typeof wrap === "boolean") return wrap ? "wrap" : "nowrap";
+    return wrap;
+  });
+
+  const resolvedGap = $derived(resolveSpacing(gap));
+
+  const computedStyle = $derived.by(() => {
+    const rules: string[] = [];
+    rules.push(`display: ${inline ? "inline-flex" : "flex"};`);
+    rules.push(`flex-direction: ${resolvedDirection};`);
+    if (resolvedJustify) rules.push(`justify-content: ${resolvedJustify};`);
+    if (resolvedAlign) rules.push(`align-items: ${resolvedAlign};`);
+    if (resolvedWrap) rules.push(`flex-wrap: ${resolvedWrap};`);
+    if (resolvedGap) rules.push(`gap: ${resolvedGap};`);
+    return `${rules.join(" ")} ${style}`;
+  });
+</script>
+
+<div
+  class="plasma-flex {customClass}"
+  style={computedStyle}
+  {...restProps}
+>
+  {@render children?.()}
+</div>
+
+<style>
+  .plasma-flex {
+    box-sizing: border-box;
+  }
+</style>

package/dist/layout/Flex.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+import { type PlasmaSpacing } from "./utils.js";
+type FlexDirection = "row" | "column" | "row-reverse" | "column-reverse";
+type FlexJustify = "start" | "end" | "center" | "between" | "around" | "evenly" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly";
+type FlexAlign = "start" | "end" | "center" | "baseline" | "stretch" | "flex-start" | "flex-end";
+type FlexWrap = boolean | "wrap" | "nowrap" | "wrap-reverse";
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    vertical?: boolean;
+    direction?: FlexDirection;
+    justify?: FlexJustify;
+    align?: FlexAlign;
+    wrap?: FlexWrap;
+    gap?: PlasmaSpacing;
+    inline?: boolean;
+    children?: Snippet;
+}
+declare const Flex: import("svelte").Component<Props, {}, "">;
+type Flex = ReturnType<typeof Flex>;
+export default Flex;

package/dist/layout/Grid.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+  import { resolveSpacing, type PlasmaSpacing } from "./utils.js";
+
+  type GridAlign = "start" | "end" | "center" | "stretch";
+  type GridJustify = "start" | "end" | "center" | "stretch";
+
+  interface Props extends HTMLAttributes<HTMLDivElement> {
+    cols?: number | string;
+    rows?: number | string;
+    gap?: PlasmaSpacing;
+    rowGap?: PlasmaSpacing;
+    colGap?: PlasmaSpacing;
+    align?: GridAlign;
+    justify?: GridJustify;
+    inline?: boolean;
+    children?: Snippet;
+  }
+
+  let {
+    cols = 1,
+    rows,
+    gap = "md",
+    rowGap,
+    colGap,
+    align,
+    justify,
+    inline = false,
+    children,
+    class: customClass = "",
+    style = "",
+    ...restProps
+  }: Props = $props();
+
+  const resolvedCols = $derived.by(() => {
+    if (typeof cols === "number") return `repeat(${cols}, minmax(0, 1fr))`;
+    return cols;
+  });
+
+  const resolvedRows = $derived.by(() => {
+    if (rows === undefined) return undefined;
+    if (typeof rows === "number") return `repeat(${rows}, minmax(0, 1fr))`;
+    return rows;
+  });
+
+  const resolvedGap = $derived(resolveSpacing(gap));
+  const resolvedRowGap = $derived(resolveSpacing(rowGap));
+  const resolvedColGap = $derived(resolveSpacing(colGap));
+
+  const computedStyle = $derived.by(() => {
+    const rules: string[] = [];
+    rules.push(`display: ${inline ? "inline-grid" : "grid"};`);
+    if (resolvedCols) rules.push(`grid-template-columns: ${resolvedCols};`);
+    if (resolvedRows) rules.push(`grid-template-rows: ${resolvedRows};`);
+    if (resolvedRowGap) rules.push(`row-gap: ${resolvedRowGap};`);
+    if (resolvedColGap) rules.push(`column-gap: ${resolvedColGap};`);
+    if (!resolvedRowGap && !resolvedColGap && resolvedGap) rules.push(`gap: ${resolvedGap};`);
+    if (align) rules.push(`align-items: ${align};`);
+    if (justify) rules.push(`justify-items: ${justify};`);
+    return `${rules.join(" ")} ${style}`;
+  });
+</script>
+
+<div
+  class="plasma-grid {customClass}"
+  style={computedStyle}
+  {...restProps}
+>
+  {@render children?.()}
+</div>
+
+<style>
+  .plasma-grid {
+    box-sizing: border-box;
+    width: 100%;
+  }
+</style>

package/dist/layout/Grid.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+import { type PlasmaSpacing } from "./utils.js";
+type GridAlign = "start" | "end" | "center" | "stretch";
+type GridJustify = "start" | "end" | "center" | "stretch";
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    cols?: number | string;
+    rows?: number | string;
+    gap?: PlasmaSpacing;
+    rowGap?: PlasmaSpacing;
+    colGap?: PlasmaSpacing;
+    align?: GridAlign;
+    justify?: GridJustify;
+    inline?: boolean;
+    children?: Snippet;
+}
+declare const Grid: import("svelte").Component<Props, {}, "">;
+type Grid = ReturnType<typeof Grid>;
+export default Grid;

package/dist/layout/Space.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+  import { resolveSpacing, type PlasmaSpacing } from "./utils.js";
+
+  type SpaceDirection = "horizontal" | "vertical";
+  type SpaceAlign = "start" | "end" | "center" | "baseline";
+
+  interface Props extends HTMLAttributes<HTMLDivElement> {
+    direction?: SpaceDirection;
+    size?: PlasmaSpacing;
+    align?: SpaceAlign;
+    wrap?: boolean;
+    inline?: boolean;
+    children?: Snippet;
+  }
+
+  let {
+    direction = "horizontal",
+    size = "sm",
+    align,
+    wrap = false,
+    inline = true,
+    children,
+    class: customClass = "",
+    style = "",
+    ...restProps
+  }: Props = $props();
+
+  const resolvedAlign = $derived.by(() => {
+    if (align) {
+      if (align === "start") return "flex-start";
+      if (align === "end") return "flex-end";
+      return align;
+    }
+    return direction === "horizontal" ? "center" : "stretch";
+  });
+
+  const resolvedSize = $derived(resolveSpacing(size));
+
+  const computedStyle = $derived.by(() => {
+    const rules: string[] = [];
+    rules.push(`display: ${inline ? "inline-flex" : "flex"};`);
+    rules.push(`flex-direction: ${direction === "vertical" ? "column" : "row"};`);
+    rules.push(`align-items: ${resolvedAlign};`);
+    if (wrap) rules.push("flex-wrap: wrap;");
+    if (resolvedSize) rules.push(`gap: ${resolvedSize};`);
+    return `${rules.join(" ")} ${style}`;
+  });
+</script>
+
+<div
+  class="plasma-space {customClass}"
+  style={computedStyle}
+  {...restProps}
+>
+  {@render children?.()}
+</div>
+
+<style>
+  .plasma-space {
+    box-sizing: border-box;
+  }
+</style>

package/dist/layout/Space.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+import { type PlasmaSpacing } from "./utils.js";
+type SpaceDirection = "horizontal" | "vertical";
+type SpaceAlign = "start" | "end" | "center" | "baseline";
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    direction?: SpaceDirection;
+    size?: PlasmaSpacing;
+    align?: SpaceAlign;
+    wrap?: boolean;
+    inline?: boolean;
+    children?: Snippet;
+}
+declare const Space: import("svelte").Component<Props, {}, "">;
+type Space = ReturnType<typeof Space>;
+export default Space;

package/dist/layout/utils.d.ts

@@ -0,0 +1,2 @@
+export type PlasmaSpacing = "none" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | number | string;
+export declare function resolveSpacing(val?: PlasmaSpacing): string | undefined;

package/dist/layout/utils.js

@@ -0,0 +1,19 @@
+export function resolveSpacing(val) {
+    if (val === undefined)
+        return undefined;
+    if (val === "none" || val === 0)
+        return "0px";
+    if (val === "2xs" ||
+        val === "xs" ||
+        val === "sm" ||
+        val === "md" ||
+        val === "lg" ||
+        val === "xl" ||
+        val === "2xl") {
+        return `var(--plasma-space-${val})`;
+    }
+    if (typeof val === "number") {
+        return `${val}px`;
+    }
+    return val;
+}