@ui-organized/svelte 0.0.0-stage → 0.1.0

package/dist/components/Dialog/DialogFooter.svelte

@@ -0,0 +1,9 @@
+<!-- Right-aligned action row, typically holding the dialog's buttons. -->
+<script lang="ts">
+  import { clsx } from "clsx";
+  import type { DialogFooterProps } from "./Dialog.types.js";
+
+  let { class: className, children, ...rest }: DialogFooterProps = $props();
+</script>
+
+<div class={clsx("dialog__footer", className)} {...rest}>{@render children?.()}</div>

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"DialogFooter.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Dialog/DialogFooter.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAc3D,QAAA,MAAM,YAAY,uDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/components/Dialog/DialogTitle.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import { Dialog as ArkDialog } from "@ark-ui/svelte";
+  import { clsx } from "clsx";
+  import type { DialogTitleProps } from "./Dialog.types.js";
+
+  let { class: className, children, ...rest }: DialogTitleProps = $props();
+</script>
+
+<ArkDialog.Title class={clsx("dialog__title", "text-strong-heading-small", className)} {...rest}>
+  {@render children?.()}
+</ArkDialog.Title>

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"DialogTitle.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Dialog/DialogTitle.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAgB1D,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/components/Dialog/DialogTrigger.svelte

