@sproutsocial/seeds-react-content-header 0.2.1

package/.turbo/turbo-build.log

@@ -0,0 +1,21 @@
+yarn run v1.22.22
+$ tsup --dts
+CLI Building entry: src/index.ts
+CLI Using tsconfig: tsconfig.json
+CLI tsup v8.5.0
+CLI Using tsup config: /home/runner/_work/seeds/seeds/seeds-react/seeds-react-content-header/tsup.config.ts
+CLI Target: es2022
+CLI Cleaning output folder
+CJS Build start
+ESM Build start
+CJS dist/index.js     6.37 KB
+CJS dist/index.js.map 6.79 KB
+CJS ⚡️ Build success in 41ms
+ESM dist/esm/index.js     3.98 KB
+ESM dist/esm/index.js.map 6.77 KB
+ESM ⚡️ Build success in 41ms
+DTS Build start
+DTS ⚡️ Build success in 2119ms
+DTS dist/index.d.ts  1.84 KB
+DTS dist/index.d.mts 1.84 KB
+Done in 2.99s.

package/CHANGELOG.md

@@ -0,0 +1,20 @@
+# @sproutsocial/seeds-react-content-header
+
+## 0.2.1
+
+### Patch Changes
+
+- @sproutsocial/seeds-react-box@1.1.14
+- @sproutsocial/seeds-react-icon@2.2.5
+- @sproutsocial/seeds-react-mixins@4.3.1
+
+## 0.2.0
+
+### Minor Changes
+
+- 5bb63e1: New ContentHeader and CollapsibleContentHeader components that extract the shared header-with-actions layout pattern. Re-exported from racine.
+
+### Patch Changes
+
+- Updated dependencies [5bb63e1]
+  - @sproutsocial/seeds-react-mixins@4.3.0

package/dist/esm/index.js

