@cyberskill/design 1.0.0

package/components/forms/TagInput.figma.tsx

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

package/components/forms/TagInput.jsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { makeT, useLang } from "../_i18n/i18n.js";
+import { cx } from "../_utils/cx.js";
+
+/** CyberSkill TagInput — multi-value token input. Enter/comma adds, Backspace removes last, blur commits. */
+export function TagInput({ value, defaultValue = [], onChange, placeholder, max, disabled = false, lang, className }) {
+  const [inner, setInner] = React.useState(defaultValue);
+  const tags = value != null ? value : inner;
+  const [q, setQ] = React.useState("");
+  const set = (arr) => { if (value == null) setInner(arr); onChange && onChange(arr); };
+  const add = (s) => {
+    s = s.trim();
+    if (!s) return;
+    if (tags.includes(s)) { setQ(""); return; }
+    if (max != null && tags.length >= max) return;
+    set([...tags, s]); setQ("");
+  };
+  const [ref, L] = useLang(lang);
+  const t = makeT("TagInput", L);
+  const ph = placeholder != null ? placeholder : t("placeholder");
+  return (
+    <div ref={ref} className={cx("cs-taginput", className)}>
+      {tags.map((tag) => (
+        <span key={tag} className="cs-tag">{tag}
+          <button type="button" className="cs-tag__close" aria-label={t("remove") + " " + tag} onClick={() => set(tags.filter((x) => x !== tag))} disabled={disabled}>
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18" /></svg>
+          </button>
+        </span>
+      ))}
+      <input value={q} placeholder={tags.length ? "" : ph} disabled={disabled}
+        onChange={(e) => setQ(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" || e.key === ",") { e.preventDefault(); add(q); }
+          else if (e.key === "Backspace" && !q && tags.length) { set(tags.slice(0, -1)); }
+        }}
+        onBlur={() => add(q)} />
+    </div>
+  );
+}

package/components/forms/TagInput.prompt.md

@@ -0,0 +1,5 @@
+**TagInput** — multi-value tokens (Enter/comma adds · Backspace removes · blur commits). Bilingual placeholder + remove labels via the registry.
+
+```jsx
+<TagInput defaultValue={["Web apps","Bilingual"]} onChange={setTags} max={8}/>
+```

package/components/forms/Textarea.d.ts

@@ -0,0 +1,14 @@
+import type * as React from "react";
+import type { ReactNode } from "react";
+
+/**
+ * Multi-line text input in the CyberSkill field frame, with description + error
+ * wiring identical to TextField. Vertically resizable; diacritic/IME-safe.
+ */
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  label?: ReactNode;
+  description?: ReactNode;
+  error?: ReactNode;
+}
+
+export function Textarea(props: TextareaProps): React.ReactElement;

package/components/forms/Textarea.figma.tsx

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

package/components/forms/Textarea.jsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { cx } from "../_utils/cx.js";
+
+/** CyberSkill Textarea — multi-line input in the .cs-field frame; label/description/error. */
+export function Textarea({ id, label, description, error, disabled = false, rows = 4, className, ...props }) {
+  const gid = React.useId();
+  const tid = id ?? gid;
+  const descId = description ? tid + "-desc" : undefined;
+  const errId = error ? tid + "-err" : undefined;
+  const describedBy = [descId, errId].filter(Boolean).join(" ") || undefined;
+  return (
+    <label className={cx("cs-field", disabled && "is-disabled", error && "is-invalid", className)} htmlFor={tid}>
+      {label ? <span className="cs-field__label">{label}</span> : null}
+      {description ? <span id={descId} className="cs-field__description">{description}</span> : null}
+      <textarea {...props} id={tid} rows={rows} disabled={disabled} aria-invalid={error ? true : undefined} aria-describedby={describedBy} className="cs-field__control" />
+      {error ? <span id={errId} className="cs-field__error" role="alert">{error}</span> : null}
+    </label>
+  );
+}

package/components/forms/Textarea.prompt.md

