@cyberskill/design 1.0.0

package/components/forms/InputOTP.jsx

@@ -0,0 +1,47 @@
+import React from "react";
+import { makeT, useLang } from "../_i18n/i18n.js";
+import { cx } from "../_utils/cx.js";
+
+/** CyberSkill InputOTP — one-time-code boxes: auto-advance, backspace, paste. Digits only. */
+export function InputOTP({ length = 6, value, onChange, onComplete, label, lang, disabled = false, className }) {
+  const [inner, setInner] = React.useState("");
+  const val = (value != null ? value : inner).slice(0, length);
+  const boxes = React.useRef([]);
+  const set = (v) => {
+    v = v.replace(/\D/g, "").slice(0, length);
+    if (value == null) setInner(v);
+    onChange && onChange(v);
+    if (v.length === length && onComplete) onComplete(v);
+  };
+  const [ref, L] = useLang(lang);
+  const lbl = label != null ? label : makeT("InputOTP", L)("label");
+  return (
+    <div ref={ref} className={cx("cs-otp", className)} role="group" aria-label={lbl}>
+      {Array.from({ length }).map((_, i) => (
+        <input key={i} ref={(el) => (boxes.current[i] = el)} inputMode="numeric" pattern="[0-9]*" maxLength={1} disabled={disabled}
+          value={val[i] || ""} aria-label={lbl + " " + (i + 1) + "/" + length}
+          onChange={(e) => {
+            const c = e.target.value.replace(/\D/g, "");
+            if (!c) return;
+            set(val.slice(0, i) + c + val.slice(i + 1));
+            const nb = boxes.current[i + 1]; if (nb) nb.focus();
+          }}
+          onKeyDown={(e) => {
+            if (e.key !== "Backspace") return;
+            e.preventDefault();
+            const arr = val.split("");
+            if (arr[i]) arr.splice(i, 1); else if (i > 0) arr.splice(i - 1, 1);
+            set(arr.join(""));
+            const pb = boxes.current[Math.max(0, i - 1)]; if (pb) pb.focus();
+          }}
+          onPaste={(e) => {
+            e.preventDefault();
+            const p = (e.clipboardData.getData("text") || "").replace(/\D/g, "").slice(0, length);
+            set(p);
+            const nb = boxes.current[Math.min(length - 1, p.length)]; if (nb) nb.focus();
+          }}
+        />
+      ))}
+    </div>
+  );
+}

package/components/forms/InputOTP.prompt.md

@@ -0,0 +1,5 @@
+**InputOTP** — one-time-code boxes (auto-advance · backspace · paste · digits only). Bilingual aria via the registry.
+
+```jsx
+<InputOTP length={6} onComplete={(code)=>verify(code)}/>
+```

package/components/forms/Mentions.d.ts

@@ -0,0 +1,13 @@
+/** Textarea with @user suggestions (typeahead on the trailing "@word"). */
+export interface MentionsProps {
+  value?: string;
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  /** Usernames offered after "@". */
+  users: string[];
+  placeholder?: string;
+  rows?: number;
+  lang?: string;
+  className?: string;
+}
+export function Mentions(props: MentionsProps): React.ReactElement;

package/components/forms/Mentions.figma.tsx