@@ -0,0 +1,153 @@
+// src/ContentHeader.tsx
+import "react";
+import { Box as Box2 } from "@sproutsocial/seeds-react-box";
+
+// src/styles.ts
+import styled from "styled-components";
+import { divider, focusRing } from "@sproutsocial/seeds-react-mixins";
+var HeaderContainer = styled.div`
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  color: ${({ theme }) => theme.colors.text.headline};
+  padding: ${({ theme }) => theme.space[400]};
+
+  ${({ $bordered }) => $bordered && divider}
+
+  /* Hide divider when collapsible trigger is closed (no content below) */
+  &:has(button[data-state="closed"]) {
+    border-bottom-color: transparent;
+  }
+`;
+var TriggerButton = styled.button`
+  all: unset;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex: 1;
+  width: 100%;
+  cursor: pointer;
+  min-width: 0;
+
+  .triggerIcon {
+    flex-shrink: 0;
+    transition: transform 300ms ease-in-out;
+  }
+
+  &[data-state="open"] .triggerIcon {
+    transform: rotate(-180deg);
+  }
+
+  &:focus-visible {
+    ${focusRing}
+  }
+`;
+
+// src/TitleArea.tsx
+import "react";
+import { Box } from "@sproutsocial/seeds-react-box";
+import { Text } from "@sproutsocial/seeds-react-text";
+import { jsx, jsxs } from "react/jsx-runtime";
+var TitleArea = ({
+  title,
+  subtitle,
+  headingLevel = "h4",
+  subtitleAs,
+  leftSlot,
+  rightSlot
+}) => /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", flex: 1, width: "100%", minWidth: 0, children: [
+  leftSlot,
+  /* @__PURE__ */ jsxs(Box, { flex: 1, children: [
+    /* @__PURE__ */ jsx(Text.Headline, { as: headingLevel, children: title }),
+    subtitle && /* @__PURE__ */ jsx(Text.Byline, { as: subtitleAs, fontWeight: "normal", children: subtitle })
+  ] }),
+  rightSlot
+] });
+
+// src/ContentHeader.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var ContentHeader = ({
+  title,
+  subtitle,
+  headingLevel = "h4",
+  subtitleAs,
+  leftSlot,
+  rightSlot,
+  headerActions,
+  bordered = true
+}) => {
+  return /* @__PURE__ */ jsxs2(HeaderContainer, { $bordered: bordered, children: [
+    /* @__PURE__ */ jsx2(
+      TitleArea,
+      {
+        title,
+        subtitle,
+        headingLevel,
+        subtitleAs,
+        leftSlot,
+        rightSlot
+      }
+    ),
+    headerActions && /* @__PURE__ */ jsx2(Box2, { children: headerActions })
+  ] });
+};
+var ContentHeader_default = ContentHeader;
+
+// src/CollapsibleContentHeader.tsx
+import "react";
+import { Box as Box3 } from "@sproutsocial/seeds-react-box";
+import { Icon } from "@sproutsocial/seeds-react-icon";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var CollapsibleContentHeader = ({
+  title,
+  subtitle,
+  headingLevel = "h4",
+  subtitleAs,
+  leftSlot,
+  rightSlot,
+  headerActions,
+  trigger: TriggerWrapper,
+  triggerPosition = "right",
+  triggerIcon,
+  bordered = true
+}) => {
+  const defaultIcon = /* @__PURE__ */ jsx3(
+    Icon,
+    {
+      name: "chevron-down-outline",
+      className: "triggerIcon",
+      "aria-hidden": "true"
+    }
+  );
+  const resolvedIcon = triggerIcon !== void 0 ? triggerIcon : defaultIcon;
+  return /* @__PURE__ */ jsxs3(HeaderContainer, { $bordered: bordered, children: [
+    /* @__PURE__ */ jsx3(TriggerWrapper, { children: /* @__PURE__ */ jsxs3(TriggerButton, { type: "button", children: [
+      triggerPosition === "left" && /* @__PURE__ */ jsx3(Box3, { mr: 300, children: resolvedIcon }),
+      /* @__PURE__ */ jsx3(
+        TitleArea,
+        {
+          title,
+          subtitle,
+          headingLevel,
+          subtitleAs,
+          leftSlot,
+          rightSlot
+        }
+      ),
+      triggerPosition === "right" && resolvedIcon
+    ] }) }),
+    headerActions && /* @__PURE__ */ jsx3(Box3, { ml: 300, children: headerActions })
+  ] });
+};
+var CollapsibleContentHeader_default = CollapsibleContentHeader;
+
+// src/index.ts
+var index_default = ContentHeader_default;
+export {
+  CollapsibleContentHeader_default as CollapsibleContentHeader,
+  ContentHeader_default as ContentHeader,
+  index_default as default
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ContentHeader.tsx","../../src/styles.ts","../../src/TitleArea.tsx","../../src/CollapsibleContentHeader.tsx","../../src/index.ts"],"sourcesContent":["import React from \"react\";\nimport { Box } from \"@sproutsocial/seeds-react-box\";\nimport { type TypeContentHeaderProps } from \"./ContentHeaderTypes\";\nimport { HeaderContainer } from \"./styles\";\nimport { TitleArea } from \"./TitleArea\";\n\nexport const ContentHeader = ({\n  title,\n  subtitle,\n  headingLevel = \"h4\",\n  subtitleAs,\n  leftSlot,\n  rightSlot,\n  headerActions,\n  bordered = true,\n}: TypeContentHeaderProps) => {\n  return (\n    <HeaderContainer $bordered={bordered}>\n      <TitleArea\n        title={title}\n        subtitle={subtitle}\n        headingLevel={headingLevel}\n        subtitleAs={subtitleAs}\n        leftSlot={leftSlot}\n        rightSlot={rightSlot}\n      />\n      {headerActions && <Box>{headerActions}</Box>}\n    </HeaderContainer>\n  );\n};\n\nexport default ContentHeader;\n","import styled from \"styled-components\";\nimport { divider, focusRing } from \"@sproutsocial/seeds-react-mixins\";\n\nexport const HeaderContainer = styled.div<{ $bordered?: boolean }>`\n  box-sizing: border-box;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  width: 100%;\n  color: ${({ theme }) => theme.colors.text.headline};\n  padding: ${({ theme }) => theme.space[400]};\n\n  ${({ $bordered }) => $bordered && divider}\n\n  /* Hide divider when collapsible trigger is closed (no content below) */\n  &:has(button[data-state=\"closed\"]) {\n    border-bottom-color: transparent;\n  }\n`;\n\nexport const TriggerButton = styled.button`\n  all: unset;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex: 1;\n  width: 100%;\n  cursor: pointer;\n  min-width: 0;\n\n  .triggerIcon {\n    flex-shrink: 0;\n    transition: transform 300ms ease-in-out;\n  }\n\n  &[data-state=\"open\"] .triggerIcon {\n    transform: rotate(-180deg);\n  }\n\n  &:focus-visible {\n    ${focusRing}\n  }\n`;\n","import React from \"react\";\nimport { Box } from \"@sproutsocial/seeds-react-box\";\nimport { Text } from \"@sproutsocial/seeds-react-text\";\nimport { type TypeHeadingLevel } from \"./ContentHeaderTypes\";\n\ninterface TypeTitleAreaProps {\n  title: string;\n  subtitle?: string;\n  headingLevel?: TypeHeadingLevel;\n  subtitleAs?: \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"p\";\n  leftSlot?: React.ReactNode;\n  rightSlot?: React.ReactNode;\n}\n\nexport const TitleArea = ({\n  title,\n  subtitle,\n  headingLevel = \"h4\",\n  subtitleAs,\n  leftSlot,\n  rightSlot,\n}: TypeTitleAreaProps) => (\n  <Box display=\"flex\" alignItems=\"center\" flex={1} width=\"100%\" minWidth={0}>\n    {leftSlot}\n    <Box flex={1}>\n      <Text.Headline as={headingLevel}>{title}</Text.Headline>\n      {subtitle && (\n        <Text.Byline as={subtitleAs} fontWeight=\"normal\">\n          {subtitle}\n        </Text.Byline>\n      )}\n    </Box>\n    {rightSlot}\n  </Box>\n);\n","import React from \"react\";\nimport { Box } from \"@sproutsocial/seeds-react-box\";\nimport { Icon } from \"@sproutsocial/seeds-react-icon\";\nimport { type TypeCollapsibleContentHeaderProps } from \"./ContentHeaderTypes\";\nimport { HeaderContainer, TriggerButton } from \"./styles\";\nimport { TitleArea } from \"./TitleArea\";\n\nexport const CollapsibleContentHeader = ({\n  title,\n  subtitle,\n  headingLevel = \"h4\",\n  subtitleAs,\n  leftSlot,\n  rightSlot,\n  headerActions,\n  trigger: TriggerWrapper,\n  triggerPosition = \"right\",\n  triggerIcon,\n  bordered = true,\n}: TypeCollapsibleContentHeaderProps) => {\n  const defaultIcon = (\n    <Icon\n      name=\"chevron-down-outline\"\n      className=\"triggerIcon\"\n      aria-hidden=\"true\"\n    />\n  );\n\n  const resolvedIcon = triggerIcon !== undefined ? triggerIcon : defaultIcon;\n\n  return (\n    <HeaderContainer $bordered={bordered}>\n      <TriggerWrapper>\n        <TriggerButton type=\"button\">\n          {triggerPosition === \"left\" && <Box mr={300}>{resolvedIcon}</Box>}\n          <TitleArea\n            title={title}\n            subtitle={subtitle}\n            headingLevel={headingLevel}\n            subtitleAs={subtitleAs}\n            leftSlot={leftSlot}\n            rightSlot={rightSlot}\n          />\n          {triggerPosition === \"right\" && resolvedIcon}\n        </TriggerButton>\n      </TriggerWrapper>\n      {headerActions && <Box ml={300}>{headerActions}</Box>}\n    </HeaderContainer>\n  );\n};\n\nexport default CollapsibleContentHeader;\n","import ContentHeader from \"./ContentHeader\";\nimport CollapsibleContentHeader from \"./CollapsibleContentHeader\";\n\nexport default ContentHeader;\nexport { ContentHeader };\nexport { CollapsibleContentHeader };\nexport * from \"./ContentHeaderTypes\";\n"],"mappings":"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","names":["Box","jsx","jsxs","Box","Box","jsx","jsxs","Box"]}

