@ui-organized/svelte 0.0.0-stage → 6.0.0

package/dist/components/DateRangeInput/DateRangeInput.svelte

@@ -0,0 +1,271 @@
+<!--
+  A from–to date range built from two native `<input type="date">` controls on
+  the Input field surface, under one shared label, helper text and error.
+
+  On fine pointers the leading calendar buttons open one shared DS-styled
+  two-month range calendar; on touch devices they defer to the OS-native picker.
+  The two ends auto-constrain each other (the end can't precede the start) on top
+  of the optional `min` / `max` bounds. Works bound (`bind:value`) or
+  uncontrolled (`defaultValue`).
+-->
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import { Popover as ArkPopover } from "@ark-ui/svelte";
+  import { clsx } from "clsx";
+  import {
+    CONTROL_ICON_SIZE,
+    inputFieldStyles,
+    parseISODate,
+    popupControls,
+    toISODate,
+  } from "@ui-organized/core";
+  import Icon from "../Icon/Icon.svelte";
+  import FieldError from "../FieldError/FieldError.svelte";
+  import Calendar from "../Calendar/Calendar.svelte";
+  import DatePopover from "../DateField/DatePopover.svelte";
+  import { datePopoverPositioning } from "../DateField/datePopoverPositioning.js";
+  import { openDatePicker } from "../DateField/openDatePicker.js";
+  import { useCoarsePointer } from "../DateField/useCoarsePointer.svelte.js";
+  import type { DateRangeInputProps, DateRangeValue } from "./DateRangeInput.types.js";
+  // Shares the Input field surface/state styling; InputAffix.css supplies the
+  // leading calendar buttons; DateRangeInput.css lays out the start/end pair.
+  import "@ui-organized/core/components/Input/Input.css";
+  import "@ui-organized/core/components/Input/InputAffix.css";
+  import "@ui-organized/core/components/DateRangeInput/DateRangeInput.css";
+  import { glyph } from "../../icons/glyph.js";
+  import { onMount } from "svelte";
+  import { trackFocusModality } from "@ui-organized/core/focus-modality";
+
+  // Text fields read pointer vs keyboard for a quiet focus state on click.
+  onMount(() => trackFocusModality());
+
+  let {
+    label,
+    helperText,
+    error,
+    size,
+    required,
+    disabled,
+    value = $bindable(),
+    defaultValue,
+    onChange,
+    min,
+    max,
+    startName,
+    endName,
+    startLabel = "Start date",
+    endLabel = "End date",
+    separator = "–",
+    class: className,
+    id,
+    portalContainer,
+  }: DateRangeInputProps = $props();
+
+  const isInvalid = $derived(!!error);
+  const errorMessage = $derived(typeof error === "string" ? error : undefined);
+  const iconSize = $derived(CONTROL_ICON_SIZE[size ?? "md"]);
+
+  // React uses useId() here; this is Svelte's equivalent. The group is a plain
+  // <div role="group">, so its name and description have to be wired by hand.
+  const generatedId = $props.id();
+  const labelId = `${generatedId}-label`;
+  const helperId = `${generatedId}-helper`;
+  const errorId = `${generatedId}-error`;
+
+  const coarse = useCoarsePointer();
+
+  let open = $state(false);
+  let rowEl = $state<HTMLDivElement | null>(null);
+  let activeDayEl = $state<HTMLButtonElement | null>(null);
+  let startEl = $state<HTMLInputElement | null>(null);
+  let endEl = $state<HTMLInputElement | null>(null);
+
+  // `defaultValue` seeds the uncontrolled range once and is not tracked after
+  // that — a later change to it must not overwrite what the user has picked.
+  // svelte-ignore state_referenced_locally
+  let internal = $state<DateRangeValue>({
+    start: (value ?? defaultValue)?.start ?? "",
+    end: (value ?? defaultValue)?.end ?? "",
+  });
+  const current = $derived<DateRangeValue>(
+    value ? { start: value.start ?? "", end: value.end ?? "" } : internal,
+  );
+
+  function update(next: DateRangeValue) {
+    if (value !== undefined) value = next;
+    else internal = next;
+    onChange?.(next);
+  }
+
+  /**
+   * Captures each end's DOM node so the touch path can call `showPicker()` on
+   * it. An action rather than `bind:this`, because the two inputs are rendered
+   * from one snippet and the binding target has to be chosen per call.
+   */
+  function captureInput(node: HTMLInputElement, side: "start" | "end") {
+    if (side === "start") startEl = node;
+    else endEl = node;
+    return {
+      destroy() {
+        if (side === "start") startEl = null;
+        else endEl = null;
+      },
+    };
+  }
+
+  const describedBy = $derived(
+    [
+      helperText && !isInvalid ? helperId : null,
+      isInvalid && errorMessage ? errorId : null,
+    ]
+      .filter(Boolean)
+      .join(" ") || undefined,
+  );
+</script>
+
+{#snippet calendarIconButton(onclick: (() => void) | undefined, ariaLabel: string)}
+  <button
+    type="button"
+    class="input-affix__adornment input-affix__adornment--start input-affix__action"
+    {onclick}
+    {disabled}
+    aria-label={ariaLabel}
+  >
+    <Icon name={glyph("calendar")} size={iconSize} />
+  </button>
+{/snippet}
+
+{#snippet field(side: "start" | "end", calendarButton: Snippet)}
+  {@const isStart = side === "start"}
+  <div class="input-affix date-range__field">
+    {@render calendarButton()}
+    <!--
+      Native date inputs are never `:placeholder-shown`; flag empty so the
+      mm/dd/yyyy chrome renders in the placeholder color.
+    -->
+    <input
+      use:captureInput={side}
+      type="date"
+      class="field__control field__control--affix-start"
+      data-empty={(isStart ? current.start : current.end) ? undefined : true}
+      value={isStart ? current.start : current.end}
+      oninput={(e) =>
+        update(
+          isStart
+            ? { start: e.currentTarget.value, end: current.end }
+            : { start: current.start, end: e.currentTarget.value },
+        )}
+      min={isStart ? min : current.start || min}
+      max={isStart ? current.end || max : max}
+      name={isStart ? startName : endName}
+      {required}
+      {disabled}
+      aria-label={isStart ? startLabel : endLabel}
+      aria-invalid={isInvalid || undefined}
+    />
+  </div>
+{/snippet}
+
+{#snippet startPickerButton()}
+  {@render calendarIconButton(() => openDatePicker(startEl), `${startLabel} — choose date`)}
+{/snippet}
+
+{#snippet endPickerButton()}
+  {@render calendarIconButton(() => openDatePicker(endEl), `${endLabel} — choose date`)}
+{/snippet}
+
+{#snippet startTrigger()}
+  <!--
+    Ark keeps aria-controls on the trigger at all times, but the popup it names
+    is only mounted while open; popupControls drops it while closed.
+  -->
+  <ArkPopover.Trigger {...popupControls(open)}>
+    {#snippet asChild(props)}
+      <button
+        {...props({
+          type: "button",
+          class: "input-affix__adornment input-affix__adornment--start input-affix__action",
+          disabled,
+          "aria-label": `${startLabel} — choose date`,
+        })}
+      >
+        <Icon name={glyph("calendar")} size={iconSize} />
+      </button>
+    {/snippet}
+  </ArkPopover.Trigger>
+{/snippet}
+
+{#snippet endOpenButton()}
+  {@render calendarIconButton(() => (open = true), `${endLabel} — choose date`)}
+{/snippet}
+
+{#snippet sep()}
+  <span class="date-range__separator text-default-body-large" aria-hidden="true">
+    {#if typeof separator === "string"}{separator}{:else}{@render separator()}{/if}
+  </span>
+{/snippet}
+
+<div
+  {id}
+  role="group"
+  aria-labelledby={label ? labelId : undefined}
+  aria-describedby={describedBy}
+  data-disabled={disabled || undefined}
+  class={clsx(inputFieldStyles({ size }), "date-range", className)}
+>
+  {#if label}
+    <span id={labelId} class="field__label">
+      {label}
+      {#if required}<span class="field__required" aria-hidden="true"></span>{/if}
+    </span>
+  {/if}
+
+  {#if coarse()}
+    <div class="date-range__row" bind:this={rowEl}>
+      {@render field("start", startPickerButton)}
+      {@render sep()}
+      {@render field("end", endPickerButton)}
+    </div>
+  {:else}
+    <ArkPopover.Root
+      bind:open
+      positioning={datePopoverPositioning(() => rowEl)}
+      initialFocusEl={() => activeDayEl}
+    >
+      <div class="date-range__row" bind:this={rowEl}>
+        {@render field("start", startTrigger)}
+        {@render sep()}
+        {@render field("end", endOpenButton)}
+      </div>
+      <DatePopover
+        container={portalContainer}
+        label={`${startLabel} — ${endLabel}, choose dates`}
+      >
+        <Calendar
+          mode="range"
+          numMonths={2}
+          rangeValue={{
+            start: parseISODate(current.start),
+            end: parseISODate(current.end),
+          }}
+          min={parseISODate(min)}
+          max={parseISODate(max)}
+          onRangeChange={(r) =>
+            update({
+              start: r.start ? toISODate(r.start) : "",
+              end: r.end ? toISODate(r.end) : "",
+            })}
+          onRangeComplete={() => (open = false)}
+          onActiveDay={(el) => (activeDayEl = el)}
+        />
+      </DatePopover>
+    </ArkPopover.Root>
+  {/if}
+
+  {#if helperText && !isInvalid}
+    <p id={helperId} class="field__description">{helperText}</p>
+  {/if}
+  {#if isInvalid && errorMessage}
+    <FieldError id={errorId} message={errorMessage} />
+  {/if}
+</div>

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"DateRangeInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/DateRangeInput/DateRangeInput.svelte.ts"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAE,mBAAmB,EAAkB,MAAM,2BAA2B,CAAC;AAGrF,OAAO,+CAA+C,CAAC;AACvD,OAAO,oDAAoD,CAAC;AAC5D,OAAO,iEAAiE,CAAC;AAqNzE,QAAA,MAAM,cAAc,8DAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

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

@@ -0,0 +1,61 @@
+import type { Snippet } from "svelte";
+import type { ControlSize } from "@ui-organized/core";
+/**
+ * The paired start/end values of a date range (ISO `YYYY-MM-DD` strings; `""`
+ * when empty).
+ */
+export interface DateRangeValue {
+    start: string;
+    end: string;
+}
+export interface DateRangeInputProps {
+    /** Accessible label rendered above the pair of controls. */
+    label?: string;
+    /** Helper text rendered below the controls. Hidden when an error is shown. */
+    helperText?: string;
+    /**
+     * Error state. Pass a string to show an error message.
+     * Pass `true` to mark the range invalid without a message.
+     */
+    error?: string | boolean;
+    /** Size variant. Defaults to 'md'. */
+    size?: ControlSize;
+    /** Marks both controls required and shows the required indicator. */
+    required?: boolean;
+    /** Disables both controls. */
+    disabled?: boolean;
+    /** The selected range. Bindable: `bind:value`. */
+    value?: DateRangeValue;
+    /** Uncontrolled initial value. */
+    defaultValue?: DateRangeValue;
+    /** Called with the full range whenever either end changes. */
+    onChange?: (value: DateRangeValue) => void;
+    /** Earliest selectable date for both controls (ISO `YYYY-MM-DD`). */
+    min?: string;
+    /** Latest selectable date for both controls (ISO `YYYY-MM-DD`). */
+    max?: string;
+    /** `name` for the start control (form submission). */
+    startName?: string;
+    /** `name` for the end control (form submission). */
+    endName?: string;
+    /** Accessible label for the start control. Defaults to "Start date". */
+    startLabel?: string;
+    /** Accessible label for the end control. Defaults to "End date". */
+    endLabel?: string;
+    /**
+     * Content rendered between the two controls. Defaults to an en dash.
+     * A snippet stands in for React's arbitrary `ReactNode`.
+     */
+    separator?: string | Snippet;
+    /** Additional class applied to the group root. */
+    class?: string;
+    /** Id applied to the group root. */
+    id?: string;
+    /**
+     * DOM element to portal the calendar popover into. Defaults to `document.body`.
+     * Set this to a themed container when theme variables are scoped to a subtree
+     * so the popover inherits them instead of the document defaults.
+     */
+    portalContainer?: HTMLElement | null;
+}
+//# sourceMappingURL=DateRangeInput.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DateRangeInput.types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/DateRangeInput/DateRangeInput.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAEtD;;;GAGG;AACH,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,mBAAmB;IAClC,4DAA4D;IAC5D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8EAA8E;IAC9E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,sCAAsC;IACtC,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,qEAAqE;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,kDAAkD;IAClD,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,kCAAkC;IAClC,YAAY,CAAC,EAAE,cAAc,CAAC;IAC9B,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAE3C,qEAAqE;IACrE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,mEAAmE;IACnE,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oDAAoD;IACpD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,wEAAwE;IACxE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oEAAoE;IACpE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAE7B,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oCAAoC;IACpC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;;OAIG;IACH,eAAe,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CACtC"}

package/dist/components/DateRangeInput/DateRangeInput.types.js

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/DateRangeInput/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,YAAY,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AACrF,YAAY,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/components/DateRangeInput/index.js

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

package/dist/components/DateTimeInput/DateTimeInput.svelte

@@ -0,0 +1,19 @@
+<!--
+  A single-line date-and-time field — native `<input type="datetime-local">` on
+  the Input field surface, with a leading calendar button that opens the DS
+  calendar popover (with a time field beneath it) or the browser's own
+  date/time picker on touch.
+-->
+<script lang="ts">
+  import DateFieldBase from "../DateField/DateFieldBase.svelte";
+  import type { DateTimeInputProps } from "./DateTimeInput.types.js";
+
+  let { value = $bindable(), ...props }: DateTimeInputProps = $props();
+</script>
+
+<DateFieldBase
+  type="datetime-local"
+  pickerLabel="Choose date and time"
+  bind:value
+  {...props}
+/>

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

@@ -0,0 +1,5 @@
+import type { DateTimeInputProps } from "./DateTimeInput.types.js";
+declare const DateTimeInput: import("svelte").Component<DateTimeInputProps, {}, "value">;
+type DateTimeInput = ReturnType<typeof DateTimeInput>;
+export default DateTimeInput;
+//# sourceMappingURL=DateTimeInput.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimeInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/DateTimeInput/DateTimeInput.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAcnE,QAAA,MAAM,aAAa,6DAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

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

@@ -0,0 +1,35 @@
+import type { HTMLInputAttributes } from "svelte/elements";
+import type { ControlSize } from "@ui-organized/core";
+/**
+ * Props for DateTimeInput. Native datetime-local props (`min`, `max`, `step`,
+ * `name`, `oninput`, …) are inherited; `type` is fixed to `"datetime-local"`.
+ *
+ * Spelled out rather than re-exporting the shared `DateFieldProps`, because
+ * `svelte-package` resolves each component's prop type on its own and an
+ * interface it cannot see means no `.d.ts` at all — silently.
+ */
+export interface DateTimeInputProps extends Omit<HTMLInputAttributes, "size" | "type" | "class" | "value"> {
+    /** Accessible label text rendered above the control. */
+    label?: string;
+    /** Helper text rendered below the control. 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;
+    /** Size variant. Defaults to 'md'. */
+    size?: ControlSize;
+    /** The field's ISO value (`YYYY-MM-DDTHH:mm`). Bindable: `bind:value`. */
+    value?: string;
+    /** Initial ISO value for uncontrolled usage. */
+    defaultValue?: string;
+    class?: string;
+    /**
+     * DOM element to portal the calendar popover into. Defaults to `document.body`.
+     * Set this to a themed container when theme variables are scoped to a subtree
+     * so the popover inherits them instead of the document defaults.
+     */
+    portalContainer?: HTMLElement | null;
+}
+//# sourceMappingURL=DateTimeInput.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimeInput.types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/DateTimeInput/DateTimeInput.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAEtD;;;;;;;GAOG;AACH,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,mBAAmB,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;IACtE,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6EAA6E;IAC7E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,sCAAsC;IACtC,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,0EAA0E;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gDAAgD;IAChD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,eAAe,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CACtC"}

package/dist/components/DateTimeInput/DateTimeInput.types.js

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/DateTimeInput/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,YAAY,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AACnE,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/components/DateTimeInput/index.js

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

package/dist/components/Dialog/Dialog.svelte

@@ -0,0 +1,20 @@
+<!-- Dialog root — controls open state. -->
+<script lang="ts">
+  import { Dialog as ArkDialog } from "@ark-ui/svelte";
+  import type { DialogProps } from "./Dialog.types.js";
+  import "@ui-organized/core/components/Dialog/Dialog.css";
+
+  let { open = $bindable(), defaultOpen, onOpenChange, modal, children }: DialogProps = $props();
+</script>
+
+<ArkDialog.Root
+  bind:open
+  {defaultOpen}
+  onOpenChange={(details) => {
+    open = details.open;
+    onOpenChange?.(details.open);
+  }}
+  {modal}
+>
+  {@render children?.()}
+</ArkDialog.Root>

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Dialog/Dialog.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,iDAAiD,CAAC;AAoBzD,QAAA,MAAM,MAAM,qDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

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

@@ -0,0 +1,47 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes, HTMLButtonAttributes } from "svelte/elements";
+import type { ArkForwardable } from "../../types.js";
+/** Props handed to an `asChild` snippet. Mirrors Ark's own `PropsFn`. */
+export type DialogPropsFn = (props?: HTMLButtonAttributes) => HTMLAttributes<HTMLElement>;
+export interface DialogProps {
+    /** Open state. Bindable: `bind:open`. */
+    open?: boolean;
+    /** Initial open state for uncontrolled usage. */
+    defaultOpen?: boolean;
+    /** Callback fired when the open state changes. */
+    onOpenChange?: (open: boolean) => void;
+    /** Trap focus and block outside interaction while open. */
+    modal?: boolean;
+    children?: Snippet;
+}
+interface TriggerLike extends ArkForwardable<Omit<HTMLButtonAttributes, "class" | "value">> {
+    class?: string;
+    children?: Snippet;
+    asChild?: Snippet<[DialogPropsFn]>;
+}
+export type DialogTriggerProps = TriggerLike;
+export type DialogCloseProps = TriggerLike;
+export interface DialogContentProps extends ArkForwardable<Omit<HTMLAttributes<HTMLDivElement>, "class">> {
+    /** Width preset. Defaults to 'md'. */
+    size?: "sm" | "md" | "lg" | "fullscreen";
+    /** Render a close (x) button in the top-right corner. Defaults to true. */
+    showClose?: boolean;
+    /** Portal container. Defaults to document.body. */
+    container?: HTMLElement | null;
+    class?: string;
+    children?: Snippet;
+}
+export interface DialogTitleProps extends ArkForwardable<Omit<HTMLAttributes<HTMLHeadingElement>, "class">> {
+    class?: string;
+    children?: Snippet;
+}
+export interface DialogDescriptionProps extends ArkForwardable<Omit<HTMLAttributes<HTMLParagraphElement>, "class">> {
+    class?: string;
+    children?: Snippet;
+}
+export interface DialogFooterProps extends Omit<HTMLAttributes<HTMLDivElement>, "class"> {
+    class?: string;
+    children?: Snippet;
+}
+export {};
+//# sourceMappingURL=Dialog.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Dialog/Dialog.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAC5E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAErD,yEAAyE;AACzE,MAAM,MAAM,aAAa,GAAG,CAAC,KAAK,CAAC,EAAE,oBAAoB,KAAK,cAAc,CAAC,WAAW,CAAC,CAAC;AAE1F,MAAM,WAAW,WAAW;IAC1B,yCAAyC;IACzC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,iDAAiD;IACjD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kDAAkD;IAClD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,UAAU,WAAY,SAAQ,cAAc,CAAC,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,OAAO,CAAC,CAAC;IACzF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC;CACpC;AAED,MAAM,MAAM,kBAAkB,GAAG,WAAW,CAAC;AAC7C,MAAM,MAAM,gBAAgB,GAAG,WAAW,CAAC;AAE3C,MAAM,WAAW,kBACf,SAAQ,cAAc,CAAC,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,CAAC;IACrE,sCAAsC;IACtC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,YAAY,CAAC;IACzC,2EAA2E;IAC3E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mDAAmD;IACnD,SAAS,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,gBACf,SAAQ,cAAc,CAAC,IAAI,CAAC,cAAc,CAAC,kBAAkB,CAAC,EAAE,OAAO,CAAC,CAAC;IACzE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,sBACf,SAAQ,cAAc,CAAC,IAAI,CAAC,cAAc,CAAC,oBAAoB,CAAC,EAAE,OAAO,CAAC,CAAC;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACtF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB"}

package/dist/components/Dialog/Dialog.types.js

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

package/dist/components/Dialog/DialogClose.svelte

@@ -0,0 +1,15 @@
+<!-- Closes the dialog when activated. Pass `asChild` to project a custom element. -->
+<script lang="ts">
+  import { Dialog as ArkDialog } from "@ark-ui/svelte";
+  import type { DialogCloseProps } from "./Dialog.types.js";
+
+  let { asChild: project, children, ...rest }: DialogCloseProps = $props();
+</script>
+
+{#if project}
+  <ArkDialog.CloseTrigger {...rest}>
+    {#snippet asChild(props)}{@render project(props)}{/snippet}
+  </ArkDialog.CloseTrigger>
+{:else}
+  <ArkDialog.CloseTrigger {...rest}>{@render children?.()}</ArkDialog.CloseTrigger>
+{/if}

package/dist/components/Dialog/DialogContent.svelte

@@ -0,0 +1,33 @@
+<!-- Portalled backdrop + centered popup holding the dialog body. -->
+<script lang="ts">
+  import { Dialog as ArkDialog, Portal } from "@ark-ui/svelte";
+  import { clsx } from "clsx";
+  import { dialogStyles } from "@ui-organized/core";
+  import Icon from "../Icon/Icon.svelte";
+  import type { DialogContentProps } from "./Dialog.types.js";
+  import { glyph } from "../../icons/glyph.js";
+
+  let {
+    size,
+    showClose = true,
+    container,
+    class: className,
+    children,
+    ...contentProps
+  }: DialogContentProps = $props();
+</script>
+
+<!-- Ark centres the content with a Positioner rather than the popup centring itself. -->
+<Portal container={container ?? undefined}>
+  <ArkDialog.Backdrop class="dialog__backdrop" />
+  <ArkDialog.Positioner class="dialog__positioner">
+    <ArkDialog.Content class={clsx(dialogStyles({ size }), className)} {...contentProps}>
+      {#if showClose}
+        <ArkDialog.CloseTrigger class="dialog__close" aria-label="Close">
+          <Icon name={glyph("close")} size={20} />
+        </ArkDialog.CloseTrigger>
+      {/if}
+      {@render children?.()}
+    </ArkDialog.Content>
+  </ArkDialog.Positioner>
+</Portal>

package/dist/components/Dialog/DialogContent.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { DialogContentProps } from "./Dialog.types.js";
+declare const DialogContent: import("svelte").Component<DialogContentProps, {}, "">;
+type DialogContent = ReturnType<typeof DialogContent>;
+export default DialogContent;
+//# sourceMappingURL=DialogContent.svelte.d.ts.map

package/dist/components/Dialog/DialogContent.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogContent.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Dialog/DialogContent.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAuC5D,QAAA,MAAM,aAAa,wDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/Dialog/DialogDescription.svelte

@@ -0,0 +1,29 @@
+<!-- Supporting copy under the title; becomes the dialog's description.
+
+  ── Why the element is pinned ───────────────────────────────────────────────
+
+  `@ark-ui/svelte` is on 5.24 while React and Vue are on 5.39, and Ark changed
+  its default elements in between: this part renders a `<p>` in 5.24 and a `<div>`
+  in the newer packages. Both of the older tags carry UA margins that a
+  `<div>` does not, so leaving the choice to Ark means this library lays out
+  differently from the other two against a stylesheet all three share.
+
+  Pinning it with `asChild` makes the element ours rather than whichever Ark
+  version happens to be installed — which is the point, since the packages
+  deliberately do not move in lockstep.
+-->
+<script lang="ts">
+  import { Dialog as ArkDialog } from "@ark-ui/svelte";
+  import { clsx } from "clsx";
+  import type { DialogDescriptionProps } from "./Dialog.types.js";
+
+  let { class: className, children, ...rest }: DialogDescriptionProps = $props();
+</script>
+
+<ArkDialog.Description {...rest}>
+  {#snippet asChild(project)}
+    <div {...project()} class={clsx("dialog__description", "text-default-body-medium", className)}>
+      {@render children?.()}
+    </div>
+  {/snippet}
+</ArkDialog.Description>

package/dist/components/Dialog/DialogDescription.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { DialogDescriptionProps } from "./Dialog.types.js";
+declare const DialogDescription: import("svelte").Component<DialogDescriptionProps, {}, "">;
+type DialogDescription = ReturnType<typeof DialogDescription>;
+export default DialogDescription;
+//# sourceMappingURL=DialogDescription.svelte.d.ts.map

package/dist/components/Dialog/DialogDescription.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogDescription.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Dialog/DialogDescription.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAqBhE,QAAA,MAAM,iBAAiB,4DAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}