@stonedogcode/style 0.9.0

package/src/components/StyledInputRadio.tsx

@@ -0,0 +1,141 @@
+"use client";
+
+import React from "react";
+import { inputRadioRootRecipe } from "styled-system/recipes";
+import { useResolvedVariant } from "../config/style-config";
+
+/**
+ * A group of radio buttons — pick exactly one.
+ *
+ * Reach for this over a set of checkboxes when the options are mutually
+ * exclusive, and over a select when there are few enough to show at once.
+ * Radios put every choice in front of the reader, which matters most for
+ * someone who finds a dropdown's hidden list hard to hold in mind.
+ *
+ * ## It is announced as a group (NEH-167)
+ *
+ * The originating version rendered bare labelled inputs. A shared `name` makes
+ * the browser treat them as one group for arrow-key navigation, so it *worked*
+ * — but nothing named the group, so a screen reader announced three unrelated
+ * radios and never said what the choice was about. `role="radiogroup"` plus a
+ * `label` fixes that, and the label is the one prop worth insisting on here.
+ *
+ * ## Two API repairs
+ *
+ * **`renderItem` is optional now.** It was required, and every call site passed
+ * `(item) => item.label` — the identity function, written out. `RadioItem`
+ * already carries a label, so that is the default; pass `renderItem` only when
+ * an option needs more than its text (a price, a badge, a description).
+ *
+ * **The ref no longer goes to the inputs.** It was assigned inside the item
+ * loop, so each item overwrote the last and a caller got a handle on the final
+ * radio rather than the group or the selection — reliably the wrong element.
+ * It now points at the group container. Nothing was using it.
+ *
+ * The container is a plain `<div>` rather than `StyledBox`, which is what the
+ * original used. `StyledBox` wraps its children in an inner element unless told
+ * not to, and that element would sit between the `radiogroup` and its radios —
+ * a group whose children are not its children is exactly the shape assistive
+ * tech mis-reports. The recipe's `root` slot supplies the layout either way.
+ */
+
+export interface RadioItem {
+  value: string;
+  label: React.ReactNode;
+  disabled?: boolean;
+}
+
+export interface StyledInputRadioProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+  items: RadioItem[];
+  /** Optional custom rendering. Defaults to the item's own label. */
+  renderItem?: (item: RadioItem) => React.ReactNode;
+  name?: string;
+  value?: string;
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  variant?: RadioVariant;
+  size?: "sm" | "md" | "lg";
+  /**
+   * What the choice is about — "Billing cycle", not "Monthly". Without it the
+   * group has no accessible name. Use `aria-labelledby` instead when a visible
+   * heading already says it.
+   */
+  label?: string;
+}
+
+/** What `inputRadioRootRecipe` defines. */
+export const RADIO_VARIANTS = [
+  "none",
+  "outline",
+  "solid",
+  "aurora",
+  "glass",
+  "matte",
+  "ghost",
+] as const;
+
+export type RadioVariant = (typeof RADIO_VARIANTS)[number];
+
+const StyledInputRadio = React.forwardRef<HTMLDivElement, StyledInputRadioProps>(
+  function StyledInputRadio(
+    { items, renderItem, name, value, onChange, variant, size, label, ...props },
+    ref,
+  ) {
+    const resolved = useResolvedVariant(variant, RADIO_VARIANTS);
+    const { root, item, input, control, indicator } = inputRadioRootRecipe({
+      variant: resolved,
+      ...(size ? { size } : {}),
+    });
+
+    const id = React.useId();
+
+    return (
+      <div
+        ref={ref}
+        role="radiogroup"
+        {...(label ? { "aria-label": label } : {})}
+        {...props}
+        className={root}
+      >
+        {items.map((radio, index) => {
+          // The value can be anything, including whitespace, so it is not safe
+          // as an id on its own. Index keeps it unique even for duplicates.
+          const safeValue = (radio.value || "unknown").toString().replace(/\s+/g, "_");
+          const inputId = `${id}-${index}-${safeValue}`;
+
+          return (
+            <label
+              key={inputId}
+              htmlFor={inputId}
+              className={item}
+              // The transparent input is absolutely positioned, so its label
+              // has to be the containing block or it lands somewhere else on
+              // the page entirely.
+              style={{ position: "relative" }}
+              data-checked={value === radio.value ? "" : undefined}
+            >
+              <input
+                id={inputId}
+                type="radio"
+                name={name}
+                value={radio.value}
+                checked={value === radio.value}
+                disabled={radio.disabled}
+                onChange={onChange}
+                className={input}
+              />
+              <div className={control}>
+                <div className={indicator} />
+              </div>
+              {renderItem ? renderItem(radio) : radio.label}
+            </label>
+          );
+        })}
+      </div>
+    );
+  },
+);
+
+StyledInputRadio.displayName = "StyledInputRadio";
+
+export default StyledInputRadio;

