seblify 0.1.4

package/dist/components/action/input/field/pin-input/PinInput.svelte

@@ -0,0 +1,156 @@
+<script lang="ts">
+  import type { SeblifyProps } from 'seblify';
+
+  type Props = SeblifyProps<{
+    value?: string;
+    length?: number;
+    disabled?: boolean;
+    label?: string;
+    description?: string;
+    name?: string;
+  }>;
+
+  let {
+    value = $bindable(''),
+    length = 6,
+    disabled = false,
+    label,
+    description,
+    name,
+  }: Props = $props();
+
+  let inputElement: HTMLInputElement | undefined = $state();
+
+  const normalizedValue = $derived(value.slice(0, length));
+  const cells = $derived(
+    Array.from({ length }, (_, index) => normalizedValue[index] ?? ''),
+  );
+
+  function handleInput(event: Event): void {
+    const input = event.currentTarget as HTMLInputElement;
+    value = input.value.replace(/\D/g, '').slice(0, length);
+  }
+
+  function focusInput(): void {
+    inputElement?.focus();
+  }
+</script>
+
+<label class:disabled class="pin-input">
+  {#if label}
+    <span class="label">{label}</span>
+  {/if}
+  {#if description}
+    <span class="description">{description}</span>
+  {/if}
+
+  <button
+    aria-label={label ?? 'Pin code'}
+    class="cells"
+    {disabled}
+    onclick={focusInput}
+    type="button"
+  >
+    {#each cells as cell, index}
+      <span class:filled={Boolean(cell)} class="cell">
+        {cell}
+        {#if !cell && index === normalizedValue.length}
+          <span class="caret"></span>
+        {/if}
+      </span>
+    {/each}
+  </button>
+
+  <input
+    bind:this={inputElement}
+    autocomplete="one-time-code"
+    class="input"
+    {disabled}
+    inputmode="numeric"
+    {name}
+    oninput={handleInput}
+    pattern="[0-9]*"
+    type="text"
+    value={normalizedValue}
+  />
+</label>
+
+<style>
+  .pin-input {
+    display: grid;
+    gap: 8px;
+    color: var(--seblify-color-text, #172033);
+  }
+
+  .label {
+    font-weight: 700;
+    line-height: 1.35;
+  }
+
+  .description {
+    color: var(--seblify-color-text-muted, #516176);
+    font-size: 0.875rem;
+    line-height: 1.45;
+  }
+
+  .cells {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    width: fit-content;
+    border: 0;
+    padding: 0;
+    background: transparent;
+    cursor: text;
+  }
+
+  .cells:focus-visible .cell {
+    border-color: var(--seblify-color-fill-accent, #146a6f);
+    box-shadow: 0 0 0 3px var(--seblify-color-focus-ring, #9bd4d8);
+  }
+
+  .cell {
+    position: relative;
+    display: grid;
+    width: 42px;
+    height: 46px;
+    place-items: center;
+    border: 1px solid var(--seblify-color-border, #c8d2df);
+    border-radius: 8px;
+    background: var(--seblify-color-surface, #ffffff);
+    color: var(--seblify-color-text, #172033);
+    font-size: 1.2rem;
+    font-variant-numeric: tabular-nums;
+    font-weight: 800;
+  }
+
+  .filled {
+    border-color: var(--seblify-color-border-accent, #9ab7ba);
+    background: var(--seblify-color-surface-accent, #f7fbfb);
+  }
+
+  .caret {
+    width: 2px;
+    height: 20px;
+    background: var(--seblify-color-fill-accent, #146a6f);
+  }
+
+  .input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  .disabled {
+    cursor: not-allowed;
+    opacity: var(--seblify-opacity-disabled, 0.56);
+  }
+
+  .disabled .cells {
+    cursor: not-allowed;
+  }
+</style>

package/dist/components/action/input/field/pin-input/PinInput.svelte.d.ts

@@ -0,0 +1,10 @@
+declare const PinInput: import("svelte").Component<{
+    value?: string | undefined;
+    length?: number | undefined;
+    disabled?: boolean | undefined;
+    label?: string | undefined;
+    description?: string | undefined;
+    name?: string | undefined;
+}, {}, "value">;
+type PinInput = ReturnType<typeof PinInput>;
+export default PinInput;

package/dist/components/action/input/select/checkbox/Checkbox.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+  import type { SeblifyProps } from 'seblify';
+
+  type Props = SeblifyProps<{
+    checked?: boolean;
+    disabled?: boolean;
+    label?: string;
+    description?: string;
+    name?: string;
+    value?: string;
+  }>;
+
+  let {
+    checked = $bindable(false),
+    disabled = false,
+    label,
+    description,
+    name,
+    value,
+  }: Props = $props();
+</script>
+
+<label class:disabled class="checkbox">
+  <input bind:checked {disabled} {name} type="checkbox" {value} />
+  <span class="content">
+    {#if label}
+      <span class="label">{label}</span>
+    {/if}
+    {#if description}
+      <span class="description">{description}</span>
+    {/if}
+  </span>
+</label>
+
+<style>
+  .checkbox {
+    display: inline-flex;
+    gap: 10px;
+    align-items: flex-start;
+    color: var(--seblify-color-text, #172033);
+    cursor: pointer;
+  }
+
+  input {
+    width: 18px;
+    height: 18px;
+    margin: 2px 0 0;
+    accent-color: var(--seblify-color-fill-accent, #146a6f);
+  }
+
+  .content {
+    display: grid;
+    gap: 2px;
+  }
+
+  .label {
+    font-weight: 700;
+    line-height: 1.35;
+  }
+
+  .description {
+    color: var(--seblify-color-text-muted, #516176);
+    font-size: 0.875rem;
+    line-height: 1.45;
+  }
+
+  .disabled {
+    cursor: not-allowed;
+    opacity: var(--seblify-opacity-disabled, 0.56);
+  }
+</style>

package/dist/components/action/input/select/checkbox/Checkbox.svelte.d.ts

@@ -0,0 +1,10 @@
+declare const Checkbox: import("svelte").Component<{
+    checked?: boolean | undefined;
+    disabled?: boolean | undefined;
+    label?: string | undefined;
+    description?: string | undefined;
+    name?: string | undefined;
+    value?: string | undefined;
+}, {}, "checked">;
+type Checkbox = ReturnType<typeof Checkbox>;
+export default Checkbox;

package/dist/components/action/input/select/segment-control/SegmentControl.svelte

@@ -0,0 +1,150 @@
+<script lang="ts">
+  import type { SeblifyProps } from 'seblify';
+
+  export interface SegmentControlOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+  }
+
+  type Props = SeblifyProps<{
+    value?: string;
+    options: SegmentControlOption[];
+    label?: string;
+    description?: string;
+    name?: string;
+    disabled?: boolean;
+  }>;
+
+  let {
+    value = $bindable(''),
+    options,
+    label,
+    description,
+    name = 'segment-control',
+    disabled = false,
+  }: Props = $props();
+</script>
+
+<fieldset class="segment-control" class:disabled>
+  {#if label || description}
+    <legend>
+      {#if label}
+        <span class="label">{label}</span>
+      {/if}
+      {#if description}
+        <span class="description">{description}</span>
+      {/if}
+    </legend>
+  {/if}
+
+  <span
+    class="options"
+    style={`--segment-count: ${Math.max(options.length, 1)}`}
+  >
+    {#each options as option}
+      <label>
+        <input
+          bind:group={value}
+          disabled={disabled || option.disabled}
+          {name}
+          type="radio"
+          value={option.value}
+        />
+        <span>{option.label}</span>
+      </label>
+    {/each}
+  </span>
+</fieldset>
+
+<style>
+  .segment-control {
+    display: grid;
+    gap: 10px;
+    min-width: min(100%, 280px);
+    border: 0;
+    margin: 0;
+    padding: 0;
+    color: var(--seblify-color-text, #172033);
+  }
+
+  legend {
+    display: grid;
+    gap: 2px;
+    padding: 0;
+  }
+
+  .label {
+    font-weight: 700;
+    line-height: 1.35;
+  }
+
+  .description {
+    color: var(--seblify-color-text-muted, #516176);
+    font-size: 0.875rem;
+    line-height: 1.45;
+  }
+
+  .options {
+    display: grid;
+    grid-template-columns: repeat(var(--segment-count), minmax(0, 1fr));
+    width: fit-content;
+    max-width: 100%;
+    border: 1px solid var(--seblify-color-border-strong, #aab7c5);
+    border-radius: 999px;
+    background: var(--seblify-color-surface-muted, #d9e0e8);
+    padding: 3px;
+  }
+
+  label {
+    position: relative;
+    display: grid;
+    min-width: 76px;
+    cursor: pointer;
+  }
+
+  input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  label span {
+    display: grid;
+    min-height: 32px;
+    place-items: center;
+    border-radius: 999px;
+    padding: 6px 12px;
+    color: var(--seblify-color-text-muted, #516176);
+    font-size: 0.875rem;
+    font-weight: 800;
+    line-height: 1;
+    transition:
+      color 160ms ease,
+      background 160ms ease;
+  }
+
+  input:checked + span {
+    color: var(--seblify-color-fill-accent-text, #ffffff);
+    background: var(--seblify-color-fill-accent, #146a6f);
+  }
+
+  input:focus-visible + span {
+    outline: 3px solid var(--seblify-color-focus-ring, #9bd4d8);
+    outline-offset: 2px;
+  }
+
+  input:disabled + span {
+    cursor: not-allowed;
+    opacity: var(--seblify-opacity-disabled, 0.56);
+  }
+
+  .disabled {
+    cursor: not-allowed;
+  }
+</style>

package/dist/components/action/input/select/segment-control/SegmentControl.svelte.d.ts

@@ -0,0 +1,15 @@
+export interface SegmentControlOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+declare const SegmentControl: import("svelte").Component<{
+    value?: string | undefined;
+    options: SegmentControlOption[];
+    label?: string | undefined;
+    description?: string | undefined;
+    name?: string | undefined;
+    disabled?: boolean | undefined;
+}, {}, "value">;
+type SegmentControl = ReturnType<typeof SegmentControl>;
+export default SegmentControl;

package/dist/components/action/input/select/slider/Slider.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+  import type { SeblifyProps } from 'seblify';
+
+  type Props = SeblifyProps<{
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    label?: string;
+    name?: string;
+  }>;
+
+  let {
+    value = $bindable(0),
+    min = 0,
+    max = 100,
+    step = 1,
+    disabled = false,
+    label,
+    name,
+  }: Props = $props();
+</script>
+
+<label class:disabled class="slider">
+  {#if label}
+    <span class="label">{label}</span>
+  {/if}
+  <span class="control-row">
+    <input
+      bind:value
+      {disabled}
+      max={String(max)}
+      min={String(min)}
+      {name}
+      step={String(step)}
+      type="range"
+    />
+    <output>{value}</output>
+  </span>
+</label>
+
+<style>
+  .slider {
+    display: grid;
+    gap: 8px;
+    min-width: 240px;
+    color: var(--seblify-color-text, #172033);
+  }
+
+  .label {
+    font-weight: 700;
+    line-height: 1.35;
+  }
+
+  .control-row {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: 12px;
+    align-items: center;
+  }
+
+  input {
+    width: 100%;
+    accent-color: var(--seblify-color-fill-accent, #146a6f);
+  }
+
+  output {
+    min-width: 4ch;
+    color: var(--seblify-color-text-muted, #516176);
+    font-variant-numeric: tabular-nums;
+    text-align: right;
+  }
+
+  .disabled {
+    cursor: not-allowed;
+    opacity: var(--seblify-opacity-disabled, 0.56);
+  }
+</style>

package/dist/components/action/input/select/slider/Slider.svelte.d.ts

@@ -0,0 +1,11 @@
+declare const Slider: import("svelte").Component<{
+    value?: number | undefined;
+    min?: number | undefined;
+    max?: number | undefined;
+    step?: number | undefined;
+    disabled?: boolean | undefined;
+    label?: string | undefined;
+    name?: string | undefined;
+}, {}, "value">;
+type Slider = ReturnType<typeof Slider>;
+export default Slider;

package/dist/components/action/input/select/switch/Switch.svelte

@@ -0,0 +1,122 @@
+<script lang="ts">
+  import type { SeblifyProps } from 'seblify';
+
+  type Props = SeblifyProps<{
+    checked?: boolean;
+    disabled?: boolean;
+    label?: string;
+    description?: string;
+    name?: string;
+    value?: string;
+  }>;
+
+  let {
+    checked = $bindable(false),
+    disabled = false,
+    label,
+    description,
+    name,
+    value,
+  }: Props = $props();
+</script>
+
+<label class:disabled class="switch">
+  <input bind:checked {disabled} {name} role="switch" type="checkbox" {value} />
+  <span class="control" aria-hidden="true">
+    <span class="thumb"></span>
+  </span>
+  <span class="content">
+    {#if label}
+      <span class="label">{label}</span>
+    {/if}
+    {#if description}
+      <span class="description">{description}</span>
+    {/if}
+  </span>
+</label>
+
+<style>
+  .switch {
+    position: relative;
+    display: inline-flex;
+    gap: 12px;
+    align-items: flex-start;
+    color: var(--seblify-color-text, #172033);
+    cursor: pointer;
+  }
+
+  input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  .control {
+    display: inline-flex;
+    width: 42px;
+    height: 24px;
+    flex: 0 0 auto;
+    align-items: center;
+    border: 1px solid var(--seblify-color-border-strong, #aab7c5);
+    border-radius: 999px;
+    background: var(--seblify-color-surface-muted, #d9e0e8);
+    padding: 2px;
+    transition:
+      border-color 160ms ease,
+      background 160ms ease;
+  }
+
+  .thumb {
+    width: 18px;
+    height: 18px;
+    border-radius: 999px;
+    background: var(--seblify-color-surface, #ffffff);
+    box-shadow: var(--seblify-shadow-control, 0 1px 3px rgb(16 24 40 / 24%));
+    transition: transform 160ms ease;
+  }
+
+  input:checked + .control {
+    border-color: var(--seblify-color-fill-accent, #146a6f);
+    background: var(--seblify-color-fill-accent, #146a6f);
+  }
+
+  input:checked + .control .thumb {
+    background: var(--seblify-color-fill-accent-text, #ffffff);
+  }
+
+  input:checked + .control .thumb {
+    transform: translateX(18px);
+  }
+
+  input:focus-visible + .control {
+    outline: 3px solid var(--seblify-color-focus-ring, #9bd4d8);
+    outline-offset: 2px;
+  }
+
+  .content {
+    display: grid;
+    gap: 2px;
+    min-width: 0;
+  }
+
+  .label {
+    font-weight: 700;
+    line-height: 1.35;
+  }
+
+  .description {
+    color: var(--seblify-color-text-muted, #516176);
+    font-size: 0.875rem;
+    line-height: 1.45;
+  }
+
+  .disabled {
+    cursor: not-allowed;
+    opacity: var(--seblify-opacity-disabled, 0.56);
+  }
+</style>

package/dist/components/action/input/select/switch/Switch.svelte.d.ts

@@ -0,0 +1,10 @@
+declare const Switch: import("svelte").Component<{
+    checked?: boolean | undefined;
+    disabled?: boolean | undefined;
+    label?: string | undefined;
+    description?: string | undefined;
+    name?: string | undefined;
+    value?: string | undefined;
+}, {}, "checked">;
+type Switch = ReturnType<typeof Switch>;
+export default Switch;

package/dist/components/action/input/select/theme-switch/ThemeSwitch.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import type { SeblifyProps } from 'seblify';
+  import SegmentControl from '../segment-control/SegmentControl.svelte';
+
+  type ThemeMode = 'system' | 'light' | 'dark';
+
+  type Props = SeblifyProps<{
+    value?: ThemeMode;
+    label?: string;
+    description?: string;
+    name?: string;
+    applyToDocument?: boolean;
+  }>;
+
+  let {
+    value = $bindable('system'),
+    label = 'Theme',
+    description = 'Choose how Seblify should resolve colors.',
+    name = 'seblify-theme',
+    applyToDocument = true,
+  }: Props = $props();
+
+  const options: { value: ThemeMode; label: string }[] = [
+    { value: 'system', label: 'System' },
+    { value: 'light', label: 'Light' },
+    { value: 'dark', label: 'Dark' },
+  ];
+
+  $effect(() => {
+    if (!applyToDocument || typeof document === 'undefined') {
+      return;
+    }
+
+    if (value === 'system') {
+      delete document.documentElement.dataset.theme;
+      return;
+    }
+
+    document.documentElement.dataset.theme = value;
+  });
+</script>
+
+<SegmentControl bind:value {description} {label} {name} {options} />

package/dist/components/action/input/select/theme-switch/ThemeSwitch.svelte.d.ts

@@ -0,0 +1,10 @@
+type ThemeMode = 'system' | 'light' | 'dark';
+declare const ThemeSwitch: import("svelte").Component<{
+    value?: ThemeMode | undefined;
+    label?: string | undefined;
+    description?: string | undefined;
+    name?: string | undefined;
+    applyToDocument?: boolean | undefined;
+}, {}, "value">;
+type ThemeSwitch = ReturnType<typeof ThemeSwitch>;
+export default ThemeSwitch;