@@ -0,0 +1,12 @@
+import figma from '@figma/code-connect'
+import { Mentions } from './Mentions.jsx'
+
+/**
+ * Code Connect stub — Mentions
+ * 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(Mentions, 'https://www.figma.com/design/CS_FIGMA_FILE_KEY/CyberSkill?node-id=9999-53', {
+  example: () => <Mentions />,
+  imports: ["import { Mentions } from '@cyberskill/design'"],
+})

package/components/forms/Mentions.jsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { makeT, useLang } from "../_i18n/i18n.js";
+import { cx } from "../_utils/cx.js";
+
+/** CyberSkill Mentions — textarea that suggests @users while typing. */
+export function Mentions({ value, defaultValue = "", onChange, users = [], placeholder, rows = 3, lang, className }) {
+  const [inner, setInner] = React.useState(defaultValue);
+  const val = value != null ? value : inner;
+  const set = (v) => { if (value == null) setInner(v); onChange && onChange(v); };
+  const [q, setQ] = React.useState(null);
+  const [ref, L] = useLang(lang);
+  const t = makeT("Mentions", L);
+  const ph = placeholder != null ? placeholder : t("placeholder");
+  const onInput = (v) => {
+    set(v);
+    const m = /(^|\s)@(\w*)$/.exec(v);
+    setQ(m ? m[2].toLowerCase() : null);
+  };
+  const hits = q == null ? [] : users.filter((u) => u.toLowerCase().includes(q)).slice(0, 6);
+  const pick = (u) => { set(val.replace(/(^|\s)@\w*$/, "$1@" + u + " ")); setQ(null); };
+  return (
+    <span ref={ref} className={cx("cs-mentions", className)}>
+      <textarea className="cs-field__control" rows={rows} value={val} placeholder={ph} onChange={(e) => onInput(e.target.value)} />
+      {hits.length ? (
+        <span className="cs-mentions__pop" role="listbox">
+          {hits.map((u) => <button key={u} type="button" role="option" onMouseDown={(e) => { e.preventDefault(); pick(u); }}>@{u}</button>)}
+        </span>
+      ) : null}
+    </span>
+  );
+}

package/components/forms/Mentions.prompt.md

@@ -0,0 +1,5 @@
+**Mentions** — textarea suggesting @users as you type.
+
+```jsx
+<Mentions users={["anle","baovu","lumi"]} placeholder="Add a note — @ to mention"/>
+```

package/components/forms/NumberField.d.ts

@@ -0,0 +1,14 @@
+import type * as React from "react";
+
+/** Numeric stepper with −/+ buttons, keyboard entry, and min/max clamping.
+ *  Controlled via value/onChange or uncontrolled. */
+export interface NumberFieldProps {
+  value?: number;
+  onChange?: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  disabled?: boolean;
+  className?: string;
+}
+export function NumberField(props: NumberFieldProps): React.ReactElement;

package/components/forms/NumberField.figma.tsx

@@ -0,0 +1,12 @@
+import figma from '@figma/code-connect'
+import { NumberField } from './NumberField.jsx'
+
+/**
+ * Code Connect stub — NumberField
+ * 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(NumberField, 'https://www.figma.com/design/CS_FIGMA_FILE_KEY/CyberSkill?node-id=9999-57', {
+  example: () => <NumberField />,
+  imports: ["import { NumberField } from '@cyberskill/design'"],
+})

package/components/forms/NumberField.jsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { makeT, useLang } from "../_i18n/i18n.js";
+import { cx } from "../_utils/cx.js";
+
+/** CyberSkill NumberField — numeric stepper with −/+ buttons and clamping. */
+// `children` is destructured but never rendered on purpose: keeps stray children out of {...props} → void <input>.
+export function NumberField({ value, onChange, min, max, step = 1, disabled = false, lang, className, children, ...props }) {
+  const [inner, setInner] = React.useState(0);
+  const val = value != null ? value : inner;
+  const clamp = (n) => { if (min != null) n = Math.max(min, n); if (max != null) n = Math.min(max, n); return n; };
+  const set = (n) => { const c = clamp(n); onChange ? onChange(c) : setInner(c); };
+  const [ref, L] = useLang(lang);
+  const t = makeT("NumberField", L);
+  return (
+    <div ref={ref} className={cx("cs-stepper", className)}>
+      <button type="button" aria-label={t("decrease")} disabled={disabled || (min != null && val <= min)} onClick={() => set(val - step)}>−</button>
+      <input type="number" value={val} min={min} max={max} step={step} disabled={disabled} onChange={(e) => set(Number(e.target.value))} {...props} />
+      <button type="button" aria-label={t("increase")} disabled={disabled || (max != null && val >= max)} onClick={() => set(val + step)}>+</button>
+    </div>
+  );
+}

