@tonycodes-ui/mortar 0.0.0-stage → 0.12.0

package/src/choice.tsx

@@ -0,0 +1,240 @@
+import { useState, type ReactNode } from "react";
+import {
+  Field,
+  Label,
+  Description,
+  Listbox as HeadlessListbox,
+  ListboxButton,
+  ListboxOptions,
+  ListboxOption,
+  Combobox as HeadlessCombobox,
+  ComboboxInput,
+  ComboboxButton,
+  ComboboxOptions,
+  ComboboxOption,
+} from "@headlessui/react";
+import { Check, ChevronDown } from "./icons.js";
+import { RequiredMark, componentRoot, cx } from "./internal.js";
+
+export interface ChoiceOption {
+  value: string;
+  label: string;
+  description?: string;
+  /** Avatar, icon or status dot shown before the label. */
+  leading?: ReactNode;
+  disabled?: boolean;
+}
+
+interface ChoiceProps {
+  label: string;
+  options: ChoiceOption[];
+  value: string | null;
+  onChange: (value: string | null) => void;
+  placeholder?: string;
+  hint?: string;
+  /** Marks the field invalid; the message is announced when it appears. */
+  error?: string;
+  disabled?: boolean;
+  /** Marks the field required and adds a decorative marker to the label. */
+  required?: boolean;
+  /** On the field's root element. */
+  className?: string;
+}
+
+function OptionContent({ option }: { option: ChoiceOption }) {
+  return (
+    <>
+      {option.leading && (
+        <span className="m-choice-leading" aria-hidden="true">
+          {option.leading}
+        </span>
+      )}
+      <span className="m-choice-text">
+        <span>{option.label}</span>
+        {option.description && <small>{option.description}</small>}
+      </span>
+      <Check className="m-choice-check" />
+    </>
+  );
+}
+
+/** Label with the required marker; `spoken` adds "required" for controls that cannot carry aria-required. */
+function ChoiceLabel({
+  label,
+  required,
+  spoken = false,
+}: {
+  label: string;
+  required?: boolean;
+  spoken?: boolean;
+}) {
+  return (
+    <Label>
+      {label}
+      {required && <RequiredMark />}
+      {required && spoken && <span className="m-sr-only"> (required)</span>}
+    </Label>
+  );
+}
+
+/** The hint or error; the error is a separate alert so it is announced when it appears. */
+function Message({ hint, error }: { hint?: string; error?: string }) {
+  if (error)
+    return (
+      <Description key="error" className="m-error" role="alert">
+        {error}
+      </Description>
+    );
+  return hint ? <Description key="hint">{hint}</Description> : null;
+}
+
+/** Styled single select for rich options (avatars, descriptions). Use Select for plain native choices. */
+export function Listbox({
+  label,
+  options,
+  value,
+  onChange,
+  placeholder = "Select…",
+  hint,
+  error,
+  disabled = false,
+  required,
+  className,
+}: ChoiceProps) {
+  const selected = options.find((o) => o.value === value);
+  return (
+    <Field
+      {...componentRoot("Listbox")}
+      className={cx("m-field", className)}
+      disabled={disabled}
+    >
+      <ChoiceLabel label={label} required={required} spoken />
+      <HeadlessListbox value={value} onChange={onChange}>
+        <ListboxButton
+          className="m-choice-control"
+          aria-invalid={error ? true : undefined}
+        >
+          {selected ? (
+            <span className="m-choice-value">
+              {selected.leading && (
+                <span className="m-choice-leading" aria-hidden="true">
+                  {selected.leading}
+                </span>
+              )}
+              <span>{selected.label}</span>
+            </span>
+          ) : (
+            <span className="m-placeholder">{placeholder}</span>
+          )}
+          <ChevronDown />
+        </ListboxButton>
+        <ListboxOptions anchor="bottom start" className="m-choice-options">
+          {options.map((option) => (
+            <ListboxOption
+              key={option.value}
+              value={option.value}
+              disabled={option.disabled}
+              className="m-choice-option"
+            >
+              <OptionContent option={option} />
+            </ListboxOption>
+          ))}
+        </ListboxOptions>
+      </HeadlessListbox>
+      <Message hint={hint} error={error} />
+    </Field>
+  );
+}
+
+/** Searchable single select; filters options by label as the person types. */
+export function Combobox({
+  label,
+  options,
+  value,
+  onChange,
+  placeholder,
+  hint,
+  error,
+  disabled = false,
+  required,
+  className,
+  empty = { title: "No matches" },
+}: ChoiceProps & {
+  /** Shown and announced when the typed text matches no option. */
+  empty?: { title: string; description?: string; action?: ReactNode };
+}) {
+  const [query, setQuery] = useState("");
+  const needle = query.trim().toLowerCase();
+  const filtered = needle
+    ? options.filter((o) => o.label.toLowerCase().includes(needle))
+    : options;
+  const leading = query
+    ? undefined
+    : options.find((o) => o.value === value)?.leading;
+  const nothing = !!needle && !filtered.length;
+  return (
+    <Field
+      {...componentRoot("Combobox")}
+      className={cx("m-field", className)}
+      disabled={disabled}
+    >
+      <ChoiceLabel label={label} required={required} />
+      <HeadlessCombobox
+        value={value}
+        onChange={onChange}
+        onClose={() => setQuery("")}
+      >
+        <div className="m-combobox" data-leading={leading ? true : undefined}>
+          {leading && (
+            <span className="m-choice-leading" aria-hidden="true">
+              {leading}
+            </span>
+          )}
+          <ComboboxInput
+            className="m-choice-control"
+            placeholder={placeholder}
+            aria-invalid={error ? true : undefined}
+            aria-required={required || undefined}
+            displayValue={(v: string | null) =>
+              options.find((o) => o.value === v)?.label ?? ""
+            }
+            onChange={(event) => setQuery(event.target.value)}
+          />
+          <ComboboxButton
+            className="m-combobox-toggle"
+            aria-label={`Show ${label} options`}
+          >
+            <ChevronDown />
+          </ComboboxButton>
+        </div>
+        {filtered.length > 0 && (
+          <ComboboxOptions
+            anchor="bottom start"
+            className="m-choice-options m-combobox-options"
+          >
+            {filtered.map((option) => (
+              <ComboboxOption
+                key={option.value}
+                value={option.value}
+                disabled={option.disabled}
+                className="m-choice-option"
+              >
+                <OptionContent option={option} />
+              </ComboboxOption>
+            ))}
+          </ComboboxOptions>
+        )}
+      </HeadlessCombobox>
+      <p role="status" className={nothing ? undefined : "m-sr-only"}>
+        {nothing && (
+          <>
+            {empty.title}
+            {empty.description && <span> {empty.description}</span>}
+          </>
+        )}
+      </p>
+      {nothing && empty.action}
+      <Message hint={hint} error={error} />
+    </Field>
+  );
+}