package/dist/index.d.mts

@@ -0,0 +1,38 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+type TypeHeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+interface TypeContentHeaderProps {
+    /** The header title text */
+    title: string;
+    /** Optional subtitle text */
+    subtitle?: string;
+    /** Semantic heading level for the title. Defaults to "h4" */
+    headingLevel?: TypeHeadingLevel;
+    /** Semantic element for the subtitle */
+    subtitleAs?: "h2" | "h3" | "h4" | "h5" | "p";
+    /** Content rendered before the title */
+    leftSlot?: React.ReactNode;
+    /** Content rendered after the title */
+    rightSlot?: React.ReactNode;
+    /** Actions rendered to the right of the header */
+    headerActions?: React.ReactNode;
+    /** Adds a border-bottom divider. Defaults to true */
+    bordered?: boolean;
+}
+interface TypeCollapsibleContentHeaderProps extends TypeContentHeaderProps {
+    /** Trigger component to wrap the title area (e.g. Collapsible.Trigger) */
+    trigger: React.ComponentType<{
+        children: React.ReactElement;
+    }>;
+    /** Position of the collapse chevron icon. Defaults to "right" */
+    triggerPosition?: "left" | "right";
+    /** Custom trigger icon. Defaults to chevron-down-outline Icon */
+    triggerIcon?: React.ReactNode;
+}
+
+declare const ContentHeader: ({ title, subtitle, headingLevel, subtitleAs, leftSlot, rightSlot, headerActions, bordered, }: TypeContentHeaderProps) => react_jsx_runtime.JSX.Element;
+
+declare const CollapsibleContentHeader: ({ title, subtitle, headingLevel, subtitleAs, leftSlot, rightSlot, headerActions, trigger: TriggerWrapper, triggerPosition, triggerIcon, bordered, }: TypeCollapsibleContentHeaderProps) => react_jsx_runtime.JSX.Element;
+
+export { CollapsibleContentHeader, ContentHeader, type TypeCollapsibleContentHeaderProps, type TypeContentHeaderProps, type TypeHeadingLevel, ContentHeader as default };

package/dist/index.d.ts

@@ -0,0 +1,38 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+type TypeHeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+interface TypeContentHeaderProps {
+    /** The header title text */
+    title: string;
+    /** Optional subtitle text */
+    subtitle?: string;
+    /** Semantic heading level for the title. Defaults to "h4" */
+    headingLevel?: TypeHeadingLevel;
+    /** Semantic element for the subtitle */
+    subtitleAs?: "h2" | "h3" | "h4" | "h5" | "p";
+    /** Content rendered before the title */
+    leftSlot?: React.ReactNode;
+    /** Content rendered after the title */
+    rightSlot?: React.ReactNode;
+    /** Actions rendered to the right of the header */
+    headerActions?: React.ReactNode;
+    /** Adds a border-bottom divider. Defaults to true */
+    bordered?: boolean;
+}
+interface TypeCollapsibleContentHeaderProps extends TypeContentHeaderProps {
+    /** Trigger component to wrap the title area (e.g. Collapsible.Trigger) */
+    trigger: React.ComponentType<{
+        children: React.ReactElement;
+    }>;
+    /** Position of the collapse chevron icon. Defaults to "right" */
+    triggerPosition?: "left" | "right";
+    /** Custom trigger icon. Defaults to chevron-down-outline Icon */
+    triggerIcon?: React.ReactNode;
+}
+
+declare const ContentHeader: ({ title, subtitle, headingLevel, subtitleAs, leftSlot, rightSlot, headerActions, bordered, }: TypeContentHeaderProps) => react_jsx_runtime.JSX.Element;
+
+declare const CollapsibleContentHeader: ({ title, subtitle, headingLevel, subtitleAs, leftSlot, rightSlot, headerActions, trigger: TriggerWrapper, triggerPosition, triggerIcon, bordered, }: TypeCollapsibleContentHeaderProps) => react_jsx_runtime.JSX.Element;
+
+export { CollapsibleContentHeader, ContentHeader, type TypeCollapsibleContentHeaderProps, type TypeContentHeaderProps, type TypeHeadingLevel, ContentHeader as default };

package/dist/index.js