package/components/forms/NumberField.prompt.md

@@ -0,0 +1,5 @@
+**NumberField** — numeric stepper with −/+ buttons and min/max clamping.
+
+```jsx
+<NumberField value={seats} onChange={setSeats} min={1} max={20} />
+```

package/components/forms/RadioGroup.d.ts

@@ -0,0 +1,24 @@
+import type * as React from "react";
+import type { ReactNode } from "react";
+
+export interface RadioProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label: ReactNode;
+  description?: ReactNode;
+}
+export function Radio(props: RadioProps): React.ReactElement;
+
+export interface RadioOption { value: string; label: ReactNode; description?: ReactNode; disabled?: boolean; }
+
+/**
+ * A grouped set of radios (single choice) rendered as a labelled fieldset,
+ * controlled by `value` / `onChange`.
+ */
+export interface RadioGroupProps {
+  legend?: ReactNode;
+  name?: string;
+  value?: string;
+  onChange?: (value: string) => void;
+  options: RadioOption[];
+  className?: string;
+}
+export function RadioGroup(props: RadioGroupProps): React.ReactElement;

package/components/forms/RadioGroup.figma.tsx

@@ -0,0 +1,12 @@
+import figma from '@figma/code-connect'
+import { RadioGroup } from './RadioGroup.jsx'
+
+/**
+ * Code Connect stub — RadioGroup
+ * 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(RadioGroup, 'https://www.figma.com/design/CS_FIGMA_FILE_KEY/CyberSkill?node-id=9999-65', {
+  example: () => <RadioGroup />,
+  imports: ["import { RadioGroup } from '@cyberskill/design'"],
+})

package/components/forms/RadioGroup.jsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { cx } from "../_utils/cx.js";
+
+/** A single labelled radio (brand accent-color). Usually composed via RadioGroup. */
+// `children` is destructured but never rendered on purpose: keeps stray children out of {...props} → void <input>.
+export function Radio({ label, description, disabled = false, className, children, ...props }) {
+  return (
+    <label className={cx("cs-radio", disabled && "is-disabled", className)}>
+      <input type="radio" disabled={disabled} {...props} />
+      <span className="cs-radio__text">
+        <span>{label}</span>
+        {description ? <span className="cs-radio__desc">{description}</span> : null}
+      </span>
+    </label>
+  );
+}
+
+/** CyberSkill RadioGroup — a fieldset of radios from `options`, controlled by value/onChange. */
+export function RadioGroup({ legend, name, value, onChange, options = [], className }) {
+  const gid = React.useId();
+  const nm = name ?? gid;
+  return (
+    <fieldset className={cx("cs-radio-group", className)}>
+      {legend ? <legend>{legend}</legend> : null}
+      {options.map((o) => (
+        <Radio key={o.value} name={nm} value={o.value} label={o.label} description={o.description}
+          disabled={o.disabled} checked={value === o.value}
+          onChange={() => onChange && onChange(o.value)} />
+      ))}
+    </fieldset>
+  );
+}

package/components/forms/RadioGroup.prompt.md

@@ -0,0 +1,6 @@
+**RadioGroup / Radio** — single-choice radios in a labelled fieldset, controlled by `value`/`onChange`. Brand accent-color.
+
+```jsx
+<RadioGroup legend="Plan" value={plan} onChange={setPlan}
+  options={[{value:"mo",label:"Monthly"},{value:"yr",label:"Annual",description:"Two months free"}]} />
+```

package/components/forms/Rating.d.ts

@@ -0,0 +1,16 @@
+/** Whole-star rating (radiogroup). Controlled (value/onChange) or uncontrolled
+ *  (defaultValue). Clicking the current value clears to 0. readOnly for display. */
+export interface RatingProps {
+  value?: number;
+  defaultValue?: number;
+  onChange?: (value: number) => void;
+  /** Star count. Default 5. */
+  max?: number;
+  readOnly?: boolean;
+  /** Accessible label. Default from the bilingual registry ("Rating" / "Đánh giá"). */
+  label?: string;
+  /** "en" | "vi" — else resolved from the nearest [lang] ancestor (vi default). */
+  lang?: string;
+  className?: string;
+}
+export function Rating(props: RatingProps): React.ReactElement;