package/src/components/StyledInputSelect.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+import React from "react";
+import { styled } from "styled-system/jsx";
+import type { HTMLStyledProps } from "styled-system/types";
+import { inputDropdownRecipe } from "styled-system/recipes";
+import { useFontSizeProfile, useResolvedVariant } from "../config/style-config";
+import { fontSizeMap } from "../config/font-size";
+
+/**
+ * A dropdown, built on the **native** `<select>`.
+ *
+ * ## Why native, when the originating app has a custom one
+ *
+ * HopperGuard ships a compound dropdown built on `@floating-ui/react` — a
+ * portal, a focus manager, twelve exported sub-components. It was not ported,
+ * and the reasons compound:
+ *
+ * - **It costs every consumer a positioning library.** This package has exactly
+ *   one runtime dependency (`csstype`), and each addition is a constraint
+ *   imposed on three products to serve one.
+ * - **The native control is more accessible than a good reimplementation.** It
+ *   is the platform's own listbox: type-ahead, `Home`/`End`, screen-reader
+ *   announcement of "3 of 12", and on a phone the OS picker rather than a
+ *   scrolling div. A custom dropdown has to rebuild all of that and usually
+ *   rebuilds most of it.
+ * - **It submits.** A native select inside a `<form>` posts its value with no
+ *   JavaScript. optima-filings's forms are server actions, so a custom
+ *   dropdown there would need a hidden mirror input — machinery whose only
+ *   purpose is to undo the choice to be custom.
+ *
+ * What you give up is styling the open list, which CSS cannot reach on a native
+ * select. That is a real limit and the honest reason to build the custom one —
+ * when a product needs icons or two-line entries in the options, not before.
+ * The closed control is fully styled here, from the same surface the text input
+ * uses, so the two match in a form.
+ */
+
+const PandaSelect = styled("select", inputDropdownRecipe);
+
+export interface SelectOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+
+export interface StyledInputSelectProps
+  extends Omit<
+      React.SelectHTMLAttributes<HTMLSelectElement>,
+      "color" | "content" | "translate" | "size"
+    >,
+    Omit<HTMLStyledProps<"select">, "size"> {
+  ["data-testid"]?: string;
+  variant?: SelectVariant;
+  /**
+   * The choices. Alternatively pass `<option>` children directly — needed for
+   * `<optgroup>`, which this prop deliberately does not model.
+   */
+  options?: SelectOption[];
+  /**
+   * Leading entry for "nothing chosen". Its value is the empty string, so a
+   * `required` select rejects it — which is the point of naming it rather than
+   * letting the first real option be silently pre-selected.
+   */
+  placeholder?: string;
+}
+
+/** What `inputDropdownRecipe` defines — wider than the five app-wide ones. */
+export const SELECT_VARIANTS = [
+  "solid",
+  "outline",
+  "aurora",
+  "glass",
+  "matte",
+  "ghost",
+  "none",
+] as const;
+
+export type SelectVariant = (typeof SELECT_VARIANTS)[number];
+
+const StyledInputSelect = React.forwardRef<
+  HTMLSelectElement,
+  StyledInputSelectProps
+>(function StyledInputSelect(
+  { variant, options, placeholder, children, style, ...props },
+  ref,
+) {
+  const resolved = useResolvedVariant(variant, SELECT_VARIANTS);
+  const fontSize = fontSizeMap[useFontSizeProfile()] ?? fontSizeMap.md;
+
+  return (
+    <PandaSelect
+      ref={ref}
+      variant={resolved}
+      data-testid={props["data-testid"]}
+      // Inline, not a Panda prop: the value is only known at runtime, and Panda
+      // extracts styles by parsing source at build time — a runtime value
+      // yields a class with no rule behind it (NEH-233).
+      style={{ fontSize, ...style }}
+      {...props}
+    >
+      {placeholder !== undefined && <option value="">{placeholder}</option>}
+      {options?.map((option) => (
+        <option key={option.value} value={option.value} disabled={option.disabled}>
+          {option.label}
+        </option>
+      ))}
+      {children}
+    </PandaSelect>
+  );
+});
+
+StyledInputSelect.displayName = "StyledInputSelect";
+
+export default StyledInputSelect;

