@sproutsocial/seeds-react-content-block 0.5.3 → 0.5.14

package/dist/content-block.css

@@ -0,0 +1,48 @@
+/**
+ * Seeds ContentBlock 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.
+ *
+ * Usage:
+ *   <div class="seeds-content-block-footer">...</div>
+ */
+
+@layer components {
+  .seeds-content-block {
+    background: var(--color-container-bg-base);
+    border: 1px solid var(--color-container-border-base);
+    border-radius: var(--radius-outer);
+  }
+
+  .seeds-content-block-content {
+    padding: var(--space-400);
+  }
+
+  .seeds-content-block-content.flush {
+    padding: 0;
+  }
+
+  /* When there is no footer, the content node rounds the card's bottom corners. */
+  .seeds-content-block-content.no-footer {
+    border-bottom-left-radius: var(--radius-outer);
+    border-bottom-right-radius: var(--radius-outer);
+  }
+
+  .seeds-content-block-loader {
+    margin: var(--space-400) 0;
+  }
+
+  .seeds-content-block-footer {
+    box-sizing: border-box;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    padding: var(--space-400);
+    border-top: 1px solid var(--color-container-border-base);
+    border-bottom-left-radius: var(--radius-outer);
+    border-bottom-right-radius: var(--radius-outer);
+  }
+}

package/dist/esm/index.js

@@ -1,20 +1,192 @@
 // src/ContentBlock.tsx
+import "react";
+import "@sproutsocial/seeds-react-box";
+
+// src/ContentBlockHybrid.tsx
+import "react";
+import { hasStyledProps } from "@sproutsocial/seeds-react-system-props";
+
+// src/ContentBlockTailwind.tsx
 import { useState } from "react";
-import { Box as Box2 } from "@sproutsocial/seeds-react-box";
 import { Loader } from "@sproutsocial/seeds-react-loader";
 import { Collapsible } from "@sproutsocial/seeds-react-collapsible";
 import {
   ContentHeader,
   CollapsibleContentHeader
 } from "@sproutsocial/seeds-react-content-header";
