@aviala-design/spiral 2.6.2 → 2.7.1

package/dist/index.d.cts

@@ -2488,10 +2488,16 @@ declare const CardBottom: react.ForwardRefExoticComponent<Omit<react.DetailedHTM
     trailing?: ReactNode;
 } & react.RefAttributes<HTMLDivElement>>;
 
-/** Figma Components → Information Display → Table (1457:1475) */
-type TableCellContent = "text" | "icon+text" | "people" | "badge" | "switch" | "action" | "checkbox";
-type TableProps = HTMLAttributes<HTMLDivElement>;
-declare const Table: react.ForwardRefExoticComponent<TableProps & react.RefAttributes<HTMLDivElement>>;
+/** Figma Components → Information Display → Table (953:75844 / 1457:1475) */
+type TableCellContent = "text" | "icon+text" | "icon-place+text" | "people" | "badge" | "switch" | "action" | "checkbox";
+type TableProps = HTMLAttributes<HTMLDivElement> & {
+    /** Freeze header row while the table body scrolls */
+    stickyHeader?: boolean;
+};
+declare const Table: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    /** Freeze header row while the table body scrolls */
+    stickyHeader?: boolean;
+} & react.RefAttributes<HTMLDivElement>>;
 type TableRowProps = HTMLAttributes<HTMLDivElement> & {
     header?: boolean;
 };
@@ -2500,30 +2506,52 @@ declare const TableRow: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivEl
 } & react.RefAttributes<HTMLDivElement>>;
 type TableHeadProps = ComponentPropsWithoutRef<"div"> & {
     content?: Extract<TableCellContent, "text" | "checkbox">;
+    /** Header trailing button area (Figma Table Head Default) */
+    actions?: ReactNode;
+    /** Select-all / indeterminate / unchecked via Checkbox props */
+    checkboxProps?: ComponentPropsWithoutRef<typeof Checkbox>;
 };
 declare const TableHead: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     content?: Extract<TableCellContent, "text" | "checkbox">;
+    /** Header trailing button area (Figma Table Head Default) */
+    actions?: ReactNode;
+    /** Select-all / indeterminate / unchecked via Checkbox props */
+    checkboxProps?: ComponentPropsWithoutRef<typeof Checkbox>;
 } & react.RefAttributes<HTMLDivElement>>;
 type TableCellProps = ComponentPropsWithoutRef<"div"> & {
     content?: TableCellContent;
     icon?: ReactNode;
+    /** Shaped icon place (Figma `icon place+text`) */
+    iconPlace?: ReactNode;
     text?: ReactNode;
+    /** Secondary caption under primary text (Figma Typeface pair) */
+    caption?: ReactNode;
     people?: ReactNode;
     badge?: ReactNode;
     badgeLabel?: ReactNode;
     switchProps?: SwitchProps;
+    /** Trailing button area — supported on text / icon / people / badge / action */
     actions?: ReactNode;
+    /** Optional leading grabber control */
+    grabber?: ReactNode;
     checkboxProps?: ComponentPropsWithoutRef<typeof Checkbox>;
 };
 declare const TableCell: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     content?: TableCellContent;
     icon?: ReactNode;
+    /** Shaped icon place (Figma `icon place+text`) */
+    iconPlace?: ReactNode;
     text?: ReactNode;
+    /** Secondary caption under primary text (Figma Typeface pair) */
+    caption?: ReactNode;
     people?: ReactNode;
     badge?: ReactNode;
     badgeLabel?: ReactNode;
     switchProps?: SwitchProps;
+    /** Trailing button area — supported on text / icon / people / badge / action */
     actions?: ReactNode;
+    /** Optional leading grabber control */
+    grabber?: ReactNode;
     checkboxProps?: ComponentPropsWithoutRef<typeof Checkbox>;
 } & react.RefAttributes<HTMLDivElement>>;
 

package/dist/index.d.ts

