@ui-organized/svelte 0.0.0-stage → 6.0.0

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

@@ -0,0 +1,42 @@
+import type { Snippet } from "svelte";
+/**
+ * Written out in full rather than extending a shared base.
+ *
+ * `svelte-package` emits no `.d.ts` for a component whose props interface
+ * reaches a type it cannot re-export, so a private base interface silently costs
+ * this component its types. Every prop is spelled here for that reason.
+ */
+export interface QRCodeProps {
+    /** The string encoded into the code — a URL, an id, anything scannable. */
+    value: string;
+    /** Accessible label for the code. Defaults to the encoded value. */
+    label?: string;
+    /**
+     * Edge length of one module (a single square of the code), in pixels.
+     * Must be an integer: a fractional module produces visible moiré and can make
+     * the code unreadable. Defaults to 10.
+     */
+    pixelSize?: number;
+    /**
+     * Error-correction level. Higher levels survive more damage and are what make
+     * an `overlay` safe, at the cost of a denser code. Defaults to 'M'.
+     */
+    errorCorrection?: "L" | "M" | "Q" | "H";
+    /**
+     * Logo or badge drawn over the centre of the code. Only safe at higher error
+     * correction — pair it with `errorCorrection="H"`.
+     */
+    overlay?: Snippet;
+    /** Shows a download button below the code. Defaults to false. */
+    showDownload?: boolean;
+    /** Text on the download button. Defaults to 'Download'. */
+    downloadLabel?: string;
+    /** File name for the download, without an extension. Defaults to 'qr-code'. */
+    downloadFileName?: string;
+    /** Size variant, driving the rendered edge length. Defaults to 'md'. */
+    size?: "sm" | "md" | "lg";
+    /** Surface treatment. `framed` puts the code on a bordered card. Defaults to 'default'. */
+    variant?: "default" | "framed";
+    class?: string;
+}
+//# sourceMappingURL=QRCode.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"QRCode.types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/QRCode/QRCode.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC;;;;;;GAMG;AACH,MAAM,WAAW,WAAW;IAC1B,2EAA2E;IAC3E,KAAK,EAAE,MAAM,CAAC;IACd,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,eAAe,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACxC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iEAAiE;IACjE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,2DAA2D;IAC3D,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,+EAA+E;IAC/E,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,wEAAwE;IACxE,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,2FAA2F;IAC3F,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB"}

package/dist/components/QRCode/QRCode.types.js

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/QRCode/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,YAAY,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACrD,YAAY,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/components/QRCode/index.js

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