@@ -0,0 +1,191 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  CollapsibleContentHeader: () => CollapsibleContentHeader_default,
+  ContentHeader: () => ContentHeader_default,
+  default: () => index_default
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/ContentHeader.tsx
+var import_react2 = require("react");
+var import_seeds_react_box2 = require("@sproutsocial/seeds-react-box");
+
+// src/styles.ts
+var import_styled_components = __toESM(require("styled-components"));
+var import_seeds_react_mixins = require("@sproutsocial/seeds-react-mixins");
+var HeaderContainer = import_styled_components.default.div`
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  color: ${({ theme }) => theme.colors.text.headline};
+  padding: ${({ theme }) => theme.space[400]};
+
+  ${({ $bordered }) => $bordered && import_seeds_react_mixins.divider}
+
+  /* Hide divider when collapsible trigger is closed (no content below) */
+  &:has(button[data-state="closed"]) {
+    border-bottom-color: transparent;
+  }
+`;
+var TriggerButton = import_styled_components.default.button`
+  all: unset;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex: 1;
+  width: 100%;
+  cursor: pointer;
+  min-width: 0;
+
+  .triggerIcon {
+    flex-shrink: 0;
+    transition: transform 300ms ease-in-out;
+  }
+
+  &[data-state="open"] .triggerIcon {
+    transform: rotate(-180deg);
+  }
+
+  &:focus-visible {
+    ${import_seeds_react_mixins.focusRing}
+  }
+`;
+
+// src/TitleArea.tsx
+var import_react = require("react");
+var import_seeds_react_box = require("@sproutsocial/seeds-react-box");
+var import_seeds_react_text = require("@sproutsocial/seeds-react-text");
+var import_jsx_runtime = require("react/jsx-runtime");
+var TitleArea = ({
+  title,
+  subtitle,
+  headingLevel = "h4",
+  subtitleAs,
+  leftSlot,
+  rightSlot
+}) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_seeds_react_box.Box, { display: "flex", alignItems: "center", flex: 1, width: "100%", minWidth: 0, children: [
+  leftSlot,
+  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_seeds_react_box.Box, { flex: 1, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_text.Text.Headline, { as: headingLevel, children: title }),
+    subtitle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_text.Text.Byline, { as: subtitleAs, fontWeight: "normal", children: subtitle })
+  ] }),
+  rightSlot
+] });
+
+// src/ContentHeader.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var ContentHeader = ({
+  title,
+  subtitle,
+  headingLevel = "h4",
+  subtitleAs,
+  leftSlot,
+  rightSlot,
+  headerActions,
+  bordered = true
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(HeaderContainer, { $bordered: bordered, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      TitleArea,
+      {
+        title,
+        subtitle,
+        headingLevel,
+        subtitleAs,
+        leftSlot,
+        rightSlot
+      }
+    ),
+    headerActions && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_seeds_react_box2.Box, { children: headerActions })
+  ] });
+};
+var ContentHeader_default = ContentHeader;
+
+// src/CollapsibleContentHeader.tsx
+var import_react3 = require("react");
+var import_seeds_react_box3 = require("@sproutsocial/seeds-react-box");
+var import_seeds_react_icon = require("@sproutsocial/seeds-react-icon");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var CollapsibleContentHeader = ({
+  title,
+  subtitle,
+  headingLevel = "h4",
+  subtitleAs,
+  leftSlot,
+  rightSlot,
+  headerActions,
+  trigger: TriggerWrapper,
+  triggerPosition = "right",
+  triggerIcon,
+  bordered = true
+}) => {
+  const defaultIcon = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    import_seeds_react_icon.Icon,
+    {
+      name: "chevron-down-outline",
+      className: "triggerIcon",
+      "aria-hidden": "true"
+    }
+  );
+  const resolvedIcon = triggerIcon !== void 0 ? triggerIcon : defaultIcon;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(HeaderContainer, { $bordered: bordered, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TriggerWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(TriggerButton, { type: "button", children: [
+      triggerPosition === "left" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_seeds_react_box3.Box, { mr: 300, children: resolvedIcon }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        TitleArea,
+        {
+          title,
+          subtitle,
+          headingLevel,
+          subtitleAs,
+          leftSlot,
+          rightSlot
+        }
+      ),
+      triggerPosition === "right" && resolvedIcon
+    ] }) }),
+    headerActions && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_seeds_react_box3.Box, { ml: 300, children: headerActions })
+  ] });
+};
+var CollapsibleContentHeader_default = CollapsibleContentHeader;
+
+// src/index.ts
+var index_default = ContentHeader_default;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CollapsibleContentHeader,
+  ContentHeader
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/ContentHeader.tsx","../src/styles.ts","../src/TitleArea.tsx","../src/CollapsibleContentHeader.tsx"],"sourcesContent":["import ContentHeader from \"./ContentHeader\";\nimport CollapsibleContentHeader from \"./CollapsibleContentHeader\";\n\nexport default ContentHeader;\nexport { ContentHeader };\nexport { CollapsibleContentHeader };\nexport * from \"./ContentHeaderTypes\";\n","import React from \"react\";\nimport { Box } from \"@sproutsocial/seeds-react-box\";\nimport { type TypeContentHeaderProps } from \"./ContentHeaderTypes\";\nimport { HeaderContainer } from \"./styles\";\nimport { TitleArea } from \"./TitleArea\";\n\nexport const ContentHeader = ({\n  title,\n  subtitle,\n  headingLevel = \"h4\",\n  subtitleAs,\n  leftSlot,\n  rightSlot,\n  headerActions,\n  bordered = true,\n}: TypeContentHeaderProps) => {\n  return (\n    <HeaderContainer $bordered={bordered}>\n      <TitleArea\n        title={title}\n        subtitle={subtitle}\n        headingLevel={headingLevel}\n        subtitleAs={subtitleAs}\n        leftSlot={leftSlot}\n        rightSlot={rightSlot}\n      />\n      {headerActions && <Box>{headerActions}</Box>}\n    </HeaderContainer>\n  );\n};\n\nexport default ContentHeader;\n","import styled from \"styled-components\";\nimport { divider, focusRing } from \"@sproutsocial/seeds-react-mixins\";\n\nexport const HeaderContainer = styled.div<{ $bordered?: boolean }>`\n  box-sizing: border-box;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  width: 100%;\n  color: ${({ theme }) => theme.colors.text.headline};\n  padding: ${({ theme }) => theme.space[400]};\n\n  ${({ $bordered }) => $bordered && divider}\n\n  /* Hide divider when collapsible trigger is closed (no content below) */\n  &:has(button[data-state=\"closed\"]) {\n    border-bottom-color: transparent;\n  }\n`;\n\nexport const TriggerButton = styled.button`\n  all: unset;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex: 1;\n  width: 100%;\n  cursor: pointer;\n  min-width: 0;\n\n  .triggerIcon {\n    flex-shrink: 0;\n    transition: transform 300ms ease-in-out;\n  }\n\n  &[data-state=\"open\"] .triggerIcon {\n    transform: rotate(-180deg);\n  }\n\n  &:focus-visible {\n    ${focusRing}\n  }\n`;\n","import React from \"react\";\nimport { Box } from \"@sproutsocial/seeds-react-box\";\nimport { Text } from \"@sproutsocial/seeds-react-text\";\nimport { type TypeHeadingLevel } from \"./ContentHeaderTypes\";\n\ninterface TypeTitleAreaProps {\n  title: string;\n  subtitle?: string;\n  headingLevel?: TypeHeadingLevel;\n  subtitleAs?: \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"p\";\n  leftSlot?: React.ReactNode;\n  rightSlot?: React.ReactNode;\n}\n\nexport const TitleArea = ({\n  title,\n  subtitle,\n  headingLevel = \"h4\",\n  subtitleAs,\n  leftSlot,\n  rightSlot,\n}: TypeTitleAreaProps) => (\n  <Box display=\"flex\" alignItems=\"center\" flex={1} width=\"100%\" minWidth={0}>\n    {leftSlot}\n    <Box flex={1}>\n      <Text.Headline as={headingLevel}>{title}</Text.Headline>\n      {subtitle && (\n        <Text.Byline as={subtitleAs} fontWeight=\"normal\">\n          {subtitle}\n        </Text.Byline>\n      )}\n    </Box>\n    {rightSlot}\n  </Box>\n);\n","import React from \"react\";\nimport { Box } from \"@sproutsocial/seeds-react-box\";\nimport { Icon } from \"@sproutsocial/seeds-react-icon\";\nimport { type TypeCollapsibleContentHeaderProps } from \"./ContentHeaderTypes\";\nimport { HeaderContainer, TriggerButton } from \"./styles\";\nimport { TitleArea } from \"./TitleArea\";\n\nexport const CollapsibleContentHeader = ({\n  title,\n  subtitle,\n  headingLevel = \"h4\",\n  subtitleAs,\n  leftSlot,\n  rightSlot,\n  headerActions,\n  trigger: TriggerWrapper,\n  triggerPosition = \"right\",\n  triggerIcon,\n  bordered = true,\n}: TypeCollapsibleContentHeaderProps) => {\n  const defaultIcon = (\n    <Icon\n      name=\"chevron-down-outline\"\n      className=\"triggerIcon\"\n      aria-hidden=\"true\"\n    />\n  );\n\n  const resolvedIcon = triggerIcon !== undefined ? triggerIcon : defaultIcon;\n\n  return (\n    <HeaderContainer $bordered={bordered}>\n      <TriggerWrapper>\n        <TriggerButton type=\"button\">\n          {triggerPosition === \"left\" && <Box mr={300}>{resolvedIcon}</Box>}\n          <TitleArea\n            title={title}\n            subtitle={subtitle}\n            headingLevel={headingLevel}\n            subtitleAs={subtitleAs}\n            leftSlot={leftSlot}\n            rightSlot={rightSlot}\n          />\n          {triggerPosition === \"right\" && resolvedIcon}\n        </TriggerButton>\n      </TriggerWrapper>\n      {headerActions && <Box ml={300}>{headerActions}</Box>}\n    </HeaderContainer>\n  );\n};\n\nexport default CollapsibleContentHeader;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,IAAAA,gBAAkB;AAClB,IAAAC,0BAAoB;;;ACDpB,+BAAmB;AACnB,gCAAmC;AAE5B,IAAM,kBAAkB,yBAAAC,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAM3B,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,KAAK,QAAQ;AAAA,aACvC,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAAA,IAExC,CAAC,EAAE,UAAU,MAAM,aAAa,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQpC,IAAM,gBAAgB,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAoB9B,mCAAS;AAAA;AAAA;;;ACxCf,mBAAkB;AAClB,6BAAoB;AACpB,8BAAqB;AAsBjB;AAVG,IAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AACF,MACE,6CAAC,8BAAI,SAAQ,QAAO,YAAW,UAAS,MAAM,GAAG,OAAM,QAAO,UAAU,GACrE;AAAA;AAAA,EACD,6CAAC,8BAAI,MAAM,GACT;AAAA,gDAAC,6BAAK,UAAL,EAAc,IAAI,cAAe,iBAAM;AAAA,IACvC,YACC,4CAAC,6BAAK,QAAL,EAAY,IAAI,YAAY,YAAW,UACrC,oBACH;AAAA,KAEJ;AAAA,EACC;AAAA,GACH;;;AFhBE,IAAAC,sBAAA;AAXG,IAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AACb,MAA8B;AAC5B,SACE,8CAAC,mBAAgB,WAAW,UAC1B;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,IACC,iBAAiB,6CAAC,+BAAK,yBAAc;AAAA,KACxC;AAEJ;AAEA,IAAO,wBAAQ;;;AG/Bf,IAAAC,gBAAkB;AAClB,IAAAC,0BAAoB;AACpB,8BAAqB;AAmBjB,IAAAC,sBAAA;AAdG,IAAM,2BAA2B,CAAC;AAAA,EACvC;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,kBAAkB;AAAA,EAClB;AAAA,EACA,WAAW;AACb,MAAyC;AACvC,QAAM,cACJ;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAU;AAAA,MACV,eAAY;AAAA;AAAA,EACd;AAGF,QAAM,eAAe,gBAAgB,SAAY,cAAc;AAE/D,SACE,8CAAC,mBAAgB,WAAW,UAC1B;AAAA,iDAAC,kBACC,wDAAC,iBAAc,MAAK,UACjB;AAAA,0BAAoB,UAAU,6CAAC,+BAAI,IAAI,KAAM,wBAAa;AAAA,MAC3D;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA;AAAA,MACF;AAAA,MACC,oBAAoB,WAAW;AAAA,OAClC,GACF;AAAA,IACC,iBAAiB,6CAAC,+BAAI,IAAI,KAAM,yBAAc;AAAA,KACjD;AAEJ;AAEA,IAAO,mCAAQ;;;AJhDf,IAAO,gBAAQ;","names":["import_react","import_seeds_react_box","styled","import_jsx_runtime","import_react","import_seeds_react_box","import_jsx_runtime"]}

