@signalcore/ui 0.1.0 → 1.0.0-beta.1

package/dist/kit/DateField.js

@@ -0,0 +1,133 @@
+import { useKit, useParts } from "./context.js";
+import { ariaOf } from "./Field.js";
+import { Popover, usePopover } from "./Popover.js";
+import { dayAllowed, dayOf, daySpan, formatDay, isoDay, openingDay } from "./dates.js";
+import { useState } from "react";
+import { CalendarBlankIcon, CaretDownIcon, CaretLeftIcon, CaretRightIcon } from "@phosphor-icons/react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { DayPicker } from "react-day-picker";
+//#region src/kit/DateField.tsx
+/** The calendar's parts, under the kit's names: the host's look reaches them by token. */
+const CALENDAR = {
+	months: "sc-calendar__months",
+	month: "sc-calendar__month",
+	month_caption: "sc-calendar__caption",
+	caption_label: "sc-calendar__title",
+	nav: "sc-calendar__nav",
+	button_previous: "sc-calendar__step",
+	button_next: "sc-calendar__step",
+	chevron: "sc-calendar__chevron",
+	month_grid: "sc-calendar__grid",
+	weekdays: "sc-calendar__weekdays",
+	weekday: "sc-calendar__weekday",
+	weeks: "sc-calendar__weeks",
+	week: "sc-calendar__week",
+	day: "sc-calendar__day",
+	day_button: "sc-calendar__button",
+	selected: "sc-calendar__day--selected",
+	today: "sc-calendar__day--today",
+	disabled: "sc-calendar__day--disabled",
+	outside: "sc-calendar__day--outside",
+	hidden: "sc-calendar__day--hidden",
+	focused: "sc-calendar__day--focused"
+};
+/**
+* A day: a button that reads the day picked in the host's language and opens a calendar under
+* it. Only the days offered can be picked (`dates`, between `earliest` and `latest`), and when
+* they are bounded, those stand out. Picking one closes it and gives the focus back.
+*/
+function DateField({ value, onChange, placeholder, dates, earliest, latest, ...control }) {
+	const { code, messages } = useKit();
+	const part = useParts();
+	const [open, setOpen] = useState(false);
+	const popover = usePopover(open, setOpen, {
+		width: "own",
+		role: "dialog"
+	});
+	const picked = value !== null && dayOf(value) ? value : null;
+	const { id, labelledBy } = control;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("button", {
+		ref: popover.refs.setReference,
+		id,
+		type: "button",
+		disabled: control.disabled,
+		"data-invalid": control.invalid || void 0,
+		"data-empty": picked === null || void 0,
+		...popover.getReferenceProps({ onClick: () => setOpen(!open) }),
+		...ariaOf(control),
+		"aria-labelledby": labelledBy === void 0 || id === void 0 ? labelledBy : `${labelledBy} ${id}`,
+		"aria-required": void 0,
+		part: "control",
+		className: part("sc-control", "sc-control--trigger"),
+		children: [
+			/* @__PURE__ */ jsx(CalendarBlankIcon, { "aria-hidden": true }),
+			/* @__PURE__ */ jsx("span", { children: picked ? formatDay(picked, code) : placeholder ?? messages.chooseDate }),
+			/* @__PURE__ */ jsx(CaretDownIcon, { "aria-hidden": true })
+		]
+	}), open && /* @__PURE__ */ jsx(Popover, {
+		popover,
+		focus: true,
+		label: messages.chooseDate,
+		children: /* @__PURE__ */ jsx(Calendar, {
+			bounds: {
+				dates,
+				earliest,
+				latest
+			},
+			picked,
+			onPick: (day) => {
+				onChange(day);
+				setOpen(false);
+			}
+		})
+	})] });
+}
+/**
+* The month grid, react-day-picker in the kit's look: it opens on the day picked, else the
+* first offered; it goes no further than the bounds; the arrows walk the days, Page Up and Down
+* the months.
+*/
+function Calendar({ bounds, picked, onPick }) {
+	const { locale } = useKit();
+	const part = useParts();
+	const today = /* @__PURE__ */ new Date();
+	const { first, last } = daySpan(bounds);
+	const start = first !== void 0 ? dayOf(first) : null;
+	const end = last !== void 0 ? dayOf(last) : null;
+	const offered = (date) => dayAllowed(bounds, isoDay(date));
+	return /* @__PURE__ */ jsx(DayPicker, {
+		mode: "single",
+		selected: picked && dayOf(picked) || void 0,
+		onSelect: (date) => {
+			if (date) onPick(isoDay(date));
+		},
+		defaultMonth: dayOf(openingDay(bounds, picked, today)) ?? today,
+		...start && { startMonth: start },
+		...end && { endMonth: end },
+		disabled: (date) => !offered(date),
+		modifiers: start !== null || end !== null ? { offered } : {},
+		modifiersClassNames: { offered: "sc-calendar__day--offered" },
+		...locale && { locale },
+		navLayout: "after",
+		showOutsideDays: true,
+		autoFocus: true,
+		classNames: {
+			...CALENDAR,
+			root: part("sc-calendar")
+		},
+		components: { Chevron }
+	});
+}
+function Chevron({ orientation }) {
+	return orientation === "left" ? /* @__PURE__ */ jsx(CaretLeftIcon, {
+		"aria-hidden": true,
+		weight: "bold"
+	}) : /* @__PURE__ */ jsx(CaretRightIcon, {
+		"aria-hidden": true,
+		weight: "bold"
+	});
+}
+//#endregion
+export { DateField };
+
+//# sourceMappingURL=DateField.js.map