@@ -2488,10 +2488,16 @@ declare const CardBottom: react.ForwardRefExoticComponent<Omit<react.DetailedHTM
     trailing?: ReactNode;
 } & react.RefAttributes<HTMLDivElement>>;
 
-/** Figma Components → Information Display → Table (1457:1475) */
-type TableCellContent = "text" | "icon+text" | "people" | "badge" | "switch" | "action" | "checkbox";
-type TableProps = HTMLAttributes<HTMLDivElement>;
-declare const Table: react.ForwardRefExoticComponent<TableProps & react.RefAttributes<HTMLDivElement>>;
+/** Figma Components → Information Display → Table (953:75844 / 1457:1475) */
+type TableCellContent = "text" | "icon+text" | "icon-place+text" | "people" | "badge" | "switch" | "action" | "checkbox";
+type TableProps = HTMLAttributes<HTMLDivElement> & {
+    /** Freeze header row while the table body scrolls */
+    stickyHeader?: boolean;
+};
+declare const Table: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    /** Freeze header row while the table body scrolls */
+    stickyHeader?: boolean;
+} & react.RefAttributes<HTMLDivElement>>;
 type TableRowProps = HTMLAttributes<HTMLDivElement> & {
     header?: boolean;
 };
@@ -2500,30 +2506,52 @@ declare const TableRow: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivEl
 } & react.RefAttributes<HTMLDivElement>>;
 type TableHeadProps = ComponentPropsWithoutRef<"div"> & {
     content?: Extract<TableCellContent, "text" | "checkbox">;
+    /** Header trailing button area (Figma Table Head Default) */
+    actions?: ReactNode;
+    /** Select-all / indeterminate / unchecked via Checkbox props */
+    checkboxProps?: ComponentPropsWithoutRef<typeof Checkbox>;
 };
 declare const TableHead: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     content?: Extract<TableCellContent, "text" | "checkbox">;
+    /** Header trailing button area (Figma Table Head Default) */
+    actions?: ReactNode;
+    /** Select-all / indeterminate / unchecked via Checkbox props */
+    checkboxProps?: ComponentPropsWithoutRef<typeof Checkbox>;
 } & react.RefAttributes<HTMLDivElement>>;
 type TableCellProps = ComponentPropsWithoutRef<"div"> & {
     content?: TableCellContent;
     icon?: ReactNode;
+    /** Shaped icon place (Figma `icon place+text`) */
+    iconPlace?: ReactNode;
     text?: ReactNode;
+    /** Secondary caption under primary text (Figma Typeface pair) */
+    caption?: ReactNode;
     people?: ReactNode;
     badge?: ReactNode;
     badgeLabel?: ReactNode;
     switchProps?: SwitchProps;
+    /** Trailing button area — supported on text / icon / people / badge / action */
     actions?: ReactNode;
+    /** Optional leading grabber control */
+    grabber?: ReactNode;
     checkboxProps?: ComponentPropsWithoutRef<typeof Checkbox>;
 };
 declare const TableCell: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     content?: TableCellContent;
     icon?: ReactNode;
+    /** Shaped icon place (Figma `icon place+text`) */
+    iconPlace?: ReactNode;
     text?: ReactNode;
+    /** Secondary caption under primary text (Figma Typeface pair) */
+    caption?: ReactNode;
     people?: ReactNode;
     badge?: ReactNode;
     badgeLabel?: ReactNode;
     switchProps?: SwitchProps;
+    /** Trailing button area — supported on text / icon / people / badge / action */
     actions?: ReactNode;
+    /** Optional leading grabber control */
+    grabber?: ReactNode;
     checkboxProps?: ComponentPropsWithoutRef<typeof Checkbox>;
 } & react.RefAttributes<HTMLDivElement>>;
 

package/dist/index.js