package/components/forms/Rating.figma.tsx

@@ -0,0 +1,12 @@
+import figma from '@figma/code-connect'
+import { Rating } from './Rating.jsx'
+
+/**
+ * Code Connect stub — Rating
+ * 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(Rating, 'https://www.figma.com/design/CS_FIGMA_FILE_KEY/CyberSkill?node-id=9999-66', {
+  example: () => <Rating />,
+  imports: ["import { Rating } from '@cyberskill/design'"],
+})

package/components/forms/Rating.jsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { makeT, useLang } from "../_i18n/i18n.js";
+import { cx } from "../_utils/cx.js";
+const STAR = "M12 2l2.9 6.2 6.6.8-4.9 4.6 1.3 6.5L12 16.9 6.1 20l1.3-6.5L2.5 9l6.6-.8z";
+
+/** CyberSkill Rating — whole-star rating. Controlled or uncontrolled; readOnly for display. Click the current value to clear. */
+export function Rating({ value, defaultValue = 0, onChange, max = 5, readOnly = false, label, lang, className }) {
+  const [inner, setInner] = React.useState(defaultValue);
+  const val = value != null ? value : inner;
+  const set = (n) => { if (readOnly) return; const v = n === val ? 0 : n; if (value == null) setInner(v); onChange && onChange(v); };
+  const [ref, L] = useLang(lang);
+  const lbl = label != null ? label : makeT("Rating", L)("label");
+  return (
+    <div ref={ref} className={cx("cs-rating", className)} role="radiogroup" aria-label={lbl + ": " + val + " / " + max} data-readonly={readOnly ? "true" : undefined}>
+      {Array.from({ length: max }).map((_, i) => (
+        <button key={i} type="button" role="radio" aria-checked={i < val} aria-label={(i + 1) + " / " + max} className={i < val ? "on" : undefined} onClick={() => set(i + 1)} tabIndex={readOnly ? -1 : 0}>
+          <svg width="22" height="22" viewBox="0 0 24 24" fill={i < val ? "currentColor" : "none"} stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round" aria-hidden="true"><path d={STAR} /></svg>
+        </button>
+      ))}
+    </div>
+  );
+}

package/components/forms/Rating.prompt.md

@@ -0,0 +1,6 @@
+**Rating** — whole-star rating (ochre stars). Controlled or uncontrolled; `readOnly` for display; click current value to clear. Bilingual aria via the registry.
+
+```jsx
+<Rating defaultValue={4} onChange={setStars}/>
+<Rating value={3} readOnly/>
+```

package/components/forms/SearchField.d.ts

@@ -0,0 +1,11 @@
+import type * as React from "react";
+
+/** Pill-shaped search input with a leading icon and a clear button. Controlled
+ *  (value/onChange) or uncontrolled. */
+export interface SearchFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "value"> {
+  value?: string;
+  onChange?: (value: string) => void;
+  onClear?: () => void;
+  placeholder?: string;
+}
+export function SearchField(props: SearchFieldProps): React.ReactElement;

package/components/forms/SearchField.figma.tsx