package/src/components/StyledInputSlider.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import React from "react";
+import StyledBox from "./StyledBox";
+import StyledHStack from "./StyledHStack";
+import StyledText from "./StyledText";
+
+/**
+ * A range slider with optional end labels and a live readout.
+ *
+ * The end labels are the reason to reach for this over a bare `<input
+ * type="range">`: a slider with no anchors is a guess, and "Quiet"/"Loud" at
+ * the ends costs nothing and tells the reader what the axis means.
+ *
+ * ## Two things were fixed on the way in
+ *
+ * **Fractional steps were being truncated.** The change handler ran
+ * `parseInt(value, 10)`, so `step={0.5}` produced 2 where the user had chosen
+ * 2.5 — the thumb would snap back as the value round-tripped. Now `Number`,
+ * which reads the whole value. Callers on integer steps are unaffected.
+ *
+ * **The slider had no accessible name.** The visible readout is a separate
+ * `<StyledText>`, so a screen reader met an unlabelled "slider, 40". When
+ * `currentLabel` is set it now names the control too, which is nearly always
+ * what the caller meant; an explicit `aria-label` or `aria-labelledby` wins.
+ */
+
+export interface StyledInputSliderProps
+  extends Omit<
+    React.InputHTMLAttributes<HTMLInputElement>,
+    "value" | "onChange" | "min" | "max" | "step" | "type"
+  > {
+  value: number;
+  onChange: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  /** Text at the low end of the track. */
+  minLabel?: string;
+  /** Text at the high end. */
+  maxLabel?: string;
+  /** Names the quantity — rendered as "`currentLabel`: value" beneath. */
+  currentLabel?: string;
+}
+
+const StyledInputSlider = ({
+  value,
+  onChange,
+  min,
+  max,
+  step,
+  minLabel,
+  maxLabel,
+  currentLabel,
+  ...props
+}: StyledInputSliderProps) => (
+  <StyledBox noWrap>
+    <StyledHStack justifyContent="space-between" alignItems="center">
+      {minLabel && <StyledText>{minLabel}</StyledText>}
+      <input
+        type="range"
+        value={value}
+        // `Number`, not `parseInt` — see above.
+        onChange={(e) => onChange(Number(e.target.value))}
+        min={min}
+        max={max}
+        step={step}
+        aria-label={currentLabel}
+        {...props}
+      />
+      {maxLabel && <StyledText>{maxLabel}</StyledText>}
+    </StyledHStack>
+    {currentLabel && (
+      <StyledText textAlign="center" mt={2}>
+        {currentLabel}: {value}
+      </StyledText>
+    )}
+  </StyledBox>
+);
+
+StyledInputSlider.displayName = "StyledInputSlider";
+
+export default StyledInputSlider;

package/src/components/StyledInputText.tsx