@@ -0,0 +1,5 @@
+**Textarea** — multi-line input in the `.cs-field` frame; description + error like TextField, vertically resizable.
+
+```jsx
+<Textarea label="Tell us your wish" description="A sentence or two is plenty." rows={4} />
+```

package/components/forms/TimePicker.d.ts

@@ -0,0 +1,16 @@
+/** 24-hour time select in fixed minute steps (default 30). Controlled:
+ *  value "HH:MM" / onChange("HH:MM"). Bilingual aria label via the registry. */
+export interface TimePickerProps {
+  /** "HH:MM" 24h. Default "09:00". */
+  value?: string;
+  onChange?: (time: string) => void;
+  /** Minute step. Default 30. */
+  step?: number;
+  /** Accessible label. Default from the registry ("Time" / "Giờ"). */
+  label?: string;
+  disabled?: boolean;
+  /** "en" | "vi" — else resolved from the nearest [lang] ancestor (vi default). */
+  lang?: string;
+  className?: string;
+}
+export function TimePicker(props: TimePickerProps): React.ReactElement;

package/components/forms/TimePicker.figma.tsx

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

package/components/forms/TimePicker.jsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { makeT, useLang } from "../_i18n/i18n.js";
+import { cx } from "../_utils/cx.js";
+const CLOCK = <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 3" /></svg>;
+
+/** CyberSkill TimePicker — 24h time select in fixed steps. Controlled value ("HH:MM")/onChange. */
+export function TimePicker({ value = "09:00", onChange, step = 30, label, disabled = false, lang, className }) {
+  const [ref, L] = useLang(lang);
+  const t = makeT("TimePicker", L);
+  const opts = [];
+  for (let m = 0; m < 24 * 60; m += step) {
+    opts.push(String(Math.floor(m / 60)).padStart(2, "0") + ":" + String(m % 60).padStart(2, "0"));
+  }
+  return (
+    <span ref={ref} className={cx("cs-timepicker", className)}>
+      {CLOCK}
+      <select aria-label={label != null ? label : t("label")} disabled={disabled} value={value} onChange={(e) => onChange && onChange(e.target.value)}>
+        {opts.map((o) => <option key={o} value={o}>{o}</option>)}
+      </select>
+    </span>
+  );
+}

package/components/forms/TimePicker.prompt.md

@@ -0,0 +1,5 @@
+**TimePicker** — 24h time select in fixed steps (VN-friendly 24h clock).
+
+```jsx
+<TimePicker value={time} onChange={setTime} step={15}/>
+```

package/components/forms/Toggle.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+
+/** A single pressable on/off button (aria-pressed). Not a form Switch and not a
+ *  SegmentedControl — use it for standalone style/state toggles (e.g. Bold). */
+export interface ToggleProps {
+  /** Controlled pressed state. */
+  pressed?: boolean;
+  /** Uncontrolled initial state. Default false. */
+  defaultPressed?: boolean;
+  onChange?: (pressed: boolean) => void;
+  icon?: ReactNode;
+  children?: ReactNode;
+  disabled?: boolean;
+  className?: string;
+}
+export function Toggle(props: ToggleProps): React.ReactElement;

package/components/forms/Toggle.figma.tsx

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

package/components/forms/Toggle.jsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { cx } from "../_utils/cx.js";
+
+/** CyberSkill Toggle — a single pressable on/off button (≠ Switch: no form semantics; ≠ SegmentedControl: standalone). */
+export function Toggle({ pressed, defaultPressed = false, onChange, icon, children, disabled = false, className, ...props }) {
+  const [inner, setInner] = React.useState(defaultPressed);
+  const on = pressed != null ? pressed : inner;
+  const flip = () => { const v = !on; if (pressed == null) setInner(v); onChange && onChange(v); };
+  return (
+    <button type="button" className={cx("cs-toggle", className)} aria-pressed={on} disabled={disabled} onClick={flip} {...props}>
+      {icon ? <span aria-hidden="true" style={{ display: "inline-flex" }}>{icon}</span> : null}
+      {children}
+    </button>
+  );
+}

