@dowel-ui/react 0.3.0 → 0.5.0

package/dist/components/confirm-typed/confirm-typed.d.ts

@@ -0,0 +1,47 @@
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/confirm-typed/confirm-typed.d.ts
+/**
+ * Type the name to confirm.
+ *
+ * The GitHub pattern for deleting a repository, and the one every product
+ * copies for the action that cannot be undone: the name of the thing has to
+ * pass through the reader's fingers before the button works. Trivial to
+ * build, absent from every component library, and usually built wrong in
+ * the one place it matters — what happens when the text does not match.
+ * The common version disables the button and says nothing, so a keyboard
+ * or screen reader user presses it, or presses Enter, and nothing happens
+ * at all.
+ *
+ * Here a mismatch is a thing that is said. The button stays reachable and
+ * pressing it, or Enter, before the text matches announces what was
+ * expected and marks the field invalid. The moment the text matches, that
+ * is announced too, once, so a reader knows the action has become
+ * available without watching the button change colour.
+ *
+ * Pasting is allowed. Blocking it is a popular piece of friction, and it
+ * punishes exactly the people who cannot type a long name easily — switch
+ * users, voice users, anyone with a tremor — while stopping nobody who can
+ * select-all and copy. The name is on screen either way; the point is that
+ * it passed through the reader's attention, not their keyboard.
+ */
+interface ConfirmTypedProps extends Omit<ComponentPropsWithRef<"div">, "children"> {
+  /** The text that must be typed, exactly. */
+  expected: string;
+  /** What confirming does, as the button reads: "Delete project". */
+  action: string;
+  onConfirm: () => void;
+  /** While the action runs. The button stays focusable and says so. */
+  pending?: boolean;
+  /** Match regardless of case. Off by default: a name is a name. */
+  caseSensitive?: boolean;
+  variant?: "destructive" | "primary";
+  /** The typed text. Controlled, if you want it. */
+  value?: string;
+  onValueChange?: (value: string) => void;
+  /** The consequence, in a sentence or two, before the field. */
+  children?: ReactNode;
+}
+declare function ConfirmTyped({ className, expected, action, onConfirm, pending, caseSensitive, variant, value: valueProp, onValueChange, children, ...props }: ConfirmTypedProps): import("react").JSX.Element;
+//#endregion
+export { ConfirmTyped, ConfirmTypedProps };
+//# sourceMappingURL=confirm-typed.d.ts.map

package/dist/components/confirm-typed/confirm-typed.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"confirm-typed.d.ts","names":[],"sources":["../../../src/components/confirm-typed/confirm-typed.tsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;UAwCiB,0BAA0B,KAAK;;EAE9C;;EAEA;EACA;;EAEA;;EAEA;EACA;;EAEA;EACA,iBAAiB;;EAEjB,WAAW;;iBAGG,eACd,WACA,UACA,QACA,WACA,SACA,eACA,SACA,OAAO,WACP,eACA,aACG,SACF,oCAAiB,IAAA"}

package/dist/components/confirm-typed/confirm-typed.js