package/dist/kit/DateField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateField.js","names":[],"sources":["../../src/kit/DateField.tsx"],"sourcesContent":["import {\n  CalendarBlankIcon,\n  CaretDownIcon,\n  CaretLeftIcon,\n  CaretRightIcon,\n} from \"@phosphor-icons/react\";\nimport { useState } from \"react\";\nimport { DayPicker, type ChevronProps, type ClassNames } from \"react-day-picker\";\n\nimport { useKit, useParts } from \"./context\";\nimport { dayAllowed, dayOf, daySpan, formatDay, isoDay, openingDay, type DayBounds } from \"./dates\";\nimport { ariaOf, type ControlBase } from \"./Field\";\nimport { Popover, usePopover } from \"./Popover\";\n\n/** The calendar's parts, under the kit's names: the host's look reaches them by token. */\nconst CALENDAR: Partial<ClassNames> = {\n  months: \"sc-calendar__months\",\n  month: \"sc-calendar__month\",\n  month_caption: \"sc-calendar__caption\",\n  caption_label: \"sc-calendar__title\",\n  nav: \"sc-calendar__nav\",\n  button_previous: \"sc-calendar__step\",\n  button_next: \"sc-calendar__step\",\n  chevron: \"sc-calendar__chevron\",\n  month_grid: \"sc-calendar__grid\",\n  weekdays: \"sc-calendar__weekdays\",\n  weekday: \"sc-calendar__weekday\",\n  weeks: \"sc-calendar__weeks\",\n  week: \"sc-calendar__week\",\n  day: \"sc-calendar__day\",\n  day_button: \"sc-calendar__button\",\n  selected: \"sc-calendar__day--selected\",\n  today: \"sc-calendar__day--today\",\n  disabled: \"sc-calendar__day--disabled\",\n  outside: \"sc-calendar__day--outside\",\n  hidden: \"sc-calendar__day--hidden\",\n  focused: \"sc-calendar__day--focused\",\n};\n\nexport interface DateFieldProps extends ControlBase, DayBounds {\n  /** The day picked, \"YYYY-MM-DD\", or none. */\n  value: string | null;\n  onChange: (day: string) => void;\n  placeholder?: string | undefined;\n}\n\n/**\n * A day: a button that reads the day picked in the host's language and opens a calendar under\n * it. Only the days offered can be picked (`dates`, between `earliest` and `latest`), and when\n * they are bounded, those stand out. Picking one closes it and gives the focus back.\n */\nexport function DateField({\n  value,\n  onChange,\n  placeholder,\n  dates,\n  earliest,\n  latest,\n  ...control\n}: DateFieldProps) {\n  const { code, messages } = useKit();\n  const part = useParts();\n  const [open, setOpen] = useState(false);\n  const popover = usePopover(open, setOpen, { width: \"own\", role: \"dialog\" });\n  const picked = value !== null && dayOf(value) ? value : null;\n  const { id, labelledBy } = control;\n  return (\n    <>\n      <button\n        ref={popover.refs.setReference}\n        id={id}\n        type=\"button\"\n        disabled={control.disabled}\n        data-invalid={control.invalid || undefined}\n        data-empty={picked === null || undefined}\n        {...popover.getReferenceProps({ onClick: () => setOpen(!open) })}\n        {...ariaOf(control)}\n        // Its name is its label and the day it reads.\n        aria-labelledby={\n          labelledBy === undefined || id === undefined ? labelledBy : `${labelledBy} ${id}`\n        }\n        aria-required={undefined}\n        part=\"control\"\n        className={part(\"sc-control\", \"sc-control--trigger\")}\n      >\n        <CalendarBlankIcon aria-hidden />\n        <span>{picked ? formatDay(picked, code) : (placeholder ?? messages.chooseDate)}</span>\n        <CaretDownIcon aria-hidden />\n      </button>\n      {open && (\n        <Popover popover={popover} focus label={messages.chooseDate}>\n          <Calendar\n            bounds={{ dates, earliest, latest }}\n            picked={picked}\n            onPick={(day) => {\n              onChange(day);\n              setOpen(false);\n            }}\n          />\n        </Popover>\n      )}\n    </>\n  );\n}\n\n/**\n * The month grid, react-day-picker in the kit's look: it opens on the day picked, else the\n * first offered; it goes no further than the bounds; the arrows walk the days, Page Up and Down\n * the months.\n */\nfunction Calendar({\n  bounds,\n  picked,\n  onPick,\n}: {\n  bounds: DayBounds;\n  picked: string | null;\n  onPick: (day: string) => void;\n}) {\n  const { locale } = useKit();\n  const part = useParts();\n  const today = new Date();\n  const { first, last } = daySpan(bounds);\n  const start = first !== undefined ? dayOf(first) : null;\n  const end = last !== undefined ? dayOf(last) : null;\n  const offered = (date: Date) => dayAllowed(bounds, isoDay(date));\n  return (\n    <DayPicker\n      mode=\"single\"\n      selected={(picked && dayOf(picked)) || undefined}\n      onSelect={(date) => {\n        if (date) onPick(isoDay(date));\n      }}\n      defaultMonth={dayOf(openingDay(bounds, picked, today)) ?? today}\n      {...(start && { startMonth: start })}\n      {...(end && { endMonth: end })}\n      disabled={(date) => !offered(date)}\n      modifiers={start !== null || end !== null ? { offered } : {}}\n      modifiersClassNames={{ offered: \"sc-calendar__day--offered\" }}\n      {...(locale && { locale })}\n      navLayout=\"after\"\n      showOutsideDays\n      autoFocus\n      classNames={{ ...CALENDAR, root: part(\"sc-calendar\") }}\n      components={{ Chevron }}\n    />\n  );\n}\n\nfunction Chevron({ orientation }: ChevronProps) {\n  return orientation === \"left\" ? (\n    <CaretLeftIcon aria-hidden weight=\"bold\" />\n  ) : (\n    <CaretRightIcon aria-hidden weight=\"bold\" />\n  );\n}\n"],"mappings":"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"}

