@terminal-blueprint/react 0.1.0 → 0.1.2

package/dist/index.cjs

@@ -29,6 +29,7 @@ __export(index_exports, {
   Checkbox: () => Checkbox,
   CodeBlock: () => CodeBlock,
   CornerBrackets: () => CornerBrackets,
+  FileUpload: () => FileUpload,
   Input: () => Input,
   Modal: () => Modal,
   NavDropdown: () => NavDropdown,
@@ -43,6 +44,7 @@ __export(index_exports, {
   SelectTrigger: () => SelectTrigger,
   Sidenav: () => Sidenav,
   Skeleton: () => Skeleton,
+  Slider: () => Slider,
   Spinner: () => Spinner,
   Table: () => Table,
   Tabs: () => Tabs,
@@ -222,6 +224,7 @@ function CardRoot({
   brackets = false,
   pulse = false,
   hoverable = false,
+  href,
   className,
   children,
   ref,
@@ -237,10 +240,12 @@ function CardRoot({
         brackets && "tb-card--bracketed",
         pulse && "tb-card--pulse",
         hoverable && "tb-card--hoverable",
+        href && "tb-card--link",
         className
       ),
       ...props,
       children: [
+        href && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("a", { className: "tb-card__link", href, "aria-hidden": "true", tabIndex: -1 }),
         brackets && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "tb-card__bracket tb-card__bracket--tl" }),
           /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "tb-card__bracket tb-card__bracket--tr" }),
@@ -650,6 +655,7 @@ function ModalRoot({
   closeOnBackdrop = true,
   hideCloseButton = false,
   portalTarget,
+  variant,
   children,
   className,
   ref
@@ -735,7 +741,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: [
@@ -1388,22 +1394,81 @@ function Progress({
   );
 }
 
-// src/components/Battery.tsx
+// src/components/Slider.tsx
+var import_react13 = require("react");
 var import_jsx_runtime22 = require("react/jsx-runtime");
+function Slider({
+  value,
+  onChange,
+  min = 0,
+  max = 100,
+  step = 1,
+  variant = "default",
+  label,
+  showValue = false,
+  disabled = false,
+  className,
+  ref
+}) {
+  const id = (0, import_react13.useId)();
+  const percent = (value - min) / (max - min) * 100;
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+    "div",
+    {
+      className: cn(
+        "tb-slider",
+        variant !== "default" && `tb-slider--${variant}`,
+        disabled && "tb-slider--disabled",
+        className
+      ),
+      children: [
+        (label || showValue) && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "tb-slider__header", children: [
+          label && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("label", { className: "tb-slider__label", htmlFor: id, children: label }),
+          showValue && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "tb-slider__value", children: value })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          "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
+var import_jsx_runtime23 = require("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__ */ (0, import_jsx_runtime22.jsxs)(
+  const percent = Math.round(clampedValue / total * 100);
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
     "div",
     {
       className: cn(
-        "tb-battery",
+        "tb-battery tb-battery--inline",
         variant !== "default" && `tb-battery--${variant}`,
         animated && "tb-battery--animated",
         className
@@ -1414,19 +1479,20 @@ function Battery({
       "aria-valuemax": total,
       "aria-label": label,
       children: [
-        label && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "tb-battery__label", children: label }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "tb-battery__body", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "tb-battery__cap" }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "tb-battery__segments", children: Array.from({ length: total }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-            "div",
-            {
-              className: cn(
-                "tb-battery__segment",
-                i < clampedValue && "tb-battery__segment--filled"
-              )
-            },
-            i
-          )) })
+        label && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "tb-battery__label", children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "tb-battery__track", children: Array.from({ length: total }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          "div",
+          {
+            className: cn(
+              "tb-battery__segment",
+              i < clampedValue && "tb-battery__segment--filled"
+            )
+          },
+          i
+        )) }),
+        showValue && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className: "tb-battery__value", children: [
+          percent,
+          "%"
         ] })
       ]
     }
@@ -1434,7 +1500,7 @@ function Battery({
 }
 
 // src/components/BatteryInline.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function BatteryInline({
   value,
   total = 10,
@@ -1446,11 +1512,12 @@ function BatteryInline({
 }) {
   const clampedValue = Math.max(0, Math.min(total, value));
   const percent = Math.round(clampedValue / total * 100);
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
     "div",
     {
       className: cn(
         "tb-battery tb-battery--inline",
+        variant !== "default" && `tb-battery--${variant}`,
         animated && "tb-battery--animated",
         className
       ),
@@ -1460,20 +1527,18 @@ function BatteryInline({
       "aria-valuemax": total,
       "aria-label": label,
       children: [
-        label && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "tb-battery__label", children: label }),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "tb-battery__track", children: Array.from({ length: total }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        label && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "tb-battery__label", children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "tb-battery__track", children: Array.from({ length: total }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           "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__ */ (0, import_jsx_runtime23.jsx)("div", { className: "tb-battery__cap" }),
-        showValue && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className: "tb-battery__value", children: [
+        showValue && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { className: "tb-battery__value", children: [
           percent,
           "%"
         ] })
@@ -1483,7 +1548,7 @@ function BatteryInline({
 }
 
 // src/components/Table.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function getCellValue(row, accessor) {
   if (typeof accessor === "function") return accessor(row);
   return row[accessor];
@@ -1494,9 +1559,9 @@ function Table({
   onRowClick,
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: cn("tb-table__wrapper", className), children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("table", { className: "tb-table", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("thead", { className: "tb-table__head", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("tr", { className: "tb-table__row", children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("th", { className: "tb-table__th", children: col.header }, col.id)) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("tbody", { className: "tb-table__body", children: data.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: cn("tb-table__wrapper", className), children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("table", { className: "tb-table", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("thead", { className: "tb-table__head", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("tr", { className: "tb-table__row", children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("th", { className: "tb-table__th", children: col.header }, col.id)) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("tbody", { className: "tb-table__body", children: data.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       "tr",
       {
         className: cn(
@@ -1506,7 +1571,7 @@ function Table({
         onClick: onRowClick ? () => onRowClick(row) : void 0,
         children: columns.map((col) => {
           const value = getCellValue(row, col.accessor);
-          return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "tb-table__td", children: col.cell ? col.cell(value, row) : value }, col.id);
+          return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("td", { className: "tb-table__td", children: col.cell ? col.cell(value, row) : value }, col.id);
         })
       },
       rowIndex
@@ -1515,7 +1580,7 @@ function Table({
 }
 
 // src/components/Skeleton.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function Skeleton({
   variant = "text",
   width,
@@ -1528,7 +1593,7 @@ function Skeleton({
     height: typeof height === "number" ? `${height}px` : height
   };
   if (variant === "text" && lines > 1) {
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: cn("tb-skeleton__group", className), children: Array.from({ length: lines }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: cn("tb-skeleton__group", className), children: Array.from({ length: lines }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       "div",
       {
         className: cn(
@@ -1540,7 +1605,7 @@ function Skeleton({
       i
     )) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     "div",
     {
       className: cn(
@@ -1554,13 +1619,13 @@ function Skeleton({
 }
 
 // src/components/Spinner.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function Spinner({
   variant = "multi-square",
   size = "md",
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     "span",
     {
       className: cn(
@@ -1571,19 +1636,19 @@ function Spinner({
       ),
       role: "status",
       "aria-label": "Loading",
-      children: variant === "multi-square" && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "tb-spinner__square" }),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "tb-spinner__square" }),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "tb-spinner__square" }),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "tb-spinner__square" }),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "tb-spinner__square" })
+      children: variant === "multi-square" && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "tb-spinner__square" }),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "tb-spinner__square" }),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "tb-spinner__square" }),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "tb-spinner__square" }),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "tb-spinner__square" })
       ] })
     }
   );
 }
 
 // src/components/Pagination.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function getPageRange(page, totalPages, siblingCount) {
   const totalSlots = siblingCount * 2 + 5;
   if (totalPages <= totalSlots) {
@@ -1616,8 +1681,8 @@ function Pagination({
   className
 }) {
   const pages = getPageRange(page, totalPages, siblingCount);
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("nav", { className: cn("tb-pagination", className), "aria-label": "Pagination", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("nav", { className: cn("tb-pagination", className), "aria-label": "Pagination", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       "button",
       {
         className: "tb-pagination__btn tb-pagination__btn--prev",
@@ -1628,7 +1693,7 @@ function Pagination({
       }
     ),
     pages.map(
-      (p, i) => p === "ellipsis" ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "tb-pagination__ellipsis", children: "..." }, `ellipsis-${i}`) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      (p, i) => p === "ellipsis" ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "tb-pagination__ellipsis", children: "..." }, `ellipsis-${i}`) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
         "button",
         {
           className: cn(
@@ -1642,7 +1707,7 @@ function Pagination({
         p
       )
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       "button",
       {
         className: "tb-pagination__btn tb-pagination__btn--next",
@@ -1656,7 +1721,7 @@ function Pagination({
 }
 
 // src/components/Breadcrumbs.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function Breadcrumbs({
   items,
   separator = "/",
@@ -1664,10 +1729,10 @@ function Breadcrumbs({
   className
 }) {
   const LinkComponent = linkComponent || "a";
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("nav", { className: cn("tb-breadcrumbs", className), "aria-label": "Breadcrumb", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("ol", { className: "tb-breadcrumbs__list", children: items.map((item, i) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("nav", { className: cn("tb-breadcrumbs", className), "aria-label": "Breadcrumb", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("ol", { className: "tb-breadcrumbs__list", children: items.map((item, i) => {
     const isLast = i === items.length - 1;
-    return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("li", { className: "tb-breadcrumbs__item", children: [
-      item.href && !isLast ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(LinkComponent, { href: item.href, className: "tb-breadcrumbs__link", children: item.label }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("li", { className: "tb-breadcrumbs__item", children: [
+      item.href && !isLast ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(LinkComponent, { href: item.href, className: "tb-breadcrumbs__link", children: item.label }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
         "span",
         {
           className: "tb-breadcrumbs__current",
@@ -1675,14 +1740,14 @@ function Breadcrumbs({
           children: item.label
         }
       ),
-      !isLast && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "tb-breadcrumbs__separator", "aria-hidden": "true", children: separator })
+      !isLast && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "tb-breadcrumbs__separator", "aria-hidden": "true", children: separator })
     ] }, i);
   }) }) });
 }
 
 // src/components/Toolbar.tsx
-var import_react13 = require("react");
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_react14 = require("react");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 function ToolbarSelect({
   options,
   value: controlledValue,
@@ -1692,12 +1757,12 @@ function ToolbarSelect({
   minWidth,
   className
 }) {
-  const [internalValue, setInternalValue] = (0, import_react13.useState)(defaultValue ?? options[0]?.value ?? "");
-  const [open, setOpen] = (0, import_react13.useState)(false);
-  const ref = (0, import_react13.useRef)(null);
+  const [internalValue, setInternalValue] = (0, import_react14.useState)(defaultValue ?? options[0]?.value ?? "");
+  const [open, setOpen] = (0, import_react14.useState)(false);
+  const ref = (0, import_react14.useRef)(null);
   const value = controlledValue ?? internalValue;
   const activeOption = options.find((o) => o.value === value);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     function handleClick(e) {
       if (ref.current && !ref.current.contains(e.target)) {
         setOpen(false);
@@ -1711,13 +1776,13 @@ function ToolbarSelect({
     onChange?.(opt.value);
     setOpen(false);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
     "div",
     {
       ref,
       className: cn("tb-toolbar__select", open && "tb-toolbar__select--open", className),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
           "button",
           {
             type: "button",
@@ -1728,20 +1793,19 @@ function ToolbarSelect({
               setOpen(!open);
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { children: activeOption?.label ?? "" }),
-              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "tb-toolbar__chevron" })
+              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { children: activeOption?.label ?? "" }),
+              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "tb-toolbar__chevron" })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: cn("tb-toolbar__dropdown", dropDown && "tb-toolbar__dropdown--down"), children: options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: cn("tb-toolbar__dropdown", dropDown && "tb-toolbar__dropdown--down"), children: options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
           "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__ */ (0, import_jsx_runtime29.jsx)("span", { className: "tb-toolbar__option-meta", children: opt.meta })
+              opt.meta && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "tb-toolbar__option-meta", children: opt.meta })
             ]
           },
           opt.value
@@ -1751,13 +1815,13 @@ function ToolbarSelect({
   );
 }
 function ToolbarLabel({ children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: cn("tb-toolbar__label", className), ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: cn("tb-toolbar__label", className), ...props, children });
 }
 function ToolbarDivider({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: cn("tb-toolbar__divider", className), ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: cn("tb-toolbar__divider", className), ...props });
 }
 function ToolbarRoot({ position, fixed = false, children, className, ref, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     "div",
     {
       ref,
@@ -1778,10 +1842,199 @@ var Toolbar = Object.assign(ToolbarRoot, {
   Divider: ToolbarDivider
 });
 
+// src/components/FileUpload.tsx
+var import_react15 = require("react");
+var import_jsx_runtime31 = require("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 = (0, import_react15.useId)();
+  const inputRef = (0, import_react15.useRef)(null);
+  const [dragging, setDragging] = (0, import_react15.useState)(false);
+  const [files, setFiles] = (0, import_react15.useState)([]);
+  const [internalError, setInternalError] = (0, import_react15.useState)();
+  const error = errorProp ?? internalError;
+  const displayFiles = value ? value.map((f) => ({ file: f, preview: preview && isImage(f) ? URL.createObjectURL(f) : void 0 })) : files;
+  const processFiles = (0, import_react15.useCallback)(
+    (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 = (0, import_react15.useCallback)(
+    (e) => {
+      if (e.target.files?.length) {
+        processFiles(e.target.files);
+      }
+      e.target.value = "";
+    },
+    [processFiles]
+  );
+  const handleDragOver = (0, import_react15.useCallback)(
+    (e) => {
+      e.preventDefault();
+      if (!disabled) setDragging(true);
+    },
+    [disabled]
+  );
+  const handleDragLeave = (0, import_react15.useCallback)((e) => {
+    e.preventDefault();
+    setDragging(false);
+  }, []);
+  const handleDrop = (0, import_react15.useCallback)(
+    (e) => {
+      e.preventDefault();
+      setDragging(false);
+      if (!disabled && e.dataTransfer.files.length) {
+        processFiles(e.dataTransfer.files);
+      }
+    },
+    [disabled, processFiles]
+  );
+  const removeFile = (0, import_react15.useCallback)(
+    (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 = (0, import_react15.useCallback)(
+    (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__ */ (0, import_jsx_runtime31.jsxs)(
+    "div",
+    {
+      className: cn(
+        "tb-file-upload",
+        compact && "tb-file-upload--compact",
+        className
+      ),
+      children: [
+        label && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("label", { htmlFor: autoId, className: "tb-label", children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+          "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__ */ (0, import_jsx_runtime31.jsx)(
+                "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__ */ (0, import_jsx_runtime31.jsxs)("span", { className: "tb-btn tb-btn--sm", children: [
+                icon && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "tb-btn__icon", children: icon }),
+                placeholder ?? defaultPlaceholder
+              ] }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "tb-file-upload__icon", "aria-hidden": "true", children: icon ?? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "material-symbols-outlined", children: "upload_file" }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "tb-file-upload__text", children: placeholder ?? defaultPlaceholder }),
+                hint && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "tb-file-upload__hint-text", children: hint })
+              ] })
+            ]
+          }
+        ),
+        error && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { id: `${autoId}-error`, className: "tb-file-upload__error", role: "alert", children: error }),
+        displayFiles.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "tb-file-upload__files", children: displayFiles.map((f, i) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "tb-file-upload__file", children: [
+          f.preview ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+            "img",
+            {
+              src: f.preview,
+              alt: f.file.name,
+              className: "tb-file-upload__preview"
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "tb-file-upload__file-icon", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "material-symbols-outlined", children: isImage(f.file) ? "image" : "description" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "tb-file-upload__file-info", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "tb-file-upload__file-name", children: f.file.name }),
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "tb-file-upload__file-size", children: formatSize(f.file.size) })
+          ] }),
+          !value && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "tb-file-upload__file-remove",
+              onClick: () => removeFile(i),
+              "aria-label": `Remove ${f.file.name}`,
+              children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "material-symbols-outlined", children: "close" })
+            }
+          )
+        ] }, `${f.file.name}-${i}`)) })
+      ]
+    }
+  );
+}
+
 // src/components/Sidenav/Sidenav.tsx
-var import_react14 = require("react");
-var import_jsx_runtime30 = require("react/jsx-runtime");
-var SidenavContext = (0, import_react14.createContext)({
+var import_react16 = require("react");
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var SidenavContext = (0, import_react16.createContext)({
   iconPosition: "left",
   borderSide: "left"
 });
@@ -1793,7 +2046,7 @@ function SidenavRoot({
   ref,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SidenavContext.Provider, { value: { iconPosition, borderSide }, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SidenavContext.Provider, { value: { iconPosition, borderSide }, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     "nav",
     {
       ref,
@@ -1817,7 +2070,7 @@ function Item({
   ...props
 }) {
   const Component = as || "a";
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     Component,
     {
       ref,
@@ -1832,7 +2085,7 @@ function Item({
   );
 }
 function Icon({ className, ref, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     "span",
     {
       ref,
@@ -1852,7 +2105,7 @@ function Group({
   ref,
   ...props
 }) {
-  const [internalOpen, setInternalOpen] = (0, import_react14.useState)(defaultOpen);
+  const [internalOpen, setInternalOpen] = (0, import_react16.useState)(defaultOpen);
   const isControlled = controlledOpen !== void 0;
   const isOpen = isControlled ? controlledOpen : internalOpen;
   function toggle() {
@@ -1860,7 +2113,7 @@ function Group({
     if (!isControlled) setInternalOpen(next);
     onOpenChange?.(next);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
     "div",
     {
       ref,
@@ -1871,7 +2124,7 @@ function Group({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
           "button",
           {
             type: "button",
@@ -1879,13 +2132,13 @@ function Group({
             onClick: toggle,
             "aria-expanded": isOpen,
             children: [
-              icon && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "tb-sidenav__icon", children: icon }),
+              icon && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "tb-sidenav__icon", children: icon }),
               label,
-              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "tb-sidenav__group-chevron material-symbols-outlined", "aria-hidden": "true", children: "expand_more" })
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "tb-sidenav__group-chevron material-symbols-outlined", "aria-hidden": "true", children: "expand_more" })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "tb-sidenav__group-content", children })
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "tb-sidenav__group-content", children })
       ]
     }
   );
@@ -1897,38 +2150,38 @@ var Sidenav = Object.assign(SidenavRoot, {
 });
 
 // src/components/CodeBlock.tsx
-var import_react15 = require("react");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_react17 = require("react");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 function CodeBlock({ children, copyText, className, ref, ...props }) {
-  const [copied, setCopied] = (0, import_react15.useState)(false);
-  const contentRef = (0, import_react15.useRef)(null);
+  const [copied, setCopied] = (0, import_react17.useState)(false);
+  const contentRef = (0, import_react17.useRef)(null);
   async function handleCopy() {
     const text = copyText ?? contentRef.current?.textContent ?? "";
     await navigator.clipboard.writeText(text);
     setCopied(true);
     setTimeout(() => setCopied(false), 2e3);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { ref, className: cn("tb-code-block", className), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { ref: contentRef, children }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { ref, className: cn("tb-code-block", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { ref: contentRef, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       "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__ */ (0, import_jsx_runtime31.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 14 }, children: copied ? "check" : "content_copy" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 14 }, children: copied ? "check" : "content_copy" })
       }
     )
   ] });
 }
 
 // src/components/ThemeProvider.tsx
-var import_react16 = require("react");
-var import_jsx_runtime32 = require("react/jsx-runtime");
-var ThemeContext = (0, import_react16.createContext)(null);
+var import_react18 = require("react");
+var import_jsx_runtime34 = require("react/jsx-runtime");
+var ThemeContext = (0, import_react18.createContext)(null);
 function useTheme() {
-  const ctx = (0, import_react16.useContext)(ThemeContext);
+  const ctx = (0, import_react18.useContext)(ThemeContext);
   if (!ctx) throw new Error("useTheme must be used within <ThemeProvider>");
   return ctx;
 }
@@ -1943,29 +2196,29 @@ function ThemeProvider({
 }) {
   const isThemeControlled = controlledTheme !== void 0;
   const isContrastControlled = controlledContrast !== void 0;
-  const [internalTheme, setInternalTheme] = (0, import_react16.useState)(defaultTheme);
-  const [internalContrast, setInternalContrast] = (0, import_react16.useState)(defaultContrast);
+  const [internalTheme, setInternalTheme] = (0, import_react18.useState)(defaultTheme);
+  const [internalContrast, setInternalContrast] = (0, import_react18.useState)(defaultContrast);
   const theme = isThemeControlled ? controlledTheme : internalTheme;
   const contrast = isContrastControlled ? controlledContrast : internalContrast;
-  const setTheme = (0, import_react16.useCallback)(
+  const setTheme = (0, import_react18.useCallback)(
     (next) => {
       if (!isThemeControlled) setInternalTheme(next);
       onThemeChange?.(next);
     },
     [isThemeControlled, onThemeChange]
   );
-  const setContrast = (0, import_react16.useCallback)(
+  const setContrast = (0, import_react18.useCallback)(
     (next) => {
       if (!isContrastControlled) setInternalContrast(next);
       onContrastChange?.(next);
     },
     [isContrastControlled, onContrastChange]
   );
-  const toggleTheme = (0, import_react16.useCallback)(
+  const toggleTheme = (0, import_react18.useCallback)(
     () => setTheme(theme === "dark" ? "light" : "dark"),
     [theme, setTheme]
   );
-  (0, import_react16.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     const root = document.documentElement;
     root.setAttribute("data-theme", theme);
     if (contrast === "high") {
@@ -1974,23 +2227,23 @@ function ThemeProvider({
       root.removeAttribute("data-contrast");
     }
   }, [theme, contrast]);
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ThemeContext.Provider, { value: { theme, setTheme, contrast, setContrast, toggleTheme }, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ThemeContext.Provider, { value: { theme, setTheme, contrast, setContrast, toggleTheme }, children });
 }
 
 // src/hooks/useDisclosure.ts
-var import_react17 = require("react");
+var import_react19 = require("react");
 function useDisclosure(options = {}) {
   const { defaultOpen = false, onOpen: onOpenCallback, onClose: onCloseCallback } = options;
-  const [isOpen, setIsOpen] = (0, import_react17.useState)(defaultOpen);
-  const onOpen = (0, import_react17.useCallback)(() => {
+  const [isOpen, setIsOpen] = (0, import_react19.useState)(defaultOpen);
+  const onOpen = (0, import_react19.useCallback)(() => {
     setIsOpen(true);
     onOpenCallback?.();
   }, [onOpenCallback]);
-  const onClose = (0, import_react17.useCallback)(() => {
+  const onClose = (0, import_react19.useCallback)(() => {
     setIsOpen(false);
     onCloseCallback?.();
   }, [onCloseCallback]);
-  const onToggle = (0, import_react17.useCallback)(() => {
+  const onToggle = (0, import_react19.useCallback)(() => {
     if (isOpen) {
       onClose();
     } else {
@@ -2001,7 +2254,7 @@ function useDisclosure(options = {}) {
 }
 
 // src/hooks/useFocusTrap.ts
-var import_react18 = require("react");
+var import_react20 = require("react");
 var FOCUSABLE_SELECTOR = [
   "a[href]",
   "button:not([disabled])",
@@ -2011,8 +2264,8 @@ var FOCUSABLE_SELECTOR = [
   '[tabindex]:not([tabindex="-1"])'
 ].join(", ");
 function useFocusTrap(ref, active) {
-  const previouslyFocusedRef = (0, import_react18.useRef)(null);
-  (0, import_react18.useEffect)(() => {
+  const previouslyFocusedRef = (0, import_react20.useRef)(null);
+  (0, import_react20.useEffect)(() => {
     if (!active || !ref.current) return;
     previouslyFocusedRef.current = document.activeElement;
     const container = ref.current;
@@ -2049,13 +2302,13 @@ function useFocusTrap(ref, active) {
 }
 
 // src/hooks/useKeyboardNav.ts
-var import_react19 = require("react");
+var import_react21 = require("react");
 function useKeyboardNav(items, options = {}) {
   const { orientation = "vertical", loop = true, onSelect } = options;
-  const [activeIndex, setActiveIndex] = (0, import_react19.useState)(0);
+  const [activeIndex, setActiveIndex] = (0, import_react21.useState)(0);
   const prevKey = orientation === "vertical" ? "ArrowUp" : "ArrowLeft";
   const nextKey = orientation === "vertical" ? "ArrowDown" : "ArrowRight";
-  const onKeyDown = (0, import_react19.useCallback)(
+  const onKeyDown = (0, import_react21.useCallback)(
     (e) => {
       const list = items.current;
       if (!list || list.length === 0) return;
@@ -2104,10 +2357,10 @@ function useKeyboardNav(items, options = {}) {
 }
 
 // src/hooks/useReducedMotion.ts
-var import_react20 = require("react");
+var import_react22 = require("react");
 function useReducedMotion() {
-  const [reduced, setReduced] = (0, import_react20.useState)(false);
-  (0, import_react20.useEffect)(() => {
+  const [reduced, setReduced] = (0, import_react22.useState)(false);
+  (0, import_react22.useEffect)(() => {
     const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
     setReduced(mq.matches);
     const handler = (e) => setReduced(e.matches);
@@ -2118,9 +2371,9 @@ function useReducedMotion() {
 }
 
 // src/hooks/useMergedRef.ts
-var import_react21 = require("react");
+var import_react23 = require("react");
 function useMergedRef(...refs) {
-  return (0, import_react21.useCallback)((node) => {
+  return (0, import_react23.useCallback)((node) => {
     refs.forEach((ref) => {
       if (typeof ref === "function") ref(node);
       else if (ref) ref.current = node;
@@ -2138,6 +2391,7 @@ function useMergedRef(...refs) {
   Checkbox,
   CodeBlock,
   CornerBrackets,
+  FileUpload,
   Input,
   Modal,
   NavDropdown,
@@ -2152,6 +2406,7 @@ function useMergedRef(...refs) {
   SelectTrigger,
   Sidenav,
   Skeleton,
+  Slider,
   Spinner,
   Table,
   Tabs,