@stephen-netu/design-system 0.1.0

package/src/f0-forms/select/Select.svelte

@@ -0,0 +1,198 @@
+<script lang="ts">
+  interface SelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+  }
+
+  interface Props {
+    options: SelectOption[];
+    selected?: string;
+    placeholder?: string;
+    label?: string;
+    disabled?: boolean;
+    error?: boolean;
+    class?: string;
+    id?: string;
+    name?: string;
+    onchange?: (value: string) => void;
+  }
+
+  let {
+    options,
+    selected = $bindable(''),
+    placeholder = 'Select...',
+    label,
+    disabled = false,
+    error = false,
+    class: className = '',
+    id,
+    name,
+    onchange
+  }: Props = $props();
+
+  let isFocused = $state(false);
+
+  function handleChange(e: Event) {
+    const target = e.target as HTMLSelectElement;
+    selected = target.value;
+    onchange?.(selected);
+  }
+</script>
+
+<div
+  class="ds-select-wrapper {className}"
+  class:is-focused={isFocused}
+  class:is-disabled={disabled}
+  class:has-error={error}
+  class:has-placeholder={!selected}
+>
+  <select
+    {id}
+    {name}
+    {disabled}
+    value={selected}
+    onchange={handleChange}
+    onfocus={() => isFocused = true}
+    onblur={() => isFocused = false}
+    class="ds-select-element"
+    aria-label={label}
+    aria-invalid={error}
+  >
+    {#if placeholder}
+      <option value="" disabled hidden>{placeholder}</option>
+    {/if}
+    {#each options as option}
+      <option
+        value={option.value}
+        disabled={option.disabled}
+        selected={option.value === selected}
+      >
+        {option.label}
+      </option>
+    {/each}
+  </select>
+
+  <div class="ds-select-chevron" role="presentation">
+    <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <polyline points="4 6 8 10 12 6" />
+    </svg>
+  </div>
+
+  <div class="ds-select-glow"></div>
+</div>
+
+<style>
+  .ds-select-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    background: var(--color-bg-panel);
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-md);
+    transition: all var(--transition-fast);
+    overflow: hidden;
+  }
+
+  .ds-select-wrapper:hover:not(.is-disabled) {
+    border-color: var(--border-hover);
+    background: var(--color-bg-panel-elevated);
+  }
+
+  .ds-select-wrapper.is-focused {
+    border-color: var(--color-accent);
+    background: var(--color-bg-app);
+    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
+  }
+
+  .ds-select-wrapper.has-error {
+    border-color: var(--color-error);
+  }
+
+  .ds-select-wrapper.is-disabled {
+    opacity: 0.5;
+    background: rgba(0,0,0,0.2);
+    cursor: not-allowed;
+  }
+
+  .ds-select-element {
+    flex: 1;
+    width: 100%;
+    height: 2.25rem;
+    padding: 0 var(--space-8) 0 var(--space-3);
+    background: transparent;
+    border: none;
+    outline: none;
+    color: var(--color-text-primary);
+    font-family: var(--font-sans);
+    font-size: var(--text-sm);
+    cursor: pointer;
+    appearance: none;
+    -webkit-appearance: none;
+  }
+
+  .ds-select-wrapper.has-placeholder .ds-select-element {
+    color: var(--color-text-muted);
+  }
+
+  .ds-select-element:disabled {
+    cursor: not-allowed;
+  }
+
+  /* Style the option elements for dark backgrounds */
+  .ds-select-element option {
+    background: var(--color-bg-panel, #222);
+    color: var(--color-text-primary, #e8e0d0);
+  }
+
+  .ds-select-element option:disabled {
+    color: var(--color-text-muted, #a09880);
+  }
+
+  .ds-select-chevron {
+    position: absolute;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--space-8);
+    height: 100%;
+    color: var(--color-text-muted);
+    pointer-events: none;
+    transition: color var(--transition-fast);
+  }
+
+  .ds-select-chevron svg {
+    width: 14px;
+    height: 14px;
+  }
+
+  .ds-select-wrapper.is-focused .ds-select-chevron {
+    color: var(--color-accent);
+  }
+
+  .ds-select-glow {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 1px;
+    background: var(--color-accent);
+    transform: scaleX(0);
+    transform-origin: center;
+    transition: transform var(--transition-normal);
+    box-shadow: 0 -1px 4px var(--color-accent-glow);
+  }
+
+  .ds-select-wrapper.is-focused .ds-select-glow {
+    transform: scaleX(1);
+  }
+
+  .ds-select-wrapper.has-error .ds-select-glow {
+    background: var(--color-error);
+    box-shadow: 0 -1px 4px rgba(166, 94, 94, 0.4);
+  }
+</style>

package/src/f0-forms/textarea/TextArea.svelte

@@ -0,0 +1,170 @@
+<script lang="ts">
+  interface Props {
+    value?: string;
+    placeholder?: string;
+    label?: string;
+    rows?: number;
+    maxLength?: number;
+    disabled?: boolean;
+    error?: boolean;
+    class?: string;
+    id?: string;
+    name?: string;
+    oninput?: (e: Event) => void;
+    onchange?: (e: Event) => void;
+  }
+
+  let {
+    value = $bindable(''),
+    placeholder = '',
+    label,
+    rows = 4,
+    maxLength,
+    disabled = false,
+    error = false,
+    class: className = '',
+    id,
+    name,
+    oninput,
+    onchange
+  }: Props = $props();
+
+  let isFocused = $state(false);
+  let charCount = $derived(value.length);
+  let isNearLimit = $derived(maxLength ? charCount > maxLength * 0.9 : false);
+  let isOverLimit = $derived(maxLength ? charCount > maxLength : false);
+</script>
+
+<div
+  class="ds-textarea-wrapper {className}"
+  class:is-focused={isFocused}
+  class:is-disabled={disabled}
+  class:has-error={error || isOverLimit}
+>
+  <textarea
+    {id}
+    {name}
+    bind:value
+    {placeholder}
+    {rows}
+    {disabled}
+    maxlength={maxLength}
+    onfocus={() => isFocused = true}
+    onblur={() => isFocused = false}
+    {oninput}
+    {onchange}
+    class="ds-textarea-element"
+    aria-label={label}
+    aria-invalid={error || isOverLimit}
+  ></textarea>
+
+  {#if maxLength}
+    <div
+      class="ds-textarea-counter"
+      class:is-near={isNearLimit}
+      class:is-over={isOverLimit}
+      aria-live="polite"
+    >
+      {charCount}/{maxLength}
+    </div>
+  {/if}
+
+  <div class="ds-textarea-glow"></div>
+</div>
+
+<style>
+  .ds-textarea-wrapper {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    background: var(--color-bg-panel);
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-md);
+    transition: all var(--transition-fast);
+    overflow: hidden;
+  }
+
+  .ds-textarea-wrapper:hover:not(.is-disabled) {
+    border-color: var(--border-hover);
+    background: var(--color-bg-panel-elevated);
+  }
+
+  .ds-textarea-wrapper.is-focused {
+    border-color: var(--color-accent);
+    background: var(--color-bg-app);
+    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
+  }
+
+  .ds-textarea-wrapper.has-error {
+    border-color: var(--color-error);
+  }
+
+  .ds-textarea-wrapper.is-disabled {
+    opacity: 0.5;
+    background: rgba(0,0,0,0.2);
+    cursor: not-allowed;
+  }
+
+  .ds-textarea-element {
+    width: 100%;
+    padding: var(--space-3);
+    background: transparent;
+    border: none;
+    outline: none;
+    color: var(--color-text-primary);
+    font-family: var(--font-sans);
+    font-size: var(--text-sm);
+    line-height: 1.5;
+    resize: vertical;
+    min-height: 2.5rem;
+  }
+
+  .ds-textarea-element::placeholder {
+    color: var(--color-text-muted);
+  }
+
+  .ds-textarea-element:disabled {
+    cursor: not-allowed;
+    resize: none;
+  }
+
+  .ds-textarea-counter {
+    align-self: flex-end;
+    padding: var(--space-1) var(--space-3) var(--space-2);
+    font-family: var(--font-mono);
+    font-size: var(--text-xs);
+    color: var(--color-text-muted);
+    transition: color var(--transition-fast);
+  }
+
+  .ds-textarea-counter.is-near {
+    color: var(--color-accent, #b87333);
+  }
+
+  .ds-textarea-counter.is-over {
+    color: var(--color-error);
+  }
+
+  .ds-textarea-glow {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 1px;
+    background: var(--color-accent);
+    transform: scaleX(0);
+    transform-origin: center;
+    transition: transform var(--transition-normal);
+    box-shadow: 0 -1px 4px var(--color-accent-glow);
+  }
+
+  .ds-textarea-wrapper.is-focused .ds-textarea-glow {
+    transform: scaleX(1);
+  }
+
+  .ds-textarea-wrapper.has-error .ds-textarea-glow {
+    background: var(--color-error);
+    box-shadow: 0 -1px 4px rgba(166, 94, 94, 0.4);
+  }
+</style>

package/src/f0-forms/toggle/FormToggle.svelte

@@ -0,0 +1,147 @@
+<script lang="ts">
+  interface Props {
+    checked?: boolean;
+    label?: string;
+    disabled?: boolean;
+    size?: 'sm' | 'md';
+    class?: string;
+    id?: string;
+    name?: string;
+    onchange?: (e: Event) => void;
+  }
+
+  let {
+    checked = $bindable(false),
+    label = '',
+    disabled = false,
+    size = 'md',
+    class: className = '',
+    id,
+    name,
+    onchange
+  }: Props = $props();
+
+  let trackWidth = $derived(size === 'sm' ? 32 : 40);
+  let trackHeight = $derived(size === 'sm' ? 18 : 22);
+  let thumbSize = $derived(size === 'sm' ? 14 : 18);
+</script>
+
+<label
+  class="ds-form-toggle {className}"
+  class:is-disabled={disabled}
+  class:is-checked={checked}
+  class:is-sm={size === 'sm'}
+>
+  <input
+    type="checkbox"
+    bind:checked
+    {id}
+    {name}
+    {disabled}
+    {onchange}
+    class="ds-form-toggle-native"
+    role="switch"
+    aria-checked={checked}
+  />
+
+  <div
+    class="ds-form-toggle-track"
+    role="presentation"
+    style:width="{trackWidth}px"
+    style:height="{trackHeight}px"
+  >
+    <div
+      class="ds-form-toggle-thumb"
+      style:width="{thumbSize}px"
+      style:height="{thumbSize}px"
+    ></div>
+  </div>
+
+  {#if label}
+    <span class="ds-form-toggle-label">{label}</span>
+  {/if}
+</label>
+
+<style>
+  .ds-form-toggle {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+    cursor: pointer;
+    user-select: none;
+    font-family: var(--font-sans);
+    font-size: var(--text-sm);
+    color: var(--color-text-primary);
+  }
+
+  .ds-form-toggle.is-sm {
+    font-size: var(--text-xs);
+  }
+
+  .ds-form-toggle.is-disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .ds-form-toggle-native {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  .ds-form-toggle-track {
+    position: relative;
+    border-radius: var(--radius-full);
+    background: var(--color-bg-panel);
+    border: 1.5px solid var(--border-default);
+    transition: all var(--transition-fast);
+    flex-shrink: 0;
+  }
+
+  .ds-form-toggle:hover:not(.is-disabled) .ds-form-toggle-track {
+    border-color: var(--border-hover);
+    background: var(--color-bg-panel-elevated);
+  }
+
+  .ds-form-toggle.is-checked .ds-form-toggle-track {
+    background: var(--color-accent, #b87333);
+    border-color: var(--color-accent, #b87333);
+  }
+
+  .ds-form-toggle.is-checked:hover:not(.is-disabled) .ds-form-toggle-track {
+    background: var(--color-accent-hover, #c4813d);
+    border-color: var(--color-accent-hover, #c4813d);
+  }
+
+  .ds-form-toggle-native:focus-visible + .ds-form-toggle-track {
+    outline: 2px solid var(--color-accent);
+    outline-offset: 2px;
+  }
+
+  .ds-form-toggle-thumb {
+    position: absolute;
+    top: 50%;
+    left: 2px;
+    transform: translateY(-50%);
+    border-radius: 50%;
+    background: var(--color-text-muted);
+    transition: all var(--transition-fast);
+    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
+  }
+
+  .ds-form-toggle.is-checked .ds-form-toggle-thumb {
+    left: calc(100% - 2px);
+    transform: translate(-100%, -50%);
+    background: var(--color-bg-app, #1a1a1a);
+  }
+
+  .ds-form-toggle-label {
+    line-height: 1.4;
+  }
+</style>

package/src/f0-forms/validation/validate.ts

@@ -0,0 +1,47 @@
+// F0 Forms — Pure validation utilities
+// Each validator returns null on success, or an error message string on failure.
+
+export type Validator = (value: string) => string | null;
+
+/** Fails if the value is empty or whitespace-only. */
+export function required(value: string): string | null {
+  if (value == null) value = '';
+  return value.trim().length === 0 ? 'This field is required' : null;
+}
+
+/** Returns a validator that fails if value length is below `min`. */
+export function minLength(min: number): Validator {
+  return (value: string) => {
+    if (value == null) value = '';
+    return value.length < min ? `Must be at least ${min} characters` : null;
+  };
+}
+
+/** Returns a validator that fails if value length exceeds `max`. */
+export function maxLength(max: number): Validator {
+  return (value: string) => {
+    if (value == null) value = '';
+    return value.length > max ? `Must be at most ${max} characters` : null;
+  };
+}
+
+/** Returns a validator that fails if value does not match the given regex. */
+export function pattern(regex: RegExp, message: string): Validator {
+  return (value: string) => {
+    if (value == null) value = '';
+    return regex.test(value) ? null : message;
+  };
+}
+
+/** Composes multiple validators, returning the first error encountered or null. */
+export function compose(...validators: Validator[]): Validator {
+  return (value: string) => {
+    for (const validator of validators) {
+      const error = validator(value);
+      if (error !== null) {
+        return error;
+      }
+    }
+    return null;
+  };
+}