@@ -0,0 +1,146 @@
+"use client";
+
+import React from "react";
+import { styled } from "styled-system/jsx";
+import type { HTMLStyledProps } from "styled-system/types";
+import { inputTextRecipe } from "styled-system/recipes";
+import { useFontSizeProfile, useResolvedVariant } from "../config/style-config";
+import { fontSizeMap } from "../config/font-size";
+import DictationControls, { dictationPadding } from "./DictationControls";
+import DictationPrompt from "./DictationPrompt";
+import type { Dictation } from "./dictation";
+
+/**
+ * A single-line text field.
+ *
+ * Sized from the app-wide font-size profile rather than the browser default,
+ * which matters more here than almost anywhere else: a field the user cannot
+ * read is a field they cannot check before submitting.
+ *
+ * ## Dictation is supplied, never implemented
+ *
+ * Pass a `dictation` adapter and the field grows a microphone; omit it and the
+ * field is exactly a field. This package holds no speech code — see
+ * `dictation.ts` for why that seam is where it is.
+ *
+ * The originating component decided for itself whether a mic belonged, from a
+ * feature flag, the input's `type`, and a "context" that also chose between a
+ * browser engine and AWS Transcribe for PHI. All of that is product policy with
+ * regulatory weight, and none of it survived the move — the host decides, and
+ * says so by passing an adapter or not.
+ *
+ * That inverts one behaviour worth naming: the old component auto-enabled a mic
+ * for any user with the feature flag, so opting a field OUT meant remembering
+ * `showMic={false}`. A field that should never be dictated into — a PIN, a card
+ * number — was one forgotten prop away from having a microphone. Now silence is
+ * the default and dictation is the deliberate act.
+ */
+
+const PandaInput = styled("input", inputTextRecipe);
+
+export interface StyledInputTextProps
+  extends Omit<
+      React.InputHTMLAttributes<HTMLInputElement>,
+      "color" | "content" | "height" | "translate" | "width" | "size"
+    >,
+    Omit<HTMLStyledProps<"input">, "size"> {
+  ["data-testid"]?: string;
+  variant?: InputTextVariant;
+  isReadOnly?: boolean;
+  size?: string | number;
+  /**
+   * Host-supplied dictation. Omit for no microphone — which is most fields.
+   */
+  dictation?: Dictation;
+  /** Accessible name for the mic button. */
+  micLabel?: string;
+  /** Accessible name for the redo button. */
+  redoLabel?: string;
+  /** Wording for the "add or replace?" prompt a second recording raises. */
+  continueQuestion?: string;
+  continueLabel?: string;
+  startOverLabel?: string;
+}
+
+/**
+ * What `inputTextRecipe` defines. Wider than the five appearances selectable
+ * app-wide, so it is passed to `useResolvedVariant` explicitly — otherwise
+ * `ghost` and `none` are silently coerced to `solid`.
+ */
+export const INPUT_TEXT_VARIANTS = [
+  "solid",
+  "outline",
+  "aurora",
+  "glass",
+  "matte",
+  "ghost",
+  "none",
+] as const;
+
+export type InputTextVariant = (typeof INPUT_TEXT_VARIANTS)[number];
+
+const StyledInputText = React.forwardRef<HTMLInputElement, StyledInputTextProps>(
+  function StyledInputText(
+    {
+      variant,
+      isReadOnly,
+      size: _size,
+      style,
+      dictation,
+      micLabel = "Dictate",
+      redoLabel = "Record again",
+      continueQuestion = "Add to what you already wrote?",
+      continueLabel = "Continue",
+      startOverLabel = "Start over",
+      ...props
+    },
+    ref,
+  ) {
+    const resolved = useResolvedVariant(variant, INPUT_TEXT_VARIANTS);
+    const fontSize = fontSizeMap[useFontSizeProfile()] ?? fontSizeMap.md;
+    const padding = dictationPadding(dictation);
+
+    const field = (
+      <PandaInput
+        ref={ref}
+        variant={resolved}
+        data-testid={props["data-testid"]}
+        readOnly={isReadOnly}
+        style={{
+          fontSize,
+          // Reserve room so the value does not run underneath the buttons.
+          ...(padding ? { paddingRight: padding } : {}),
+          ...style,
+        }}
+        {...props}
+      />
+    );
+
+    if (!dictation) return field;
+
+    return (
+      <>
+        <div style={{ position: "relative", display: "inline-block", width: "100%" }}>
+          {field}
+          <DictationControls
+            dictation={dictation}
+            micLabel={micLabel}
+            redoLabel={redoLabel}
+          />
+        </div>
+        {/* Below the field, outside the positioned wrapper — it is a question,
+            not an affordance. */}
+        <DictationPrompt
+          dictation={dictation}
+          question={continueQuestion}
+          continueLabel={continueLabel}
+          startOverLabel={startOverLabel}
+        />
+      </>
+    );
+  },
+);
+
+StyledInputText.displayName = "StyledInputText";
+
+export default StyledInputText;