@@ -0,0 +1,12 @@
+import figma from '@figma/code-connect'
+import { SearchField } from './SearchField.jsx'
+
+/**
+ * Code Connect stub — SearchField
+ * 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(SearchField, 'https://www.figma.com/design/CS_FIGMA_FILE_KEY/CyberSkill?node-id=9999-68', {
+  example: () => <SearchField />,
+  imports: ["import { SearchField } from '@cyberskill/design'"],
+})

package/components/forms/SearchField.jsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { makeT, useLang } from "../_i18n/i18n.js";
+import { cx } from "../_utils/cx.js";
+
+/** CyberSkill SearchField — pill search input with icon + clear. Controlled or uncontrolled. */
+// `children` is destructured but never rendered on purpose: keeps stray children out of {...props} → void <input>.
+export function SearchField({ value, onChange, onClear, placeholder, lang, className, children, ...props }) {
+  const [inner, setInner] = React.useState("");
+  const val = value != null ? value : inner;
+  const set = (v) => (onChange ? onChange(v) : setInner(v));
+  const [ref, L] = useLang(lang);
+  const t = makeT("SearchField", L);
+  const ph = placeholder != null ? placeholder : t("placeholder");
+  return (
+    <div ref={ref} className={cx("cs-search", className)}>
+      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7" /><path d="M21 21l-4.3-4.3" /></svg>
+      <input {...props} type="text" role="searchbox" value={val} placeholder={ph} onChange={(e) => set(e.target.value)} />
+      {String(val).length ? (
+        <button type="button" className="cs-search__clear" aria-label={t("clear")} onClick={() => { set(""); onClear && onClear(); }}>
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M6 6l12 12M18 6L6 18" /></svg>
+        </button>
+      ) : null}
+    </div>
+  );
+}

package/components/forms/SearchField.prompt.md

@@ -0,0 +1,5 @@
+**SearchField** — pill search input with icon + clear button.
+
+```jsx
+<SearchField value={q} onChange={setQ} placeholder="Search projects…" />
+```

package/components/forms/SegmentedControl.d.ts

@@ -0,0 +1,13 @@
+import type * as React from "react";
+import type { ReactNode } from "react";
+
+export interface SegmentOption { value: string; label: ReactNode; icon?: ReactNode; }
+
+/** Pill toggle group for a small set of mutually exclusive options (the Status
+ *  Hub board/table/releases switcher). Controlled via value/onChange. */
+export interface SegmentedControlProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+  options: SegmentOption[];
+  value?: string;
+  onChange?: (value: string) => void;
+}
+export function SegmentedControl(props: SegmentedControlProps): React.ReactElement;

package/components/forms/SegmentedControl.figma.tsx

@@ -0,0 +1,12 @@
+import figma from '@figma/code-connect'
+import { SegmentedControl } from './SegmentedControl.jsx'
+
+/**
+ * Code Connect stub — SegmentedControl
+ * 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(SegmentedControl, 'https://www.figma.com/design/CS_FIGMA_FILE_KEY/CyberSkill?node-id=9999-69', {
+  example: () => <SegmentedControl />,
+  imports: ["import { SegmentedControl } from '@cyberskill/design'"],
+})

package/components/forms/SegmentedControl.jsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { cx } from "../_utils/cx.js";
+
+/** CyberSkill SegmentedControl — pill toggle group (single select). Matches the Status Hub lens switcher. */
+export function SegmentedControl({ options = [], value, onChange, className, ...props }) {
+  const refs = React.useRef([]);
+  const idx = Math.max(0, options.findIndex((o) => o.value === value));
+  const key = (e, i) => {
+    let n = null;
+    if (e.key === "ArrowRight") n = (i + 1) % options.length;
+    else if (e.key === "ArrowLeft") n = (i - 1 + options.length) % options.length;
+    else if (e.key === "Home") n = 0;
+    else if (e.key === "End") n = options.length - 1;
+    if (n == null) return;
+    e.preventDefault();
+    if (onChange) onChange(options[n].value);
+    const b = refs.current[n]; if (b) b.focus();
+  };
+  return (
+    <div role="tablist" className={cx("cs-segmented", className)} {...props}>
+      {options.map((o, i) => (
+        <button key={o.value} type="button" role="tab" aria-selected={value === o.value} aria-pressed={value === o.value}
+          tabIndex={i === idx ? 0 : -1} ref={(el) => (refs.current[i] = el)} onKeyDown={(e) => key(e, i)}
+          onClick={() => onChange && onChange(o.value)}>
+          {o.icon ? <span aria-hidden="true">{o.icon}</span> : null}
+          {o.label}
+        </button>
+      ))}
+    </div>
+  );
+}

