@hyvnt/hyvui 0.2.0 → 0.4.0

package/dist/components/inputs/Checkbox.svelte

@@ -1,105 +1,109 @@
-<script lang="ts">
-  import { cn } from '../../utils/cn.js';
-
-  interface Props {
-    /** Whether the checkbox is checked (bindable). */
-    checked?: boolean;
-    /** Label text. */
-    label?: string;
-    /** Disables the checkbox. */
-    disabled?: boolean;
-    /** Additional CSS classes. */
-    class?: string;
-    /** Change handler. */
-    onchange?: (e: Event) => void;
-  }
-
-  let {
-    checked = $bindable(false),
-    label = '',
-    disabled = false,
-    class: className = '',
-    onchange,
-  }: Props = $props();
-</script>
-
-<label class={cn('hyvui-checkbox', disabled && 'hyvui-checkbox-disabled', className)}>
-  <input
-    type="checkbox"
-    bind:checked
-    {disabled}
-    class="hyvui-checkbox-input"
-    {onchange}
-  />
-  <span class="hyvui-checkbox-box" class:hyvui-checkbox-checked={checked}>
-    {#if checked}
-      <svg width="10" height="10" viewBox="0 0 10 10" aria-hidden="true">
-        <path d="M2 5.5L4 7.5L8 3" stroke="var(--bg)" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
-      </svg>
-    {/if}
-  </span>
-  {#if label}
-    <span class="hyvui-checkbox-label">{label}</span>
-  {/if}
-</label>
-
-<style>
-  .hyvui-checkbox {
-    display: inline-flex;
-    align-items: flex-start;
-    gap: var(--space-sm);
-    cursor: pointer;
-    min-width: 0;
-  }
-
-  .hyvui-checkbox-disabled {
-    opacity: 0.4;
-    cursor: not-allowed;
-  }
-
-  .hyvui-checkbox-input {
-    position: absolute;
-    opacity: 0;
-    width: 0;
-    height: 0;
-    pointer-events: none;
-  }
-
-  .hyvui-checkbox-box {
-    width: 16px;
-    height: 16px;
-    margin-top: 0.1rem;
-    border: 1px solid var(--line-strong);
-    border-radius: var(--radius-sm);
-    background:
-      linear-gradient(180deg, rgba(240, 232, 218, 0.02), transparent 48%),
-      var(--bg-elev);
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    transition:
-      background-color var(--transition-fast),
-      border-color var(--transition-fast),
-      box-shadow var(--transition-fast);
-    box-shadow: inset 0 1px 0 rgba(240, 232, 218, 0.03);
-  }
-
-  .hyvui-checkbox-checked {
-    background-color: var(--accent);
-    border-color: var(--accent);
-  }
-
-  .hyvui-checkbox-label {
-    font-family: var(--font-body);
-    font-size: 0.98rem;
-    color: var(--text-soft);
-    line-height: 1.5;
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .hyvui-checkbox-box {
-      transition: none;
-    }
-  }
-</style>
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+
+	/**
+	 * @example
+	 * <Checkbox label="accept terms" bind:checked={accepted} />
+	 * <Checkbox label="notify me" bind:checked={notify} onchange={handleChange} />
+	 */
+	interface Props {
+		/** Whether the checkbox is checked (bindable). */
+		checked?: boolean;
+		/** Label text. */
+		label?: string;
+		/** Disables the checkbox. */
+		disabled?: boolean;
+		/** Additional CSS classes. */
+		class?: string;
+		/** Change handler. */
+		onchange?: (e: Event) => void;
+	}
+
+	let {
+		checked = $bindable(false),
+		label = '',
+		disabled = false,
+		class: className = '',
+		onchange
+	}: Props = $props();
+</script>
+
+<label class={cn('hyvui-checkbox', disabled && 'hyvui-checkbox-disabled', className)}>
+	<input type="checkbox" bind:checked {disabled} class="hyvui-checkbox-input" {onchange} />
+	<span class="hyvui-checkbox-box" class:hyvui-checkbox-checked={checked}>
+		{#if checked}
+			<svg width="10" height="10" viewBox="0 0 10 10" aria-hidden="true">
+				<path
+					d="M2 5.5L4 7.5L8 3"
+					stroke="var(--bg)"
+					stroke-width="1.5"
+					fill="none"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				/>
+			</svg>
+		{/if}
+	</span>
+	{#if label}
+		<span class="hyvui-checkbox-label">{label}</span>
+	{/if}
+</label>
+
+<style>
+	.hyvui-checkbox {
+		display: inline-flex;
+		align-items: flex-start;
+		gap: var(--space-sm);
+		cursor: pointer;
+		min-width: 0;
+	}
+
+	.hyvui-checkbox-disabled {
+		opacity: 0.4;
+		cursor: not-allowed;
+	}
+
+	.hyvui-checkbox-input {
+		position: absolute;
+		opacity: 0;
+		width: 0;
+		height: 0;
+		pointer-events: none;
+	}
+
+	.hyvui-checkbox-box {
+		width: 16px;
+		height: 16px;
+		margin-top: 0.1rem;
+		border: 1px solid var(--line-strong);
+		border-radius: var(--radius-sm);
+		background: linear-gradient(180deg, rgba(240, 232, 218, 0.02), transparent 48%), var(--bg-elev);
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+		transition:
+			background-color var(--transition-fast),
+			border-color var(--transition-fast),
+			box-shadow var(--transition-fast);
+		box-shadow: inset 0 1px 0 rgba(240, 232, 218, 0.03);
+	}
+
+	.hyvui-checkbox-checked {
+		background-color: var(--accent);
+		border-color: var(--accent);
+	}
+
+	.hyvui-checkbox-label {
+		font-family: var(--font-body);
+		font-size: 0.98rem;
+		color: var(--text-soft);
+		line-height: 1.5;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.hyvui-checkbox-box {
+			transition: none;
+		}
+	}
+</style>

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

@@ -1,3 +1,8 @@
+/**
+ * @example
+ * <Checkbox label="accept terms" bind:checked={accepted} />
+ * <Checkbox label="notify me" bind:checked={notify} onchange={handleChange} />
+ */
 interface Props {
     /** Whether the checkbox is checked (bindable). */
     checked?: boolean;

package/dist/components/inputs/FileUpload.svelte

@@ -1,163 +1,170 @@
-<script lang="ts">
-  import { cn } from '../../utils/cn.js';
-
-  interface Props {
-    /** Accepted file types (e.g. "image/*"). */
-    accept?: string;
-    /** Allow multiple file selection. */
-    multiple?: boolean;
-    /** Disables the upload zone. */
-    disabled?: boolean;
-    /** Label text displayed in the zone. */
-    label?: string;
-    /** Additional CSS classes. */
-    class?: string;
-    /** Fires with the selected files. */
-    onfiles?: (files: File[]) => void;
-  }
-
-  let {
-    accept = '',
-    multiple = false,
-    disabled = false,
-    label = 'drop files here or click to browse',
-    class: className = '',
-    onfiles,
-  }: Props = $props();
-
-  let dragging = $state(false);
-  let fileNames = $state<string[]>([]);
-  let inputEl: HTMLInputElement | undefined = $state();
-
-  function handleFiles(fileList: FileList | null) {
-    if (!fileList) return;
-    const files = Array.from(fileList);
-    fileNames = files.map((f) => f.name);
-    onfiles?.(files);
-  }
-
-  function onDrop(e: DragEvent) {
-    e.preventDefault();
-    dragging = false;
-    if (disabled) return;
-    handleFiles(e.dataTransfer?.files ?? null);
-  }
-
-  function onDragOver(e: DragEvent) {
-    e.preventDefault();
-    if (!disabled) dragging = true;
-  }
-
-  function onDragLeave() {
-    dragging = false;
-  }
-
-  function onClick() {
-    if (!disabled) inputEl?.click();
-  }
-
-  function onInputChange(e: Event) {
-    const target = e.target as HTMLInputElement;
-    handleFiles(target.files);
-  }
-</script>
-
-<div class={cn('hyvui-file-upload', className)}>
-  <button
-    type="button"
-    class={cn(
-      'hyvui-file-zone',
-      dragging && 'hyvui-file-zone-active',
-      disabled && 'hyvui-file-zone-disabled'
-    )}
-    ondrop={onDrop}
-    ondragover={onDragOver}
-    ondragleave={onDragLeave}
-    onclick={onClick}
-    {disabled}
-  >
-    <span class="hyvui-file-label">{label}</span>
-  </button>
-  <input
-    bind:this={inputEl}
-    type="file"
-    {accept}
-    {multiple}
-    class="hyvui-file-input"
-    onchange={onInputChange}
-    tabindex="-1"
-  />
-  {#if fileNames.length > 0}
-    <div class="hyvui-file-names">
-      {#each fileNames as name}
-        <span class="hyvui-file-name">{name}</span>
-      {/each}
-    </div>
-  {/if}
-</div>
-
-<style>
-  .hyvui-file-upload {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-  }
-
-  .hyvui-file-zone {
-    border: 1px dashed var(--line);
-    background: transparent;
-    padding: 2rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    transition: border-color var(--transition-fast), background-color var(--transition-fast);
-    width: 100%;
-  }
-
-  .hyvui-file-zone:hover:not(:disabled),
-  .hyvui-file-zone-active {
-    border-color: var(--line-strong);
-    background-color: rgba(199, 156, 87, 0.04);
-  }
-
-  .hyvui-file-zone-disabled {
-    opacity: 0.4;
-    cursor: not-allowed;
-  }
-
-  .hyvui-file-label {
-    font-family: var(--font-mono);
-    font-size: 0.75rem;
-    color: var(--muted);
-    letter-spacing: 0.08em;
-  }
-
-  .hyvui-file-input {
-    position: absolute;
-    width: 0;
-    height: 0;
-    opacity: 0;
-    pointer-events: none;
-  }
-
-  .hyvui-file-names {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.375rem;
-  }
-
-  .hyvui-file-name {
-    font-family: var(--font-mono);
-    font-size: 0.68rem;
-    letter-spacing: 0.14em;
-    text-transform: uppercase;
-    color: var(--muted-strong);
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .hyvui-file-zone {
-      transition: none;
-    }
-  }
-</style>
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+
+	/**
+	 * @example
+	 * <FileUpload accept="image/*" onfiles={handleImages} />
+	 * <FileUpload multiple accept=".csv,.json" onfiles={handleData} label="drop data files here" />
+	 */
+	interface Props {
+		/** Accepted file types (e.g. "image/*"). */
+		accept?: string;
+		/** Allow multiple file selection. */
+		multiple?: boolean;
+		/** Disables the upload zone. */
+		disabled?: boolean;
+		/** Label text displayed in the zone. */
+		label?: string;
+		/** Additional CSS classes. */
+		class?: string;
+		/** Fires with the selected files. */
+		onfiles?: (files: File[]) => void;
+	}
+
+	let {
+		accept = '',
+		multiple = false,
+		disabled = false,
+		label = 'drop files here or click to browse',
+		class: className = '',
+		onfiles
+	}: Props = $props();
+
+	let dragging = $state(false);
+	let fileNames = $state<string[]>([]);
+	let inputEl: HTMLInputElement | undefined = $state();
+
+	function handleFiles(fileList: FileList | null) {
+		if (!fileList) return;
+		const files = Array.from(fileList);
+		fileNames = files.map((f) => f.name);
+		onfiles?.(files);
+	}
+
+	function onDrop(e: DragEvent) {
+		e.preventDefault();
+		dragging = false;
+		if (disabled) return;
+		handleFiles(e.dataTransfer?.files ?? null);
+	}
+
+	function onDragOver(e: DragEvent) {
+		e.preventDefault();
+		if (!disabled) dragging = true;
+	}
+
+	function onDragLeave() {
+		dragging = false;
+	}
+
+	function onClick() {
+		if (!disabled) inputEl?.click();
+	}
+
+	function onInputChange(e: Event) {
+		const target = e.target as HTMLInputElement;
+		handleFiles(target.files);
+	}
+</script>
+
+<div class={cn('hyvui-file-upload', className)}>
+	<button
+		type="button"
+		class={cn(
+			'hyvui-file-zone',
+			dragging && 'hyvui-file-zone-active',
+			disabled && 'hyvui-file-zone-disabled'
+		)}
+		ondrop={onDrop}
+		ondragover={onDragOver}
+		ondragleave={onDragLeave}
+		onclick={onClick}
+		{disabled}
+	>
+		<span class="hyvui-file-label">{label}</span>
+	</button>
+	<input
+		bind:this={inputEl}
+		type="file"
+		{accept}
+		{multiple}
+		class="hyvui-file-input"
+		onchange={onInputChange}
+		tabindex="-1"
+	/>
+	{#if fileNames.length > 0}
+		<div class="hyvui-file-names">
+			{#each fileNames as name}
+				<span class="hyvui-file-name">{name}</span>
+			{/each}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.hyvui-file-upload {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+	}
+
+	.hyvui-file-zone {
+		border: 1px dashed var(--line);
+		background: transparent;
+		padding: 2rem;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		cursor: pointer;
+		transition:
+			border-color var(--transition-fast),
+			background-color var(--transition-fast);
+		width: 100%;
+	}
+
+	.hyvui-file-zone:hover:not(:disabled),
+	.hyvui-file-zone-active {
+		border-color: var(--line-strong);
+		background-color: rgba(199, 156, 87, 0.04);
+	}
+
+	.hyvui-file-zone-disabled {
+		opacity: 0.4;
+		cursor: not-allowed;
+	}
+
+	.hyvui-file-label {
+		font-family: var(--font-mono);
+		font-size: 0.75rem;
+		color: var(--muted);
+		letter-spacing: 0.08em;
+	}
+
+	.hyvui-file-input {
+		position: absolute;
+		width: 0;
+		height: 0;
+		opacity: 0;
+		pointer-events: none;
+	}
+
+	.hyvui-file-names {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.375rem;
+	}
+
+	.hyvui-file-name {
+		font-family: var(--font-mono);
+		font-size: 0.68rem;
+		letter-spacing: 0.14em;
+		text-transform: uppercase;
+		color: var(--muted-strong);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.hyvui-file-zone {
+			transition: none;
+		}
+	}
+</style>

package/dist/components/inputs/FileUpload.svelte.d.ts

@@ -1,3 +1,8 @@
+/**
+ * @example
+ * <FileUpload accept="image/*" onfiles={handleImages} />
+ * <FileUpload multiple accept=".csv,.json" onfiles={handleData} label="drop data files here" />
+ */
 interface Props {
     /** Accepted file types (e.g. "image/*"). */
     accept?: string;