package/dist/components/Radio/Radio.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+  import { RadioGroup as ArkRadioGroup } from "@ark-ui/svelte";
+  import { clsx } from "clsx";
+  import { radioGroupStyles, OMIT_ARIA } from "@ui-organized/core";
+  import Icon from "../Icon/Icon.svelte";
+  import type { RadioGroupProps } from "./Radio.types.js";
+  import "@ui-organized/core/components/Radio/Radio.css";
+  import { glyph } from "../../icons/glyph.js";
+
+  let {
+    options,
+    value = $bindable(),
+    defaultValue,
+    onValueChange,
+    label,
+    orientation = "vertical",
+    disabled,
+    name,
+    class: className,
+    "aria-label": ariaLabel,
+  }: RadioGroupProps = $props();
+
+  // The group label sits outside Ark's Root — it's a sibling of the items, not a
+  // child — so the Label part is never rendered and the radiogroup's
+  // `aria-labelledby` would dangle. Handing Ark the id of the heading we do
+  // render points it at a real element instead. React uses useId() here; this is
+  // Svelte's equivalent.
+  const labelId = $props.id();
+</script>
+
+<div class={clsx(radioGroupStyles({ orientation }), className)}>
+  {#if label}
+    <div class="radio-group__label" id={labelId}>{label}</div>
+  {/if}
+  <ArkRadioGroup.Root
+    ids={label ? { label: labelId } : undefined}
+    aria-labelledby={label ? undefined : OMIT_ARIA}
+    aria-label={label ? undefined : ariaLabel}
+    {value}
+    {defaultValue}
+    onValueChange={(details) => {
+      if (details.value != null) {
+        value = details.value;
+        onValueChange?.(details.value);
+      }
+    }}
+    {disabled}
+    {name}
+    {orientation}
+    class="radio-group__items"
+  >
+    {#each options as opt (opt.value)}
+      <div class="radio-item-wrap">
+        <!--
+          Ark's RadioGroup.Item *is* the <label>; the dot is a plain child of
+          ItemControl, shown via [data-state="checked"] in CSS.
+        -->
+        <ArkRadioGroup.Item
+          value={opt.value}
+          disabled={opt.disabled}
+          class={clsx(
+            "radio-item",
+            opt.disabled && "radio-item--disabled",
+            opt.error && "radio-item--error",
+          )}
+        >
+          <ArkRadioGroup.ItemControl class="radio-item__control">
+            <span class="radio-item__indicator"></span>
+          </ArkRadioGroup.ItemControl>
+          <ArkRadioGroup.ItemText class="radio-item__label text-default-body-large">
+            {opt.label}
+          </ArkRadioGroup.ItemText>
+          <ArkRadioGroup.ItemHiddenInput />
+        </ArkRadioGroup.Item>
+        {#if opt.error}
+          <div class="radio-item__error-message">
+            <Icon name={glyph("alert-circle")} size={16} />
+            <span class="radio-item__error-text text-emphasis-body-small">{opt.error}</span>
+          </div>
+        {/if}
+      </div>
+    {/each}
+  </ArkRadioGroup.Root>
+</div>

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Radio/Radio.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,+CAA+C,CAAC;AAwEvD,QAAA,MAAM,KAAK,0DAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

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

@@ -0,0 +1,29 @@
+export interface RadioOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+    /** Error message shown beneath the option. Puts the control in error state. */
+    error?: string;
+}
+export interface RadioGroupProps {
+    /** The selectable radio options. */
+    options: RadioOption[];
+    /** Selected value. Bindable: `bind:value`. */
+    value?: string;
+    /** Initial selected value for uncontrolled usage. */
+    defaultValue?: string;
+    /** Callback fired when selection changes. */
+    onValueChange?: (value: string) => void;
+    /** Group label rendered above the options. */
+    label?: string;
+    /** Layout direction of the radio items. Defaults to 'vertical'. */
+    orientation?: "horizontal" | "vertical";
+    /** Whether the entire group should ignore user interaction. */
+    disabled?: boolean;
+    /** Name attribute for form submission. */
+    name?: string;
+    class?: string;
+    /** Accessible name for the group when it has no visible `label`. */
+    "aria-label"?: string;
+}
+//# sourceMappingURL=Radio.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Radio/Radio.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+EAA+E;IAC/E,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,eAAe;IAC9B,oCAAoC;IACpC,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,8CAA8C;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qDAAqD;IACrD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,6CAA6C;IAC7C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,8CAA8C;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mEAAmE;IACnE,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oEAAoE;IACpE,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB"}

package/dist/components/Radio/Radio.types.js

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

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

@@ -0,0 +1,3 @@
+export { default as RadioGroup } from "./Radio.svelte";
+export type { RadioGroupProps, RadioOption } from "./Radio.types.js";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Radio/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACvD,YAAY,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/components/Radio/index.js

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

package/dist/components/Range/Range.svelte

@@ -0,0 +1,183 @@
+<!--
+  A labelled range slider.
+
+  Snapping is controlled two ways:
+  - `step` snaps at regular intervals between `min` and `max` (native, keyboard
+    and pointer).
+  - `snapValues` snaps to a fixed set of allowed values. These are driven by
+    index so the thumb lands exactly on an allowed value — and lands on the
+    adjacent one with a single arrow-key press — regardless of their spacing.
+-->
+<script lang="ts">
+  import { Field, Slider } from "@ark-ui/svelte";
+  import { clsx } from "clsx";
+  import { OMIT_ARIA, rangeStyles } from "@ui-organized/core";
+  import FieldError from "../FieldError/FieldError.svelte";
+  import type { RangeProps } from "./Range.types.js";
+  import "@ui-organized/core/components/Range/Range.css";
+
+  let {
+    label,
+    value = $bindable(),
+    defaultValue,
+    onValueChange,
+    onValueCommitted,
+    min = 0,
+    max = 100,
+    step = 1,
+    snapValues,
+    rangeLabels = false,
+    startLabel,
+    endLabel,
+    size,
+    error,
+    disabled,
+    hideValue = false,
+    formatValue,
+    name,
+    id,
+    class: className,
+    "aria-label": ariaLabel,
+  }: RangeProps = $props();
+
+  function clamp(n: number, lower: number, upper: number): number {
+    return Math.min(Math.max(n, lower), upper);
+  }
+
+  /** Index of the value in `sorted` (ascending) closest to `target`. */
+  function nearestIndex(sorted: readonly number[], target: number): number {
+    let best = 0;
+    let bestDist = Infinity;
+    for (let i = 0; i < sorted.length; i += 1) {
+      const v = sorted[i];
+      if (v === undefined) continue;
+      const dist = Math.abs(v - target);
+      if (dist < bestDist) {
+        bestDist = dist;
+        best = i;
+      }
+    }
+    return best;
+  }
+
+  const isInvalid = $derived(!!error);
+  const errorMessage = $derived(typeof error === "string" ? error : undefined);
+
+  // The caption is a Field.Label — it carries the *field's* id, while the slider
+  // machine names its thumb after its own Label part, which this component never
+  // renders. Left alone the thumb points at nothing and has no accessible name;
+  // pinning both to one id is what joins the caption to the thumb. React uses
+  // useId() here; this is Svelte's equivalent.
+  const labelId = $props.id();
+
+  // A fixed set of allowed values is driven by index, so pointer drags and
+  // arrow keys both settle exactly on an allowed value (evenly spaced).
+  const snapPoints = $derived(
+    snapValues && snapValues.length > 0 ? [...snapValues].sort((a, b) => a - b) : null,
+  );
+
+  const resolvedMin = $derived(snapPoints ? (snapPoints[0] ?? min) : min);
+  const resolvedMax = $derived(
+    snapPoints ? (snapPoints[snapPoints.length - 1] ?? max) : max,
+  );
+
+  /** Resolve a public value from a raw slider value (an index when snapping). */
+  function toPublic(raw: readonly number[]): number {
+    const n = raw[0] ?? 0;
+    if (!snapPoints) return n;
+    const idx = clamp(Math.round(n), 0, snapPoints.length - 1);
+    return snapPoints[idx] ?? resolvedMin;
+  }
+
+  // Read off the props rather than the deriveds, so the compiler sees a closure
+  // rather than a one-shot reference to reactive state.
+  function initialValue(): number {
+    const points = snapValues && snapValues.length > 0 ? [...snapValues].sort((a, b) => a - b) : null;
+    const base = points ? (points[0] ?? min) : min;
+    const initial = defaultValue ?? base;
+    if (points) return points[nearestIndex(points, initial)] ?? base;
+    return clamp(initial, min, max);
+  }
+
+  let uncontrolled = $state(initialValue());
+  const current = $derived(value !== undefined ? value : uncontrolled);
+
+  // What the underlying Ark slider actually drives.
+  const sliderValue = $derived(snapPoints ? nearestIndex(snapPoints, current) : current);
+
+  const displayValue = $derived(formatValue ? formatValue(current) : String(current));
+
+  const resolvedStartLabel = $derived(startLabel ?? resolvedMin);
+  const resolvedEndLabel = $derived(endLabel ?? resolvedMax);
+</script>
+
+<Field.Root class={clsx(rangeStyles({ size }), className)} invalid={isInvalid} {disabled}>
+  <div class="range__header">
+    {#if label}
+      <Field.Label id={labelId} class="range__label text-default-body-small">{label}</Field.Label>
+    {/if}
+    {#if !hideValue}
+      <span class="range__value text-default-body-large">{displayValue}</span>
+    {/if}
+  </div>
+
+  <Slider.Root
+    class="range__slider"
+    ids={label ? { label: labelId } : undefined}
+    value={[sliderValue]}
+    onValueChange={(details) => {
+      const next = toPublic(details.value);
+      uncontrolled = next;
+      value = next;
+      onValueChange?.(next);
+    }}
+    onValueChangeEnd={(details) => onValueCommitted?.(toPublic(details.value))}
+    min={snapPoints ? 0 : min}
+    max={snapPoints ? snapPoints.length - 1 : max}
+    step={snapPoints ? 1 : step}
+    {disabled}
+    {name}
+    {id}
+  >
+    <div class="range__row">
+      {#if rangeLabels}
+        <span class="range__range-label range__range-label--start text-default-body-small">
+          {#if typeof resolvedStartLabel === "function"}{@render resolvedStartLabel()}{:else}{resolvedStartLabel}{/if}
+        </span>
+      {/if}
+      <Slider.Control class="range__control">
+        <Slider.Track class="range__track">
+          <Slider.Range class="range__indicator" />
+          <!--
+            The thumb is named by the caption above, or by `aria-label` when
+            there is none. Ark points it at its own Label part unconditionally,
+            and this component renders no such part — a dangling `aria-labelledby`
+            outranks the `aria-label` that is actually there, leaving the thumb
+            nameless.
+          -->
+          <Slider.Thumb
+            index={0}
+            class="range__thumb"
+            aria-labelledby={label ? undefined : OMIT_ARIA}
+            aria-label={label ? undefined : ariaLabel}
+          >
+            <Slider.HiddenInput />
+          </Slider.Thumb>
+        </Slider.Track>
+      </Slider.Control>
+      {#if rangeLabels}
+        <span class="range__range-label range__range-label--end text-default-body-small">
+          {#if typeof resolvedEndLabel === "function"}{@render resolvedEndLabel()}{:else}{resolvedEndLabel}{/if}
+        </span>
+      {/if}
+    </div>
+  </Slider.Root>
+
+  {#if isInvalid && errorMessage}
+    <Field.ErrorText>
+      {#snippet asChild(props)}
+        <FieldError {...props()} message={errorMessage} />
+      {/snippet}
+    </Field.ErrorText>
+  {/if}
+</Field.Root>

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Range.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Range/Range.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,+CAA+C,CAAC;AA4JvD,QAAA,MAAM,KAAK,qDAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

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

@@ -0,0 +1,57 @@
+import type { Snippet } from "svelte";
+export interface RangeProps {
+    /** Accessible label rendered above the track, beside the value readout. */
+    label?: string;
+    /** Controlled value. Bindable: `bind:value`. */
+    value?: number;
+    /** Initial value for uncontrolled usage. Defaults to `min` (or the first snap value). */
+    defaultValue?: number;
+    /** Fired continuously while the value changes (e.g. during a drag). */
+    onValueChange?: (value: number) => void;
+    /** Fired once when the user stops interacting and commits the value. */
+    onValueCommitted?: (value: number) => void;
+    /** Minimum value. Defaults to 0. Ignored when `snapValues` is set. */
+    min?: number;
+    /** Maximum value. Defaults to 100. Ignored when `snapValues` is set. */
+    max?: number;
+    /**
+     * The interval the slider snaps to between `min` and `max`. Defaults to 1.
+     * Use this for "snap at certain intervals" (e.g. `step={5}` → 0, 5, 10 …).
+     * Ignored when `snapValues` is set.
+     */
+    step?: number;
+    /**
+     * A fixed set of allowed values the thumb snaps to ("snap to certain values").
+     * When provided, the slider only settles on these values — evenly spaced along
+     * the track — and both pointer and keyboard interaction land exactly on one of
+     * them. Takes precedence over `min`/`max`/`step`.
+     */
+    snapValues?: number[];
+    /** Show the start/end value labels at each end of the track. */
+    rangeLabels?: boolean;
+    /** Custom content for the start (min) label. Defaults to the resolved minimum. */
+    startLabel?: string | number | Snippet;
+    /** Custom content for the end (max) label. Defaults to the resolved maximum. */
+    endLabel?: string | number | Snippet;
+    /** Size variant. Defaults to 'md'. */
+    size?: "sm" | "md" | "lg";
+    /**
+     * Error state. Pass a string to render an error message below the slider,
+     * or `true` to mark the field invalid without a message.
+     */
+    error?: string | boolean;
+    /** Whether the slider should ignore user interaction. */
+    disabled?: boolean;
+    /** Hide the numeric value readout in the header. */
+    hideValue?: boolean;
+    /** Format the value shown in the header readout. */
+    formatValue?: (value: number) => string;
+    /** Name attribute for form submission. */
+    name?: string;
+    /** ID for the slider root. */
+    id?: string;
+    class?: string;
+    /** Accessible name for the thumb when there is no visible `label`. */
+    "aria-label"?: string;
+}
+//# sourceMappingURL=Range.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Range.types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Range/Range.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,MAAM,WAAW,UAAU;IACzB,2EAA2E;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yFAAyF;IACzF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uEAAuE;IACvE,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,wEAAwE;IACxE,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,sEAAsE;IACtE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,wEAAwE;IACxE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;;OAKG;IACH,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,gEAAgE;IAChE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kFAAkF;IAClF,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;IACvC,gFAAgF;IAChF,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;IACrC,sCAAsC;IACtC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oDAAoD;IACpD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oDAAoD;IACpD,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,0CAA0C;IAC1C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8BAA8B;IAC9B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sEAAsE;IACtE,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB"}

package/dist/components/Range/Range.types.js

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Range/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,YAAY,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACnD,YAAY,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/components/Range/index.js

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

package/dist/components/RatingGroup/RatingGroup.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+  import { RatingGroup as ArkRatingGroup } from "@ark-ui/svelte";
+  import { clsx } from "clsx";
+  import { CONTROL_ICON_SIZE, ratingGroupStyles, type ControlSize } from "@ui-organized/core";
+  import Icon from "../Icon/Icon.svelte";
+  import FieldError from "../FieldError/FieldError.svelte";
+  import type { RatingGroupProps } from "./RatingGroup.types.js";
+  import "@ui-organized/core/components/RatingGroup/RatingGroup.css";
+  import { glyph } from "../../icons/glyph.js";
+
+  const DEFAULT_COUNT = 5;
+
+  let {
+    label,
+    helperText,
+    error,
+    count = DEFAULT_COUNT,
+    value = $bindable(),
+    defaultValue,
+    onValueChange,
+    allowHalf,
+    size = "md",
+    variant,
+    readOnly,
+    disabled,
+    required,
+    name,
+    class: className,
+  }: RatingGroupProps = $props();
+
+  const isInvalid = $derived(!!error);
+  const errorMessage = $derived(typeof error === "string" ? error : undefined);
+  const iconSize = $derived(CONTROL_ICON_SIZE[size as ControlSize]);
+</script>
+
+<ArkRatingGroup.Root
+  class={clsx(ratingGroupStyles({ size, variant }), className)}
+  {count}
+  {value}
+  {defaultValue}
+  onValueChange={(details) => {
+    value = details.value;
+    onValueChange?.(details.value);
+  }}
+  {allowHalf}
+  {readOnly}
+  {disabled}
+  {required}
+  {name}
+>
+  {#if label}
+    <ArkRatingGroup.Label class="field__label">
+      {label}
+      {#if required}<span class="field__required" aria-hidden="true"></span>{/if}
+    </ArkRatingGroup.Label>
+  {/if}
+  <ArkRatingGroup.Control class="rating-group__control">
+    <!--
+      `api.items` is the machine's index list — the source of truth for how many
+      stars exist, so `count` never has to be walked twice. The Svelte context
+      part hands the api over as an accessor, hence `api()`.
+    -->
+    <ArkRatingGroup.Context>
+      {#snippet render(api)}
+        {#each api().items as index (index)}
+          <ArkRatingGroup.Item {index} class="rating-group__item">
+            <Icon name={glyph("star")} size={iconSize} class="rating-group__star" />
+            <!--
+              The half state is a clipped copy laid over the empty star. Ark sets
+              data-half on the item; the width is what does the clipping, so the
+              two stars stay pixel-aligned.
+            -->
+            {#if allowHalf}
+              <span class="rating-group__half" aria-hidden="true">
+                <Icon name={glyph("star")} size={iconSize} class="rating-group__star" />
+              </span>
+            {/if}
+          </ArkRatingGroup.Item>
+        {/each}
+      {/snippet}
+    </ArkRatingGroup.Context>
+  </ArkRatingGroup.Control>
+  {#if helperText && !isInvalid}
+    <span class="field__description">{helperText}</span>
+  {/if}
+  {#if isInvalid && errorMessage}
+    <FieldError message={errorMessage} />
+  {/if}
+  <ArkRatingGroup.HiddenInput />
+</ArkRatingGroup.Root>

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

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

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

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

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

@@ -0,0 +1,35 @@
+export interface RatingGroupProps {
+    /** Accessible label text rendered above the stars. */
+    label?: string;
+    /** Helper text rendered below the stars. 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;
+    /** Number of rating items. Defaults to 5. */
+    count?: number;
+    /** Controlled rating. Bindable: `bind:value`. */
+    value?: number;
+    /** Initial rating for the uncontrolled case. */
+    defaultValue?: number;
+    /** Called with the new rating whenever it changes. */
+    onValueChange?: (value: number) => void;
+    /** Allows half-star ratings. Defaults to false. */
+    allowHalf?: boolean;
+    /** Size variant. Defaults to 'md'. */
+    size?: "sm" | "md" | "lg";
+    /** Color of the filled stars. Defaults to 'default'. */
+    variant?: "default" | "warning";
+    /** Renders the rating without interaction while keeping it readable. */
+    readOnly?: boolean;
+    /** Disables the control. */
+    disabled?: boolean;
+    /** Marks the field required and shows the required indicator. */
+    required?: boolean;
+    /** Form field name for the hidden input. */
+    name?: string;
+    class?: string;
+}
+//# sourceMappingURL=RatingGroup.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RatingGroup.types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/RatingGroup/RatingGroup.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,gBAAgB;IAC/B,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2EAA2E;IAC3E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iDAAiD;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gDAAgD;IAChD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,sDAAsD;IACtD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,mDAAmD;IACnD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sCAAsC;IACtC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,wDAAwD;IACxD,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4CAA4C;IAC5C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB"}

package/dist/components/RatingGroup/RatingGroup.types.js

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/RatingGroup/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/RatingGroup/index.js

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