@endfield-ui/react 0.0.0-stage → 0.1.0

package/src/components/radio/Radio.tsx

@@ -0,0 +1,182 @@
+import {
+  createContext,
+  useContext,
+  useId,
+  useMemo,
+  type ChangeEvent,
+  type ComponentProps,
+  type ReactNode,
+} from "react";
+import { useControllableState } from "../../hooks/useControllableState";
+import { cn } from "../../lib/cn";
+import { focusRing } from "../../lib/focus-ring";
+import {
+  choiceBox,
+  choiceControl,
+  choiceFrame,
+  choiceLabel,
+  choiceMark,
+} from "../checkbox/choice-style";
+import { useFieldContext } from "../field/Field";
+
+type RadioGroupContextValue = {
+  name: string;
+  value: string | undefined;
+  select: (value: string) => void;
+  disabled: boolean;
+  required: boolean;
+  invalid: boolean;
+};
+
+const RadioGroupContext = createContext<RadioGroupContextValue | null>(null);
+
+export type RadioGroupOrientation = "vertical" | "horizontal";
+
+export type RadioGroupProps = Omit<
+  ComponentProps<"div">,
+  "onChange" | "defaultValue"
+> & {
+  /** 受控的当前值 */
+  value?: string;
+  /** 非受控时的初始值 */
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  /** 表单提交用的字段名，缺省自动生成 */
+  name?: string;
+  disabled?: boolean;
+  required?: boolean;
+  /** 竖排（默认）或横排 */
+  orientation?: RadioGroupOrientation;
+};
+
+/**
+ * 单选组。方向键在组内移动并选中，这是原生单选的行为，组件不另外处理。
+ * 标签用 `<Field group label="…">` 包住它，或者自己传 `aria-label`。
+ */
+export function RadioGroup({
+  value,
+  defaultValue,
+  onValueChange,
+  name,
+  disabled: disabledProp,
+  required: requiredProp,
+  orientation = "vertical",
+  className,
+  ...props
+}: RadioGroupProps) {
+  const field = useFieldContext();
+  const autoName = useId();
+  const [current, setCurrent] = useControllableState<string | undefined>({
+    value,
+    defaultValue,
+    onChange: (next) => {
+      if (next !== undefined) onValueChange?.(next);
+    },
+  });
+
+  const disabled = disabledProp ?? field?.disabled ?? false;
+  const required = requiredProp ?? field?.required ?? false;
+  const invalid = field?.invalid ?? false;
+  const groupName = name ?? autoName;
+
+  const context = useMemo<RadioGroupContextValue>(
+    () => ({
+      name: groupName,
+      value: current,
+      select: setCurrent,
+      disabled,
+      required,
+      invalid,
+    }),
+    [groupName, current, setCurrent, disabled, required, invalid],
+  );
+
+  return (
+    <RadioGroupContext value={context}>
+      <div
+        role="radiogroup"
+        // 字段是 <fieldset> 时名称由 <legend> 给；否则指向字段的标签
+        aria-labelledby={field && !field.group ? field.labelId : undefined}
+        aria-describedby={field?.describedBy}
+        aria-invalid={invalid || undefined}
+        aria-required={required || undefined}
+        aria-disabled={disabled || undefined}
+        {...props}
+        data-orientation={orientation}
+        className={cn(
+          "flex",
+          orientation === "vertical" ? "flex-col" : "flex-wrap gap-x-6",
+          className,
+        )}
+      />
+    </RadioGroupContext>
+  );
+}
+
+export type RadioProps = Omit<
+  ComponentProps<"input">,
+  "type" | "size" | "value"
+> & {
+  value: string;
+  /** 右侧的文字标签。不传时必须自己给 `aria-label` */
+  children?: ReactNode;
+};
+
+/**
+ * 单选框，放在 `RadioGroup` 里。`className` 给整行，其余属性与 `ref` 给 `<input>`。
+ * 脱离 `RadioGroup` 时就是一个原生单选，自己管 `name` 与 `checked`。
+ */
+export function Radio({
+  value,
+  disabled,
+  onChange,
+  className,
+  children,
+  ...props
+}: RadioProps) {
+  const group = useContext(RadioGroupContext);
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    onChange?.(event);
+    if (event.target.checked) group?.select(value);
+  };
+
+  const groupProps = group
+    ? {
+        name: group.name,
+        checked: group.value === value,
+        required: group.required,
+        "aria-invalid": group.invalid || undefined,
+      }
+    : {};
+
+  return (
+    <label className={cn(choiceLabel, className)}>
+      <span className={choiceControl}>
+        <span className={choiceFrame}>
+          <input
+            {...props}
+            {...groupProps}
+            type="radio"
+            value={value}
+            disabled={disabled ?? group?.disabled}
+            onChange={handleChange}
+            className={cn(
+              choiceBox,
+              "rounded-full choice-diamond:rounded-none",
+              focusRing,
+            )}
+          />
+          <span
+            aria-hidden="true"
+            className={cn(
+              choiceMark,
+              "size-2 rounded-full bg-accent-ink-inverse peer-checked:opacity-100 peer-disabled:bg-ink-disabled choice-diamond:hidden",
+            )}
+          />
+        </span>
+      </span>
+      {children !== undefined && <span className="min-w-0">{children}</span>}
+    </label>
+  );
+}

