tio-design-make-experiments 0.0.1

package/src/app/components/design-system/Forms.tsx

@@ -0,0 +1,409 @@
+import React from "react";
+import svgPaths from "../../../imports/svg-liuy2nykz3";
+import { SectionHeader } from "./SectionHeader";
+import { CopyButton } from "./CopyButton";
+
+/* ─── Shared icon helpers ─── */
+function CaretDownIcon({ className = "fill-primary" }: { className?: string }) {
+  return (
+    <svg width="9" height="20" viewBox="0 0 9.02104 20" fill="none" className="shrink-0">
+      <path d={svgPaths.p2e3d1e00} className={className} />
+    </svg>
+  );
+}
+
+function CrossThickIcon() {
+  return (
+    <svg width="10" height="16" viewBox="0 0 10 16" fill="none" className="shrink-0">
+      <path d={svgPaths.paa65200} fill="#236A84" />
+    </svg>
+  );
+}
+
+function ComputerWindowsIcon() {
+  return (
+    <svg width="57" height="40" viewBox="0 0 57 40" fill="none" className="shrink-0">
+      <g clipPath="url(#clip_cw)">
+        <path d="M11 7H4V9H11V7Z" fill="white" />
+        <path d="M30 38H25V40H30V38Z" fill="white" />
+        <path d={svgPaths.p187e61c0} fill="white" />
+        <path d={svgPaths.p3716d780} fill="white" />
+        <path d={svgPaths.p3215c000} fill="white" />
+      </g>
+      <defs>
+        <clipPath id="clip_cw"><rect fill="white" width="57" height="40" /></clipPath>
+      </defs>
+    </svg>
+  );
+}
+
+function ChromeIcon() {
+  return (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" className="shrink-0 size-5">
+      <g clipPath="url(#clip_chr)">
+        <path d={svgPaths.p347a1500} fill="white" />
+      </g>
+      <defs>
+        <clipPath id="clip_chr"><rect fill="white" width="20" height="20" /></clipPath>
+      </defs>
+    </svg>
+  );
+}
+
+function EdgeChromiumIcon() {
+  return (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" className="shrink-0 size-5">
+      <g clipPath="url(#clip_ec)">
+        <path d={svgPaths.p3075cdf0} fill="white" />
+      </g>
+      <defs>
+        <clipPath id="clip_ec"><rect fill="white" width="20" height="20" /></clipPath>
+      </defs>
+    </svg>
+  );
+}
+
+function EdgeIcon() {
+  return (
+    <svg width="19" height="20" viewBox="0 0 19 20" fill="none" className="shrink-0">
+      <g clipPath="url(#clip_edge)">
+        <path d={svgPaths.p5758100} fill="white" />
+      </g>
+      <defs>
+        <clipPath id="clip_edge"><rect fill="white" width="19" height="20" /></clipPath>
+      </defs>
+    </svg>
+  );
+}
+
+/* ─── Sub-section label ─── */
+function SubLabel({ children }: { children: React.ReactNode }) {
+  return (
+    <p className="font-['Source_Sans_3',sans-serif] text-foreground mb-5">
+      {children}
+    </p>
+  );
+}
+
+/* ─── Section title (lighter weight, larger) ─── */
+function SectionTitle({ children }: { children: React.ReactNode }) {
+  return (
+    <p className="font-['Source_Sans_Pro',sans-serif] text-foreground mb-2.5" style={{ fontWeight: 300, fontSize: 25, lineHeight: "28px" }}>
+      {children}
+    </p>
+  );
+}
+
+/* ─── Removable tag pill ─── */
+function Tag() {
+  return (
+    <div className="form-tag">
+      <span className="form-tag-content">Tag removable</span>
+      <div className="form-tag-remove">
+        <CrossThickIcon />
+      </div>
+    </div>
+  );
+}
+
+/* ─── Select dropdown button ─── */
+function SelectBtn({ hover = false }: { hover?: boolean }) {
+  return (
+    <div className={`form-select-btn relative ${hover ? "bg-link-hover" : ""}`}>
+      <div className="form-select-btn-border" aria-hidden="true" />
+      <CaretDownIcon className={hover ? "fill-foreground" : "fill-primary"} />
+    </div>
+  );
+}
+
+/* ─── Device info block (used inside device selects) ─── */
+function DeviceInfo() {
+  return (
+    <div className="flex flex-col items-start py-[5px] shrink-0 w-[205px] z-[2]">
+      <div className="flex gap-2.5 items-start w-full">
+        <div className="shrink-0"><ComputerWindowsIcon /></div>
+        <div className="flex flex-col gap-0.5 items-start shrink-0">
+          <p className="font-['Source_Sans_Pro',sans-serif] text-foreground" style={{ fontSize: 14, lineHeight: "16px" }}>
+            Computer | Windows 11
+          </p>
+          <div className="flex gap-[5px] items-start shrink-0">
+            <ChromeIcon />
+            <EdgeChromiumIcon />
+            <EdgeIcon />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/* ════════════════════════════════════════════════════
+   Main export
+   ════════════════════════════════════════════════════ */
+export function Forms() {
+  return (
+    <section>
+      <SectionHeader
+        title="Forms"
+        description="Form groups, labels, input fields, selects, device selectors, and multi-select tags — extracted as CSS component classes in forms.css"
+      />
+
+      {/* ═══════════ FORM GROUPS ═══════════ */}
+      <div className="mb-12 max-w-[730px]">
+        <SectionTitle>Form groups</SectionTitle>
+        <SubLabel>Horizonal form groups</SubLabel>
+
+        <div className="group/item relative">
+          <div className="form-grid">
+            <div className="form-grid-label">
+              <span className="form-label">Form label</span>
+            </div>
+            <div className="form-input">
+              <div className="form-input-border" aria-hidden="true" />
+              <div className="flex items-center size-full">
+                <div className="form-input-inner">
+                  <span className="form-input-text">Input field</span>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="absolute top-0 right-0 opacity-0 group-hover/item:opacity-100 transition-opacity">
+            <CopyButton token=".form-grid + .form-label + .form-input" />
+          </div>
+        </div>
+      </div>
+
+      {/* ═══════════ FORM LABEL ═══════════ */}
+      <div className="mb-12 max-w-[730px]">
+        <SectionTitle>Form label</SectionTitle>
+        <SubLabel>Label for form groups and elements</SubLabel>
+
+        <div className="group/item relative inline-block">
+          <span className="form-label">Form label</span>
+          <div className="absolute -top-1 -right-6 opacity-0 group-hover/item:opacity-100 transition-opacity">
+            <CopyButton token=".form-label" />
+          </div>
+        </div>
+      </div>
+
+      {/* ═══════════ INPUT FIELDS ═══════════ */}
+      <div className="mb-12 max-w-[730px]">
+        <SectionTitle>Input fields</SectionTitle>
+        <SubLabel>Input field in different states</SubLabel>
+
+        <div className="flex flex-col gap-[15px]">
+          {/* Placeholder */}
+          <div className="group/item relative">
+            <div className="form-input">
+              <div className="form-input-border" aria-hidden="true" />
+              <div className="flex items-center size-full">
+                <div className="form-input-inner">
+                  <span className="form-input-placeholder">Placeholder</span>
+                </div>
+              </div>
+            </div>
+            <div className="absolute top-2 right-2 opacity-0 group-hover/item:opacity-100 transition-opacity">
+              <CopyButton token=".form-input (placeholder)" />
+            </div>
+          </div>
+
+          {/* Filled */}
+          <div className="group/item relative">
+            <div className="form-input">
+              <div className="form-input-border" aria-hidden="true" />
+              <div className="flex items-center size-full">
+                <div className="form-input-inner">
+                  <span className="form-input-text">Filled input</span>
+                </div>
+              </div>
+            </div>
+            <div className="absolute top-2 right-2 opacity-0 group-hover/item:opacity-100 transition-opacity">
+              <CopyButton token=".form-input (filled)" />
+            </div>
+          </div>
+
+          {/* Error */}
+          <div className="group/item relative">
+            <div className="form-input form-input-error">
+              <div className="form-input-border" aria-hidden="true" />
+              <div className="flex items-center size-full">
+                <div className="form-input-inner">
+                  <span className="form-input-text">Input with error</span>
+                </div>
+              </div>
+            </div>
+            <div className="absolute top-2 right-2 opacity-0 group-hover/item:opacity-100 transition-opacity">
+              <CopyButton token=".form-input-error" />
+            </div>
+          </div>
+
+          {/* Readonly */}
+          <div className="group/item relative">
+            <div className="form-input-readonly">
+              <div className="flex items-center size-full">
+                <div className="form-input-inner">
+                  <span className="form-input-text">Readonly field</span>
+                </div>
+              </div>
+            </div>
+            <div className="absolute top-2 right-2 opacity-0 group-hover/item:opacity-100 transition-opacity">
+              <CopyButton token=".form-input-readonly" />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* ═══════════ SELECTS ═══════════ */}
+      <div className="max-w-[730px]">
+        <SectionTitle>Selects</SectionTitle>
+
+        {/* ── Select states ── */}
+        <SubLabel>Select elements in different states</SubLabel>
+        <div className="flex flex-col gap-[15px] mb-8">
+          {/* Placeholder */}
+          <div className="group/item relative">
+            <div className="form-select">
+              <div className="form-select-bordered" aria-hidden="true" />
+              <div className="flex items-center size-full">
+                <div className="form-select-inner">
+                  <span className="form-select-placeholder">Please select</span>
+                  <SelectBtn />
+                </div>
+              </div>
+            </div>
+            <div className="absolute top-2 right-12 opacity-0 group-hover/item:opacity-100 transition-opacity">
+              <CopyButton token=".form-select (placeholder)" />
+            </div>
+          </div>
+
+          {/* Hover */}
+          <div className="group/item relative">
+            <div className="form-select-hover">
+              <div className="flex items-center size-full">
+                <div className="form-select-inner">
+                  <span className="form-select-placeholder !text-foreground">Hover</span>
+                  <SelectBtn hover />
+                </div>
+              </div>
+            </div>
+            <div className="absolute top-2 right-12 opacity-0 group-hover/item:opacity-100 transition-opacity">
+              <CopyButton token=".form-select-hover" />
+            </div>
+          </div>
+
+          {/* Option selected */}
+          <div className="group/item relative">
+            <div className="form-select">
+              <div className="form-select-bordered" aria-hidden="true" />
+              <div className="flex items-center size-full">
+                <div className="form-select-inner">
+                  <span className="form-select-text">Option selected</span>
+                  <SelectBtn />
+                </div>
+              </div>
+            </div>
+            <div className="absolute top-2 right-12 opacity-0 group-hover/item:opacity-100 transition-opacity">
+              <CopyButton token=".form-select (selected)" />
+            </div>
+          </div>
+
+          {/* Option selected hover */}
+          <div className="group/item relative">
+            <div className="form-select-hover">
+              <div className="flex items-center size-full">
+                <div className="form-select-inner">
+                  <span className="form-select-text">Option selected hover</span>
+                  <SelectBtn hover />
+                </div>
+              </div>
+            </div>
+            <div className="absolute top-2 right-12 opacity-0 group-hover/item:opacity-100 transition-opacity">
+              <CopyButton token=".form-select-hover (selected)" />
+            </div>
+          </div>
+        </div>
+
+        {/* ── Device selector ── */}
+        <SubLabel>Component for selecting devices</SubLabel>
+        <div className="flex flex-col gap-[15px] mb-8">
+          {/* Normal */}
+          <div className="group/item relative">
+            <div className="form-select-device">
+              <div className="flex items-center size-full">
+                <div className="form-select-inner">
+                  <DeviceInfo />
+                  <div className="form-select-btn relative" style={{ height: 70 }}>
+                    <div className="form-select-btn-border" aria-hidden="true" />
+                    <CaretDownIcon className="fill-primary" />
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div className="absolute top-2 right-12 opacity-0 group-hover/item:opacity-100 transition-opacity">
+              <CopyButton token=".form-select-device" />
+            </div>
+          </div>
+
+          {/* Hover */}
+          <div className="group/item relative">
+            <div className="form-select-device-hover">
+              <div className="flex items-center size-full">
+                <div className="form-select-inner">
+                  <DeviceInfo />
+                  <div className="form-select-btn bg-link-hover relative" style={{ height: 70 }}>
+                    <div className="form-select-btn-border" aria-hidden="true" />
+                    <CaretDownIcon className="fill-foreground" />
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div className="absolute top-2 right-12 opacity-0 group-hover/item:opacity-100 transition-opacity">
+              <CopyButton token=".form-select-device-hover" />
+            </div>
+          </div>
+        </div>
+
+        {/* ── Multi select ── */}
+        <SubLabel>Multi select</SubLabel>
+        <div className="flex flex-col gap-[15px]">
+          {/* Normal */}
+          <div className="group/item relative">
+            <div className="form-select">
+              <div className="form-select-bordered" aria-hidden="true" />
+              <div className="flex items-center size-full">
+                <div className="form-select-inner">
+                  <div className="flex gap-[5px] items-center shrink-0 z-[3]">
+                    <Tag />
+                    <Tag />
+                  </div>
+                  <SelectBtn />
+                </div>
+              </div>
+            </div>
+            <div className="absolute top-2 right-12 opacity-0 group-hover/item:opacity-100 transition-opacity">
+              <CopyButton token=".form-select + .form-tag" />
+            </div>
+          </div>
+
+          {/* Hover */}
+          <div className="group/item relative">
+            <div className="form-select-hover">
+              <div className="flex items-center size-full">
+                <div className="form-select-inner">
+                  <div className="flex gap-[5px] items-center shrink-0 z-[3]">
+                    <Tag />
+                    <Tag />
+                  </div>
+                  <SelectBtn hover />
+                </div>
+              </div>
+            </div>
+            <div className="absolute top-2 right-12 opacity-0 group-hover/item:opacity-100 transition-opacity">
+              <CopyButton token=".form-select-hover + .form-tag" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

package/src/app/components/design-system/Icons.tsx

@@ -0,0 +1,140 @@
+import React from "react";
+import svgPaths from "../../../imports/svg-umftvfphsk";
+import { SectionHeader } from "./SectionHeader";
+import { CopyButton } from "./CopyButton";
+
+function IconDisplay({ name, children, size = 20, token }: { name: string; children: React.ReactNode; size?: number; token?: string }) {
+  return (
+    <div className="flex flex-col items-center gap-3">
+      <div className="group/icon bg-secondary rounded-lg p-4 flex items-center justify-center relative" style={{ width: size + 32, height: size + 32 }}>
+        {children}
+        {token && (
+          <div className="absolute -top-1 -right-1 opacity-0 group-hover/icon:opacity-100 transition-opacity">
+            <CopyButton token={token} />
+          </div>
+        )}
+      </div>
+      <p className="font-['Source_Sans_3',sans-serif] text-xs text-muted-foreground text-center">
+        {name}
+      </p>
+    </div>
+  );
+}
+
+export function Icons() {
+  return (
+    <section>
+      <SectionHeader
+        title="Icons"
+        description="Status icons, navigation icons, and action icons"
+      />
+
+      {/* Status Icons */}
+      <div className="mb-8">
+        <p className="font-['Source_Sans_3',sans-serif] text-[14px] text-[#888] uppercase tracking-wider mb-4">
+          Status Icons
+        </p>
+        <div className="flex flex-wrap gap-6">
+          <IconDisplay name="Check (Passed)" size={20} token="svgPaths.p30b87920 | fill: #33BA9E">
+            <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+              <path d={svgPaths.p30b87920} fill="#33BA9E" />
+            </svg>
+          </IconDisplay>
+          <IconDisplay name="Cross (Failed)" size={20} token="svgPaths.p30bab400 | fill: #FF3131">
+            <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+              <path d={svgPaths.p30bab400} fill="#FF3131" />
+            </svg>
+          </IconDisplay>
+          <IconDisplay name="Blocked" size={20} token="svgPaths.p13555100 | fill: #F48D21">
+            <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+              <path d={svgPaths.p13555100} fill="#F48D21" />
+            </svg>
+          </IconDisplay>
+          <IconDisplay name="Sync" size={20} token="svgPaths.p3ed72680 | fill: #888888">
+            <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+              <path d={svgPaths.p3ed72680} fill="#888888" />
+            </svg>
+          </IconDisplay>
+          <IconDisplay name="Check Thick" size={10} token="svgPaths.p2b4f4400 | fill: #888888">
+            <svg width="11" height="10" viewBox="0 0 11.1504 10.1504" fill="none">
+              <path d={svgPaths.p2b4f4400} fill="#888888" />
+            </svg>
+          </IconDisplay>
+        </div>
+      </div>
+
+      {/* Navigation Icons */}
+      <div className="mb-8">
+        <p className="font-['Source_Sans_3',sans-serif] text-[14px] text-[#888] uppercase tracking-wider mb-4">
+          Navigation & UI Icons
+        </p>
+        <div className="flex flex-wrap gap-6">
+          <IconDisplay name="Triangle Down" size={20} token='d="M10 15L4 5H16L10 15Z" | fill: #888888'>
+            <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+              <path d="M10 15L4 5H16L10 15Z" fill="#888888" />
+            </svg>
+          </IconDisplay>
+          <IconDisplay name="Triangle Right" size={20} token='d="M15 10L5 16V4L15 10Z" | fill: #888888'>
+            <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+              <path d="M15 10L5 16V4L15 10Z" fill="#888888" />
+            </svg>
+          </IconDisplay>
+          <IconDisplay name="Triangle Left" size={20} token='d="M15 16L5 10L15 4V16Z" | fill: #888888'>
+            <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+              <path d="M15 16L5 10L15 4V16Z" fill="#888888" />
+            </svg>
+          </IconDisplay>
+          <IconDisplay name="Plus" size={20} token="svgPaths.p185c8f80 | fill: white">
+            <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+              <path d={svgPaths.p185c8f80} fill="white" />
+            </svg>
+          </IconDisplay>
+          <IconDisplay name="More" size={20} token="svgPaths.p5e64f80 | fill: #888888">
+            <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+              <path d={svgPaths.p5e64f80} fill="#888888" />
+            </svg>
+          </IconDisplay>
+        </div>
+      </div>
+
+      {/* Large Icons */}
+      <div>
+        <p className="font-['Source_Sans_3',sans-serif] text-[14px] text-[#888] uppercase tracking-wider mb-4">
+          Large Icons (60px)
+        </p>
+        <div className="flex flex-wrap gap-6">
+          <IconDisplay name="Plus XL" size={60} token="svgPaths.p2455100 | fill: #78EAC1 | 60x60">
+            <svg width="60" height="60" viewBox="0 0 60 60" fill="none">
+              <g clipPath="url(#clip_plus_xl)">
+                <path d={svgPaths.p2455100} fill="#78EAC1" />
+              </g>
+              <defs>
+                <clipPath id="clip_plus_xl"><rect fill="white" height="60" width="60" /></clipPath>
+              </defs>
+            </svg>
+          </IconDisplay>
+          <IconDisplay name="Test Running" size={60} token="svgPaths.p2af2dd00 | fill: #888888 | 60x60">
+            <svg width="60" height="60" viewBox="0 0 60 60" fill="none">
+              <g clipPath="url(#clip_test_run)">
+                <path d={svgPaths.p2af2dd00} fill="#888888" />
+              </g>
+              <defs>
+                <clipPath id="clip_test_run"><rect fill="white" height="60" width="60" /></clipPath>
+              </defs>
+            </svg>
+          </IconDisplay>
+          <IconDisplay name="Review" size={60} token="svgPaths.p1981c800 | fill: #595959 | 48x60">
+            <svg width="48" height="60" viewBox="0 0 48 60" fill="none">
+              <g clipPath="url(#clip_review)">
+                <path d={svgPaths.p1981c800} fill="#595959" />
+              </g>
+              <defs>
+                <clipPath id="clip_review"><rect fill="white" height="60" width="48" /></clipPath>
+              </defs>
+            </svg>
+          </IconDisplay>
+        </div>
+      </div>
+    </section>
+  );
+}