@aviala-design/spiral 2.3.1 → 2.4.0

package/dist/index.d.cts

@@ -1683,7 +1683,7 @@ declare const ListDivider: react.ForwardRefExoticComponent<ListDividerProps & re
 type ListSeparatorProps = HTMLAttributes<HTMLHRElement>;
 /** Horizontal separator between list groups */
 declare const ListSeparator: react.ForwardRefExoticComponent<ListSeparatorProps & react.RefAttributes<HTMLHRElement>>;
-type ListItemProps = ComponentPropsWithoutRef<"div"> & {
+type ListItemSharedProps = {
     /** Figma `Type` variant */
     itemType?: ListItemType;
     /** Figma `left icon setting` variant */
@@ -1704,42 +1704,40 @@ type ListItemProps = ComponentPropsWithoutRef<"div"> & {
     select?: ReactNode;
     /** Trailing switch props for `switch` type */
     switchProps?: Omit<SwitchProps, "size">;
-    /** Fully custom trailing region — overrides type presets */
+    /**
+     * Fully custom trailing region — overrides type presets.
+     * Pass `null` to hide trailing actions + divider (same as `showTrailing={false}`).
+     * For `action` type, the chevron is still shown unless `showChevron={false}`.
+     */
     trailing?: ReactNode;
+    /**
+     * When false, hide trailing actions and the vertical divider.
+     * `action` type still shows the chevron unless `showChevron={false}`.
+     * Default true.
+     */
+    showTrailing?: boolean;
+    /**
+     * Show the trailing chevron for `action` type. Default true when `itemType="action"`.
+     */
+    showChevron?: boolean;
+    /**
+     * Show the top hairline on the content row (between items).
+     * Default: auto — hidden for the first child in a `ListGroup`, shown otherwise.
+     * Set explicitly to force show/hide.
+     */
+    showTopDivider?: boolean;
     selected?: boolean;
     disabled?: boolean;
-    /** Enables hover highlight (auto when `onClick` is set) */
+    /** Enables hover highlight (auto when `onClick` / `href` is set) */
     interactive?: boolean;
+    /** Render as a link — navigates when the row is activated */
+    href?: string;
+    target?: ComponentPropsWithoutRef<"a">["target"];
+    rel?: string;
 };
+type ListItemProps = Omit<ComponentPropsWithoutRef<"div">, "title"> & ListItemSharedProps;
 /** Figma Structure Navigation → List item */
-declare const ListItem: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    /** Figma `Type` variant */
-    itemType?: ListItemType;
-    /** Figma `left icon setting` variant */
-    leading?: ListItemLeading;
-    /** Leading icon node — defaults to GeneralSetting */
-    icon?: ReactNode;
-    /** Primary line (Typeface text) */
-    title: ReactNode;
-    /** Secondary line (Typeface caption) */
-    subtitle?: ReactNode;
-    /** Primary trailing button label */
-    actionLabel?: ReactNode;
-    /** Override primary trailing button */
-    action?: ReactNode;
-    /** Secondary icon-only button for `action` type */
-    secondaryAction?: ReactNode;
-    /** Trailing select slot for `select` type */
-    select?: ReactNode;
-    /** Trailing switch props for `switch` type */
-    switchProps?: Omit<SwitchProps, "size">;
-    /** Fully custom trailing region — overrides type presets */
-    trailing?: ReactNode;
-    selected?: boolean;
-    disabled?: boolean;
-    /** Enables hover highlight (auto when `onClick` is set) */
-    interactive?: boolean;
-} & react.RefAttributes<HTMLDivElement>>;
+declare const ListItem: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "title"> & ListItemSharedProps & react.RefAttributes<HTMLDivElement>>;
 
 /** Figma Navigation `Background` variant (624:61777) */
 type NavigationBackground = "none" | "default";

package/dist/index.d.ts

@@ -1683,7 +1683,7 @@ declare const ListDivider: react.ForwardRefExoticComponent<ListDividerProps & re
 type ListSeparatorProps = HTMLAttributes<HTMLHRElement>;
 /** Horizontal separator between list groups */
 declare const ListSeparator: react.ForwardRefExoticComponent<ListSeparatorProps & react.RefAttributes<HTMLHRElement>>;
-type ListItemProps = ComponentPropsWithoutRef<"div"> & {
+type ListItemSharedProps = {
     /** Figma `Type` variant */
     itemType?: ListItemType;
     /** Figma `left icon setting` variant */
@@ -1704,42 +1704,40 @@ type ListItemProps = ComponentPropsWithoutRef<"div"> & {
     select?: ReactNode;
     /** Trailing switch props for `switch` type */
     switchProps?: Omit<SwitchProps, "size">;
-    /** Fully custom trailing region — overrides type presets */
+    /**
+     * Fully custom trailing region — overrides type presets.
+     * Pass `null` to hide trailing actions + divider (same as `showTrailing={false}`).
+     * For `action` type, the chevron is still shown unless `showChevron={false}`.
+     */
     trailing?: ReactNode;
+    /**
+     * When false, hide trailing actions and the vertical divider.
+     * `action` type still shows the chevron unless `showChevron={false}`.
+     * Default true.
+     */
+    showTrailing?: boolean;
+    /**
+     * Show the trailing chevron for `action` type. Default true when `itemType="action"`.
+     */
+    showChevron?: boolean;
+    /**
+     * Show the top hairline on the content row (between items).
+     * Default: auto — hidden for the first child in a `ListGroup`, shown otherwise.
+     * Set explicitly to force show/hide.
+     */
+    showTopDivider?: boolean;
     selected?: boolean;
     disabled?: boolean;
-    /** Enables hover highlight (auto when `onClick` is set) */
+    /** Enables hover highlight (auto when `onClick` / `href` is set) */
     interactive?: boolean;
+    /** Render as a link — navigates when the row is activated */
+    href?: string;
+    target?: ComponentPropsWithoutRef<"a">["target"];
+    rel?: string;
 };
+type ListItemProps = Omit<ComponentPropsWithoutRef<"div">, "title"> & ListItemSharedProps;
 /** Figma Structure Navigation → List item */
-declare const ListItem: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    /** Figma `Type` variant */
-    itemType?: ListItemType;
-    /** Figma `left icon setting` variant */
-    leading?: ListItemLeading;
-    /** Leading icon node — defaults to GeneralSetting */
-    icon?: ReactNode;
-    /** Primary line (Typeface text) */
-    title: ReactNode;
-    /** Secondary line (Typeface caption) */
-    subtitle?: ReactNode;
-    /** Primary trailing button label */
-    actionLabel?: ReactNode;
-    /** Override primary trailing button */
-    action?: ReactNode;
-    /** Secondary icon-only button for `action` type */
-    secondaryAction?: ReactNode;
-    /** Trailing select slot for `select` type */
-    select?: ReactNode;
-    /** Trailing switch props for `switch` type */
-    switchProps?: Omit<SwitchProps, "size">;
-    /** Fully custom trailing region — overrides type presets */
-    trailing?: ReactNode;
-    selected?: boolean;
-    disabled?: boolean;
-    /** Enables hover highlight (auto when `onClick` is set) */
-    interactive?: boolean;
-} & react.RefAttributes<HTMLDivElement>>;
+declare const ListItem: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "title"> & ListItemSharedProps & react.RefAttributes<HTMLDivElement>>;
 
 /** Figma Navigation `Background` variant (624:61777) */
 type NavigationBackground = "none" | "default";

package/dist/index.js

@@ -8133,7 +8133,7 @@ import {
   forwardRef as forwardRef34,
   isValidElement as isValidElement16
 } from "react";
-import { jsx as jsx49, jsxs as jsxs38 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx49, jsxs as jsxs38 } from "react/jsx-runtime";
 var List = forwardRef34(
   ({ className, title, children, ...props }, ref) => /* @__PURE__ */ jsxs38("div", { ref, className: cn("aviala-list", className), ...props, children: [
     title != null ? /* @__PURE__ */ jsx49(ListTitle, { children: title }) : null,
@@ -8207,15 +8207,27 @@ var ListItem = forwardRef34(
     select,
     switchProps,
     trailing,
+    showTrailing = true,
+    showChevron,
+    showTopDivider,
     selected = false,
     disabled = false,
     interactive,
+    href,
+    target,
+    rel,
     onClick,
     ...props
   }, ref) => {
-    const isInteractive = interactive ?? onClick != null;
+    const isInteractive = interactive ?? (onClick != null || href != null);
+    const chevronVisible = showChevron ?? itemType === "action";
     const primaryAction = action ?? /* @__PURE__ */ jsx49(Button, { mode: "primary", size: "regular", leftIcon: /* @__PURE__ */ jsx49(GeneralSetting, { "aria-hidden": true }), children: actionLabel });
+    const chevron = chevronVisible ? /* @__PURE__ */ jsx49("span", { className: "aviala-list-item__chevron", "aria-hidden": true, children: /* @__PURE__ */ jsx49(DirectionArrowRightLight2, { width: 18, height: 18 }) }) : null;
     const renderTrailing = () => {
+      const hideActions = !showTrailing || trailing === null;
+      if (hideActions) {
+        return chevron && itemType === "action" ? /* @__PURE__ */ jsx49("div", { className: "aviala-list-item__more", children: chevron }) : null;
+      }
       if (trailing !== void 0) return trailing;
       switch (itemType) {
         case "action":
@@ -8234,7 +8246,7 @@ var ListItem = forwardRef34(
               )
             ] }),
             /* @__PURE__ */ jsx49(ListDivider, {}),
-            /* @__PURE__ */ jsx49("span", { className: "aviala-list-item__chevron", "aria-hidden": true, children: /* @__PURE__ */ jsx49(DirectionArrowRightLight2, { width: 18, height: 18 }) })
+            chevron
           ] });
         case "switch":
           return /* @__PURE__ */ jsxs38("div", { className: "aviala-list-item__trailing", children: [
@@ -8251,26 +8263,50 @@ var ListItem = forwardRef34(
           ] });
       }
     };
-    return /* @__PURE__ */ jsxs38(
+    const sharedClassName = cn("aviala-list-item", className);
+    const sharedData = {
+      "data-leading": leading,
+      "data-type": itemType,
+      "data-selected": selected ? "true" : void 0,
+      "data-disabled": disabled ? "true" : void 0,
+      "data-interactive": isInteractive ? "true" : void 0,
+      "data-top-divider": showTopDivider === void 0 ? void 0 : showTopDivider ? "true" : "false"
+    };
+    const trailingNode = renderTrailing();
+    const body = /* @__PURE__ */ jsxs38(Fragment7, { children: [
+      renderLeadingIcon(icon, leading),
+      /* @__PURE__ */ jsx49("div", { className: "aviala-list-item__body", children: /* @__PURE__ */ jsxs38("div", { className: "aviala-list-item__content", children: [
+        /* @__PURE__ */ jsx49("div", { className: "aviala-list-item__head", children: /* @__PURE__ */ jsx49(Typeface, { content: "textCaption", primary: title, secondary: subtitle }) }),
+        trailingNode
+      ] }) })
+    ] });
+    if (href && !disabled) {
+      return /* @__PURE__ */ jsx49(
+        "a",
+        {
+          ref,
+          role: "listitem",
+          className: sharedClassName,
+          href,
+          target,
+          rel,
+          onClick,
+          ...sharedData,
+          ...props,
+          children: body
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx49(
       "div",
       {
         ref,
         role: "listitem",
-        className: cn("aviala-list-item", className),
-        "data-leading": leading,
-        "data-type": itemType,
-        "data-selected": selected ? "true" : void 0,
-        "data-disabled": disabled ? "true" : void 0,
-        "data-interactive": isInteractive ? "true" : void 0,
+        className: sharedClassName,
         onClick: disabled ? void 0 : onClick,
+        ...sharedData,
         ...props,
-        children: [
-          renderLeadingIcon(icon, leading),
-          /* @__PURE__ */ jsx49("div", { className: "aviala-list-item__body", children: /* @__PURE__ */ jsxs38("div", { className: "aviala-list-item__content", children: [
-            /* @__PURE__ */ jsx49("div", { className: "aviala-list-item__head", children: /* @__PURE__ */ jsx49(Typeface, { content: "textCaption", primary: title, secondary: subtitle }) }),
-            renderTrailing()
-          ] }) })
-        ]
+        children: body
       }
     );
   }
@@ -8291,7 +8327,7 @@ import {
   useRef as useRef12,
   useState as useState16
 } from "react";
-import { Fragment as Fragment7, jsx as jsx50, jsxs as jsxs39 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx50, jsxs as jsxs39 } from "react/jsx-runtime";
 function navigationItemButtonMode(active) {
   return active ? "second" : "noBackgroundCustom";
 }
@@ -8837,7 +8873,7 @@ var NavigationItem = forwardRef35(
     const Comp = asChild ? Slot5 : "a";
     const isActive = active ?? ariaCurrent === "page";
     const mode = navigationItemButtonMode(isActive);
-    const controlContent = /* @__PURE__ */ jsxs39(Fragment7, { children: [
+    const controlContent = /* @__PURE__ */ jsxs39(Fragment8, { children: [
       renderItemIcon3(leftIcon),
       /* @__PURE__ */ jsx50(
         Typography,
@@ -9608,7 +9644,7 @@ import {
   useContext as useContext9,
   useState as useState18
 } from "react";
-import { Fragment as Fragment8, jsx as jsx54, jsxs as jsxs43 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx54, jsxs as jsxs43 } from "react/jsx-runtime";
 var BreadcrumbSizeContext = createContext9("default");
 function breadcrumbTypeLevel(size) {
   return size === "small" ? "caption" : "text";
@@ -9644,7 +9680,7 @@ Breadcrumb.displayName = "Breadcrumb";
 var BreadcrumbItem = forwardRef38(
   ({ className, href, current = false, icon, onClick, children, ...props }, ref) => {
     const size = useContext9(BreadcrumbSizeContext);
-    const label = /* @__PURE__ */ jsxs43(Fragment8, { children: [
+    const label = /* @__PURE__ */ jsxs43(Fragment9, { children: [
       icon ? /* @__PURE__ */ jsx54("span", { className: "aviala-breadcrumb-item__icon", children: icon }) : null,
       children != null ? /* @__PURE__ */ jsx54(
         Typography,
@@ -9721,7 +9757,7 @@ var BreadcrumbEllipsisItem = forwardRef38(
     children,
     ...props
   }, ref) => {
-    const content = /* @__PURE__ */ jsxs43(Fragment8, { children: [
+    const content = /* @__PURE__ */ jsxs43(Fragment9, { children: [
       /* @__PURE__ */ jsx54(Typography, { level: "text", as: "span", className: "aviala-breadcrumb-ellipsis-item__label", children }),
       showChevron ? /* @__PURE__ */ jsx54("span", { className: "aviala-breadcrumb-ellipsis-item__chevron", "aria-hidden": true, children: /* @__PURE__ */ jsx54(DirectionArrowRightLight3, { width: 14, height: 14, thickness: "Light" }) }) : null
     ] });
@@ -10198,7 +10234,7 @@ import {
   forwardRef as forwardRef42,
   isValidElement as isValidElement17
 } from "react";
-import { Fragment as Fragment9, jsx as jsx58, jsxs as jsxs47 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx58, jsxs as jsxs47 } from "react/jsx-runtime";
 var Card = forwardRef42(
   ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx58("div", { ref, className: cn("aviala-card", className), ...props, children })
 );
@@ -10304,7 +10340,7 @@ var CardBottom = forwardRef42(
       if (children != null) return children;
       switch (slotType) {
         case "switch":
-          return /* @__PURE__ */ jsxs47(Fragment9, { children: [
+          return /* @__PURE__ */ jsxs47(Fragment10, { children: [
             primaryAction,
             /* @__PURE__ */ jsx58("span", { className: "aviala-card__divider", "aria-hidden": true }),
             /* @__PURE__ */ jsx58(Switch, { ...switchProps })
@@ -10313,7 +10349,7 @@ var CardBottom = forwardRef42(
           return select;
         case "action":
         default:
-          return /* @__PURE__ */ jsxs47(Fragment9, { children: [
+          return /* @__PURE__ */ jsxs47(Fragment10, { children: [
             primaryAction,
             secondaryAction ?? /* @__PURE__ */ jsx58(
               Button,
@@ -10350,7 +10386,7 @@ import {
   forwardRef as forwardRef43,
   isValidElement as isValidElement18
 } from "react";
-import { Fragment as Fragment10, jsx as jsx59, jsxs as jsxs48 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx59, jsxs as jsxs48 } from "react/jsx-runtime";
 var Table = forwardRef43(
   ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx59(
     "div",
@@ -10425,12 +10461,12 @@ var TableCell = forwardRef43(
         case "checkbox":
           return /* @__PURE__ */ jsx59(Checkbox, { ...checkboxProps });
         case "icon+text":
-          return /* @__PURE__ */ jsxs48(Fragment10, { children: [
+          return /* @__PURE__ */ jsxs48(Fragment11, { children: [
             renderCellIcon(icon),
             /* @__PURE__ */ jsx59("span", { className: "aviala-table-cell__text", children: /* @__PURE__ */ jsx59(Typography, { level: "text", as: "span", children: text }) })
           ] });
         case "people":
-          return /* @__PURE__ */ jsxs48(Fragment10, { children: [
+          return /* @__PURE__ */ jsxs48(Fragment11, { children: [
             people ?? /* @__PURE__ */ jsx59(Avatar, { content: "text", level: "text", children: "A" }),
             /* @__PURE__ */ jsx59("span", { className: "aviala-table-cell__text", children: /* @__PURE__ */ jsx59(Typography, { level: "text", as: "span", children: text }) })
           ] });