package/src/components/radio/index.ts

@@ -0,0 +1,7 @@
+export {
+  Radio,
+  RadioGroup,
+  type RadioGroupOrientation,
+  type RadioGroupProps,
+  type RadioProps,
+} from "./Radio";

package/src/components/rec-indicator/RecIndicator.tsx

@@ -0,0 +1,47 @@
+import type { ComponentProps, ReactNode } from "react";
+import { cn } from "../../lib/cn";
+
+export type RecIndicatorProps = Omit<ComponentProps<"span">, "children"> & {
+  /** 方括号里的字，默认 `REC`；直播、实时数据可以写 `LIVE` */
+  label?: ReactNode;
+  /** 红点硬切明灭，默认开。关掉后红点常亮 */
+  blink?: boolean;
+};
+
+/**
+ * 录制指示：一个红点 + `[ REC ]`。
+ * 只在确有"进行中"的语义时用（正在录制、直播中、实时数据），不要当氛围装饰——
+ * 红色在这套语言里是危险与紧急。
+ */
+export function RecIndicator({
+  label = "REC",
+  blink = true,
+  className,
+  ...props
+}: RecIndicatorProps) {
+  return (
+    <span
+      {...props}
+      className={cn(
+        "inline-flex items-center gap-1 font-tech text-xs leading-none font-medium whitespace-nowrap text-ink uppercase",
+        className,
+      )}
+    >
+      {/* 有意不随主题变：角色色里的"危险"红，作填充用 */}
+      <span
+        aria-hidden="true"
+        className={cn(
+          "mr-0.5 size-2 shrink-0 rounded-full bg-alert",
+          blink && "animate-blink",
+        )}
+      />
+      <span aria-hidden="true" className="text-ink-tertiary">
+        [
+      </span>
+      <span>{label}</span>
+      <span aria-hidden="true" className="text-ink-tertiary">
+        ]
+      </span>
+    </span>
+  );
+}

package/src/components/rec-indicator/index.ts

@@ -0,0 +1 @@
+export { RecIndicator, type RecIndicatorProps } from "./RecIndicator";

package/src/components/registration-strip/RegistrationStrip.tsx

@@ -0,0 +1,51 @@
+import type { ComponentProps } from "react";
+import { cn } from "../../lib/cn";
+import { decor } from "../../lib/decor";
+
+export type RegistrationStripOrientation = "horizontal" | "vertical";
+
+export type RegistrationStripProps = Omit<ComponentProps<"div">, "children"> & {
+  /** 横条高 3px、每段 64px；竖条是三段 6 × 14px 叠放 */
+  orientation?: RegistrationStripOrientation;
+  /** 横条后面接一段灰线、撑满容器：用作名称下方的分隔线 */
+  rule?: boolean;
+};
+
+// 有意不随主题变：印刷校准用的三原色，只做装饰，不要用在别处
+const segments = ["bg-reg-magenta", "bg-reg-cyan", "bg-reg-yellow"] as const;
+
+/**
+ * 注册色条：品红、青、黄三段的微条，印刷品语气的点缀。
+ * 纯装饰，不承担任何数据或状态含义；一个版块最多一处，离图表远一点。
+ */
+export function RegistrationStrip({
+  orientation = "horizontal",
+  rule = false,
+  className,
+  ...props
+}: RegistrationStripProps) {
+  const vertical = orientation === "vertical";
+
+  return (
+    <div
+      {...props}
+      aria-hidden="true"
+      data-orientation={orientation}
+      className={cn(
+        decor,
+        vertical
+          ? "inline-flex flex-col"
+          : ["flex h-[3px] max-w-full", rule && "w-full"],
+        className,
+      )}
+    >
+      {segments.map((color) => (
+        <span
+          key={color}
+          className={cn(color, vertical ? "h-3.5 w-1.5" : "w-16 min-w-0")}
+        />
+      ))}
+      {rule && !vertical && <span className="min-w-0 flex-1 bg-line" />}
+    </div>
+  );
+}

package/src/components/registration-strip/index.ts

@@ -0,0 +1,5 @@
+export {
+  RegistrationStrip,
+  type RegistrationStripOrientation,
+  type RegistrationStripProps,
+} from "./RegistrationStrip";