@@ -0,0 +1,21 @@
+<!-- Element that opens the dialog. Pass `asChild` to project a custom element. -->
+<script lang="ts">
+  import { Dialog as ArkDialog, useDialogContext } from "@ark-ui/svelte";
+  import { popupControls } from "@ui-organized/core";
+  import type { DialogTriggerProps } from "./Dialog.types.js";
+
+  let { asChild: project, children, ...rest }: DialogTriggerProps = $props();
+
+  const dialog = useDialogContext();
+  // The content it names is only mounted while open; popupControls drops the
+  // reference the rest of the time so it cannot dangle.
+  const controls = $derived(popupControls(dialog().open));
+</script>
+
+{#if project}
+  <ArkDialog.Trigger {...controls} {...rest}>
+    {#snippet asChild(props)}{@render project(props)}{/snippet}
+  </ArkDialog.Trigger>
+{:else}
+  <ArkDialog.Trigger {...controls} {...rest}>{@render children?.()}</ArkDialog.Trigger>
+{/if}

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

@@ -0,0 +1,9 @@
+export { default as Dialog } from "./Dialog.svelte";
+export { default as DialogTrigger } from "./DialogTrigger.svelte";
+export { default as DialogContent } from "./DialogContent.svelte";
+export { default as DialogTitle } from "./DialogTitle.svelte";
+export { default as DialogDescription } from "./DialogDescription.svelte";
+export { default as DialogClose } from "./DialogClose.svelte";
+export { default as DialogFooter } from "./DialogFooter.svelte";
+export type { DialogProps, DialogTriggerProps, DialogContentProps, DialogTitleProps, DialogDescriptionProps, DialogCloseProps, DialogFooterProps, DialogPropsFn, } from "./Dialog.types.js";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Dialog/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,YAAY,EACV,WAAW,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,gBAAgB,EACrE,sBAAsB,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,aAAa,GAC3E,MAAM,mBAAmB,CAAC"}

package/dist/components/Dialog/index.js

@@ -0,0 +1,7 @@
+export { default as Dialog } from "./Dialog.svelte";
+export { default as DialogTrigger } from "./DialogTrigger.svelte";
+export { default as DialogContent } from "./DialogContent.svelte";
+export { default as DialogTitle } from "./DialogTitle.svelte";
+export { default as DialogDescription } from "./DialogDescription.svelte";
+export { default as DialogClose } from "./DialogClose.svelte";
+export { default as DialogFooter } from "./DialogFooter.svelte";

package/dist/components/Divider/Divider.svelte

@@ -0,0 +1,26 @@
+<!--
+  A thin visual rule for separating content or controls. Renders in
+  `surface/overlay-tertiary` to match the design-system Divider used inside
+  toolbars and dense layouts. A vertical rule stretches to its flex row via
+  `align-self: stretch`.
+-->
+<script lang="ts">
+  import { clsx } from "clsx";
+  import { dividerStyles } from "@ui-organized/core";
+  import type { DividerProps } from "./Divider.types.js";
+  import "@ui-organized/core/components/Divider/Divider.css";
+
+  let {
+    orientation = "horizontal",
+    spacing = "none",
+    class: className,
+    ...rest
+  }: DividerProps = $props();
+</script>
+
+<div
+  role="separator"
+  aria-orientation={orientation}
+  class={clsx(dividerStyles({ orientation, spacing }), className)}
+  {...rest}
+></div>

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Divider/Divider.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,mDAAmD,CAAC;AAqB3D,QAAA,MAAM,OAAO,kDAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

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

@@ -0,0 +1,9 @@
+import type { HTMLAttributes } from "svelte/elements";
+export interface DividerProps extends Omit<HTMLAttributes<HTMLDivElement>, "class"> {
+    /** Orientation of the rule. Defaults to 'horizontal'. */
+    orientation?: "horizontal" | "vertical";
+    /** Margin along the cross axis (block when horizontal, inline when vertical). Defaults to 'none'. */
+    spacing?: "none" | "sm" | "md" | "lg";
+    class?: string;
+}
+//# sourceMappingURL=Divider.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Divider/Divider.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEtD,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACjF,yDAAyD;IACzD,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,qGAAqG;IACrG,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB"}

package/dist/components/Divider/Divider.types.js

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

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

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

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

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

package/dist/components/Divider/index.js

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

package/dist/components/Editable/Editable.svelte

@@ -0,0 +1,114 @@
+<script lang="ts">
+  import { Editable as ArkEditable } from "@ark-ui/svelte";
+  import { clsx } from "clsx";
+  import { editableStyles } from "@ui-organized/core";
+  import Button from "../Button/Button.svelte";
+  import FieldError from "../FieldError/FieldError.svelte";
+  import type { EditableProps } from "./Editable.types.js";
+  import "@ui-organized/core/components/Editable/Editable.css";
+  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,
+    value = $bindable(),
+    defaultValue,
+    onValueChange,
+    onValueCommit,
+    placeholder,
+    size = "md",
+    activationMode,
+    submitMode,
+    showControls = false,
+    autoResize,
+    maxLength,
+    required,
+    disabled,
+    readOnly,
+    name,
+    class: className,
+  }: EditableProps = $props();
+
+  const isInvalid = $derived(!!error);
+  const errorMessage = $derived(typeof error === "string" ? error : undefined);
+</script>
+
+<ArkEditable.Root
+  class={clsx(editableStyles({ size }), className)}
+  {value}
+  {defaultValue}
+  onValueChange={(details) => {
+    value = details.value;
+    onValueChange?.(details.value);
+  }}
+  onValueCommit={onValueCommit && ((details) => onValueCommit(details.value))}
+  {placeholder}
+  {activationMode}
+  {submitMode}
+  {autoResize}
+  {maxLength}
+  invalid={isInvalid}
+  {required}
+  {disabled}
+  {readOnly}
+  {name}
+>
+  {#if label}
+    <ArkEditable.Label class="field__label">
+      {label}
+      {#if required}<span class="field__required" aria-hidden="true"></span>{/if}
+    </ArkEditable.Label>
+  {/if}
+  <ArkEditable.Area class="editable__area">
+    <ArkEditable.Preview class="editable__preview" />
+    <ArkEditable.Input class="editable__input" />
+  </ArkEditable.Area>
+  <!--
+    Ark keeps the edit trigger and the submit/cancel pair mounted in opposite
+    states, so the row swaps without any local state here.
+
+    Each trigger *is* the library Button, projected through Ark's asChild. `class`
+    is pulled out and handed over separately because Ark types the projected props
+    in Svelte's own shapes, where it is a `ClassValue` that may be null while the
+    Button takes a string — same reason Clipboard's trigger does it.
+  -->
+  {#if showControls}
+    <ArkEditable.Control class="editable__control">
+      <ArkEditable.EditTrigger>
+        {#snippet asChild(props)}
+          {@const { class: arkClass, ...triggerProps } = props()}
+          <Button intent="ghost" {size} type="button" class={clsx(arkClass)} {...triggerProps}>
+            Edit
+          </Button>
+        {/snippet}
+      </ArkEditable.EditTrigger>
+      <ArkEditable.SubmitTrigger>
+        {#snippet asChild(props)}
+          {@const { class: arkClass, ...triggerProps } = props()}
+          <Button intent="secondary" {size} type="button" class={clsx(arkClass)} {...triggerProps}>
+            Save
+          </Button>
+        {/snippet}
+      </ArkEditable.SubmitTrigger>
+      <ArkEditable.CancelTrigger>
+        {#snippet asChild(props)}
+          {@const { class: arkClass, ...triggerProps } = props()}
+          <Button intent="ghost" {size} type="button" class={clsx(arkClass)} {...triggerProps}>
+            Cancel
+          </Button>
+        {/snippet}
+      </ArkEditable.CancelTrigger>
+    </ArkEditable.Control>
+  {/if}
+  {#if helperText && !isInvalid}
+    <span class="field__description">{helperText}</span>
+  {/if}
+  {#if isInvalid && errorMessage}
+    <FieldError message={errorMessage} />
+  {/if}
+</ArkEditable.Root>

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Editable.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Editable/Editable.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,qDAAqD,CAAC;AAiG7D,QAAA,MAAM,QAAQ,wDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

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

@@ -0,0 +1,43 @@
+export interface EditableProps {
+    /** Accessible label text rendered above the value. */
+    label?: string;
+    /** Helper text rendered below the value. 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;
+    /** Controlled value. Bindable: `bind:value`. */
+    value?: string;
+    /** Initial value for the uncontrolled case. */
+    defaultValue?: string;
+    /** Called on every keystroke while editing. */
+    onValueChange?: (value: string) => void;
+    /** Called when the edit is committed — on submit, or on blur in blur mode. */
+    onValueCommit?: (value: string) => void;
+    /** Text shown when the value is empty. */
+    placeholder?: string;
+    /** Size variant. Defaults to 'md'. */
+    size?: "sm" | "md" | "lg";
+    /** What starts an edit. Defaults to 'focus'. */
+    activationMode?: "focus" | "dblclick" | "click" | "none";
+    /** What commits an edit. Defaults to 'blur'. */
+    submitMode?: "blur" | "enter" | "both" | "none";
+    /** Shows explicit edit / submit / cancel buttons. Defaults to false. */
+    showControls?: boolean;
+    /** Grows the input to fit its content instead of filling the width. */
+    autoResize?: boolean;
+    /** Maximum number of characters. */
+    maxLength?: number;
+    /** Marks the field required and shows the required indicator. */
+    required?: boolean;
+    /** Disables the control. */
+    disabled?: boolean;
+    /** Makes the value read-only, so no edit can be started. */
+    readOnly?: boolean;
+    /** Form field name for the input. */
+    name?: string;
+    class?: string;
+}
+//# sourceMappingURL=Editable.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Editable.types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Editable/Editable.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,aAAa;IAC5B,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,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,+CAA+C;IAC/C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,8EAA8E;IAC9E,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,0CAA0C;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sCAAsC;IACtC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,gDAAgD;IAChD,cAAc,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,OAAO,GAAG,MAAM,CAAC;IACzD,gDAAgD;IAChD,UAAU,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;IAChD,wEAAwE;IACxE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,uEAAuE;IACvE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qCAAqC;IACrC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB"}

package/dist/components/Editable/Editable.types.js

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Editable/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,YAAY,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACzD,YAAY,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/components/Editable/index.js

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

package/dist/components/Field/Field.svelte

@@ -0,0 +1,18 @@
+<!--
+  Form field wrapper. Associates a label, control, description and error message
+  through Ark UI's Field, so validation state flows to all parts via
+  `aria-describedby` / `[data-invalid]`.
+-->
+<script lang="ts">
+  import { Field as ArkField } from "@ark-ui/svelte";
+  import { clsx } from "clsx";
+  import { fieldStyles } from "@ui-organized/core";
+  import type { FieldProps } from "./Field.types.js";
+  import "@ui-organized/core/components/Field/Field.css";
+
+  let { layout, class: className, children, ...rest }: FieldProps = $props();
+</script>
+
+<ArkField.Root class={clsx(fieldStyles({ layout }), className)} {...rest}>
+  {@render children?.()}
+</ArkField.Root>

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

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

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

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

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

@@ -0,0 +1,40 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes, HTMLInputAttributes, HTMLLabelAttributes } from "svelte/elements";
+import type { ArkForwardable } from "../../types.js";
+export interface FieldProps extends ArkForwardable<Omit<HTMLAttributes<HTMLDivElement>, "class">> {
+    /** Marks the field invalid (drives error display + `data-invalid`). */
+    invalid?: boolean;
+    /** Disables the field's control. */
+    disabled?: boolean;
+    /** Marks the field's control required. */
+    required?: boolean;
+    /** Marks the field's control read-only. */
+    readOnly?: boolean;
+    /** Arrangement of label and control. Defaults to 'stacked'. */
+    layout?: "stacked" | "inline";
+    class?: string;
+    children?: Snippet;
+}
+interface PartProps<T extends HTMLElement = HTMLElement> {
+    class?: string;
+    children?: Snippet;
+    id?: string;
+}
+export interface FieldLabelProps extends ArkForwardable<Omit<HTMLLabelAttributes, "class">>, PartProps {
+}
+export interface FieldDescriptionProps extends ArkForwardable<Omit<HTMLAttributes<HTMLSpanElement>, "class">>, PartProps {
+}
+export interface FieldControlProps extends ArkForwardable<Omit<HTMLInputAttributes, "class">>, PartProps {
+    /** The control's value. Bindable: `bind:value`. */
+    value?: string | number | null;
+}
+export interface FieldErrorMessageProps extends ArkForwardable<Omit<HTMLAttributes<HTMLSpanElement>, "class">>, PartProps {
+    /** Message as a plain string — see FieldError for why a snippet is not enough. */
+    message?: string;
+}
+export interface FieldsetProps extends ArkForwardable<Omit<HTMLAttributes<HTMLFieldSetElement>, "class">>, PartProps {
+}
+export interface FieldsetLegendProps extends ArkForwardable<Omit<HTMLAttributes<HTMLLegendElement>, "class">>, PartProps {
+}
+export {};
+//# sourceMappingURL=Field.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Field.types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Field/Field.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EACV,cAAc,EAAE,mBAAmB,EAAE,mBAAmB,EACzD,MAAM,iBAAiB,CAAC;AACzB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAErD,MAAM,WAAW,UACf,SAAQ,cAAc,CAAC,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,CAAC;IACrE,uEAAuE;IACvE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+DAA+D;IAC/D,MAAM,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,UAAU,SAAS,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,eACf,SAAQ,cAAc,CAAC,IAAI,CAAC,mBAAmB,EAAE,OAAO,CAAC,CAAC,EAAE,SAAS;CAAG;AAC1E,MAAM,WAAW,qBACf,SAAQ,cAAc,CAAC,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,OAAO,CAAC,CAAC,EAAE,SAAS;CAAG;AACtF,MAAM,WAAW,iBACf,SAAQ,cAAc,CAAC,IAAI,CAAC,mBAAmB,EAAE,OAAO,CAAC,CAAC,EAAE,SAAS;IACrE,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;CAChC;AACD,MAAM,WAAW,sBACf,SAAQ,cAAc,CAAC,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,OAAO,CAAC,CAAC,EAAE,SAAS;IACjF,kFAAkF;IAClF,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AACD,MAAM,WAAW,aACf,SAAQ,cAAc,CAAC,IAAI,CAAC,cAAc,CAAC,mBAAmB,CAAC,EAAE,OAAO,CAAC,CAAC,EAAE,SAAS;CAAG;AAC1F,MAAM,WAAW,mBACf,SAAQ,cAAc,CAAC,IAAI,CAAC,cAAc,CAAC,iBAAiB,CAAC,EAAE,OAAO,CAAC,CAAC,EAAE,SAAS;CAAG"}

package/dist/components/Field/Field.types.js

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

package/dist/components/Field/FieldControl.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import { Field as ArkField } from "@ark-ui/svelte";
+  import { clsx } from "clsx";
+  import type { FieldControlProps } from "./Field.types.js";
+
+  let { class: className, value = $bindable(), ...rest }: FieldControlProps = $props();
+</script>
+
+<ArkField.Input class={clsx("field__control", className)} bind:value {...rest} />

package/dist/components/Field/FieldControl.svelte.d.ts

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

package/dist/components/Field/FieldControl.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldControl.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Field/FieldControl.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAc1D,QAAA,MAAM,YAAY,4DAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/components/Field/FieldDescription.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import { Field as ArkField } from "@ark-ui/svelte";
+  import { clsx } from "clsx";
+  import type { FieldDescriptionProps } from "./Field.types.js";
+
+  let { class: className, children, ...rest }: FieldDescriptionProps = $props();
+</script>
+
+<ArkField.HelperText class={clsx("field__description", className)} {...rest}>
+  {@render children?.()}
+</ArkField.HelperText>

package/dist/components/Field/FieldDescription.svelte.d.ts

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

package/dist/components/Field/FieldDescription.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldDescription.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Field/FieldDescription.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAgB9D,QAAA,MAAM,gBAAgB,2DAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/components/Field/FieldErrorMessage.svelte

@@ -0,0 +1,31 @@
+<!--
+  Error message wired to the field's validity. Renders through the shared
+  FieldError (icon + tinted pill). Ark's ErrorText shows only while the Field is
+  invalid, so no explicit match condition is needed.
+
+  The two branches are not redundant. FieldError decides whether it has anything
+  to show by checking `children` first and falling back to `message`, so handing
+  it a `children` snippet that happens to render nothing — which is what an
+  unconditional `{#if children}` block does — makes it believe it has content and
+  render an empty pill. A snippet cannot be tested for emptiness from outside, so
+  the only way to say "no children" is not to pass any.
+-->
+<script lang="ts">
+  import { Field as ArkField } from "@ark-ui/svelte";
+  import FieldError from "../FieldError/FieldError.svelte";
+  import type { FieldErrorMessageProps } from "./Field.types.js";
+
+  let { class: className, message, children, ...rest }: FieldErrorMessageProps = $props();
+</script>
+
+<ArkField.ErrorText>
+  {#snippet asChild(props)}
+    {#if children}
+      <FieldError {...props()} class={className} {...rest}>
+        {@render children()}
+      </FieldError>
+    {:else}
+      <FieldError {...props()} class={className} {message} {...rest} />
+    {/if}
+  {/snippet}
+</ArkField.ErrorText>

package/dist/components/Field/FieldErrorMessage.svelte.d.ts

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

package/dist/components/Field/FieldErrorMessage.svelte.d.ts.map

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

package/dist/components/Field/FieldLabel.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import { Field as ArkField } from "@ark-ui/svelte";
+  import { clsx } from "clsx";
+  import type { FieldLabelProps } from "./Field.types.js";
+
+  let { class: className, children, ...rest }: FieldLabelProps = $props();
+</script>
+
+<ArkField.Label class={clsx("field__label", className)} {...rest}>
+  {@render children?.()}
+</ArkField.Label>

package/dist/components/Field/FieldLabel.svelte.d.ts

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

package/dist/components/Field/FieldLabel.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldLabel.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Field/FieldLabel.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAgBxD,QAAA,MAAM,UAAU,qDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/components/Field/Fieldset.svelte

@@ -0,0 +1,12 @@
+<!-- Groups related fields under a shared legend. -->
+<script lang="ts">
+  import { Fieldset as ArkFieldset } from "@ark-ui/svelte";
+  import { clsx } from "clsx";
+  import type { FieldsetProps } from "./Field.types.js";
+
+  let { class: className, children, ...rest }: FieldsetProps = $props();
+</script>
+
+<ArkFieldset.Root class={clsx("fieldset", className)} {...rest}>
+  {@render children?.()}
+</ArkFieldset.Root>

package/dist/components/Field/Fieldset.svelte.d.ts

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

package/dist/components/Field/Fieldset.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Fieldset.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Field/Fieldset.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAiBtD,QAAA,MAAM,QAAQ,mDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/components/Field/FieldsetLegend.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import { Fieldset as ArkFieldset } from "@ark-ui/svelte";
+  import { clsx } from "clsx";
+  import type { FieldsetLegendProps } from "./Field.types.js";
+
+  let { class: className, children, ...rest }: FieldsetLegendProps = $props();
+</script>
+
+<ArkFieldset.Legend class={clsx("fieldset__legend", className)} {...rest}>
+  {@render children?.()}
+</ArkFieldset.Legend>

package/dist/components/Field/FieldsetLegend.svelte.d.ts

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

package/dist/components/Field/FieldsetLegend.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldsetLegend.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Field/FieldsetLegend.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAgB5D,QAAA,MAAM,cAAc,yDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

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

@@ -0,0 +1,10 @@
+export { default as Field } from "./Field.svelte";
+export { default as FieldLabel } from "./FieldLabel.svelte";
+export { default as Label } from "./FieldLabel.svelte";
+export { default as FieldDescription } from "./FieldDescription.svelte";
+export { default as FieldControl } from "./FieldControl.svelte";
+export { default as FieldErrorMessage } from "./FieldErrorMessage.svelte";
+export { default as Fieldset } from "./Fieldset.svelte";
+export { default as FieldsetLegend } from "./FieldsetLegend.svelte";
+export type { FieldProps, FieldLabelProps, FieldDescriptionProps, FieldControlProps, FieldErrorMessageProps, FieldsetProps, FieldsetLegendProps, } from "./Field.types.js";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Field/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAE5D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,YAAY,EACV,UAAU,EAAE,eAAe,EAAE,qBAAqB,EAAE,iBAAiB,EACrE,sBAAsB,EAAE,aAAa,EAAE,mBAAmB,GAC3D,MAAM,kBAAkB,CAAC"}

package/dist/components/Field/index.js

@@ -0,0 +1,9 @@
+export { default as Field } from "./Field.svelte";
+export { default as FieldLabel } from "./FieldLabel.svelte";
+// Also exported standalone as `Label`, matching the React package.
+export { default as Label } from "./FieldLabel.svelte";
+export { default as FieldDescription } from "./FieldDescription.svelte";
+export { default as FieldControl } from "./FieldControl.svelte";
+export { default as FieldErrorMessage } from "./FieldErrorMessage.svelte";
+export { default as Fieldset } from "./Fieldset.svelte";
+export { default as FieldsetLegend } from "./FieldsetLegend.svelte";