@terminal-blueprint/react 0.1.0 → 0.1.2

package/dist/index.js

@@ -156,6 +156,7 @@ function CardRoot({
   brackets = false,
   pulse = false,
   hoverable = false,
+  href,
   className,
   children,
   ref,
@@ -171,10 +172,12 @@ function CardRoot({
         brackets && "tb-card--bracketed",
         pulse && "tb-card--pulse",
         hoverable && "tb-card--hoverable",
+        href && "tb-card--link",
         className
       ),
       ...props,
       children: [
+        href && /* @__PURE__ */ jsx4("a", { className: "tb-card__link", href, "aria-hidden": "true", tabIndex: -1 }),
         brackets && /* @__PURE__ */ jsxs4(Fragment, { children: [
           /* @__PURE__ */ jsx4("span", { className: "tb-card__bracket tb-card__bracket--tl" }),
           /* @__PURE__ */ jsx4("span", { className: "tb-card__bracket tb-card__bracket--tr" }),
@@ -598,6 +601,7 @@ function ModalRoot({
   closeOnBackdrop = true,
   hideCloseButton = false,
   portalTarget,
+  variant,
   children,
   className,
   ref
@@ -683,7 +687,7 @@ function ModalRoot({
           "aria-modal": "true",
           "aria-labelledby": titleId,
           "aria-describedby": descId,
-          className: cn("tb-modal", className),
+          className: cn("tb-modal", variant && `tb-modal--${variant}`, className),
           tabIndex: -1,
           onKeyDown: handleKeyDown,
           children: [
@@ -1342,22 +1346,81 @@ function Progress({
   );
 }
 
-// src/components/Battery.tsx
+// src/components/Slider.tsx
+import { useId as useId4 } from "react";
 import { jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
+function Slider({
+  value,
+  onChange,
+  min = 0,
+  max = 100,
+  step = 1,
+  variant = "default",
+  label,
+  showValue = false,
+  disabled = false,
+  className,
+  ref
+}) {
+  const id = useId4();
+  const percent = (value - min) / (max - min) * 100;
+  return /* @__PURE__ */ jsxs18(
+    "div",
+    {
+      className: cn(
+        "tb-slider",
+        variant !== "default" && `tb-slider--${variant}`,
+        disabled && "tb-slider--disabled",
+        className
+      ),
+      children: [
+        (label || showValue) && /* @__PURE__ */ jsxs18("div", { className: "tb-slider__header", children: [
+          label && /* @__PURE__ */ jsx22("label", { className: "tb-slider__label", htmlFor: id, children: label }),
+          showValue && /* @__PURE__ */ jsx22("span", { className: "tb-slider__value", children: value })
+        ] }),
+        /* @__PURE__ */ jsx22(
+          "input",
+          {
+            ref,
+            id,
+            type: "range",
+            className: "tb-slider__input",
+            style: { "--slider-percent": `${percent}%` },
+            value,
+            min,
+            max,
+            step,
+            disabled,
+            onChange: (e) => onChange(Number(e.target.value)),
+            "aria-label": label,
+            "aria-valuenow": value,
+            "aria-valuemin": min,
+            "aria-valuemax": max
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/Battery.tsx
+import { jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
 function Battery({
   value,
   total = 10,
   variant = "default",
   animated = false,
   label,
+  showValue = false,
   className
 }) {
   const clampedValue = Math.max(0, Math.min(total, value));
-  return /* @__PURE__ */ jsxs18(
+  const percent = Math.round(clampedValue / total * 100);
+  return /* @__PURE__ */ jsxs19(
     "div",
     {
       className: cn(
-        "tb-battery",
+        "tb-battery tb-battery--inline",
         variant !== "default" && `tb-battery--${variant}`,
         animated && "tb-battery--animated",
         className
@@ -1368,19 +1431,20 @@ function Battery({
       "aria-valuemax": total,
       "aria-label": label,
       children: [
-        label && /* @__PURE__ */ jsx22("span", { className: "tb-battery__label", children: label }),
-        /* @__PURE__ */ jsxs18("div", { className: "tb-battery__body", children: [
-          /* @__PURE__ */ jsx22("div", { className: "tb-battery__cap" }),
-          /* @__PURE__ */ jsx22("div", { className: "tb-battery__segments", children: Array.from({ length: total }, (_, i) => /* @__PURE__ */ jsx22(
-            "div",
-            {
-              className: cn(
-                "tb-battery__segment",
-                i < clampedValue && "tb-battery__segment--filled"
-              )
-            },
-            i
-          )) })
+        label && /* @__PURE__ */ jsx23("span", { className: "tb-battery__label", children: label }),
+        /* @__PURE__ */ jsx23("div", { className: "tb-battery__track", children: Array.from({ length: total }, (_, i) => /* @__PURE__ */ jsx23(
+          "div",
+          {
+            className: cn(
+              "tb-battery__segment",
+              i < clampedValue && "tb-battery__segment--filled"
+            )
+          },
+          i
+        )) }),
+        showValue && /* @__PURE__ */ jsxs19("span", { className: "tb-battery__value", children: [
+          percent,
+          "%"
         ] })
       ]
     }
@@ -1388,7 +1452,7 @@ function Battery({
 }
 
 // src/components/BatteryInline.tsx
-import { jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
 function BatteryInline({
   value,
   total = 10,
@@ -1400,11 +1464,12 @@ function BatteryInline({
 }) {
   const clampedValue = Math.max(0, Math.min(total, value));
   const percent = Math.round(clampedValue / total * 100);
-  return /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs20(
     "div",
     {
       className: cn(
         "tb-battery tb-battery--inline",
+        variant !== "default" && `tb-battery--${variant}`,
         animated && "tb-battery--animated",
         className
       ),
@@ -1414,20 +1479,18 @@ function BatteryInline({
       "aria-valuemax": total,
       "aria-label": label,
       children: [
-        label && /* @__PURE__ */ jsx23("span", { className: "tb-battery__label", children: label }),
-        /* @__PURE__ */ jsx23("div", { className: "tb-battery__track", children: Array.from({ length: total }, (_, i) => /* @__PURE__ */ jsx23(
+        label && /* @__PURE__ */ jsx24("span", { className: "tb-battery__label", children: label }),
+        /* @__PURE__ */ jsx24("div", { className: "tb-battery__track", children: Array.from({ length: total }, (_, i) => /* @__PURE__ */ jsx24(
           "div",
           {
             className: cn(
               "tb-battery__segment",
-              i < clampedValue && "tb-battery__segment--filled",
-              i < clampedValue && variant !== "default" && `tb-battery__segment--${variant}`
+              i < clampedValue && "tb-battery__segment--filled"
             )
           },
           i
         )) }),
-        /* @__PURE__ */ jsx23("div", { className: "tb-battery__cap" }),
-        showValue && /* @__PURE__ */ jsxs19("span", { className: "tb-battery__value", children: [
+        showValue && /* @__PURE__ */ jsxs20("span", { className: "tb-battery__value", children: [
           percent,
           "%"
         ] })
@@ -1437,7 +1500,7 @@ function BatteryInline({
 }
 
 // src/components/Table.tsx
-import { jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs21 } from "react/jsx-runtime";
 function getCellValue(row, accessor) {
   if (typeof accessor === "function") return accessor(row);
   return row[accessor];
@@ -1448,9 +1511,9 @@ function Table({
   onRowClick,
   className
 }) {
-  return /* @__PURE__ */ jsx24("div", { className: cn("tb-table__wrapper", className), children: /* @__PURE__ */ jsxs20("table", { className: "tb-table", children: [
-    /* @__PURE__ */ jsx24("thead", { className: "tb-table__head", children: /* @__PURE__ */ jsx24("tr", { className: "tb-table__row", children: columns.map((col) => /* @__PURE__ */ jsx24("th", { className: "tb-table__th", children: col.header }, col.id)) }) }),
-    /* @__PURE__ */ jsx24("tbody", { className: "tb-table__body", children: data.map((row, rowIndex) => /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx25("div", { className: cn("tb-table__wrapper", className), children: /* @__PURE__ */ jsxs21("table", { className: "tb-table", children: [
+    /* @__PURE__ */ jsx25("thead", { className: "tb-table__head", children: /* @__PURE__ */ jsx25("tr", { className: "tb-table__row", children: columns.map((col) => /* @__PURE__ */ jsx25("th", { className: "tb-table__th", children: col.header }, col.id)) }) }),
+    /* @__PURE__ */ jsx25("tbody", { className: "tb-table__body", children: data.map((row, rowIndex) => /* @__PURE__ */ jsx25(
       "tr",
       {
         className: cn(
@@ -1460,7 +1523,7 @@ function Table({
         onClick: onRowClick ? () => onRowClick(row) : void 0,
         children: columns.map((col) => {
           const value = getCellValue(row, col.accessor);
-          return /* @__PURE__ */ jsx24("td", { className: "tb-table__td", children: col.cell ? col.cell(value, row) : value }, col.id);
+          return /* @__PURE__ */ jsx25("td", { className: "tb-table__td", children: col.cell ? col.cell(value, row) : value }, col.id);
         })
       },
       rowIndex
@@ -1469,7 +1532,7 @@ function Table({
 }
 
 // src/components/Skeleton.tsx
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 function Skeleton({
   variant = "text",
   width,
@@ -1482,7 +1545,7 @@ function Skeleton({
     height: typeof height === "number" ? `${height}px` : height
   };
   if (variant === "text" && lines > 1) {
-    return /* @__PURE__ */ jsx25("div", { className: cn("tb-skeleton__group", className), children: Array.from({ length: lines }, (_, i) => /* @__PURE__ */ jsx25(
+    return /* @__PURE__ */ jsx26("div", { className: cn("tb-skeleton__group", className), children: Array.from({ length: lines }, (_, i) => /* @__PURE__ */ jsx26(
       "div",
       {
         className: cn(
@@ -1494,7 +1557,7 @@ function Skeleton({
       i
     )) });
   }
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx26(
     "div",
     {
       className: cn(
@@ -1508,13 +1571,13 @@ function Skeleton({
 }
 
 // src/components/Spinner.tsx
-import { Fragment as Fragment3, jsx as jsx26, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx27, jsxs as jsxs22 } from "react/jsx-runtime";
 function Spinner({
   variant = "multi-square",
   size = "md",
   className
 }) {
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx27(
     "span",
     {
       className: cn(
@@ -1525,19 +1588,19 @@ function Spinner({
       ),
       role: "status",
       "aria-label": "Loading",
-      children: variant === "multi-square" && /* @__PURE__ */ jsxs21(Fragment3, { children: [
-        /* @__PURE__ */ jsx26("span", { className: "tb-spinner__square" }),
-        /* @__PURE__ */ jsx26("span", { className: "tb-spinner__square" }),
-        /* @__PURE__ */ jsx26("span", { className: "tb-spinner__square" }),
-        /* @__PURE__ */ jsx26("span", { className: "tb-spinner__square" }),
-        /* @__PURE__ */ jsx26("span", { className: "tb-spinner__square" })
+      children: variant === "multi-square" && /* @__PURE__ */ jsxs22(Fragment3, { children: [
+        /* @__PURE__ */ jsx27("span", { className: "tb-spinner__square" }),
+        /* @__PURE__ */ jsx27("span", { className: "tb-spinner__square" }),
+        /* @__PURE__ */ jsx27("span", { className: "tb-spinner__square" }),
+        /* @__PURE__ */ jsx27("span", { className: "tb-spinner__square" }),
+        /* @__PURE__ */ jsx27("span", { className: "tb-spinner__square" })
       ] })
     }
   );
 }
 
 // src/components/Pagination.tsx
-import { jsx as jsx27, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs23 } from "react/jsx-runtime";
 function getPageRange(page, totalPages, siblingCount) {
   const totalSlots = siblingCount * 2 + 5;
   if (totalPages <= totalSlots) {
@@ -1570,8 +1633,8 @@ function Pagination({
   className
 }) {
   const pages = getPageRange(page, totalPages, siblingCount);
-  return /* @__PURE__ */ jsxs22("nav", { className: cn("tb-pagination", className), "aria-label": "Pagination", children: [
-    /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsxs23("nav", { className: cn("tb-pagination", className), "aria-label": "Pagination", children: [
+    /* @__PURE__ */ jsx28(
       "button",
       {
         className: "tb-pagination__btn tb-pagination__btn--prev",
@@ -1582,7 +1645,7 @@ function Pagination({
       }
     ),
     pages.map(
-      (p, i) => p === "ellipsis" ? /* @__PURE__ */ jsx27("span", { className: "tb-pagination__ellipsis", children: "..." }, `ellipsis-${i}`) : /* @__PURE__ */ jsx27(
+      (p, i) => p === "ellipsis" ? /* @__PURE__ */ jsx28("span", { className: "tb-pagination__ellipsis", children: "..." }, `ellipsis-${i}`) : /* @__PURE__ */ jsx28(
         "button",
         {
           className: cn(
@@ -1596,7 +1659,7 @@ function Pagination({
         p
       )
     ),
-    /* @__PURE__ */ jsx27(
+    /* @__PURE__ */ jsx28(
       "button",
       {
         className: "tb-pagination__btn tb-pagination__btn--next",
@@ -1610,7 +1673,7 @@ function Pagination({
 }
 
 // src/components/Breadcrumbs.tsx
-import { jsx as jsx28, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs24 } from "react/jsx-runtime";
 function Breadcrumbs({
   items,
   separator = "/",
@@ -1618,10 +1681,10 @@ function Breadcrumbs({
   className
 }) {
   const LinkComponent = linkComponent || "a";
-  return /* @__PURE__ */ jsx28("nav", { className: cn("tb-breadcrumbs", className), "aria-label": "Breadcrumb", children: /* @__PURE__ */ jsx28("ol", { className: "tb-breadcrumbs__list", children: items.map((item, i) => {
+  return /* @__PURE__ */ jsx29("nav", { className: cn("tb-breadcrumbs", className), "aria-label": "Breadcrumb", children: /* @__PURE__ */ jsx29("ol", { className: "tb-breadcrumbs__list", children: items.map((item, i) => {
     const isLast = i === items.length - 1;
-    return /* @__PURE__ */ jsxs23("li", { className: "tb-breadcrumbs__item", children: [
-      item.href && !isLast ? /* @__PURE__ */ jsx28(LinkComponent, { href: item.href, className: "tb-breadcrumbs__link", children: item.label }) : /* @__PURE__ */ jsx28(
+    return /* @__PURE__ */ jsxs24("li", { className: "tb-breadcrumbs__item", children: [
+      item.href && !isLast ? /* @__PURE__ */ jsx29(LinkComponent, { href: item.href, className: "tb-breadcrumbs__link", children: item.label }) : /* @__PURE__ */ jsx29(
         "span",
         {
           className: "tb-breadcrumbs__current",
@@ -1629,14 +1692,14 @@ function Breadcrumbs({
           children: item.label
         }
       ),
-      !isLast && /* @__PURE__ */ jsx28("span", { className: "tb-breadcrumbs__separator", "aria-hidden": "true", children: separator })
+      !isLast && /* @__PURE__ */ jsx29("span", { className: "tb-breadcrumbs__separator", "aria-hidden": "true", children: separator })
     ] }, i);
   }) }) });
 }
 
 // src/components/Toolbar.tsx
 import { useState as useState8, useRef as useRef5, useEffect as useEffect6 } from "react";
-import { jsx as jsx29, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs25 } from "react/jsx-runtime";
 function ToolbarSelect({
   options,
   value: controlledValue,
@@ -1665,13 +1728,13 @@ function ToolbarSelect({
     onChange?.(opt.value);
     setOpen(false);
   }
-  return /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsxs25(
     "div",
     {
       ref,
       className: cn("tb-toolbar__select", open && "tb-toolbar__select--open", className),
       children: [
-        /* @__PURE__ */ jsxs24(
+        /* @__PURE__ */ jsxs25(
           "button",
           {
             type: "button",
@@ -1682,20 +1745,19 @@ function ToolbarSelect({
               setOpen(!open);
             },
             children: [
-              /* @__PURE__ */ jsx29("span", { children: activeOption?.label ?? "" }),
-              /* @__PURE__ */ jsx29("span", { className: "tb-toolbar__chevron" })
+              /* @__PURE__ */ jsx30("span", { children: activeOption?.label ?? "" }),
+              /* @__PURE__ */ jsx30("span", { className: "tb-toolbar__chevron" })
             ]
           }
         ),
-        /* @__PURE__ */ jsx29("div", { className: cn("tb-toolbar__dropdown", dropDown && "tb-toolbar__dropdown--down"), children: options.map((opt) => /* @__PURE__ */ jsxs24(
+        /* @__PURE__ */ jsx30("div", { className: cn("tb-toolbar__dropdown", dropDown && "tb-toolbar__dropdown--down"), children: options.map((opt) => /* @__PURE__ */ jsxs25(
           "div",
           {
             className: cn("tb-toolbar__option", opt.value === value && "tb-toolbar__option--active"),
-            style: { fontFamily: opt.value },
             onClick: () => select(opt),
             children: [
               opt.label,
-              opt.meta && /* @__PURE__ */ jsx29("span", { className: "tb-toolbar__option-meta", children: opt.meta })
+              opt.meta && /* @__PURE__ */ jsx30("span", { className: "tb-toolbar__option-meta", children: opt.meta })
             ]
           },
           opt.value
@@ -1705,13 +1767,13 @@ function ToolbarSelect({
   );
 }
 function ToolbarLabel({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx29("span", { className: cn("tb-toolbar__label", className), ...props, children });
+  return /* @__PURE__ */ jsx30("span", { className: cn("tb-toolbar__label", className), ...props, children });
 }
 function ToolbarDivider({ className, ...props }) {
-  return /* @__PURE__ */ jsx29("div", { className: cn("tb-toolbar__divider", className), ...props });
+  return /* @__PURE__ */ jsx30("div", { className: cn("tb-toolbar__divider", className), ...props });
 }
 function ToolbarRoot({ position, fixed = false, children, className, ref, ...props }) {
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx30(
     "div",
     {
       ref,
@@ -1732,13 +1794,207 @@ var Toolbar = Object.assign(ToolbarRoot, {
   Divider: ToolbarDivider
 });
 
+// src/components/FileUpload.tsx
+import {
+  useState as useState9,
+  useCallback as useCallback4,
+  useRef as useRef6,
+  useId as useId5
+} from "react";
+import { Fragment as Fragment4, jsx as jsx31, jsxs as jsxs26 } from "react/jsx-runtime";
+function formatSize(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+function isImage(file) {
+  return file.type.startsWith("image/");
+}
+function FileUpload({
+  onChange,
+  value,
+  accept,
+  multiple = false,
+  maxSize,
+  compact = false,
+  preview = false,
+  label,
+  placeholder,
+  hint,
+  error: errorProp,
+  icon,
+  disabled = false,
+  className,
+  ref
+}) {
+  const autoId = useId5();
+  const inputRef = useRef6(null);
+  const [dragging, setDragging] = useState9(false);
+  const [files, setFiles] = useState9([]);
+  const [internalError, setInternalError] = useState9();
+  const error = errorProp ?? internalError;
+  const displayFiles = value ? value.map((f) => ({ file: f, preview: preview && isImage(f) ? URL.createObjectURL(f) : void 0 })) : files;
+  const processFiles = useCallback4(
+    (incoming) => {
+      const arr = Array.from(incoming);
+      setInternalError(void 0);
+      if (maxSize) {
+        const tooBig = arr.find((f) => f.size > maxSize);
+        if (tooBig) {
+          setInternalError(`${tooBig.name} exceeds ${formatSize(maxSize)}`);
+          return;
+        }
+      }
+      const newFiles = arr.map((f) => ({
+        file: f,
+        preview: preview && isImage(f) ? URL.createObjectURL(f) : void 0
+      }));
+      if (multiple) {
+        const merged = [...files, ...newFiles];
+        setFiles(merged);
+        onChange?.(merged.map((f) => f.file));
+      } else {
+        files.forEach((f) => f.preview && URL.revokeObjectURL(f.preview));
+        setFiles(newFiles.slice(0, 1));
+        onChange?.(newFiles.slice(0, 1).map((f) => f.file));
+      }
+    },
+    [files, maxSize, multiple, onChange, preview]
+  );
+  const handleChange = useCallback4(
+    (e) => {
+      if (e.target.files?.length) {
+        processFiles(e.target.files);
+      }
+      e.target.value = "";
+    },
+    [processFiles]
+  );
+  const handleDragOver = useCallback4(
+    (e) => {
+      e.preventDefault();
+      if (!disabled) setDragging(true);
+    },
+    [disabled]
+  );
+  const handleDragLeave = useCallback4((e) => {
+    e.preventDefault();
+    setDragging(false);
+  }, []);
+  const handleDrop = useCallback4(
+    (e) => {
+      e.preventDefault();
+      setDragging(false);
+      if (!disabled && e.dataTransfer.files.length) {
+        processFiles(e.dataTransfer.files);
+      }
+    },
+    [disabled, processFiles]
+  );
+  const removeFile = useCallback4(
+    (index) => {
+      const removed = files[index];
+      if (removed?.preview) URL.revokeObjectURL(removed.preview);
+      const next = files.filter((_, i) => i !== index);
+      setFiles(next);
+      onChange?.(next.map((f) => f.file));
+    },
+    [files, onChange]
+  );
+  const setRef = useCallback4(
+    (el) => {
+      inputRef.current = el;
+      if (typeof ref === "function") ref(el);
+      else if (ref) ref.current = el;
+    },
+    [ref]
+  );
+  const defaultPlaceholder = compact ? "Choose file" : "Drop files here or click to browse";
+  return /* @__PURE__ */ jsxs26(
+    "div",
+    {
+      className: cn(
+        "tb-file-upload",
+        compact && "tb-file-upload--compact",
+        className
+      ),
+      children: [
+        label && /* @__PURE__ */ jsx31("label", { htmlFor: autoId, className: "tb-label", children: label }),
+        /* @__PURE__ */ jsxs26(
+          "div",
+          {
+            className: cn(
+              "tb-file-upload__zone",
+              dragging && "tb-file-upload__zone--drag",
+              error && "tb-file-upload__zone--error",
+              disabled && "tb-file-upload__zone--disabled"
+            ),
+            onDragOver: handleDragOver,
+            onDragLeave: handleDragLeave,
+            onDrop: handleDrop,
+            children: [
+              /* @__PURE__ */ jsx31(
+                "input",
+                {
+                  ref: setRef,
+                  id: autoId,
+                  type: "file",
+                  className: "tb-file-upload__input",
+                  accept,
+                  multiple,
+                  disabled,
+                  onChange: handleChange,
+                  "aria-describedby": error ? `${autoId}-error` : void 0
+                }
+              ),
+              compact ? /* @__PURE__ */ jsxs26("span", { className: "tb-btn tb-btn--sm", children: [
+                icon && /* @__PURE__ */ jsx31("span", { className: "tb-btn__icon", children: icon }),
+                placeholder ?? defaultPlaceholder
+              ] }) : /* @__PURE__ */ jsxs26(Fragment4, { children: [
+                /* @__PURE__ */ jsx31("span", { className: "tb-file-upload__icon", "aria-hidden": "true", children: icon ?? /* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined", children: "upload_file" }) }),
+                /* @__PURE__ */ jsx31("span", { className: "tb-file-upload__text", children: placeholder ?? defaultPlaceholder }),
+                hint && /* @__PURE__ */ jsx31("span", { className: "tb-file-upload__hint-text", children: hint })
+              ] })
+            ]
+          }
+        ),
+        error && /* @__PURE__ */ jsx31("span", { id: `${autoId}-error`, className: "tb-file-upload__error", role: "alert", children: error }),
+        displayFiles.length > 0 && /* @__PURE__ */ jsx31("div", { className: "tb-file-upload__files", children: displayFiles.map((f, i) => /* @__PURE__ */ jsxs26("div", { className: "tb-file-upload__file", children: [
+          f.preview ? /* @__PURE__ */ jsx31(
+            "img",
+            {
+              src: f.preview,
+              alt: f.file.name,
+              className: "tb-file-upload__preview"
+            }
+          ) : /* @__PURE__ */ jsx31("span", { className: "tb-file-upload__file-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined", children: isImage(f.file) ? "image" : "description" }) }),
+          /* @__PURE__ */ jsxs26("div", { className: "tb-file-upload__file-info", children: [
+            /* @__PURE__ */ jsx31("div", { className: "tb-file-upload__file-name", children: f.file.name }),
+            /* @__PURE__ */ jsx31("div", { className: "tb-file-upload__file-size", children: formatSize(f.file.size) })
+          ] }),
+          !value && /* @__PURE__ */ jsx31(
+            "button",
+            {
+              type: "button",
+              className: "tb-file-upload__file-remove",
+              onClick: () => removeFile(i),
+              "aria-label": `Remove ${f.file.name}`,
+              children: /* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined", children: "close" })
+            }
+          )
+        ] }, `${f.file.name}-${i}`)) })
+      ]
+    }
+  );
+}
+
 // src/components/Sidenav/Sidenav.tsx
 import {
   createContext as createContext5,
   useContext as useContext5,
-  useState as useState9
+  useState as useState10
 } from "react";
-import { jsx as jsx30, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs27 } from "react/jsx-runtime";
 var SidenavContext = createContext5({
   iconPosition: "left",
   borderSide: "left"
@@ -1751,7 +2007,7 @@ function SidenavRoot({
   ref,
   ...props
 }) {
-  return /* @__PURE__ */ jsx30(SidenavContext.Provider, { value: { iconPosition, borderSide }, children: /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx32(SidenavContext.Provider, { value: { iconPosition, borderSide }, children: /* @__PURE__ */ jsx32(
     "nav",
     {
       ref,
@@ -1775,7 +2031,7 @@ function Item({
   ...props
 }) {
   const Component = as || "a";
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx32(
     Component,
     {
       ref,
@@ -1790,7 +2046,7 @@ function Item({
   );
 }
 function Icon({ className, ref, ...props }) {
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx32(
     "span",
     {
       ref,
@@ -1810,7 +2066,7 @@ function Group({
   ref,
   ...props
 }) {
-  const [internalOpen, setInternalOpen] = useState9(defaultOpen);
+  const [internalOpen, setInternalOpen] = useState10(defaultOpen);
   const isControlled = controlledOpen !== void 0;
   const isOpen = isControlled ? controlledOpen : internalOpen;
   function toggle() {
@@ -1818,7 +2074,7 @@ function Group({
     if (!isControlled) setInternalOpen(next);
     onOpenChange?.(next);
   }
-  return /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs27(
     "div",
     {
       ref,
@@ -1829,7 +2085,7 @@ function Group({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsxs25(
+        /* @__PURE__ */ jsxs27(
           "button",
           {
             type: "button",
@@ -1837,13 +2093,13 @@ function Group({
             onClick: toggle,
             "aria-expanded": isOpen,
             children: [
-              icon && /* @__PURE__ */ jsx30("span", { className: "tb-sidenav__icon", children: icon }),
+              icon && /* @__PURE__ */ jsx32("span", { className: "tb-sidenav__icon", children: icon }),
               label,
-              /* @__PURE__ */ jsx30("span", { className: "tb-sidenav__group-chevron material-symbols-outlined", "aria-hidden": "true", children: "expand_more" })
+              /* @__PURE__ */ jsx32("span", { className: "tb-sidenav__group-chevron material-symbols-outlined", "aria-hidden": "true", children: "expand_more" })
             ]
           }
         ),
-        /* @__PURE__ */ jsx30("div", { className: "tb-sidenav__group-content", children })
+        /* @__PURE__ */ jsx32("div", { className: "tb-sidenav__group-content", children })
       ]
     }
   );
@@ -1855,27 +2111,27 @@ var Sidenav = Object.assign(SidenavRoot, {
 });
 
 // src/components/CodeBlock.tsx
-import { useState as useState10, useRef as useRef6 } from "react";
-import { jsx as jsx31, jsxs as jsxs26 } from "react/jsx-runtime";
+import { useState as useState11, useRef as useRef7 } from "react";
+import { jsx as jsx33, jsxs as jsxs28 } from "react/jsx-runtime";
 function CodeBlock({ children, copyText, className, ref, ...props }) {
-  const [copied, setCopied] = useState10(false);
-  const contentRef = useRef6(null);
+  const [copied, setCopied] = useState11(false);
+  const contentRef = useRef7(null);
   async function handleCopy() {
     const text = copyText ?? contentRef.current?.textContent ?? "";
     await navigator.clipboard.writeText(text);
     setCopied(true);
     setTimeout(() => setCopied(false), 2e3);
   }
-  return /* @__PURE__ */ jsxs26("div", { ref, className: cn("tb-code-block", className), ...props, children: [
-    /* @__PURE__ */ jsx31("div", { ref: contentRef, children }),
-    /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsxs28("div", { ref, className: cn("tb-code-block", className), ...props, children: [
+    /* @__PURE__ */ jsx33("div", { ref: contentRef, children }),
+    /* @__PURE__ */ jsx33(
       "button",
       {
         type: "button",
         className: cn("tb-code-block__copy", copied && "tb-code-block__copy--copied"),
         onClick: handleCopy,
         "aria-label": copied ? "Copied" : "Copy to clipboard",
-        children: /* @__PURE__ */ jsx31("span", { className: "material-symbols-outlined", style: { fontSize: 14 }, children: copied ? "check" : "content_copy" })
+        children: /* @__PURE__ */ jsx33("span", { className: "material-symbols-outlined", style: { fontSize: 14 }, children: copied ? "check" : "content_copy" })
       }
     )
   ] });
@@ -1885,11 +2141,11 @@ function CodeBlock({ children, copyText, className, ref, ...props }) {
 import {
   createContext as createContext6,
   useContext as useContext6,
-  useState as useState11,
+  useState as useState12,
   useEffect as useEffect7,
-  useCallback as useCallback4
+  useCallback as useCallback5
 } from "react";
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 var ThemeContext = createContext6(null);
 function useTheme() {
   const ctx = useContext6(ThemeContext);
@@ -1907,25 +2163,25 @@ function ThemeProvider({
 }) {
   const isThemeControlled = controlledTheme !== void 0;
   const isContrastControlled = controlledContrast !== void 0;
-  const [internalTheme, setInternalTheme] = useState11(defaultTheme);
-  const [internalContrast, setInternalContrast] = useState11(defaultContrast);
+  const [internalTheme, setInternalTheme] = useState12(defaultTheme);
+  const [internalContrast, setInternalContrast] = useState12(defaultContrast);
   const theme = isThemeControlled ? controlledTheme : internalTheme;
   const contrast = isContrastControlled ? controlledContrast : internalContrast;
-  const setTheme = useCallback4(
+  const setTheme = useCallback5(
     (next) => {
       if (!isThemeControlled) setInternalTheme(next);
       onThemeChange?.(next);
     },
     [isThemeControlled, onThemeChange]
   );
-  const setContrast = useCallback4(
+  const setContrast = useCallback5(
     (next) => {
       if (!isContrastControlled) setInternalContrast(next);
       onContrastChange?.(next);
     },
     [isContrastControlled, onContrastChange]
   );
-  const toggleTheme = useCallback4(
+  const toggleTheme = useCallback5(
     () => setTheme(theme === "dark" ? "light" : "dark"),
     [theme, setTheme]
   );
@@ -1938,23 +2194,23 @@ function ThemeProvider({
       root.removeAttribute("data-contrast");
     }
   }, [theme, contrast]);
-  return /* @__PURE__ */ jsx32(ThemeContext.Provider, { value: { theme, setTheme, contrast, setContrast, toggleTheme }, children });
+  return /* @__PURE__ */ jsx34(ThemeContext.Provider, { value: { theme, setTheme, contrast, setContrast, toggleTheme }, children });
 }
 
 // src/hooks/useDisclosure.ts
-import { useState as useState12, useCallback as useCallback5 } from "react";
+import { useState as useState13, useCallback as useCallback6 } from "react";
 function useDisclosure(options = {}) {
   const { defaultOpen = false, onOpen: onOpenCallback, onClose: onCloseCallback } = options;
-  const [isOpen, setIsOpen] = useState12(defaultOpen);
-  const onOpen = useCallback5(() => {
+  const [isOpen, setIsOpen] = useState13(defaultOpen);
+  const onOpen = useCallback6(() => {
     setIsOpen(true);
     onOpenCallback?.();
   }, [onOpenCallback]);
-  const onClose = useCallback5(() => {
+  const onClose = useCallback6(() => {
     setIsOpen(false);
     onCloseCallback?.();
   }, [onCloseCallback]);
-  const onToggle = useCallback5(() => {
+  const onToggle = useCallback6(() => {
     if (isOpen) {
       onClose();
     } else {
@@ -1965,7 +2221,7 @@ function useDisclosure(options = {}) {
 }
 
 // src/hooks/useFocusTrap.ts
-import { useEffect as useEffect8, useRef as useRef7 } from "react";
+import { useEffect as useEffect8, useRef as useRef8 } from "react";
 var FOCUSABLE_SELECTOR = [
   "a[href]",
   "button:not([disabled])",
@@ -1975,7 +2231,7 @@ var FOCUSABLE_SELECTOR = [
   '[tabindex]:not([tabindex="-1"])'
 ].join(", ");
 function useFocusTrap(ref, active) {
-  const previouslyFocusedRef = useRef7(null);
+  const previouslyFocusedRef = useRef8(null);
   useEffect8(() => {
     if (!active || !ref.current) return;
     previouslyFocusedRef.current = document.activeElement;
@@ -2013,13 +2269,13 @@ function useFocusTrap(ref, active) {
 }
 
 // src/hooks/useKeyboardNav.ts
-import { useState as useState13, useCallback as useCallback6 } from "react";
+import { useState as useState14, useCallback as useCallback7 } from "react";
 function useKeyboardNav(items, options = {}) {
   const { orientation = "vertical", loop = true, onSelect } = options;
-  const [activeIndex, setActiveIndex] = useState13(0);
+  const [activeIndex, setActiveIndex] = useState14(0);
   const prevKey = orientation === "vertical" ? "ArrowUp" : "ArrowLeft";
   const nextKey = orientation === "vertical" ? "ArrowDown" : "ArrowRight";
-  const onKeyDown = useCallback6(
+  const onKeyDown = useCallback7(
     (e) => {
       const list = items.current;
       if (!list || list.length === 0) return;
@@ -2068,9 +2324,9 @@ function useKeyboardNav(items, options = {}) {
 }
 
 // src/hooks/useReducedMotion.ts
-import { useState as useState14, useEffect as useEffect9 } from "react";
+import { useState as useState15, useEffect as useEffect9 } from "react";
 function useReducedMotion() {
-  const [reduced, setReduced] = useState14(false);
+  const [reduced, setReduced] = useState15(false);
   useEffect9(() => {
     const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
     setReduced(mq.matches);
@@ -2082,9 +2338,9 @@ function useReducedMotion() {
 }
 
 // src/hooks/useMergedRef.ts
-import { useCallback as useCallback7 } from "react";
+import { useCallback as useCallback8 } from "react";
 function useMergedRef(...refs) {
-  return useCallback7((node) => {
+  return useCallback8((node) => {
     refs.forEach((ref) => {
       if (typeof ref === "function") ref(node);
       else if (ref) ref.current = node;
@@ -2101,6 +2357,7 @@ export {
   Checkbox,
   CodeBlock,
   CornerBrackets,
+  FileUpload,
   Input,
   Modal,
   NavDropdown,
@@ -2115,6 +2372,7 @@ export {
   SelectTrigger,
   Sidenav,
   Skeleton,
+  Slider,
   Spinner,
   Table,
   Tabs,