@aviala-design/spiral 2.6.2 → 2.7.0

package/dist/index.cjs

@@ -3061,9 +3061,9 @@ var Progress = (0, import_react21.forwardRef)(
     const resolvedShape = shape ?? "bar";
     const displayLabel = label ?? `${Math.round(percent)}%`;
     const diameter = resolvedSize === "big" ? 24 : 16;
-    const radius = diameter / 2;
+    const center = diameter / 2;
     const stroke = 2;
-    const normalizedRadius = radius - stroke;
+    const normalizedRadius = center - stroke / 2;
     const circumference = normalizedRadius * 2 * Math.PI;
     const strokeDashoffset = circumference - percent / 100 * circumference;
     return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
@@ -3109,17 +3109,17 @@ var Progress = (0, import_react21.forwardRef)(
           "svg",
           {
             className: "aviala-progress__ring",
-            width: radius * 2,
-            height: radius * 2,
-            viewBox: `0 0 ${radius * 2} ${radius * 2}`,
+            width: diameter,
+            height: diameter,
+            viewBox: `0 0 ${diameter} ${diameter}`,
             "aria-hidden": true,
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
                 "circle",
                 {
                   className: "aviala-progress__ring-track",
-                  cx: radius,
-                  cy: radius,
+                  cx: center,
+                  cy: center,
                   r: normalizedRadius,
                   fill: "none",
                   strokeWidth: stroke
@@ -3129,15 +3129,15 @@ var Progress = (0, import_react21.forwardRef)(
                 "circle",
                 {
                   className: "aviala-progress__ring-fill",
-                  cx: radius,
-                  cy: radius,
+                  cx: center,
+                  cy: center,
                   r: normalizedRadius,
                   fill: "none",
                   strokeWidth: stroke,
                   strokeDasharray: `${circumference} ${circumference}`,
                   strokeDashoffset,
                   strokeLinecap: "round",
-                  transform: `rotate(-90 ${radius} ${radius})`
+                  transform: `rotate(-90 ${center} ${center})`
                 }
               )
             ]
@@ -11721,12 +11721,13 @@ CardBottom.displayName = "CardBottom";
 var import_react66 = require("react");
 var import_jsx_runtime63 = require("react/jsx-runtime");
 var Table = (0, import_react66.forwardRef)(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+  ({ className, stickyHeader = false, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
     "div",
     {
       ref,
       role: "table",
       className: cn("aviala-table", className),
+      "data-sticky-header": stickyHeader ? "true" : void 0,
       ...props,
       children
     }
@@ -11747,23 +11748,9 @@ var TableRow = (0, import_react66.forwardRef)(
   )
 );
 TableRow.displayName = "TableRow";
-var TableHead = (0, import_react66.forwardRef)(
-  ({ className, content = "text", children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
-    "div",
-    {
-      ref,
-      role: "columnheader",
-      className: cn("aviala-table-head", className),
-      "data-content": content,
-      ...props,
-      children: typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Typography, { level: "caption", as: "span", children }) : children
-    }
-  )
-);
-TableHead.displayName = "TableHead";
-function renderCellIcon(node) {
+function renderCellIcon(node, sized = true) {
   if (!node) return null;
-  const content = (0, import_react66.isValidElement)(node) && typeof node.type !== "string" ? (0, import_react66.cloneElement)(node, {
+  const content = sized && (0, import_react66.isValidElement)(node) && typeof node.type !== "string" ? (0, import_react66.cloneElement)(node, {
     width: 16,
     height: 16,
     className: cn(
@@ -11773,17 +11760,64 @@ function renderCellIcon(node) {
   }) : node;
   return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "aviala-table-cell__icon", children: content });
 }
+function renderTextBlock(text, caption) {
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("span", { className: "aviala-table-cell__text", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Typography, { level: "text", as: "span", children: text }),
+    caption != null && caption !== false ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Typography, { level: "caption", as: "span", className: "aviala-table-cell__caption", children: caption }) : null
+  ] });
+}
+function renderActions(actions) {
+  if (actions == null) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "aviala-table-cell__actions", children: actions });
+}
+function renderCellBody(main, actions) {
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("span", { className: "aviala-table-cell__body", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "aviala-table-cell__main", children: main }),
+    renderActions(actions)
+  ] });
+}
+var TableHead = (0, import_react66.forwardRef)(
+  ({ className, content = "text", actions, checkboxProps, children, ...props }, ref) => {
+    const renderBody = () => {
+      if (content === "checkbox") {
+        return children ?? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Checkbox, { ...checkboxProps });
+      }
+      if (children != null) {
+        return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_jsx_runtime63.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "aviala-table-cell__main", children: typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Typography, { level: "text", as: "span", children }) : children }),
+          renderActions(actions)
+        ] });
+      }
+      return null;
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+      "div",
+      {
+        ref,
+        role: "columnheader",
+        className: cn("aviala-table-head", className),
+        "data-content": content,
+        ...props,
+        children: renderBody()
+      }
+    );
+  }
+);
+TableHead.displayName = "TableHead";
 var TableCell = (0, import_react66.forwardRef)(
   ({
     className,
     content = "text",
     icon,
+    iconPlace,
     text,
+    caption,
     people,
     badge,
     badgeLabel,
     switchProps,
     actions,
+    grabber,
     checkboxProps,
     children,
     ...props
@@ -11793,25 +11827,57 @@ var TableCell = (0, import_react66.forwardRef)(
       switch (content) {
         case "checkbox":
           return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Checkbox, { ...checkboxProps });
+        case "switch":
+          return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Switch, { ...switchProps });
+        case "action":
+          return renderActions(actions);
         case "icon+text":
           return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_jsx_runtime63.Fragment, { children: [
-            renderCellIcon(icon),
-            /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "aviala-table-cell__text", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Typography, { level: "text", as: "span", children: text }) })
+            grabber,
+            renderCellBody(
+              /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_jsx_runtime63.Fragment, { children: [
+                renderCellIcon(icon),
+                renderTextBlock(text, caption)
+              ] }),
+              actions
+            )
+          ] });
+        case "icon-place+text":
+          return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_jsx_runtime63.Fragment, { children: [
+            grabber,
+            renderCellBody(
+              /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_jsx_runtime63.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "aviala-table-cell__icon-place", children: iconPlace ?? renderCellIcon(icon, false) ?? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Avatar, { content: "text", level: "text", lineHeightFix: false, children: "A" }) }),
+                renderTextBlock(text, caption)
+              ] }),
+              actions
+            )
           ] });
         case "people":
           return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_jsx_runtime63.Fragment, { children: [
-            people ?? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Avatar, { content: "text", level: "text", children: "A" }),
-            /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "aviala-table-cell__text", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Typography, { level: "text", as: "span", children: text }) })
+            grabber,
+            renderCellBody(
+              /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_jsx_runtime63.Fragment, { children: [
+                people ?? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Avatar, { content: "text", level: "text", lineHeightFix: false, children: "A" }),
+                renderTextBlock(text, caption)
+              ] }),
+              actions
+            )
           ] });
         case "badge":
-          return badge ?? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Badge, { style: "theme", level: "caption", children: badgeLabel ?? "Text" });
-        case "switch":
-          return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Switch, { ...switchProps });
-        case "action":
-          return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "aviala-table-cell__actions", children: actions });
+          return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_jsx_runtime63.Fragment, { children: [
+            grabber,
+            renderCellBody(
+              badge ?? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Badge, { style: "theme", level: "caption", children: badgeLabel ?? "Text" }),
+              actions
+            )
+          ] });
         case "text":
         default:
-          return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "aviala-table-cell__text", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Typography, { level: "text", as: "span", children: text }) });
+          return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_jsx_runtime63.Fragment, { children: [
+            grabber,
+            renderCellBody(renderTextBlock(text, caption), actions)
+          ] });
       }
     };
     return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(