@alfakit/react 0.0.0-stage → 0.1.0

package/dist/components/fields/slider.js

@@ -0,0 +1,146 @@
+import { useDirection, useFormatter, useT } from "../../context.js";
+import { cn } from "../../lib/utils.js";
+import { useField } from "../form/form-context.js";
+import { FieldWrapper } from "../schema/field-wrapper.js";
+import { fieldIds, sliderBehavior, sliderBlocksTap, sliderDirection, sliderFillSections, sliderFillStyle, sliderFromPrimitive, sliderHasTooltips, sliderNextValues, sliderPips, sliderPrimitive, sliderShowsTooltip, sliderSnap, sliderState, sliderToPrimitive, sliderValues, startSliderRangeDrag } from "@alfakit/core";
+import { useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Slider } from "radix-ui";
+//#region src/components/fields/slider.tsx
+/**
+* A slider with one thumb, or several for a range. Built on Radix Slider, which handles
+* pointer and keyboard input and mirrors itself in right-to-left layouts (`dir`). Values,
+* tooltips and pips are formatted with the panel's locale.
+*/
+function SliderField({ component }) {
+	const t = useT();
+	const dir = sliderDirection(component, useDirection());
+	const formatter = useFormatter();
+	const { value, setValue, blur, error, id, disabled, readOnly, aria } = useField(component);
+	const values = sliderValues(value, component);
+	const pips = useMemo(() => component.pips ? sliderPips(component) : [], [component]);
+	const vertical = Boolean(component.vertical);
+	const topToBottom = vertical && Boolean(component.topToBottom);
+	const behavior = sliderBehavior(component);
+	const trackRef = useRef(null);
+	const [smooth, setSmooth] = useState(false);
+	const primitive = sliderPrimitive(component, smooth);
+	const locked = disabled || readOnly;
+	const change = (next) => setValue(sliderState(sliderNextValues(values, next, component), component));
+	const onPointerDownCapture = (event) => {
+		if (locked) return;
+		const target = event.target;
+		if (behavior.has("drag") && target.closest("[data-slot=\"slider-range\"]") && trackRef.current) {
+			startSliderRangeDrag(event.nativeEvent, {
+				track: trackRef.current,
+				values,
+				schema: component,
+				direction: dir,
+				vertical,
+				topToBottom,
+				onChange: (next) => setValue(sliderState(next, component)),
+				onEnd: () => blur()
+			});
+			return;
+		}
+		if (sliderBlocksTap(target, component)) {
+			event.stopPropagation();
+			return;
+		}
+		if (behavior.has("smooth-steps") && target.closest("[role=\"slider\"]")) setSmooth(true);
+	};
+	const format = (number) => formatter.number(number, {
+		maximumFractionDigits: component.decimalPlaces ?? 10,
+		minimumFractionDigits: component.decimalPlaces ?? 0
+	});
+	const range = component.max - component.min;
+	const fillSections = sliderFillSections(values, component);
+	const fill = fillSections === null && (component.fillTrack === true || values.length > 1);
+	const thumbLabel = (index) => {
+		if (values.length === 1) return void 0;
+		if (values.length === 2) return index === 0 ? t("slider.minimum", {}, "Minimum") : t("slider.maximum", {}, "Maximum");
+		return t("slider.thumb", { number: index + 1 }, `Value ${index + 1}`);
+	};
+	return /* @__PURE__ */ jsx(FieldWrapper, {
+		field: component,
+		htmlFor: `${id}-thumb-0`,
+		error,
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "slider",
+			className: cn("px-2", sliderHasTooltips(component) && !vertical && "pt-7", pips.length > 0 && "pb-6"),
+			onPointerDownCapture,
+			children: /* @__PURE__ */ jsxs(Slider.Root, {
+				id,
+				dir,
+				min: primitive.min,
+				max: primitive.max,
+				step: primitive.step,
+				minStepsBetweenThumbs: component.minDifference && !primitive.nonLinear ? Math.round(component.minDifference / component.step) : 0,
+				orientation: vertical ? "vertical" : "horizontal",
+				inverted: topToBottom,
+				disabled: locked,
+				value: sliderToPrimitive(values, component),
+				onValueChange: (next) => change(sliderFromPrimitive(next, component, !smooth)),
+				onValueCommit: () => {
+					if (smooth) {
+						setSmooth(false);
+						change(values.map((thumb) => sliderSnap(thumb, component)));
+					}
+					blur();
+				},
+				className: cn("relative flex touch-none items-center select-none data-[disabled]:opacity-50", vertical ? "h-48 w-5 flex-col" : "w-full", readOnly && "data-[disabled]:opacity-100"),
+				children: [
+					/* @__PURE__ */ jsxs(Slider.Track, {
+						ref: trackRef,
+						className: cn("bg-muted relative grow overflow-hidden rounded-full", vertical ? "h-full w-1.5" : "h-1.5 w-full"),
+						children: [fillSections?.map((section) => /* @__PURE__ */ jsx("span", {
+							"data-slot": "slider-fill",
+							"aria-hidden": "true",
+							className: cn("bg-primary absolute", vertical ? "w-full" : "h-full"),
+							style: sliderFillStyle(section, {
+								vertical,
+								topToBottom,
+								direction: dir
+							})
+						}, `${section.start}-${section.end}`)), /* @__PURE__ */ jsx(Slider.Range, {
+							"data-slot": "slider-range",
+							className: cn("absolute", fill ? "bg-primary" : "bg-transparent", behavior.has("drag") && values.length > 1 && !locked && "cursor-grab", vertical ? "w-full" : "h-full")
+						})]
+					}),
+					values.map((thumb, index) => /* @__PURE__ */ jsx(Slider.Thumb, {
+						id: `${id}-thumb-${index}`,
+						"aria-label": thumbLabel(index),
+						"aria-labelledby": values.length === 1 && component.label ? fieldIds(id).label : void 0,
+						"aria-describedby": aria["aria-describedby"],
+						"aria-valuetext": format(thumb),
+						className: "border-primary bg-background ring-ring/50 relative block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none",
+						children: sliderShowsTooltip(component, index) && /* @__PURE__ */ jsx("span", {
+							"aria-hidden": "true",
+							className: cn("bg-foreground text-background pointer-events-none absolute rounded px-1.5 py-0.5 text-xs whitespace-nowrap tabular-nums", vertical ? "start-6 top-1/2 -translate-y-1/2" : "bottom-6 left-1/2 -translate-x-1/2"),
+							children: format(thumb)
+						})
+					}, index)),
+					pips.length > 0 && range > 0 && /* @__PURE__ */ jsx("div", {
+						"aria-hidden": "true",
+						className: cn("pointer-events-none absolute", vertical ? "inset-y-0 start-6" : "inset-x-0 top-4"),
+						children: pips.map((pip) => {
+							const offset = `${pip.percent}%`;
+							return /* @__PURE__ */ jsxs("span", {
+								style: vertical ? topToBottom ? { top: offset } : { bottom: offset } : dir === "rtl" ? { right: offset } : { left: offset },
+								className: cn("absolute flex items-center gap-1", vertical ? cn("flex-row", topToBottom ? "-translate-y-1/2" : "translate-y-1/2") : "flex-col", !vertical && (dir === "rtl" ? "translate-x-1/2" : "-translate-x-1/2")),
+								children: [/* @__PURE__ */ jsx("span", { className: cn("bg-border block", vertical ? "h-px" : "w-px", pip.labelled && !pip.small ? vertical ? "w-2" : "h-2" : vertical ? "w-1" : "h-1") }), pip.labelled && /* @__PURE__ */ jsx("span", {
+									className: cn("text-muted-foreground tabular-nums", pip.small ? "text-[0.625rem]" : "text-xs"),
+									children: format(pip.value)
+								})]
+							}, pip.value);
+						})
+					})
+				]
+			})
+		})
+	});
+}
+//#endregion
+export { SliderField };
+
+//# sourceMappingURL=slider.js.map

