@picked/svelte 0.0.1-dev.1789541668638 → 0.0.1-next.1

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

@@ -1,218 +0,0 @@
-<!--
-  @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

@@ -1,137 +0,0 @@
-<!--
-  @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

@@ -1,158 +0,0 @@
-<!--
-  @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

@@ -1,125 +0,0 @@
-<!--
-  @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

@@ -1,22 +0,0 @@
-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

@@ -1 +0,0 @@
-import e from"./actions/Button.svelte";import t from"./actions/CopyButton.svelte";import n from"./typography/Heading.svelte";import r from"./typography/Text.svelte";import i from"./layout/Card.svelte";import a from"./layout/Divider.svelte";import o from"./layout/Spacer.svelte";import s from"./layout/Stack.svelte";import c from"./forms/Checkbox.svelte";import l from"./forms/RadioGroup.svelte";import u from"./forms/Select.svelte";import d from"./forms/Switch.svelte";import f from"./forms/TextField.svelte";import p from"./feedback/Banner.svelte";import m from"./feedback/Spinner.svelte";import h from"./overlays/Tooltip.svelte";import g from"./data/Badge.svelte";import _ from"./data/CodeBlock.svelte";import v from"./data/DataTable.svelte";import y from"./data/EmptyState.svelte";import b from"./data/ExpandableRow.svelte";import x from"./data/VisualizationContainer.svelte";export{g as Badge,p as Banner,e as Button,i as Card,c as Checkbox,_ as CodeBlock,t as CopyButton,v as DataTable,a as Divider,y as EmptyState,b as ExpandableRow,n as Heading,l as RadioGroup,u as Select,o as Spacer,m as Spinner,s as Stack,d as Switch,r as Text,f as TextField,h as Tooltip,x as VisualizationContainer};