package/components/forms/Toggle.prompt.md

@@ -0,0 +1,6 @@
+**Toggle** — single pressable on/off button (`aria-pressed`). Standalone state toggle; not a Switch (form) or SegmentedControl (choice set).
+
+```jsx
+<Toggle defaultPressed icon={<Icon name="sparkle" size="sm"/>}>Bold</Toggle>
+<Toggle pressed={on} onChange={setOn}>Aurora wash</Toggle>
+```

package/components/forms/Transfer.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from "react";
+
+/** Two-list mover: check items, ‹/› them across. value = keys in the target list. */
+export interface TransferItem { key: string; label: ReactNode; }
+export interface TransferProps {
+  items: TransferItem[];
+  value?: string[];
+  onChange?: (targetKeys: string[]) => void;
+  /** [sourceTitle, targetTitle]; bilingual defaults from the registry. */
+  titles?: [ReactNode, ReactNode];
+  lang?: string;
+  className?: string;
+}
+export function Transfer(props: TransferProps): React.ReactElement;

package/components/forms/Transfer.figma.tsx

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

package/components/forms/Transfer.jsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { makeT, useLang } from "../_i18n/i18n.js";
+import { cx } from "../_utils/cx.js";
+
+/** CyberSkill Transfer — move items between two lists (checkbox select + ⇄ buttons). */
+export function Transfer({ items = [], value = [], onChange, titles, lang, className }) {
+  const [checked, setChecked] = React.useState([]);
+  const [ref, L] = useLang(lang);
+  const t = makeT("Transfer", L);
+  const tt = titles || [t("source"), t("target")];
+  const inTarget = (k) => value.includes(k);
+  const toggle = (k) => setChecked((c) => (c.includes(k) ? c.filter((x) => x !== k) : [...c, k]));
+  const move = (toTarget) => {
+    const mv = checked.filter((k) => inTarget(k) !== toTarget);
+    if (!mv.length) return;
+    onChange && onChange(toTarget ? [...value, ...mv] : value.filter((k) => !mv.includes(k)));
+    setChecked([]);
+  };
+  const List = ({ target }) => (
+    <div className="cs-transfer__list">
+      <div className="cs-transfer__title">{target ? tt[1] : tt[0]}</div>
+      <ul>
+        {items.filter((it) => inTarget(it.key) === target).map((it) => (
+          <li key={it.key}>
+            <label><input type="checkbox" checked={checked.includes(it.key)} onChange={() => toggle(it.key)} /> {it.label}</label>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+  return (
+    <div ref={ref} className={cx("cs-transfer", className)}>
+      <List target={false} />
+      <div className="cs-transfer__ops">
+        <button type="button" className="cs-button cs-button--secondary cs-button--xs" aria-label={t("toTarget")} onClick={() => move(true)}>›</button>
+        <button type="button" className="cs-button cs-button--secondary cs-button--xs" aria-label={t("toSource")} onClick={() => move(false)}>‹</button>
+      </div>
+      <List target={true} />
+    </div>
+  );
+}

package/components/forms/Transfer.prompt.md

@@ -0,0 +1,5 @@
+**Transfer** — move checked items between source/target lists (bilingual titles).
+
+```jsx
+<Transfer items={[{key:"a",label:"Web app"}]} value={sel} onChange={setSel}/>
+```

package/components/forms/TreeSelect.d.ts

@@ -0,0 +1,15 @@
+import type { TreeNode } from "../data/Tree";
+
+/** Field + popover Tree; selecting a LEAF sets the value (branches toggle). */
+export interface TreeSelectProps {
+  nodes: TreeNode[];
+  value?: string;
+  onChange?: (key: string, node: TreeNode) => void;
+  /** Default from the registry ("Select…" / "Chọn…"). */
+  placeholder?: string;
+  label?: string;
+  disabled?: boolean;
+  lang?: string;
+  className?: string;
+}
+export function TreeSelect(props: TreeSelectProps): React.ReactElement;

package/components/forms/TreeSelect.figma.tsx

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

package/components/forms/TreeSelect.jsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { makeT, useLang } from "../_i18n/i18n.js";
+import { Tree } from "../data/Tree.jsx";
+import { cx } from "../_utils/cx.js";
+
+/** CyberSkill TreeSelect — field opening a Tree; picking a node sets the value. */
+export function TreeSelect({ nodes = [], value, onChange, placeholder, label, disabled = false, lang, className }) {
+  const [open, setOpen] = React.useState(false);
+  const wrap = React.useRef(null);
+  const [ref, L] = useLang(lang);
+  const t = makeT("TreeSelect", L);
+  const ph = placeholder != null ? placeholder : t("placeholder");
+  const find = (ns) => { for (const n of ns) { if (n.key === value) return n; const c = n.children && find(n.children); if (c) return c; } return null; };
+  const sel = find(nodes);
+  React.useEffect(() => {
+    if (!open) return;
+    const d = (e) => { if (wrap.current && !wrap.current.contains(e.target)) setOpen(false); };
+    const k = (e) => { if (e.key === "Escape") setOpen(false); };
+    document.addEventListener("mousedown", d);
+    document.addEventListener("keydown", k);
+    return () => { document.removeEventListener("mousedown", d); document.removeEventListener("keydown", k); };
+  }, [open]);
+  return (
+    <div ref={(el) => { wrap.current = el; ref.current = el; }} className={cx("cs-treeselect", className)}>
+      <button type="button" className="cs-treeselect__field" disabled={disabled} aria-haspopup="tree" aria-expanded={open} aria-label={label} onClick={() => setOpen((o) => !o)}>
+        <span className={sel ? undefined : "ph"}>{sel ? sel.label : ph}</span><span aria-hidden="true">▾</span>
+      </button>
+      {open ? (
+        <div className="cs-treeselect__pop">
+          <Tree nodes={nodes} selected={value} defaultOpen lang={L} onSelect={(k, n) => { if (!(n.children && n.children.length)) { onChange && onChange(k, n); setOpen(false); } }} />
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/components/forms/TreeSelect.prompt.md

@@ -0,0 +1,5 @@
+**TreeSelect** — field + popover Tree; leaf picks set the value.
+
+```jsx
+<TreeSelect value={k} onChange={setK} nodes={[{key:"p",label:"Platform",children:[{key:"ds",label:"Design System"}]}]}/>
+```

package/components/forms/forms-2.card.html

@@ -0,0 +1,40 @@
+<!-- @dsCard group="Components" viewport="700x360" name="Form controls II" subtitle="Search, NumberField, Slider, FileUpload, SegmentedControl" -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<link rel="stylesheet" href="../../styles.css" />
+<style>
+  body { margin: 0; background: var(--cs-color-surface-page); padding: 22px 24px; }
+  .stack { display: grid; gap: 18px; max-width: 620px; }
+  .row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
+  .lbl { width: 100%; font: 600 11px/1 var(--cs-font-family-ui); text-transform: uppercase; letter-spacing: .09em; color: var(--cs-color-text-muted); }
+</style>
+<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
+<script src="../../_ds_bundle.js"></script>
+</head>
+<body>
+<div id="root"></div>
+<script type="text/babel">
+const { SearchField, NumberField, Slider, FileUpload, SegmentedControl } = (window[Object.keys(window).find(k=>/^CyberSkillDesignSystem_[0-9a-f]{6}$/.test(k))]||{});
+const { useState } = React;
+function Demo() {
+  const [q, setQ] = useState("Design System");
+  const [n, setN] = useState(3);
+  const [v, setV] = useState(60);
+  const [seg, setSeg] = useState("board");
+  return (
+    <div className="stack">
+      <div className="row"><span className="lbl">Search</span><div style={{flex:1,minWidth:260}}><SearchField value={q} onChange={setQ} placeholder="Search projects…" /></div></div>
+      <div className="row"><span className="lbl">Number &amp; slider</span><NumberField value={n} onChange={setN} min={1} max={20} /><div style={{flex:1,minWidth:180}}><Slider min={0} max={100} value={v} onChange={(e)=>setV(+e.target.value)} /></div></div>
+      <div className="row"><span className="lbl">Segmented</span><SegmentedControl value={seg} onChange={setSeg} options={[{value:"board",label:"Board"},{value:"table",label:"Table"},{value:"releases",label:"Releases"}]} /></div>
+      <div className="row"><span className="lbl">File upload</span><div style={{flex:1}}><FileUpload /></div></div>
+    </div>
+  );
+}
+ReactDOM.createRoot(document.getElementById("root")).render(<Demo />);
+</script>
+</body>
+</html>

package/components/forms/forms.card.html

@@ -0,0 +1,40 @@
+<!-- @dsCard group="Components" viewport="700x360" name="Form controls" subtitle="Select, Checkbox, Radio, Switch, Textarea — brand accent" -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<link rel="stylesheet" href="../../styles.css" />
+<style>
+  body { margin: 0; background: var(--cs-color-surface-page); padding: 22px 24px; }
+  .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px; max-width: 640px; align-items: start; }
+</style>
+<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
+<script src="../../_ds_bundle.js"></script>
+</head>
+<body>
+<div id="root"></div>
+<script type="text/babel">
+const { Select, Checkbox, RadioGroup, Switch, Textarea } = window[Object.keys(window).find(k=>/^CyberSkillDesignSystem_[0-9a-f]{6}$/.test(k))] || {};
+function Demo() {
+  const [plan, setPlan] = React.useState("yr");
+  const [dark, setDark] = React.useState(true);
+  return (
+    <div className="grid">
+      <Select label="Squad" options={[{value:"plat",label:"Platform"},{value:"ai",label:"AI"},{value:"growth",label:"Growth"}]} defaultValue="ai" />
+      <RadioGroup legend="Billing" value={plan} onChange={setPlan} options={[{value:"mo",label:"Monthly"},{value:"yr",label:"Annual",description:"Two months free"}]} />
+      <div style={{display:"grid",gap:12}}>
+        <Checkbox label="Email me release notes" defaultChecked />
+        <Checkbox label="Bilingual export" description="Ship EN + VN together" />
+        <Switch label="Dark theme" checked={dark} onChange={(e)=>setDark(e.target.checked)} />
+      </div>
+      <Textarea label="Tell us your wish" description="A sentence or two is plenty." rows={3} defaultValue="A faster checkout for our shop." />
+    </div>
+  );
+}
+ReactDOM.createRoot(document.getElementById("root")).render(<Demo />);
+</script>
+</body>
+</html>

package/components/icon/Icon.d.ts

@@ -0,0 +1,26 @@
+import type * as React from "react";
+
+export type IconName =
+  | "close" | "sun" | "moon" | "arrow-right" | "check"
+  | "sparkle" | "chat" | "sound-on" | "sound-off"
+  | "search" | "sliders" | "upload" | "download" | "calendar"
+  | "user" | "plus" | "trash" | "external" | "menu"
+  | "chevron-down" | "chevron-up" | "chevron-left" | "chevron-right"
+  | "edit" | "copy" | "info" | "alert-triangle";
+
+/**
+ * CyberSkill line-icon renderer. One component drives the whole in-repo icon set
+ * (no external icon library). Icons stroke with currentColor and size from the
+ * --cs-icon-* tokens. Decorative by default; pass `label` to name it for AT.
+ */
+export interface IconProps extends React.SVGAttributes<SVGSVGElement> {
+  name: IconName;
+  /** Maps to --cs-icon-sm|md|lg. Default "md". */
+  size?: "sm" | "md" | "lg";
+  /** Accessible name; omit for decorative icons. */
+  label?: string;
+  strokeWidth?: number;
+  className?: string;
+}
+
+export function Icon(props: IconProps): React.ReactElement;

package/components/icon/Icon.figma.tsx

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

package/components/icon/Icon.jsx

@@ -0,0 +1,74 @@
+import React from "react";
+
+/**
+ * CyberSkill line-icon set (in-repo, no external icon library). Each icon is
+ * data — a viewBox plus primitive elements — rendered through this one <Icon>.
+ * Line icons use currentColor stroke so they follow the surrounding text token.
+ * Sizes come from --cs-icon-* tokens (sm/md/lg). Decorative by default; pass
+ * `label` to expose a meaningful icon to assistive tech.
+ */
+export const CS_ICONS = {
+  close: { viewBox: "0 0 24 24", els: [["path", { d: "M6 6l12 12M18 6L6 18" }]] },
+  sun: { viewBox: "0 0 24 24", els: [
+    ["circle", { cx: 12, cy: 12, r: 4 }],
+    ["path", { d: "M12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M19.1 4.9l-1.4 1.4M6.3 17.7l-1.4 1.4" }],
+  ] },
+  moon: { viewBox: "0 0 24 24", els: [["path", { d: "M20 13.5A8 8 0 1 1 10.5 4a6.5 6.5 0 0 0 9.5 9.5z" }]] },
+  "arrow-right": { viewBox: "0 0 24 24", els: [["path", { d: "M5 12h14M13 6l6 6-6 6" }]] },
+  check: { viewBox: "0 0 24 24", els: [["path", { d: "M4 12.5l5 5 11-11" }]] },
+  sparkle: { viewBox: "0 0 24 24", els: [["path", { d: "M12 3l1.8 5.4L19 10l-5.2 1.6L12 17l-1.8-5.4L5 10l5.2-1.6z" }]] },
+  chat: { viewBox: "0 0 24 24", els: [["path", { d: "M4 5h16v11H8l-4 4z" }]] },
+  "sound-on": { viewBox: "0 0 24 24", els: [
+    ["path", { d: "M5 9v6h3l4 4V5L8 9z" }],
+    ["path", { d: "M15 9.5a4 4 0 0 1 0 5M17.6 7a8 8 0 0 1 0 10" }],
+  ] },
+  "sound-off": { viewBox: "0 0 24 24", els: [
+    ["path", { d: "M5 9v6h3l4 4V5L8 9z" }],
+    ["path", { d: "M16 9.5l4.5 5M20.5 9.5l-4.5 5" }],
+  ] },
+  // v2.0 extension — same grammar: line, currentColor, 1.75, round, 24×24
+  search: { viewBox: "0 0 24 24", els: [["circle", { cx: 11, cy: 11, r: 6 }], ["path", { d: "M20 20l-4.2-4.2" }]] },
+  sliders: { viewBox: "0 0 24 24", els: [
+    ["path", { d: "M4 6h16M4 12h16M4 18h16" }],
+    ["circle", { cx: 9, cy: 6, r: 2 }], ["circle", { cx: 15, cy: 12, r: 2 }], ["circle", { cx: 7, cy: 18, r: 2 }],
+  ] },
+  upload: { viewBox: "0 0 24 24", els: [["path", { d: "M12 15V4M7 8.5L12 4l5 4.5" }], ["path", { d: "M4 19h16" }]] },
+  download: { viewBox: "0 0 24 24", els: [["path", { d: "M12 4v11M7 10.5L12 15l5-4.5" }], ["path", { d: "M4 19h16" }]] },
+  calendar: { viewBox: "0 0 24 24", els: [["rect", { x: 4, y: 6, width: 16, height: 14, rx: 2 }], ["path", { d: "M4 10.5h16M8 3.5v4M16 3.5v4" }]] },
+  user: { viewBox: "0 0 24 24", els: [["circle", { cx: 12, cy: 8.5, r: 3.5 }], ["path", { d: "M5 19.5c1.6-3.4 4-5 7-5s5.4 1.6 7 5" }]] },
+  plus: { viewBox: "0 0 24 24", els: [["path", { d: "M12 5v14M5 12h14" }]] },
+  trash: { viewBox: "0 0 24 24", els: [["path", { d: "M5 7h14M9.5 7V4.5h5V7" }], ["path", { d: "M7 7l.8 12.5h8.4L17 7M10 11v5M14 11v5" }]] },
+  external: { viewBox: "0 0 24 24", els: [["path", { d: "M14 4h6v6M20 4l-8 8" }], ["path", { d: "M18 13v6H5V6h6" }]] },
+  menu: { viewBox: "0 0 24 24", els: [["path", { d: "M4 7h16M4 12h16M4 17h16" }]] },
+  // v2.13 extension — common chevrons + edit/copy/info/warning (same grammar)
+  "chevron-down": { viewBox: "0 0 24 24", els: [["path", { d: "M6 9l6 6 6-6" }]] },
+  "chevron-up": { viewBox: "0 0 24 24", els: [["path", { d: "M6 15l6-6 6 6" }]] },
+  "chevron-left": { viewBox: "0 0 24 24", els: [["path", { d: "M15 6l-6 6 6 6" }]] },
+  "chevron-right": { viewBox: "0 0 24 24", els: [["path", { d: "M9 6l6 6-6 6" }]] },
+  edit: { viewBox: "0 0 24 24", els: [["path", { d: "M4 20h4L18.5 9.5a2.12 2.12 0 0 0-3-3L5 17z" }], ["path", { d: "M13.5 6.5l3 3" }]] },
+  copy: { viewBox: "0 0 24 24", els: [["rect", { x: 8, y: 8, width: 12, height: 12, rx: 2 }], ["path", { d: "M4 16V6a2 2 0 0 1 2-2h10" }]] },
+  info: { viewBox: "0 0 24 24", els: [["circle", { cx: 12, cy: 12, r: 9 }], ["path", { d: "M12 11v5M12 7.75v.01" }]] },
+  "alert-triangle": { viewBox: "0 0 24 24", els: [["path", { d: "M12 3.5l9 16H3z" }], ["path", { d: "M12 10v4M12 17.5v.01" }]] },
+};
+
+export function Icon({ name, size = "md", label, className, strokeWidth = 1.75, ...props }) {
+  const def = CS_ICONS[name] || CS_ICONS.sparkle;
+  const dim = `var(--cs-icon-${size}, 20px)`;
+  const a11y = label ? { role: "img", "aria-label": label } : { "aria-hidden": true, focusable: false };
+  return (
+    <svg
+      {...props}
+      className={className}
+      viewBox={def.viewBox}
+      style={{ width: dim, height: dim, display: "inline-block", flex: "none", ...(props.style || {}) }}
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...a11y}
+    >
+      {def.els.map(([tag, attrs], i) => React.createElement(tag, { key: i, ...attrs }))}
+    </svg>
+  );
+}

package/components/icon/Icon.prompt.md

@@ -0,0 +1,8 @@
+**Icon** — the single renderer for CyberSkill's in-repo line-icon set (no external icon library). Icons stroke with `currentColor` at 1.75 weight, round caps/joins, and size from the `--cs-icon-*` tokens. Decorative by default; pass `label` to expose a meaningful icon to assistive tech.
+
+```jsx
+<Icon name="arrow-right" />                    {/* decorative */}
+<Icon name="sparkle" size="lg" label="Wish" /> {/* meaningful */}
+```
+
+Set: `close · sun · moon · arrow-right · check · sparkle · chat · sound-on · sound-off` + v2.0 extension `search · sliders · upload · download · calendar · user · plus · trash · external · menu` + v2.13 `chevron-down/up/left/right · edit · copy · info · alert-triangle`al · menu` (same grammar). `sparkle` is the brand's "wish" glyph. Colour follows the surrounding text token — set `color` on a parent to recolour.