package/dist/kit/Field.d.ts

@@ -0,0 +1,40 @@
+import { ReactNode } from "react";
+import { Icon } from "@phosphor-icons/react";
+//#region src/kit/Field.d.ts
+/** What names a control and ties it to its field: the ids its label, help and error carry. */
+export interface ControlBase {
+  id?: string | undefined;
+  /** Its label's id; without one, `label` names it. */
+  labelledBy?: string | undefined;
+  label?: string | undefined;
+  /** Its help's and its error's ids. */
+  describedBy?: string | undefined;
+  invalid?: boolean | undefined;
+  required?: boolean | undefined;
+  disabled?: boolean | undefined;
+}
+/** What a field hands its control: its id, and the ids that name it and describe it. */
+export interface FieldIds {
+  id: string;
+  labelledBy: string | undefined;
+  describedBy: string | undefined;
+  invalid: boolean;
+}
+/**
+ * One thing to fill: its label (a quiet word beside it when it may stay empty), the control,
+ * then a line of help and what is wrong, both read with the control. `group` is for a control
+ * made of buttons (cards, chips, stars), which no <label> can point at: the label names it.
+ */
+export declare function Field({ label, optional, help, error, group, name, className, children }: {
+  label?: ReactNode;
+  optional?: boolean | undefined;
+  help?: ReactNode;
+  error?: string | undefined;
+  group?: boolean | undefined;
+  /** Marks the field (`data-field`), so a form can find it to focus. */
+  name?: string | undefined;
+  className?: string | undefined;
+  children: (ids: FieldIds) => ReactNode;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=Field.d.ts.map

package/dist/kit/Field.js

@@ -0,0 +1,98 @@
+import { joined, useKit, useParts } from "./context.js";
+import { useId } from "react";
+import { WarningCircleIcon } from "@phosphor-icons/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/kit/Field.tsx
+/** The ARIA a control carries, from what names it and what is wrong with it. */
+function ariaOf(control) {
+	return {
+		"aria-labelledby": control.labelledBy,
+		"aria-label": control.labelledBy === void 0 ? control.label : void 0,
+		"aria-describedby": control.describedBy,
+		"aria-invalid": control.invalid || void 0,
+		"aria-required": control.required || void 0
+	};
+}
+/**
+* A label without the word that says it may stay empty, written into it ("Notas (opcional)"):
+* the quiet word beside it says so once.
+*/
+function withoutOptional(label, word) {
+	if (typeof label !== "string") return label;
+	const said = label.replace(/\s*\(([^)]*)\)\s*$/u, (whole, inside) => inside.trim().toLowerCase() === word.toLowerCase() ? "" : whole);
+	return said === "" ? label : said;
+}
+/**
+* One thing to fill: its label (a quiet word beside it when it may stay empty), the control,
+* then a line of help and what is wrong, both read with the control. `group` is for a control
+* made of buttons (cards, chips, stars), which no <label> can point at: the label names it.
+*/
+function Field({ label, optional, help, error, group, name, className, children }) {
+	const { messages } = useKit();
+	const part = useParts();
+	const base = useId();
+	const ids = {
+		control: `${base}c`,
+		label: `${base}l`,
+		help: `${base}h`,
+		error: `${base}e`
+	};
+	const described = [help !== void 0 && ids.help, error !== void 0 && ids.error];
+	const Label = group ? "span" : "label";
+	return /* @__PURE__ */ jsxs("div", {
+		"data-field": name,
+		part: "field",
+		className: joined(part("sc-field"), className),
+		children: [
+			label !== void 0 && /* @__PURE__ */ jsxs(Label, {
+				id: ids.label,
+				...!group && { htmlFor: ids.control },
+				className: part("sc-field__label"),
+				children: [optional ? withoutOptional(label, messages.optional) : label, optional && /* @__PURE__ */ jsx("small", {
+					className: part("sc-field__optional"),
+					children: messages.optional
+				})]
+			}),
+			children({
+				id: ids.control,
+				labelledBy: label !== void 0 ? ids.label : void 0,
+				describedBy: described.filter(Boolean).join(" ") || void 0,
+				invalid: error !== void 0
+			}),
+			help !== void 0 && /* @__PURE__ */ jsx("p", {
+				id: ids.help,
+				className: part("sc-field__help"),
+				children: help
+			}),
+			error !== void 0 && /* @__PURE__ */ jsxs("p", {
+				id: ids.error,
+				className: part("sc-field__error"),
+				children: [/* @__PURE__ */ jsx(WarningCircleIcon, {
+					"aria-hidden": true,
+					weight: "fill"
+				}), error]
+			})
+		]
+	});
+}
+/**
+* The box a control sits in: a hairline at the inner corners, an icon at its start, more at its
+* end; the accent and its ring while anything in it has focus, the danger tone while it is wrong.
+*/
+function Box({ icon: Leading, invalid, end, children }) {
+	const part = useParts();
+	return /* @__PURE__ */ jsxs("div", {
+		part: "control",
+		className: part("sc-control"),
+		"data-invalid": invalid || void 0,
+		children: [
+			Leading && /* @__PURE__ */ jsx(Leading, { "aria-hidden": true }),
+			children,
+			end
+		]
+	});
+}
+//#endregion
+export { Box, Field, ariaOf, withoutOptional };
+
+//# sourceMappingURL=Field.js.map

package/dist/kit/Field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Field.js","names":[],"sources":["../../src/kit/Field.tsx"],"sourcesContent":["import { WarningCircleIcon, type Icon } from \"@phosphor-icons/react\";\nimport { useId, type ReactNode } from \"react\";\n\nimport { joined, useKit, useParts } from \"./context\";\n\n/** What names a control and ties it to its field: the ids its label, help and error carry. */\nexport interface ControlBase {\n  id?: string | undefined;\n  /** Its label's id; without one, `label` names it. */\n  labelledBy?: string | undefined;\n  label?: string | undefined;\n  /** Its help's and its error's ids. */\n  describedBy?: string | undefined;\n  invalid?: boolean | undefined;\n  required?: boolean | undefined;\n  disabled?: boolean | undefined;\n}\n\n/** The ARIA a control carries, from what names it and what is wrong with it. */\nexport function ariaOf(control: ControlBase) {\n  return {\n    \"aria-labelledby\": control.labelledBy,\n    \"aria-label\": control.labelledBy === undefined ? control.label : undefined,\n    \"aria-describedby\": control.describedBy,\n    \"aria-invalid\": control.invalid || undefined,\n    \"aria-required\": control.required || undefined,\n  };\n}\n\n/** What a field hands its control: its id, and the ids that name it and describe it. */\nexport interface FieldIds {\n  id: string;\n  labelledBy: string | undefined;\n  describedBy: string | undefined;\n  invalid: boolean;\n}\n\n/**\n * A label without the word that says it may stay empty, written into it (\"Notas (opcional)\"):\n * the quiet word beside it says so once.\n */\nexport function withoutOptional(label: ReactNode, word: string): ReactNode {\n  if (typeof label !== \"string\") return label;\n  const said = label.replace(/\\s*\\(([^)]*)\\)\\s*$/u, (whole, inside: string) =>\n    inside.trim().toLowerCase() === word.toLowerCase() ? \"\" : whole,\n  );\n  return said === \"\" ? label : said;\n}\n\n/**\n * One thing to fill: its label (a quiet word beside it when it may stay empty), the control,\n * then a line of help and what is wrong, both read with the control. `group` is for a control\n * made of buttons (cards, chips, stars), which no <label> can point at: the label names it.\n */\nexport function Field({\n  label,\n  optional,\n  help,\n  error,\n  group,\n  name,\n  className,\n  children,\n}: {\n  label?: ReactNode;\n  optional?: boolean | undefined;\n  help?: ReactNode;\n  error?: string | undefined;\n  group?: boolean | undefined;\n  /** Marks the field (`data-field`), so a form can find it to focus. */\n  name?: string | undefined;\n  className?: string | undefined;\n  children: (ids: FieldIds) => ReactNode;\n}) {\n  const { messages } = useKit();\n  const part = useParts();\n  const base = useId();\n  const ids = { control: `${base}c`, label: `${base}l`, help: `${base}h`, error: `${base}e` };\n  const described = [help !== undefined && ids.help, error !== undefined && ids.error];\n  const Label = group ? \"span\" : \"label\";\n  return (\n    <div data-field={name} part=\"field\" className={joined(part(\"sc-field\"), className)}>\n      {label !== undefined && (\n        <Label\n          id={ids.label}\n          {...(!group && { htmlFor: ids.control })}\n          className={part(\"sc-field__label\")}\n        >\n          {optional ? withoutOptional(label, messages.optional) : label}\n          {optional && <small className={part(\"sc-field__optional\")}>{messages.optional}</small>}\n        </Label>\n      )}\n      {children({\n        id: ids.control,\n        labelledBy: label !== undefined ? ids.label : undefined,\n        describedBy: described.filter(Boolean).join(\" \") || undefined,\n        invalid: error !== undefined,\n      })}\n      {help !== undefined && (\n        <p id={ids.help} className={part(\"sc-field__help\")}>\n          {help}\n        </p>\n      )}\n      {error !== undefined && (\n        <p id={ids.error} className={part(\"sc-field__error\")}>\n          <WarningCircleIcon aria-hidden weight=\"fill\" />\n          {error}\n        </p>\n      )}\n    </div>\n  );\n}\n\n/**\n * The box a control sits in: a hairline at the inner corners, an icon at its start, more at its\n * end; the accent and its ring while anything in it has focus, the danger tone while it is wrong.\n */\nexport function Box({\n  icon: Leading,\n  invalid,\n  end,\n  children,\n}: {\n  icon?: Icon | undefined;\n  invalid?: boolean | undefined;\n  end?: ReactNode;\n  children: ReactNode;\n}) {\n  const part = useParts();\n  return (\n    <div part=\"control\" className={part(\"sc-control\")} data-invalid={invalid || undefined}>\n      {Leading && <Leading aria-hidden />}\n      {children}\n      {end}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAmBA,SAAgB,OAAO,SAAsB;CAC3C,OAAO;EACL,mBAAmB,QAAQ;EAC3B,cAAc,QAAQ,eAAe,KAAA,IAAY,QAAQ,QAAQ,KAAA;EACjE,oBAAoB,QAAQ;EAC5B,gBAAgB,QAAQ,WAAW,KAAA;EACnC,iBAAiB,QAAQ,YAAY,KAAA;CACvC;AACF;;;;;AAcA,SAAgB,gBAAgB,OAAkB,MAAyB;CACzE,IAAI,OAAO,UAAU,UAAU,OAAO;CACtC,MAAM,OAAO,MAAM,QAAQ,wBAAwB,OAAO,WACxD,OAAO,KAAK,CAAC,CAAC,YAAY,MAAM,KAAK,YAAY,IAAI,KAAK,KAC5D;CACA,OAAO,SAAS,KAAK,QAAQ;AAC/B;;;;;;AAOA,SAAgB,MAAM,EACpB,OACA,UACA,MACA,OACA,OACA,MACA,WACA,YAWC;CACD,MAAM,EAAE,aAAa,OAAO;CAC5B,MAAM,OAAO,SAAS;CACtB,MAAM,OAAO,MAAM;CACnB,MAAM,MAAM;EAAE,SAAS,GAAG,KAAK;EAAI,OAAO,GAAG,KAAK;EAAI,MAAM,GAAG,KAAK;EAAI,OAAO,GAAG,KAAK;CAAG;CAC1F,MAAM,YAAY,CAAC,SAAS,KAAA,KAAa,IAAI,MAAM,UAAU,KAAA,KAAa,IAAI,KAAK;CACnF,MAAM,QAAQ,QAAQ,SAAS;CAC/B,OACE,qBAAC,OAAD;EAAK,cAAY;EAAM,MAAK;EAAQ,WAAW,OAAO,KAAK,UAAU,GAAG,SAAS;EAAjF,UAAA;GACG,UAAU,KAAA,KACT,qBAAC,OAAD;IACE,IAAI,IAAI;IACR,GAAK,CAAC,SAAS,EAAE,SAAS,IAAI,QAAQ;IACtC,WAAW,KAAK,iBAAiB;IAHnC,UAAA,CAKG,WAAW,gBAAgB,OAAO,SAAS,QAAQ,IAAI,OACvD,YAAY,oBAAC,SAAD;KAAO,WAAW,KAAK,oBAAoB;KAAI,UAAA,SAAS;IAAgB,CAAA,CAChF;;GAER,SAAS;IACR,IAAI,IAAI;IACR,YAAY,UAAU,KAAA,IAAY,IAAI,QAAQ,KAAA;IAC9C,aAAa,UAAU,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,KAAK,KAAA;IACpD,SAAS,UAAU,KAAA;GACrB,CAAC;GACA,SAAS,KAAA,KACR,oBAAC,KAAD;IAAG,IAAI,IAAI;IAAM,WAAW,KAAK,gBAAgB;IAC9C,UAAA;GACA,CAAA;GAEJ,UAAU,KAAA,KACT,qBAAC,KAAD;IAAG,IAAI,IAAI;IAAO,WAAW,KAAK,iBAAiB;IAAnD,UAAA,CACE,oBAAC,mBAAD;KAAmB,eAAA;KAAY,QAAO;IAAQ,CAAA,GAC7C,KACA;;EAEF;;AAET;;;;;AAMA,SAAgB,IAAI,EAClB,MAAM,SACN,SACA,KACA,YAMC;CACD,MAAM,OAAO,SAAS;CACtB,OACE,qBAAC,OAAD;EAAK,MAAK;EAAU,WAAW,KAAK,YAAY;EAAG,gBAAc,WAAW,KAAA;EAA5E,UAAA;GACG,WAAW,oBAAC,SAAD,EAAS,eAAA,KAAa,CAAA;GACjC;GACA;EACE;;AAET"}

