kz-design-system 0.0.14 → 0.0.15

package/dist/index.d.mts

@@ -11,7 +11,7 @@ export { Sidesheet, SidesheetProps } from './sidesheet.mjs';
 export { SideMenu, SideMenuFlyoutSide, SideMenuGroupItem, SideMenuGroupItemSubItem, SideMenuGroupNode, SideMenuLinkNode, SideMenuNavigatePayload, SideMenuNode, SideMenuProps, SideMenuSectionNode } from './sidemenu.mjs';
 export { Tooltip, TooltipProps } from './tooltip.mjs';
 export { Tabs, TabsContent, TabsContentProps, TabsList, TabsListProps, TabsProps, TabsSize, TabsTrigger, TabsTriggerProps, TabsVariant } from './tabs.mjs';
-export { SortDirection, Table, TableAlign, TableColumn, TablePaginationState, TableProps, TableSize, TableSortState } from './table.mjs';
+export { SortDirection, Table, TableAlign, TableCellChange, TableColumn, TablePaginationState, TableProps, TableSize, TableSortState } from './table.mjs';
 export { Icon, IconProps, IconSizeKey, iconSize, iconSize as size } from './icon.mjs';
 export { Dropdown, DropdownButton, DropdownButtonItem, DropdownButtonProps, DropdownButtonTrigger, DropdownCheckboxItem, DropdownContent, DropdownItem, DropdownLabel, DropdownRadioGroup, DropdownRadioItem, DropdownSeparator, DropdownSub, DropdownSubContent, DropdownSubTrigger, DropdownTrigger, DropdownTriggerProps } from './dropdown.mjs';
 export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from './dialog.mjs';
@@ -29,6 +29,8 @@ export { FormGroup, FormGroupDirection, FormGroupProps } from './form-group.mjs'
 export { Modal, ModalProps, ModalSize, ModalTrigger } from './modal.mjs';
 export { ToastContextValue, ToastData, ToastProvider, Toaster, ToasterProps, useToast } from './toast.mjs';
 export { Card, CardPadding, CardProps, CardSize } from './card.mjs';
+export { SqlEditor, SqlEditorProps, SqlEditorQueryResult, SqlEditorSize } from './sql-editor.mjs';
+export { QrErrorCorrectionLevel, QrPatternStyle, QrRenderer, QrRendererDataProps, QrRendererDebugInfo, QrRendererImageProps, QrRendererProps } from './qr-renderer.mjs';
 export { I as IconName, i as iconRegistry } from './icon-registry-YZFYW-mt.mjs';
 import 'react';
 import 'class-variance-authority/types';

package/dist/index.d.ts

@@ -11,7 +11,7 @@ export { Sidesheet, SidesheetProps } from './sidesheet.js';
 export { SideMenu, SideMenuFlyoutSide, SideMenuGroupItem, SideMenuGroupItemSubItem, SideMenuGroupNode, SideMenuLinkNode, SideMenuNavigatePayload, SideMenuNode, SideMenuProps, SideMenuSectionNode } from './sidemenu.js';
 export { Tooltip, TooltipProps } from './tooltip.js';
 export { Tabs, TabsContent, TabsContentProps, TabsList, TabsListProps, TabsProps, TabsSize, TabsTrigger, TabsTriggerProps, TabsVariant } from './tabs.js';
-export { SortDirection, Table, TableAlign, TableColumn, TablePaginationState, TableProps, TableSize, TableSortState } from './table.js';
+export { SortDirection, Table, TableAlign, TableCellChange, TableColumn, TablePaginationState, TableProps, TableSize, TableSortState } from './table.js';
 export { Icon, IconProps, IconSizeKey, iconSize, iconSize as size } from './icon.js';
 export { Dropdown, DropdownButton, DropdownButtonItem, DropdownButtonProps, DropdownButtonTrigger, DropdownCheckboxItem, DropdownContent, DropdownItem, DropdownLabel, DropdownRadioGroup, DropdownRadioItem, DropdownSeparator, DropdownSub, DropdownSubContent, DropdownSubTrigger, DropdownTrigger, DropdownTriggerProps } from './dropdown.js';
 export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from './dialog.js';