package/src/components/StyledInputTextArea.tsx

@@ -0,0 +1,119 @@
+"use client";
+
+import React from "react";
+import { styled } from "styled-system/jsx";
+import type { HTMLStyledProps } from "styled-system/types";
+import { inputTextRecipe } from "styled-system/recipes";
+import { useFontSizeProfile, useResolvedVariant } from "../config/style-config";
+import { fontSizeMap } from "../config/font-size";
+import DictationControls, { dictationPadding } from "./DictationControls";
+import DictationPrompt from "./DictationPrompt";
+import { INPUT_TEXT_VARIANTS, type InputTextVariant } from "./StyledInputText";
+import type { Dictation } from "./dictation";
+
+/**
+ * A multi-line text field. `StyledInputText`'s sibling, sharing its recipe and
+ * its dictation seam — read that file first; the reasoning is the same.
+ *
+ * The one deliberate difference is where the buttons sit. On a single-line
+ * field they centre vertically, because there is only one line to centre
+ * against. Here they pin to the **top**: a textarea grows, and a
+ * vertically-centred button would drift down the field as the user typed,
+ * ending up beside the middle of their text with no relationship to anything.
+ *
+ * Dictation matters more here than on the single-line field. Long-form entry is
+ * where typing is most tiring, so this is the control an arthritic or tremoring
+ * user is most likely to want — which is also why the buttons keep their full
+ * 44×44 target rather than shrinking to stay out of the way.
+ */
+
+const PandaTextArea = styled("textarea", inputTextRecipe);
+
+export interface StyledInputTextAreaProps
+  extends Omit<
+      React.TextareaHTMLAttributes<HTMLTextAreaElement>,
+      "color" | "content" | "translate"
+    >,
+    HTMLStyledProps<"textarea"> {
+  ["data-testid"]?: string;
+  variant?: InputTextVariant;
+  isReadOnly?: boolean;
+  /** Host-supplied dictation. Omit for no microphone. */
+  dictation?: Dictation;
+  micLabel?: string;
+  redoLabel?: string;
+  /** Wording for the "add or replace?" prompt a second recording raises. */
+  continueQuestion?: string;
+  continueLabel?: string;
+  startOverLabel?: string;
+}
+
+const StyledInputTextArea = React.forwardRef<
+  HTMLTextAreaElement,
+  StyledInputTextAreaProps
+>(function StyledInputTextArea(
+  {
+    variant,
+    isReadOnly,
+    style,
+    dictation,
+    micLabel = "Dictate",
+    redoLabel = "Record again",
+    continueQuestion = "Add to what you already wrote?",
+    continueLabel = "Continue",
+    startOverLabel = "Start over",
+    ...props
+  },
+  ref,
+) {
+  const resolved = useResolvedVariant(variant, INPUT_TEXT_VARIANTS);
+  const fontSize = fontSizeMap[useFontSizeProfile()] ?? fontSizeMap.md;
+  const padding = dictationPadding(dictation);
+
+  const field = (
+    <PandaTextArea
+      ref={ref}
+      variant={resolved}
+      data-testid={props["data-testid"]}
+      readOnly={isReadOnly}
+      style={{
+        fontSize,
+        ...(padding ? { paddingRight: padding } : {}),
+        ...style,
+      }}
+      {...props}
+    />
+  );
+
+  if (!dictation) return field;
+
+  return (
+    <>
+      <div
+        style={{ position: "relative", display: "inline-block", width: "100%" }}
+        // Pins the controls to the top of a growing field — see above.
+        data-dictation-anchor="top"
+      >
+        {field}
+        <DictationControls
+          dictation={dictation}
+          micLabel={micLabel}
+          redoLabel={redoLabel}
+          anchor="top"
+        />
+      </div>
+      {/* This is where the prompt matters most: a textarea is where someone has
+          actually written a paragraph worth losing. */}
+      <DictationPrompt
+        dictation={dictation}
+        question={continueQuestion}
+        continueLabel={continueLabel}
+        startOverLabel={startOverLabel}
+      />
+    </>
+  );
+});
+
+StyledInputTextArea.displayName = "StyledInputTextArea";
+
+export default StyledInputTextArea;