@picked/svelte 0.0.45-next.1 → 0.0.45-next.2

package/dist/plugins/devtools/ui/forms/RadioGroup.svelte

@@ -0,0 +1,218 @@
+<!--
+  @paired-component apps/dashboard/src/shared/ui/forms/radio-group.tsx
+  @design-parity Props, variants, sizes, and visual output must stay in sync
+  with the Dashboard React counterpart. When modifying this component, replicate
+  the change in the paired React component to maintain visual and behavioral parity.
+-->
+<script lang="ts">
+  interface RadioOption {
+    value: string
+    label: string
+    helpText?: string
+    disabled?: boolean
+  }
+
+  interface Props {
+    label: string
+    name: string
+    options: RadioOption[]
+    value?: string
+    onchange?: (value: string) => void
+    error?: string
+    helpText?: string
+    disabled?: boolean
+    required?: boolean
+    orientation?: 'horizontal' | 'vertical'
+  }
+
+  let {
+    label,
+    name,
+    options,
+    value = '',
+    onchange,
+    error,
+    helpText,
+    disabled = false,
+    required = false,
+    orientation = 'vertical',
+  }: Props = $props()
+
+  let groupId = $derived(`radio-${name}`)
+  let errorId = $derived(`${groupId}-error`)
+  let helpId = $derived(`${groupId}-help`)
+
+  function handleChange(event: Event): void {
+    if (event.target instanceof HTMLInputElement) {
+      onchange?.(event.target.value)
+    }
+  }
+</script>
+
+<div
+  class="radio-group"
+  role="radiogroup"
+  aria-labelledby="{groupId}-label"
+  aria-describedby={error ? errorId : helpText ? helpId : undefined}
+  data-name={name}
+>
+  <span id="{groupId}-label" class="group-label">
+    {label}
+    {#if required}<span class="required"> *</span>{/if}
+  </span>
+
+  <div class="options orientation-{orientation}">
+    {#each options as option}
+      <label class="radio-label" class:is-disabled={disabled || option.disabled}>
+        <input
+          type="radio"
+          class="radio-input"
+          {name}
+          value={option.value}
+          checked={value === option.value}
+          disabled={disabled || option.disabled}
+          onchange={handleChange}
+        />
+        <span
+          class="radio-circle"
+          class:selected={value === option.value}
+          aria-hidden="true"
+        >
+          {#if value === option.value}
+            <span class="radio-dot"></span>
+          {/if}
+        </span>
+        <span class="option-content">
+          <span class="option-label">{option.label}</span>
+          {#if option.helpText}
+            <span class="option-help">{option.helpText}</span>
+          {/if}
+        </span>
+      </label>
+    {/each}
+  </div>
+
+  {#if error}
+    <p id={errorId} class="error-text">{error}</p>
+  {:else if helpText}
+    <p id={helpId} class="help-text">{helpText}</p>
+  {/if}
+</div>
+
+<style>
+  .radio-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+  }
+
+  .group-label {
+    font-size: var(--text-sm);
+    font-weight: var(--font-medium);
+    color: var(--color-gray-900);
+  }
+
+  .required {
+    color: var(--color-red-500);
+  }
+
+  .options {
+    display: flex;
+  }
+
+  .orientation-horizontal {
+    flex-direction: row;
+    gap: var(--space-4);
+  }
+
+  .orientation-vertical {
+    flex-direction: column;
+    gap: var(--space-2);
+  }
+
+  .radio-label {
+    display: flex;
+    cursor: pointer;
+    align-items: flex-start;
+    gap: var(--space-2);
+  }
+
+  .radio-label.is-disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .radio-input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+
+  .radio-circle {
+    margin-top: 0.125rem;
+    display: flex;
+    width: 1rem;
+    height: 1rem;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-full);
+    border: 1px solid var(--color-gray-300);
+    background-color: var(--color-white);
+    transition: border-color 0.15s ease, background-color 0.15s ease;
+  }
+
+  .radio-circle.selected {
+    border-color: var(--color-blue-600);
+    background-color: var(--color-blue-600);
+  }
+
+  .radio-circle:not(.selected):hover {
+    border-color: var(--color-gray-500);
+  }
+
+  .radio-input:focus-visible + .radio-circle {
+    outline: var(--ring-width) solid var(--ring-color);
+    outline-offset: var(--ring-offset);
+  }
+
+  .radio-dot {
+    width: 0.375rem;
+    height: 0.375rem;
+    border-radius: var(--radius-full);
+    background-color: var(--color-white);
+  }
+
+  .option-content {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .option-label {
+    font-size: var(--text-sm);
+    color: var(--color-gray-900);
+  }
+
+  .option-help {
+    font-size: var(--text-xs);
+    color: var(--color-gray-500);
+  }
+
+  .error-text {
+    font-size: var(--text-sm);
+    color: var(--color-red-600);
+    margin: 0;
+  }
+
+  .help-text {
+    font-size: var(--text-sm);
+    color: var(--color-gray-500);
+    margin: 0;
+  }
+</style>

package/dist/plugins/devtools/ui/forms/Select.svelte

@@ -0,0 +1,137 @@
+<!--
+  @paired-component apps/dashboard/src/shared/ui/forms/select.tsx
+  @design-parity Props, variants, sizes, and visual output must stay in sync
+  with the Dashboard React counterpart. When modifying this component, replicate
+  the change in the paired React component to maintain visual and behavioral parity.
+-->
+<script lang="ts">
+  interface SelectOption {
+    value: string
+    label: string
+    disabled?: boolean
+  }
+
+  interface Props {
+    label: string
+    name: string
+    options: SelectOption[]
+    value?: string
+    onchange?: (value: string) => void
+    placeholder?: string
+    error?: string
+    helpText?: string
+    disabled?: boolean
+    required?: boolean
+  }
+
+  let {
+    label,
+    name,
+    options,
+    value = '',
+    onchange,
+    placeholder,
+    error,
+    helpText,
+    disabled = false,
+    required = false,
+  }: Props = $props()
+
+  let selectId = $derived(`select-${name}`)
+  let errorId = $derived(`${selectId}-error`)
+  let helpId = $derived(`${selectId}-help`)
+
+  function handleChange(event: Event): void {
+    if (event.target instanceof HTMLSelectElement) {
+      onchange?.(event.target.value)
+    }
+  }
+</script>
+
+<div class="select-field">
+  <label class="label" for={selectId}>
+    {label}
+    {#if required}<span class="required"> *</span>{/if}
+  </label>
+  <select
+    id={selectId}
+    class="select"
+    class:has-error={!!error}
+    {name}
+    {disabled}
+    {required}
+    {value}
+    aria-invalid={error ? true : undefined}
+    aria-describedby={error ? errorId : helpText ? helpId : undefined}
+    onchange={handleChange}
+  >
+    {#if placeholder}
+      <option value="" disabled>{placeholder}</option>
+    {/if}
+    {#each options as option}
+      <option value={option.value} disabled={option.disabled}>{option.label}</option>
+    {/each}
+  </select>
+  {#if error}
+    <p id={errorId} class="error-text">{error}</p>
+  {:else if helpText}
+    <p id={helpId} class="help-text">{helpText}</p>
+  {/if}
+</div>
+
+<style>
+  .select-field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+  }
+
+  .label {
+    font-size: var(--text-sm);
+    font-weight: var(--font-medium);
+    color: var(--color-gray-900);
+  }
+
+  .required {
+    color: var(--color-red-500);
+  }
+
+  .select {
+    border-radius: var(--radius-md);
+    border: 1px solid var(--color-gray-300);
+    padding: var(--space-2) var(--space-3);
+    font-size: var(--text-sm);
+    font-family: inherit;
+    color: var(--color-gray-900);
+    background-color: var(--color-white);
+    appearance: auto;
+    transition: border-color 0.15s ease;
+  }
+
+  .select:focus {
+    outline: none;
+    box-shadow: 0 0 0 var(--ring-width) var(--ring-color);
+  }
+
+  .select.has-error {
+    border-color: var(--color-red-500);
+  }
+
+  .select:disabled {
+    cursor: not-allowed;
+    background-color: var(--color-gray-100);
+    opacity: 0.5;
+  }
+
+  .error-text {
+    font-size: var(--text-sm);
+    color: var(--color-red-600);
+    margin: 0;
+  }
+
+  .help-text {
+    font-size: var(--text-sm);
+    color: var(--color-gray-500);
+    margin: 0;
+  }
+</style>

package/dist/plugins/devtools/ui/forms/Switch.svelte

@@ -0,0 +1,158 @@
+<!--
+  @paired-component apps/dashboard/src/shared/ui/forms/switch.tsx
+  @design-parity Props, variants, sizes, and visual output must stay in sync
+  with the Dashboard React counterpart. When modifying this component, replicate
+  the change in the paired React component to maintain visual and behavioral parity.
+-->
+<script lang="ts">
+  interface Props {
+    label: string
+    name: string
+    checked?: boolean
+    onchange?: (checked: boolean) => void
+    helpText?: string
+    disabled?: boolean
+    size?: 'small' | 'medium'
+  }
+
+  let {
+    label,
+    name,
+    checked = false,
+    onchange,
+    helpText,
+    disabled = false,
+    size = 'medium',
+  }: Props = $props()
+
+  function handleClick(): void {
+    if (!disabled) {
+      onchange?.(!checked)
+    }
+  }
+
+  function handleKeydown(event: KeyboardEvent): void {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault()
+      handleClick()
+    }
+  }
+</script>
+
+<div class="switch-field">
+  <label class="switch-label" class:is-disabled={disabled}>
+    <button
+      type="button"
+      class="switch-track size-{size}"
+      class:checked
+      role="switch"
+      aria-checked={checked}
+      aria-label={label}
+      {disabled}
+      {name}
+      onclick={handleClick}
+      onkeydown={handleKeydown}
+    >
+      <span class="switch-thumb size-{size}" class:checked></span>
+    </button>
+    <span class="label-text">{label}</span>
+  </label>
+  {#if helpText}
+    <p class="help-text">{helpText}</p>
+  {/if}
+</div>
+
+<style>
+  .switch-field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+  }
+
+  .switch-label {
+    display: flex;
+    cursor: pointer;
+    align-items: center;
+    gap: var(--space-3);
+  }
+
+  .switch-label.is-disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .switch-track {
+    position: relative;
+    display: inline-flex;
+    flex-shrink: 0;
+    border-radius: var(--radius-full);
+    background-color: var(--color-gray-200);
+    border: none;
+    cursor: pointer;
+    padding: 0;
+    transition: background-color 0.2s ease;
+  }
+
+  .switch-track.size-small {
+    width: 2.25rem;
+    height: 1.25rem;
+  }
+
+  .switch-track.size-medium {
+    width: 2.75rem;
+    height: 1.5rem;
+  }
+
+  .switch-track.checked {
+    background-color: var(--color-blue-600);
+  }
+
+  .switch-track:focus-visible {
+    outline: var(--ring-width) solid var(--ring-color);
+    outline-offset: var(--ring-offset);
+  }
+
+  .switch-track:disabled {
+    cursor: not-allowed;
+  }
+
+  .switch-thumb {
+    display: inline-block;
+    transform: translateX(0.125rem);
+    border-radius: var(--radius-full);
+    background-color: var(--color-white);
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+    transition: transform 0.2s ease;
+    margin-top: 1px;
+  }
+
+  .switch-thumb.size-small {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  .switch-thumb.size-medium {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
+  .switch-thumb.size-small.checked {
+    transform: translateX(1rem);
+  }
+
+  .switch-thumb.size-medium.checked {
+    transform: translateX(1.25rem);
+  }
+
+  .label-text {
+    font-size: var(--text-sm);
+    font-weight: var(--font-medium);
+    color: var(--color-gray-900);
+  }
+
+  .help-text {
+    margin: 0;
+    font-size: var(--text-sm);
+    color: var(--color-gray-500);
+  }
+</style>

package/dist/plugins/devtools/ui/forms/TextField.svelte

@@ -0,0 +1,125 @@
+<!--
+  @paired-component apps/dashboard/src/shared/ui/forms/text-field.tsx
+  @design-parity Props, variants, sizes, and visual output must stay in sync
+  with the Dashboard React counterpart. When modifying this component, replicate
+  the change in the paired React component to maintain visual and behavioral parity.
+-->
+<script lang="ts">
+  interface Props {
+    label: string
+    name: string
+    type?: 'text' | 'email' | 'password' | 'number'
+    placeholder?: string
+    value?: string
+    oninput?: (value: string) => void
+    error?: string
+    helpText?: string
+    disabled?: boolean
+    required?: boolean
+  }
+
+  let {
+    label,
+    name,
+    type = 'text',
+    placeholder,
+    value = '',
+    oninput,
+    error,
+    helpText,
+    disabled = false,
+    required = false,
+  }: Props = $props()
+
+  let inputId = $derived(`field-${name}`)
+  let errorId = $derived(`${inputId}-error`)
+  let helpId = $derived(`${inputId}-help`)
+
+  function handleInput(event: Event): void {
+    if (event.target instanceof HTMLInputElement) {
+      oninput?.(event.target.value)
+    }
+  }
+</script>
+
+<div class="text-field">
+  <label class="label" for={inputId}>
+    {label}
+    {#if required}<span class="required"> *</span>{/if}
+  </label>
+  <input
+    id={inputId}
+    class="input"
+    class:has-error={!!error}
+    {type}
+    {name}
+    {placeholder}
+    {value}
+    {disabled}
+    {required}
+    aria-invalid={error ? true : undefined}
+    aria-describedby={error ? errorId : helpText ? helpId : undefined}
+    oninput={handleInput}
+  />
+  {#if error}
+    <p id={errorId} class="error-text">{error}</p>
+  {:else if helpText}
+    <p id={helpId} class="help-text">{helpText}</p>
+  {/if}
+</div>
+
+<style>
+  .text-field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+  }
+
+  .label {
+    font-size: var(--text-sm);
+    font-weight: var(--font-medium);
+    color: var(--color-gray-900);
+  }
+
+  .required {
+    color: var(--color-red-500);
+  }
+
+  .input {
+    border-radius: var(--radius-md);
+    border: 1px solid var(--color-gray-300);
+    padding: var(--space-2) var(--space-3);
+    font-size: var(--text-sm);
+    font-family: inherit;
+    color: var(--color-gray-900);
+    background-color: var(--color-white);
+    transition: border-color 0.15s ease;
+  }
+
+  .input:focus {
+    outline: none;
+    box-shadow: 0 0 0 var(--ring-width) var(--ring-color);
+  }
+
+  .input.has-error {
+    border-color: var(--color-red-500);
+  }
+
+  .input:disabled {
+    cursor: not-allowed;
+    background-color: var(--color-gray-100);
+    opacity: 0.5;
+  }
+
+  .error-text {
+    font-size: var(--text-sm);
+    color: var(--color-red-600);
+    margin: 0;
+  }
+
+  .help-text {
+    font-size: var(--text-sm);
+    color: var(--color-gray-500);
+    margin: 0;
+  }
+</style>

package/dist/plugins/devtools/ui/index.d.ts

@@ -0,0 +1,22 @@
+export { default as Button } from './actions/Button.svelte';
+export { default as CopyButton } from './actions/CopyButton.svelte';
+export { default as Heading } from './typography/Heading.svelte';
+export { default as Text } from './typography/Text.svelte';
+export { default as Card } from './layout/Card.svelte';
+export { default as Divider } from './layout/Divider.svelte';
+export { default as Spacer } from './layout/Spacer.svelte';
+export { default as Stack } from './layout/Stack.svelte';
+export { default as Checkbox } from './forms/Checkbox.svelte';
+export { default as RadioGroup } from './forms/RadioGroup.svelte';
+export { default as Select } from './forms/Select.svelte';
+export { default as Switch } from './forms/Switch.svelte';
+export { default as TextField } from './forms/TextField.svelte';
+export { default as Banner } from './feedback/Banner.svelte';
+export { default as Spinner } from './feedback/Spinner.svelte';
+export { default as Tooltip } from './overlays/Tooltip.svelte';
+export { default as Badge } from './data/Badge.svelte';
+export { default as CodeBlock } from './data/CodeBlock.svelte';
+export { default as DataTable } from './data/DataTable.svelte';
+export { default as EmptyState } from './data/EmptyState.svelte';
+export { default as ExpandableRow } from './data/ExpandableRow.svelte';
+export { default as VisualizationContainer } from './data/VisualizationContainer.svelte';

package/dist/plugins/devtools/ui/index.js

@@ -0,0 +1 @@
+import{default as t}from"./actions/Button.svelte";import{default as r}from"./actions/CopyButton.svelte";import{default as d}from"./typography/Heading.svelte";import{default as p}from"./typography/Text.svelte";import{default as x}from"./layout/Card.svelte";import{default as s}from"./layout/Divider.svelte";import{default as n}from"./layout/Spacer.svelte";import{default as S}from"./layout/Stack.svelte";import{default as C}from"./forms/Checkbox.svelte";import{default as b}from"./forms/RadioGroup.svelte";import{default as g}from"./forms/Select.svelte";import{default as w}from"./forms/Switch.svelte";import{default as D}from"./forms/TextField.svelte";import{default as R}from"./feedback/Banner.svelte";import{default as z}from"./feedback/Spinner.svelte";import{default as G}from"./overlays/Tooltip.svelte";import{default as V}from"./data/Badge.svelte";import{default as q}from"./data/CodeBlock.svelte";import{default as I}from"./data/DataTable.svelte";import{default as K}from"./data/EmptyState.svelte";import{default as M}from"./data/ExpandableRow.svelte";import{default as O}from"./data/VisualizationContainer.svelte";export{V as Badge,R as Banner,t as Button,x as Card,C as Checkbox,q as CodeBlock,r as CopyButton,I as DataTable,s as Divider,K as EmptyState,M as ExpandableRow,d as Heading,b as RadioGroup,g as Select,n as Spacer,z as Spinner,S as Stack,w as Switch,p as Text,D as TextField,G as Tooltip,O as VisualizationContainer};