@@ -29,6 +29,8 @@ export { FormGroup, FormGroupDirection, FormGroupProps } from './form-group.js';
 export { Modal, ModalProps, ModalSize, ModalTrigger } from './modal.js';
 export { ToastContextValue, ToastData, ToastProvider, Toaster, ToasterProps, useToast } from './toast.js';
 export { Card, CardPadding, CardProps, CardSize } from './card.js';
+export { SqlEditor, SqlEditorProps, SqlEditorQueryResult, SqlEditorSize } from './sql-editor.js';
+export { QrErrorCorrectionLevel, QrPatternStyle, QrRenderer, QrRendererDataProps, QrRendererDebugInfo, QrRendererImageProps, QrRendererProps } from './qr-renderer.js';
 export { I as IconName, i as iconRegistry } from './icon-registry-YZFYW-mt.js';
 import 'react';
 import 'class-variance-authority/types';

package/dist/index.js

@@ -83,6 +83,7 @@ __export(src_exports, {
   ModalTrigger: () => ModalTrigger,
   NumberInput: () => NumberInput,
   OverrideMode: () => OverrideMode,
+  QrRenderer: () => QrRenderer,
   RadioButton: () => RadioButton,
   RadioSize: () => RadioSize,
   Select: () => Select,
@@ -90,6 +91,7 @@ __export(src_exports, {
   SidePanel: () => SidePanel,
   SidePanelTrigger: () => SidePanelTrigger,
   Sidesheet: () => Sidesheet,
+  SqlEditor: () => SqlEditor,
   TOKEN_KEYS: () => TOKEN_KEYS,
   Table: () => Table,
   Tabs: () => Tabs,
@@ -2855,6 +2857,9 @@ function TableInner({
   onEditingCellChange,
   onSave,
   onCancel,
+  editingCells,
+  onEditingCellsChange,
+  onSaveAll,
   className,
   tableClassName,
   headerClassName,
@@ -2937,8 +2942,10 @@ function TableInner({
       endItem: Math.min(page * pageSize, total)
     };
   }, [pagination]);
+  const isMultiCellMode = editingCells != null;
   const [draftValue, setDraftValue] = React15.useState(null);
   React15.useEffect(() => {
+    if (isMultiCellMode) return;
     if (editingCell == null) {
       setDraftValue(null);
       return;
@@ -2956,23 +2963,90 @@ function TableInner({
       val = "";
     }
     setDraftValue(val ?? "");
-  }, [editingCell, data, columns, getRowId]);
+  }, [editingCell, data, columns, getRowId, isMultiCellMode]);
+  const [draftValues, setDraftValues] = React15.useState({});
+  const seedDraft = React15.useCallback(
+    (rowId, columnKey) => {
+      const row = data.find((r, i) => getRowId(r, i) === rowId);
+      if (!row) return;
+      const col = columns.find((c) => c.key === columnKey);
+      if (!col) return;
+      let val;
+      if (col.getEditValue) {
+        val = col.getEditValue(row);
+      } else if (col.accessor) {
+        val = col.accessor(row);
+      } else {
+        val = "";
+      }
+      setDraftValues((prev) => ({
+        ...prev,
+        [rowId]: { ...prev[rowId], [columnKey]: val ?? "" }
+      }));
+    },
+    [data, columns, getRowId]
+  );
   const handleEditCellClick = React15.useCallback(
     (rowId, columnKey) => {
-      onEditingCellChange?.({ rowId, columnKey });
+      if (isMultiCellMode) {
+        const next = {
+          ...editingCells,
+          [rowId]: { ...editingCells[rowId], [columnKey]: true }
+        };
+        onEditingCellsChange?.(next);
+        seedDraft(rowId, columnKey);
+      } else {
+        onEditingCellChange?.({ rowId, columnKey });
+      }
     },
-    [onEditingCellChange]
+    [
+      isMultiCellMode,
+      editingCells,
+      onEditingCellsChange,
+      onEditingCellChange,
+      seedDraft
+    ]
   );
   const handleCellSave = React15.useCallback(() => {
-    if (editingCell != null && draftValue != null) {
-      onSave?.(editingCell.rowId, editingCell.columnKey, draftValue);
-      onEditingCellChange?.(null);
+    if (isMultiCellMode) {
+      const changes = [];
+      for (const rowId of Object.keys(draftValues)) {
+        for (const columnKey of Object.keys(draftValues[rowId])) {
+          changes.push({
+            rowId,
+            columnKey,
+            value: draftValues[rowId][columnKey]
+          });
+        }
+      }
+      onSaveAll?.(changes);
+      onEditingCellsChange?.({});
+      setDraftValues({});
+    } else {
+      if (editingCell != null && draftValue != null) {
+        onSave?.(editingCell.rowId, editingCell.columnKey, draftValue);
+        onEditingCellChange?.(null);
+      }
     }
-  }, [editingCell, draftValue, onSave, onEditingCellChange]);
+  }, [
+    isMultiCellMode,
+    draftValues,
+    onSaveAll,
+    onEditingCellsChange,
+    editingCell,
+    draftValue,
+    onSave,
+    onEditingCellChange
+  ]);
   const handleCellCancel = React15.useCallback(() => {
+    if (isMultiCellMode) {
+      onEditingCellsChange?.({});
+      setDraftValues({});
+    } else {
+      onEditingCellChange?.(null);
+    }
     onCancel?.();
-    onEditingCellChange?.(null);
-  }, [onCancel, onEditingCellChange]);
+  }, [isMultiCellMode, onEditingCellsChange, onEditingCellChange, onCancel]);
   const handleDeleteSelected = React15.useCallback(() => {
     if (!onDeleteSelected) return;
     const ids = Object.keys(selectedRowIds).filter((id) => selectedRowIds[id]);
@@ -3007,12 +3081,12 @@ function TableInner({
       ]
     }
   );
-  const sizeClasses = {
+  const sizeClasses2 = {
     sm: "py-1.5 px-2 text-xs",
     md: "py-2 px-3 text-sm",
     lg: "py-3 px-4 text-base"
   };
-  const sizeClass = sizeClasses[size];
+  const sizeClass = sizeClasses2[size];
   const alignClasses = {
     left: "text-left",
     center: "text-center",
@@ -3052,7 +3126,7 @@ function TableInner({
                 id: tableId,
                 "aria-describedby": caption ? captionId : void 0,
                 className: cn(
-                  "border-collapse bg-[var(--kz-component-table-surface)]",
+                  "border-separate border-spacing-0 bg-[var(--kz-component-table-surface)]",
                   horizontalScroll ? "min-w-full w-max" : "w-full",
                   tableClassName
                 ),
@@ -3190,7 +3264,9 @@ function TableInner({
                     const rowId = getRowId(row, index);
                     const isSelected = !!selectedRowIds[rowId];
                     const isSticky = getRowSticky?.(row, index) ?? false;
-                    const hasEditingCell = editingCell != null && editingCell.rowId === rowId;
+                    const hasEditingCell = isMultiCellMode ? editingCells[rowId] != null && Object.keys(editingCells[rowId]).some(
+                      (k) => editingCells[rowId][k]
+                    ) : editingCell != null && editingCell.rowId === rowId;
                     return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
                       "tr",
                       {
@@ -3226,9 +3302,19 @@ function TableInner({
                             if (col.minWidth) style.minWidth = col.minWidth;
                             if (col.maxWidth) style.maxWidth = col.maxWidth;
                             const align = col.align ?? "left";
-                            const isCellEditing = editingCell != null && editingCell.rowId === rowId && editingCell.columnKey === col.key;
+                            const isCellEditing = isMultiCellMode ? !!editingCells[rowId]?.[col.key] : editingCell != null && editingCell.rowId === rowId && editingCell.columnKey === col.key;
                             if (isCellEditing) {
-                              const onChange = (v) => setDraftValue(v);
+                              const cellDraft = isMultiCellMode ? draftValues[rowId]?.[col.key] ?? "" : draftValue ?? "";
+                              const onChange = (v) => {
+                                if (isMultiCellMode) {
+                                  setDraftValues((prev) => ({
+                                    ...prev,
+                                    [rowId]: { ...prev[rowId], [col.key]: v }
+                                  }));
+                                } else {
+                                  setDraftValue(v);
+                                }
+                              };
                               return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                                 "td",
                                 {
@@ -3238,17 +3324,13 @@ function TableInner({
                                     alignClasses[align]
                                   ),
                                   style,
-                                  children: col.editCell ? col.editCell(
-                                    row,
-                                    draftValue ?? "",
-                                    onChange
-                                  ) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                                  children: col.editCell ? col.editCell(row, cellDraft, onChange) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                                     TextInput,
                                     {
                                       label: "",
                                       placeHolder: "",
-                                      value: String(draftValue ?? ""),
-                                      onValueChange: (v) => setDraftValue(v),
+                                      value: String(cellDraft ?? ""),
+                                      onValueChange: (v) => onChange(v),
                                       size: "sm" /* Sm */,
                                       variant: "default" /* Default */
                                     }
@@ -3312,7 +3394,9 @@ function TableInner({
             )
           }
         ),
-        (pagination && pageRange && onPageChange || someSelected && onDeleteSelected || editingCell != null) && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "kz-table-footer flex items-center border-t border-[var(--kz-component-table-row-border)] bg-[var(--kz-component-table-footer-bg)] px-[var(--kz-space-4)] py-[var(--kz-space-3)]", children: [
+        (pagination && pageRange && onPageChange || someSelected && onDeleteSelected || editingCell != null || isMultiCellMode && Object.keys(editingCells).some(
+          (rid) => Object.values(editingCells[rid]).some(Boolean)
+        )) && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "kz-table-footer flex items-center border-t border-[var(--kz-component-table-row-border)] bg-[var(--kz-component-table-footer-bg)] px-[var(--kz-space-4)] py-[var(--kz-space-3)]", children: [
           /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex items-center gap-[var(--kz-space-2)] shrink-0", children: someSelected && onDeleteSelected && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
             Button,
             {
@@ -3426,7 +3510,9 @@ function TableInner({
               }
             )
           ] }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex-1" }),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex items-center gap-[var(--kz-space-2)] shrink-0 ml-[var(--kz-space-3)]", children: editingCell != null && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex items-center gap-[var(--kz-space-2)] shrink-0 ml-[var(--kz-space-3)]", children: (editingCell != null || isMultiCellMode && Object.keys(editingCells).some(
+            (rid) => Object.values(editingCells[rid]).some(Boolean)
+          )) && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
             /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
               Button,
               {
@@ -6552,6 +6638,303 @@ var Card = React31.forwardRef(
 );
 Card.displayName = "Card";
 
+// src/components/sql-editor/SqlEditor.tsx
+var React32 = __toESM(require("react"));
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var sizeClasses = {
+  sm: {
+    toolbar: "px-2 py-1",
+    textarea: "px-2 py-1.5 text-xs leading-4",
+    status: "px-2 py-1 text-[11px]",
+    result: "text-xs",
+    resultCell: "px-2 py-1"
+  },
+  md: {
+    toolbar: "px-3 py-1.5",
+    textarea: "px-3 py-3 text-sm leading-[22px]",
+    status: "px-3 py-1 text-xs",
+    result: "text-[13px]",
+    resultCell: "px-3 py-1.5"
+  },
+  lg: {
+    toolbar: "px-4 py-2",
+    textarea: "px-4 py-3.5 text-base leading-6",
+    status: "px-4 py-1.5 text-sm",
+    result: "text-sm",
+    resultCell: "px-4 py-2"
+  }
+};
+function SqlEditorInner({
+  value,
+  onValueChange,
+  onExecute,
+  result,
+  placeholder = "SELECT * FROM ...",
+  toolbarLabel = "Query",
+  runButtonLabel = "Run",
+  rows = 5,
+  size = "md",
+  disabled = false,
+  loading = false,
+  resultsMaxHeight = "300px",
+  toolbarRight,
+  className
+}, ref) {
+  const textareaRef = React32.useRef(null);
+  const sc = sizeClasses[size];
+  const handleRun = React32.useCallback(() => {
+    if (!disabled && !loading) {
+      onExecute(value);
+    }
+  }, [value, onExecute, disabled, loading]);
+  const handleKeyDown = React32.useCallback(
+    (e) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
+        e.preventDefault();
+        handleRun();
+      }
+      if (e.key === "Tab") {
+        e.preventDefault();
+        const textarea = e.currentTarget;
+        const start = textarea.selectionStart;
+        const end = textarea.selectionEnd;
+        const newValue = value.substring(0, start) + "  " + value.substring(end);
+        onValueChange(newValue);
+        requestAnimationFrame(() => {
+          textarea.selectionStart = textarea.selectionEnd = start + 2;
+        });
+      }
+    },
+    [handleRun, value, onValueChange]
+  );
+  const hasResult = result != null;
+  const hasRows = hasResult && !result.error && result.rows.length > 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { ref, className: cn("kz-sql-editor-root", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: cn("kz-sql-editor-toolbar", sc.toolbar), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "kz-sql-editor-toolbar-label", children: toolbarLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center gap-2", children: [
+        toolbarRight,
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+          Button,
+          {
+            variant: "primary" /* Primary */,
+            size: size === "lg" ? "md" /* Md */ : "sm" /* Sm */,
+            onClick: handleRun,
+            disabled: disabled || loading,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Icon, { name: "chevron-right" /* ChevronRight */, size: 14, color: "currentColor" }),
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "ml-1", children: loading ? "Running\u2026" : runButtonLabel })
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      "textarea",
+      {
+        ref: textareaRef,
+        className: cn("kz-sql-editor-textarea", sc.textarea),
+        value,
+        onChange: (e) => onValueChange(e.target.value),
+        onKeyDown: handleKeyDown,
+        placeholder,
+        spellCheck: false,
+        autoCapitalize: "off",
+        autoCorrect: "off",
+        rows,
+        disabled
+      }
+    ),
+    hasResult && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: cn("kz-sql-editor-status", sc.status), children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      "span",
+      {
+        className: cn(
+          "kz-sql-editor-status-text",
+          result.error && "kz-sql-editor-status-text--error",
+          !result.error && "kz-sql-editor-status-text--success"
+        ),
+        children: result.message
+      }
+    ) }),
+    hasRows && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      "div",
+      {
+        className: "kz-sql-editor-results",
+        style: { maxHeight: resultsMaxHeight },
+        children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("table", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("tr", { children: result.columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("th", { className: sc.resultCell, children: col }, col)) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("tbody", { children: result.rows.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("tr", { children: result.columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("td", { className: sc.resultCell, children: row[col] == null ? "" : String(row[col]) }, col)) }, i)) })
+        ] })
+      }
+    ),
+    hasResult && !result.error && result.rows.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "kz-sql-editor-empty", children: "No rows returned" })
+  ] });
+}
+var SqlEditor = React32.forwardRef(SqlEditorInner);
+SqlEditor.displayName = "SqlEditor";
+
+// src/components/qr-renderer/QrRenderer.tsx
+var React33 = __toESM(require("react"));
+var import_qrcode = __toESM(require("qrcode"));
+var import_jsx_runtime33 = require("react/jsx-runtime");
+function resolveImageSrc(image) {
+  if (image.startsWith("data:") || image.startsWith("http")) {
+    return image;
+  }
+  return `data:image/png;base64,${image}`;
+}
+function QrRendererInner(props, ref) {
+  const {
+    size = 200,
+    alt = "QR Code",
+    logo,
+    logoScale = 0.2,
+    label,
+    caption,
+    debug,
+    showDebug = false,
+    foregroundColor = "#000000",
+    backgroundColor = "#ffffff",
+    downloadable = false,
+    downloadFilename = "qr-code.png",
+    className
+  } = props;
+  const [generatedSrc, setGeneratedSrc] = React33.useState(null);
+  const isDataMode = "data" in props && !!props.data;
+  const data = isDataMode ? props.data : void 0;
+  const image = !isDataMode && "image" in props ? props.image : void 0;
+  const errorCorrectionLevel = isDataMode && "errorCorrectionLevel" in props ? props.errorCorrectionLevel : void 0;
+  React33.useEffect(() => {
+    if (!isDataMode || !data) {
+      setGeneratedSrc(null);
+      return;
+    }
+    let cancelled = false;
+    import_qrcode.default.toDataURL(data, {
+      width: size,
+      margin: 1,
+      errorCorrectionLevel: errorCorrectionLevel || "M",
+      color: {
+        dark: foregroundColor,
+        light: backgroundColor
+      }
+    }).then((url) => {
+      if (!cancelled) setGeneratedSrc(url);
+    }).catch(() => {
+      if (!cancelled) setGeneratedSrc(null);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [
+    data,
+    size,
+    foregroundColor,
+    backgroundColor,
+    errorCorrectionLevel,
+    isDataMode
+  ]);
+  const imgSrc = isDataMode ? generatedSrc : image ? resolveImageSrc(image) : null;
+  const logoSize = Math.round(size * logoScale);
+  const handleDownload = React33.useCallback(() => {
+    if (!imgSrc) return;
+    const link = document.createElement("a");
+    link.href = imgSrc;
+    link.download = downloadFilename;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  }, [imgSrc, downloadFilename]);
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { ref, className: cn("kz-qr-renderer-root", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+      "div",
+      {
+        className: "kz-qr-renderer-image-container",
+        style: {
+          width: size,
+          height: size,
+          backgroundColor: backgroundColor || void 0
+        },
+        children: [
+          imgSrc ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+            "img",
+            {
+              src: imgSrc,
+              alt,
+              width: size,
+              height: size,
+              className: "kz-qr-renderer-image",
+              style: {
+                width: size,
+                height: size
+              }
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+            "div",
+            {
+              style: {
+                width: size,
+                height: size,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                color: "var(--kz-component-input-placeholder)",
+                fontSize: 12
+              },
+              children: isDataMode ? "Generating\u2026" : "No image"
+            }
+          ),
+          logo && imgSrc && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+            "div",
+            {
+              className: "kz-qr-renderer-logo",
+              style: {
+                width: logoSize,
+                height: logoSize
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                "img",
+                {
+                  src: resolveImageSrc(logo),
+                  alt: "Logo",
+                  width: logoSize,
+                  height: logoSize,
+                  className: "kz-qr-renderer-logo-img"
+                }
+              )
+            }
+          )
+        ]
+      }
+    ),
+    (label || caption || downloadable) && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "kz-qr-renderer-footer", children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "kz-qr-renderer-label", children: label }),
+      caption && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "kz-qr-renderer-caption", children: caption }),
+      downloadable && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+        Button,
+        {
+          variant: "outline" /* Outline */,
+          size: "sm" /* Sm */,
+          onClick: handleDownload,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Icon, { name: "arrow-down" /* ArrowDown */, size: 14, color: "currentColor" }),
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "ml-1", children: "Download" })
+          ]
+        }
+      )
+    ] }),
+    showDebug && debug && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "kz-qr-renderer-debug", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "kz-qr-renderer-debug-title", children: "Debug Info" }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "kz-qr-renderer-debug-grid", children: Object.entries(debug).map(([key, value]) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(React33.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "kz-qr-renderer-debug-key", children: key }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "kz-qr-renderer-debug-value", children: typeof value === "boolean" ? value ? "true" : "false" : String(value) })
+      ] }, key)) })
+    ] })
+  ] });
+}
+var QrRenderer = React33.forwardRef(QrRendererInner);
+QrRenderer.displayName = "QrRenderer";
+
 // src/tokens/contract/token-keys.ts
 var TOKEN_KEYS = [
   // Brand
@@ -6966,6 +7349,7 @@ var TOKEN_KEYS = [
   ModalTrigger,
   NumberInput,
   OverrideMode,
+  QrRenderer,
   RadioButton,
   RadioSize,
   Select,
@@ -6973,6 +7357,7 @@ var TOKEN_KEYS = [
   SidePanel,
   SidePanelTrigger,
   Sidesheet,
+  SqlEditor,
   TOKEN_KEYS,
   Table,
   Tabs,