@@ -2924,9 +2924,9 @@ var Progress = forwardRef13(
     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__ */ jsx17(
@@ -2972,17 +2972,17 @@ var Progress = forwardRef13(
           "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__ */ jsx17(
                 "circle",
                 {
                   className: "aviala-progress__ring-track",
-                  cx: radius,
-                  cy: radius,
+                  cx: center,
+                  cy: center,
                   r: normalizedRadius,
                   fill: "none",
                   strokeWidth: stroke
@@ -2992,15 +2992,15 @@ var Progress = forwardRef13(
                 "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})`
                 }
               )
             ]
@@ -11775,12 +11775,13 @@ import {
 } from "react";
 import { Fragment as Fragment11, jsx as jsx63, jsxs as jsxs48 } from "react/jsx-runtime";
 var Table = forwardRef44(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx63(
+  ({ className, stickyHeader = false, children, ...props }, ref) => /* @__PURE__ */ jsx63(
     "div",
     {
       ref,
       role: "table",
       className: cn("aviala-table", className),
+      "data-sticky-header": stickyHeader ? "true" : void 0,
       ...props,
       children
     }
@@ -11801,23 +11802,9 @@ var TableRow = forwardRef44(
   )
 );
 TableRow.displayName = "TableRow";
-var TableHead = forwardRef44(
-  ({ className, content = "text", children, ...props }, ref) => /* @__PURE__ */ jsx63(
-    "div",
-    {
-      ref,
-      role: "columnheader",
-      className: cn("aviala-table-head", className),
-      "data-content": content,
-      ...props,
-      children: typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsx63(Typography, { level: "caption", as: "span", children }) : children
-    }
-  )
-);
-TableHead.displayName = "TableHead";
-function renderCellIcon(node) {
+function renderCellIcon(node, sized = true) {
   if (!node) return null;
-  const content = isValidElement18(node) && typeof node.type !== "string" ? cloneElement13(node, {
+  const content = sized && isValidElement18(node) && typeof node.type !== "string" ? cloneElement13(node, {
     width: 16,
     height: 16,
     className: cn(
@@ -11827,17 +11814,64 @@ function renderCellIcon(node) {
   }) : node;
   return /* @__PURE__ */ jsx63("span", { className: "aviala-table-cell__icon", children: content });
 }
+function renderTextBlock(text, caption) {
+  return /* @__PURE__ */ jsxs48("span", { className: "aviala-table-cell__text", children: [
+    /* @__PURE__ */ jsx63(Typography, { level: "text", as: "span", children: text }),
+    caption != null && caption !== false ? /* @__PURE__ */ jsx63(Typography, { level: "caption", as: "span", className: "aviala-table-cell__caption", children: caption }) : null
+  ] });
+}
+function renderActions(actions) {
+  if (actions == null) return null;
+  return /* @__PURE__ */ jsx63("div", { className: "aviala-table-cell__actions", children: actions });
+}
+function renderCellBody(main, actions) {
+  return /* @__PURE__ */ jsxs48("span", { className: "aviala-table-cell__body", children: [
+    /* @__PURE__ */ jsx63("span", { className: "aviala-table-cell__main", children: main }),
+    renderActions(actions)
+  ] });
+}
+var TableHead = forwardRef44(
+  ({ className, content = "text", actions, checkboxProps, children, ...props }, ref) => {
+    const renderBody = () => {
+      if (content === "checkbox") {
+        return children ?? /* @__PURE__ */ jsx63(Checkbox, { ...checkboxProps });
+      }
+      if (children != null) {
+        return /* @__PURE__ */ jsxs48(Fragment11, { children: [
+          /* @__PURE__ */ jsx63("span", { className: "aviala-table-cell__main", children: typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsx63(Typography, { level: "text", as: "span", children }) : children }),
+          renderActions(actions)
+        ] });
+      }
+      return null;
+    };
+    return /* @__PURE__ */ jsx63(
+      "div",
+      {
+        ref,
+        role: "columnheader",
+        className: cn("aviala-table-head", className),
+        "data-content": content,
+        ...props,
+        children: renderBody()
+      }
+    );
+  }
+);
+TableHead.displayName = "TableHead";
 var TableCell = forwardRef44(
   ({
     className,
     content = "text",
     icon,
+    iconPlace,
     text,
+    caption,
     people,
     badge,
     badgeLabel,
     switchProps,
     actions,
+    grabber,
     checkboxProps,
     children,
     ...props
@@ -11847,25 +11881,57 @@ var TableCell = forwardRef44(
       switch (content) {
         case "checkbox":
           return /* @__PURE__ */ jsx63(Checkbox, { ...checkboxProps });
+        case "switch":
+          return /* @__PURE__ */ jsx63(Switch, { ...switchProps });
+        case "action":
+          return renderActions(actions);
         case "icon+text":
           return /* @__PURE__ */ jsxs48(Fragment11, { children: [
-            renderCellIcon(icon),
-            /* @__PURE__ */ jsx63("span", { className: "aviala-table-cell__text", children: /* @__PURE__ */ jsx63(Typography, { level: "text", as: "span", children: text }) })
+            grabber,
+            renderCellBody(
+              /* @__PURE__ */ jsxs48(Fragment11, { children: [
+                renderCellIcon(icon),
+                renderTextBlock(text, caption)
+              ] }),
+              actions
+            )
+          ] });
+        case "icon-place+text":
+          return /* @__PURE__ */ jsxs48(Fragment11, { children: [
+            grabber,
+            renderCellBody(
+              /* @__PURE__ */ jsxs48(Fragment11, { children: [
+                /* @__PURE__ */ jsx63("span", { className: "aviala-table-cell__icon-place", children: iconPlace ?? renderCellIcon(icon, false) ?? /* @__PURE__ */ jsx63(Avatar, { content: "text", level: "text", lineHeightFix: false, children: "A" }) }),
+                renderTextBlock(text, caption)
+              ] }),
+              actions
+            )
           ] });
         case "people":
           return /* @__PURE__ */ jsxs48(Fragment11, { children: [
-            people ?? /* @__PURE__ */ jsx63(Avatar, { content: "text", level: "text", children: "A" }),
-            /* @__PURE__ */ jsx63("span", { className: "aviala-table-cell__text", children: /* @__PURE__ */ jsx63(Typography, { level: "text", as: "span", children: text }) })
+            grabber,
+            renderCellBody(
+              /* @__PURE__ */ jsxs48(Fragment11, { children: [
+                people ?? /* @__PURE__ */ jsx63(Avatar, { content: "text", level: "text", lineHeightFix: false, children: "A" }),
+                renderTextBlock(text, caption)
+              ] }),
+              actions
+            )
           ] });
         case "badge":
-          return badge ?? /* @__PURE__ */ jsx63(Badge, { style: "theme", level: "caption", children: badgeLabel ?? "Text" });
-        case "switch":
-          return /* @__PURE__ */ jsx63(Switch, { ...switchProps });
-        case "action":
-          return /* @__PURE__ */ jsx63("div", { className: "aviala-table-cell__actions", children: actions });
+          return /* @__PURE__ */ jsxs48(Fragment11, { children: [
+            grabber,
+            renderCellBody(
+              badge ?? /* @__PURE__ */ jsx63(Badge, { style: "theme", level: "caption", children: badgeLabel ?? "Text" }),
+              actions
+            )
+          ] });
         case "text":
         default:
-          return /* @__PURE__ */ jsx63("span", { className: "aviala-table-cell__text", children: /* @__PURE__ */ jsx63(Typography, { level: "text", as: "span", children: text }) });
+          return /* @__PURE__ */ jsxs48(Fragment11, { children: [
+            grabber,
+            renderCellBody(renderTextBlock(text, caption), actions)
+          ] });
       }
     };
     return /* @__PURE__ */ jsx63(