plasma-svelte 0.0.1

package/dist/card/Card.svelte

@@ -0,0 +1,191 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  type CardPadding = "none" | "sm" | "md" | "lg";
+  type CardVariant = "default" | "flat" | "sunken" | "floating";
+  type CardOrientation = "vertical" | "horizontal";
+
+  interface Props extends HTMLAttributes<HTMLDivElement> {
+    variant?: CardVariant;
+    padding?: CardPadding;
+    orientation?: CardOrientation;
+    hoverable?: boolean;
+    header?: Snippet;
+    footer?: Snippet;
+    children?: Snippet;
+    bodyClass?: string;
+  }
+
+  let {
+    variant = "default",
+    padding = "md",
+    orientation = "vertical",
+    hoverable = false,
+    header,
+    footer,
+    children,
+    class: customClass = "",
+    bodyClass = "",
+    ...restProps
+  }: Props = $props();
+</script>
+
+<div
+  class="plasma-card plasma-card--{variant} plasma-card--{orientation} plasma-card--padding-{padding} {customClass}"
+  class:plasma-card--hoverable={hoverable}
+  {...restProps}
+>
+  {#if header}
+    <div class="plasma-card-header">
+      {@render header()}
+    </div>
+  {/if}
+
+  {#if children}
+    <div class="plasma-card-body {bodyClass}">
+      {@render children()}
+    </div>
+  {/if}
+
+  {#if footer}
+    <div class="plasma-card-footer">
+      {@render footer()}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .plasma-card {
+    position: relative;
+    display: flex;
+    box-sizing: border-box;
+    font-family: var(--plasma-font-sans);
+    color: var(--plasma-color-text);
+    border-radius: var(--plasma-radius-lg);
+    border: 1px solid var(--plasma-color-border);
+    background-color: var(--plasma-color-surface);
+    transition: var(--plasma-transition-fast);
+    overflow: hidden;
+  }
+
+  .plasma-card--vertical {
+    flex-direction: column;
+  }
+
+  .plasma-card--horizontal {
+    flex-direction: row;
+  }
+
+  /* --------------------------------------------------------------------------
+     Variants
+     -------------------------------------------------------------------------- */
+  .plasma-card--default {
+    background-color: var(--plasma-color-surface);
+    box-shadow: var(--plasma-shadow-xs);
+  }
+
+  .plasma-card--flat {
+    background-color: transparent;
+    border-color: var(--plasma-color-border-subtle);
+    box-shadow: none;
+  }
+
+  .plasma-card--sunken {
+    background-color: var(--plasma-color-surface-sunken);
+    border-color: var(--plasma-color-border-subtle);
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
+  }
+
+  .plasma-card--floating {
+    background-color: var(--plasma-color-surface);
+    border-color: var(--plasma-color-border);
+    box-shadow: var(--plasma-shadow-lg);
+    border-radius: var(--plasma-radius-xl);
+  }
+
+  /* Hoverable */
+  .plasma-card--hoverable {
+    cursor: pointer;
+  }
+
+  .plasma-card--hoverable:hover {
+    border-color: var(--plasma-color-border-hover);
+    box-shadow: var(--plasma-shadow-md);
+    transform: translateY(-1px);
+  }
+
+  /* --------------------------------------------------------------------------
+     Padding Modes
+     -------------------------------------------------------------------------- */
+  .plasma-card--padding-none .plasma-card-body,
+  .plasma-card--padding-none .plasma-card-header,
+  .plasma-card--padding-none .plasma-card-footer {
+    padding: 0;
+  }
+
+  .plasma-card--padding-sm .plasma-card-body {
+    padding: var(--plasma-space-sm);
+  }
+  .plasma-card--padding-sm .plasma-card-header {
+    padding: var(--plasma-space-sm) var(--plasma-space-sm) 0 var(--plasma-space-sm);
+  }
+  .plasma-card--padding-sm .plasma-card-footer {
+    padding: 0 var(--plasma-space-sm) var(--plasma-space-sm) var(--plasma-space-sm);
+  }
+
+  .plasma-card--padding-md .plasma-card-body {
+    padding: var(--plasma-space-lg);
+  }
+  .plasma-card--padding-md .plasma-card-header {
+    padding: var(--plasma-space-lg) var(--plasma-space-lg) 0 var(--plasma-space-lg);
+  }
+  .plasma-card--padding-md .plasma-card-footer {
+    padding: 0 var(--plasma-space-lg) var(--plasma-space-lg) var(--plasma-space-lg);
+  }
+
+  .plasma-card--padding-lg .plasma-card-body {
+    padding: var(--plasma-space-xl);
+  }
+  .plasma-card--padding-lg .plasma-card-header {
+    padding: var(--plasma-space-xl) var(--plasma-space-xl) 0 var(--plasma-space-xl);
+  }
+  .plasma-card--padding-lg .plasma-card-footer {
+    padding: 0 var(--plasma-space-xl) var(--plasma-space-xl) var(--plasma-space-xl);
+  }
+
+  /* --------------------------------------------------------------------------
+     Sections
+     -------------------------------------------------------------------------- */
+  .plasma-card-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-weight: var(--plasma-font-weight-bold);
+    font-size: var(--plasma-font-size-md);
+  }
+
+  .plasma-card-body {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    width: 100%;
+    height: 100%;
+    min-width: 0;
+    min-height: 0;
+    font-size: var(--plasma-font-size-base);
+    line-height: var(--plasma-line-height-base);
+  }
+
+  .plasma-card--horizontal > .plasma-card-body {
+    flex-direction: row;
+    align-items: stretch;
+  }
+
+  .plasma-card-footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--plasma-space-sm);
+  }
+</style>

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

