@cyberskill/design 1.0.0

package/components/forms/FileUpload.jsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { makeT, useLang } from "../_i18n/i18n.js";
+import { cx } from "../_utils/cx.js";
+
+/** CyberSkill FileUpload — click-or-drag dropzone. Calls onFiles(File[]) on select/drop. */
+export function FileUpload({ title, hint, accept, multiple = false, onFiles, icon, lang, className }) {
+  const [drag, setDrag] = React.useState(false);
+  const pick = (files) => { if (files && files.length && onFiles) onFiles(Array.from(files)); };
+  const [ref, L] = useLang(lang);
+  const t = makeT("FileUpload", L);
+  const tt = title != null ? title : t("title");
+  const hh = hint != null ? hint : t("hint");
+  return (
+    <label
+      ref={ref}
+      className={cx("cs-dropzone", drag && "is-dragging", className)}
+      onDragOver={(e) => { e.preventDefault(); setDrag(true); }}
+      onDragLeave={() => setDrag(false)}
+      onDrop={(e) => { e.preventDefault(); setDrag(false); pick(e.dataTransfer.files); }}
+    >
+      <span className="cs-dropzone__icon">
+        {icon ?? <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M12 16V4M7 9l5-5 5 5" /><path d="M5 16v3a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-3" /></svg>}
+      </span>
+      <span className="cs-dropzone__title">{tt}</span>
+      <span className="cs-dropzone__hint">{hh}</span>
+      <input type="file" accept={accept} multiple={multiple} style={{ display: "none" }} onChange={(e) => pick(e.target.files)} />
+    </label>
+  );
+}

package/components/forms/FileUpload.prompt.md

@@ -0,0 +1,5 @@
+**FileUpload** — click-or-drag dropzone; `onFiles` receives the `File[]`.
+
+```jsx
+<FileUpload multiple accept="image/*" onFiles={files => upload(files)} />
+```

package/components/forms/Form.d.ts

@@ -0,0 +1,87 @@
+import type { ReactNode } from "react";
+
+/** One validation rule: "required" (bilingual default message) or fn(value, values) → message | null. */
+export type FormRule = "required" | ((value: unknown, values: Record<string, unknown>) => string | null | undefined);
+
+/** Semantic form + optional controller. Plain mode: named native fields collected via
+ *  FormData into onSubmit(values); `errors` renders the bilingual summary. Controller mode:
+ *  `rules` validate on submit (blocking until clean); FormField children with `name`
+ *  auto-wire value/onChange + per-field errors via context. Dotted paths work with FormFieldArray. */
+export interface FormProps {
+  onSubmit?: (values: Record<string, unknown>) => void;
+  /** External errors (name → message); merged over rule errors in summary + fields. */
+  errors?: Record<string, string | undefined>;
+  /** name → rule or rule[]; validated on submit. */
+  rules?: Record<string, FormRule | FormRule[]>;
+  /** name → async (value, values) => message | null; runs after sync rules pass. */
+  asyncRules?: Record<string, (value: unknown, values: Record<string, unknown>) => Promise<string | null | undefined>>;
+  /** Seed for controller-registered fields. */
+  initialValues?: Record<string, unknown>;
+  children?: ReactNode;
+  lang?: string;
+  className?: string;
+}
+export function Form(props: FormProps): React.ReactElement;
+
+/** Label + control + hint/error line. With `name` inside a Form, registers with the
+ *  controller: single element child cloned with value/onChange (valueProp="checked"
+ *  for checkbox-shaped children); context error auto-shows (explicit `error` wins). */
+export interface FormFieldProps {
+  label: ReactNode;
+  /** Register with the surrounding Form controller under this key (supports dotted paths). */
+  name?: string;
+  required?: boolean;
+  hint?: ReactNode;
+  error?: ReactNode;
+  /** Prop carrying the value on the child ("value" default; "checked" for Checkbox/Switch/Toggle). */
+  valueProp?: "value" | "checked";
+  children?: ReactNode;
+  lang?: string;
+  className?: string;
+}
+export function FormField(props: FormFieldProps): React.ReactElement;
+
+export interface FormFieldArrayRenderArgs {
+  index: number;
+  item: Record<string, unknown>;
+  remove: () => void;
+  /** Build a dotted field path under this row, e.g. path("name") → teammates.0.name */
+  path: (field: string) => string;
+}
+export interface FormFieldArrayProps {
+  name: string;
+  label?: ReactNode;
+  children: (args: FormFieldArrayRenderArgs) => ReactNode;
+  min?: number;
+  max?: number;
+  addLabel?: ReactNode;
+  defaultItem?: Record<string, unknown> | (() => Record<string, unknown>);
+  className?: string;
+  lang?: string;
+}
+export function FormFieldArray(props: FormFieldArrayProps): React.ReactElement;
+
+export interface FormWizardStep {
+  id?: string;
+  title?: ReactNode;
+  rules?: Record<string, FormRule | FormRule[]>;
+  render: (ctx: {
+    values: Record<string, unknown>;
+    step: number;
+    setValue: (name: string, value: unknown) => void;
+  }) => ReactNode;
+}
+export interface FormWizardProps {
+  steps: FormWizardStep[];
+  initialValues?: Record<string, unknown>;
+  onComplete?: (values: Record<string, unknown>) => void;
+  lang?: string;
+  className?: string;
+  nextLabel?: ReactNode;
+  backLabel?: ReactNode;
+  finishLabel?: ReactNode;
+}
+export function FormWizard(props: FormWizardProps): React.ReactElement;
+
+export function getPath(obj: unknown, path: string): unknown;
+export function setPath(obj: unknown, path: string, value: unknown): unknown;

package/components/forms/Form.figma.tsx

@@ -0,0 +1,12 @@
+import figma from '@figma/code-connect'
+import { Form } from './Form.jsx'
+
+/**
+ * Code Connect stub — Form
+ * Prop maps stay minimal until the matching Figma library component is published;
+ * then set nodeId in code-connect/node-map.json and re-run generate-code-connect.
+ */
+figma.connect(Form, 'https://www.figma.com/design/CS_FIGMA_FILE_KEY/CyberSkill?node-id=9999-38', {
+  example: () => <Form />,
+  imports: ["import { Form } from '@cyberskill/design'"],
+})

package/components/forms/Form.jsx

@@ -0,0 +1,316 @@
+import React from "react";
+import { makeT, useLang } from "../_i18n/i18n.js";
+import { cx } from "../_utils/cx.js";
+
+// Lazy context — bundle evaluates modules before React is loaded on some gate pages.
+let FormCtx;
+function getFormCtx() {
+  if (!FormCtx) FormCtx = React.createContext(null);
+  return FormCtx;
+}
+
+/** Read a dotted path (supports array indices as numeric segments). */
+export function getPath(obj, path) {
+  if (!path) return undefined;
+  const parts = String(path).split(".");
+  let cur = obj;
+  for (const p of parts) {
+    if (cur == null) return undefined;
+    cur = cur[p];
+  }
+  return cur;
+}
+
+/** Immutable set on a dotted path; creates objects/arrays as needed. */
+export function setPath(obj, path, value) {
+  const parts = String(path).split(".");
+  const root = Array.isArray(obj) ? [...obj] : { ...(obj || {}) };
+  let cur = root;
+  for (let i = 0; i < parts.length - 1; i++) {
+    const p = parts[i];
+    const nextKey = parts[i + 1];
+    const nextIsIndex = /^\d+$/.test(nextKey);
+    const existing = cur[p];
+    const clone = existing == null
+      ? (nextIsIndex ? [] : {})
+      : (Array.isArray(existing) ? [...existing] : { ...existing });
+    cur[p] = clone;
+    cur = clone;
+  }
+  cur[parts[parts.length - 1]] = value;
+  return root;
+}
+
+/**
+ * CyberSkill Form — semantic form + optional controller (v3.7).
+ * Plain mode (unchanged): named native fields are collected via FormData into onSubmit(values);
+ * `errors` renders the bilingual summary. Controller mode: pass `rules` (name → "required" |
+ * fn(value, values) => msg|null | array of those); FormField children with `name` register via
+ * context — value/onChange auto-wired, per-field errors auto-shown, submit blocked until clean.
+ * Dotted names (e.g. teammates.0.name) work with FormFieldArray.
+ */
+export function Form({ onSubmit, errors = {}, rules, asyncRules, initialValues, children, lang, className, ...props }) {
+  const [ref, L] = useLang(lang);
+  const t = makeT("Form", L);
+  const [values, setValues] = React.useState(() => initialValues || {});
+  const [ruleErrors, setRuleErrors] = React.useState({});
+  const [pending, setPending] = React.useState(false);
+  const setValue = React.useCallback((name, v) => {
+    setValues((s) => (String(name).includes(".") ? setPath(s, name, v) : { ...s, [name]: v }));
+    setRuleErrors((e) => (e[name] ? { ...e, [name]: undefined } : e));
+  }, []);
+  const merged = { ...ruleErrors, ...errors };
+  const keys = Object.keys(merged).filter((k) => merged[k]);
+  const runRules = (v, ruleMap) => {
+    const map = ruleMap || rules;
+    if (!map) return {};
+    const out = {};
+    for (const [name, r] of Object.entries(map)) {
+      for (const rule of (Array.isArray(r) ? r : [r])) {
+        const fieldVal = String(name).includes(".") ? getPath(v, name) : v[name];
+        const msg = rule === "required"
+          ? ((fieldVal == null || String(fieldVal).trim() === "") ? t("requiredField") : null)
+          : (typeof rule === "function" ? rule(fieldVal, v) : null);
+        if (msg) { out[name] = msg; break; }
+      }
+    }
+    return out;
+  };
+  const runAsyncRules = async (v) => {
+    if (!asyncRules) return {};
+    const out = {};
+    for (const [name, fn] of Object.entries(asyncRules)) {
+      if (typeof fn !== "function") continue;
+      try {
+        const fieldVal = String(name).includes(".") ? getPath(v, name) : v[name];
+        const msg = await fn(fieldVal, v);
+        if (msg) out[name] = msg;
+      } catch (e) {
+        out[name] = String(e && e.message || e);
+      }
+    }
+    return out;
+  };
+  const ctx = { values, setValue, setValues, errors: merged, pending, runRules, setRuleErrors, t, L };
+  const Ctx = getFormCtx();
+  return (
+    <Ctx.Provider value={ctx}>
+      <form {...props} ref={ref} className={cx("cs-form", pending && "is-pending", className)} noValidate
+        onSubmit={async (e) => {
+          e.preventDefault();
+          const fd = new FormData(e.currentTarget);
+          const v = {}; fd.forEach((val, k) => { v[k] = val; });
+          Object.assign(v, values); // controller-registered fields are the source of truth
+          const errs = runRules(v);
+          if (Object.keys(errs).some((k) => errs[k])) { setRuleErrors(errs); return; }
+          setPending(true);
+          try {
+            const aerrs = await runAsyncRules(v);
+            setRuleErrors(aerrs);
+            if (Object.keys(aerrs).some((k) => aerrs[k])) return;
+            onSubmit && onSubmit(v);
+          } finally { setPending(false); }
+        }}>
+        {keys.length ? (
+          <div className="cs-form__summary" role="alert">
+            <b>{t("summary")}</b>
+            <ul>{keys.map((k) => <li key={k}>{merged[k]}</li>)}</ul>
+          </div>
+        ) : null}
+        {children}
+      </form>
+    </Ctx.Provider>
+  );
+}
+
+/**
+ * CyberSkill FormField — label + control + hint/error line. With `name` inside a Form,
+ * it registers with the controller: the single element child is cloned with value/onChange
+ * (set valueProp="checked" for Checkbox/Switch/Toggle-shaped children) and the field's
+ * context error shows automatically (an explicit `error` prop still wins).
+ */
+export function FormField({ label, name, required = false, hint, error, valueProp = "value", children, lang, className }) {
+  const [ref, L] = useLang(lang);
+  const t = makeT("Form", L);
+  const ctx = React.useContext(getFormCtx());
+  const err = error !== undefined && error !== null ? error : (name && ctx ? ctx.errors[name] : undefined);
+  let child = children;
+  if (name && ctx && React.isValidElement(children) && React.Children.count(children) === 1) {
+    const cur = String(name).includes(".") ? getPath(ctx.values, name) : ctx.values[name];
+    const wire = { name };
+    wire[valueProp] = cur !== undefined ? cur : (valueProp === "checked" ? false : "");
+    wire.onChange = (ev) => {
+      const val = ev && ev.target ? (valueProp === "checked" ? ev.target.checked : ev.target.value) : ev;
+      ctx.setValue(name, val);
+      if (children.props.onChange) children.props.onChange(ev);
+    };
+    child = React.cloneElement(children, wire);
+  }
+  return (
+    <label ref={ref} className={cx("cs-formfield", err && "has-error", className)}>
+      <span className="cs-formfield__label">{label}{required ? <em aria-label={t("required")}> *</em> : null}</span>
+      {child}
+      {err ? <span className="cs-formfield__error" role="alert">{err}</span> : hint ? <span className="cs-formfield__hint">{hint}</span> : null}
+    </label>
+  );
+}
+
+/**
+ * FormFieldArray — manage an array of row objects under `name` in the surrounding Form.
+ * children: ({ index, item, remove, path }) => ReactNode
+ */
+export function FormFieldArray({
+  name,
+  children,
+  label,
+  min = 0,
+  max = 50,
+  addLabel,
+  defaultItem,
+  className,
+  lang,
+}) {
+  const [ref, L] = useLang(lang);
+  const t = makeT("Form", L);
+  const ctx = React.useContext(getFormCtx());
+  if (!ctx) {
+    return <div className="cs-formfield__error" role="alert">FormFieldArray must be used inside Form</div>;
+  }
+  const list = Array.isArray(getPath(ctx.values, name)) ? getPath(ctx.values, name) : [];
+  const blank = () => (defaultItem != null ? (typeof defaultItem === "function" ? defaultItem() : { ...defaultItem }) : {});
+  const setList = (next) => ctx.setValue(name, next);
+  const add = () => {
+    if (list.length >= max) return;
+    setList([...list, blank()]);
+  };
+  const removeAt = (i) => {
+    if (list.length <= min) return;
+    setList(list.filter((_, idx) => idx !== i));
+  };
+  return (
+    <div ref={ref} className={cx("cs-form-array", className)} data-name={name}>
+      {label ? <div className="cs-formfield__label" style={{ marginBottom: 8 }}>{label}</div> : null}
+      <div className="cs-form-array__rows">
+        {list.map((item, index) => (
+          <div className="cs-form-array__row" key={index} data-index={index}>
+            {typeof children === "function"
+              ? children({
+                  index,
+                  item,
+                  remove: () => removeAt(index),
+                  path: (field) => `${name}.${index}.${field}`,
+                })
+              : children}
+          </div>
+        ))}
+      </div>
+      <button
+        type="button"
+        className="cs-button cs-button--secondary cs-button--sm"
+        onClick={add}
+        disabled={list.length >= max}
+        style={{ marginTop: 8 }}
+      >
+        {addLabel || (L === "vi" ? "Thêm dòng" : "Add row")}
+      </button>
+    </div>
+  );
+}
+
+/**
+ * FormWizard — multi-step controller wrapping Form context without a nested <form>.
+ * Each step may declare `rules` and a `render()` body of FormFields.
+ */
+export function FormWizard({
+  steps = [],
+  initialValues,
+  onComplete,
+  lang,
+  className,
+  nextLabel,
+  backLabel,
+  finishLabel,
+}) {
+  const [ref, L] = useLang(lang);
+  const t = makeT("Form", L);
+  const [step, setStep] = React.useState(0);
+  const [values, setValues] = React.useState(() => initialValues || {});
+  const [ruleErrors, setRuleErrors] = React.useState({});
+  const [pending, setPending] = React.useState(false);
+  const setValue = React.useCallback((name, v) => {
+    setValues((s) => (String(name).includes(".") ? setPath(s, name, v) : { ...s, [name]: v }));
+    setRuleErrors((e) => (e[name] ? { ...e, [name]: undefined } : e));
+  }, []);
+  const runRules = React.useCallback((v, ruleMap) => {
+    if (!ruleMap) return {};
+    const out = {};
+    for (const [name, r] of Object.entries(ruleMap)) {
+      for (const rule of (Array.isArray(r) ? r : [r])) {
+        const fieldVal = String(name).includes(".") ? getPath(v, name) : v[name];
+        const msg = rule === "required"
+          ? ((fieldVal == null || String(fieldVal).trim() === "") ? t("requiredField") : null)
+          : (typeof rule === "function" ? rule(fieldVal, v) : null);
+        if (msg) { out[name] = msg; break; }
+      }
+    }
+    return out;
+  }, [t]);
+  const current = steps[step] || {};
+  const ctx = { values, setValue, setValues, errors: ruleErrors, pending, runRules, setRuleErrors, t, L };
+  const keys = Object.keys(ruleErrors).filter((k) => ruleErrors[k]);
+  const goNext = async () => {
+    const errs = runRules(values, current.rules);
+    if (Object.keys(errs).some((k) => errs[k])) { setRuleErrors(errs); return; }
+    setRuleErrors({});
+    if (step >= steps.length - 1) {
+      setPending(true);
+      try { onComplete && onComplete(values); }
+      finally { setPending(false); }
+      return;
+    }
+    setStep((s) => s + 1);
+  };
+  const goBack = () => {
+    setRuleErrors({});
+    setStep((s) => Math.max(0, s - 1));
+  };
+  const Ctx = getFormCtx();
+  return (
+    <Ctx.Provider value={ctx}>
+      <div ref={ref} className={cx("cs-form-wizard", className)} data-step={step}>
+        <ol className="cs-form-wizard__steps" style={{ display: "flex", gap: 10, listStyle: "none", padding: 0, margin: "0 0 16px", flexWrap: "wrap" }}>
+          {steps.map((s, i) => (
+            <li key={s.id || i} style={{
+              font: "700 11px/1 var(--cs-font-family-ui)",
+              textTransform: "uppercase",
+              letterSpacing: ".06em",
+              color: i === step ? "var(--cs-color-brand-umber)" : "var(--cs-color-text-primary)",
+              opacity: i === step ? 1 : 0.55,
+            }}>
+              {i + 1}. {s.title || s.id || `Step ${i + 1}`}
+            </li>
+          ))}
+        </ol>
+        {keys.length ? (
+          <div className="cs-form__summary" role="alert">
+            <b>{t("summary")}</b>
+            <ul>{keys.map((k) => <li key={k}>{ruleErrors[k]}</li>)}</ul>
+          </div>
+        ) : null}
+        <div className="cs-form-wizard__body">
+          {typeof current.render === "function" ? current.render({ values, step, setValue }) : null}
+        </div>
+        <div className="cs-form-wizard__nav" style={{ display: "flex", gap: 10, marginTop: 16 }}>
+          <button type="button" className="cs-button cs-button--secondary cs-button--sm" onClick={goBack} disabled={step === 0 || pending}>
+            {backLabel || (L === "vi" ? "Quay lại" : "Back")}
+          </button>
+          <button type="button" className="cs-button cs-button--sm" onClick={goNext} disabled={pending}>
+            {step >= steps.length - 1
+              ? (finishLabel || (L === "vi" ? "Hoàn tất" : "Finish"))
+              : (nextLabel || (L === "vi" ? "Tiếp" : "Next"))}
+          </button>
+        </div>
+      </div>
+    </Ctx.Provider>
+  );
+}

package/components/forms/Form.prompt.md

@@ -0,0 +1,46 @@
+**Form + FormField** — named-field collection + bilingual error summary; optional controller: `rules` validate on submit, `name`d FormFields auto-wire value/onChange + per-field errors. Dotted names work with field arrays (e.g. `teammates.0.name`).
+
+```jsx
+<Form rules={{email:["required", v=>/.+@.+/.test(v)?null:"Enter a valid email."]}} onSubmit={save}>
+  <FormField label="Work email" required name="email"><TextField label="Work email"/></FormField>
+  <FormField label="Đồng ý" name="agree" valueProp="checked"><Checkbox label="Đồng ý điều khoản"/></FormField>
+  <Button type="submit">Send</Button>
+</Form>
+```
+
+Manual mode unchanged: omit `rules`/`name`, pass `errors={{email:"…"}}` yourself.
+
+**asyncRules:** optional map of field name → async `(value, values) => message|null`. Runs after sync `rules` pass; blocks submit while pending.
+
+**FormFieldArray** — manage an array of row objects under `name` on the surrounding Form. Children render-prop: `({ index, item, remove, path })`.
+
+```jsx
+<Form initialValues={{teammates:[{name:""}]}} onSubmit={save}>
+  <FormFieldArray name="teammates" label="Teammates" min={1} max={5} addLabel="Add person">
+    {({ index, remove, path }) => (
+      <>
+        <FormField label={`Name ${index+1}`} name={path("name")}><TextField label="Name"/></FormField>
+        <Button type="button" variant="ghost" size="sm" onClick={remove}>Remove</Button>
+      </>
+    )}
+  </FormFieldArray>
+  <Button type="submit">Save</Button>
+</Form>
+```
+
+**FormWizard** — multi-step controller (no nested `<form>`). Each step may declare `rules` + `render()`. Finish calls `onComplete(values)`.
+
+```jsx
+<FormWizard
+  initialValues={{email:"",wish:""}}
+  onComplete={save}
+  steps={[
+    {id:"contact", title:"Contact", rules:{email:"required"},
+     render:()=><FormField label="Email" required name="email"><TextField label="Email"/></FormField>},
+    {id:"wish", title:"Wish", rules:{wish:"required"},
+     render:()=><FormField label="Wish" required name="wish"><TextField label="Wish"/></FormField>},
+  ]}
+/>
+```
+
+Helpers `getPath` / `setPath` support dotted paths (including numeric array segments). Must be used inside Form context (FormFieldArray) or FormWizard.

package/components/forms/InlineEdit.d.ts

@@ -0,0 +1,13 @@
+/** Click-to-edit text: view button ⇄ input. Enter/blur commits, Escape cancels.
+ *  Controlled (value/onChange) or uncontrolled. Bilingual edit/empty labels. */
+export interface InlineEditProps {
+  value?: string;
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  /** Accessible field name (appended to the edit label). */
+  label?: string;
+  /** "en" | "vi" — else resolved from the nearest [lang] ancestor (vi default). */
+  lang?: string;
+  className?: string;
+}
+export function InlineEdit(props: InlineEditProps): React.ReactElement;

package/components/forms/InlineEdit.figma.tsx

@@ -0,0 +1,12 @@
+import figma from '@figma/code-connect'
+import { InlineEdit } from './InlineEdit.jsx'
+
+/**
+ * Code Connect stub — InlineEdit
+ * Prop maps stay minimal until the matching Figma library component is published;
+ * then set nodeId in code-connect/node-map.json and re-run generate-code-connect.
+ */
+figma.connect(InlineEdit, 'https://www.figma.com/design/CS_FIGMA_FILE_KEY/CyberSkill?node-id=9999-44', {
+  example: () => <InlineEdit />,
+  imports: ["import { InlineEdit } from '@cyberskill/design'"],
+})

package/components/forms/InlineEdit.jsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { makeT, useLang } from "../_i18n/i18n.js";
+import { cx } from "../_utils/cx.js";
+const PEN = <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M4 20l4.5-.9L20 7.6a2 2 0 0 0-2.8-2.8L5.7 16.3 4 20z" /></svg>;
+
+/** CyberSkill InlineEdit — click-to-edit text. Enter/blur commits, Escape cancels. */
+export function InlineEdit({ value, defaultValue = "", onChange, label, lang, className }) {
+  const [inner, setInner] = React.useState(defaultValue);
+  const val = value != null ? value : inner;
+  const [edit, setEdit] = React.useState(false);
+  const [draft, setDraft] = React.useState(val);
+  const commit = () => { setEdit(false); if (draft !== val) { if (value == null) setInner(draft); onChange && onChange(draft); } };
+  const [ref, L] = useLang(lang);
+  const t = makeT("InlineEdit", L);
+  return (
+    <span ref={ref} className={cx("cs-inline-edit", className)}>
+      {edit ? (
+        <input autoFocus value={draft} aria-label={label} onChange={(e) => setDraft(e.target.value)} onBlur={commit}
+          onKeyDown={(e) => { if (e.key === "Enter") commit(); else if (e.key === "Escape") { setDraft(val); setEdit(false); } }} />
+      ) : (
+        <button type="button" className="cs-inline-edit__view" aria-label={t("edit") + (label ? ": " + label : "")} onClick={() => { setDraft(val); setEdit(true); }}>
+          <span className={val ? undefined : "ph"}>{val || t("empty")}</span>{PEN}
+        </button>
+      )}
+    </span>
+  );
+}

package/components/forms/InlineEdit.prompt.md

@@ -0,0 +1,5 @@
+**InlineEdit** — click-to-edit text (Enter/blur commits · Escape cancels). Bilingual edit/empty labels.
+
+```jsx
+<InlineEdit defaultValue="Design System v1.6" onChange={rename} label="Project name"/>
+```

package/components/forms/InputGroup.d.ts

@@ -0,0 +1,20 @@
+import type { ReactNode } from "react";
+
+/** Input with prefix/suffix addons (text or nodes), a clearable ×, and a
+ *  password show/hide reveal. Controlled or uncontrolled. */
+export interface InputGroupProps {
+  prefix?: ReactNode;
+  suffix?: ReactNode;
+  clearable?: boolean;
+  /** Renders a password field with a reveal button. */
+  password?: boolean;
+  value?: string;
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  /** "en" | "vi" — else resolved from the nearest [lang] ancestor (vi default). */
+  lang?: string;
+  className?: string;
+}
+export function InputGroup(props: InputGroupProps): React.ReactElement;

package/components/forms/InputGroup.figma.tsx

@@ -0,0 +1,12 @@
+import figma from '@figma/code-connect'
+import { InputGroup } from './InputGroup.jsx'
+
+/**
+ * Code Connect stub — InputGroup
+ * Prop maps stay minimal until the matching Figma library component is published;
+ * then set nodeId in code-connect/node-map.json and re-run generate-code-connect.
+ */
+figma.connect(InputGroup, 'https://www.figma.com/design/CS_FIGMA_FILE_KEY/CyberSkill?node-id=9999-45', {
+  example: () => <InputGroup />,
+  imports: ["import { InputGroup } from '@cyberskill/design'"],
+})

package/components/forms/InputGroup.jsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { makeT, useLang } from "../_i18n/i18n.js";
+import { cx } from "../_utils/cx.js";
+const EYE = <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg>;
+const EYE_OFF = <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/><path d="M4 4l16 16"/></svg>;
+const X = <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18"/></svg>;
+
+/** CyberSkill InputGroup — input with prefix/suffix addons, clearable ×, and password reveal. */
+export function InputGroup({ prefix, suffix, clearable = false, password = false, value, onChange, defaultValue = "", placeholder, disabled = false, lang, className, ...props }) {
+  const [inner, setInner] = React.useState(defaultValue);
+  const val = value != null ? value : inner;
+  const set = (v) => { if (value == null) setInner(v); onChange && onChange(v); };
+  const [show, setShow] = React.useState(false);
+  const [ref, L] = useLang(lang);
+  const t = makeT("InputGroup", L);
+  return (
+    <span ref={ref} className={cx("cs-igroup", className)}>
+      {prefix != null ? <span className="cs-igroup__fix">{prefix}</span> : null}
+      <input {...props} type={password && !show ? "password" : "text"} value={val} placeholder={placeholder} disabled={disabled} onChange={(e) => set(e.target.value)} />
+      {clearable && String(val).length ? <button type="button" className="cs-igroup__btn" aria-label={t("clear")} onClick={() => set("")}>{X}</button> : null}
+      {password ? <button type="button" className="cs-igroup__btn" aria-label={show ? t("hide") : t("show")} aria-pressed={show} onClick={() => setShow((s) => !s)}>{show ? EYE_OFF : EYE}</button> : null}
+      {suffix != null ? <span className="cs-igroup__fix cs-igroup__fix--suffix">{suffix}</span> : null}
+    </span>
+  );
+}

package/components/forms/InputGroup.prompt.md

@@ -0,0 +1,6 @@
+**InputGroup** — input with prefix/suffix addons, clearable ×, password reveal. Bilingual button labels via the registry.
+
+```jsx
+<InputGroup prefix="https://" suffix=".world" defaultValue="cyberskill" clearable/>
+<InputGroup password placeholder="Password"/>
+```

package/components/forms/InputOTP.d.ts

@@ -0,0 +1,16 @@
+/** One-time-code input: N digit boxes with auto-advance, backspace and paste.
+ *  Controlled (value/onChange) or uncontrolled. onComplete fires at full length. */
+export interface InputOTPProps {
+  /** Box count. Default 6. */
+  length?: number;
+  value?: string;
+  onChange?: (code: string) => void;
+  onComplete?: (code: string) => void;
+  /** Accessible label. Default from the bilingual registry ("One-time code" / "Mã dùng một lần"). */
+  label?: string;
+  /** "en" | "vi" — else resolved from the nearest [lang] ancestor (vi default). */
+  lang?: string;
+  disabled?: boolean;
+  className?: string;
+}
+export function InputOTP(props: InputOTPProps): React.ReactElement;

package/components/forms/InputOTP.figma.tsx

@@ -0,0 +1,12 @@
+import figma from '@figma/code-connect'
+import { InputOTP } from './InputOTP.jsx'
+
+/**
+ * Code Connect stub — InputOTP
+ * Prop maps stay minimal until the matching Figma library component is published;
+ * then set nodeId in code-connect/node-map.json and re-run generate-code-connect.
+ */
+figma.connect(InputOTP, 'https://www.figma.com/design/CS_FIGMA_FILE_KEY/CyberSkill?node-id=9999-46', {
+  example: () => <InputOTP />,
+  imports: ["import { InputOTP } from '@cyberskill/design'"],
+})