@sproutsocial/seeds-react-accordion 0.4.32 → 0.4.47

package/dist/accordion.css

@@ -0,0 +1,159 @@
+/**
+ * Seeds Accordion component classes
+ * Use these instead of writing out individual Tailwind utility classes.
+ *
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
+ * CSS variable definitions and dark mode support.
+ *
+ * These classes mirror the styled-components implementation in styles.ts so the
+ * Tailwind and styled-components rendering paths are visually identical. The
+ * `[data-styled="true"]` rules deliver the bordered "card" appearance when the
+ * accordion is rendered with `styled` enabled.
+ *
+ * Rules live in the Tailwind `components` layer so consumer utility classes
+ * (e.g. `mx-200`, `p-300`, `inline-flex`) win the cascade and can override the
+ * component's own styles. Keyframes are at-rules unaffected by layering and stay
+ * outside the `@layer` wrapper.
+ *
+ * Usage:
+ *   <div class="accordion-item">
+ *     <div class="seeds-accordion-trigger" data-styled="true">…</div>
+ *     <div class="seeds-accordion-content" data-styled="true">
+ *       <div class="seeds-accordion-content-inner" data-styled="true">…</div>
+ *     </div>
+ *   </div>
+ */
+
+/* Keyframes are prefixed to avoid collisions in the aggregated stylesheet
+   (styled-components previously scoped slideDown/slideUp per component). */
+@keyframes seeds-accordion-slideDown {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-accordion-content-height);
+  }
+}
+
+@keyframes seeds-accordion-slideUp {
+  from {
+    height: var(--radix-accordion-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+
+@layer components {
+  /* TriggerContainer -> .seeds-accordion-trigger */
+  .seeds-accordion-trigger {
+    display: flex;
+    align-items: center;
+    color: var(--color-text-body);
+    font-size: var(--font-size-200);
+    line-height: var(--line-height-200);
+  }
+
+  /* Override Text.Headline styles to match original accordion trigger typography */
+  .seeds-accordion-trigger h1,
+  .seeds-accordion-trigger h2,
+  .seeds-accordion-trigger h3,
+  .seeds-accordion-trigger h4,
+  .seeds-accordion-trigger h5,
+  .seeds-accordion-trigger h6 {
+    font-size: inherit;
+    font-weight: normal;
+    line-height: inherit;
+    color: inherit;
+  }
+
+  .seeds-accordion-trigger[data-styled="true"] h1,
+  .seeds-accordion-trigger[data-styled="true"] h2,
+  .seeds-accordion-trigger[data-styled="true"] h3,
+  .seeds-accordion-trigger[data-styled="true"] h4,
+  .seeds-accordion-trigger[data-styled="true"] h5,
+  .seeds-accordion-trigger[data-styled="true"] h6 {
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-text-headline);
+  }
+
+  .seeds-accordion-trigger[data-styled="true"] {
+    border-top: 1px solid var(--color-container-border-base);
+    border-left: 1px solid var(--color-container-border-base);
+    border-right: 1px solid var(--color-container-border-base);
+    background: var(--color-container-bg-base);
+  }
+
+  .accordion-item[data-state="open"] .seeds-accordion-trigger[data-styled="true"] {
+    border-bottom: 1px solid transparent;
+  }
+
+  .accordion-item[data-state="closed"]
+    .seeds-accordion-trigger[data-styled="true"] {
+    transition: border-bottom-color 0s ease-in-out 0.3s;
+    border-bottom: 1px solid transparent;
+  }
+
+  .accordion-item:first-child .seeds-accordion-trigger[data-styled="true"] {
+    border-top-left-radius: var(--radius-outer);
+    border-top-right-radius: var(--radius-outer);
+  }
+
+  .accordion-item:last-child[data-state="closed"]
+    .seeds-accordion-trigger[data-styled="true"] {
+    transition: border-radius 0s linear 0.3s,
+      border-bottom-color 0s ease-in-out 0.3s;
+    border-bottom: 1px solid var(--color-container-border-base);
+    border-bottom-left-radius: var(--radius-outer);
+    border-bottom-right-radius: var(--radius-outer);
+  }
+
+  /* StyledRadixAccordionContent -> .seeds-accordion-content */
+  .seeds-accordion-content {
+    overflow: hidden;
+  }
+
+  .seeds-accordion-content[data-state="open"] {
+    animation: seeds-accordion-slideDown 300ms ease-in-out;
+  }
+
+  .seeds-accordion-content[data-state="closed"] {
+    animation: seeds-accordion-slideUp 300ms ease-in-out;
+  }
+
+  .seeds-accordion-content[data-styled="true"] {
+    border-left: 1px solid var(--color-container-border-base);
+    border-right: 1px solid var(--color-container-border-base);
+    background: var(--color-container-bg-base);
+  }
+
+  .accordion-item:last-child[data-state="open"]
+    .seeds-accordion-content[data-styled="true"],
+  .accordion-item:last-child[data-state="closed"]
+    .seeds-accordion-content[data-styled="true"] {
+    border-bottom: 1px solid var(--color-container-border-base);
+    border-bottom-left-radius: var(--radius-outer);
+    border-bottom-right-radius: var(--radius-outer);
+  }
+
+  /* ContentContainer -> .seeds-accordion-content-inner */
+  .seeds-accordion-content-inner {
+    color: var(--color-text-body);
+    background: transparent;
+    font-family: var(--font-family);
+  }
+
+  .seeds-accordion-content-inner[data-styled="true"] {
+    padding: 0 var(--space-400) var(--space-400);
+    font-size: var(--font-size-200);
+    line-height: var(--line-height-200);
+  }
+
+  .accordion-item:last-child[data-state="open"]
+    .seeds-accordion-content-inner[data-styled="true"],
+  .accordion-item:last-child[data-state="closed"]
+    .seeds-accordion-content-inner[data-styled="true"] {
+    border-bottom-left-radius: var(--radius-outer);
+    border-bottom-right-radius: var(--radius-outer);
+  }
+}

package/dist/esm/index.js

@@ -61,11 +61,22 @@ var Accordion = ({
 };
 
 // src/AccordionItem.tsx
-import "@radix-ui/react-accordion";
+import * as RadixAccordion2 from "@radix-ui/react-accordion";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var AccordionItem = ({ children, value }) => {
+  return /* @__PURE__ */ jsx2(RadixAccordion2.Item, { className: "accordion-item", value, children });
+};
+
+// src/AccordionContent.tsx
+import "react";
+
+// src/AccordionContentHybrid.tsx
+import { useContext as useContext2 } from "react";
+import { needsStyledComponents } from "@sproutsocial/seeds-react-system-props";
 
 // src/styles.ts
 import styled, { css } from "styled-components";
-import * as RadixAccordion2 from "@radix-ui/react-accordion";
+import * as RadixAccordion3 from "@radix-ui/react-accordion";
 import {
   BORDER,
   COMMON,
@@ -73,7 +84,7 @@ import {
   LAYOUT,
   TYPOGRAPHY
 } from "@sproutsocial/seeds-react-system-props";
-var StyledAccordionItem = styled(RadixAccordion2.Item)``;
+var StyledAccordionItem = styled(RadixAccordion3.Item)``;
 var animations = css`
   @keyframes slideDown {
     from {
@@ -94,7 +105,7 @@ var animations = css`
   }
 `;
 var StyledRadixAccordionContent = styled(
-  RadixAccordion2.Content
+  RadixAccordion3.Content
 )`
   ${animations}
 
@@ -127,7 +138,8 @@ var ContentContainer = styled.div`
   font-family: ${({ theme }) => theme.fontFamily};
 
   &[data-styled="true"] {
-    padding: ${({ theme }) => theme.space[400]};
+    padding: 0 ${({ theme }) => theme.space[400]}
+      ${({ theme }) => theme.space[400]};
     ${({ theme }) => theme.typography[200]};
   }
 
@@ -182,7 +194,7 @@ var TriggerContainer = styled.div`
   `}
 
   .accordion-item[data-state="open"] &[data-styled="true"] {
-    border-bottom: ${({ theme }) => `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};
+    border-bottom: ${({ theme }) => `${theme.borderWidths[500]} solid transparent`};
   }
 
   .accordion-item[data-state="closed"] &[data-styled="true"] {
@@ -195,12 +207,10 @@ var TriggerContainer = styled.div`
     border-top-right-radius: ${({ theme }) => theme.radii.outer};
   }
 
-  .accordion-item:last-child &[data-styled="true"] {
-    border-bottom: ${({ theme }) => `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};
-  }
-
   .accordion-item:last-child[data-state="closed"] &[data-styled="true"] {
-    transition: border-radius 0s linear 0.3s;
+    transition: border-radius 0s linear 0.3s,
+      border-bottom-color 0s ease-in-out 0.3s;
+    border-bottom: ${({ theme }) => `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};
     border-bottom-left-radius: ${({ theme }) => theme.radii.outer};
     border-bottom-right-radius: ${({ theme }) => theme.radii.outer};
   }
@@ -211,24 +221,74 @@ var TriggerContainer = styled.div`
 	${FLEXBOX}
 `;
 
-// src/AccordionItem.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-var AccordionItem = ({ children, value }) => {
-  return /* @__PURE__ */ jsx2(StyledAccordionItem, { className: "accordion-item", value, children });
-};
-
-// src/AccordionContent.tsx
+// src/AccordionContentTailwind.tsx
 import { useContext } from "react";
+import * as RadixAccordion4 from "@radix-ui/react-accordion";
 import { jsx as jsx3 } from "react/jsx-runtime";
-var AccordionContent = ({
+function cn(...inputs) {
+  const classes = [];
+  for (const input of inputs) {
+    if (!input) continue;
+    if (typeof input === "string") {
+      classes.push(input);
+    } else if (typeof input === "object") {
+      for (const [key, value] of Object.entries(input)) {
+        if (value) {
+          classes.push(key);
+        }
+      }
+    }
+  }
+  return classes.join(" ");
+}
+var AccordionContentTailwind = ({
   children,
+  className,
   ...rest
 }) => {
   const { styled: styled2 } = useContext(AccordionContext);
-  return /* @__PURE__ */ jsx3(StyledRadixAccordionContent, { "data-styled": styled2, children: /* @__PURE__ */ jsx3(ContentContainer, { "data-styled": styled2, ...rest, children }) });
+  const contentDataAttrs = { "data-styled": styled2 };
+  return /* @__PURE__ */ jsx3(
+    RadixAccordion4.Content,
+    {
+      className: cn("seeds-accordion-content", className),
+      ...contentDataAttrs,
+      children: /* @__PURE__ */ jsx3(
+        "div",
+        {
+          className: "seeds-accordion-content-inner",
+          "data-styled": styled2,
+          ...rest,
+          children
+        }
+      )
+    }
+  );
 };
 
-// src/AccordionTrigger.tsx
+// src/AccordionContentHybrid.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var AccordionContentHybrid = ({
+  children,
+  ...rest
+}) => {
+  const { styled: styled2 } = useContext2(AccordionContext);
+  if (needsStyledComponents(rest)) {
+    return /* @__PURE__ */ jsx4(StyledRadixAccordionContent, { "data-styled": styled2, children: /* @__PURE__ */ jsx4(ContentContainer, { "data-styled": styled2, ...rest, children }) });
+  }
+  return /* @__PURE__ */ jsx4(AccordionContentTailwind, { ...rest, children });
+};
+
+// src/AccordionContent.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var AccordionContent = (props) => /* @__PURE__ */ jsx5(AccordionContentHybrid, { ...props });
+
+// src/AccordionTriggerHybrid.tsx
+import { useContext as useContext4 } from "react";
+import { needsStyledComponents as needsStyledComponents2 } from "@sproutsocial/seeds-react-system-props";
+
+// src/AccordionTriggerInner.tsx
+import "react";
 import { Box } from "@sproutsocial/seeds-react-box";
 import { Button } from "@sproutsocial/seeds-react-button";
 import { Icon as Icon2 } from "@sproutsocial/seeds-react-icon";
@@ -239,66 +299,43 @@ import {
   MenuGroup,
   MenuToggleButton
 } from "@sproutsocial/seeds-react-menu";
-import { useContext as useContext2 } from "react";
-import { CollapsibleContentHeader } from "@sproutsocial/seeds-react-content-header";
-import * as RadixAccordion4 from "@radix-ui/react-accordion";
-import { jsx as jsx4, jsxs } from "react/jsx-runtime";
+import {
+  CollapsibleContentHeader
+} from "@sproutsocial/seeds-react-content-header";
+import * as RadixAccordion5 from "@radix-ui/react-accordion";
+import { jsx as jsx6, jsxs } from "react/jsx-runtime";
 var MAX_RELATED_ACTIONS = 2;
 var AccordionTriggerWrapper = ({
   children
-}) => /* @__PURE__ */ jsx4(RadixAccordion4.Trigger, { asChild: true, children });
-var AccordionTrigger = ({
-  children,
+}) => /* @__PURE__ */ jsx6(RadixAccordion5.Trigger, { asChild: true, children });
+var AccordionTriggerInner = ({
+  title,
+  headingLevel,
   leftSlot,
+  rightSlot,
   relatedActions,
   overflowMenu,
-  rightSlot,
-  title,
-  headingLevel = "h4",
-  ...rest
+  color,
+  triggerIcon,
+  triggerPosition
 }) => {
-  const { triggerIcon, triggerPosition, styled: styled2 } = useContext2(AccordionContext);
   const validatedActions = relatedActions?.slice(0, MAX_RELATED_ACTIONS);
-  const {
-    color,
-    padding,
-    paddingBottom,
-    paddingTop,
-    paddingX,
-    paddingY,
-    paddingLeft,
-    paddingRight,
-    p,
-    pb,
-    pt,
-    pr,
-    pl,
-    px,
-    py,
-    fontFamily,
-    fontSize,
-    fontStyle,
-    fontWeight,
-    lineHeight,
-    textAlign,
-    ...triggerProps
-  } = rest;
   const shouldRenderActionsBlock = Boolean(overflowMenu || validatedActions);
-  const renderedOverflowMenu = overflowMenu && /* @__PURE__ */ jsx4(
+  const renderedOverflowMenu = overflowMenu && /* @__PURE__ */ jsx6(
     ActionMenu,
     {
-      menuToggleElement: /* @__PURE__ */ jsx4(
+      menuToggleElement: /* @__PURE__ */ jsx6(
         MenuToggleButton,
         {
           "aria-label": overflowMenu["aria-label"],
           appearance: "unstyled",
           color,
-          children: /* @__PURE__ */ jsx4(Icon2, { name: "ellipsis-horizontal-outline", "aria-hidden": "true" })
+          children: /* @__PURE__ */ jsx6(Icon2, { name: "ellipsis-horizontal-outline", "aria-hidden": "true" })
         }
       ),
-      children: /* @__PURE__ */ jsx4(MenuContent, { children: /* @__PURE__ */ jsx4(MenuGroup, { id: "overflow-actions", children: overflowMenu.items.map((item, index) => {
-        const { iconName, id, onClick, children: children2, ...menuItemProps } = item;
-        return /* @__PURE__ */ jsx4(
+      children: /* @__PURE__ */ jsx6(MenuContent, { children: /* @__PURE__ */ jsx6(MenuGroup, { id: "overflow-actions", children: overflowMenu.items.map((item, index) => {
+        const { iconName, id, onClick, children, ...menuItemProps } = item;
+        return /* @__PURE__ */ jsx6(
           MenuItem,
           {
             id: id || `overflow-item-${index}`,
@@ -312,24 +349,24 @@ var AccordionTrigger = ({
                 gap: "300",
                 color,
                 children: [
-                  /* @__PURE__ */ jsx4(Icon2, { name: iconName }),
-                  children2
+                  /* @__PURE__ */ jsx6(Icon2, { name: iconName }),
+                  children
                 ]
               }
-            ) : children2
+            ) : children
           },
           id || `overflow-item-${index}`
         );
       }) }) })
     }
   );
-  const renderedRelatedActions = validatedActions && validatedActions.length > 0 && /* @__PURE__ */ jsx4(Box, { display: "flex", children: validatedActions.map((action, index) => /* @__PURE__ */ jsx4(
+  const renderedRelatedActions = validatedActions && validatedActions.length > 0 && /* @__PURE__ */ jsx6(Box, { display: "flex", children: validatedActions.map((action, index) => /* @__PURE__ */ jsx6(
     Button,
     {
       onClick: action.onClick,
       "aria-label": action["aria-label"],
       color,
-      children: /* @__PURE__ */ jsx4(Icon2, { name: action.iconName, "aria-hidden": "true" })
+      children: /* @__PURE__ */ jsx6(Icon2, { name: action.iconName, "aria-hidden": "true" })
     },
     `${action.iconName}-${index}`
   )) });
@@ -337,31 +374,152 @@ var AccordionTrigger = ({
     renderedOverflowMenu,
     renderedRelatedActions
   ] }) : void 0;
-  return /* @__PURE__ */ jsx4(
-    TriggerContainer,
+  return /* @__PURE__ */ jsx6(
+    CollapsibleContentHeader,
+    {
+      title,
+      headingLevel,
+      leftSlot,
+      rightSlot,
+      headerActions: renderedActions,
+      trigger: AccordionTriggerWrapper,
+      triggerPosition,
+      triggerIcon,
+      bordered: false
+    }
+  );
+};
+
+// src/AccordionTriggerTailwind.tsx
+import { useContext as useContext3 } from "react";
+import { jsx as jsx7 } from "react/jsx-runtime";
+function cn2(...inputs) {
+  const classes = [];
+  for (const input of inputs) {
+    if (!input) continue;
+    if (typeof input === "string") {
+      classes.push(input);
+    } else if (typeof input === "object") {
+      for (const [key, value] of Object.entries(input)) {
+        if (value) {
+          classes.push(key);
+        }
+      }
+    }
+  }
+  return classes.join(" ");
+}
+var AccordionTriggerTailwind = ({
+  children,
+  leftSlot,
+  relatedActions,
+  overflowMenu,
+  rightSlot,
+  title,
+  headingLevel = "h4",
+  className,
+  // In the Tailwind path the hybrid gate guarantees no styled-system props are
+  // present. `color` is still pulled out so it is forwarded to the inner content
+  // (overflow menu / related actions) but not onto the wrapper div.
+  color,
+  ...triggerProps
+}) => {
+  const { triggerIcon, triggerPosition, styled: styled2 } = useContext3(AccordionContext);
+  return /* @__PURE__ */ jsx7(
+    "div",
     {
+      className: cn2("seeds-accordion-trigger", className),
       "data-styled": styled2,
-      $styled: styled2,
       "data-qa-trigger": "HERE",
-      color,
       ...triggerProps,
-      children: /* @__PURE__ */ jsx4(
-        CollapsibleContentHeader,
+      children: /* @__PURE__ */ jsx7(
+        AccordionTriggerInner,
         {
           title,
           headingLevel,
           leftSlot,
           rightSlot,
-          headerActions: renderedActions,
-          trigger: AccordionTriggerWrapper,
-          triggerPosition,
+          relatedActions,
+          overflowMenu,
+          color,
           triggerIcon,
-          bordered: false
+          triggerPosition
         }
       )
     }
   );
 };
+
+// src/AccordionTriggerHybrid.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+var AccordionTriggerHybrid = (props) => {
+  const {
+    children,
+    leftSlot,
+    relatedActions,
+    overflowMenu,
+    rightSlot,
+    title,
+    headingLevel = "h4",
+    ...rest
+  } = props;
+  const { triggerIcon, triggerPosition, styled: styled2 } = useContext4(AccordionContext);
+  if (needsStyledComponents2(rest)) {
+    const {
+      color,
+      padding,
+      paddingBottom,
+      paddingTop,
+      paddingX,
+      paddingY,
+      paddingLeft,
+      paddingRight,
+      p,
+      pb,
+      pt,
+      pr,
+      pl,
+      px,
+      py,
+      fontFamily,
+      fontSize,
+      fontStyle,
+      fontWeight,
+      lineHeight,
+      textAlign,
+      ...triggerProps
+    } = rest;
+    return /* @__PURE__ */ jsx8(
+      TriggerContainer,
+      {
+        "data-styled": styled2,
+        $styled: styled2,
+        "data-qa-trigger": "HERE",
+        color,
+        ...triggerProps,
+        children: /* @__PURE__ */ jsx8(
+          AccordionTriggerInner,
+          {
+            title,
+            headingLevel,
+            leftSlot,
+            rightSlot,
+            relatedActions,
+            overflowMenu,
+            color,
+            triggerIcon,
+            triggerPosition
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx8(AccordionTriggerTailwind, { ...props });
+};
+
+// src/AccordionTrigger.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+var AccordionTrigger = (props) => /* @__PURE__ */ jsx9(AccordionTriggerHybrid, { ...props });
 export {
   Accordion,
   AccordionContent,