package/jest.config.js

@@ -0,0 +1,9 @@
+const baseConfig = require("@sproutsocial/seeds-testing");
+
+/** * @type {import('jest').Config} */
+const config = {
+  ...baseConfig,
+  displayName: "seeds-react-content-header",
+};
+
+module.exports = config;

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@sproutsocial/seeds-react-content-header",
+  "version": "0.2.1",
+  "description": "Seeds React ContentHeader",
+  "author": "Sprout Social, Inc.",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsup --dts",
+    "build:debug": "tsup --dts --metafile",
+    "dev": "tsup --watch --dts",
+    "clean": "rm -rf .turbo dist",
+    "clean:modules": "rm -rf node_modules",
+    "typecheck": "tsc --noEmit",
+    "test": "jest",
+    "test:watch": "jest --watch --coverage=false"
+  },
+  "dependencies": {
+    "@sproutsocial/seeds-react-box": "^1.1.14",
+    "@sproutsocial/seeds-react-icon": "^2.2.5",
+    "@sproutsocial/seeds-react-mixins": "^4.3.1",
+    "@sproutsocial/seeds-react-text": "^1.4.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/styled-components": "^5.1.26",
+    "@sproutsocial/eslint-config-seeds": "*",
+    "react": "^18.0.0",
+    "styled-components": "^5.2.3",
+    "tsup": "^8.3.4",
+    "typescript": "^5.6.2",
+    "@sproutsocial/seeds-tsconfig": "*",
+    "@sproutsocial/seeds-testing": "*",
+    "@sproutsocial/seeds-react-testing-library": "*",
+    "@sproutsocial/seeds-react-collapsible": "^2.0.0"
+  },
+  "peerDependencies": {
+    "styled-components": "^5.2.3"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}