+import { jsx, jsxs } from "react/jsx-runtime";
+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 ContentFooterTailwind = ({
+  footerContent,
+  footerActions,
+  className
+}) => /* @__PURE__ */ jsxs("div", { className: cn("seeds-content-block-footer", className), children: [
+  footerContent && /* @__PURE__ */ jsx("span", { children: footerContent }),
+  footerActions && /* @__PURE__ */ jsx("span", { children: footerActions })
+] });
+var ContentArea = ({
+  isLoading,
+  children,
+  flushLayout,
+  hasFooter,
+  contentProps
+}) => {
+  const { className, ...domProps } = contentProps ?? {};
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...domProps,
+      className: cn(
+        "seeds-content-block-content",
+        {
+          flush: !!flushLayout,
+          "no-footer": !hasFooter
+        },
+        className
+      ),
+      children: isLoading ? /* @__PURE__ */ jsx("div", { className: "seeds-content-block-loader", children: /* @__PURE__ */ jsx(Loader, { delay: false }) }) : children
+    }
+  );
+};
+var CollapsibleContentBlock = ({
+  title,
+  subtitle,
+  titleAs = "h2",
+  subtitleAs = "h3",
+  children,
+  isLoading,
+  headerActions,
+  flushLayout,
+  footerContent,
+  footerActions,
+  contentProps,
+  isOpen: controlledIsOpen,
+  defaultOpen = true,
+  onOpenChange
+}) => {
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const open = controlledIsOpen !== void 0 ? controlledIsOpen : internalOpen;
+  const hasFooter = !!(footerContent || footerActions);
+  const handleOpenChange = (newOpen) => {
+    if (controlledIsOpen === void 0) {
+      setInternalOpen(newOpen);
+    }
+    onOpenChange?.(newOpen);
+  };
+  return /* @__PURE__ */ jsx(Collapsible, { isOpen: open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxs("section", { className: "seeds-content-block", children: [
+    /* @__PURE__ */ jsx(
+      CollapsibleContentHeader,
+      {
+        title,
+        subtitle,
+        headingLevel: titleAs,
+        subtitleAs,
+        headerActions,
+        trigger: Collapsible.Trigger,
+        triggerPosition: "left"
+      }
+    ),
+    /* @__PURE__ */ jsxs(Collapsible.Panel, { children: [
+      /* @__PURE__ */ jsx(
+        ContentArea,
+        {
+          isLoading,
+          flushLayout,
+          hasFooter,
+          contentProps,
+          children
+        }
+      ),
+      hasFooter && /* @__PURE__ */ jsx(
+        ContentFooterTailwind,
+        {
+          footerContent,
+          footerActions
+        }
+      )
+    ] })
+  ] }) });
+};
+var ContentBlockTailwind = ({
+  isCollapsible,
+  ...props
+}) => {
+  if (isCollapsible) {
+    return /* @__PURE__ */ jsx(CollapsibleContentBlock, { ...props });
+  }
+  const {
+    title,
+    subtitle,
+    titleAs = "h2",
+    subtitleAs = "h3",
+    children,
+    isLoading,
+    headerActions,
+    flushLayout,
+    footerContent,
+    footerActions,
+    contentProps
+  } = props;
+  const hasFooter = !!(footerContent || footerActions);
+  return /* @__PURE__ */ jsxs("section", { className: "seeds-content-block", children: [
+    /* @__PURE__ */ jsx(
+      ContentHeader,
+      {
+        title,
+        subtitle,
+        headingLevel: titleAs,
+        subtitleAs,
+        headerActions
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ContentArea,
+      {
+        isLoading,
+        flushLayout,
+        hasFooter,
+        contentProps,
+        children
+      }
+    ),
+    hasFooter && /* @__PURE__ */ jsx(
+      ContentFooterTailwind,
+      {
+        footerContent,
+        footerActions
+      }
+    )
+  ] });
+};
+
+// src/ContentBlockStyled.tsx
+import { useState as useState2 } from "react";
+import { Box } from "@sproutsocial/seeds-react-box";
+import { Loader as Loader2 } from "@sproutsocial/seeds-react-loader";
+import { Collapsible as Collapsible2 } from "@sproutsocial/seeds-react-collapsible";
+import {
+  ContentHeader as ContentHeader2,
+  CollapsibleContentHeader as CollapsibleContentHeader2
+} from "@sproutsocial/seeds-react-content-header";
 import { Container } from "@sproutsocial/seeds-react-container";
 
 // src/styles.ts
 import styled from "styled-components";
-import { Box } from "@sproutsocial/seeds-react-box";
-var ContentBlockContent = styled(Box)`
-  padding: ${({ theme }) => theme.space[400]};
-`;
 var FooterContainer = styled.div`
   box-sizing: border-box;
   display: flex;
@@ -28,32 +200,32 @@ var FooterContainer = styled.div`
   border-bottom-right-radius: ${({ theme }) => theme.radii.outer};
 `;
 
-// src/ContentBlock.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var ContentArea = ({
+// src/ContentBlockStyled.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var ContentArea2 = ({
   isLoading,
   children,
   contentProps,
   flushLayout,
   hasFooter
-}) => /* @__PURE__ */ jsx(
-  Box2,
+}) => /* @__PURE__ */ jsx2(
+  Box,
   {
     p: flushLayout ? 0 : 400,
     ...contentProps,
     borderBottomLeftRadius: hasFooter ? void 0 : "outer",
     borderBottomRightRadius: hasFooter ? void 0 : "outer",
-    children: isLoading ? /* @__PURE__ */ jsx(Box2, { my: 400, children: /* @__PURE__ */ jsx(Loader, { delay: false }) }) : children
+    children: isLoading ? /* @__PURE__ */ jsx2(Box, { my: 400, children: /* @__PURE__ */ jsx2(Loader2, { delay: false }) }) : children
   }
 );
 var ContentFooter = ({
   footerContent,
   footerActions
-}) => /* @__PURE__ */ jsxs(FooterContainer, { children: [
-  footerContent && /* @__PURE__ */ jsx("span", { children: footerContent }),
-  footerActions && /* @__PURE__ */ jsx("span", { children: footerActions })
+}) => /* @__PURE__ */ jsxs2(FooterContainer, { children: [
+  footerContent && /* @__PURE__ */ jsx2("span", { children: footerContent }),
+  footerActions && /* @__PURE__ */ jsx2("span", { children: footerActions })
 ] });
-var CollapsibleContentBlock = ({
+var CollapsibleContentBlock2 = ({
   title,
   subtitle,
   titleAs = "h2",
@@ -69,7 +241,7 @@ var CollapsibleContentBlock = ({
   defaultOpen = true,
   onOpenChange
 }) => {
-  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const [internalOpen, setInternalOpen] = useState2(defaultOpen);
   const open = controlledIsOpen !== void 0 ? controlledIsOpen : internalOpen;
   const hasFooter = !!(footerContent || footerActions);
   const handleOpenChange = (newOpen) => {
@@ -78,22 +250,22 @@ var CollapsibleContentBlock = ({
     }
     onOpenChange?.(newOpen);
   };
-  return /* @__PURE__ */ jsx(Collapsible, { isOpen: open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxs(Container, { as: "section", children: [
-    /* @__PURE__ */ jsx(
-      CollapsibleContentHeader,
+  return /* @__PURE__ */ jsx2(Collapsible2, { isOpen: open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxs2(Container, { as: "section", children: [
+    /* @__PURE__ */ jsx2(
+      CollapsibleContentHeader2,
       {
         title,
         subtitle,
         headingLevel: titleAs,
         subtitleAs,
         headerActions,
-        trigger: Collapsible.Trigger,
+        trigger: Collapsible2.Trigger,
         triggerPosition: "left"
       }
     ),
-    /* @__PURE__ */ jsxs(Collapsible.Panel, { children: [
-      /* @__PURE__ */ jsx(
-        ContentArea,
+    /* @__PURE__ */ jsxs2(Collapsible2.Panel, { children: [
+      /* @__PURE__ */ jsx2(
+        ContentArea2,
         {
           isLoading,
           contentProps,
@@ -102,7 +274,7 @@ var CollapsibleContentBlock = ({
           children
         }
       ),
-      hasFooter && /* @__PURE__ */ jsx(
+      hasFooter && /* @__PURE__ */ jsx2(
         ContentFooter,
         {
           footerContent,
@@ -112,9 +284,12 @@ var CollapsibleContentBlock = ({
     ] })
   ] }) });
 };
-var ContentBlock = ({ isCollapsible, ...props }) => {
+var ContentBlockStyled = ({
+  isCollapsible,
+  ...props
+}) => {
   if (isCollapsible) {
-    return /* @__PURE__ */ jsx(CollapsibleContentBlock, { ...props });
+    return /* @__PURE__ */ jsx2(CollapsibleContentBlock2, { ...props });
   }
   const {
     title,
@@ -130,9 +305,9 @@ var ContentBlock = ({ isCollapsible, ...props }) => {
     footerActions
   } = props;
   const hasFooter = !!(footerContent || footerActions);
-  return /* @__PURE__ */ jsxs(Container, { as: "section", children: [
-    /* @__PURE__ */ jsx(
-      ContentHeader,
+  return /* @__PURE__ */ jsxs2(Container, { as: "section", children: [
+    /* @__PURE__ */ jsx2(
+      ContentHeader2,
       {
         title,
         subtitle,
@@ -141,8 +316,8 @@ var ContentBlock = ({ isCollapsible, ...props }) => {
         headerActions
       }
     ),
-    /* @__PURE__ */ jsx(
-      ContentArea,
+    /* @__PURE__ */ jsx2(
+      ContentArea2,
       {
         isLoading,
         contentProps,
@@ -151,7 +326,7 @@ var ContentBlock = ({ isCollapsible, ...props }) => {
         children
       }
     ),
-    hasFooter && /* @__PURE__ */ jsx(
+    hasFooter && /* @__PURE__ */ jsx2(
       ContentFooter,
       {
         footerContent,
@@ -160,6 +335,20 @@ var ContentBlock = ({ isCollapsible, ...props }) => {
     )
   ] });
 };
+
+// src/ContentBlockHybrid.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var ContentBlockHybrid = (props) => {
+  if (props.contentProps && hasStyledProps(props.contentProps)) {
+    return /* @__PURE__ */ jsx3(ContentBlockStyled, { ...props });
+  }
+  return /* @__PURE__ */ jsx3(ContentBlockTailwind, { ...props });
+};
+var ContentBlockHybrid_default = ContentBlockHybrid;
+
+// src/ContentBlock.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var ContentBlock = (props) => /* @__PURE__ */ jsx4(ContentBlockHybrid_default, { ...props });
 var ContentBlock_default = ContentBlock;
 
 // src/index.ts

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ContentBlock.tsx","../../src/styles.ts","../../src/index.ts"],"sourcesContent":["import React, { useState } from \"react\";\nimport { Box } from \"@sproutsocial/seeds-react-box\";\nimport { Loader } from \"@sproutsocial/seeds-react-loader\";\nimport { Collapsible } from \"@sproutsocial/seeds-react-collapsible\";\nimport {\n  ContentHeader,\n  CollapsibleContentHeader,\n} from \"@sproutsocial/seeds-react-content-header\";\nimport { Container } from \"@sproutsocial/seeds-react-container\";\nimport { FooterContainer } from \"./styles\";\n\ninterface ContentBlockBaseProps {\n  title: string;\n  subtitle?: string;\n  titleAs?: \"h1\" | \"h2\" | \"h3\" | \"h4\";\n  subtitleAs?: \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"p\";\n  isLoading?: boolean;\n  children: React.ReactNode;\n  headerActions?: React.ReactNode;\n  contentProps?: React.ComponentProps<typeof Box>;\n  /** Sets content area padding to 0 */\n  flushLayout?: boolean;\n  /** Left slot of the footer area */\n  footerContent?: React.ReactNode;\n  /** Right slot of the footer area */\n  footerActions?: React.ReactNode;\n}\n\ntype StaticContentBlockProps = ContentBlockBaseProps & {\n  isCollapsible?: false;\n  isOpen?: never;\n  defaultOpen?: never;\n  onOpenChange?: never;\n};\n\ntype CollapsibleContentBlockProps = ContentBlockBaseProps & {\n  /** Enables collapse/expand behavior on the content area */\n  isCollapsible: true;\n  /** Controlled open state. When provided, the component is in controlled mode. */\n  isOpen?: boolean;\n  /** Initial open state for uncontrolled mode. Defaults to true. */\n  defaultOpen?: boolean;\n  /** Called when the open state changes */\n  onOpenChange?: (open: boolean) => void;\n};\n\nexport type ContentBlockProps =\n  | StaticContentBlockProps\n  | CollapsibleContentBlockProps;\n\nconst ContentArea = ({\n  isLoading,\n  children,\n  contentProps,\n  flushLayout,\n  hasFooter,\n}: Pick<\n  ContentBlockBaseProps,\n  \"isLoading\" | \"children\" | \"contentProps\" | \"flushLayout\"\n> & { hasFooter?: boolean }) => (\n  <Box\n    p={flushLayout ? 0 : 400}\n    {...contentProps}\n    borderBottomLeftRadius={hasFooter ? undefined : \"outer\"}\n    borderBottomRightRadius={hasFooter ? undefined : \"outer\"}\n  >\n    {isLoading ? (\n      <Box my={400}>\n        <Loader delay={false} />\n      </Box>\n    ) : (\n      children\n    )}\n  </Box>\n);\n\nconst ContentFooter = ({\n  footerContent,\n  footerActions,\n}: {\n  footerContent?: React.ReactNode;\n  footerActions?: React.ReactNode;\n}) => (\n  <FooterContainer>\n    {footerContent && <span>{footerContent}</span>}\n    {footerActions && <span>{footerActions}</span>}\n  </FooterContainer>\n);\n\nconst CollapsibleContentBlock = ({\n  title,\n  subtitle,\n  titleAs = \"h2\",\n  subtitleAs = \"h3\",\n  children,\n  isLoading,\n  headerActions,\n  contentProps,\n  flushLayout,\n  footerContent,\n  footerActions,\n  isOpen: controlledIsOpen,\n  defaultOpen = true,\n  onOpenChange,\n}: Omit<CollapsibleContentBlockProps, \"isCollapsible\">) => {\n  const [internalOpen, setInternalOpen] = useState(defaultOpen);\n  const open = controlledIsOpen !== undefined ? controlledIsOpen : internalOpen;\n  const hasFooter = !!(footerContent || footerActions);\n\n  const handleOpenChange = (newOpen: boolean) => {\n    if (controlledIsOpen === undefined) {\n      setInternalOpen(newOpen);\n    }\n    onOpenChange?.(newOpen);\n  };\n\n  return (\n    <Collapsible isOpen={open} onOpenChange={handleOpenChange}>\n      <Container as=\"section\">\n        <CollapsibleContentHeader\n          title={title}\n          subtitle={subtitle}\n          headingLevel={titleAs}\n          subtitleAs={subtitleAs}\n          headerActions={headerActions}\n          trigger={Collapsible.Trigger}\n          triggerPosition=\"left\"\n        />\n        <Collapsible.Panel>\n          <ContentArea\n            isLoading={isLoading}\n            contentProps={contentProps}\n            flushLayout={flushLayout}\n            hasFooter={hasFooter}\n          >\n            {children}\n          </ContentArea>\n          {hasFooter && (\n            <ContentFooter\n              footerContent={footerContent}\n              footerActions={footerActions}\n            />\n          )}\n        </Collapsible.Panel>\n      </Container>\n    </Collapsible>\n  );\n};\n\nconst ContentBlock = ({ isCollapsible, ...props }: ContentBlockProps) => {\n  if (isCollapsible) {\n    return <CollapsibleContentBlock {...props} />;\n  }\n\n  const {\n    title,\n    subtitle,\n    titleAs = \"h2\",\n    subtitleAs = \"h3\",\n    children,\n    isLoading,\n    headerActions,\n    contentProps,\n    flushLayout,\n    footerContent,\n    footerActions,\n  } = props;\n\n  const hasFooter = !!(footerContent || footerActions);\n\n  return (\n    <Container as=\"section\">\n      <ContentHeader\n        title={title}\n        subtitle={subtitle}\n        headingLevel={titleAs}\n        subtitleAs={subtitleAs}\n        headerActions={headerActions}\n      />\n      <ContentArea\n        isLoading={isLoading}\n        contentProps={contentProps}\n        flushLayout={flushLayout}\n        hasFooter={hasFooter}\n      >\n        {children}\n      </ContentArea>\n      {hasFooter && (\n        <ContentFooter\n          footerContent={footerContent}\n          footerActions={footerActions}\n        />\n      )}\n    </Container>\n  );\n};\n\nexport default ContentBlock;\n","import styled from \"styled-components\";\nimport { Box } from \"@sproutsocial/seeds-react-box\";\n\nexport const ContentBlockContent = styled(Box)`\n  padding: ${({ theme }) => theme.space[400]};\n`;\n\nexport const FooterContainer = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  width: 100%;\n  padding: ${({ theme }) => theme.space[400]};\n  border-top: ${({ theme }) => theme.borderWidths[500]} solid\n    ${({ theme }) => theme.colors.container.border.base};\n  border-bottom-left-radius: ${({ theme }) => theme.radii.outer};\n  border-bottom-right-radius: ${({ theme }) => theme.radii.outer};\n`;\n","import ContentBlock from \"./ContentBlock\";\n\nexport type { ContentBlockProps } from \"./ContentBlock\";\n\nexport default ContentBlock;\nexport { ContentBlock };\n"],"mappings":"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","names":["Box","Box"]}
+{"version":3,"sources":["../../src/ContentBlock.tsx","../../src/ContentBlockHybrid.tsx","../../src/ContentBlockTailwind.tsx","../../src/ContentBlockStyled.tsx","../../src/styles.ts","../../src/index.ts"],"sourcesContent":["import React from \"react\";\nimport { Box } from \"@sproutsocial/seeds-react-box\";\nimport ContentBlockHybrid from \"./ContentBlockHybrid\";\n\nexport interface ContentBlockBaseProps {\n  title: string;\n  subtitle?: string;\n  titleAs?: \"h1\" | \"h2\" | \"h3\" | \"h4\";\n  subtitleAs?: \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"p\";\n  isLoading?: boolean;\n  children: React.ReactNode;\n  headerActions?: React.ReactNode;\n  contentProps?: React.ComponentProps<typeof Box>;\n  /** Sets content area padding to 0 */\n  flushLayout?: boolean;\n  /** Left slot of the footer area */\n  footerContent?: React.ReactNode;\n  /** Right slot of the footer area */\n  footerActions?: React.ReactNode;\n}\n\ntype StaticContentBlockProps = ContentBlockBaseProps & {\n  isCollapsible?: false;\n  isOpen?: never;\n  defaultOpen?: never;\n  onOpenChange?: never;\n};\n\nexport type CollapsibleContentBlockProps = ContentBlockBaseProps & {\n  /** Enables collapse/expand behavior on the content area */\n  isCollapsible: true;\n  /** Controlled open state. When provided, the component is in controlled mode. */\n  isOpen?: boolean;\n  /** Initial open state for uncontrolled mode. Defaults to true. */\n  defaultOpen?: boolean;\n  /** Called when the open state changes */\n  onOpenChange?: (open: boolean) => void;\n};\n\nexport type ContentBlockProps =\n  | StaticContentBlockProps\n  | CollapsibleContentBlockProps;\n\n/**\n * ContentBlock component. Automatically routes between the Tailwind\n * implementation (preferred) and the styled-components implementation (used when\n * `contentProps` carries styled-system props), mirroring the Button hybrid.\n */\nconst ContentBlock = (props: ContentBlockProps) => (\n  <ContentBlockHybrid {...props} />\n);\n\nexport default ContentBlock;\n","/**\n * Hybrid ContentBlock\n *\n * Routes the whole component between the Tailwind implementation (preferred)\n * and the styled-components implementation (legacy fallback), mirroring\n * ButtonHybrid's single `hasStyledProps` gate.\n *\n * `contentProps` is ContentBlock's only styled-system passthrough surface: it\n * is spread onto the content `<Box>` and may carry props (`bg`, `py`, …) that a\n * plain Tailwind element cannot honor. When it does, render the styled-components\n * tree so those props still apply; otherwise use the lighter Tailwind path.\n */\n\nimport React from \"react\";\nimport { hasStyledProps } from \"@sproutsocial/seeds-react-system-props\";\nimport {\n  ContentBlockTailwind,\n  ContentFooterTailwind,\n  type ContentFooterProps,\n} from \"./ContentBlockTailwind\";\nimport { ContentBlockStyled } from \"./ContentBlockStyled\";\nimport type { ContentBlockProps } from \"./ContentBlock\";\n\nconst ContentBlockHybrid = (props: ContentBlockProps) => {\n  if (props.contentProps && hasStyledProps(props.contentProps)) {\n    return <ContentBlockStyled {...props} />;\n  }\n\n  return <ContentBlockTailwind {...props} />;\n};\n\nexport default ContentBlockHybrid;\n\n/**\n * Hybrid ContentBlock footer.\n *\n * The footer exposes no styled-system props and no styled()-extendable surface\n * (FooterContainer is internal and never re-exported from index.ts), so the\n * Tailwind/CSS-class footer is always used — no routing predicate is needed here.\n * Kept as a separate export so the footer-override story/tests can render it\n * directly.\n */\nexport const ContentFooterHybrid = (props: ContentFooterProps) => (\n  <ContentFooterTailwind {...props} />\n);\n","/**\n * Tailwind CSS implementation of the ContentBlock component.\n * Renders the whole component (card, content area, loader, footer) with plain\n * elements and the Seeds content-block CSS classes from content-block.css.\n * Child components (ContentHeader, Collapsible, Loader) are composed unchanged.\n */\n\nimport React, { useState } from \"react\";\nimport { Loader } from \"@sproutsocial/seeds-react-loader\";\nimport { Collapsible } from \"@sproutsocial/seeds-react-collapsible\";\nimport {\n  ContentHeader,\n  CollapsibleContentHeader,\n} from \"@sproutsocial/seeds-react-content-header\";\nimport type {\n  ContentBlockBaseProps,\n  ContentBlockProps,\n  CollapsibleContentBlockProps,\n} from \"./ContentBlock\";\n\n// Utility for merging class names properly.\n// cn is NOT exported from @sproutsocial/seeds-react-utilities, so it is\n// reproduced locally here (mirrors ButtonTailwind.tsx).\nfunction cn(\n  ...inputs: (string | undefined | null | false | Record<string, boolean>)[]\n): string {\n  const classes: string[] = [];\n\n  for (const input of inputs) {\n    if (!input) continue;\n\n    if (typeof input === \"string\") {\n      classes.push(input);\n    } else if (typeof input === \"object\") {\n      for (const [key, value] of Object.entries(input)) {\n        if (value) {\n          classes.push(key);\n        }\n      }\n    }\n  }\n\n  return classes.join(\" \");\n}\n\nexport type ContentFooterProps = {\n  footerContent?: React.ReactNode;\n  footerActions?: React.ReactNode;\n  className?: string;\n};\n\nexport const ContentFooterTailwind = ({\n  footerContent,\n  footerActions,\n  className,\n}: ContentFooterProps) => (\n  <div className={cn(\"seeds-content-block-footer\", className)}>\n    {footerContent && <span>{footerContent}</span>}\n    {footerActions && <span>{footerActions}</span>}\n  </div>\n);\n\nconst ContentArea = ({\n  isLoading,\n  children,\n  flushLayout,\n  hasFooter,\n  contentProps,\n}: Pick<\n  ContentBlockBaseProps,\n  \"isLoading\" | \"children\" | \"flushLayout\" | \"contentProps\"\n> & {\n  hasFooter?: boolean;\n}) => {\n  // By construction, any contentProps reaching the Tailwind path carries no\n  // styled-system props (those route to ContentBlockStyled via hasStyledProps),\n  // so the rest is pure DOM attributes safe to spread onto a div. Pull className\n  // out and merge it via cn so the seeds-content-block-content class is\n  // preserved, rendering className after the spread so the merged value wins\n  // (mirrors ButtonTailwind).\n  const { className, ...domProps } = contentProps ?? {};\n  return (\n    <div\n      {...(domProps as React.HTMLAttributes<HTMLDivElement>)}\n      className={cn(\n        \"seeds-content-block-content\",\n        {\n          flush: !!flushLayout,\n          \"no-footer\": !hasFooter,\n        },\n        className\n      )}\n    >\n      {isLoading ? (\n        <div className=\"seeds-content-block-loader\">\n          <Loader delay={false} />\n        </div>\n      ) : (\n        children\n      )}\n    </div>\n  );\n};\n\nconst CollapsibleContentBlock = ({\n  title,\n  subtitle,\n  titleAs = \"h2\",\n  subtitleAs = \"h3\",\n  children,\n  isLoading,\n  headerActions,\n  flushLayout,\n  footerContent,\n  footerActions,\n  contentProps,\n  isOpen: controlledIsOpen,\n  defaultOpen = true,\n  onOpenChange,\n}: Omit<CollapsibleContentBlockProps, \"isCollapsible\">) => {\n  const [internalOpen, setInternalOpen] = useState(defaultOpen);\n  const open = controlledIsOpen !== undefined ? controlledIsOpen : internalOpen;\n  const hasFooter = !!(footerContent || footerActions);\n\n  const handleOpenChange = (newOpen: boolean) => {\n    if (controlledIsOpen === undefined) {\n      setInternalOpen(newOpen);\n    }\n    onOpenChange?.(newOpen);\n  };\n\n  return (\n    <Collapsible isOpen={open} onOpenChange={handleOpenChange}>\n      <section className=\"seeds-content-block\">\n        <CollapsibleContentHeader\n          title={title}\n          subtitle={subtitle}\n          headingLevel={titleAs}\n          subtitleAs={subtitleAs}\n          headerActions={headerActions}\n          trigger={Collapsible.Trigger}\n          triggerPosition=\"left\"\n        />\n        <Collapsible.Panel>\n          <ContentArea\n            isLoading={isLoading}\n            flushLayout={flushLayout}\n            hasFooter={hasFooter}\n            contentProps={contentProps}\n          >\n            {children}\n          </ContentArea>\n          {hasFooter && (\n            <ContentFooterTailwind\n              footerContent={footerContent}\n              footerActions={footerActions}\n            />\n          )}\n        </Collapsible.Panel>\n      </section>\n    </Collapsible>\n  );\n};\n\n/**\n * Tailwind/CSS-class implementation of the full ContentBlock. Preferred path;\n * the Hybrid routes here unless `contentProps` carries styled-system props.\n */\nexport const ContentBlockTailwind = ({\n  isCollapsible,\n  ...props\n}: ContentBlockProps) => {\n  if (isCollapsible) {\n    return <CollapsibleContentBlock {...props} />;\n  }\n\n  const {\n    title,\n    subtitle,\n    titleAs = \"h2\",\n    subtitleAs = \"h3\",\n    children,\n    isLoading,\n    headerActions,\n    flushLayout,\n    footerContent,\n    footerActions,\n    contentProps,\n  } = props;\n\n  const hasFooter = !!(footerContent || footerActions);\n\n  return (\n    <section className=\"seeds-content-block\">\n      <ContentHeader\n        title={title}\n        subtitle={subtitle}\n        headingLevel={titleAs}\n        subtitleAs={subtitleAs}\n        headerActions={headerActions}\n      />\n      <ContentArea\n        isLoading={isLoading}\n        flushLayout={flushLayout}\n        hasFooter={hasFooter}\n        contentProps={contentProps}\n      >\n        {children}\n      </ContentArea>\n      {hasFooter && (\n        <ContentFooterTailwind\n          footerContent={footerContent}\n          footerActions={footerActions}\n        />\n      )}\n    </section>\n  );\n};\n","/**\n * Styled-components implementation of the full ContentBlock.\n *\n * This is the legacy fallback the Hybrid delegates to whenever `contentProps`\n * carries styled-system props (e.g. `bg`, `py`) that a plain Tailwind element\n * cannot honor. It reproduces the original Box/Container/FooterContainer tree\n * verbatim so styled-system passthrough and visual parity are preserved.\n */\n\nimport React, { useState } from \"react\";\nimport { Box } from \"@sproutsocial/seeds-react-box\";\nimport { Loader } from \"@sproutsocial/seeds-react-loader\";\nimport { Collapsible } from \"@sproutsocial/seeds-react-collapsible\";\nimport {\n  ContentHeader,\n  CollapsibleContentHeader,\n} from \"@sproutsocial/seeds-react-content-header\";\nimport { Container } from \"@sproutsocial/seeds-react-container\";\nimport { FooterContainer } from \"./styles\";\nimport type {\n  ContentBlockBaseProps,\n  ContentBlockProps,\n  CollapsibleContentBlockProps,\n} from \"./ContentBlock\";\n\nconst ContentArea = ({\n  isLoading,\n  children,\n  contentProps,\n  flushLayout,\n  hasFooter,\n}: Pick<\n  ContentBlockBaseProps,\n  \"isLoading\" | \"children\" | \"contentProps\" | \"flushLayout\"\n> & { hasFooter?: boolean }) => (\n  <Box\n    p={flushLayout ? 0 : 400}\n    {...contentProps}\n    borderBottomLeftRadius={hasFooter ? undefined : \"outer\"}\n    borderBottomRightRadius={hasFooter ? undefined : \"outer\"}\n  >\n    {isLoading ? (\n      <Box my={400}>\n        <Loader delay={false} />\n      </Box>\n    ) : (\n      children\n    )}\n  </Box>\n);\n\nconst ContentFooter = ({\n  footerContent,\n  footerActions,\n}: {\n  footerContent?: React.ReactNode;\n  footerActions?: React.ReactNode;\n}) => (\n  <FooterContainer>\n    {footerContent && <span>{footerContent}</span>}\n    {footerActions && <span>{footerActions}</span>}\n  </FooterContainer>\n);\n\nconst CollapsibleContentBlock = ({\n  title,\n  subtitle,\n  titleAs = \"h2\",\n  subtitleAs = \"h3\",\n  children,\n  isLoading,\n  headerActions,\n  contentProps,\n  flushLayout,\n  footerContent,\n  footerActions,\n  isOpen: controlledIsOpen,\n  defaultOpen = true,\n  onOpenChange,\n}: Omit<CollapsibleContentBlockProps, \"isCollapsible\">) => {\n  const [internalOpen, setInternalOpen] = useState(defaultOpen);\n  const open = controlledIsOpen !== undefined ? controlledIsOpen : internalOpen;\n  const hasFooter = !!(footerContent || footerActions);\n\n  const handleOpenChange = (newOpen: boolean) => {\n    if (controlledIsOpen === undefined) {\n      setInternalOpen(newOpen);\n    }\n    onOpenChange?.(newOpen);\n  };\n\n  return (\n    <Collapsible isOpen={open} onOpenChange={handleOpenChange}>\n      <Container as=\"section\">\n        <CollapsibleContentHeader\n          title={title}\n          subtitle={subtitle}\n          headingLevel={titleAs}\n          subtitleAs={subtitleAs}\n          headerActions={headerActions}\n          trigger={Collapsible.Trigger}\n          triggerPosition=\"left\"\n        />\n        <Collapsible.Panel>\n          <ContentArea\n            isLoading={isLoading}\n            contentProps={contentProps}\n            flushLayout={flushLayout}\n            hasFooter={hasFooter}\n          >\n            {children}\n          </ContentArea>\n          {hasFooter && (\n            <ContentFooter\n              footerContent={footerContent}\n              footerActions={footerActions}\n            />\n          )}\n        </Collapsible.Panel>\n      </Container>\n    </Collapsible>\n  );\n};\n\nexport const ContentBlockStyled = ({\n  isCollapsible,\n  ...props\n}: ContentBlockProps) => {\n  if (isCollapsible) {\n    return <CollapsibleContentBlock {...props} />;\n  }\n\n  const {\n    title,\n    subtitle,\n    titleAs = \"h2\",\n    subtitleAs = \"h3\",\n    children,\n    isLoading,\n    headerActions,\n    contentProps,\n    flushLayout,\n    footerContent,\n    footerActions,\n  } = props;\n\n  const hasFooter = !!(footerContent || footerActions);\n\n  return (\n    <Container as=\"section\">\n      <ContentHeader\n        title={title}\n        subtitle={subtitle}\n        headingLevel={titleAs}\n        subtitleAs={subtitleAs}\n        headerActions={headerActions}\n      />\n      <ContentArea\n        isLoading={isLoading}\n        contentProps={contentProps}\n        flushLayout={flushLayout}\n        hasFooter={hasFooter}\n      >\n        {children}\n      </ContentArea>\n      {hasFooter && (\n        <ContentFooter\n          footerContent={footerContent}\n          footerActions={footerActions}\n        />\n      )}\n    </Container>\n  );\n};\n","import styled from \"styled-components\";\n\nexport const FooterContainer = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  width: 100%;\n  padding: ${({ theme }) => theme.space[400]};\n  border-top: ${({ theme }) => theme.borderWidths[500]} solid\n    ${({ theme }) => theme.colors.container.border.base};\n  border-bottom-left-radius: ${({ theme }) => theme.radii.outer};\n  border-bottom-right-radius: ${({ theme }) => theme.radii.outer};\n`;\n","import ContentBlock from \"./ContentBlock\";\n\nexport type { ContentBlockProps } from \"./ContentBlock\";\n\nexport default ContentBlock;\nexport { ContentBlock };\n"],"mappings":"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","names":["useState","Loader","Collapsible","ContentHeader","CollapsibleContentHeader","jsx","jsxs","ContentArea","Loader","CollapsibleContentBlock","useState","Collapsible","CollapsibleContentHeader","ContentHeader","jsx","jsx"]}