package/components/forms/SegmentedControl.prompt.md

@@ -0,0 +1,6 @@
+**SegmentedControl** — pill toggle group for a few mutually exclusive options (the Status Hub lens switcher). Controlled via `value`/`onChange`.
+
+```jsx
+<SegmentedControl value={lens} onChange={setLens}
+  options={[{value:"board",label:"Board"},{value:"table",label:"Table"}]} />
+```

package/components/forms/Select.d.ts

@@ -0,0 +1,19 @@
+import type * as React from "react";
+import type { ReactNode } from "react";
+
+export interface SelectOption { value: string; label: string; }
+
+/**
+ * Labelled native select in the CyberSkill field frame, with a custom chevron
+ * and the same description/error wiring as TextField. Diacritic-safe.
+ */
+export interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
+  label?: ReactNode;
+  description?: ReactNode;
+  error?: ReactNode;
+  /** Options as data; alternatively pass <option> children. */
+  options?: SelectOption[];
+  children?: ReactNode;
+}
+
+export function Select(props: SelectProps): React.ReactElement;

package/components/forms/Select.figma.tsx

@@ -0,0 +1,12 @@
+import figma from '@figma/code-connect'
+import { Select } from './Select.jsx'
+
+/**
+ * Code Connect stub — Select
+ * 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(Select, 'https://www.figma.com/design/CS_FIGMA_FILE_KEY/CyberSkill?node-id=9999-70', {
+  example: () => <Select />,
+  imports: ["import { Select } from '@cyberskill/design'"],
+})

package/components/forms/Select.jsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { cx } from "../_utils/cx.js";
+
+/** CyberSkill Select — native <select> in the .cs-field frame with a chevron.
+ *  Pass `options` [{value,label}] or <option> children. */
+export function Select({ id, label, description, error, options, children, disabled = false, className, ...props }) {
+  const gid = React.useId();
+  const sid = id ?? gid;
+  const descId = description ? sid + "-desc" : undefined;
+  const errId = error ? sid + "-err" : undefined;
+  const describedBy = [descId, errId].filter(Boolean).join(" ") || undefined;
+  return (
+    <label className={cx("cs-field", disabled && "is-disabled", error && "is-invalid", className)} htmlFor={sid}>
+      {label ? <span className="cs-field__label">{label}</span> : null}
+      {description ? <span id={descId} className="cs-field__description">{description}</span> : null}
+      <span className="cs-select">
+        <select {...props} id={sid} disabled={disabled} aria-invalid={error ? true : undefined} aria-describedby={describedBy} className="cs-field__control">
+          {options ? options.map((o) => <option key={o.value} value={o.value}>{o.label}</option>) : children}
+        </select>
+        <span className="cs-select__chevron" aria-hidden="true">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M6 9l6 6 6-6" /></svg>
+        </span>
+      </span>
+      {error ? <span id={errId} className="cs-field__error" role="alert">{error}</span> : null}
+    </label>
+  );
+}

package/components/forms/Select.prompt.md

@@ -0,0 +1,6 @@
+**Select** — labelled native select in the `.cs-field` frame with a custom chevron; same description/error wiring as TextField.
+
+```jsx
+<Select label="Squad" options={[{value:"plat",label:"Platform"},{value:"ai",label:"AI"}]} />
+<Select label="Locale"><option>EN</option><option>Tiếng Việt</option></Select>
+```

package/components/forms/Slider.d.ts

@@ -0,0 +1,6 @@
+import type * as React from "react";
+
+/** Brand-tinted native range slider (Umber, Ochre in dark). Pass all native
+ *  range props (min, max, step, value, defaultValue, onChange). */
+export interface SliderProps extends React.InputHTMLAttributes<HTMLInputElement> {}
+export function Slider(props: SliderProps): React.ReactElement;

package/components/forms/Slider.figma.tsx