package/src/CollapsibleContentHeader.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { Box } from "@sproutsocial/seeds-react-box";
+import { Icon } from "@sproutsocial/seeds-react-icon";
+import { type TypeCollapsibleContentHeaderProps } from "./ContentHeaderTypes";
+import { HeaderContainer, TriggerButton } from "./styles";
+import { TitleArea } from "./TitleArea";
+
+export const CollapsibleContentHeader = ({
+  title,
+  subtitle,
+  headingLevel = "h4",
+  subtitleAs,
+  leftSlot,
+  rightSlot,
+  headerActions,
+  trigger: TriggerWrapper,
+  triggerPosition = "right",
+  triggerIcon,
+  bordered = true,
+}: TypeCollapsibleContentHeaderProps) => {
+  const defaultIcon = (
+    <Icon
+      name="chevron-down-outline"
+      className="triggerIcon"
+      aria-hidden="true"
+    />
+  );
+
+  const resolvedIcon = triggerIcon !== undefined ? triggerIcon : defaultIcon;
+
+  return (
+    <HeaderContainer $bordered={bordered}>
+      <TriggerWrapper>
+        <TriggerButton type="button">
+          {triggerPosition === "left" && <Box mr={300}>{resolvedIcon}</Box>}
+          <TitleArea
+            title={title}
+            subtitle={subtitle}
+            headingLevel={headingLevel}
+            subtitleAs={subtitleAs}
+            leftSlot={leftSlot}
+            rightSlot={rightSlot}
+          />
+          {triggerPosition === "right" && resolvedIcon}
+        </TriggerButton>
+      </TriggerWrapper>
+      {headerActions && <Box ml={300}>{headerActions}</Box>}
+    </HeaderContainer>
+  );
+};
+
+export default CollapsibleContentHeader;

package/src/ContentHeader.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { Box } from "@sproutsocial/seeds-react-box";
+import { type TypeContentHeaderProps } from "./ContentHeaderTypes";
+import { HeaderContainer } from "./styles";
+import { TitleArea } from "./TitleArea";
+
+export const ContentHeader = ({
+  title,
+  subtitle,
+  headingLevel = "h4",
+  subtitleAs,
+  leftSlot,
+  rightSlot,
+  headerActions,
+  bordered = true,
+}: TypeContentHeaderProps) => {
+  return (
+    <HeaderContainer $bordered={bordered}>
+      <TitleArea
+        title={title}
+        subtitle={subtitle}
+        headingLevel={headingLevel}
+        subtitleAs={subtitleAs}
+        leftSlot={leftSlot}
+        rightSlot={rightSlot}
+      />
+      {headerActions && <Box>{headerActions}</Box>}
+    </HeaderContainer>
+  );
+};
+
+export default ContentHeader;