package/dist/components/fields/slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.js","names":["SliderPrimitive"],"sources":["../../../src/components/fields/slider.tsx"],"sourcesContent":["import type { SliderSchema } from '@alfakit/core'\nimport {\n  fieldIds,\n  sliderBehavior,\n  sliderBlocksTap,\n  sliderDirection,\n  sliderFillSections,\n  sliderFillStyle,\n  sliderFromPrimitive,\n  sliderHasTooltips,\n  sliderNextValues,\n  sliderPips,\n  sliderPrimitive,\n  sliderShowsTooltip,\n  sliderSnap,\n  sliderState,\n  sliderToPrimitive,\n  sliderValues,\n  startSliderRangeDrag,\n} from '@alfakit/core'\nimport { Slider as SliderPrimitive } from 'radix-ui'\nimport { useMemo, useRef, useState, type PointerEvent } from 'react'\nimport { useDirection, useFormatter, useT } from '../../context'\nimport { cn } from '../../lib/utils'\nimport { useField } from '../form/form-context'\nimport { FieldWrapper } from '../schema/field-wrapper'\n\n/**\n * A slider with one thumb, or several for a range. Built on Radix Slider, which handles\n * pointer and keyboard input and mirrors itself in right-to-left layouts (`dir`). Values,\n * tooltips and pips are formatted with the panel's locale.\n */\nexport function SliderField({ component }: { component: SliderSchema }) {\n  const t = useT()\n  // `rtl()` overrides the panel's direction.\n  const dir = sliderDirection(component, useDirection())\n  const formatter = useFormatter()\n  const { value, setValue, blur, error, id, disabled, readOnly, aria } =\n    useField<unknown>(component)\n  const values = sliderValues(value, component)\n  const pips = useMemo(() => (component.pips ? sliderPips(component) : []), [component])\n  const vertical = Boolean(component.vertical)\n  // `vertical(isTopToBottom: true)`: the minimum at the top.\n  const topToBottom = vertical && Boolean(component.topToBottom)\n  const behavior = sliderBehavior(component)\n  const trackRef = useRef<HTMLSpanElement>(null)\n  // `Behavior::SmoothSteps`: no snapping while a pointer drags a thumb.\n  const [smooth, setSmooth] = useState(false)\n  const primitive = sliderPrimitive(component, smooth)\n  const locked = disabled || readOnly\n\n  const change = (next: number[]) =>\n    setValue(sliderState(sliderNextValues(values, next, component), component))\n\n  // Before the primitive sees the press: start a range drag, or swallow taps on the track.\n  const onPointerDownCapture = (event: PointerEvent<HTMLDivElement>) => {\n    if (locked) return\n\n    const target = event.target as Element\n\n    if (behavior.has('drag') && target.closest('[data-slot=\"slider-range\"]') && trackRef.current) {\n      startSliderRangeDrag(event.nativeEvent, {\n        track: trackRef.current,\n        values,\n        schema: component,\n        direction: dir,\n        vertical,\n        topToBottom,\n        onChange: (next) => setValue(sliderState(next, component)),\n        onEnd: () => blur(),\n      })\n\n      return\n    }\n\n    if (sliderBlocksTap(target, component)) {\n      event.stopPropagation()\n\n      return\n    }\n\n    if (behavior.has('smooth-steps') && target.closest('[role=\"slider\"]')) setSmooth(true)\n  }\n  const format = (number: number) =>\n    formatter.number(number, {\n      maximumFractionDigits: component.decimalPlaces ?? 10,\n      minimumFractionDigits: component.decimalPlaces ?? 0,\n    })\n  const range = component.max - component.min\n  // `fillTrack([…])`: chosen sections are drawn here; the primitive's range stays clear.\n  const fillSections = sliderFillSections(values, component)\n  const fill = fillSections === null && (component.fillTrack === true || values.length > 1)\n\n  const thumbLabel = (index: number) => {\n    if (values.length === 1) return undefined\n    if (values.length === 2) {\n      return index === 0 ? t('slider.minimum', {}, 'Minimum') : t('slider.maximum', {}, 'Maximum')\n    }\n\n    return t('slider.thumb', { number: index + 1 }, `Value ${index + 1}`)\n  }\n\n  return (\n    <FieldWrapper field={component} htmlFor={`${id}-thumb-0`} error={error}>\n      <div\n        data-slot=\"slider\"\n        className={cn(\n          'px-2',\n          sliderHasTooltips(component) && !vertical && 'pt-7',\n          pips.length > 0 && 'pb-6',\n        )}\n        onPointerDownCapture={onPointerDownCapture}\n      >\n        <SliderPrimitive.Root\n          id={id}\n          dir={dir}\n          min={primitive.min}\n          max={primitive.max}\n          step={primitive.step}\n          minStepsBetweenThumbs={\n            component.minDifference && !primitive.nonLinear\n              ? Math.round(component.minDifference / component.step)\n              : 0\n          }\n          orientation={vertical ? 'vertical' : 'horizontal'}\n          inverted={topToBottom}\n          disabled={locked}\n          value={sliderToPrimitive(values, component)}\n          onValueChange={(next) => change(sliderFromPrimitive(next, component, !smooth))}\n          onValueCommit={() => {\n            if (smooth) {\n              setSmooth(false)\n              change(values.map((thumb) => sliderSnap(thumb, component)))\n            }\n\n            blur()\n          }}\n          className={cn(\n            'relative flex touch-none items-center select-none data-[disabled]:opacity-50',\n            vertical ? 'h-48 w-5 flex-col' : 'w-full',\n            readOnly && 'data-[disabled]:opacity-100',\n          )}\n        >\n          <SliderPrimitive.Track\n            ref={trackRef}\n            className={cn(\n              'bg-muted relative grow overflow-hidden rounded-full',\n              vertical ? 'h-full w-1.5' : 'h-1.5 w-full',\n            )}\n          >\n            {fillSections?.map((section) => (\n              <span\n                key={`${section.start}-${section.end}`}\n                data-slot=\"slider-fill\"\n                aria-hidden=\"true\"\n                className={cn('bg-primary absolute', vertical ? 'w-full' : 'h-full')}\n                // Runtime geometry: no Tailwind class can hold these values.\n                style={sliderFillStyle(section, { vertical, topToBottom, direction: dir })}\n              />\n            ))}\n            <SliderPrimitive.Range\n              data-slot=\"slider-range\"\n              className={cn(\n                'absolute',\n                fill ? 'bg-primary' : 'bg-transparent',\n                behavior.has('drag') && values.length > 1 && !locked && 'cursor-grab',\n                vertical ? 'w-full' : 'h-full',\n              )}\n            />\n          </SliderPrimitive.Track>\n          {values.map((thumb, index) => (\n            <SliderPrimitive.Thumb\n              key={index}\n              id={`${id}-thumb-${index}`}\n              aria-label={thumbLabel(index)}\n              aria-labelledby={\n                values.length === 1 && component.label ? fieldIds(id).label : undefined\n              }\n              aria-describedby={aria['aria-describedby']}\n              aria-valuetext={format(thumb)}\n              className=\"border-primary bg-background ring-ring/50 relative block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none\"\n            >\n              {sliderShowsTooltip(component, index) && (\n                <span\n                  aria-hidden=\"true\"\n                  className={cn(\n                    'bg-foreground text-background pointer-events-none absolute rounded px-1.5 py-0.5 text-xs whitespace-nowrap tabular-nums',\n                    vertical\n                      ? 'start-6 top-1/2 -translate-y-1/2'\n                      : 'bottom-6 left-1/2 -translate-x-1/2',\n                  )}\n                >\n                  {format(thumb)}\n                </span>\n              )}\n            </SliderPrimitive.Thumb>\n          ))}\n          {pips.length > 0 && range > 0 && (\n            <div\n              aria-hidden=\"true\"\n              className={cn(\n                'pointer-events-none absolute',\n                vertical ? 'inset-y-0 start-6' : 'inset-x-0 top-4',\n              )}\n            >\n              {pips.map((pip) => {\n                // Radix puts the minimum at the bottom of a vertical slider and at the\n                // inline start of a horizontal one (the right in RTL).\n                const offset = `${pip.percent}%`\n                const style = vertical\n                  ? topToBottom\n                    ? { top: offset }\n                    : { bottom: offset }\n                  : dir === 'rtl'\n                    ? { right: offset }\n                    : { left: offset }\n\n                return (\n                  <span\n                    key={pip.value}\n                    style={style}\n                    className={cn(\n                      'absolute flex items-center gap-1',\n                      vertical\n                        ? cn('flex-row', topToBottom ? '-translate-y-1/2' : 'translate-y-1/2')\n                        : 'flex-col',\n                      !vertical && (dir === 'rtl' ? 'translate-x-1/2' : '-translate-x-1/2'),\n                    )}\n                  >\n                    <span\n                      className={cn(\n                        'bg-border block',\n                        vertical ? 'h-px' : 'w-px',\n                        pip.labelled && !pip.small\n                          ? vertical\n                            ? 'w-2'\n                            : 'h-2'\n                          : vertical\n                            ? 'w-1'\n                            : 'h-1',\n                      )}\n                    />\n                    {pip.labelled && (\n                      <span\n                        className={cn(\n                          'text-muted-foreground tabular-nums',\n                          pip.small ? 'text-[0.625rem]' : 'text-xs',\n                        )}\n                      >\n                        {format(pip.value)}\n                      </span>\n                    )}\n                  </span>\n                )\n              })}\n            </div>\n          )}\n        </SliderPrimitive.Root>\n      </div>\n    </FieldWrapper>\n  )\n}\n"],"mappings":"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"}

package/dist/components/fields/tags-input.d.ts

@@ -0,0 +1,7 @@
+import { TagsInputSchema } from "@alfakit/core";
+//#region src/components/fields/tags-input.d.ts
+export declare function TagsInputField({ component }: {
+  component: TagsInputSchema;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=tags-input.d.ts.map

package/dist/components/fields/tags-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tags-input.d.ts","names":[],"sources":["../../../src/components/fields/tags-input.tsx"],"mappings":";;wBAUgB,iBAAiB;EAAe,WAAW;oBAAiB,IAAA"}

package/dist/components/fields/tags-input.js

@@ -0,0 +1,129 @@
+import { useDirection, useT } from "../../context.js";
+import { cn } from "../../lib/utils.js";
+import { badgeColorClasses, colorClass } from "../../lib/colors.js";
+import { Badge } from "../ui/badge.js";
+import { useField } from "../form/form-context.js";
+import { FieldWrapper } from "../schema/field-wrapper.js";
+import { moveListItem, reorderOffset } from "@alfakit/core";
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { XIcon } from "lucide-react";
+//#region src/components/fields/tags-input.tsx
+function TagsInputField({ component }) {
+	const t = useT();
+	const { value, setValue, blur, error, id, disabled, readOnly, aria } = useField(component);
+	const direction = useDirection();
+	const [draft, setDraft] = useState("");
+	const [dragIndex, setDragIndex] = useState(null);
+	const focusIndex = useRef(null);
+	const [announcement, setAnnouncement] = useState("");
+	const listRef = useRef(null);
+	const reorderable = Boolean(component.reorderable) && !disabled && !readOnly;
+	const tags = value ?? [];
+	const listId = component.suggestions ? `${id}-suggestions` : void 0;
+	const commit = (raw) => {
+		const tag = `${component.tagPrefix ?? ""}${raw.trim()}${component.tagSuffix ?? ""}`;
+		if (raw.trim() === "" || tags.includes(tag)) {
+			setDraft("");
+			return;
+		}
+		setValue([...tags, tag]);
+		setDraft("");
+	};
+	useEffect(() => {
+		if (focusIndex.current === null) return;
+		listRef.current?.querySelectorAll("[data-tag]")[focusIndex.current]?.focus();
+		focusIndex.current = null;
+	}, [value]);
+	const onTagKeyDown = (event, index) => {
+		const offset = reorderOffset(event, "horizontal", direction);
+		if (!reorderable || offset === null) return;
+		event.preventDefault();
+		const target = index + offset;
+		if (target < 0 || target >= tags.length) return;
+		setValue(moveListItem(tags, index, target));
+		focusIndex.current = target;
+		setAnnouncement(t("form.tag_moved", {
+			tag: tags[index] ?? "",
+			position: target + 1,
+			total: tags.length
+		}, ":tag moved to position :position of :total"));
+	};
+	const onKeyDown = (event) => {
+		if (readOnly) return;
+		if (component.splitKeys.includes(event.key)) {
+			event.preventDefault();
+			commit(draft);
+		} else if (event.key === "Backspace" && draft === "" && tags.length > 0) setValue(tags.slice(0, -1));
+	};
+	return /* @__PURE__ */ jsx(FieldWrapper, {
+		field: component,
+		htmlFor: id,
+		error,
+		children: /* @__PURE__ */ jsxs("div", {
+			ref: listRef,
+			className: cn("border-input dark:bg-input/30 has-[input:focus-visible]:border-ring has-[input:focus-visible]:ring-ring/50 flex min-h-9 w-full flex-wrap items-center gap-1.5 rounded-md border px-2 py-1.5 shadow-xs has-[input:focus-visible]:ring-[3px]", error && "border-destructive", disabled && "opacity-50"),
+			children: [
+				tags.map((tag, index) => /* @__PURE__ */ jsxs(Badge, {
+					variant: "outline",
+					"data-tag": "",
+					tabIndex: reorderable ? 0 : void 0,
+					"aria-describedby": reorderable ? `${id}-reorder-hint` : void 0,
+					onKeyDown: (event) => onTagKeyDown(event, index),
+					draggable: reorderable,
+					onDragStart: () => setDragIndex(index),
+					onDragOver: (event) => reorderable && event.preventDefault(),
+					onDrop: () => {
+						if (dragIndex !== null && dragIndex !== index) setValue(moveListItem(tags, dragIndex, index));
+						setDragIndex(null);
+					},
+					onDragEnd: () => setDragIndex(null),
+					className: cn("gap-1 pe-1", colorClass(badgeColorClasses, component.color, "gray"), reorderable && "focus-visible:ring-ring/50 cursor-grab outline-none focus-visible:ring-[3px]", dragIndex === index && "opacity-50"),
+					children: [tag, !disabled && !readOnly && /* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-label": t("form.remove_tag", { tag }, "Remove :tag"),
+						className: "hover:bg-foreground/10 rounded-sm",
+						onClick: () => setValue(tags.filter((_, i) => i !== index)),
+						children: /* @__PURE__ */ jsx(XIcon, { className: "size-3" })
+					})]
+				}, `${tag}-${index}`)),
+				/* @__PURE__ */ jsx("input", {
+					dir: "auto",
+					id,
+					list: listId,
+					value: draft,
+					onChange: (event) => setDraft(event.target.value),
+					onKeyDown,
+					onBlur: () => {
+						if (!readOnly && draft.trim() !== "") commit(draft);
+						blur();
+					},
+					placeholder: tags.length === 0 ? component.placeholder ?? t("form.add_item", {}, "Add…") : "",
+					disabled,
+					readOnly,
+					...aria,
+					className: "placeholder:text-muted-foreground min-w-[6rem] flex-1 bg-transparent text-sm outline-none"
+				}),
+				component.suggestions && /* @__PURE__ */ jsx("datalist", {
+					id: listId,
+					children: component.suggestions.map((suggestion) => /* @__PURE__ */ jsx("option", { value: suggestion }, suggestion))
+				}),
+				reorderable && /* @__PURE__ */ jsx("span", {
+					id: `${id}-reorder-hint`,
+					className: "sr-only",
+					children: t("form.reorder_tags_hint", {}, "Press Alt with an arrow key to move this tag.")
+				}),
+				/* @__PURE__ */ jsx("span", {
+					"aria-live": "polite",
+					"aria-atomic": "true",
+					className: "sr-only",
+					children: announcement
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { TagsInputField };
+
+//# sourceMappingURL=tags-input.js.map

package/dist/components/fields/tags-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tags-input.js","names":[],"sources":["../../../src/components/fields/tags-input.tsx"],"sourcesContent":["import { moveListItem, reorderOffset, type TagsInputSchema } from '@alfakit/core'\nimport { XIcon } from 'lucide-react'\nimport { useEffect, useRef, useState, type KeyboardEvent } from 'react'\nimport { useDirection, useT } from '../../context'\nimport { badgeColorClasses, colorClass } from '../../lib/colors'\nimport { cn } from '../../lib/utils'\nimport { useField } from '../form/form-context'\nimport { FieldWrapper } from '../schema/field-wrapper'\nimport { Badge } from '../ui/badge'\n\nexport function TagsInputField({ component }: { component: TagsInputSchema }) {\n  const t = useT()\n  const { value, setValue, blur, error, id, disabled, readOnly, aria } = useField<string[] | null>(\n    component,\n  )\n  const direction = useDirection()\n  const [draft, setDraft] = useState('')\n  const [dragIndex, setDragIndex] = useState<number | null>(null)\n  // Keyboard reordering: the tag to refocus after a move, and the live-region announcement.\n  const focusIndex = useRef<number | null>(null)\n  const [announcement, setAnnouncement] = useState('')\n  const listRef = useRef<HTMLDivElement>(null)\n  const reorderable = Boolean(component.reorderable) && !disabled && !readOnly\n  const tags = value ?? []\n  const listId = component.suggestions ? `${id}-suggestions` : undefined\n\n  const commit = (raw: string) => {\n    const tag = `${component.tagPrefix ?? ''}${raw.trim()}${component.tagSuffix ?? ''}`\n\n    if (raw.trim() === '' || tags.includes(tag)) {\n      setDraft('')\n\n      return\n    }\n\n    setValue([...tags, tag])\n    setDraft('')\n  }\n\n  useEffect(() => {\n    if (focusIndex.current === null) {\n      return\n    }\n\n    listRef.current?.querySelectorAll<HTMLElement>('[data-tag]')[focusIndex.current]?.focus()\n    focusIndex.current = null\n  }, [value])\n\n  // Alt + ArrowLeft/ArrowRight (flipped in RTL) moves the focused tag.\n  const onTagKeyDown = (event: KeyboardEvent<HTMLElement>, index: number) => {\n    const offset = reorderOffset(event, 'horizontal', direction)\n\n    if (!reorderable || offset === null) {\n      return\n    }\n\n    event.preventDefault()\n    const target = index + offset\n\n    if (target < 0 || target >= tags.length) {\n      return\n    }\n\n    setValue(moveListItem(tags, index, target))\n    focusIndex.current = target\n    setAnnouncement(\n      t(\n        'form.tag_moved',\n        { tag: tags[index] ?? '', position: target + 1, total: tags.length },\n        ':tag moved to position :position of :total',\n      ),\n    )\n  }\n\n  const onKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n    if (readOnly) {\n      return\n    }\n\n    if (component.splitKeys.includes(event.key)) {\n      event.preventDefault()\n      commit(draft)\n    } else if (event.key === 'Backspace' && draft === '' && tags.length > 0) {\n      setValue(tags.slice(0, -1))\n    }\n  }\n\n  return (\n    <FieldWrapper field={component} htmlFor={id} error={error}>\n      <div\n        ref={listRef}\n        className={cn(\n          'border-input dark:bg-input/30 has-[input:focus-visible]:border-ring has-[input:focus-visible]:ring-ring/50 flex min-h-9 w-full flex-wrap items-center gap-1.5 rounded-md border px-2 py-1.5 shadow-xs has-[input:focus-visible]:ring-[3px]',\n          error && 'border-destructive',\n          disabled && 'opacity-50',\n        )}\n      >\n        {tags.map((tag, index) => (\n          <Badge\n            key={`${tag}-${index}`}\n            variant=\"outline\"\n            data-tag=\"\"\n            tabIndex={reorderable ? 0 : undefined}\n            aria-describedby={reorderable ? `${id}-reorder-hint` : undefined}\n            onKeyDown={(event) => onTagKeyDown(event, index)}\n            draggable={reorderable}\n            onDragStart={() => setDragIndex(index)}\n            onDragOver={(event) => reorderable && event.preventDefault()}\n            onDrop={() => {\n              if (dragIndex !== null && dragIndex !== index)\n                setValue(moveListItem(tags, dragIndex, index))\n              setDragIndex(null)\n            }}\n            onDragEnd={() => setDragIndex(null)}\n            className={cn(\n              'gap-1 pe-1',\n              colorClass(badgeColorClasses, component.color, 'gray'),\n              reorderable &&\n                'focus-visible:ring-ring/50 cursor-grab outline-none focus-visible:ring-[3px]',\n              dragIndex === index && 'opacity-50',\n            )}\n          >\n            {tag}\n            {!disabled && !readOnly && (\n              <button\n                type=\"button\"\n                aria-label={t('form.remove_tag', { tag }, 'Remove :tag')}\n                className=\"hover:bg-foreground/10 rounded-sm\"\n                onClick={() => setValue(tags.filter((_, i) => i !== index))}\n              >\n                <XIcon className=\"size-3\" />\n              </button>\n            )}\n          </Badge>\n        ))}\n        <input\n          dir=\"auto\"\n          id={id}\n          list={listId}\n          value={draft}\n          onChange={(event) => setDraft(event.target.value)}\n          onKeyDown={onKeyDown}\n          onBlur={() => {\n            if (!readOnly && draft.trim() !== '') {\n              commit(draft)\n            }\n\n            blur()\n          }}\n          placeholder={\n            tags.length === 0 ? (component.placeholder ?? t('form.add_item', {}, 'Add…')) : ''\n          }\n          disabled={disabled}\n          readOnly={readOnly}\n          {...aria}\n          className=\"placeholder:text-muted-foreground min-w-[6rem] flex-1 bg-transparent text-sm outline-none\"\n        />\n        {component.suggestions && (\n          <datalist id={listId}>\n            {component.suggestions.map((suggestion) => (\n              <option key={suggestion} value={suggestion} />\n            ))}\n          </datalist>\n        )}\n        {reorderable && (\n          <span id={`${id}-reorder-hint`} className=\"sr-only\">\n            {t('form.reorder_tags_hint', {}, 'Press Alt with an arrow key to move this tag.')}\n          </span>\n        )}\n        <span aria-live=\"polite\" aria-atomic=\"true\" className=\"sr-only\">\n          {announcement}\n        </span>\n      </div>\n    </FieldWrapper>\n  )\n}\n"],"mappings":"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"}

package/dist/components/fields/text-input.d.ts

@@ -0,0 +1,7 @@
+import { TextInputSchema } from "@alfakit/core";
+//#region src/components/fields/text-input.d.ts
+export declare function TextInputField({ component }: {
+  component: TextInputSchema;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=text-input.d.ts.map

package/dist/components/fields/text-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-input.d.ts","names":[],"sources":["../../../src/components/fields/text-input.tsx"],"mappings":";;wBAgBgB,iBAAiB;EAAe,WAAW;oBAAiB,IAAA"}

package/dist/components/fields/text-input.js

@@ -0,0 +1,135 @@
+import { useT } from "../../context.js";
+import { cn } from "../../lib/utils.js";
+import { textColorClasses } from "../../lib/colors.js";
+import { Icon } from "../../lib/icons.js";
+import { Button } from "../ui/button.js";
+import { extraProps } from "../../lib/attributes.js";
+import { useField } from "../form/form-context.js";
+import { FieldWrapper } from "../schema/field-wrapper.js";
+import { Input } from "../ui/input.js";
+import { applyMask } from "@alfakit/core";
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, CopyIcon, EyeIcon, EyeOffIcon } from "lucide-react";
+//#region src/components/fields/text-input.tsx
+/** Values that are always written left to right, even in an RTL interface. */
+const LTR_INPUT_TYPES = /* @__PURE__ */ new Set([
+	"email",
+	"url",
+	"tel",
+	"password",
+	"number"
+]);
+function TextInputField({ component }) {
+	const { value, setValue, blur, error, id, disabled, aria } = useField(component);
+	const t = useT();
+	const [revealed, setRevealed] = useState(false);
+	const [copied, setCopied] = useState(false);
+	const copiedTimer = useRef(void 0);
+	useEffect(() => () => clearTimeout(copiedTimer.current), []);
+	const copy = () => {
+		const text = value === null || value === void 0 ? "" : String(value);
+		navigator.clipboard?.writeText(text).then(() => {
+			setCopied(true);
+			clearTimeout(copiedTimer.current);
+			copiedTimer.current = setTimeout(() => setCopied(false), component.copyMessageDuration ?? 1500);
+		});
+	};
+	const type = component.inputType === "password" && revealed ? "text" : component.inputType;
+	const hasAffixes = component.prefix || component.suffix || component.prefixIcon || component.suffixIcon || component.revealable || component.copyable;
+	const listId = component.datalist ? `${id}-list` : void 0;
+	const input = /* @__PURE__ */ jsx(Input, {
+		id,
+		name: component.name,
+		type,
+		dir: LTR_INPUT_TYPES.has(component.inputType) ? "ltr" : "auto",
+		value: value ?? "",
+		onChange: (event) => setValue(applyMask(event.target.value, component.mask)),
+		onBlur: blur,
+		placeholder: component.placeholder,
+		disabled,
+		readOnly: component.readOnly,
+		required: component.required,
+		autoFocus: component.autofocus,
+		minLength: component.minLength,
+		maxLength: component.maxLength,
+		min: component.min,
+		max: component.max,
+		step: component.step,
+		autoComplete: component.autocomplete,
+		inputMode: component.inputMode,
+		list: listId,
+		autoCapitalize: component.autocapitalize,
+		...aria,
+		...extraProps(component.extraInputAttributes, cn(hasAffixes && "h-full border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent"))
+	});
+	return /* @__PURE__ */ jsxs(FieldWrapper, {
+		field: component,
+		htmlFor: id,
+		error,
+		children: [
+			hasAffixes ? /* @__PURE__ */ jsxs("div", {
+				"data-slot": "input-group",
+				className: cn("border-input dark:bg-input/30 has-[input:focus-visible]:border-ring has-[input:focus-visible]:ring-ring/50 flex h-9 w-full items-stretch overflow-hidden rounded-md border shadow-xs has-[input:focus-visible]:ring-[3px]", error && "border-destructive"),
+				children: [
+					(component.prefix || component.prefixIcon) && /* @__PURE__ */ jsxs("span", {
+						className: "text-muted-foreground bg-muted/50 flex items-center gap-1 border-e px-3 text-sm",
+						children: [/* @__PURE__ */ jsx(Icon, {
+							name: component.prefixIcon,
+							className: component.prefixIconColor && textColorClasses[component.prefixIconColor]
+						}), component.prefix]
+					}),
+					input,
+					(component.suffix || component.suffixIcon) && /* @__PURE__ */ jsxs("span", {
+						className: "text-muted-foreground bg-muted/50 flex items-center gap-1 border-s px-3 text-sm",
+						children: [component.suffix, /* @__PURE__ */ jsx(Icon, {
+							name: component.suffixIcon,
+							className: component.suffixIconColor && textColorClasses[component.suffixIconColor]
+						})]
+					}),
+					component.revealable && /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "ghost",
+						size: "icon-sm",
+						className: "my-auto me-1",
+						onClick: () => setRevealed((state) => !state),
+						"aria-label": revealed ? t("form.hide_password", {}, "Hide password") : t("form.show_password", {}, "Show password"),
+						children: revealed ? /* @__PURE__ */ jsx(Icon, {
+							name: "alfakit::forms.components.text-input.actions.hide-password",
+							fallback: EyeOffIcon
+						}) : /* @__PURE__ */ jsx(Icon, {
+							name: "alfakit::forms.components.text-input.actions.show-password",
+							fallback: EyeIcon
+						})
+					}),
+					component.copyable && /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "ghost",
+						size: "icon-sm",
+						className: "my-auto me-1",
+						"data-slot": "copy-button",
+						onClick: copy,
+						"aria-label": t("copy", {}, "Copy"),
+						children: copied ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx(Icon, {
+							name: "alfakit::forms.components.text-input.actions.copy",
+							fallback: CopyIcon
+						})
+					})
+				]
+			}) : input,
+			component.copyable && copied && /* @__PURE__ */ jsx("span", {
+				role: "status",
+				className: cn("text-xs", !component.copyMessage && "sr-only"),
+				children: component.copyMessage ?? t("copied", {}, "Copied")
+			}),
+			component.datalist && /* @__PURE__ */ jsx("datalist", {
+				id: listId,
+				children: component.datalist.map((option) => /* @__PURE__ */ jsx("option", { value: option }, option))
+			})
+		]
+	});
+}
+//#endregion
+export { TextInputField };
+
+//# sourceMappingURL=text-input.js.map

package/dist/components/fields/text-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-input.js","names":[],"sources":["../../../src/components/fields/text-input.tsx"],"sourcesContent":["import { applyMask, type TextInputSchema } from '@alfakit/core'\nimport { CheckIcon, CopyIcon, EyeIcon, EyeOffIcon } from 'lucide-react'\nimport { useEffect, useRef, useState } from 'react'\nimport { useT } from '../../context'\nimport { extraProps } from '../../lib/attributes'\nimport { textColorClasses } from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { useField } from '../form/form-context'\nimport { FieldWrapper } from '../schema/field-wrapper'\nimport { Button } from '../ui/button'\nimport { Input } from '../ui/input'\n\n/** Values that are always written left to right, even in an RTL interface. */\nconst LTR_INPUT_TYPES = new Set(['email', 'url', 'tel', 'password', 'number'])\n\nexport function TextInputField({ component }: { component: TextInputSchema }) {\n  const { value, setValue, blur, error, id, disabled, aria } = useField<string | number | null>(\n    component,\n  )\n  const t = useT()\n  const [revealed, setRevealed] = useState(false)\n  const [copied, setCopied] = useState(false)\n  const copiedTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)\n\n  useEffect(() => () => clearTimeout(copiedTimer.current), [])\n\n  const copy = () => {\n    const text = value === null || value === undefined ? '' : String(value)\n\n    void navigator.clipboard?.writeText(text).then(() => {\n      setCopied(true)\n      clearTimeout(copiedTimer.current)\n      copiedTimer.current = setTimeout(\n        () => setCopied(false),\n        component.copyMessageDuration ?? 1500,\n      )\n    })\n  }\n\n  const type = component.inputType === 'password' && revealed ? 'text' : component.inputType\n  const hasAffixes =\n    component.prefix ||\n    component.suffix ||\n    component.prefixIcon ||\n    component.suffixIcon ||\n    component.revealable ||\n    component.copyable\n  const listId = component.datalist ? `${id}-list` : undefined\n\n  const input = (\n    <Input\n      id={id}\n      name={component.name}\n      type={type}\n      dir={LTR_INPUT_TYPES.has(component.inputType) ? 'ltr' : 'auto'}\n      value={value ?? ''}\n      onChange={(event) => setValue(applyMask(event.target.value, component.mask))}\n      onBlur={blur}\n      placeholder={component.placeholder}\n      disabled={disabled}\n      readOnly={component.readOnly}\n      required={component.required}\n      autoFocus={component.autofocus}\n      minLength={component.minLength}\n      maxLength={component.maxLength}\n      min={component.min}\n      max={component.max}\n      step={component.step}\n      autoComplete={component.autocomplete}\n      inputMode={component.inputMode as React.HTMLAttributes<HTMLInputElement>['inputMode']}\n      list={listId}\n      autoCapitalize={component.autocapitalize}\n      {...aria}\n\n      {...extraProps(\n        component.extraInputAttributes,\n        cn(\n          hasAffixes &&\n            'h-full border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent',\n        ),\n      )}\n    />\n  )\n\n  return (\n    <FieldWrapper field={component} htmlFor={id} error={error}>\n      {hasAffixes ? (\n        <div\n          data-slot=\"input-group\"\n          className={cn(\n            'border-input dark:bg-input/30 has-[input:focus-visible]:border-ring has-[input:focus-visible]:ring-ring/50 flex h-9 w-full items-stretch overflow-hidden rounded-md border shadow-xs has-[input:focus-visible]:ring-[3px]',\n            error && 'border-destructive',\n          )}\n        >\n          {(component.prefix || component.prefixIcon) && (\n            <span className=\"text-muted-foreground bg-muted/50 flex items-center gap-1 border-e px-3 text-sm\">\n              <Icon\n                name={component.prefixIcon}\n                className={component.prefixIconColor && textColorClasses[component.prefixIconColor]}\n              />\n              {component.prefix}\n            </span>\n          )}\n          {input}\n          {(component.suffix || component.suffixIcon) && (\n            <span className=\"text-muted-foreground bg-muted/50 flex items-center gap-1 border-s px-3 text-sm\">\n              {component.suffix}\n              <Icon\n                name={component.suffixIcon}\n                className={component.suffixIconColor && textColorClasses[component.suffixIconColor]}\n              />\n            </span>\n          )}\n          {component.revealable && (\n            <Button\n              type=\"button\"\n              variant=\"ghost\"\n              size=\"icon-sm\"\n              className=\"my-auto me-1\"\n              onClick={() => setRevealed((state) => !state)}\n              aria-label={\n                revealed\n                  ? t('form.hide_password', {}, 'Hide password')\n                  : t('form.show_password', {}, 'Show password')\n              }\n            >\n              {revealed ? (\n                <Icon\n                  name=\"alfakit::forms.components.text-input.actions.hide-password\"\n                  fallback={EyeOffIcon}\n                />\n              ) : (\n                <Icon\n                  name=\"alfakit::forms.components.text-input.actions.show-password\"\n                  fallback={EyeIcon}\n                />\n              )}\n            </Button>\n          )}\n          {component.copyable && (\n            <Button\n              type=\"button\"\n              variant=\"ghost\"\n              size=\"icon-sm\"\n              className=\"my-auto me-1\"\n              data-slot=\"copy-button\"\n              onClick={copy}\n              aria-label={t('copy', {}, 'Copy')}\n            >\n              {copied ? (\n                <CheckIcon />\n              ) : (\n                <Icon\n                  name=\"alfakit::forms.components.text-input.actions.copy\"\n                  fallback={CopyIcon}\n                />\n              )}\n            </Button>\n          )}\n        </div>\n      ) : (\n        input\n      )}\n      {component.copyable && copied && (\n        <span role=\"status\" className={cn('text-xs', !component.copyMessage && 'sr-only')}>\n          {component.copyMessage ?? t('copied', {}, 'Copied')}\n        </span>\n      )}\n      {component.datalist && (\n        <datalist id={listId}>\n          {component.datalist.map((option) => (\n            <option key={option} value={option} />\n          ))}\n        </datalist>\n      )}\n    </FieldWrapper>\n  )\n}\n"],"mappings":"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"}

package/dist/components/fields/textarea.d.ts

@@ -0,0 +1,7 @@
+import { TextareaSchema } from "@alfakit/core";
+//#region src/components/fields/textarea.d.ts
+export declare function TextareaField({ component }: {
+  component: TextareaSchema;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=textarea.d.ts.map

package/dist/components/fields/textarea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.d.ts","names":[],"sources":["../../../src/components/fields/textarea.tsx"],"mappings":";;wBAMgB,gBAAgB;EAAe,WAAW;oBAAgB,IAAA"}

package/dist/components/fields/textarea.js

@@ -0,0 +1,37 @@
+import { extraProps } from "../../lib/attributes.js";
+import { useField } from "../form/form-context.js";
+import { FieldWrapper } from "../schema/field-wrapper.js";
+import { Textarea } from "../ui/textarea.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/fields/textarea.tsx
+function TextareaField({ component }) {
+	const { value, setValue, blur, error, id, disabled, aria } = useField(component);
+	return /* @__PURE__ */ jsx(FieldWrapper, {
+		field: component,
+		htmlFor: id,
+		error,
+		children: /* @__PURE__ */ jsx(Textarea, {
+			dir: "auto",
+			id,
+			name: component.name,
+			value: value ?? "",
+			onChange: (event) => setValue(event.target.value),
+			onBlur: blur,
+			placeholder: component.placeholder,
+			disabled,
+			readOnly: component.readOnly,
+			required: component.required,
+			autoFocus: component.autofocus,
+			rows: component.rows,
+			cols: component.cols,
+			minLength: component.minLength,
+			maxLength: component.maxLength,
+			...aria,
+			...extraProps(component.extraInputAttributes, component.autosize ? "field-sizing-content" : void 0)
+		})
+	});
+}
+//#endregion
+export { TextareaField };
+
+//# sourceMappingURL=textarea.js.map

package/dist/components/fields/textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.js","names":[],"sources":["../../../src/components/fields/textarea.tsx"],"sourcesContent":["import type { TextareaSchema } from '@alfakit/core'\nimport { extraProps } from '../../lib/attributes'\nimport { useField } from '../form/form-context'\nimport { FieldWrapper } from '../schema/field-wrapper'\nimport { Textarea } from '../ui/textarea'\n\nexport function TextareaField({ component }: { component: TextareaSchema }) {\n  const { value, setValue, blur, error, id, disabled, aria } = useField<string | null>(component)\n\n  return (\n    <FieldWrapper field={component} htmlFor={id} error={error}>\n      <Textarea\n        dir=\"auto\"\n        id={id}\n        name={component.name}\n        value={value ?? ''}\n        onChange={(event) => setValue(event.target.value)}\n        onBlur={blur}\n        placeholder={component.placeholder}\n        disabled={disabled}\n        readOnly={component.readOnly}\n        required={component.required}\n        autoFocus={component.autofocus}\n        rows={component.rows}\n        cols={component.cols}\n        minLength={component.minLength}\n        maxLength={component.maxLength}\n        {...aria}\n\n        {...extraProps(\n          component.extraInputAttributes,\n          component.autosize ? 'field-sizing-content' : undefined,\n        )}\n      />\n    </FieldWrapper>\n  )\n}\n"],"mappings":";;;;;;AAMA,SAAgB,cAAc,EAAE,aAA4C;CAC1E,MAAM,EAAE,OAAO,UAAU,MAAM,OAAO,IAAI,UAAU,SAAS,SAAwB,SAAS;CAE9F,OACE,oBAAC,cAAD;EAAc,OAAO;EAAW,SAAS;EAAW;EAClD,UAAA,oBAAC,UAAD;GACE,KAAI;GACA;GACJ,MAAM,UAAU;GAChB,OAAO,SAAS;GAChB,WAAW,UAAU,SAAS,MAAM,OAAO,KAAK;GAChD,QAAQ;GACR,aAAa,UAAU;GACb;GACV,UAAU,UAAU;GACpB,UAAU,UAAU;GACpB,WAAW,UAAU;GACrB,MAAM,UAAU;GAChB,MAAM,UAAU;GAChB,WAAW,UAAU;GACrB,WAAW,UAAU;GACrB,GAAI;GAEJ,GAAI,WACF,UAAU,sBACV,UAAU,WAAW,yBAAyB,KAAA,CAChD;EACD,CAAA;CACW,CAAA;AAElB"}

package/dist/components/fields/toggle-buttons.d.ts

@@ -0,0 +1,7 @@
+import { ToggleButtonsSchema } from "@alfakit/core";
+//#region src/components/fields/toggle-buttons.d.ts
+export declare function ToggleButtonsField({ component }: {
+  component: ToggleButtonsSchema;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=toggle-buttons.d.ts.map

package/dist/components/fields/toggle-buttons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-buttons.d.ts","names":[],"sources":["../../../src/components/fields/toggle-buttons.tsx"],"mappings":";;wBAqCgB,qBAAqB;EAAe,WAAW;oBAAqB,IAAA"}