@@ -0,0 +1,12 @@
+import figma from '@figma/code-connect'
+import { Slider } from './Slider.jsx'
+
+/**
+ * Code Connect stub — Slider
+ * 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(Slider, 'https://www.figma.com/design/CS_FIGMA_FILE_KEY/CyberSkill?node-id=9999-73', {
+  example: () => <Slider />,
+  imports: ["import { Slider } from '@cyberskill/design'"],
+})

package/components/forms/Slider.jsx

@@ -0,0 +1,8 @@
+import React from "react";
+import { cx } from "../_utils/cx.js";
+
+/** CyberSkill Slider — brand-tinted native range input. Pass native props (min/max/step/value/onChange). */
+// `children` is destructured but never rendered on purpose: keeps stray children out of {...props} → void <input>.
+export function Slider({ className, children, ...props }) {
+  return <input type="range" className={cx("cs-slider", className)} {...props} />;
+}

package/components/forms/Slider.prompt.md

@@ -0,0 +1,5 @@
+**Slider** — brand-tinted native range input.
+
+```jsx
+<Slider min={0} max={100} value={v} onChange={e => setV(+e.target.value)} />
+```

package/components/forms/Switch.d.ts

@@ -0,0 +1,12 @@
+import type * as React from "react";
+import type { ReactNode } from "react";
+
+/**
+ * Accessible on/off toggle (`role="switch"`). Track fills Umber when on.
+ * Use for instant-apply settings; use Checkbox inside forms that submit.
+ */
+export interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
+  label?: ReactNode;
+}
+
+export function Switch(props: SwitchProps): React.ReactElement;

package/components/forms/Switch.figma.tsx

@@ -0,0 +1,12 @@
+import figma from '@figma/code-connect'
+import { Switch } from './Switch.jsx'
+
+/**
+ * Code Connect stub — Switch
+ * 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(Switch, 'https://www.figma.com/design/CS_FIGMA_FILE_KEY/CyberSkill?node-id=9999-80', {
+  example: () => <Switch />,
+  imports: ["import { Switch } from '@cyberskill/design'"],
+})

package/components/forms/Switch.jsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { cx } from "../_utils/cx.js";
+
+/** CyberSkill Switch — accessible toggle (role="switch"); Umber on, Ochre knob-track in dark. */
+// `children` is destructured but never rendered on purpose: keeps stray children out of {...props} → void <input>.
+export function Switch({ label, disabled = false, className, children, ...props }) {
+  return (
+    <label className={cx("cs-switch", disabled && "is-disabled", className)}>
+      <input type="checkbox" role="switch" disabled={disabled} {...props} />
+      <span className="cs-switch__track" aria-hidden="true" />
+      {label ? <span className="cs-switch__label">{label}</span> : null}
+    </label>
+  );
+}

package/components/forms/Switch.prompt.md

@@ -0,0 +1,5 @@
+**Switch** — accessible on/off toggle (`role="switch"`), Umber track when on. For instant-apply settings (use Checkbox in forms that submit).
+
+```jsx
+<Switch label="Dark theme" checked={dark} onChange={e => setDark(e.target.checked)} />
+```

package/components/forms/TagInput.d.ts

@@ -0,0 +1,16 @@
+/** Multi-value token input: Enter/comma adds a tag, Backspace removes the last,
+ *  blur commits, duplicates ignored. Controlled (value/onChange) or uncontrolled. */
+export interface TagInputProps {
+  value?: string[];
+  defaultValue?: string[];
+  onChange?: (tags: string[]) => void;
+  /** Default from the bilingual registry ("Add a tag…" / "Thêm thẻ…"). */
+  placeholder?: string;
+  /** Max tag count. */
+  max?: number;
+  disabled?: boolean;
+  /** "en" | "vi" — else resolved from the nearest [lang] ancestor (vi default). */
+  lang?: string;
+  className?: string;
+}
+export function TagInput(props: TagInputProps): React.ReactElement;