package/src/ContentHeaderTypes.ts

@@ -0,0 +1,32 @@
+import type React from "react";
+
+export type TypeHeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+
+export interface TypeContentHeaderProps {
+  /** The header title text */
+  title: string;
+  /** Optional subtitle text */
+  subtitle?: string;
+  /** Semantic heading level for the title. Defaults to "h4" */
+  headingLevel?: TypeHeadingLevel;
+  /** Semantic element for the subtitle */
+  subtitleAs?: "h2" | "h3" | "h4" | "h5" | "p";
+  /** Content rendered before the title */
+  leftSlot?: React.ReactNode;
+  /** Content rendered after the title */
+  rightSlot?: React.ReactNode;
+  /** Actions rendered to the right of the header */
+  headerActions?: React.ReactNode;
+  /** Adds a border-bottom divider. Defaults to true */
+  bordered?: boolean;
+}
+
+export interface TypeCollapsibleContentHeaderProps
+  extends TypeContentHeaderProps {
+  /** Trigger component to wrap the title area (e.g. Collapsible.Trigger) */
+  trigger: React.ComponentType<{ children: React.ReactElement }>;
+  /** Position of the collapse chevron icon. Defaults to "right" */
+  triggerPosition?: "left" | "right";
+  /** Custom trigger icon. Defaults to chevron-down-outline Icon */
+  triggerIcon?: React.ReactNode;
+}

package/src/TitleArea.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { Box } from "@sproutsocial/seeds-react-box";
+import { Text } from "@sproutsocial/seeds-react-text";
+import { type TypeHeadingLevel } from "./ContentHeaderTypes";
+
+interface TypeTitleAreaProps {
+  title: string;
+  subtitle?: string;
+  headingLevel?: TypeHeadingLevel;
+  subtitleAs?: "h2" | "h3" | "h4" | "h5" | "p";
+  leftSlot?: React.ReactNode;
+  rightSlot?: React.ReactNode;
+}
+
+export const TitleArea = ({
+  title,
+  subtitle,
+  headingLevel = "h4",
+  subtitleAs,
+  leftSlot,
+  rightSlot,
+}: TypeTitleAreaProps) => (
+  <Box display="flex" alignItems="center" flex={1} width="100%" minWidth={0}>
+    {leftSlot}
+    <Box flex={1}>
+      <Text.Headline as={headingLevel}>{title}</Text.Headline>
+      {subtitle && (
+        <Text.Byline as={subtitleAs} fontWeight="normal">
+          {subtitle}
+        </Text.Byline>
+      )}
+    </Box>
+    {rightSlot}
+  </Box>
+);

package/src/__tests__/content-header.test.tsx