@@ -0,0 +1,106 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { Button } from "../button/button.js";
+import { Input } from "../input/input.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useRef, useState } from "react";
+//#region src/components/confirm-typed/confirm-typed.tsx
+function ConfirmTyped({ className, expected, action, onConfirm, pending = false, caseSensitive = true, variant = "destructive", value: valueProp, onValueChange, children, ...props }) {
+	const id = useId();
+	const inputRef = useRef(null);
+	const [uncontrolled, setUncontrolled] = useState("");
+	const value = valueProp ?? uncontrolled;
+	const [attempted, setAttempted] = useState(false);
+	const [announcement, setAnnouncement] = useState("");
+	const normalise = (text) => caseSensitive ? text.trim() : text.trim().toLowerCase();
+	const matched = value.length > 0 && normalise(value) === normalise(expected);
+	const [wasMatched, setWasMatched] = useState(matched);
+	if (wasMatched !== matched) {
+		setWasMatched(matched);
+		if (matched) {
+			setAnnouncement(`Matches. ${action} is available.`);
+			setAttempted(false);
+		}
+	}
+	const setValue = (next) => {
+		setUncontrolled(next);
+		onValueChange?.(next);
+	};
+	const attempt = () => {
+		if (pending) return;
+		if (matched) {
+			onConfirm();
+			return;
+		}
+		setAttempted(true);
+		setAnnouncement(`Does not match. Type ${expected} exactly.`);
+		inputRef.current?.focus();
+	};
+	const onKeyDown = (event) => {
+		if (event.key !== "Enter" || event.nativeEvent.isComposing) return;
+		event.preventDefault();
+		attempt();
+	};
+	const mismatch = attempted && !matched;
+	const hint = matched ? "Matches." : mismatch ? `Does not match. Type ${expected} exactly.` : caseSensitive ? "Type it exactly as shown." : "Type it as shown. Case does not matter.";
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "confirm-typed",
+		"data-state": matched ? "matched" : mismatch ? "mismatched" : "idle",
+		className: cn("flex flex-col gap-2", className),
+		...props,
+		children: [
+			children,
+			/* @__PURE__ */ jsxs("label", {
+				htmlFor: `${id}-input`,
+				className: "text-sm",
+				children: [
+					"To confirm, type",
+					" ",
+					/* @__PURE__ */ jsx("strong", {
+						className: "rounded bg-muted px-1 py-0.5 font-mono text-xs font-medium select-all",
+						children: expected
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(Input, {
+				ref: inputRef,
+				id: `${id}-input`,
+				value,
+				autoComplete: "off",
+				autoCapitalize: "off",
+				spellCheck: false,
+				"aria-describedby": `${id}-hint`,
+				"aria-invalid": mismatch || void 0,
+				onChange: (event) => {
+					setValue(event.target.value);
+				},
+				onKeyDown
+			}),
+			/* @__PURE__ */ jsx("p", {
+				id: `${id}-hint`,
+				"data-slot": "confirm-typed-hint",
+				className: cn("text-xs", mismatch ? "text-destructive" : matched ? "text-success" : "text-muted-foreground"),
+				children: hint
+			}),
+			/* @__PURE__ */ jsx("span", {
+				role: "status",
+				"aria-live": "polite",
+				className: "sr-only",
+				children: announcement
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				variant,
+				loading: pending,
+				"data-ready": matched || void 0,
+				"aria-describedby": matched ? void 0 : `${id}-hint`,
+				className: cn("self-start", !matched && !pending && "opacity-55"),
+				onClick: attempt,
+				children: pending ? `${action}…` : action
+			})
+		]
+	});
+}
+//#endregion
+export { ConfirmTyped };
+
+//# sourceMappingURL=confirm-typed.js.map

package/dist/components/confirm-typed/confirm-typed.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"confirm-typed.js","names":[],"sources":["../../../src/components/confirm-typed/confirm-typed.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  useId,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type KeyboardEvent,\n  type ReactNode,\n} from \"react\";\n\nimport { Button } from \"@/components/button\";\nimport { Input } from \"@/components/input\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Type the name to confirm.\n *\n * The GitHub pattern for deleting a repository, and the one every product\n * copies for the action that cannot be undone: the name of the thing has to\n * pass through the reader's fingers before the button works. Trivial to\n * build, absent from every component library, and usually built wrong in\n * the one place it matters — what happens when the text does not match.\n * The common version disables the button and says nothing, so a keyboard\n * or screen reader user presses it, or presses Enter, and nothing happens\n * at all.\n *\n * Here a mismatch is a thing that is said. The button stays reachable and\n * pressing it, or Enter, before the text matches announces what was\n * expected and marks the field invalid. The moment the text matches, that\n * is announced too, once, so a reader knows the action has become\n * available without watching the button change colour.\n *\n * Pasting is allowed. Blocking it is a popular piece of friction, and it\n * punishes exactly the people who cannot type a long name easily — switch\n * users, voice users, anyone with a tremor — while stopping nobody who can\n * select-all and copy. The name is on screen either way; the point is that\n * it passed through the reader's attention, not their keyboard.\n */\n\nexport interface ConfirmTypedProps extends Omit<ComponentPropsWithRef<\"div\">, \"children\"> {\n  /** The text that must be typed, exactly. */\n  expected: string;\n  /** What confirming does, as the button reads: \"Delete project\". */\n  action: string;\n  onConfirm: () => void;\n  /** While the action runs. The button stays focusable and says so. */\n  pending?: boolean;\n  /** Match regardless of case. Off by default: a name is a name. */\n  caseSensitive?: boolean;\n  variant?: \"destructive\" | \"primary\";\n  /** The typed text. Controlled, if you want it. */\n  value?: string;\n  onValueChange?: (value: string) => void;\n  /** The consequence, in a sentence or two, before the field. */\n  children?: ReactNode;\n}\n\nexport function ConfirmTyped({\n  className,\n  expected,\n  action,\n  onConfirm,\n  pending = false,\n  caseSensitive = true,\n  variant = \"destructive\",\n  value: valueProp,\n  onValueChange,\n  children,\n  ...props\n}: ConfirmTypedProps) {\n  const id = useId();\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const [uncontrolled, setUncontrolled] = useState(\"\");\n  const value = valueProp ?? uncontrolled;\n\n  const [attempted, setAttempted] = useState(false);\n  const [announcement, setAnnouncement] = useState(\"\");\n\n  // Surrounding whitespace never decides it: a trailing space is not a\n  // different name, and a reader cannot see it to know why it failed.\n  const normalise = (text: string) => (caseSensitive ? text.trim() : text.trim().toLowerCase());\n  const matched = value.length > 0 && normalise(value) === normalise(expected);\n\n  // Announce the match once, on the transition. Adjusted during render so the\n  // announcement lands in the same commit as the state it describes.\n  const [wasMatched, setWasMatched] = useState(matched);\n  if (wasMatched !== matched) {\n    setWasMatched(matched);\n    if (matched) {\n      setAnnouncement(`Matches. ${action} is available.`);\n      setAttempted(false);\n    }\n  }\n\n  const setValue = (next: string) => {\n    setUncontrolled(next);\n    onValueChange?.(next);\n  };\n\n  const attempt = () => {\n    if (pending) return;\n    if (matched) {\n      onConfirm();\n      return;\n    }\n    // Said, not swallowed. A press that does nothing tells a keyboard user\n    // nothing; this one tells them what was expected.\n    setAttempted(true);\n    setAnnouncement(`Does not match. Type ${expected} exactly.`);\n    inputRef.current?.focus();\n  };\n\n  const onKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n    if (event.key !== \"Enter\" || event.nativeEvent.isComposing) return;\n    event.preventDefault();\n    attempt();\n  };\n\n  const mismatch = attempted && !matched;\n  const hint = matched\n    ? \"Matches.\"\n    : mismatch\n      ? `Does not match. Type ${expected} exactly.`\n      : caseSensitive\n        ? \"Type it exactly as shown.\"\n        : \"Type it as shown. Case does not matter.\";\n\n  return (\n    <div\n      data-slot=\"confirm-typed\"\n      data-state={matched ? \"matched\" : mismatch ? \"mismatched\" : \"idle\"}\n      className={cn(\"flex flex-col gap-2\", className)}\n      {...props}\n    >\n      {children}\n\n      <label htmlFor={`${id}-input`} className=\"text-sm\">\n        To confirm, type{\" \"}\n        <strong className=\"rounded bg-muted px-1 py-0.5 font-mono text-xs font-medium select-all\">\n          {expected}\n        </strong>\n      </label>\n\n      <Input\n        ref={inputRef}\n        id={`${id}-input`}\n        value={value}\n        autoComplete=\"off\"\n        autoCapitalize=\"off\"\n        spellCheck={false}\n        aria-describedby={`${id}-hint`}\n        aria-invalid={mismatch || undefined}\n        onChange={(event) => {\n          setValue(event.target.value);\n        }}\n        onKeyDown={onKeyDown}\n      />\n\n      <p\n        id={`${id}-hint`}\n        data-slot=\"confirm-typed-hint\"\n        className={cn(\n          \"text-xs\",\n          mismatch ? \"text-destructive\" : matched ? \"text-success\" : \"text-muted-foreground\",\n        )}\n      >\n        {hint}\n      </p>\n\n      {/* Present from the first render, so the first announcement is heard. */}\n      <span role=\"status\" aria-live=\"polite\" className=\"sr-only\">\n        {announcement}\n      </span>\n\n      <Button\n        variant={variant}\n        loading={pending}\n        data-ready={matched || undefined}\n        aria-describedby={matched ? undefined : `${id}-hint`}\n        // Dimmed rather than disabled while the text does not match: it stays\n        // reachable, and pressing it says why nothing happened.\n        className={cn(\"self-start\", !matched && !pending && \"opacity-55\")}\n        onClick={attempt}\n      >\n        {pending ? `${action}…` : action}\n      </Button>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AA0DA,SAAgB,aAAa,EAC3B,WACA,UACA,QACA,WACA,UAAU,OACV,gBAAgB,MAChB,UAAU,eACV,OAAO,WACP,eACA,UACA,GAAG,SACiB;CACpB,MAAM,KAAK,MAAM;CACjB,MAAM,WAAW,OAAyB,IAAI;CAE9C,MAAM,CAAC,cAAc,mBAAmB,SAAS,EAAE;CACnD,MAAM,QAAQ,aAAa;CAE3B,MAAM,CAAC,WAAW,gBAAgB,SAAS,KAAK;CAChD,MAAM,CAAC,cAAc,mBAAmB,SAAS,EAAE;CAInD,MAAM,aAAa,SAAkB,gBAAgB,KAAK,KAAK,IAAI,KAAK,KAAK,CAAC,CAAC,YAAY;CAC3F,MAAM,UAAU,MAAM,SAAS,KAAK,UAAU,KAAK,MAAM,UAAU,QAAQ;CAI3E,MAAM,CAAC,YAAY,iBAAiB,SAAS,OAAO;CACpD,IAAI,eAAe,SAAS;EAC1B,cAAc,OAAO;EACrB,IAAI,SAAS;GACX,gBAAgB,YAAY,OAAO,eAAe;GAClD,aAAa,KAAK;EACpB;CACF;CAEA,MAAM,YAAY,SAAiB;EACjC,gBAAgB,IAAI;EACpB,gBAAgB,IAAI;CACtB;CAEA,MAAM,gBAAgB;EACpB,IAAI,SAAS;EACb,IAAI,SAAS;GACX,UAAU;GACV;EACF;EAGA,aAAa,IAAI;EACjB,gBAAgB,wBAAwB,SAAS,UAAU;EAC3D,SAAS,SAAS,MAAM;CAC1B;CAEA,MAAM,aAAa,UAA2C;EAC5D,IAAI,MAAM,QAAQ,WAAW,MAAM,YAAY,aAAa;EAC5D,MAAM,eAAe;EACrB,QAAQ;CACV;CAEA,MAAM,WAAW,aAAa,CAAC;CAC/B,MAAM,OAAO,UACT,aACA,WACE,wBAAwB,SAAS,aACjC,gBACE,8BACA;CAER,OACE,qBAAC,OAAD;EACE,aAAU;EACV,cAAY,UAAU,YAAY,WAAW,eAAe;EAC5D,WAAW,GAAG,uBAAuB,SAAS;EAC9C,GAAI;EAJN,UAAA;GAMG;GAED,qBAAC,SAAD;IAAO,SAAS,GAAG,GAAG;IAAS,WAAU;IAAzC,UAAA;KAAmD;KAChC;KACjB,oBAAC,UAAD;MAAQ,WAAU;MACf,UAAA;KACK,CAAA;IACH;;GAEP,oBAAC,OAAD;IACE,KAAK;IACL,IAAI,GAAG,GAAG;IACH;IACP,cAAa;IACb,gBAAe;IACf,YAAY;IACZ,oBAAkB,GAAG,GAAG;IACxB,gBAAc,YAAY,KAAA;IAC1B,WAAW,UAAU;KACnB,SAAS,MAAM,OAAO,KAAK;IAC7B;IACW;GACZ,CAAA;GAED,oBAAC,KAAD;IACE,IAAI,GAAG,GAAG;IACV,aAAU;IACV,WAAW,GACT,WACA,WAAW,qBAAqB,UAAU,iBAAiB,uBAC7D;IAEC,UAAA;GACA,CAAA;GAGH,oBAAC,QAAD;IAAM,MAAK;IAAS,aAAU;IAAS,WAAU;IAC9C,UAAA;GACG,CAAA;GAEN,oBAAC,QAAD;IACW;IACT,SAAS;IACT,cAAY,WAAW,KAAA;IACvB,oBAAkB,UAAU,KAAA,IAAY,GAAG,GAAG;IAG9C,WAAW,GAAG,cAAc,CAAC,WAAW,CAAC,WAAW,YAAY;IAChE,SAAS;IAER,UAAA,UAAU,GAAG,OAAO,KAAK;GACpB,CAAA;EACL;;AAET"}

package/dist/components/confirm-typed/index.d.ts

@@ -0,0 +1,2 @@
+import { ConfirmTyped, ConfirmTypedProps } from "./confirm-typed.js";
+export { ConfirmTyped, type ConfirmTypedProps };

package/dist/components/confirm-typed/index.js

@@ -0,0 +1,2 @@
+import { ConfirmTyped } from "./confirm-typed.js";
+export { ConfirmTyped };

package/dist/components/confirm-typed/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/confirm-typed/meta.ts
+const meta = defineMeta({
+	name: "confirm-typed",
+	title: "Confirm Typed",
+	description: "Type the name to confirm — and be told, not ignored, when it does not match.",
+	category: "form",
+	status: "stable",
+	dependencies: [],
+	registryDependencies: ["button", "input"],
+	files: ["confirm-typed.tsx"],
+	a11y: "The button stays reachable while the text does not match, dimmed rather than disabled, and pressing it or Enter announces what was expected, marks the field invalid and returns focus to it — the common version disables the button and says nothing, so a keyboard user cannot tell whether anything happened. The match is announced once, on the transition, naming the action that became available, so nobody has to watch the button change colour. Typing itself stays silent, because a verdict on every keystroke is noise. The hint is the field's description and the button's, and the status region exists from the first render so the first announcement is heard. Pasting is allowed: blocking it punishes people who cannot type a long name easily and stops nobody who can select-all and copy."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/confirm-typed/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/confirm-typed/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"confirm-typed\",\n  title: \"Confirm Typed\",\n  description: \"Type the name to confirm — and be told, not ignored, when it does not match.\",\n  category: \"form\",\n  status: \"stable\",\n  dependencies: [],\n  registryDependencies: [\"button\", \"input\"],\n  files: [\"confirm-typed.tsx\"],\n  a11y:\n    \"The button stays reachable while the text does not match, dimmed rather than disabled, and \" +\n    \"pressing it or Enter announces what was expected, marks the field invalid and returns focus \" +\n    \"to it — the common version disables the button and says nothing, so a keyboard user cannot \" +\n    \"tell whether anything happened. The match is announced once, on the transition, naming the \" +\n    \"action that became available, so nobody has to watch the button change colour. Typing \" +\n    \"itself stays silent, because a verdict on every keystroke is noise. The hint is the field's \" +\n    \"description and the button's, and the status region exists from the first render so the \" +\n    \"first announcement is heard. Pasting is allowed: blocking it punishes people who cannot \" +\n    \"type a long name easily and stops nobody who can select-all and copy.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aAAa;CACb,UAAU;CACV,QAAQ;CACR,cAAc,CAAC;CACf,sBAAsB,CAAC,UAAU,OAAO;CACxC,OAAO,CAAC,mBAAmB;CAC3B,MACE;AASJ,CAAC"}

package/dist/components/cron-editor/cron-editor.d.ts

@@ -0,0 +1,36 @@
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/cron-editor/cron-editor.d.ts
+interface CronProps extends Omit<ComponentPropsWithRef<"div">, "defaultValue" | "onChange" | "children"> {
+  /** The expression. Controlled. */
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (expression: string) => void;
+  /** IANA zone the expression's times are in. Defaults to the runtime zone. */
+  timeZone?: string;
+  locale?: string;
+  /** The instant next runs are counted from. Pass one that changes when you refresh. */
+  now?: Date;
+  children: ReactNode;
+}
+declare function Cron({ className, value: valueProp, defaultValue, onValueChange, timeZone, locale, now, children, ...props }: CronProps): import("react").JSX.Element;
+type CronBuilderProps = Omit<ComponentPropsWithRef<"div">, "children">;
+declare function CronBuilder({ className, ...props }: CronBuilderProps): import("react").JSX.Element;
+type CronExpressionProps = Omit<ComponentPropsWithRef<"div">, "children">;
+/**
+ * The expression, editable, with its reading underneath — or the reason it is
+ * invalid. An invalid entry is never applied: the last valid schedule stands
+ * until the field says something that parses.
+ */
+declare function CronExpression({ className, ...props }: CronExpressionProps): import("react").JSX.Element;
+interface CronNextRunsProps extends Omit<ComponentPropsWithRef<"div">, "children"> {
+  count?: number;
+}
+/**
+ * When it will fire, in the zone it is defined in. The zone is in the
+ * heading because a time with no zone is the classic scheduling mistake, and
+ * a schedule that never runs says so rather than showing an empty list.
+ */
+declare function CronNextRuns({ className, count, ...props }: CronNextRunsProps): import("react").JSX.Element | null;
+//#endregion
+export { Cron, CronBuilder, CronBuilderProps, CronExpression, CronExpressionProps, CronNextRuns, CronNextRunsProps, CronProps };
+//# sourceMappingURL=cron-editor.d.ts.map

package/dist/components/cron-editor/cron-editor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cron-editor.d.ts","names":[],"sources":["../../../src/components/cron-editor/cron-editor.tsx"],"mappings":";;UA0EiB,kBAAkB,KACjC;;EAIA;EACA;EACA,iBAAiB;;EAEjB;EACA;;EAEA,MAAM;EACN,UAAU;;iBAGI,OACd,WACA,OAAO,WACP,cACA,eACA,UACA,QACA,KACA,aACG,SACF,4BAAS,IAAA;KAwKA,mBAAmB,KAAK;iBAEpB,cAAc,cAAc,SAAS,mCAAgB,IAAA;KA0QzD,sBAAsB,KAAK;;;;;;iBAOvB,iBAAiB,cAAc,SAAS,sCAAmB,IAAA;UAqE1D,0BAA0B,KAAK;EAC9C;;;;;;;iBAQc,eAAe,WAAW,UAAc,SAAS,oCAAiB,IAAA"}