@ui-organized/svelte 0.0.0-stage → 6.0.0

package/dist/components/ColorPicker/ChannelField.svelte

@@ -0,0 +1,83 @@
+<!--
+  One field of the notation row: a small `Input` with the channel's
+  abbreviation printed underneath it.
+
+  It is the library's own `Input` rather than a bare `<input>` styled to look
+  like one, so a control inside the popup picks up the same surface, hairline,
+  radius, focus ring and disabled treatment as every other field in the system —
+  and keeps them when that chrome moves.
+-->
+<script lang="ts">
+  import type { ColorField } from "@ui-organized/core";
+  import Input from "../Input/Input.svelte";
+  import { readField, writeField, type ColorLike } from "./channelFields.js";
+
+  let {
+    field,
+    color,
+    onCommit,
+    disabled,
+    readOnly,
+  }: {
+    field: ColorField;
+    color: ColorLike;
+    onCommit: (next: ColorLike) => void;
+    disabled?: boolean;
+    readOnly?: boolean;
+  } = $props();
+
+  /* `null` means "show the color". A string means the reader is mid-edit, and
+     the color must not overwrite what they are typing — which it otherwise
+     would on every pointer move over the area behind the field. */
+  let draft = $state<string | null>(null);
+
+  const numeric = $derived(field.kind === "channel");
+  const shown = $derived(draft ?? readField(field, color));
+
+  function commit() {
+    if (draft === null) return;
+    const next = writeField(field, draft, color);
+    draft = null;
+    if (next) onCommit(next);
+  }
+
+  function onkeydown(event: KeyboardEvent) {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      commit();
+    } else if (event.key === "Escape") {
+      // Abandon the edit without closing the picker under it.
+      event.stopPropagation();
+      draft = null;
+    }
+  }
+</script>
+
+<div class="color-picker__field">
+  <Input
+    size="sm"
+    type={numeric ? "number" : "text"}
+    inputmode={numeric ? "decimal" : "text"}
+    aria-label={field.label}
+    spellcheck={false}
+    autocomplete="off"
+    {disabled}
+    readonly={readOnly}
+    min={field.kind === "channel" ? field.min : undefined}
+    max={field.kind === "channel" ? field.max : undefined}
+    step={field.kind === "channel" ? field.step : undefined}
+    value={shown}
+    oninput={(event) => (draft = (event.currentTarget as HTMLInputElement).value)}
+    onfocus={(event) => (event.currentTarget as HTMLInputElement).select()}
+    onblur={commit}
+    {onkeydown}
+  />
+  <!--
+    Only the numeric channels are abbreviated. A `HEX` caption under a hex field
+    would only repeat the select above it — but the line stays reserved in CSS,
+    so switching notation cannot resize the popup out from under the pointer.
+  -->
+  {#if numeric}
+    <span class="color-picker__field-label" aria-hidden="true">{field.label}</span>
+  {/if}
+</div>

package/dist/components/ColorPicker/ChannelField.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { ColorField } from "@ui-organized/core";
+import { type ColorLike } from "./channelFields.js";
+type $$ComponentProps = {
+    field: ColorField;
+    color: ColorLike;
+    onCommit: (next: ColorLike) => void;
+    disabled?: boolean;
+    readOnly?: boolean;
+};
+declare const ChannelField: import("svelte").Component<$$ComponentProps, {}, "">;
+type ChannelField = ReturnType<typeof ChannelField>;
+export default ChannelField;
+//# sourceMappingURL=ChannelField.svelte.d.ts.map

package/dist/components/ColorPicker/ChannelField.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelField.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/ColorPicker/ChannelField.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAErD,OAAO,EAAyB,KAAK,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE1E,KAAK,gBAAgB,GAAI;IACtB,KAAK,EAAE,UAAU,CAAC;IAClB,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAoDJ,QAAA,MAAM,YAAY,sDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/components/ColorPicker/ColorPicker.svelte

@@ -0,0 +1,225 @@
+<!--
+  A swatch trigger and a portalled picker surface.
+
+  Label / helper / error chrome comes from the shared `.field` layout, so the
+  control lines up with every other form field; the trigger and the popup are
+  color-specific.
+-->
+<script lang="ts">
+  import { untrack } from "svelte";
+  import { ColorPicker as ArkColorPicker, Portal, parseColor } from "@ark-ui/svelte";
+  import { clsx } from "clsx";
+  import {
+    CONTROL_ICON_SIZE,
+    CONTROL_TEXT_CLASS,
+    MACHINE_FORMAT,
+    colorPickerStyles,
+    type ColorNotation,
+  } from "@ui-organized/core";
+  import Icon from "../Icon/Icon.svelte";
+  import FieldError from "../FieldError/FieldError.svelte";
+  import FormatInputs from "./FormatInputs.svelte";
+  import type { ColorLike } from "./channelFields.js";
+  import type { ColorPickerProps } from "./ColorPicker.types.js";
+  import "@ui-organized/core/components/ColorPicker/ColorPicker.css";
+  import { glyph } from "../../icons/glyph.js";
+
+  const DEFAULT_COLOR = "#000000";
+
+  /**
+   * Checkerboard cell size for the alpha grid.
+   *
+   * Passed explicitly rather than left to Ark's default so the number is visible
+   * in the markup rather than hidden in the library. It stays a raw value: a
+   * checker cell is a perceptual constant for reading transparency, not a brand
+   * value that should shift with the spacing scale.
+   */
+  const TRANSPARENCY_CELL = "12px";
+
+  /** Which notation the picker's fields open on, given the machine's format. */
+  const INITIAL_INPUT_FORMAT = {
+    rgba: "rgb",
+    hsla: "hsl",
+    hsba: "rgb",
+  } as const;
+
+  let {
+    label,
+    helperText,
+    error,
+    value = $bindable(),
+    defaultValue = DEFAULT_COLOR,
+    onValueChange,
+    onValueChangeEnd,
+    // Defaulted, as in the React library. Left undefined the machine picks its
+    // own format from the value, so a picker handed `hsl(...)` announced and
+    // submitted in a notation the caller never asked for.
+    format = "rgba",
+    swatches,
+    showEyeDropper = true,
+    showFormatInputs = true,
+    open = $bindable(),
+    defaultOpen,
+    onOpenChange,
+    size = "md",
+    variant,
+    required,
+    disabled,
+    readOnly,
+    name,
+    container,
+    class: className,
+  }: ColorPickerProps = $props();
+
+  const isInvalid = $derived(!!error);
+  const errorMessage = $derived(typeof error === "string" ? error : undefined);
+  const iconSize = $derived(CONTROL_ICON_SIZE[size]);
+
+  /* The machine's value is a parsed `Color`, not a string — passing a string
+     throws. Coerced in here and back out via `valueAsString`, the same boundary
+     conversion `Select` does for `string ↔ string[]`. */
+  const colorValue = $derived(value != null ? parseColor(value) : undefined);
+  const colorDefault = $derived(parseColor(defaultValue));
+
+  /* Which notation the picker's fields are showing. Local, because it is a way
+     of reading the color rather than a property of it — see `format`. */
+  let inputFormat = $state<ColorNotation>(
+    /* Read once: which notation the fields *open* on. A later change to `format`
+       must not yank the row out from under a reader who has switched it. */
+    untrack(() => INITIAL_INPUT_FORMAT[format]),
+  );
+
+  /**
+   * A typed edit, which is a finished interaction: it reports an end as well as
+   * a change — unlike a drag, which reports many changes and one end when the
+   * pointer lifts. The change itself comes from the machine, which emits
+   * `onValueChange` when `setValue` moves it.
+   */
+  function commitField(api: { setValue: (next: ColorLike) => void }, next: ColorLike) {
+    api.setValue(next);
+    onValueChangeEnd?.(next.toString(format));
+  }
+</script>
+
+<ArkColorPicker.Root
+  class={clsx(colorPickerStyles({ size, variant }), className)}
+  value={colorValue}
+  defaultValue={colorDefault}
+  onValueChange={(details) => {
+    value = details.valueAsString;
+    onValueChange?.(details.valueAsString);
+  }}
+  onValueChangeEnd={(details) => onValueChangeEnd?.(details.valueAsString)}
+  format={MACHINE_FORMAT[format]}
+  {open}
+  {defaultOpen}
+  onOpenChange={(details) => {
+    open = details.open;
+    onOpenChange?.(details.open);
+  }}
+  invalid={isInvalid}
+  {required}
+  {disabled}
+  {readOnly}
+  {name}
+  positioning={{ placement: "bottom-start", gutter: 4 }}
+>
+  {#if label}
+    <ArkColorPicker.Label class="field__label">
+      {label}
+      {#if required}<span class="field__required" aria-hidden="true"></span>{/if}
+    </ArkColorPicker.Label>
+  {/if}
+
+  <ArkColorPicker.Control class="color-picker__control">
+    <ArkColorPicker.Trigger class={clsx(CONTROL_TEXT_CLASS[size], "color-picker__trigger")}>
+      <span class="color-picker__swatch-well">
+        <ArkColorPicker.TransparencyGrid size={TRANSPARENCY_CELL} class="color-picker__grid" />
+        <ArkColorPicker.ValueSwatch class="color-picker__value-swatch" />
+      </span>
+      {#if variant !== "swatch-only"}
+        <ArkColorPicker.ValueText class="color-picker__value-text" />
+      {/if}
+    </ArkColorPicker.Trigger>
+  </ArkColorPicker.Control>
+
+  <Portal container={container ?? undefined}>
+    <!--
+      The positioner class must stay a plain string literal — the
+      overlay-stacking test scans for it, and a clsx() call here silently
+      unregisters the layer. Conditional classes go on the popup.
+    -->
+    <ArkColorPicker.Positioner class="color-picker__positioner">
+      <!--
+        Ark gives the content role="dialog", which needs a name, and this popup
+        has no title to take one from. Without this it reaches a screen reader
+        as an unnamed dialog (axe aria-dialog-name).
+      -->
+      <ArkColorPicker.Content
+        class="color-picker__popup"
+        aria-label={label ? `${label} color picker` : "Color picker"}
+      >
+        <ArkColorPicker.Area class="color-picker__area">
+          <ArkColorPicker.AreaBackground class="color-picker__area-bg" />
+          <ArkColorPicker.AreaThumb class="color-picker__thumb" />
+        </ArkColorPicker.Area>
+
+        <div class="color-picker__sliders">
+          <div class="color-picker__slider-row">
+            <ArkColorPicker.ChannelSlider channel="hue" class="color-picker__channel-slider">
+              <ArkColorPicker.ChannelSliderTrack class="color-picker__channel-track" />
+              <ArkColorPicker.ChannelSliderThumb class="color-picker__thumb" />
+            </ArkColorPicker.ChannelSlider>
+            {#if showEyeDropper}
+              <ArkColorPicker.EyeDropperTrigger class="color-picker__eyedropper">
+                <Icon name={glyph("pipette")} size={iconSize} />
+              </ArkColorPicker.EyeDropperTrigger>
+            {/if}
+          </div>
+
+          <ArkColorPicker.ChannelSlider channel="alpha" class="color-picker__channel-slider">
+            <ArkColorPicker.TransparencyGrid size={TRANSPARENCY_CELL} class="color-picker__grid" />
+            <ArkColorPicker.ChannelSliderTrack class="color-picker__channel-track" />
+            <ArkColorPicker.ChannelSliderThumb class="color-picker__thumb" />
+          </ArkColorPicker.ChannelSlider>
+        </div>
+
+        {#if showFormatInputs}
+          <ArkColorPicker.Context>
+            {#snippet render(api)}
+              <FormatInputs
+                format={inputFormat}
+                onFormatChange={(next) => (inputFormat = next)}
+                color={api().value}
+                onCommit={(next) => commitField(api(), next)}
+                {disabled}
+                {readOnly}
+                container={container ?? undefined}
+              />
+            {/snippet}
+          </ArkColorPicker.Context>
+        {/if}
+
+        {#if swatches && swatches.length > 0}
+          <ArkColorPicker.SwatchGroup class="color-picker__swatches">
+            {#each swatches as swatch (swatch)}
+              <ArkColorPicker.SwatchTrigger value={swatch} class="color-picker__swatch-trigger">
+                <ArkColorPicker.Swatch value={swatch} class="color-picker__swatch" />
+              </ArkColorPicker.SwatchTrigger>
+            {/each}
+          </ArkColorPicker.SwatchGroup>
+        {/if}
+      </ArkColorPicker.Content>
+    </ArkColorPicker.Positioner>
+  </Portal>
+
+  {#if helperText && !isInvalid}
+    <span class="field__description">{helperText}</span>
+  {/if}
+  {#if isInvalid && errorMessage}
+    <FieldError message={errorMessage} />
+  {/if}
+  <!-- The input is the form value and carries no visible label of its own, so
+       without a name it is announced as an unlabelled textbox. -->
+  <ArkColorPicker.HiddenInput aria-label={label ?? "Color"} />
+</ArkColorPicker.Root>

package/dist/components/ColorPicker/ColorPicker.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { ColorPickerProps } from "./ColorPicker.types.js";
+import "@ui-organized/core/components/ColorPicker/ColorPicker.css";
+declare const ColorPicker: import("svelte").Component<ColorPickerProps, {}, "value" | "open">;
+type ColorPicker = ReturnType<typeof ColorPicker>;
+export default ColorPicker;
+//# sourceMappingURL=ColorPicker.svelte.d.ts.map

package/dist/components/ColorPicker/ColorPicker.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/ColorPicker/ColorPicker.svelte.ts"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,2DAA2D,CAAC;AAuLnE,QAAA,MAAM,WAAW,oEAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/components/ColorPicker/ColorPicker.types.d.ts

@@ -0,0 +1,72 @@
+/**
+ * Written out in full rather than extending a shared base.
+ *
+ * `svelte-package` emits no `.d.ts` for a component whose props type extends an
+ * interface it cannot see from the outside, and the failure is silent: the build
+ * succeeds and consumers get `any`. Every exported prop interface in this
+ * package therefore states its own members.
+ */
+export interface ColorPickerProps {
+    /** Accessible label rendered above the trigger. */
+    label?: string;
+    /** Helper text rendered below the trigger. Hidden when an error is shown. */
+    helperText?: string;
+    /**
+     * Error state. Pass a string to show an error message.
+     * Pass `true` to mark the field invalid without a message.
+     */
+    error?: string | boolean;
+    /**
+     * Color as a CSS color string — `#2563eb`, `rgb(37 99 235)`,
+     * `hsl(221 83% 53%)`. The machine works in parsed `Color` objects; the
+     * conversion happens at this boundary. Bindable: `bind:value`.
+     */
+    value?: string;
+    /** Initial color for the uncontrolled case. Defaults to '#000000'. */
+    defaultValue?: string;
+    /** Called continuously as the color changes, with a CSS color string. */
+    onValueChange?: (value: string) => void;
+    /** Called once the interaction ends. */
+    onValueChangeEnd?: (value: string) => void;
+    /**
+     * The notation the color is held and printed in — the value string, the
+     * trigger's value text and the hidden form input. Defaults to 'rgba'.
+     *
+     * It also picks which notation the picker's fields open on. It does not pin
+     * them there: a reader can switch the fields to any notation without changing
+     * what this component hands back, which stays whatever this names.
+     */
+    format?: "rgba" | "hsla" | "hsba";
+    /** Preset swatches offered under the picker area. */
+    swatches?: string[];
+    /** Shows the eyedropper button, where the browser supports it. Defaults to true. */
+    showEyeDropper?: boolean;
+    /**
+     * Shows the notation select and its channel fields — HEX, RGB, HSL, OKLCH —
+     * under the sliders. Defaults to true. Turn it off for a picker meant to be
+     * driven by eye rather than by number.
+     */
+    showFormatInputs?: boolean;
+    /** Open state of the picker. Bindable: `bind:open`. */
+    open?: boolean;
+    /** Initial open state for the uncontrolled case. */
+    defaultOpen?: boolean;
+    /** Called when the picker opens or closes. */
+    onOpenChange?: (open: boolean) => void;
+    /** Size variant. Defaults to 'md'. */
+    size?: "sm" | "md" | "lg";
+    /** Trigger treatment. `swatch-only` drops the value text. Defaults to 'default'. */
+    variant?: "default" | "swatch-only";
+    /** Marks the field required and shows the required indicator. */
+    required?: boolean;
+    /** Disables the control. */
+    disabled?: boolean;
+    /** Makes the color read-only while keeping the trigger focusable. */
+    readOnly?: boolean;
+    /** Form field name for the hidden input. */
+    name?: string;
+    /** Portal container for the picker surface. Defaults to document.body. */
+    container?: HTMLElement | null;
+    class?: string;
+}
+//# sourceMappingURL=ColorPicker.types.d.ts.map

package/dist/components/ColorPicker/ColorPicker.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/ColorPicker/ColorPicker.types.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,MAAM,WAAW,gBAAgB;IAC/B,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6EAA6E;IAC7E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sEAAsE;IACtE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yEAAyE;IACzE,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,wCAAwC;IACxC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IAClC,qDAAqD;IACrD,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,oFAAoF;IACpF,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,uDAAuD;IACvD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,oDAAoD;IACpD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,8CAA8C;IAC9C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,sCAAsC;IACtC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,oFAAoF;IACpF,OAAO,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;IACpC,iEAAiE;IACjE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qEAAqE;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4CAA4C;IAC5C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0EAA0E;IAC1E,SAAS,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB"}

package/dist/components/ColorPicker/ColorPicker.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/ColorPicker/FormatInputs.svelte

@@ -0,0 +1,62 @@
+<!--
+  The notation row under the sliders: a format select on a row of its own, and
+  the fields for the notation it names underneath it.
+
+  The select is the library's own `Select`, which means the picker opens a
+  second surface above the one it is already showing. The dismissable-layer
+  stack under all four libraries is built for exactly that — a select opened
+  inside a dialog closes itself and leaves the dialog alone — so the picker
+  stays open while the notation list is up.
+
+  Which notations exist and which fields each one shows come from
+  `COLOR_NOTATIONS` / `COLOR_NOTATION_FIELDS` in `@ui-organized/core`, shared
+  with the React, Vue and Angular pickers so all four offer the same row.
+-->
+<script lang="ts">
+  import { COLOR_NOTATIONS, COLOR_NOTATION_FIELDS, type ColorNotation } from "@ui-organized/core";
+  import Select from "../Select/Select.svelte";
+  import ChannelField from "./ChannelField.svelte";
+  import type { ColorLike } from "./channelFields.js";
+
+  let {
+    format,
+    onFormatChange,
+    color,
+    onCommit,
+    disabled,
+    readOnly,
+    container,
+  }: {
+    format: ColorNotation;
+    onFormatChange: (format: ColorNotation) => void;
+    color: ColorLike;
+    onCommit: (next: ColorLike) => void;
+    disabled?: boolean;
+    readOnly?: boolean;
+    container?: HTMLElement | null;
+  } = $props();
+</script>
+
+<div class="color-picker__notation">
+  <!--
+    The label is rendered and hidden in CSS rather than left off: Ark names the
+    trigger, the listbox and the hidden `<select>` after the Label part, so an
+    absent label leaves three dangling references behind.
+  -->
+  <Select
+    class="color-picker__format"
+    size="sm"
+    label="Color notation"
+    options={COLOR_NOTATIONS}
+    value={format}
+    onValueChange={(value) => onFormatChange(value as ColorNotation)}
+    {disabled}
+    portalContainer={container ?? undefined}
+  />
+
+  <div class="color-picker__inputs" data-format={format}>
+    {#each COLOR_NOTATION_FIELDS[format] as field (field.key)}
+      <ChannelField {field} {color} {onCommit} {disabled} {readOnly} />
+    {/each}
+  </div>
+</div>

package/dist/components/ColorPicker/FormatInputs.svelte.d.ts

@@ -0,0 +1,15 @@
+import { type ColorNotation } from "@ui-organized/core";
+import type { ColorLike } from "./channelFields.js";
+type $$ComponentProps = {
+    format: ColorNotation;
+    onFormatChange: (format: ColorNotation) => void;
+    color: ColorLike;
+    onCommit: (next: ColorLike) => void;
+    disabled?: boolean;
+    readOnly?: boolean;
+    container?: HTMLElement | null;
+};
+declare const FormatInputs: import("svelte").Component<$$ComponentProps, {}, "">;
+type FormatInputs = ReturnType<typeof FormatInputs>;
+export default FormatInputs;
+//# sourceMappingURL=FormatInputs.svelte.d.ts.map

package/dist/components/ColorPicker/FormatInputs.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormatInputs.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/ColorPicker/FormatInputs.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAA0C,KAAK,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAGhG,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAEnD,KAAK,gBAAgB,GAAI;IACtB,MAAM,EAAE,aAAa,CAAC;IACtB,cAAc,EAAE,CAAC,MAAM,EAAE,aAAa,KAAK,IAAI,CAAC;IAChD,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CAChC,CAAC;AAgCJ,QAAA,MAAM,YAAY,sDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/components/ColorPicker/channelFields.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Reading and writing one field of the notation row.
+ *
+ * The half of a field that `COLOR_NOTATION_FIELDS` in `@ui-organized/core`
+ * cannot describe, because it needs a color object and the four libraries do
+ * not share one — the three Ark packages pass around `@zag-js/color-utils`
+ * `Color`s and Angular computes its own. Core names the channel, its space and
+ * its range; these two functions fetch and set it.
+ *
+ * Deliberately not Ark's `ChannelInput`: Ark writes a channel by converting the
+ * color to the *machine's* format first, so an HSL field would only work while
+ * the machine is in `hsla` — which would mean flipping the notation select had
+ * to reformat the machine, and the machine's format is what decides the value
+ * string, the hidden input's form value and whether the picker area is
+ * saturation×brightness or saturation×lightness. A display control must not
+ * move any of those, so the fields convert on their own. Reads and writes both
+ * go through `toFormat`, so every notation works from any machine format, and
+ * OKLCH — which the machine cannot represent at all — is one more entry in the
+ * same table.
+ */
+import { type ColorPickerColor } from "@ark-ui/svelte";
+import { type ColorField, type Rgba } from "@ui-organized/core";
+/**
+ * The parsed color the machine holds. Named here rather than in the public
+ * types so `ColorPickerProps` keeps its string-only surface — a caller never
+ * handles one of these.
+ */
+export type ColorLike = ColorPickerColor;
+export declare function toRgba(color: ColorLike): Rgba;
+export declare function readField(field: ColorField, color: ColorLike): string;
+/**
+ * `null` rejects the edit, and the field falls back to the color it was
+ * showing rather than guessing at what was meant.
+ */
+export declare function writeField(field: ColorField, text: string, color: ColorLike): ColorLike | null;
+//# sourceMappingURL=channelFields.d.ts.map

package/dist/components/ColorPicker/channelFields.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"channelFields.d.ts","sourceRoot":"","sources":["../../../src/lib/components/ColorPicker/channelFields.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EAAc,KAAK,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AACnE,OAAO,EAOL,KAAK,UAAU,EACf,KAAK,IAAI,EACV,MAAM,oBAAoB,CAAC;AAE5B;;;;GAIG;AACH,MAAM,MAAM,SAAS,GAAG,gBAAgB,CAAC;AAIzC,wBAAgB,MAAM,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI,CAQ7C;AAMD,wBAAgB,SAAS,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,GAAG,MAAM,CAKrE;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,GAAG,SAAS,GAAG,IAAI,CAmB9F"}

package/dist/components/ColorPicker/channelFields.js

@@ -0,0 +1,65 @@
+/**
+ * Reading and writing one field of the notation row.
+ *
+ * The half of a field that `COLOR_NOTATION_FIELDS` in `@ui-organized/core`
+ * cannot describe, because it needs a color object and the four libraries do
+ * not share one — the three Ark packages pass around `@zag-js/color-utils`
+ * `Color`s and Angular computes its own. Core names the channel, its space and
+ * its range; these two functions fetch and set it.
+ *
+ * Deliberately not Ark's `ChannelInput`: Ark writes a channel by converting the
+ * color to the *machine's* format first, so an HSL field would only work while
+ * the machine is in `hsla` — which would mean flipping the notation select had
+ * to reformat the machine, and the machine's format is what decides the value
+ * string, the hidden input's form value and whether the picker area is
+ * saturation×brightness or saturation×lightness. A display control must not
+ * move any of those, so the fields convert on their own. Reads and writes both
+ * go through `toFormat`, so every notation works from any machine format, and
+ * OKLCH — which the machine cannot represent at all — is one more entry in the
+ * same table.
+ */
+import { parseColor } from "@ark-ui/svelte";
+import { formatChannel, formatOklchComponents, normalizeHex, parseOklch, readChannelInput, } from "@ui-organized/core";
+const round = (n, places = 0) => Number(n.toFixed(places));
+export function toRgba(color) {
+    const rgb = color.toFormat("rgba");
+    return {
+        r: round(rgb.getChannelValue("red")),
+        g: round(rgb.getChannelValue("green")),
+        b: round(rgb.getChannelValue("blue")),
+        a: rgb.getChannelValue("alpha"),
+    };
+}
+/** `space: null` is alpha — the one channel that survives a conversion. */
+const inSpace = (color, field) => field.space ? color.toFormat(field.space) : color;
+export function readField(field, color) {
+    if (field.kind === "channel") {
+        return formatChannel(inSpace(color, field).getChannelValue(field.channel), field);
+    }
+    return field.key === "hex" ? color.toString("hex") : formatOklchComponents(toRgba(color));
+}
+/**
+ * `null` rejects the edit, and the field falls back to the color it was
+ * showing rather than guessing at what was meant.
+ */
+export function writeField(field, text, color) {
+    if (field.kind === "channel") {
+        const value = readChannelInput(text, field);
+        if (value === null)
+            return null;
+        return inSpace(color, field).withChannelValue(field.channel, value);
+    }
+    if (field.key === "hex") {
+        const hex = normalizeHex(text);
+        if (!hex)
+            return null;
+        /* Alpha deliberately survives a hex edit rather than being reset to opaque
+           by a six-digit string. The field beside this one owns alpha; typing a
+           color is not a statement about transparency. */
+        return parseColor(hex).withChannelValue("alpha", color.getChannelValue("alpha"));
+    }
+    const parsed = parseOklch(text);
+    if (!parsed)
+        return null;
+    return parseColor(`rgba(${parsed.r}, ${parsed.g}, ${parsed.b}, ${parsed.a})`);
+}

package/dist/components/ColorPicker/index.d.ts

@@ -0,0 +1,4 @@
+export { default as ColorPicker } from "./ColorPicker.svelte";
+export type { ColorPickerProps } from "./ColorPicker.types.js";
+export type { ColorPickerVariants } from "@ui-organized/core";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ColorPicker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/ColorPicker/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,YAAY,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,YAAY,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/components/ColorPicker/index.js

@@ -0,0 +1 @@
+export { default as ColorPicker } from "./ColorPicker.svelte";