package/dist/kit/FileField.d.ts

@@ -0,0 +1,113 @@
+import { Attachment } from "../types.js";
+import { FileHost } from "./uploads.js";
+import { ControlBase } from "./Field.js";
+import "react";
+//#region src/kit/FileField.d.ts
+export interface FileChipProps {
+  name: string;
+  /** Its weight in bytes; none while it is not known. */
+  size?: number | undefined;
+  /** Its type, for its glyph when its name has no extension. */
+  type?: string | undefined;
+  /** On its way: how much of it has gone, from 0 to 1. */
+  progress?: number | undefined;
+  /** What went wrong with it, in place of its size. */
+  problem?: string | null | undefined;
+  /** Opens it: the chip is a button. */
+  onOpen?: (() => void) | undefined;
+  onRetry?: (() => void) | undefined;
+  onRemove?: (() => void) | undefined;
+}
+/**
+ * A file as a chip: the glyph of its family, its name, and under it its size, how much has gone while it uploads (a line filling at its foot), or what went wrong in the danger
+ * tone; at its end, trying it again and taking it away. With `onOpen` it opens on a click.
+ */
+export declare function FileChip({ name, size, type, progress, problem, onOpen, onRetry, onRemove }: FileChipProps): import("react").JSX.Element;
+/** Files already sent, as chips in a row that wraps; with `onOpen`, each opens on a click. */
+export declare function FileChips({ files, onOpen }: {
+  files: readonly Attachment[];
+  onOpen?: ((file: Attachment) => void) | undefined;
+}): import("react").JSX.Element;
+/** A file picked here, on its way or in: what its chip draws. */
+export interface Upload {
+  /** Tells it from the others here. */
+  key: number;
+  name: string;
+  size: number | undefined;
+  type: string;
+  /**
+   * uploading: on its way (`progress`, 0 to 1); done: stored as `id`; failed: its upload failed,
+   * to be tried again; refused: never sent, a kind not taken or too heavy (`problem` says which).
+   */
+  state: "uploading" | "done" | "failed" | "refused";
+  progress: number;
+  id: string | null;
+  problem: string | null;
+  /** The bytes, kept to try again. */
+  file: File | null;
+}
+/** What files may be picked: their kinds, their most in MB, one or many, how many at most. */
+export interface UploadRules {
+  accept?: readonly string[] | undefined;
+  maxMb?: number | undefined;
+  /** False: one file, a new pick replacing it. */
+  multiple?: boolean | undefined;
+  max?: number | undefined;
+}
+/** Files picked and how each goes, and what can be done with them. */
+export interface Uploads {
+  items: readonly Upload[];
+  /** The ids of the files in, in the order they were picked. */
+  ids: string[];
+  /** What the files still wait on: one on its way, or one that failed or was refused; null once all are in. */
+  waiting: "uploading" | "failed" | null;
+  add: (files: readonly File[]) => void;
+  remove: (key: number) => void;
+  retry: (key: number) => void;
+  /** Takes them all away, letting go of any on its way. */
+  clear: () => void;
+}
+/**
+ * Files picked and sent at once through `host`: each is refused before it goes when it is not a
+ * kind taken, is too heavy, or is one too many; then it is on its way, then in (its id) or failed
+ * (to be tried again). With `multiple` false a new pick replaces what was there. Whatever is on
+ * its way when its file goes (taken away, cleared, the component gone) is let go.
+ */
+export declare function useUploads(host: FileHost | undefined, { accept, maxMb, multiple, max }: UploadRules, start?: () => Upload[]): Uploads;
+/**
+ * The files picked, as chips: each with how it goes; taken away while they can be, the failed
+ * tried again; once in, a name not known here is read from the host's files, and opens there.
+ */
+export declare function UploadChips({ uploads, host, closed }: {
+  uploads: Uploads;
+  host: FileHost | undefined;
+  closed?: boolean | undefined;
+}): import("react").JSX.Element;
+export interface FileFieldProps extends ControlBase {
+  /** The ids of the files in. */
+  value: string[];
+  onChange: (ids: string[]) => void;
+  /** Where its files go and are found; none: it takes none (closed). */
+  files?: FileHost | undefined;
+  /** The kinds it takes: types, families ("image/*"), extensions (".xlsx"); none: any. */
+  accept?: readonly string[] | undefined;
+  multiple?: boolean | undefined;
+  /** The most a file may weigh, in MB (50 at most). */
+  maxMb?: number | undefined;
+  /**
+   * Hears what the field still waits on before its form may go, in words (a file on its way,
+   * one that failed), and null once nothing.
+   */
+  onWait?: ((problem: string | null) => void) | undefined;
+}
+/**
+ * Files to give: a zone to drop them on or press to choose them, saying what it takes; each file
+ * uploads at once (a line fills under it), then sits as a chip to take away; what is wrong with
+ * one (too heavy, a kind not taken, an upload that failed, to try again) says so on its chip.
+ * The value is the ids of the files in. One file unless `multiple`: once it is in, the zone
+ * steps aside until it is taken away. Closed, the chips are read, and open where the host shows
+ * files.
+ */
+export declare function FileField({ value, onChange, files, accept, multiple, maxMb, onWait, ...control }: FileFieldProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=FileField.d.ts.map