@@ -0,0 +1,181 @@
+import React from "react";
+import {
+  render,
+  screen,
+  fireEvent,
+} from "@sproutsocial/seeds-react-testing-library";
+import { Collapsible } from "@sproutsocial/seeds-react-collapsible";
+import { ContentHeader } from "../ContentHeader";
+import { CollapsibleContentHeader } from "../CollapsibleContentHeader";
+
+describe("ContentHeader", () => {
+  test("renders title", () => {
+    render(<ContentHeader title="Test Title" />);
+    expect(screen.getByText("Test Title")).toBeInTheDocument();
+  });
+
+  test("renders title with correct heading level", () => {
+    render(<ContentHeader title="Test Title" headingLevel="h2" />);
+    const title = screen.getByText("Test Title");
+    expect(title.tagName).toBe("H2");
+  });
+
+  test("defaults heading level to h4", () => {
+    render(<ContentHeader title="Test Title" />);
+    const title = screen.getByText("Test Title");
+    expect(title.tagName).toBe("H4");
+  });
+
+  test("renders subtitle when provided", () => {
+    render(<ContentHeader title="Title" subtitle="Subtitle" />);
+    expect(screen.getByText("Subtitle")).toBeInTheDocument();
+  });
+
+  test("does not render subtitle when not provided", () => {
+    render(<ContentHeader title="Title" />);
+    expect(screen.queryByText("Subtitle")).not.toBeInTheDocument();
+  });
+
+  test("renders headerActions", () => {
+    render(
+      <ContentHeader title="Title" headerActions={<button>Action</button>} />
+    );
+    expect(screen.getByText("Action")).toBeInTheDocument();
+  });
+
+  test("does not render trigger button", () => {
+    render(<ContentHeader title="Title" />);
+    expect(screen.queryByRole("button")).not.toBeInTheDocument();
+  });
+
+  test("renders leftSlot and rightSlot", () => {
+    render(
+      <ContentHeader
+        title="Title"
+        leftSlot={<span>Left</span>}
+        rightSlot={<span>Right</span>}
+      />
+    );
+
+    expect(screen.getByText("Left")).toBeInTheDocument();
+    expect(screen.getByText("Right")).toBeInTheDocument();
+  });
+});
+
+describe("CollapsibleContentHeader", () => {
+  test("renders trigger button", () => {
+    render(
+      <Collapsible isOpen={true} onOpenChange={() => {}}>
+        <CollapsibleContentHeader title="Title" trigger={Collapsible.Trigger} />
+        <Collapsible.Panel>Content</Collapsible.Panel>
+      </Collapsible>
+    );
+
+    const trigger = screen.getByRole("button");
+    expect(trigger).toBeInTheDocument();
+  });
+
+  test("headerActions do not toggle collapse", () => {
+    const onOpenChange = jest.fn();
+
+    render(
+      <Collapsible isOpen={true} onOpenChange={onOpenChange}>
+        <CollapsibleContentHeader
+          title="Title"
+          trigger={Collapsible.Trigger}
+          headerActions={<button>Action</button>}
+        />
+        <Collapsible.Panel>Content</Collapsible.Panel>
+      </Collapsible>
+    );
+
+    fireEvent.click(screen.getByText("Action"));
+    expect(onOpenChange).not.toHaveBeenCalled();
+  });
+
+  test("trigger click toggles collapse", () => {
+    const onOpenChange = jest.fn();
+
+    render(
+      <Collapsible isOpen={true} onOpenChange={onOpenChange}>
+        <CollapsibleContentHeader title="Title" trigger={Collapsible.Trigger} />
+        <Collapsible.Panel>Content</Collapsible.Panel>
+      </Collapsible>
+    );
+
+    const trigger = screen.getByRole("button");
+    fireEvent.click(trigger);
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+  });
+
+  test("renders title and subtitle", () => {
+    render(
+      <Collapsible isOpen={true} onOpenChange={() => {}}>
+        <CollapsibleContentHeader
+          title="Title"
+          subtitle="Subtitle"
+          trigger={Collapsible.Trigger}
+        />
+        <Collapsible.Panel>Content</Collapsible.Panel>
+      </Collapsible>
+    );
+
+    expect(screen.getByText("Title")).toBeInTheDocument();
+    expect(screen.getByText("Subtitle")).toBeInTheDocument();
+  });
+
+  test("renders leftSlot and rightSlot", () => {
+    render(
+      <Collapsible isOpen={true} onOpenChange={() => {}}>
+        <CollapsibleContentHeader
+          title="Title"
+          trigger={Collapsible.Trigger}
+          leftSlot={<span>Left</span>}
+          rightSlot={<span>Right</span>}
+        />
+        <Collapsible.Panel>Content</Collapsible.Panel>
+      </Collapsible>
+    );
+
+    expect(screen.getByText("Left")).toBeInTheDocument();
+    expect(screen.getByText("Right")).toBeInTheDocument();
+  });
+
+  test("renders custom triggerIcon", () => {
+    render(
+      <Collapsible isOpen={true} onOpenChange={() => {}}>
+        <CollapsibleContentHeader
+          title="Title"
+          trigger={Collapsible.Trigger}
+          triggerIcon={<span data-testid="custom-icon">▼</span>}
+        />
+        <Collapsible.Panel>Content</Collapsible.Panel>
+      </Collapsible>
+    );
+
+    expect(screen.getByTestId("custom-icon")).toBeInTheDocument();
+  });
+
+  test("renders trigger icon on the left when triggerPosition is left", () => {
+    render(
+      <Collapsible isOpen={true} onOpenChange={() => {}}>
+        <CollapsibleContentHeader
+          title="Title"
+          trigger={Collapsible.Trigger}
+          triggerPosition="left"
+        />
+        <Collapsible.Panel>Content</Collapsible.Panel>
+      </Collapsible>
+    );
+
+    const trigger = screen.getByRole("button");
+    const title = screen.getByText("Title");
+    // Icon should come before the title in the DOM
+    const iconElement = trigger.querySelector(".triggerIcon");
+    expect(iconElement).toBeInTheDocument();
+    expect(
+      title.compareDocumentPosition(iconElement as Node) &
+        Node.DOCUMENT_POSITION_PRECEDING
+    ).toBeTruthy();
+  });
+});

package/src/index.ts

@@ -0,0 +1,7 @@
+import ContentHeader from "./ContentHeader";
+import CollapsibleContentHeader from "./CollapsibleContentHeader";
+
+export default ContentHeader;
+export { ContentHeader };
+export { CollapsibleContentHeader };
+export * from "./ContentHeaderTypes";

package/src/styles.ts

@@ -0,0 +1,43 @@
+import styled from "styled-components";
+import { divider, focusRing } from "@sproutsocial/seeds-react-mixins";
+
+export const HeaderContainer = styled.div<{ $bordered?: boolean }>`
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  color: ${({ theme }) => theme.colors.text.headline};
+  padding: ${({ theme }) => theme.space[400]};
+
+  ${({ $bordered }) => $bordered && divider}
+
+  /* Hide divider when collapsible trigger is closed (no content below) */
+  &:has(button[data-state="closed"]) {
+    border-bottom-color: transparent;
+  }
+`;
+
+export const TriggerButton = styled.button`
+  all: unset;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex: 1;
+  width: 100%;
+  cursor: pointer;
+  min-width: 0;
+
+  .triggerIcon {
+    flex-shrink: 0;
+    transition: transform 300ms ease-in-out;
+  }
+
+  &[data-state="open"] .triggerIcon {
+    transform: rotate(-180deg);
+  }
+
+  &:focus-visible {
+    ${focusRing}
+  }
+`;

package/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "extends": "@sproutsocial/seeds-tsconfig/bundler/dom/library-monorepo",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "module": "esnext"
+  },
+  "include": ["src/**/*"],
+  "exclude": [
+    "node_modules",
+    "dist",
+    "coverage",
+    "**/*.stories.tsx",
+    "**/*.stories.ts"
+  ]
+}

package/tsup.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig((options) => ({
+  entry: ["src/index.ts"],
+  format: ["cjs", "esm"],
+  clean: true,
+  legacyOutput: true,
+  dts: options.dts,
+  external: ["react"],
+  sourcemap: true,
+  metafile: options.metafile,
+}));