@spaethtech/svelte-ui 0.1.10 → 0.3.1-dev.10.ff03a8d

package/dist/components/Checkbox.svelte

@@ -0,0 +1,131 @@
+<!--
+/**
+ * Checkbox — a themed multi-state box (unchecked / checked / indeterminate). Use this, NOT a Toggle,
+ * for selection semantics: a row is / isn't selected, a rule does / doesn't apply, a filter is / isn't
+ * active. A real `<input type=checkbox>` drives it — laid INVISIBLY over the whole control, so clicking
+ * anywhere toggles it (naturally clickable + testable + accessible + form-friendly; `bind:checked`
+ * works, and `onchange` fires a real event). Honours the shared {@link Variant} (the "checked" colour)
+ * + {@link Size} axes.
+ *
+ * ALIGNMENT: same story as Toggle — the visible box is deliberately smaller than a text control, but
+ * the Checkbox occupies a wrapper sized to the standard control HEIGHT for its `size` (sm 24 / md 32 /
+ * lg 40px — same as Input), with the box centred inside. Drop it next to a `size`-matched Input/Select
+ * and everything lines up on the same baseline; the full-height wrapper is the click target while the
+ * box itself stays box-sized.
+ */
+-->
+<script lang="ts">
+  import type { HTMLInputAttributes } from "svelte/elements";
+  import type { Size } from "../types/sizes.js";
+  import { responsiveClasses, type Responsive } from "../types/responsive.js";
+  import { variantToken, type Variant } from "../types/variants.js";
+
+  let {
+    checked = $bindable(false),
+    indeterminate = false,
+    disabled = false,
+    size = "md",
+    variant = "primary",
+    class: cls = "",
+    ...rest
+  }: {
+    checked?: boolean;
+    indeterminate?: boolean;
+    disabled?: boolean;
+    size?: Responsive<Size>;
+    /** The colour of the "checked" state (default primary). */
+    variant?: Variant;
+    class?: string;
+  } & Omit<HTMLInputAttributes, "size" | "type" | "class"> = $props();
+
+  // Per size: visible box dimension. Same scale as icons (14 / 16 / 20 px) so the box aligns with
+  // adjacent MDI icons at the matching size.
+  const dims: Record<Size, string> = {
+    sm: "size-3.5",
+    md: "size-4",
+    lg: "size-5",
+  };
+  const iconSize: Record<Size, string> = {
+    sm: "size-3",
+    md: "size-3.5",
+    lg: "size-4",
+  };
+  // Wrapper height matches Input's h-6/h-8/h-10 so the box centres on the same baseline as sibling
+  // controls at the same `size`.
+  const heightMap: Record<Size, string> = { sm: "h-6", md: "h-8", lg: "h-10" };
+  const heightClass = $derived(responsiveClasses(size, heightMap));
+  const boxSize = $derived(responsiveClasses(size, dims));
+  const iconSizeCls = $derived(responsiveClasses(size, iconSize));
+  const filled = $derived(checked || indeterminate);
+  const variantVar = $derived(`var(${variantToken[variant]})`);
+  const boxStyle = $derived(
+    filled
+      ? `background-color: ${variantVar}; border-color: ${variantVar};`
+      : `background-color: transparent; border-color: color-mix(in srgb, var(--ui-color-text) 40%, transparent);`,
+  );
+  // Mark colour = the INVERTED text colour (`--ui-color-background`) with a hint of the variant mixed
+  // in — ONE rule for every variant, both themes (matches the Toggle knob). Light: near-white on the
+  // fill; dark: flips dark, which reads on the dark theme's brighter accent fills. The 80% background
+  // keeps it contrasting even on a neutral (`--ui-color-text`) fill.
+  const markColor = $derived(
+    `color-mix(in srgb, var(--ui-color-background) 80%, var(${variantToken[variant]}))`,
+  );
+
+  let el = $state<HTMLInputElement>();
+  // `indeterminate` is a DOM property, not an attribute — sync it imperatively so the real
+  // checkbox reports the tri-state to a11y and form serialization.
+  $effect(() => {
+    if (el) el.indeterminate = indeterminate;
+  });
+</script>
+
+<label
+  class="relative inline-flex shrink-0 items-center justify-center {heightClass} {disabled
+    ? 'cursor-not-allowed opacity-50'
+    : 'cursor-pointer'} {cls}"
+>
+  <!-- Real checkbox — invisible, covering the whole control so a click anywhere toggles it and
+	     keyboard/focus/screen-reader behavior is native. -->
+  <input
+    bind:this={el}
+    type="checkbox"
+    bind:checked
+    {disabled}
+    class="peer absolute inset-0 z-10 m-0 cursor-pointer opacity-0 disabled:cursor-not-allowed"
+    {...rest}
+  />
+  <span
+    class="relative inline-flex items-center justify-center rounded-[3px] border transition-colors duration-150 peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:[outline-color:var(--ui-color-primary)] {boxSize}"
+    style={boxStyle}
+  >
+    {#if indeterminate}
+      <!-- Dash for indeterminate — mid-line, contrasting mark on the filled background. -->
+      <svg
+        viewBox="0 0 16 16"
+        class={iconSizeCls}
+        style="color: {markColor}"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2.5"
+        stroke-linecap="round"
+      >
+        <line x1="4" y1="8" x2="12" y2="8" />
+      </svg>
+    {:else if checked}
+      <!-- Checkmark — sits inside the filled box. Stroke uses currentColor; `markColor` picks white
+			     on accent fills, the background colour on neutral/ghost (which are text-coloured). -->
+      <svg
+        viewBox="0 0 16 16"
+        class={iconSizeCls}
+        style="color: {markColor}"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <polyline points="3.5,8.5 6.5,11.5 12.5,5" />
+      </svg>
+    {/if}
+  </span>
+</label>

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

@@ -0,0 +1,16 @@
+import type { HTMLInputAttributes } from "svelte/elements";
+import type { Size } from "../types/sizes.js";
+import { type Responsive } from "../types/responsive.js";
+import { type Variant } from "../types/variants.js";
+type $$ComponentProps = {
+    checked?: boolean;
+    indeterminate?: boolean;
+    disabled?: boolean;
+    size?: Responsive<Size>;
+    /** The colour of the "checked" state (default primary). */
+    variant?: Variant;
+    class?: string;
+} & Omit<HTMLInputAttributes, "size" | "type" | "class">;
+declare const Checkbox: import("svelte").Component<$$ComponentProps, {}, "checked">;
+type Checkbox = ReturnType<typeof Checkbox>;
+export default Checkbox;

package/dist/components/ConfirmDialog.svelte

@@ -0,0 +1,103 @@
+<script lang="ts">
+  import Dialog from "./Dialog.svelte";
+  import Card from "./Card.svelte";
+  import CardHeader from "./CardHeader.svelte";
+  import CardFooter from "./CardFooter.svelte";
+  import Button from "./Button.svelte";
+  import type { Snippet } from "svelte";
+  import type { Size } from "../types/sizes.js";
+  import type { Responsive } from "../types/responsive.js";
+
+  /**
+   * ConfirmDialog — the common title + message + Confirm/Cancel modal, built on the `Dialog` shell.
+   * It composes a `Card` (`CardHeader` title, body, `CardFooter` actions) inside `Dialog`, so it stays
+   * consistent with every other surface. Pass `children` to replace the message body with custom
+   * content (the header + footer stay). For a fully custom modal, use `Dialog` directly.
+   */
+  interface Props {
+    isOpen: boolean;
+    title?: string;
+    message?: string;
+    confirmText?: string;
+    cancelText?: string;
+    onConfirm?: () => void;
+    onCancel?: () => void;
+    variant?: "danger" | "normal";
+    /** Density tier — forwarded to the Card / CardHeader / CardFooter. */
+    size?: Responsive<Size>;
+    showConfirm?: boolean;
+    showCancel?: boolean;
+    /** Allow dismissing by backdrop / Escape (default true). */
+    dismissible?: boolean;
+    /** Forwarded to the Dialog shell — any CSS value (default: content-sized, capped at 32rem). */
+    width?: string;
+    height?: string;
+    /** Custom body between header and footer (replaces `message`). */
+    children?: Snippet;
+  }
+
+  let {
+    isOpen = $bindable(),
+    title = "Dialog",
+    message,
+    confirmText = "Confirm",
+    cancelText = "Cancel",
+    onConfirm,
+    onCancel,
+    variant = "normal",
+    size = "md",
+    showConfirm = true,
+    showCancel = true,
+    dismissible = true,
+    width,
+    height,
+    children,
+  }: Props = $props();
+
+  function handleConfirm() {
+    onConfirm?.();
+    isOpen = false;
+  }
+  function handleCancel() {
+    onCancel?.();
+    isOpen = false;
+  }
+</script>
+
+<Dialog
+  bind:isOpen
+  {dismissible}
+  {width}
+  {height}
+  onClose={onCancel}
+  aria-label={title}
+>
+  <Card {size} class="w-full shadow-xl">
+    <CardHeader {size}>
+      <h3 class="text-lg font-medium [color:var(--ui-color-text)]">{title}</h3>
+    </CardHeader>
+
+    {#if children}
+      {@render children()}
+    {:else if message}
+      <p class="text-sm [color:color-mix(in_srgb,var(--ui-color-text)_70%,transparent)]">
+        {message}
+      </p>
+    {/if}
+
+    {#if showConfirm || showCancel}
+      <CardFooter {size}>
+        {#if showCancel}
+          <Button text={cancelText} onclick={handleCancel} variant="secondary" />
+        {/if}
+        {#if showConfirm}
+          <Button
+            text={confirmText}
+            onclick={handleConfirm}
+            variant={variant === "danger" ? "danger" : "primary"}
+          />
+        {/if}
+      </CardFooter>
+    {/if}
+  </Card>
+</Dialog>

package/dist/components/ConfirmDialog.svelte.d.ts

@@ -0,0 +1,33 @@
+import type { Snippet } from "svelte";
+import type { Size } from "../types/sizes.js";
+import type { Responsive } from "../types/responsive.js";
+/**
+ * ConfirmDialog — the common title + message + Confirm/Cancel modal, built on the `Dialog` shell.
+ * It composes a `Card` (`CardHeader` title, body, `CardFooter` actions) inside `Dialog`, so it stays
+ * consistent with every other surface. Pass `children` to replace the message body with custom
+ * content (the header + footer stay). For a fully custom modal, use `Dialog` directly.
+ */
+interface Props {
+    isOpen: boolean;
+    title?: string;
+    message?: string;
+    confirmText?: string;
+    cancelText?: string;
+    onConfirm?: () => void;
+    onCancel?: () => void;
+    variant?: "danger" | "normal";
+    /** Density tier — forwarded to the Card / CardHeader / CardFooter. */
+    size?: Responsive<Size>;
+    showConfirm?: boolean;
+    showCancel?: boolean;
+    /** Allow dismissing by backdrop / Escape (default true). */
+    dismissible?: boolean;
+    /** Forwarded to the Dialog shell — any CSS value (default: content-sized, capped at 32rem). */
+    width?: string;
+    height?: string;
+    /** Custom body between header and footer (replaces `message`). */
+    children?: Snippet;
+}
+declare const ConfirmDialog: import("svelte").Component<Props, {}, "isOpen">;
+type ConfirmDialog = ReturnType<typeof ConfirmDialog>;
+export default ConfirmDialog;