@kouji-ui/components 0.1.1 → 0.1.2

package/src/checkbox/_examples/checkbox.default.example.ts

@@ -1,20 +0,0 @@
-import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
-import { KjCheckboxComponent } from '../checkbox';
-
-@Component({
-  selector: 'kj-checkbox-default-example',
-  standalone: true,
-  imports: [KjCheckboxComponent],
-  styles: [
-    `
-      :host {
-        display: block;
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `<kj-checkbox [(checked)]="value">Accept terms</kj-checkbox>`,
-})
-export class KjCheckboxDefaultExample {
-  readonly value = signal(false);
-}

package/src/checkbox/_examples/checkbox.disabled.example.ts

@@ -1,26 +0,0 @@
-import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
-import { KjCheckboxComponent } from '../checkbox';
-
-@Component({
-  selector: 'kj-checkbox-disabled-example',
-  standalone: true,
-  imports: [KjCheckboxComponent],
-  styles: [
-    `
-      :host {
-        display: block;
-        display: flex;
-        gap: 1rem;
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <kj-checkbox [(checked)]="off" [disabled]="true">Disabled off</kj-checkbox>
-    <kj-checkbox [(checked)]="on" [disabled]="true">Disabled on</kj-checkbox>
-  `,
-})
-export class KjCheckboxDisabledExample {
-  readonly off = signal(false);
-  readonly on = signal(true);
-}

package/src/checkbox/_examples/checkbox.indeterminate.example.ts

@@ -1,20 +0,0 @@
-import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
-import { KjCheckboxComponent } from '../checkbox';
-
-@Component({
-  selector: 'kj-checkbox-indeterminate-example',
-  standalone: true,
-  imports: [KjCheckboxComponent],
-  styles: [
-    `
-      :host {
-        display: block;
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `<kj-checkbox [(checked)]="value" [indeterminate]="true">Mixed selection</kj-checkbox>`,
-})
-export class KjCheckboxIndeterminateExample {
-  readonly value = signal(false);
-}

package/src/checkbox/_examples/checkbox.usage.example.ts

@@ -1,62 +0,0 @@
-import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
-import { KjCheckboxComponent } from '../checkbox';
-
-/**
- * A walkthrough of the most common checkbox usages — basic checked binding,
- * indeterminate "parent" state, size variants, and disabled. Use this as the
- * copy-paste starting point for forms.
- */
-@Component({
-  selector: 'kj-checkbox-usage-example',
-  standalone: true,
-  imports: [KjCheckboxComponent],
-  styles: [
-    `
-      :host {
-        display: flex;
-        flex-direction: column;
-        gap: var(--kj-space-md);
-      }
-      .row {
-        display: flex;
-        gap: var(--kj-space-md);
-        flex-wrap: wrap;
-        align-items: center;
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <div class="row">
-      <kj-checkbox [(checked)]="terms">Accept terms</kj-checkbox>
-      <kj-checkbox [(checked)]="newsletter">Subscribe to newsletter</kj-checkbox>
-    </div>
-
-    <div class="row">
-      <kj-checkbox [(checked)]="all" [indeterminate]="someSelected()">Select all</kj-checkbox>
-    </div>
-
-    <div class="row">
-      <kj-checkbox size="sm" [(checked)]="small">Small</kj-checkbox>
-      <kj-checkbox size="md" [(checked)]="medium">Medium</kj-checkbox>
-      <kj-checkbox size="lg" [(checked)]="large">Large</kj-checkbox>
-    </div>
-
-    <div class="row">
-      <kj-checkbox [disabled]="true">Disabled (unchecked)</kj-checkbox>
-      <kj-checkbox [disabled]="true" [checked]="true">Disabled (checked)</kj-checkbox>
-    </div>
-  `,
-})
-export class KjCheckboxUsageExample {
-  readonly terms = signal(true);
-  readonly newsletter = signal(false);
-  readonly all = signal(false);
-  readonly small = signal(false);
-  readonly medium = signal(true);
-  readonly large = signal(false);
-
-  someSelected(): boolean {
-    return !this.all() && this.newsletter();
-  }
-}

package/src/checkbox/_examples/index.ts

@@ -1,7 +0,0 @@
-// AUTO-GENERATED by scripts/migrate-examples.mjs
-// One barrel per component folder — used by the docs app as a lazy chunk.
-export { KjCheckboxCheckedExample } from './checkbox.checked.example';
-export { KjCheckboxDefaultExample } from './checkbox.default.example';
-export { KjCheckboxDisabledExample } from './checkbox.disabled.example';
-export { KjCheckboxIndeterminateExample } from './checkbox.indeterminate.example';
-export { KjCheckboxUsageExample } from './checkbox.usage.example';

package/src/checkbox/checkbox.css

@@ -1,74 +0,0 @@
-@layer kj.component {
-  /* Outer host. Acts as a single click target whose label area forwards to
-     the inner box. */
-  .kj-checkbox {
-    display: inline-flex;
-  }
-
-  .kj-checkbox-inner {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--kj-space-sm);
-    cursor: pointer;
-    color: var(--kj-fg-default);
-    font: 0.875rem / 1.4 var(--kj-font-sans);
-  }
-  .kj-checkbox-label { user-select: none; }
-
-  /* The interactive box (carries the kjCheckbox directive). */
-  .kj-checkbox-box {
-    --kj-checkbox-size:        1rem;
-    --kj-checkbox-bg:          var(--kj-bg-body);
-    --kj-checkbox-bg-checked:  var(--kj-bg-primary);
-    --kj-checkbox-fg-checked:  var(--kj-fg-on-primary);
-    --kj-checkbox-border:      var(--kj-border-default);
-    --kj-checkbox-radius:      var(--kj-radius-selector);
-
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    width: var(--kj-checkbox-size);
-    height: var(--kj-checkbox-size);
-    background: var(--kj-checkbox-bg);
-    border: var(--kj-border) solid var(--kj-checkbox-border);
-    border-radius: var(--kj-checkbox-radius);
-    transition: var(--kj-transition);
-  }
-
-  .kj-checkbox-box[data-checked] {
-    background: var(--kj-checkbox-bg-checked);
-    border-color: var(--kj-checkbox-bg-checked);
-  }
-  .kj-checkbox-box[data-checked]::after {
-    content: '✓';
-    color: var(--kj-checkbox-fg-checked);
-    font-size: 0.75rem;
-    line-height: 1;
-  }
-
-  .kj-checkbox-box[data-indeterminate]::after {
-    content: '';
-    width: 60%;
-    height: 2px;
-    background: var(--kj-checkbox-fg-checked);
-  }
-  .kj-checkbox-box[data-indeterminate] {
-    background: var(--kj-checkbox-bg-checked);
-    border-color: var(--kj-checkbox-bg-checked);
-  }
-
-  .kj-checkbox-box[data-size="sm"] { --kj-checkbox-size: 0.875rem; }
-  .kj-checkbox-box[data-size="lg"] { --kj-checkbox-size: 1.25rem; }
-
-  .kj-checkbox-box:focus-visible { outline: 2px solid var(--kj-border-focus); outline-offset: 2px; }
-
-  /* Disabled — dim the whole checkbox (box + label text) for visual
-     consistency with native form controls. */
-  .kj-checkbox[data-disabled] .kj-checkbox-inner { cursor: not-allowed; }
-  .kj-checkbox[data-disabled] .kj-checkbox-box,
-  .kj-checkbox[data-disabled] .kj-checkbox-label {
-    opacity: 0.45;
-  }
-  .kj-checkbox[data-disabled] .kj-checkbox-box { pointer-events: none; }
-}

package/src/checkbox/checkbox.playground.ts

@@ -1,68 +0,0 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { KjCheckboxComponent } from './checkbox';
-import type { PlaygroundFile } from '@kouji-ui/components/playground-types';
-
-/**
- * Playground state — module-scope signals. Knobs cover the visible axes of
- * `KjCheckboxComponent` (size, checked, indeterminate, disabled) plus the
- * label text projected into the slot.
- */
-const size = signal<'sm' | 'md' | 'lg'>('md');
-const checked = signal(false);
-const indeterminate = signal(false);
-const disabled = signal(false);
-const label = signal('Accept the terms');
-
-@Component({
-  selector: 'kj-checkbox-playground',
-  standalone: true,
-  imports: [KjCheckboxComponent],
-  template: `
-    <kj-checkbox
-      [size]="size()"
-      [(checked)]="checked"
-      [indeterminate]="indeterminate()"
-      [disabled]="disabled()"
-    >{{ label() }}</kj-checkbox>
-  `,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KjCheckboxPlaygroundDemo {
-  protected readonly size = size;
-  protected readonly checked = checked;
-  protected readonly indeterminate = indeterminate;
-  protected readonly disabled = disabled;
-  protected readonly label = label;
-}
-
-export const PLAYGROUND: PlaygroundFile = {
-  component: KjCheckboxPlaygroundDemo,
-  state: {
-    size: size as unknown as ReturnType<typeof signal>,
-    checked: checked as unknown as ReturnType<typeof signal>,
-    indeterminate: indeterminate as unknown as ReturnType<typeof signal>,
-    disabled: disabled as unknown as ReturnType<typeof signal>,
-    label: label as unknown as ReturnType<typeof signal>,
-  },
-  controls: [
-    { kind: 'chips', name: 'size', label: 'size', options: ['sm', 'md', 'lg'] },
-    { kind: 'text', name: 'label', label: 'label' },
-    { kind: 'toggle', name: 'checked', label: 'checked' },
-    { kind: 'toggle', name: 'indeterminate', label: 'indeterminate' },
-    { kind: 'toggle', name: 'disabled', label: 'disabled' },
-  ],
-  snippet: (values) => {
-    const s = values as {
-      size: string;
-      checked: boolean;
-      indeterminate: boolean;
-      disabled: boolean;
-      label: string;
-    };
-    const attrs: string[] = [`size="${s.size}"`];
-    if (s.checked) attrs.push('[checked]="true"');
-    if (s.indeterminate) attrs.push('[indeterminate]="true"');
-    if (s.disabled) attrs.push('[disabled]="true"');
-    return `<kj-checkbox\n  ${attrs.join('\n  ')}\n>${s.label}</kj-checkbox>`;
-  },
-};

package/src/checkbox/checkbox.ts

@@ -1,122 +0,0 @@
-import { Component, ChangeDetectionStrategy, ViewEncapsulation, model, input, viewChild, ElementRef } from '@angular/core';
-import { KjCheckbox } from '@kouji-ui/core';
-
-let checkboxIdCounter = 0;
-
-/**
- * Styled wrapper around the headless `KjCheckbox` directive.
- *
- * The host renders a `<label>` wrapping the checkbox box and any projected
- * content (label text). Clicking anywhere on the label checks/unchecks the
- * box. When `disabled` is set, both the box and label text dim via
- * `[data-disabled]` on the host.
- *
- * @doc-example Default
- *   The default checkbox bound to a `signal<boolean>` via `[(checked)]`.
- *   @doc-file checkbox.default.example.ts
- * @doc-example Usage
- *   A walkthrough of the most common checkbox usages — checked binding,
- *   indeterminate parent, size variants, and disabled.
- *   @doc-file checkbox.usage.example.ts
- * @doc-example Checked
- *   Pre-selected on first render. Two-way bind to persist user changes.
- *   @doc-file checkbox.checked.example.ts
- * @doc-example Indeterminate
- *   Tri-state "some-of-many" parent for a select-all row.
- *   @doc-file checkbox.indeterminate.example.ts
- * @doc-example Disabled
- *   `[disabled]="true"` dims the box + label and removes pointer events.
- *   @doc-file checkbox.disabled.example.ts
- *
- * @doc-keyboard
- *   Space — Toggles the checked state
- *   Tab   — Moves focus to the next focusable element
- *
- * @doc-aria
- *   role="checkbox"     — Applied to the inner focusable box by the headless directive
- *   aria-checked        — Reflects `true`, `false`, or `"mixed"` for indeterminate
- *   aria-disabled       — Reflected when `[disabled]` is true
- *   aria-labelledby     — Auto-wired to the projected label span
- *   data-disabled       — Mirrors the disabled posture for theme/scope hooks
- *   data-indeterminate  — Reflects the indeterminate posture for the dash glyph
- *
- * @doc-css-var
- *   --kj-checkbox-size         — Box edge length. `data-size="sm|lg"` overrides; default 1rem.
- *   --kj-checkbox-bg           — Unchecked background fill. Defaults to --kj-bg-body.
- *   --kj-checkbox-bg-checked   — Background when checked or indeterminate. Defaults to --kj-bg-primary.
- *   --kj-checkbox-fg-checked   — Checkmark/dash color. Defaults to --kj-fg-on-primary.
- *   --kj-checkbox-border       — Border color when unchecked. Defaults to --kj-border-default.
- *   --kj-checkbox-radius       — Corner radius of the box. Inherits --kj-radius-selector.
- *
- * @doc-touch
- *   The wrapping label is the click target — its width plus the `lg` size keeps
- *   the touch surface ≥ 44×44px. For dense form rows, `sm` / `md` rely on the
- *   inline-text-link exception (WCAG 2.5.5).
- *
- * @doc-a11y
- *   The visible label and the box share a single click region — the label
- *   forwards taps to the inner focusable span (which is the actual checkbox
- *   per the WAI-ARIA Checkbox pattern). Focus is restricted to the box;
- *   `:focus-visible` shows a 2px ring. Indeterminate is a presentation-only
- *   tri-state — committing to a value still flips between checked/unchecked.
- *
- * @doc-related toggle,radio,field
- *
- * @doc-category Library/Data input
- * @doc
- * @doc-name checkbox
- * @doc-description Themed checkbox with label, indeterminate state, and size variants for use in forms.
- * @doc-is-main
- */
-@Component({
-  selector: 'kj-checkbox',
-  standalone: true,
-  imports: [KjCheckbox],
-  template: `
-    <!-- Click-region wrapper. The focusable element is the inner kjCheckbox span
-         (role="checkbox", tabindex, Space handler); this div only proxies pointer
-         events from the label area, so the lint rules below don't apply. -->
-    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->
-    <div class="kj-checkbox-inner" (click)="onLabelClick($event)">
-      <span
-        #box
-        kjCheckbox
-        tabindex="0"
-        class="kj-checkbox-box"
-        [(kjChecked)]="checked"
-        [kjDisabled]="disabled()"
-        [attr.data-size]="size()"
-        [attr.data-indeterminate]="indeterminate() ? '' : null"
-        [attr.aria-labelledby]="labelId"
-      ></span>
-      <span class="kj-checkbox-label" [id]="labelId"><ng-content /></span>
-    </div>
-  `,
-  styleUrl: './checkbox.css',
-  encapsulation: ViewEncapsulation.None,
-  host: {
-    'class': 'kj-checkbox',
-    '[attr.data-disabled]': "disabled() ? '' : null",
-  },
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KjCheckboxComponent {
-  readonly checked = model<boolean>(false);
-  readonly disabled = input(false);
-  readonly indeterminate = input(false);
-  readonly size = input<'sm' | 'md' | 'lg'>('md');
-
-  protected readonly labelId = `kj-checkbox-${++checkboxIdCounter}`;
-
-  private readonly box = viewChild.required<ElementRef<HTMLElement>>('box');
-
-  /** Forward label-area clicks to the checkbox box. The box itself bubbles
-   *  through, so we early-return to avoid a double-toggle. */
-  protected onLabelClick(e: MouseEvent): void {
-    if (this.disabled()) return;
-    const boxEl = this.box().nativeElement;
-    const target = e.target as Node;
-    if (target === boxEl || boxEl.contains(target)) return;
-    boxEl.click();
-  }
-}

package/src/checkbox/index.ts

@@ -1 +0,0 @@
-export * from './checkbox';

package/src/color-picker/_examples/color-picker.alpha.example.ts

@@ -1,36 +0,0 @@
-import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { KjColorPickerComponent } from '../color-picker';
-
-/**
- * Color-picker with the alpha slider mounted. When alpha < 1 the
- * trigger swatch shows a checkerboard backdrop and the emitted hex
- * grows to eight digits (`#rrggbbaa`).
- */
-@Component({
-  selector: 'kj-color-picker-alpha-example',
-  standalone: true,
-  imports: [KjColorPickerComponent, FormsModule],
-  styles: [
-    `
-      :host {
-        display: flex;
-        gap: var(--kj-space-md);
-        align-items: center;
-        min-height: 280px;
-      }
-      code {
-        font: 0.8125rem/1 var(--kj-font-mono, monospace);
-        color: var(--kj-fg-muted);
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <kj-color-picker [(ngModel)]="hex" [kjShowAlpha]="true" />
-    <code>{{ hex() }}</code>
-  `,
-})
-export class KjColorPickerAlphaExample {
-  readonly hex = signal('#ec489980');
-}

package/src/color-picker/_examples/color-picker.example.ts

@@ -1,34 +0,0 @@
-import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { KjColorPickerComponent } from '../color-picker';
-
-/**
- * Default color-picker — hex output, no alpha, no presets.
- */
-@Component({
-  selector: 'kj-color-picker-example',
-  standalone: true,
-  imports: [KjColorPickerComponent, FormsModule],
-  styles: [
-    `
-      :host {
-        display: flex;
-        gap: var(--kj-space-md);
-        align-items: center;
-        min-height: 240px;
-      }
-      code {
-        font: 0.8125rem/1 var(--kj-font-mono, monospace);
-        color: var(--kj-fg-muted);
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <kj-color-picker [(ngModel)]="hex" />
-    <code>{{ hex() }}</code>
-  `,
-})
-export class KjColorPickerExample {
-  readonly hex = signal('#b8f500');
-}

package/src/color-picker/_examples/color-picker.hex-input.example.ts

@@ -1,53 +0,0 @@
-import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { KjColorPickerComponent } from '../color-picker';
-
-/**
- * Color-picker that focuses on the hex text input — designers paste
- * hex values constantly; the panel commits on blur or Enter and
- * reverts on Escape if the value cannot be parsed.
- */
-@Component({
-  selector: 'kj-color-picker-hex-input-example',
-  standalone: true,
-  imports: [KjColorPickerComponent, FormsModule],
-  styles: [
-    `
-      :host {
-        display: flex;
-        flex-direction: column;
-        gap: var(--kj-space-md);
-        min-height: 280px;
-      }
-      .row {
-        display: flex;
-        gap: var(--kj-space-md);
-        align-items: center;
-      }
-      code {
-        font: 0.8125rem/1 var(--kj-font-mono, monospace);
-        color: var(--kj-fg-muted);
-      }
-      p {
-        font: 0.8125rem var(--kj-font-sans);
-        color: var(--kj-fg-default);
-        margin: 0;
-        max-width: 28rem;
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <p>
-      Open the panel and type or paste a hex value. The picker accepts 3-, 4-, 6-, and 8-digit hex
-      with or without the leading hash.
-    </p>
-    <div class="row">
-      <kj-color-picker [(ngModel)]="hex" />
-      <code>{{ hex() }}</code>
-    </div>
-  `,
-})
-export class KjColorPickerHexInputExample {
-  readonly hex = signal('#0ea5e9');
-}

package/src/color-picker/_examples/color-picker.in-form.example.ts

@@ -1,60 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
-import { KjColorPickerComponent } from '../color-picker';
-
-/**
- * Color-picker integrated with a reactive form, including a custom
- * required-hex validator. Demonstrates the `formControl` binding and
- * the touched-gated `kjInvalid` posture.
- */
-@Component({
-  selector: 'kj-color-picker-in-form-example',
-  standalone: true,
-  imports: [KjColorPickerComponent, ReactiveFormsModule],
-  styles: [
-    `
-      :host {
-        display: flex;
-        flex-direction: column;
-        gap: var(--kj-space-md);
-        min-height: 320px;
-      }
-      label {
-        display: flex;
-        align-items: center;
-        gap: var(--kj-space-md);
-        color: var(--kj-fg-default);
-        font: 0.875rem var(--kj-font-sans);
-      }
-      .error {
-        color: var(--kj-fg-danger, #ef4444);
-        font: 0.75rem var(--kj-font-sans);
-      }
-      code {
-        font: 0.8125rem/1 var(--kj-font-mono, monospace);
-        color: var(--kj-fg-muted);
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <label for="color-picker-brand">
-      Brand color
-      <kj-color-picker
-        id="color-picker-brand"
-        [formControl]="ctrl"
-        [kjInvalid]="ctrl.invalid && ctrl.touched"
-      />
-      <code>{{ ctrl.value }}</code>
-    </label>
-    @if (ctrl.invalid && ctrl.touched) {
-      <span class="error">A valid hex color is required.</span>
-    }
-  `,
-})
-export class KjColorPickerInFormExample {
-  readonly ctrl = new FormControl('#3b82f6', {
-    nonNullable: true,
-    validators: [Validators.required, Validators.pattern(/^#?[0-9a-fA-F]{3,8}$/)],
-  });
-}

package/src/color-picker/_examples/color-picker.usage.example.ts

@@ -1,58 +0,0 @@
-import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { KjColorPickerComponent, type KjColorPreset } from '../color-picker';
-
-/**
- * A walkthrough of the most common color-picker usages — hex output, an alpha
- * channel for tinting, brand presets, and a disabled state.
- */
-@Component({
-  selector: 'kj-color-picker-usage-example',
-  standalone: true,
-  imports: [KjColorPickerComponent, FormsModule],
-  styles: [
-    `
-      :host {
-        display: flex;
-        flex-direction: column;
-        gap: var(--kj-space-md);
-      }
-      .row {
-        display: flex;
-        gap: var(--kj-space-md);
-        align-items: center;
-      }
-      code {
-        font: 0.8125rem/1 var(--kj-font-mono, monospace);
-        color: var(--kj-fg-muted);
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <div class="row">
-      <kj-color-picker [(ngModel)]="brand" />
-      <code>{{ brand() }}</code>
-    </div>
-
-    <div class="row">
-      <kj-color-picker [(ngModel)]="tinted" kjShowAlpha />
-      <code>{{ tinted() }}</code>
-    </div>
-
-    <div class="row">
-      <kj-color-picker [(ngModel)]="brand" [kjPresets]="presets" />
-      <code>preset palette</code>
-    </div>
-  `,
-})
-export class KjColorPickerUsageExample {
-  readonly brand = signal('#b8f500');
-  readonly tinted = signal('#1e90ffaa');
-  readonly presets: readonly KjColorPreset[] = [
-    { value: '#b8f500', label: 'Lime' },
-    { value: '#1e90ff', label: 'Blue' },
-    { value: '#f97316', label: 'Orange' },
-    { value: '#a855f7', label: 'Purple' },
-  ];
-}