@joewinke/jatui 0.1.24 → 0.1.26

package/dist/components/Collapse.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+	/**
+	 * Collapse — batteries-included tall-content collapser.
+	 *
+	 * Wraps children in a region that caps at `threshold` px with a fade-out
+	 * gradient and renders a "Show more / Show less" toggle that self-hides when
+	 * the content is shorter than the threshold. Uses the `collapse` action for
+	 * measurement (ResizeObserver-backed, so streaming / {@html} content works).
+	 *
+	 *   <Collapse>
+	 *     {@html renderedMarkdown}
+	 *   </Collapse>
+	 *
+	 * For existing elements you don't want to wrap (a bare `<p>` inside an
+	 * `{#each}`, a `<pre>`), use the `collapse` action directly instead.
+	 */
+	import { collapse } from '../actions/collapse';
+
+	interface Props {
+		/** Max collapsed height in px. Default 120. */
+		threshold?: number;
+		/** Where the fade begins, as a %. Default 55. */
+		fadeStart?: number;
+		/** Start expanded. Default false. */
+		expanded?: boolean;
+		/** Toggle label when collapsed. Default 'Show more ↓'. */
+		moreLabel?: string;
+		/** Toggle label when expanded. Default 'Show less ↑'. */
+		lessLabel?: string;
+		/** Extra classes on the content region. */
+		class?: string;
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		threshold = 120,
+		fadeStart = 55,
+		expanded = $bindable(false),
+		moreLabel = 'Show more ↓',
+		lessLabel = 'Show less ↑',
+		class: className = '',
+		children,
+	}: Props = $props();
+
+	let collapsible = $state(false);
+	const instanceId = $props.id();
+	const bodyId = `jatui-collapse-${instanceId}`;
+</script>
+
+<div
+	id={bodyId}
+	class={`jatui-collapse-body ${className}`.trim()}
+	use:collapse={{ threshold, fadeStart, expanded, onCollapsible: (c) => (collapsible = c) }}
+>
+	{#if children}
+		{@render children()}
+	{/if}
+</div>
+{#if collapsible}
+	<button
+		type="button"
+		class="jatui-collapse-toggle"
+		aria-expanded={expanded}
+		aria-controls={bodyId}
+		onclick={() => (expanded = !expanded)}
+	>
+		{expanded ? lessLabel : moreLabel}
+	</button>
+{/if}
+
+<style>
+	.jatui-collapse-body {
+		position: relative;
+	}
+	.jatui-collapse-toggle {
+		display: block;
+		margin-top: 4px;
+		padding: 2px 0;
+		font-size: 11px;
+		color: var(--color-primary, oklch(0.65 0.12 250));
+		background: none;
+		border: none;
+		cursor: pointer;
+		opacity: 0.75;
+		transition: opacity 0.1s;
+	}
+	.jatui-collapse-toggle:hover {
+		opacity: 1;
+		text-decoration: underline;
+	}
+</style>

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

@@ -0,0 +1,18 @@
+interface Props {
+    /** Max collapsed height in px. Default 120. */
+    threshold?: number;
+    /** Where the fade begins, as a %. Default 55. */
+    fadeStart?: number;
+    /** Start expanded. Default false. */
+    expanded?: boolean;
+    /** Toggle label when collapsed. Default 'Show more ↓'. */
+    moreLabel?: string;
+    /** Toggle label when expanded. Default 'Show less ↑'. */
+    lessLabel?: string;
+    /** Extra classes on the content region. */
+    class?: string;
+    children?: import('svelte').Snippet;
+}
+declare const Collapse: import("svelte").Component<Props, {}, "expanded">;
+type Collapse = ReturnType<typeof Collapse>;
+export default Collapse;

package/dist/components/ColorSelector.svelte

@@ -0,0 +1,167 @@
+<script lang="ts">
+  import { slide } from "svelte/transition"
+
+  let {
+    selectedColor = null,
+    onSelect = (color: string | null) => {},
+    colorLabel = "Collection Color",
+    compact = false,
+  } = $props<{
+    selectedColor: string | null
+    onSelect?: (color: string | null) => void
+    colorLabel?: string
+    compact?: boolean
+  }>()
+
+  let showSelector = $state(false)
+  // svelte-ignore state_referenced_locally
+  let lastSelectedColor = $state(selectedColor)
+  let selectionAnimating = $state(false)
+
+  const colorOptions = [
+    { name: "Primary", value: "primary", bgClass: "bg-primary", textClass: "text-primary-content" },
+    { name: "Secondary", value: "secondary", bgClass: "bg-secondary", textClass: "text-secondary-content" },
+    { name: "Accent", value: "accent", bgClass: "bg-accent", textClass: "text-accent-content" },
+    { name: "Neutral", value: "neutral", bgClass: "bg-neutral", textClass: "text-neutral-content" },
+    { name: "Info", value: "info", bgClass: "bg-info", textClass: "text-info-content" },
+    { name: "Success", value: "success", bgClass: "bg-success", textClass: "text-success-content" },
+    { name: "Warning", value: "warning", bgClass: "bg-warning", textClass: "text-warning-content" },
+    { name: "Error", value: "error", bgClass: "bg-error", textClass: "text-error-content" },
+  ]
+
+  function isSelected(colorValue: string): boolean {
+    if (!selectedColor) return false
+    return selectedColor === colorValue
+  }
+
+  function handleColorSelect(colorValue: string) {
+    if (colorValue !== selectedColor) {
+      lastSelectedColor = colorValue
+      selectionAnimating = true
+      onSelect(colorValue)
+
+      setTimeout(() => {
+        selectionAnimating = false
+        if (compact) {
+          setTimeout(() => { showSelector = false }, 800)
+        }
+      }, 500)
+    } else {
+      onSelect(colorValue)
+    }
+  }
+</script>
+
+<div class="form-control">
+  <button
+    type="button"
+    class="flex w-full items-center justify-between px-2 py-3 hover:bg-base-200 rounded-lg transition-colors"
+    onclick={() => (showSelector = !showSelector)}
+  >
+    <div class="label flex items-center gap-2 cursor-pointer">
+      <span class="label-text font-medium">{colorLabel}</span>
+      {#if selectedColor}
+        <div class="ml-4">
+          <div class="color-preview {selectedColor}"></div>
+        </div>
+      {/if}
+    </div>
+    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="transition-transform duration-300 {showSelector ? 'rotate-180' : ''}">
+      <polyline points="6 9 12 15 18 9"></polyline>
+    </svg>
+  </button>
+
+  {#if showSelector}
+    <div class="color-selector-wrapper" transition:slide={{ duration: 200 }}>
+      <div class="grid grid-cols-4 gap-3 p-4 bg-base-200 rounded-lg">
+        {#each colorOptions as option}
+          <button
+            type="button"
+            class="tooltip tooltip-top color-btn {option.bgClass} border-2 border-base-300
+              {isSelected(option.value) ? 'selected' : ''}
+              {selectionAnimating && lastSelectedColor === option.value ? 'selecting' : ''}"
+            data-tip={option.name}
+            onclick={() => handleColorSelect(option.value)}
+            aria-label="Select {option.name} color"
+          >
+            {#if isSelected(option.value) || (selectionAnimating && lastSelectedColor === option.value)}
+              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="{option.textClass} {selectionAnimating && lastSelectedColor === option.value ? 'animate-checkmark' : ''}">
+                <polyline points="20 6 9 17 4 12"></polyline>
+              </svg>
+            {/if}
+          </button>
+        {/each}
+      </div>
+
+      {#if selectedColor}
+        <div class="flex justify-end mt-2">
+          <button
+            class="text-xs text-base-content/60 hover:text-base-content transition-colors px-2 py-1 rounded hover:bg-base-200"
+            onclick={() => onSelect(null)}
+          >
+            Clear color
+          </button>
+        </div>
+      {/if}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .color-selector-wrapper { padding-top: 0.5rem; }
+
+  .color-btn {
+    width: 100%;
+    aspect-ratio: 1;
+    border-radius: 0.75rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: transform 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    cursor: pointer;
+  }
+
+  .color-btn:hover {
+    transform: scale(1.05);
+  }
+
+  .color-btn.selected {
+    border-color: color-mix(in oklch, var(--color-base-100) 90%, transparent);
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-base-content) 25%, transparent);
+  }
+
+  .color-btn.selecting {
+    transform: scale(1.12);
+    border-color: color-mix(in oklch, var(--color-base-100) 90%, transparent);
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-base-content) 35%, transparent);
+    animation: pulse 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .color-btn { transition: none; }
+    .color-btn:hover { transform: none; }
+    .color-btn.selecting { transform: none; animation: none; }
+  }
+
+  .color-preview {
+    width: 15px;
+    height: 15px;
+    border-radius: 50%;
+    border: 1px solid color-mix(in oklch, var(--color-base-content) 20%, transparent);
+  }
+
+  @keyframes pulse {
+    0% { transform: scale(1); }
+    50% { transform: scale(1.15); }
+    100% { transform: scale(1.1); }
+  }
+
+  .animate-checkmark {
+    animation: zoom-in 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  }
+
+  @keyframes zoom-in {
+    0% { transform: scale(0); opacity: 0; }
+    100% { transform: scale(1); opacity: 1; }
+  }
+</style>

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

@@ -0,0 +1,9 @@
+type $$ComponentProps = {
+    selectedColor: string | null;
+    onSelect?: (color: string | null) => void;
+    colorLabel?: string;
+    compact?: boolean;
+};
+declare const ColorSelector: import("svelte").Component<$$ComponentProps, {}, "">;
+type ColorSelector = ReturnType<typeof ColorSelector>;
+export default ColorSelector;