@@ -0,0 +1,18 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+type CardPadding = "none" | "sm" | "md" | "lg";
+type CardVariant = "default" | "flat" | "sunken" | "floating";
+type CardOrientation = "vertical" | "horizontal";
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    variant?: CardVariant;
+    padding?: CardPadding;
+    orientation?: CardOrientation;
+    hoverable?: boolean;
+    header?: Snippet;
+    footer?: Snippet;
+    children?: Snippet;
+    bodyClass?: string;
+}
+declare const Card: import("svelte").Component<Props, {}, "">;
+type Card = ReturnType<typeof Card>;
+export default Card;

package/dist/checkbox/Checkbox.svelte

@@ -0,0 +1,199 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLInputAttributes } from "svelte/elements";
+
+  interface Props extends Omit<HTMLInputAttributes, "size" | "type"> {
+    checked?: boolean;
+    indeterminate?: boolean;
+    disabled?: boolean;
+    label?: string;
+    children?: Snippet;
+  }
+
+  let {
+    checked = $bindable(false),
+    indeterminate = $bindable(false),
+    disabled = false,
+    label,
+    children,
+    class: customClass = "",
+    id,
+    ...restProps
+  }: Props = $props();
+
+  let inputEl = $state<HTMLInputElement | null>(null);
+
+  $effect(() => {
+    if (inputEl) {
+      inputEl.indeterminate = indeterminate;
+    }
+  });
+
+  function handleChange(e: Event) {
+    const target = e.target as HTMLInputElement;
+    checked = target.checked;
+    if (indeterminate) {
+      indeterminate = false;
+    }
+  }
+</script>
+
+<label
+  class="plasma-checkbox-container {customClass}"
+  class:plasma-checkbox--disabled={disabled}
+  for={id}
+>
+  <input
+    {id}
+    type="checkbox"
+    bind:this={inputEl}
+    {checked}
+    {disabled}
+    onchange={handleChange}
+    class="plasma-checkbox-input"
+    {...restProps}
+  />
+
+  <span
+    class="plasma-checkbox-box"
+    class:plasma-checkbox-box--checked={checked}
+    class:plasma-checkbox-box--indeterminate={indeterminate}
+  >
+    <!-- Always rendered in DOM to eliminate any layout reflow/shift and enable smooth scaling -->
+    <svg
+      role="img"
+      aria-label="indeterminate-icon"
+      viewBox="0 0 16 16"
+      width="10"
+      height="10"
+      fill="currentColor"
+      class="plasma-checkbox-icon plasma-checkbox-icon--indeterminate"
+    >
+      <rect x="2" y="6.5" width="12" height="3" rx="1" />
+    </svg>
+
+    <svg
+      role="img"
+      aria-label="checked-icon"
+      viewBox="0 0 16 16"
+      width="11"
+      height="11"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="plasma-checkbox-icon plasma-checkbox-icon--check"
+    >
+      <path d="M3.5 8.5l3 3 6-6" />
+    </svg>
+  </span>
+
+  {#if children}
+    <span class="plasma-checkbox-label">
+      {@render children()}
+    </span>
+  {:else if label}
+    <span class="plasma-checkbox-label">
+      {label}
+    </span>
+  {/if}
+</label>
+
+<style>
+  .plasma-checkbox-container {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--plasma-space-sm);
+    cursor: pointer;
+    font-family: var(--plasma-font-sans);
+    font-size: var(--plasma-font-size-base);
+    color: var(--plasma-color-text);
+    user-select: none;
+    line-height: 1.2;
+  }
+
+  .plasma-checkbox--disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+  }
+
+  /* Visually hide native input while keeping it accessible */
+  .plasma-checkbox-input {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+    margin: 0;
+    pointer-events: none;
+  }
+
+  /* Custom Breeze Checkbox Box */
+  .plasma-checkbox-box {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    border-radius: var(--plasma-radius-sm);
+    border: 1px solid var(--plasma-color-border);
+    background-color: var(--plasma-color-view-bg);
+    color: #ffffff;
+    flex-shrink: 0;
+    overflow: hidden;
+    transition: var(--plasma-transition-fast);
+  }
+
+  .plasma-checkbox-container:hover:not(.plasma-checkbox--disabled)
+    .plasma-checkbox-box {
+    border-color: var(--plasma-color-border-hover);
+  }
+
+  .plasma-checkbox-input:focus-visible + .plasma-checkbox-box {
+    outline: 2px solid var(--plasma-color-highlight);
+    outline-offset: 2px;
+    box-shadow: var(--plasma-shadow-focus);
+  }
+
+  /* Checked & Indeterminate box styling */
+  .plasma-checkbox-box--checked,
+  .plasma-checkbox-box--indeterminate {
+    background-color: var(--plasma-color-highlight);
+    border-color: var(--plasma-color-highlight-hover);
+  }
+
+  .plasma-checkbox-container:hover:not(.plasma-checkbox--disabled)
+    .plasma-checkbox-box--checked,
+  .plasma-checkbox-container:hover:not(.plasma-checkbox--disabled)
+    .plasma-checkbox-box--indeterminate {
+    background-color: var(--plasma-color-highlight-hover);
+    border-color: var(--plasma-color-highlight-active);
+  }
+
+  /* Icons: zero layout shift, smooth transform and opacity transitions */
+  .plasma-checkbox-icon {
+    position: absolute;
+    pointer-events: none;
+    transform: scale(0);
+    opacity: 0;
+    transition:
+      transform var(--plasma-duration-fast) var(--plasma-ease-default),
+      opacity var(--plasma-duration-fast) var(--plasma-ease-default);
+  }
+
+  .plasma-checkbox-box--checked:not(.plasma-checkbox-box--indeterminate)
+    .plasma-checkbox-icon--check {
+    transform: scale(1);
+    opacity: 1;
+  }
+
+  .plasma-checkbox-box--indeterminate .plasma-checkbox-icon--indeterminate {
+    transform: scale(1);
+    opacity: 1;
+  }
+
+  .plasma-checkbox-label {
+    display: inline-block;
+  }
+</style>

package/dist/checkbox/Checkbox.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from "svelte";
+import type { HTMLInputAttributes } from "svelte/elements";
+interface Props extends Omit<HTMLInputAttributes, "size" | "type"> {
+    checked?: boolean;
+    indeterminate?: boolean;
+    disabled?: boolean;
+    label?: string;
+    children?: Snippet;
+}
+declare const Checkbox: import("svelte").Component<Props, {}, "checked" | "indeterminate">;
+type Checkbox = ReturnType<typeof Checkbox>;
+export default Checkbox;