@lar-works/design-system 0.2.0 → 0.3.0

package/dist/forms/FormSection.js

@@ -1,12 +1,14 @@
 import { Button } from "../actions/Button.js";
+import { Badge } from "../display/Badge.js";
 import { InsetPanel } from "../display/InsetPanel.js";
 import { SkeletonLoader } from "../feedback/SkeletonLoader.js";
 import { Stack } from "../layout/Flow.js";
+import { HelpTip } from "../overlays/HelpTip.js";
 import { Heading, Text } from "../typography/Typography.js";
 import { Field } from "./Field.js";
 import { useId, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDownIcon } from "lucide-react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 // src/forms/FormSection.tsx
 const contentSpacing = "px-4 py-3.5 sm:px-5";
 const rowClasses = `grid min-w-0 gap-x-6 gap-y-3 sm:items-center ${contentSpacing}`;
@@ -23,7 +25,31 @@ function FormStack({ children }) {
 		children
 	});
 }
-function FormSection({ action, badges, children, description, loading = false, loadingLabel, title }) {
+function FormSection(props) {
+	if (props.presentation === "dense") return /* @__PURE__ */ jsx(DenseFormSection, { ...props });
+	return /* @__PURE__ */ jsx(PanelFormSection, { ...props });
+}
+function DenseFormSection({ presentation: _presentation, title, help, helpLabel, description, "aria-label": label, children, ...data }) {
+	const titleId = useId();
+	return /* @__PURE__ */ jsxs("section", {
+		...data,
+		"aria-label": label,
+		"aria-labelledby": label || !title ? void 0 : titleId,
+		className: "grid min-w-0 gap-3",
+		children: [(title || description) && /* @__PURE__ */ jsxs("div", { children: [title && /* @__PURE__ */ jsxs("h3", {
+			id: titleId,
+			className: "m-0 flex items-center gap-1.5 text-[13px] font-semibold",
+			children: [title, help && /* @__PURE__ */ jsx(HelpTip, {
+				label: helpLabel ?? (typeof title === "string" ? title : ""),
+				children: help
+			})]
+		}), description && /* @__PURE__ */ jsx("p", {
+			className: "text-base-700 m-0 mt-0.5 text-xs",
+			children: description
+		})] }), children]
+	});
+}
+function PanelFormSection({ action, badges, children, description, loading = false, loadingLabel, title }) {
 	const titleId = useId();
 	const content = /* @__PURE__ */ jsxs("section", {
 		"aria-labelledby": titleId,
@@ -56,7 +82,9 @@ function FormSection({ action, badges, children, description, loading = false, l
 		children: content
 	}) : content;
 }
-function FormRow({ badges, children, description, id, label }) {
+function FormRow(props) {
+	if (props.layout === "flow") return /* @__PURE__ */ jsx(FormRowFlow, { ...props });
+	const { badges, children, description, id, label } = props;
 	return /* @__PURE__ */ jsxs("div", {
 		id,
 		tabIndex: id ? -1 : void 0,
@@ -82,6 +110,48 @@ function FormRow({ badges, children, description, id, label }) {
 		})]
 	});
 }
+function FormRowFlow({ layout: _layout, label, help, helpLabel, description, children, below, error, errorId, ...data }) {
+	const fallbackErrorId = useId();
+	return /* @__PURE__ */ jsxs("div", {
+		...data,
+		className: "settings-row grid min-w-0 gap-2 px-4 py-3",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 flex-wrap items-center gap-x-6 gap-y-2",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "min-w-32 flex-1",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "settings-row-title flex min-w-0 items-center gap-1.5 text-[13px] font-medium wrap-anywhere",
+						children: [label, help && /* @__PURE__ */ jsx(HelpTip, {
+							label: helpLabel ?? (typeof label === "string" ? label : ""),
+							children: help
+						})]
+					}), description && /* @__PURE__ */ jsx("div", {
+						className: "text-base-700 text-xs wrap-anywhere",
+						children: description
+					})]
+				}), children && /* @__PURE__ */ jsx("div", {
+					className: "settings-row-control flex max-w-full min-w-0 flex-wrap items-center gap-2 sm:max-w-[60%] [&_button]:max-w-full [&>span]:max-w-full",
+					children
+				})]
+			}),
+			below,
+			error && /* @__PURE__ */ jsx("p", {
+				id: errorId ?? fallbackErrorId,
+				role: "alert",
+				className: "m-0 text-xs text-(--lar-danger-text)",
+				children: error
+			})
+		]
+	});
+}
+/** A value and its unit beside it in a row's controls, such as a number field and "days". */
+function FormUnit({ children, unit }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: "flex items-center gap-2 text-sm [&_input]:w-20",
+		children: [children, unit]
+	});
+}
 function FormField({ action, children, loading = false, loadingLabel, ...props }) {
 	if (loading) return /* @__PURE__ */ jsx(SkeletonLoader, {
 		label: loadingLabel ?? "",
@@ -119,11 +189,58 @@ function FormAction(props) {
 		variant: "subtle"
 	});
 }
-function Disclosure({ children, label, lazy = false }) {
-	const [open, setOpen] = useState(false);
+function Disclosure({ children, label, lazy = false, presentation = "note", defaultOpen = false, badge, onOpenChange, ...data }) {
+	const [open, setOpen] = useState(defaultOpen);
+	const shown = !lazy || open ? children : null;
+	const toggle = (event) => {
+		setOpen(event.currentTarget.open);
+		onOpenChange?.(event.currentTarget.open);
+	};
+	if (presentation === "group") return /* @__PURE__ */ jsxs("details", {
+		...data,
+		open,
+		onToggle: toggle,
+		className: "min-w-0",
+		children: [/* @__PURE__ */ jsxs("summary", {
+			className: "cursor-pointer text-[13px] font-semibold",
+			children: [label, badge && /* @__PURE__ */ jsxs(Fragment$1, { children: [" ", /* @__PURE__ */ jsx(Badge, {
+				className: "ms-1",
+				children: badge
+			})] })]
+		}), shown && /* @__PURE__ */ jsx("div", {
+			className: "mt-3 grid min-w-0 gap-3",
+			children: shown
+		})]
+	});
+	if (presentation === "framed") return /* @__PURE__ */ jsxs("details", {
+		...data,
+		open,
+		onToggle: toggle,
+		className: "min-w-0 rounded-lg border px-3 py-2",
+		children: [/* @__PURE__ */ jsx("summary", {
+			className: "cursor-pointer text-sm font-medium",
+			children: label
+		}), /* @__PURE__ */ jsx("div", {
+			className: "mt-2",
+			children: shown
+		})]
+	});
+	if (presentation === "section") return /* @__PURE__ */ jsxs("details", {
+		...data,
+		className: "grid min-w-0 gap-2",
+		onToggle: toggle,
+		children: [/* @__PURE__ */ jsx("summary", {
+			className: "text-base-700 cursor-pointer text-sm",
+			children: label
+		}), /* @__PURE__ */ jsx("div", {
+			className: "pt-2",
+			children: shown
+		})]
+	});
 	return /* @__PURE__ */ jsxs("details", {
+		...data,
 		className: "group px-1",
-		onToggle: (event) => setOpen(event.currentTarget.open),
+		onToggle: toggle,
 		children: [/* @__PURE__ */ jsxs("summary", {
 			className: "text-base-700 hover:text-base-content focus-visible:outline-primary flex w-fit cursor-pointer list-none items-center gap-1.5 rounded py-1 text-xs focus-visible:outline-2 focus-visible:outline-offset-2 [&::-webkit-details-marker]:hidden",
 			children: [/* @__PURE__ */ jsx("span", {
@@ -133,10 +250,24 @@ function Disclosure({ children, label, lazy = false }) {
 			}), label]
 		}), /* @__PURE__ */ jsx("div", {
 			className: "text-base-700 mt-2 space-y-2 text-xs leading-relaxed",
-			children: !lazy || open ? children : null
+			children: shown
 		})]
 	});
 }
-export { Disclosure, FormAction, FormContent, FormField, FormRow, FormSection, FormStack };
+/** The form section's fieldset: a bordered group of controls under a legend, on the native fieldset, which also
+*  disables every control inside it. As a `group`, it only groups and disables its fields. */
+function FormFieldset({ legend, hiddenLegend = false, presentation = "bordered", className = "", children, ...props }) {
+	return /* @__PURE__ */ jsxs("fieldset", {
+		className: `m-0 min-w-0 ${presentation === "group" ? "border-0 p-0" : "border-base-300 mb-3 rounded-lg border px-3 pt-2 pb-0 [&>legend]:mb-2 [&>legend]:font-semibold"} ${className}`,
+		"data-slot": "fieldset",
+		...props,
+		children: [legend ? /* @__PURE__ */ jsx("legend", {
+			className: hiddenLegend ? "sr-only" : "text-base-content p-0 text-sm leading-5 font-medium",
+			"data-slot": "fieldset-legend",
+			children: legend
+		}) : null, children]
+	});
+}
+export { Disclosure, FormAction, FormContent, FormField, FormFieldset, FormRow, FormSection, FormStack, FormUnit };
 
 //# sourceMappingURL=FormSection.js.map

package/dist/forms/FormSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormSection.js","names":[],"sources":["../../src/forms/FormSection.tsx"],"sourcesContent":["import { ChevronDownIcon } from 'lucide-react';\nimport { type ReactNode, useId, useState } from 'react';\n\nimport { Button, type ButtonProps } from '../actions/Button';\nimport { InsetPanel } from '../display/InsetPanel';\nimport { SkeletonLoader } from '../feedback/SkeletonLoader';\nimport { Stack } from '../layout/Flow';\nimport { Heading, Text } from '../typography/Typography';\nimport { Field, type FieldProps } from './Field';\n\nconst contentSpacing = 'px-4 py-3.5 sm:px-5';\nconst rowClasses = `grid min-w-0 gap-x-6 gap-y-3 sm:items-center ${contentSpacing}`;\n\nexport function FormContent({ children }: { children: ReactNode }) {\n    return (\n        <Stack space=\"group\" className={contentSpacing}>\n            {children}\n        </Stack>\n    );\n}\n\nexport function FormStack({ children }: { children: ReactNode }) {\n    return <Stack space=\"page\">{children}</Stack>;\n}\n\ninterface FormSectionProps {\n    action?: ReactNode;\n    badges?: ReactNode;\n    children: ReactNode;\n    description?: string;\n    loading?: boolean;\n    loadingLabel?: string;\n    title: ReactNode;\n}\n\nexport function FormSection({\n    action,\n    badges,\n    children,\n    description,\n    loading = false,\n    loadingLabel,\n    title,\n}: FormSectionProps) {\n    const titleId = useId();\n    const content = (\n        <section aria-labelledby={titleId}>\n            <div className=\"flex min-h-5 items-center justify-between gap-3\">\n                <div className=\"flex min-w-0 flex-wrap items-center gap-2\">\n                    <Heading id={titleId} as=\"h3\" className=\"text-base-700\" variant=\"label\">\n                        {title}\n                    </Heading>\n                    {badges}\n                </div>\n                {action}\n            </div>\n            <div className=\"mt-3\">\n                <InsetPanel presentation=\"settings\">\n                    {description ? (\n                        <FormContent>\n                            <Text variant=\"caption\" tone=\"muted\">\n                                {description}\n                            </Text>\n                        </FormContent>\n                    ) : null}\n                    {children}\n                </InsetPanel>\n            </div>\n        </section>\n    );\n\n    return loading ? (\n        <SkeletonLoader label={loadingLabel ?? (typeof title === 'string' ? title : '')}>{content}</SkeletonLoader>\n    ) : (\n        content\n    );\n}\n\ninterface FormRowProps {\n    badges?: ReactNode;\n    children: ReactNode;\n    description: string;\n    /** The row's element id, for linking or scrolling to it; a row with one can take focus when it is opened. */\n    id?: string;\n    label: ReactNode;\n}\n\nexport function FormRow({ badges, children, description, id, label }: FormRowProps) {\n    return (\n        <div\n            id={id}\n            tabIndex={id ? -1 : undefined}\n            className={`${rowClasses} sm:grid-cols-[minmax(0,1fr)_13rem] sm:has-[[role=switch]]:grid-cols-[minmax(0,1fr)_auto]`}\n        >\n            <Stack space=\"tight\" className=\"min-w-0\">\n                <div className=\"flex flex-wrap items-center gap-x-2 gap-y-1.5\">\n                    <Text as=\"span\" variant=\"label\">\n                        {label}\n                    </Text>\n                    {badges}\n                </div>\n                <Text variant=\"caption\" tone=\"muted\">\n                    {description}\n                </Text>\n            </Stack>\n            <div className=\"min-w-0 sm:flex sm:justify-end [&>[role=status]]:w-full\">{children}</div>\n        </div>\n    );\n}\n\ntype FormFieldProps = Omit<FieldProps, 'children' | 'className'> & { action?: ReactNode } & (\n        | { children: ReactNode; loading?: false; loadingLabel?: never }\n        | { children?: never; loading: true; loadingLabel: string }\n    );\n\nexport function FormField({ action, children, loading = false, loadingLabel, ...props }: FormFieldProps) {\n    if (loading)\n        return (\n            <SkeletonLoader label={loadingLabel ?? ''}>\n                <div className={`${rowClasses} sm:grid-cols-[9rem_minmax(0,1fr)]`}>\n                    <Text variant=\"label\" className=\"w-3/4\" loading />\n                    <SkeletonLoader.Shape presentation=\"control\" />\n                </div>\n            </SkeletonLoader>\n        );\n\n    const content = children;\n\n    if (action) {\n        return (\n            <div className={`${rowClasses} grid-cols-[minmax(0,1fr)_auto] sm:grid-cols-[9rem_minmax(0,1fr)_auto]`}>\n                <Field\n                    {...props}\n                    className=\"contents [&>div]:min-w-0 [&>div:first-child]:col-span-2 [&>div:first-child]:mb-0 sm:[&>div:first-child]:col-span-1 [&>p]:col-span-2 [&>p]:mt-0 sm:[&>p]:col-start-2\"\n                >\n                    {content}\n                </Field>\n                <div className=\"col-start-2 row-start-2 flex items-center gap-2 sm:col-start-3 sm:row-start-1\">\n                    {action}\n                </div>\n            </div>\n        );\n    }\n\n    return (\n        <Field\n            {...props}\n            className={`${rowClasses} sm:grid-cols-[9rem_minmax(0,1fr)] [&>div]:min-w-0 [&>div:first-child]:mb-0 [&>p]:mt-0 sm:[&>p]:col-start-2`}\n        >\n            {content}\n        </Field>\n    );\n}\n\nexport function FormAction(props: Omit<ButtonProps, 'type' | 'size' | 'variant' | 'color'>) {\n    return <Button {...props} type=\"button\" variant=\"subtle\" />;\n}\n\nexport function Disclosure({ children, label, lazy = false }: { children: ReactNode; label: string; lazy?: boolean }) {\n    const [open, setOpen] = useState(false);\n\n    return (\n        <details className=\"group px-1\" onToggle={(event) => setOpen(event.currentTarget.open)}>\n            <summary className=\"text-base-700 hover:text-base-content focus-visible:outline-primary flex w-fit cursor-pointer list-none items-center gap-1.5 rounded py-1 text-xs focus-visible:outline-2 focus-visible:outline-offset-2 [&::-webkit-details-marker]:hidden\">\n                <span aria-hidden=\"true\" className=\"-rotate-90 transition-transform group-open:rotate-0 [&>svg]:size-3\">\n                    <ChevronDownIcon />\n                </span>\n                {label}\n            </summary>\n            <div className=\"text-base-700 mt-2 space-y-2 text-xs leading-relaxed\">\n                {!lazy || open ? children : null}\n            </div>\n        </details>\n    );\n}\n"],"mappings":";;;;;;;;;;AAUA,MAAM,iBAAiB;AACvB,MAAM,aAAa,gDAAgD;AAEnE,SAAgB,YAAY,EAAE,YAAqC;CAC/D,OACI,oBAAC,OAAD;EAAO,OAAM;EAAQ,WAAW;EAC3B;CACE,CAAA;AAEf;AAEA,SAAgB,UAAU,EAAE,YAAqC;CAC7D,OAAO,oBAAC,OAAD;EAAO,OAAM;EAAQ;CAAgB,CAAA;AAChD;AAYA,SAAgB,YAAY,EACxB,QACA,QACA,UACA,aACA,UAAU,OACV,cACA,SACiB;CACjB,MAAM,UAAU,MAAM;CACtB,MAAM,UACF,qBAAC,WAAD;EAAS,mBAAiB;EAA1B,UAAA,CACI,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACI,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACI,oBAAC,SAAD;KAAS,IAAI;KAAS,IAAG;KAAK,WAAU;KAAgB,SAAQ;KAC3D,UAAA;IACI,CAAA,GACR,MACA;GACJ,CAAA,GAAA,MACA;EACL,CAAA,GAAA,oBAAC,OAAD;GAAK,WAAU;GACX,UAAA,qBAAC,YAAD;IAAY,cAAa;IAAzB,UAAA,CACK,cACG,oBAAC,aAAD,EAAA,UACI,oBAAC,MAAD;KAAM,SAAQ;KAAU,MAAK;KACxB,UAAA;IACC,CAAA,EACG,CAAA,IACb,MACH,QACO;;EACX,CAAA,CACA;;CAGb,OAAO,UACH,oBAAC,gBAAD;EAAgB,OAAO,iBAAiB,OAAO,UAAU,WAAW,QAAQ;EAAM,UAAA;CAAwB,CAAA,IAE1G;AAER;AAWA,SAAgB,QAAQ,EAAE,QAAQ,UAAU,aAAa,IAAI,SAAuB;CAChF,OACI,qBAAC,OAAD;EACQ;EACJ,UAAU,KAAK,KAAK,KAAA;EACpB,WAAW,GAAG,WAAW;EAH7B,UAAA,CAKI,qBAAC,OAAD;GAAO,OAAM;GAAQ,WAAU;GAA/B,UAAA,CACI,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACI,oBAAC,MAAD;KAAM,IAAG;KAAO,SAAQ;KACnB,UAAA;IACC,CAAA,GACL,MACA;GACL,CAAA,GAAA,oBAAC,MAAD;IAAM,SAAQ;IAAU,MAAK;IACxB,UAAA;GACC,CAAA,CACH;EACP,CAAA,GAAA,oBAAC,OAAD;GAAK,WAAU;GAA2D;EAAc,CAAA,CACvF;;AAEb;AAOA,SAAgB,UAAU,EAAE,QAAQ,UAAU,UAAU,OAAO,cAAc,GAAG,SAAyB;CACrG,IAAI,SACA,OACI,oBAAC,gBAAD;EAAgB,OAAO,gBAAgB;EACnC,UAAA,qBAAC,OAAD;GAAK,WAAW,GAAG,WAAW;GAA9B,UAAA,CACI,oBAAC,MAAD;IAAM,SAAQ;IAAQ,WAAU;IAAQ,SAAA;GAAS,CAAA,GACjD,oBAAC,eAAe,OAAhB,EAAsB,cAAa,UAAW,CAAA,CAC7C;;CACO,CAAA;CAGxB,MAAM,UAAU;CAEhB,IAAI,QACA,OACI,qBAAC,OAAD;EAAK,WAAW,GAAG,WAAW;EAA9B,UAAA,CACI,oBAAC,OAAD;GACI,GAAI;GACJ,WAAU;GAET,UAAA;EACE,CAAA,GACP,oBAAC,OAAD;GAAK,WAAU;GACV,UAAA;EACA,CAAA,CACJ;;CAIb,OACI,oBAAC,OAAD;EACI,GAAI;EACJ,WAAW,GAAG,WAAW;EAExB,UAAA;CACE,CAAA;AAEf;AAEA,SAAgB,WAAW,OAAiE;CACxF,OAAO,oBAAC,QAAD;EAAQ,GAAI;EAAO,MAAK;EAAS,SAAQ;CAAU,CAAA;AAC9D;AAEA,SAAgB,WAAW,EAAE,UAAU,OAAO,OAAO,SAAiE;CAClH,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CAEtC,OACI,qBAAC,WAAD;EAAS,WAAU;EAAa,WAAW,UAAU,QAAQ,MAAM,cAAc,IAAI;EAArF,UAAA,CACI,qBAAC,WAAD;GAAS,WAAU;GAAnB,UAAA,CACI,oBAAC,QAAD;IAAM,eAAY;IAAO,WAAU;IAC/B,UAAA,oBAAC,iBAAD,CAAkB,CAAA;GAChB,CAAA,GACL,KACI;EACT,CAAA,GAAA,oBAAC,OAAD;GAAK,WAAU;GACV,UAAA,CAAC,QAAQ,OAAO,WAAW;EAC3B,CAAA,CACA;;AAEjB"}
+{"version":3,"file":"FormSection.js","names":[],"sources":["../../src/forms/FormSection.tsx"],"sourcesContent":["import { ChevronDownIcon } from 'lucide-react';\nimport { type ComponentProps, type ReactNode, type SyntheticEvent, useId, useState } from 'react';\n\nimport { Button, type ButtonProps } from '../actions/Button';\nimport { Badge } from '../display/Badge';\nimport { InsetPanel } from '../display/InsetPanel';\nimport { SkeletonLoader } from '../feedback/SkeletonLoader';\nimport { Stack } from '../layout/Flow';\nimport { HelpTip } from '../overlays/HelpTip';\nimport { Heading, Text } from '../typography/Typography';\nimport { Field, type FieldProps } from './Field';\n\ntype DataAttributes = { [key: `data-${string}`]: string | undefined };\n\nconst contentSpacing = 'px-4 py-3.5 sm:px-5';\nconst rowClasses = `grid min-w-0 gap-x-6 gap-y-3 sm:items-center ${contentSpacing}`;\n\nexport function FormContent({ children }: { children: ReactNode }) {\n    return (\n        <Stack space=\"group\" className={contentSpacing}>\n            {children}\n        </Stack>\n    );\n}\n\nexport function FormStack({ children }: { children: ReactNode }) {\n    return <Stack space=\"page\">{children}</Stack>;\n}\n\ninterface FormSectionProps {\n    action?: ReactNode;\n    badges?: ReactNode;\n    children: ReactNode;\n    description?: string;\n    loading?: boolean;\n    loadingLabel?: string;\n    presentation?: 'default';\n    title: ReactNode;\n}\n\n/** A dense tool's settings group: its title (with an optional help popover) and description over the content as\n *  given, such as one or more settings panels and their notes. */\ninterface DenseFormSectionProps extends DataAttributes {\n    presentation: 'dense';\n    title?: ReactNode;\n    /** Explains the group in a popover from a help button after the title; `helpLabel` names that button. */\n    help?: ReactNode;\n    helpLabel?: string;\n    description?: ReactNode;\n    /** Names the group when its title doesn't, or when it has none. */\n    'aria-label'?: string;\n    children?: ReactNode;\n}\n\nexport function FormSection(props: FormSectionProps | DenseFormSectionProps) {\n    if (props.presentation === 'dense') return <DenseFormSection {...props} />;\n\n    return <PanelFormSection {...props} />;\n}\n\nfunction DenseFormSection({\n    presentation: _presentation,\n    title,\n    help,\n    helpLabel,\n    description,\n    'aria-label': label,\n    children,\n    ...data\n}: DenseFormSectionProps) {\n    const titleId = useId();\n\n    return (\n        <section\n            {...data}\n            aria-label={label}\n            aria-labelledby={label || !title ? undefined : titleId}\n            className=\"grid min-w-0 gap-3\"\n        >\n            {(title || description) && (\n                <div>\n                    {title && (\n                        <h3 id={titleId} className=\"m-0 flex items-center gap-1.5 text-[13px] font-semibold\">\n                            {title}\n                            {help && (\n                                <HelpTip label={helpLabel ?? (typeof title === 'string' ? title : '')}>{help}</HelpTip>\n                            )}\n                        </h3>\n                    )}\n                    {description && <p className=\"text-base-700 m-0 mt-0.5 text-xs\">{description}</p>}\n                </div>\n            )}\n            {children}\n        </section>\n    );\n}\n\nfunction PanelFormSection({\n    action,\n    badges,\n    children,\n    description,\n    loading = false,\n    loadingLabel,\n    title,\n}: FormSectionProps) {\n    const titleId = useId();\n    const content = (\n        <section aria-labelledby={titleId}>\n            <div className=\"flex min-h-5 items-center justify-between gap-3\">\n                <div className=\"flex min-w-0 flex-wrap items-center gap-2\">\n                    <Heading id={titleId} as=\"h3\" className=\"text-base-700\" variant=\"label\">\n                        {title}\n                    </Heading>\n                    {badges}\n                </div>\n                {action}\n            </div>\n            <div className=\"mt-3\">\n                <InsetPanel presentation=\"settings\">\n                    {description ? (\n                        <FormContent>\n                            <Text variant=\"caption\" tone=\"muted\">\n                                {description}\n                            </Text>\n                        </FormContent>\n                    ) : null}\n                    {children}\n                </InsetPanel>\n            </div>\n        </section>\n    );\n\n    return loading ? (\n        <SkeletonLoader label={loadingLabel ?? (typeof title === 'string' ? title : '')}>{content}</SkeletonLoader>\n    ) : (\n        content\n    );\n}\n\ninterface FormRowColumnsProps {\n    badges?: ReactNode;\n    children: ReactNode;\n    description: string;\n    /** The row's element id, for linking or scrolling to it; a row with one can take focus when it is opened. */\n    id?: string;\n    label: ReactNode;\n    layout?: 'columns';\n}\n\n/** A dense tool's settings row: the label (with an optional help popover) and description, then its controls flowing\n *  beside them and wrapping under them when they don't fit, then content below and an error. */\ninterface FormRowFlowProps extends DataAttributes {\n    layout: 'flow';\n    label: ReactNode;\n    /** Explains the setting in a popover from a help button after the label; `helpLabel` names that button. */\n    help?: ReactNode;\n    helpLabel?: string;\n    description?: ReactNode;\n    children?: ReactNode;\n    /** Full-width content under the label and controls, such as a list the setting governs. */\n    below?: ReactNode;\n    error?: string | undefined;\n    /** The error's element id, for a control's aria-describedby. */\n    errorId?: string;\n}\n\ntype FormRowProps = FormRowColumnsProps | FormRowFlowProps;\n\nexport function FormRow(props: FormRowProps) {\n    if (props.layout === 'flow') return <FormRowFlow {...props} />;\n\n    const { badges, children, description, id, label } = props;\n\n    return (\n        <div\n            id={id}\n            tabIndex={id ? -1 : undefined}\n            className={`${rowClasses} sm:grid-cols-[minmax(0,1fr)_13rem] sm:has-[[role=switch]]:grid-cols-[minmax(0,1fr)_auto]`}\n        >\n            <Stack space=\"tight\" className=\"min-w-0\">\n                <div className=\"flex flex-wrap items-center gap-x-2 gap-y-1.5\">\n                    <Text as=\"span\" variant=\"label\">\n                        {label}\n                    </Text>\n                    {badges}\n                </div>\n                <Text variant=\"caption\" tone=\"muted\">\n                    {description}\n                </Text>\n            </Stack>\n            <div className=\"min-w-0 sm:flex sm:justify-end [&>[role=status]]:w-full\">{children}</div>\n        </div>\n    );\n}\n\nfunction FormRowFlow({\n    layout: _layout,\n    label,\n    help,\n    helpLabel,\n    description,\n    children,\n    below,\n    error,\n    errorId,\n    ...data\n}: FormRowFlowProps) {\n    const fallbackErrorId = useId();\n\n    return (\n        <div {...data} className=\"settings-row grid min-w-0 gap-2 px-4 py-3\">\n            <div className=\"flex min-w-0 flex-wrap items-center gap-x-6 gap-y-2\">\n                <div className=\"min-w-32 flex-1\">\n                    <div className=\"settings-row-title flex min-w-0 items-center gap-1.5 text-[13px] font-medium wrap-anywhere\">\n                        {label}\n                        {help && (\n                            <HelpTip label={helpLabel ?? (typeof label === 'string' ? label : '')}>{help}</HelpTip>\n                        )}\n                    </div>\n                    {description && <div className=\"text-base-700 text-xs wrap-anywhere\">{description}</div>}\n                </div>\n                {children && (\n                    <div className=\"settings-row-control flex max-w-full min-w-0 flex-wrap items-center gap-2 sm:max-w-[60%] [&_button]:max-w-full [&>span]:max-w-full\">\n                        {children}\n                    </div>\n                )}\n            </div>\n            {below}\n            {error && (\n                <p id={errorId ?? fallbackErrorId} role=\"alert\" className=\"m-0 text-xs text-(--lar-danger-text)\">\n                    {error}\n                </p>\n            )}\n        </div>\n    );\n}\n\n/** A value and its unit beside it in a row's controls, such as a number field and \"days\". */\nexport function FormUnit({ children, unit }: { children: ReactNode; unit: ReactNode }) {\n    return (\n        <span className=\"flex items-center gap-2 text-sm [&_input]:w-20\">\n            {children}\n            {unit}\n        </span>\n    );\n}\n\ntype FormFieldProps = Omit<FieldProps, 'children' | 'className'> & { action?: ReactNode } & (\n        | { children: ReactNode; loading?: false; loadingLabel?: never }\n        | { children?: never; loading: true; loadingLabel: string }\n    );\n\nexport function FormField({ action, children, loading = false, loadingLabel, ...props }: FormFieldProps) {\n    if (loading)\n        return (\n            <SkeletonLoader label={loadingLabel ?? ''}>\n                <div className={`${rowClasses} sm:grid-cols-[9rem_minmax(0,1fr)]`}>\n                    <Text variant=\"label\" className=\"w-3/4\" loading />\n                    <SkeletonLoader.Shape presentation=\"control\" />\n                </div>\n            </SkeletonLoader>\n        );\n\n    const content = children;\n\n    if (action) {\n        return (\n            <div className={`${rowClasses} grid-cols-[minmax(0,1fr)_auto] sm:grid-cols-[9rem_minmax(0,1fr)_auto]`}>\n                <Field\n                    {...props}\n                    className=\"contents [&>div]:min-w-0 [&>div:first-child]:col-span-2 [&>div:first-child]:mb-0 sm:[&>div:first-child]:col-span-1 [&>p]:col-span-2 [&>p]:mt-0 sm:[&>p]:col-start-2\"\n                >\n                    {content}\n                </Field>\n                <div className=\"col-start-2 row-start-2 flex items-center gap-2 sm:col-start-3 sm:row-start-1\">\n                    {action}\n                </div>\n            </div>\n        );\n    }\n\n    return (\n        <Field\n            {...props}\n            className={`${rowClasses} sm:grid-cols-[9rem_minmax(0,1fr)] [&>div]:min-w-0 [&>div:first-child]:mb-0 [&>p]:mt-0 sm:[&>p]:col-start-2`}\n        >\n            {content}\n        </Field>\n    );\n}\n\nexport function FormAction(props: Omit<ButtonProps, 'type' | 'size' | 'variant' | 'color'>) {\n    return <Button {...props} type=\"button\" variant=\"subtle\" />;\n}\n\nexport function Disclosure({\n    children,\n    label,\n    lazy = false,\n    presentation = 'note',\n    defaultOpen = false,\n    badge,\n    onOpenChange,\n    ...data\n}: {\n    children: ReactNode;\n    label: string;\n    lazy?: boolean;\n    /** `note` folds small muted text behind a chevron; `section` folds a section's own content, such as an earlier\n     *  version of a text, behind a muted label in the body size; `group` folds a form's optional group behind its\n     *  heading, such as optional settings; `framed` folds a short list in a frame, such as entries that can't be\n     *  picked. */\n    presentation?: 'note' | 'section' | 'group' | 'framed';\n    /** Starts open, such as a group whose kept answers may need a look. */\n    defaultOpen?: boolean;\n    /** A `group`'s badge after its heading, such as \"Optional\". */\n    badge?: string | undefined;\n    /** Hears each time it opens or closes, such as to read what it shows once it opens. */\n    onOpenChange?: (open: boolean) => void;\n} & DataAttributes) {\n    const [open, setOpen] = useState(defaultOpen);\n    const shown = !lazy || open ? children : null;\n    const toggle = (event: SyntheticEvent<HTMLDetailsElement>) => {\n        setOpen(event.currentTarget.open);\n        onOpenChange?.(event.currentTarget.open);\n    };\n\n    if (presentation === 'group')\n        return (\n            <details {...data} open={open} onToggle={toggle} className=\"min-w-0\">\n                <summary className=\"cursor-pointer text-[13px] font-semibold\">\n                    {label}\n                    {badge && (\n                        <>\n                            {' '}\n                            <Badge className=\"ms-1\">{badge}</Badge>\n                        </>\n                    )}\n                </summary>\n                {shown && <div className=\"mt-3 grid min-w-0 gap-3\">{shown}</div>}\n            </details>\n        );\n\n    if (presentation === 'framed')\n        return (\n            <details {...data} open={open} onToggle={toggle} className=\"min-w-0 rounded-lg border px-3 py-2\">\n                <summary className=\"cursor-pointer text-sm font-medium\">{label}</summary>\n                <div className=\"mt-2\">{shown}</div>\n            </details>\n        );\n\n    if (presentation === 'section')\n        return (\n            <details {...data} className=\"grid min-w-0 gap-2\" onToggle={toggle}>\n                <summary className=\"text-base-700 cursor-pointer text-sm\">{label}</summary>\n                <div className=\"pt-2\">{shown}</div>\n            </details>\n        );\n\n    return (\n        <details {...data} className=\"group px-1\" onToggle={toggle}>\n            <summary className=\"text-base-700 hover:text-base-content focus-visible:outline-primary flex w-fit cursor-pointer list-none items-center gap-1.5 rounded py-1 text-xs focus-visible:outline-2 focus-visible:outline-offset-2 [&::-webkit-details-marker]:hidden\">\n                <span aria-hidden=\"true\" className=\"-rotate-90 transition-transform group-open:rotate-0 [&>svg]:size-3\">\n                    <ChevronDownIcon />\n                </span>\n                {label}\n            </summary>\n            <div className=\"text-base-700 mt-2 space-y-2 text-xs leading-relaxed\">{shown}</div>\n        </details>\n    );\n}\n\ntype FormFieldsetProps = Omit<ComponentProps<'fieldset'>, 'style'> & {\n    /** The legend over the group. */\n    legend?: ReactNode;\n    /** Names the group for assistive technology only, where what's around it already says what it is. */\n    hiddenLegend?: boolean;\n    /** `group` only groups and disables its fields, with no frame. */\n    presentation?: 'bordered' | 'group';\n};\n\n/** The form section's fieldset: a bordered group of controls under a legend, on the native fieldset, which also\n *  disables every control inside it. As a `group`, it only groups and disables its fields. */\nexport function FormFieldset({\n    legend,\n    hiddenLegend = false,\n    presentation = 'bordered',\n    className = '',\n    children,\n    ...props\n}: FormFieldsetProps) {\n    return (\n        <fieldset\n            className={`m-0 min-w-0 ${presentation === 'group' ? 'border-0 p-0' : 'border-base-300 mb-3 rounded-lg border px-3 pt-2 pb-0 [&>legend]:mb-2 [&>legend]:font-semibold'} ${className}`}\n            data-slot=\"fieldset\"\n            {...props}\n        >\n            {legend ? (\n                <legend\n                    className={hiddenLegend ? 'sr-only' : 'text-base-content p-0 text-sm leading-5 font-medium'}\n                    data-slot=\"fieldset-legend\"\n                >\n                    {legend}\n                </legend>\n            ) : null}\n            {children}\n        </fieldset>\n    );\n}\n"],"mappings":"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"}

package/dist/forms/HiddenField.d.ts

@@ -0,0 +1,6 @@
+/** A value a form submits that nobody edits in place, such as a pick made in a popover: a hidden field. */
+export declare function HiddenField({ name, value }: {
+  name: string;
+  value: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=HiddenField.d.ts.map

package/dist/forms/HiddenField.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+// src/forms/HiddenField.tsx
+/** A value a form submits that nobody edits in place, such as a pick made in a popover: a hidden field. */
+function HiddenField({ name, value }) {
+	return /* @__PURE__ */ jsx("input", {
+		type: "hidden",
+		name,
+		value
+	});
+}
+export { HiddenField };
+
+//# sourceMappingURL=HiddenField.js.map

package/dist/forms/HiddenField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HiddenField.js","names":[],"sources":["../../src/forms/HiddenField.tsx"],"sourcesContent":["/** A value a form submits that nobody edits in place, such as a pick made in a popover: a hidden field. */\nexport function HiddenField({ name, value }: { name: string; value: string }) {\n    return <input type=\"hidden\" name={name} value={value} />;\n}\n"],"mappings":";;;AACA,SAAgB,YAAY,EAAE,MAAM,SAA0C;CAC1E,OAAO,oBAAC,SAAD;EAAO,MAAK;EAAe;EAAa;CAAQ,CAAA;AAC3D"}

package/dist/forms/Input.d.ts

@@ -1,5 +1,15 @@
 import { InputProps } from "@ninna-ui/forms";
-type InputProps$1 = Omit<InputProps, 'fullWidth'>;
-declare const Input$1: import("react").ForwardRefExoticComponent<InputProps$1 & import("react").RefAttributes<HTMLInputElement>>;
+type InputProps$1 = Omit<InputProps, 'fullWidth'> & {
+  /** A `field` fills its container; `setting` is a settings row's 16rem text field, narrower where the row is; `short`
+   *  holds a few characters, such as a hex colour; `count` a small whole number; `title` is a document's title typed
+   *  in place, borderless in large semibold type, such as a new item's. */
+  presentation?: 'field' | 'setting' | 'short' | 'count' | 'title';
+};
+declare const Input$1: import("react").ForwardRefExoticComponent<Omit<InputProps, "fullWidth"> & {
+  /** A `field` fills its container; `setting` is a settings row's 16rem text field, narrower where the row is; `short`
+   *  holds a few characters, such as a hex colour; `count` a small whole number; `title` is a document's title typed
+   *  in place, borderless in large semibold type, such as a new item's. */
+  presentation?: 'field' | 'setting' | 'short' | 'count' | 'title';
+} & import("react").RefAttributes<HTMLInputElement>>;
 export { Input$1 as Input, InputProps$1 as InputProps };
 //# sourceMappingURL=Input.d.ts.map

package/dist/forms/Input.js

@@ -3,14 +3,21 @@ import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 import { Input } from "@ninna-ui/forms";
 // src/forms/Input.tsx
-const Input$1 = forwardRef(({ size = formControlDefaults.size, variant = formControlDefaults.variant, className, ...props }, ref) => /* @__PURE__ */ jsx(Input, {
+const presentations = {
+	field: "",
+	setting: "w-64 max-w-full",
+	short: "w-24",
+	count: "w-20",
+	title: "text-base-content w-full shrink-0 border-0 bg-transparent p-0 text-xl font-semibold tracking-tight outline-none placeholder:font-medium placeholder:text-(--muted-foreground)"
+};
+const Input$1 = forwardRef(({ size = formControlDefaults.size, variant = formControlDefaults.variant, presentation = "field", className, ...props }, ref) => /* @__PURE__ */ jsx(Input, {
 	ref,
 	color: formControlDefaults.color,
 	...props,
 	fullWidth: true,
 	size,
-	variant,
-	className: `${variant === "filled" ? formControlClasses : ""} ${className ?? ""}`
+	variant: presentation === "title" ? "unstyled" : variant,
+	className: `${variant === "filled" && presentation !== "title" ? formControlClasses : ""} ${presentations[presentation]} ${className ?? ""}`
 }));
 Input$1.displayName = "Input";
 export { Input$1 as Input };

package/dist/forms/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","names":["Input","NinnaInput"],"sources":["../../src/forms/Input.tsx"],"sourcesContent":["import { Input as NinnaInput, type InputProps as NinnaInputProps } from '@ninna-ui/forms';\nimport { forwardRef } from 'react';\n\nimport { formControlClasses, formControlDefaults } from './FormControlStyles';\n\nexport type InputProps = Omit<NinnaInputProps, 'fullWidth'>;\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(\n    ({ size = formControlDefaults.size, variant = formControlDefaults.variant, className, ...props }, ref) => (\n        <NinnaInput\n            ref={ref}\n            color={formControlDefaults.color}\n            {...props}\n            fullWidth\n            size={size}\n            variant={variant}\n            className={`${variant === 'filled' ? formControlClasses : ''} ${className ?? ''}`}\n        />\n    ),\n);\n\nInput.displayName = 'Input';\n"],"mappings":";;;;;AAOA,MAAaA,UAAQ,YAChB,EAAE,OAAO,oBAAoB,MAAM,UAAU,oBAAoB,SAAS,WAAW,GAAG,SAAS,QAC9F,oBAACC,OAAD;CACS;CACL,OAAO,oBAAoB;CAC3B,GAAI;CACJ,WAAA;CACM;CACG;CACT,WAAW,GAAG,YAAY,WAAW,qBAAqB,GAAG,GAAG,aAAa;AAChF,CAAA,CAET;AAEA,QAAM,cAAc"}
+{"version":3,"file":"Input.js","names":["Input","NinnaInput"],"sources":["../../src/forms/Input.tsx"],"sourcesContent":["import { Input as NinnaInput, type InputProps as NinnaInputProps } from '@ninna-ui/forms';\nimport { forwardRef } from 'react';\n\nimport { formControlClasses, formControlDefaults } from './FormControlStyles';\n\nexport type InputProps = Omit<NinnaInputProps, 'fullWidth'> & {\n    /** A `field` fills its container; `setting` is a settings row's 16rem text field, narrower where the row is; `short`\n     *  holds a few characters, such as a hex colour; `count` a small whole number; `title` is a document's title typed\n     *  in place, borderless in large semibold type, such as a new item's. */\n    presentation?: 'field' | 'setting' | 'short' | 'count' | 'title';\n};\n\nconst presentations = {\n    field: '',\n    setting: 'w-64 max-w-full',\n    short: 'w-24',\n    count: 'w-20',\n    title: 'text-base-content w-full shrink-0 border-0 bg-transparent p-0 text-xl font-semibold tracking-tight outline-none placeholder:font-medium placeholder:text-(--muted-foreground)',\n} as const;\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(\n    (\n        {\n            size = formControlDefaults.size,\n            variant = formControlDefaults.variant,\n            presentation = 'field',\n            className,\n            ...props\n        },\n        ref,\n    ) => (\n        <NinnaInput\n            ref={ref}\n            color={formControlDefaults.color}\n            {...props}\n            fullWidth\n            size={size}\n            variant={presentation === 'title' ? 'unstyled' : variant}\n            className={`${variant === 'filled' && presentation !== 'title' ? formControlClasses : ''} ${presentations[presentation]} ${className ?? ''}`}\n        />\n    ),\n);\n\nInput.displayName = 'Input';\n"],"mappings":";;;;;AAYA,MAAM,gBAAgB;CAClB,OAAO;CACP,SAAS;CACT,OAAO;CACP,OAAO;CACP,OAAO;AACX;AAEA,MAAaA,UAAQ,YAEb,EACI,OAAO,oBAAoB,MAC3B,UAAU,oBAAoB,SAC9B,eAAe,SACf,WACA,GAAG,SAEP,QAEA,oBAACC,OAAD;CACS;CACL,OAAO,oBAAoB;CAC3B,GAAI;CACJ,WAAA;CACM;CACN,SAAS,iBAAiB,UAAU,aAAa;CACjD,WAAW,GAAG,YAAY,YAAY,iBAAiB,UAAU,qBAAqB,GAAG,GAAG,cAAc,cAAc,GAAG,aAAa;AAC3I,CAAA,CAET;AAEA,QAAM,cAAc"}

package/dist/forms/LabelPicker.d.ts

@@ -0,0 +1,43 @@
+export interface LabelChoice {
+  name: string;
+  /** A CSS colour; a tracker with no label colours gives none. */
+  color?: string | undefined;
+  description?: string | undefined;
+}
+/** Lets a typed name no choice has become a new label. */
+export interface LabelCreation {
+  /** Why this person can't add new labels at all, or null when they can. */
+  refused: string | null;
+  /** Why this name can't be a label, or null when it can. */
+  problem: (name: string) => string | null;
+  /** What adding one does, under the list. */
+  note: string;
+  /** The button that adds `name`, such as `Create "name"`. */
+  createLabel: (name: string) => string;
+  onCreate: (name: string) => void;
+}
+interface LabelPickerProps {
+  choices: readonly LabelChoice[];
+  picked: readonly string[];
+  onToggle: (name: string) => void;
+  /** The filter field's accessible name and its placeholder. */
+  filterLabel: string;
+  placeholder: string;
+  /** Shown when the filter matches nothing. */
+  noMatchLabel: string;
+  /** Choices shown ticked or not but not changeable here, each marked with `lockedNote`. */
+  locked?: readonly string[];
+  lockedNote?: string;
+  busy?: boolean;
+  create?: LabelCreation;
+  /** Whether two names are the same label; trackers compare them ignoring case. */
+  same?: (a: string, b: string) => boolean;
+}
+/**
+ * A searchable checklist of labels, with each label's colour and description. It holds only its search text: the
+ * caller gives the choices, what is picked and what a toggle does, so it reads and writes whichever way its surface
+ * needs. With `create`, Enter or the create button lets a typed name no choice has in.
+ */
+export declare function LabelPicker({ choices, picked, onToggle, filterLabel, placeholder, noMatchLabel, locked, lockedNote, busy, create, same }: LabelPickerProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=LabelPicker.d.ts.map

package/dist/forms/LabelPicker.js

@@ -0,0 +1,107 @@
+import { Button } from "../actions/Button.js";
+import { StatusIndicator } from "../feedback/StatusIndicator.js";
+import { Checkbox } from "./Checkbox.js";
+import { Input } from "./Input.js";
+import { useState } from "react";
+import { PlusIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/forms/LabelPicker.tsx
+const ignoringCase = (a, b) => a.toLowerCase() === b.toLowerCase();
+/**
+* A searchable checklist of labels, with each label's colour and description. It holds only its search text: the
+* caller gives the choices, what is picked and what a toggle does, so it reads and writes whichever way its surface
+* needs. With `create`, Enter or the create button lets a typed name no choice has in.
+*/
+function LabelPicker({ choices, picked, onToggle, filterLabel, placeholder, noMatchLabel, locked = [], lockedNote, busy = false, create, same = ignoringCase }) {
+	const [query, setQuery] = useState("");
+	const typed = query.trim();
+	const hits = choices.filter(({ name }) => name.toLowerCase().includes(typed.toLowerCase()));
+	const fresh = !!create && !!typed && !choices.some(({ name }) => same(name, typed));
+	const refusal = fresh ? create.refused ?? create.problem(typed) : null;
+	const add = () => {
+		create?.onCreate(typed);
+		setQuery("");
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "grid w-72 gap-2",
+		"data-label-picker": true,
+		"aria-busy": busy,
+		children: [
+			/* @__PURE__ */ jsx(Input, {
+				autoFocus: true,
+				placeholder,
+				"aria-label": filterLabel,
+				value: query,
+				onChange: (e) => setQuery(e.target.value),
+				onKeyDown: (e) => {
+					if (e.key !== "Enter") return;
+					e.preventDefault();
+					if (fresh && !refusal) add();
+				}
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "grid max-h-56 gap-0.5 overflow-y-auto",
+				children: [hits.map(({ name, color, description }) => {
+					const fixed = locked.some((label) => same(label, name));
+					return /* @__PURE__ */ jsxs("label", {
+						"data-label-choice": true,
+						className: "hover:bg-base-200 flex cursor-pointer items-start gap-2 rounded-md px-1.5 py-1 text-xs",
+						children: [
+							/* @__PURE__ */ jsx(Checkbox, {
+								checked: picked.some((label) => same(label, name)),
+								disabled: fixed,
+								onChange: () => onToggle(name)
+							}),
+							color && /* @__PURE__ */ jsx("span", {
+								"data-label-dot": true,
+								className: "mt-1 flex",
+								children: /* @__PURE__ */ jsx(StatusIndicator, {
+									tone: "neutral",
+									labelColor: color
+								})
+							}),
+							/* @__PURE__ */ jsxs("span", {
+								className: "min-w-0 flex-1",
+								children: [/* @__PURE__ */ jsxs("span", {
+									className: "block wrap-anywhere",
+									children: [name, fixed && lockedNote && /* @__PURE__ */ jsxs("span", {
+										className: "text-base-700",
+										children: [" · ", lockedNote]
+									})]
+								}), description && /* @__PURE__ */ jsx("span", {
+									className: "text-base-700 block text-[11px]",
+									children: description
+								})]
+							})
+						]
+					}, name);
+				}), !hits.length && !fresh && /* @__PURE__ */ jsx("p", {
+					className: "text-base-700 m-0 p-1.5 text-[11px]",
+					children: noMatchLabel
+				})]
+			}),
+			fresh && !refusal && /* @__PURE__ */ jsx("span", {
+				className: "justify-self-start",
+				children: /* @__PURE__ */ jsx(Button, {
+					variant: "secondary",
+					compact: true,
+					leftIcon: /* @__PURE__ */ jsx(PlusIcon, {}),
+					onClick: add,
+					children: create.createLabel(typed)
+				})
+			}),
+			refusal && /* @__PURE__ */ jsx("p", {
+				role: "alert",
+				className: "text-base-700 m-0 text-[11px]",
+				children: refusal
+			}),
+			create && !create.refused && /* @__PURE__ */ jsx("p", {
+				className: "text-base-700 m-0 text-[11px]",
+				children: create.note
+			})
+		]
+	});
+}
+export { LabelPicker };
+
+//# sourceMappingURL=LabelPicker.js.map

package/dist/forms/LabelPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LabelPicker.js","names":[],"sources":["../../src/forms/LabelPicker.tsx"],"sourcesContent":["import { PlusIcon } from 'lucide-react';\nimport { useState } from 'react';\n\nimport { Button } from '../actions/Button';\nimport { StatusIndicator } from '../feedback/StatusIndicator';\nimport { Checkbox } from './Checkbox';\nimport { Input } from './Input';\n\nexport interface LabelChoice {\n    name: string;\n    /** A CSS colour; a tracker with no label colours gives none. */\n    color?: string | undefined;\n    description?: string | undefined;\n}\n\n/** Lets a typed name no choice has become a new label. */\nexport interface LabelCreation {\n    /** Why this person can't add new labels at all, or null when they can. */\n    refused: string | null;\n    /** Why this name can't be a label, or null when it can. */\n    problem: (name: string) => string | null;\n    /** What adding one does, under the list. */\n    note: string;\n    /** The button that adds `name`, such as `Create \"name\"`. */\n    createLabel: (name: string) => string;\n    onCreate: (name: string) => void;\n}\n\ninterface LabelPickerProps {\n    choices: readonly LabelChoice[];\n    picked: readonly string[];\n    onToggle: (name: string) => void;\n    /** The filter field's accessible name and its placeholder. */\n    filterLabel: string;\n    placeholder: string;\n    /** Shown when the filter matches nothing. */\n    noMatchLabel: string;\n    /** Choices shown ticked or not but not changeable here, each marked with `lockedNote`. */\n    locked?: readonly string[];\n    lockedNote?: string;\n    busy?: boolean;\n    create?: LabelCreation;\n    /** Whether two names are the same label; trackers compare them ignoring case. */\n    same?: (a: string, b: string) => boolean;\n}\n\nconst ignoringCase = (a: string, b: string) => a.toLowerCase() === b.toLowerCase();\n\n/**\n * A searchable checklist of labels, with each label's colour and description. It holds only its search text: the\n * caller gives the choices, what is picked and what a toggle does, so it reads and writes whichever way its surface\n * needs. With `create`, Enter or the create button lets a typed name no choice has in.\n */\nexport function LabelPicker({\n    choices,\n    picked,\n    onToggle,\n    filterLabel,\n    placeholder,\n    noMatchLabel,\n    locked = [],\n    lockedNote,\n    busy = false,\n    create,\n    same = ignoringCase,\n}: LabelPickerProps) {\n    const [query, setQuery] = useState('');\n    const typed = query.trim();\n    const hits = choices.filter(({ name }) => name.toLowerCase().includes(typed.toLowerCase()));\n    const fresh = !!create && !!typed && !choices.some(({ name }) => same(name, typed));\n    const refusal = fresh ? (create.refused ?? create.problem(typed)) : null;\n    const add = () => {\n        create?.onCreate(typed);\n        setQuery('');\n    };\n\n    return (\n        <div className=\"grid w-72 gap-2\" data-label-picker aria-busy={busy}>\n            <Input\n                autoFocus\n                placeholder={placeholder}\n                aria-label={filterLabel}\n                value={query}\n                onChange={(e) => setQuery(e.target.value)}\n                onKeyDown={(e) => {\n                    if (e.key !== 'Enter') return;\n\n                    e.preventDefault();\n\n                    if (fresh && !refusal) add();\n                }}\n            />\n            <div className=\"grid max-h-56 gap-0.5 overflow-y-auto\">\n                {hits.map(({ name, color, description }) => {\n                    const fixed = locked.some((label) => same(label, name));\n\n                    return (\n                        <label\n                            key={name}\n                            data-label-choice\n                            className=\"hover:bg-base-200 flex cursor-pointer items-start gap-2 rounded-md px-1.5 py-1 text-xs\"\n                        >\n                            <Checkbox\n                                checked={picked.some((label) => same(label, name))}\n                                disabled={fixed}\n                                onChange={() => onToggle(name)}\n                            />\n                            {color && (\n                                <span data-label-dot className=\"mt-1 flex\">\n                                    <StatusIndicator tone=\"neutral\" labelColor={color} />\n                                </span>\n                            )}\n                            <span className=\"min-w-0 flex-1\">\n                                <span className=\"block wrap-anywhere\">\n                                    {name}\n                                    {fixed && lockedNote && <span className=\"text-base-700\"> · {lockedNote}</span>}\n                                </span>\n                                {description && <span className=\"text-base-700 block text-[11px]\">{description}</span>}\n                            </span>\n                        </label>\n                    );\n                })}\n                {!hits.length && !fresh && <p className=\"text-base-700 m-0 p-1.5 text-[11px]\">{noMatchLabel}</p>}\n            </div>\n            {fresh && !refusal && (\n                <span className=\"justify-self-start\">\n                    <Button variant=\"secondary\" compact leftIcon={<PlusIcon />} onClick={add}>\n                        {create.createLabel(typed)}\n                    </Button>\n                </span>\n            )}\n            {refusal && (\n                <p role=\"alert\" className=\"text-base-700 m-0 text-[11px]\">\n                    {refusal}\n                </p>\n            )}\n            {create && !create.refused && <p className=\"text-base-700 m-0 text-[11px]\">{create.note}</p>}\n        </div>\n    );\n}\n"],"mappings":";;;;;;;;AA8CA,MAAM,gBAAgB,GAAW,MAAc,EAAE,YAAY,MAAM,EAAE,YAAY;;;;;;AAOjF,SAAgB,YAAY,EACxB,SACA,QACA,UACA,aACA,aACA,cACA,SAAS,CAAC,GACV,YACA,OAAO,OACP,QACA,OAAO,gBACU;CACjB,MAAM,CAAC,OAAO,YAAY,SAAS,EAAE;CACrC,MAAM,QAAQ,MAAM,KAAK;CACzB,MAAM,OAAO,QAAQ,QAAQ,EAAE,WAAW,KAAK,YAAY,CAAC,CAAC,SAAS,MAAM,YAAY,CAAC,CAAC;CAC1F,MAAM,QAAQ,CAAC,CAAC,UAAU,CAAC,CAAC,SAAS,CAAC,QAAQ,MAAM,EAAE,WAAW,KAAK,MAAM,KAAK,CAAC;CAClF,MAAM,UAAU,QAAS,OAAO,WAAW,OAAO,QAAQ,KAAK,IAAK;CACpE,MAAM,YAAY;EACd,QAAQ,SAAS,KAAK;EACtB,SAAS,EAAE;CACf;CAEA,OACI,qBAAC,OAAD;EAAK,WAAU;EAAkB,qBAAA;EAAkB,aAAW;EAA9D,UAAA;GACI,oBAAC,OAAD;IACI,WAAA;IACa;IACb,cAAY;IACZ,OAAO;IACP,WAAW,MAAM,SAAS,EAAE,OAAO,KAAK;IACxC,YAAY,MAAM;KACd,IAAI,EAAE,QAAQ,SAAS;KAEvB,EAAE,eAAe;KAEjB,IAAI,SAAS,CAAC,SAAS,IAAI;IAC/B;GACH,CAAA;GACD,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACK,KAAK,KAAK,EAAE,MAAM,OAAO,kBAAkB;KACxC,MAAM,QAAQ,OAAO,MAAM,UAAU,KAAK,OAAO,IAAI,CAAC;KAEtD,OACI,qBAAC,SAAD;MAEI,qBAAA;MACA,WAAU;MAHd,UAAA;OAKI,oBAAC,UAAD;QACI,SAAS,OAAO,MAAM,UAAU,KAAK,OAAO,IAAI,CAAC;QACjD,UAAU;QACV,gBAAgB,SAAS,IAAI;OAChC,CAAA;OACA,SACG,oBAAC,QAAD;QAAM,kBAAA;QAAe,WAAU;QAC3B,UAAA,oBAAC,iBAAD;SAAiB,MAAK;SAAU,YAAY;QAAQ,CAAA;OAClD,CAAA;OAEV,qBAAC,QAAD;QAAM,WAAU;QAAhB,UAAA,CACI,qBAAC,QAAD;SAAM,WAAU;SAAhB,UAAA,CACK,MACA,SAAS,cAAc,qBAAC,QAAD;UAAM,WAAU;UAAhB,UAAA,CAAgC,OAAI,UAAiB;SAC3E,CAAA,CAAA;QACL,CAAA,GAAA,eAAe,oBAAC,QAAD;SAAM,WAAU;SAAmC,UAAA;QAAkB,CAAA,CACnF;;MACH;KArBE,GAAA,IAqBF;IAEf,CAAC,GACA,CAAC,KAAK,UAAU,CAAC,SAAS,oBAAC,KAAD;KAAG,WAAU;KAAuC,UAAA;IAAgB,CAAA,CAC9F;;GACJ,SAAS,CAAC,WACP,oBAAC,QAAD;IAAM,WAAU;IACZ,UAAA,oBAAC,QAAD;KAAQ,SAAQ;KAAY,SAAA;KAAQ,UAAU,oBAAC,UAAD,CAAW,CAAA;KAAG,SAAS;KAChE,UAAA,OAAO,YAAY,KAAK;IACrB,CAAA;GACN,CAAA;GAET,WACG,oBAAC,KAAD;IAAG,MAAK;IAAQ,WAAU;IACrB,UAAA;GACF,CAAA;GAEN,UAAU,CAAC,OAAO,WAAW,oBAAC,KAAD;IAAG,WAAU;IAAiC,UAAA,OAAO;GAAQ,CAAA;EAC1F;;AAEb"}

package/dist/forms/MarkdownEditor.d.ts

@@ -0,0 +1,21 @@
+import { RichTextFormat } from "../display/RichText.js";
+interface MarkdownEditorProps {
+  /** The Markdown it starts from; later changes to it are ignored. */
+  value: string;
+  /** How `value` is written; the editor reports Markdown either way. */
+  format?: RichTextFormat;
+  onChange: (markdown: string) => void;
+  label: string;
+  placeholder: string;
+  /** Grows the editor into its parent's height, or, when 'wide', only while its container is 40rem wide or more and
+   *  otherwise with its text, uncapped, as its parent scrolls. Without it, it grows with its text up to a cap. */
+  fill?: boolean | 'wide';
+  disabled?: boolean;
+  autoFocus?: boolean;
+  /** Called with the Markdown the editor makes of `value`, before any edit. */
+  onBaseline?: (markdown: string) => void;
+}
+/** A rich text field that reads and reports Markdown, such as a ticket's description, with a formatting toolbar. */
+export declare function MarkdownEditor({ value, format, onChange, label, placeholder, fill, disabled, autoFocus, onBaseline }: MarkdownEditorProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=MarkdownEditor.d.ts.map