package/dist/index.d.mts

@@ -35,6 +35,11 @@ type CollapsibleContentBlockProps = ContentBlockBaseProps & {
     onOpenChange?: (open: boolean) => void;
 };
 type ContentBlockProps = StaticContentBlockProps | CollapsibleContentBlockProps;
-declare const ContentBlock: ({ isCollapsible, ...props }: ContentBlockProps) => react_jsx_runtime.JSX.Element;
+/**
+ * ContentBlock component. Automatically routes between the Tailwind
+ * implementation (preferred) and the styled-components implementation (used when
+ * `contentProps` carries styled-system props), mirroring the Button hybrid.
+ */
+declare const ContentBlock: (props: ContentBlockProps) => react_jsx_runtime.JSX.Element;
 
 export { ContentBlock, type ContentBlockProps, ContentBlock as default };

package/dist/index.d.ts

@@ -35,6 +35,11 @@ type CollapsibleContentBlockProps = ContentBlockBaseProps & {
     onOpenChange?: (open: boolean) => void;
 };
 type ContentBlockProps = StaticContentBlockProps | CollapsibleContentBlockProps;
-declare const ContentBlock: ({ isCollapsible, ...props }: ContentBlockProps) => react_jsx_runtime.JSX.Element;
+/**
+ * ContentBlock component. Automatically routes between the Tailwind
+ * implementation (preferred) and the styled-components implementation (used when
+ * `contentProps` carries styled-system props), mirroring the Button hybrid.
+ */
+declare const ContentBlock: (props: ContentBlockProps) => react_jsx_runtime.JSX.Element;
 
 export { ContentBlock, type ContentBlockProps, ContentBlock as default };