package/src/composer.tsx

@@ -0,0 +1,158 @@
+import { useState, type ReactNode } from "react";
+import { Button, Tabs } from "./primitives.js";
+import { FieldFeedback, componentRoot, cx, useField } from "./internal.js";
+
+/** Characters left at which the count starts being announced. */
+const nearLimit = (maxLength: number) =>
+  Math.max(10, Math.ceil(maxLength * 0.1));
+
+/** Comment box with optional avatar, toolbar, Write/Preview tabs and a character count. */
+export function CommentComposer({
+  onSubmit,
+  value: controlled,
+  onChange,
+  label = "Add your comment",
+  labelVisible = false,
+  placeholder = "Add your comment…",
+  submitLabel = "Comment",
+  loading = false,
+  avatar,
+  actions,
+  preview,
+  maxLength,
+  hint,
+  error,
+  rows = 3,
+  className,
+}: {
+  onSubmit: (value: string) => void;
+  /** Controlled text; omit to let the composer manage and clear it. */
+  value?: string;
+  /** Called with the text on every edit. */
+  onChange?: (value: string) => void;
+  label?: string;
+  labelVisible?: boolean;
+  placeholder?: string;
+  submitLabel?: string;
+  /** Busy submitting: the submit button keeps focus but ignores activation. */
+  loading?: boolean;
+  /** Author avatar shown beside the box (decorative). */
+  avatar?: ReactNode;
+  /** Toolbar controls such as attach or emoji buttons. */
+  actions?: ReactNode;
+  /** Renders a preview of the text and enables Write/Preview tabs. */
+  preview?: (value: string) => ReactNode;
+  /** Shows a visible count; the remaining characters are announced only near the limit. */
+  maxLength?: number;
+  hint?: string;
+  /** Marks the text invalid; the message is announced when it appears. */
+  error?: string;
+  rows?: number;
+  className?: string;
+}) {
+  const { fieldId: id, messageId, describedBy } = useField({ hint, error });
+  const [own, setOwn] = useState("");
+  const [mode, setMode] = useState("write");
+  const value = controlled ?? own;
+  const setValue = (next: string) => {
+    if (controlled === undefined) setOwn(next);
+    onChange?.(next);
+  };
+  const empty = !value.trim();
+  const submit = () => {
+    if (empty || loading) return;
+    onSubmit(value);
+    if (controlled === undefined) setOwn("");
+  };
+  const remaining = maxLength === undefined ? 0 : maxLength - value.length;
+  const field = (
+    <textarea
+      id={id}
+      rows={rows}
+      value={value}
+      placeholder={placeholder}
+      maxLength={maxLength}
+      aria-invalid={error ? true : undefined}
+      aria-describedby={describedBy}
+      aria-keyshortcuts="Control+Enter Meta+Enter"
+      onChange={(event) => setValue(event.target.value)}
+      onKeyDown={(event) => {
+        if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
+          event.preventDefault();
+          submit();
+        }
+      }}
+    />
+  );
+  return (
+    <form
+      {...componentRoot("CommentComposer")}
+      className={cx("m-composer", className)}
+      onSubmit={(event) => {
+        event.preventDefault();
+        submit();
+      }}
+    >
+      {avatar && (
+        <span className="m-composer-avatar" aria-hidden="true">
+          {avatar}
+        </span>
+      )}
+      <div className="m-composer-main">
+        <label
+          className={labelVisible ? "m-composer-label" : "m-sr-only"}
+          htmlFor={id}
+        >
+          {label}
+        </label>
+        <div className="m-composer-box" data-invalid={error ? true : undefined}>
+          {preview ? (
+            <Tabs
+              label="Comment mode"
+              value={mode}
+              onChange={setMode}
+              items={[
+                { id: "write", label: "Write", content: field },
+                {
+                  id: "preview",
+                  label: "Preview",
+                  content: (
+                    <div className="m-composer-preview">
+                      {empty ? (
+                        <p className="m-composer-empty">Nothing to preview</p>
+                      ) : (
+                        preview(value)
+                      )}
+                    </div>
+                  ),
+                },
+              ]}
+            />
+          ) : (
+            field
+          )}
+          <div className="m-composer-bar">
+            {actions && <div className="m-composer-actions">{actions}</div>}
+            {maxLength !== undefined && (
+              <span className="m-composer-count">
+                {value.length} / {maxLength}
+              </span>
+            )}
+            <Button type="submit" disabled={empty} loading={loading}>
+              {submitLabel}
+            </Button>
+            {maxLength !== undefined && (
+              <span className="m-sr-only" role="status">
+                {remaining <= nearLimit(maxLength) &&
+                  (remaining > 0
+                    ? `${remaining} ${remaining === 1 ? "character" : "characters"} left`
+                    : "Character limit reached")}
+              </span>
+            )}
+          </div>
+        </div>
+        <FieldFeedback id={messageId} hint={hint} error={error} />
+      </div>
+    </form>
+  );
+}