@sproutsocial/seeds-react-fieldset 1.0.26 → 1.0.27

package/dist/esm/index.js

@@ -1,7 +1,7 @@
-// src/Fieldset.tsx
-import * as React from "react";
+// src/FieldsetHybrid.tsx
+import * as React2 from "react";
 import Box2 from "@sproutsocial/seeds-react-box";
-import Text from "@sproutsocial/seeds-react-text";
+import { hasStyledProps } from "@sproutsocial/seeds-react-system-props";
 
 // src/styles.ts
 import styled, { css } from "styled-components";
@@ -24,27 +24,13 @@ var ChildContainer = styled(Box)`
     `}
 `;
 
-// src/Fieldset.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var Fieldset = ({
-  layout = "vertical",
-  label,
-  helperText,
+// src/FieldsetParts.tsx
+import Text from "@sproutsocial/seeds-react-text";
+import { jsx } from "react/jsx-runtime";
+var FieldsetLegend = ({
   children,
   ...rest
-}) => /* @__PURE__ */ jsxs(Box2, { as: "fieldset", border: "none", p: 0, "data-qa-fieldset": "", ...rest, children: [
-  typeof label === "string" ? /* @__PURE__ */ jsx(Fieldset.Legend, { children: label }) : label,
-  typeof helperText === "string" ? /* @__PURE__ */ jsx(Fieldset.HelperText, { children: helperText }) : helperText,
-  /* @__PURE__ */ jsx(
-    Box2,
-    {
-      display: "flex",
-      flexDirection: layout === "vertical" ? "column" : "row",
-      children: React.Children.map(children, (child) => /* @__PURE__ */ jsx(ChildContainer, { layout, children: child }))
-    }
-  )
-] });
-var FieldsetLegend = ({ children, ...rest }) => /* @__PURE__ */ jsx(
+}) => /* @__PURE__ */ jsx(
   Text,
   {
     as: "legend",
@@ -56,11 +42,108 @@ var FieldsetLegend = ({ children, ...rest }) => /* @__PURE__ */ jsx(
     children
   }
 );
-var FieldsetHelperText = ({ children, ...rest }) => /* @__PURE__ */ jsx(Text, { as: "p", fontSize: 200, mb: 300, ...rest, children });
+var FieldsetHelperText = ({
+  children,
+  ...rest
+}) => /* @__PURE__ */ jsx(Text, { as: "p", fontSize: 200, mb: 300, ...rest, children });
 FieldsetLegend.displayName = "Fieldset.Legend";
 FieldsetHelperText.displayName = "Fieldset.HelperText";
-Fieldset.Legend = FieldsetLegend;
-Fieldset.HelperText = FieldsetHelperText;
+
+// src/FieldsetTailwind.tsx
+import * as React from "react";
+import { jsx as jsx2, 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 FieldsetTailwind = ({
+  layout = "vertical",
+  label,
+  helperText,
+  children,
+  className,
+  ...rest
+}) => {
+  const Root = "fieldset";
+  return /* @__PURE__ */ jsxs(
+    Root,
+    {
+      className: cn("seeds-fieldset", className),
+      "data-qa-fieldset": "",
+      ...rest,
+      children: [
+        typeof label === "string" ? /* @__PURE__ */ jsx2("legend", { className: "seeds-fieldset-legend", children: label }) : label,
+        typeof helperText === "string" ? /* @__PURE__ */ jsx2("p", { className: "seeds-fieldset-helper-text", children: helperText }) : helperText,
+        /* @__PURE__ */ jsx2("div", { className: cn("seeds-fieldset-list", `seeds-fieldset-list-${layout}`), children: React.Children.map(children, (child) => /* @__PURE__ */ jsx2(
+          "div",
+          {
+            className: cn(
+              "seeds-fieldset-item",
+              `seeds-fieldset-item-${layout}`
+            ),
+            children: child
+          }
+        )) })
+      ]
+    }
+  );
+};
+FieldsetTailwind.displayName = "FieldsetTailwind";
+
+// src/FieldsetHybrid.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var FieldsetHybrid = ({
+  layout = "vertical",
+  label,
+  helperText,
+  children,
+  ...rest
+}) => {
+  if (hasStyledProps(rest)) {
+    return /* @__PURE__ */ jsxs2(Box2, { as: "fieldset", border: "none", p: 0, "data-qa-fieldset": "", ...rest, children: [
+      typeof label === "string" ? /* @__PURE__ */ jsx3(FieldsetLegend, { children: label }) : label,
+      typeof helperText === "string" ? /* @__PURE__ */ jsx3(FieldsetHelperText, { children: helperText }) : helperText,
+      /* @__PURE__ */ jsx3(
+        Box2,
+        {
+          display: "flex",
+          flexDirection: layout === "vertical" ? "column" : "row",
+          children: React2.Children.map(children, (child) => /* @__PURE__ */ jsx3(ChildContainer, { layout, children: child }))
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsx3(
+    FieldsetTailwind,
+    {
+      layout,
+      label,
+      helperText,
+      ...rest,
+      children
+    }
+  );
+};
+FieldsetHybrid.displayName = "Fieldset";
+var FieldsetHybrid_default = FieldsetHybrid;
+
+// src/Fieldset.tsx
+var Fieldset = Object.assign(FieldsetHybrid_default, {
+  Legend: FieldsetLegend,
+  HelperText: FieldsetHelperText
+});
 var Fieldset_default = Fieldset;
 
 // src/FieldsetTypes.ts

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Fieldset.tsx","../../src/styles.ts","../../src/FieldsetTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport { ChildContainer } from \"./styles\";\nimport type {\n  TypeFieldsetProps,\n  TypeFieldsetLegendProps,\n  TypeFieldsetHelperText,\n} from \"./FieldsetTypes\";\n\n/**\n * Fieldset Component\n */\nconst Fieldset = ({\n  layout = \"vertical\",\n  label,\n  helperText,\n  children,\n  ...rest\n}: TypeFieldsetProps) => (\n  <Box as=\"fieldset\" border=\"none\" p={0} data-qa-fieldset=\"\" {...rest}>\n    {typeof label === \"string\" ? (\n      <Fieldset.Legend>{label}</Fieldset.Legend>\n    ) : (\n      label\n    )}\n    {typeof helperText === \"string\" ? (\n      <Fieldset.HelperText>{helperText}</Fieldset.HelperText>\n    ) : (\n      helperText\n    )}\n    <Box\n      display=\"flex\"\n      flexDirection={layout === \"vertical\" ? \"column\" : \"row\"}\n    >\n      {React.Children.map(children, (child) => (\n        <ChildContainer layout={layout}>{child}</ChildContainer>\n      ))}\n    </Box>\n  </Box>\n);\n\nconst FieldsetLegend = ({ children, ...rest }: TypeFieldsetLegendProps) => (\n  <Text\n    as=\"legend\"\n    fontSize={300}\n    fontWeight=\"semibold\"\n    color=\"text.body\"\n    mb={300}\n    {...rest}\n  >\n    {children}\n  </Text>\n);\n\nconst FieldsetHelperText = ({ children, ...rest }: TypeFieldsetHelperText) => (\n  <Text as=\"p\" fontSize={200} mb={300} {...rest}>\n    {children}\n  </Text>\n);\n\nFieldsetLegend.displayName = \"Fieldset.Legend\";\nFieldsetHelperText.displayName = \"Fieldset.HelperText\";\n\nFieldset.Legend = FieldsetLegend;\nFieldset.HelperText = FieldsetHelperText;\n\nexport default Fieldset;\n","import styled, { css } from \"styled-components\";\nimport type { TypeFieldsetChildContainerProps } from \"./FieldsetTypes\";\nimport Box from \"@sproutsocial/seeds-react-box\";\n\nexport const ChildContainer = styled(Box)<TypeFieldsetChildContainerProps>`\n  ${(props) =>\n    props.layout === \"vertical\" &&\n    css`\n      margin-top: ${props.theme.space[300]};\n\n      &:first-child {\n        margin-top: 0;\n      }\n    `}\n\n  ${(props) =>\n    props.layout === \"horizontal\" &&\n    css`\n      margin-left: ${props.theme.space[300]};\n\n      &:first-child {\n        margin-left: 0;\n      }\n    `}\n`;\n","import type { TypeTextProps } from \"@sproutsocial/seeds-react-text\";\nimport React from \"react\";\nimport type { TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\n\nexport interface TypeFieldsetProps extends TypeBoxProps {\n  /** Label text to display above the fieldset */\n  label: React.ReactNode;\n  helperText?: React.ReactNode;\n  layout?: \"vertical\" | \"horizontal\";\n  children: React.ReactNode;\n}\n\nexport interface TypeFieldsetChildContainerProps {\n  layout: TypeFieldsetProps[\"layout\"];\n}\n\nexport interface TypeFieldsetLegendProps extends TypeTextProps {\n  children: React.ReactNode;\n}\n\nexport interface TypeFieldsetHelperText extends TypeTextProps {\n  children: React.ReactNode;\n}\n","import Fieldset from \"./Fieldset\";\n\nexport default Fieldset;\nexport { Fieldset };\nexport * from \"./FieldsetTypes\";\n"],"mappings":";AAAA,YAAY,WAAW;AACvB,OAAOA,UAAS;AAChB,OAAO,UAAU;;;ACFjB,OAAO,UAAU,WAAW;AAE5B,OAAO,SAAS;AAET,IAAM,iBAAiB,OAAO,GAAG;AAAA,IACpC,CAAC,UACD,MAAM,WAAW,cACjB;AAAA,oBACgB,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,KAKrC;AAAA;AAAA,IAED,CAAC,UACD,MAAM,WAAW,gBACjB;AAAA,qBACiB,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,KAKtC;AAAA;;;ADHH,SAEI,KAFJ;AAPF,IAAM,WAAW,CAAC;AAAA,EAChB,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACE,qBAACC,MAAA,EAAI,IAAG,YAAW,QAAO,QAAO,GAAG,GAAG,oBAAiB,IAAI,GAAG,MAC5D;AAAA,SAAO,UAAU,WAChB,oBAAC,SAAS,QAAT,EAAiB,iBAAM,IAExB;AAAA,EAED,OAAO,eAAe,WACrB,oBAAC,SAAS,YAAT,EAAqB,sBAAW,IAEjC;AAAA,EAEF;AAAA,IAACA;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,eAAe,WAAW,aAAa,WAAW;AAAA,MAEjD,UAAM,eAAS,IAAI,UAAU,CAAC,UAC7B,oBAAC,kBAAe,QAAiB,iBAAM,CACxC;AAAA;AAAA,EACH;AAAA,GACF;AAGF,IAAM,iBAAiB,CAAC,EAAE,UAAU,GAAG,KAAK,MAC1C;AAAA,EAAC;AAAA;AAAA,IACC,IAAG;AAAA,IACH,UAAU;AAAA,IACV,YAAW;AAAA,IACX,OAAM;AAAA,IACN,IAAI;AAAA,IACH,GAAG;AAAA,IAEH;AAAA;AACH;AAGF,IAAM,qBAAqB,CAAC,EAAE,UAAU,GAAG,KAAK,MAC9C,oBAAC,QAAK,IAAG,KAAI,UAAU,KAAK,IAAI,KAAM,GAAG,MACtC,UACH;AAGF,eAAe,cAAc;AAC7B,mBAAmB,cAAc;AAEjC,SAAS,SAAS;AAClB,SAAS,aAAa;AAEtB,IAAO,mBAAQ;;;AElEf,OAAkB;;;ACClB,IAAO,gBAAQ;","names":["Box","Box"]}
+{"version":3,"sources":["../../src/FieldsetHybrid.tsx","../../src/styles.ts","../../src/FieldsetParts.tsx","../../src/FieldsetTailwind.tsx","../../src/Fieldset.tsx","../../src/FieldsetTypes.ts","../../src/index.ts"],"sourcesContent":["/**\n * Hybrid Fieldset Component\n * Automatically chooses between Tailwind and styled-components based on props\n */\n\nimport * as React from \"react\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport { hasStyledProps } from \"@sproutsocial/seeds-react-system-props\";\nimport { ChildContainer } from \"./styles\"; // Styled-components version\nimport { FieldsetLegend, FieldsetHelperText } from \"./FieldsetParts\";\nimport { FieldsetTailwind } from \"./FieldsetTailwind\"; // Tailwind version\nimport type { TypeFieldsetProps } from \"./FieldsetTypes\";\n\nconst FieldsetHybrid = ({\n  layout = \"vertical\",\n  label,\n  helperText,\n  children,\n  ...rest\n}: TypeFieldsetProps) => {\n  if (hasStyledProps(rest)) {\n    // Legacy styled-components tree — identical to the pre-migration Fieldset body\n    return (\n      <Box as=\"fieldset\" border=\"none\" p={0} data-qa-fieldset=\"\" {...rest}>\n        {typeof label === \"string\" ? (\n          <FieldsetLegend>{label}</FieldsetLegend>\n        ) : (\n          label\n        )}\n        {typeof helperText === \"string\" ? (\n          <FieldsetHelperText>{helperText}</FieldsetHelperText>\n        ) : (\n          helperText\n        )}\n        <Box\n          display=\"flex\"\n          flexDirection={layout === \"vertical\" ? \"column\" : \"row\"}\n        >\n          {React.Children.map(children, (child) => (\n            <ChildContainer layout={layout}>{child}</ChildContainer>\n          ))}\n        </Box>\n      </Box>\n    );\n  }\n\n  // Use Tailwind version (preferred - better performance)\n  return (\n    <FieldsetTailwind\n      layout={layout}\n      label={label}\n      helperText={helperText}\n      {...rest}\n    >\n      {children}\n    </FieldsetTailwind>\n  );\n};\n\nFieldsetHybrid.displayName = \"Fieldset\";\nexport default FieldsetHybrid;\n","import styled, { css } from \"styled-components\";\nimport type { TypeFieldsetChildContainerProps } from \"./FieldsetTypes\";\nimport Box from \"@sproutsocial/seeds-react-box\";\n\nexport const ChildContainer = styled(Box)<TypeFieldsetChildContainerProps>`\n  ${(props) =>\n    props.layout === \"vertical\" &&\n    css`\n      margin-top: ${props.theme.space[300]};\n\n      &:first-child {\n        margin-top: 0;\n      }\n    `}\n\n  ${(props) =>\n    props.layout === \"horizontal\" &&\n    css`\n      margin-left: ${props.theme.space[300]};\n\n      &:first-child {\n        margin-left: 0;\n      }\n    `}\n`;\n","import Text from \"@sproutsocial/seeds-react-text\";\nimport type {\n  TypeFieldsetLegendProps,\n  TypeFieldsetHelperText,\n} from \"./FieldsetTypes\";\n\n/**\n * Text-based legend and helper-text parts for Fieldset.\n *\n * These remain styled-components (Text) because they are exposed as the public\n * Fieldset.Legend / Fieldset.HelperText statics and accept arbitrary\n * styled-system props. They are shared by both the styled-components branch of\n * FieldsetHybrid and the compound statics attached in Fieldset.tsx.\n */\nexport const FieldsetLegend = ({\n  children,\n  ...rest\n}: TypeFieldsetLegendProps) => (\n  <Text\n    as=\"legend\"\n    fontSize={300}\n    fontWeight=\"semibold\"\n    color=\"text.body\"\n    mb={300}\n    {...rest}\n  >\n    {children}\n  </Text>\n);\n\nexport const FieldsetHelperText = ({\n  children,\n  ...rest\n}: TypeFieldsetHelperText) => (\n  <Text as=\"p\" fontSize={200} mb={300} {...rest}>\n    {children}\n  </Text>\n);\n\nFieldsetLegend.displayName = \"Fieldset.Legend\";\nFieldsetHelperText.displayName = \"Fieldset.HelperText\";\n","/**\n * Tailwind CSS implementation of Fieldset component\n * Uses Seeds fieldset CSS classes from fieldset.css\n */\n\nimport * as React from \"react\";\nimport type { TypeFieldsetProps } from \"./FieldsetTypes\";\n\n// Utility for merging class names properly\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 const FieldsetTailwind = ({\n  layout = \"vertical\",\n  label,\n  helperText,\n  children,\n  className,\n  ...rest\n}: TypeFieldsetProps) => {\n  // Use a loosely-typed root so DOM attributes in `...rest` (e.g. aria-live) are\n  // forwarded without TypeScript flagging styled-system props carried by\n  // TypeBoxProps (e.g. `color`) that conflict with the intrinsic <fieldset> attrs.\n  // Mirrors ButtonTailwind, which spreads `...rest` onto an `as any` element.\n  const Root = \"fieldset\" as any;\n\n  return (\n    <Root\n      className={cn(\"seeds-fieldset\", className)}\n      data-qa-fieldset=\"\"\n      {...rest}\n    >\n      {typeof label === \"string\" ? (\n        <legend className=\"seeds-fieldset-legend\">{label}</legend>\n      ) : (\n        label\n      )}\n      {typeof helperText === \"string\" ? (\n        <p className=\"seeds-fieldset-helper-text\">{helperText}</p>\n      ) : (\n        helperText\n      )}\n      <div className={cn(\"seeds-fieldset-list\", `seeds-fieldset-list-${layout}`)}>\n        {React.Children.map(children, (child) => (\n          <div\n            className={cn(\n              \"seeds-fieldset-item\",\n              `seeds-fieldset-item-${layout}`\n            )}\n          >\n            {child}\n          </div>\n        ))}\n      </div>\n    </Root>\n  );\n};\n\nFieldsetTailwind.displayName = \"FieldsetTailwind\";\n","import FieldsetHybrid from \"./FieldsetHybrid\";\nimport { FieldsetLegend, FieldsetHelperText } from \"./FieldsetParts\";\n\n/**\n * Fieldset Component\n *\n * Thin assembly over the hybrid implementation: FieldsetHybrid routes to the\n * styled-components path when styled-system props are passed and to the Tailwind\n * path otherwise. The public Fieldset.Legend / Fieldset.HelperText statics remain\n * Text-based (see FieldsetParts) so they keep accepting styled-system props.\n */\nconst Fieldset = Object.assign(FieldsetHybrid, {\n  Legend: FieldsetLegend,\n  HelperText: FieldsetHelperText,\n});\n\nexport default Fieldset;\n","import type { TypeTextProps } from \"@sproutsocial/seeds-react-text\";\nimport React from \"react\";\nimport type { TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\n\nexport interface TypeFieldsetProps extends TypeBoxProps {\n  /** Label text to display above the fieldset */\n  label: React.ReactNode;\n  helperText?: React.ReactNode;\n  layout?: \"vertical\" | \"horizontal\";\n  children: React.ReactNode;\n}\n\nexport interface TypeFieldsetChildContainerProps {\n  layout: TypeFieldsetProps[\"layout\"];\n}\n\nexport interface TypeFieldsetLegendProps extends TypeTextProps {\n  children: React.ReactNode;\n}\n\nexport interface TypeFieldsetHelperText extends TypeTextProps {\n  children: React.ReactNode;\n}\n","import Fieldset from \"./Fieldset\";\n\nexport default Fieldset;\nexport { Fieldset };\nexport * from \"./FieldsetTypes\";\n"],"mappings":"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","names":["React","Box","jsx","jsx","jsxs","Box"]}

package/dist/fieldset.css

@@ -0,0 +1,78 @@
+/**
+ * Seeds Fieldset 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:
+ *   <fieldset class="seeds-fieldset">
+ *     <legend class="seeds-fieldset-legend">Label</legend>
+ *     <p class="seeds-fieldset-helper-text">Helper text</p>
+ *     <div class="seeds-fieldset-list seeds-fieldset-list-vertical">
+ *       <div class="seeds-fieldset-item seeds-fieldset-item-vertical">...</div>
+ *     </div>
+ *   </fieldset>
+ */
+
+@layer components {
+  .seeds-fieldset {
+    box-sizing: border-box;
+    font-family: var(--font-family);
+    border: none;
+    padding: 0;
+  }
+
+  .seeds-fieldset-legend {
+    margin: 0;
+    font-family: var(--font-family);
+    font-size: var(--font-size-300);
+    line-height: var(--line-height-300);
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-text-body);
+    margin-bottom: var(--space-300);
+  }
+
+  .seeds-fieldset-helper-text {
+    margin: 0;
+    font-family: var(--font-family);
+    font-size: var(--font-size-200);
+    line-height: var(--line-height-200);
+    margin-bottom: var(--space-300);
+  }
+
+  .seeds-fieldset-list {
+    box-sizing: border-box;
+    font-family: var(--font-family);
+    display: flex;
+  }
+
+  .seeds-fieldset-list-vertical {
+    flex-direction: column;
+  }
+
+  .seeds-fieldset-list-horizontal {
+    flex-direction: row;
+  }
+
+  .seeds-fieldset-item {
+    box-sizing: border-box;
+    font-family: var(--font-family);
+  }
+
+  .seeds-fieldset-item-vertical {
+    margin-top: var(--space-300);
+  }
+
+  .seeds-fieldset-item-vertical:first-child {
+    margin-top: 0;
+  }
+
+  .seeds-fieldset-item-horizontal {
+    margin-left: var(--space-300);
+  }
+
+  .seeds-fieldset-item-horizontal:first-child {
+    margin-left: 0;
+  }
+}

package/dist/index.d.mts

@@ -22,9 +22,16 @@ interface TypeFieldsetHelperText extends TypeTextProps {
 
 /**
  * Fieldset Component
+ *
+ * Thin assembly over the hybrid implementation: FieldsetHybrid routes to the
+ * styled-components path when styled-system props are passed and to the Tailwind
+ * path otherwise. The public Fieldset.Legend / Fieldset.HelperText statics remain
+ * Text-based (see FieldsetParts) so they keep accepting styled-system props.
  */
 declare const Fieldset: {
     ({ layout, label, helperText, children, ...rest }: TypeFieldsetProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+} & {
     Legend: {
         ({ children, ...rest }: TypeFieldsetLegendProps): react_jsx_runtime.JSX.Element;
         displayName: string;

package/dist/index.d.ts

@@ -22,9 +22,16 @@ interface TypeFieldsetHelperText extends TypeTextProps {
 
 /**
  * Fieldset Component
+ *
+ * Thin assembly over the hybrid implementation: FieldsetHybrid routes to the
+ * styled-components path when styled-system props are passed and to the Tailwind
+ * path otherwise. The public Fieldset.Legend / Fieldset.HelperText statics remain
+ * Text-based (see FieldsetParts) so they keep accepting styled-system props.
  */
 declare const Fieldset: {
     ({ layout, label, helperText, children, ...rest }: TypeFieldsetProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+} & {
     Legend: {
         ({ children, ...rest }: TypeFieldsetLegendProps): react_jsx_runtime.JSX.Element;
         displayName: string;

package/dist/index.js

@@ -35,10 +35,10 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/Fieldset.tsx
-var React = __toESM(require("react"));
+// src/FieldsetHybrid.tsx
+var React2 = __toESM(require("react"));
 var import_seeds_react_box2 = __toESM(require("@sproutsocial/seeds-react-box"));
-var import_seeds_react_text = __toESM(require("@sproutsocial/seeds-react-text"));
+var import_seeds_react_system_props = require("@sproutsocial/seeds-react-system-props");
 
 // src/styles.ts
 var import_styled_components = __toESM(require("styled-components"));
@@ -61,27 +61,13 @@ var ChildContainer = (0, import_styled_components.default)(import_seeds_react_bo
     `}
 `;
 
-// src/Fieldset.tsx
+// src/FieldsetParts.tsx
+var import_seeds_react_text = __toESM(require("@sproutsocial/seeds-react-text"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var Fieldset = ({
-  layout = "vertical",
-  label,
-  helperText,
+var FieldsetLegend = ({
   children,
   ...rest
-}) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_seeds_react_box2.default, { as: "fieldset", border: "none", p: 0, "data-qa-fieldset": "", ...rest, children: [
-  typeof label === "string" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Fieldset.Legend, { children: label }) : label,
-  typeof helperText === "string" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Fieldset.HelperText, { children: helperText }) : helperText,
-  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_seeds_react_box2.default,
-    {
-      display: "flex",
-      flexDirection: layout === "vertical" ? "column" : "row",
-      children: React.Children.map(children, (child) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChildContainer, { layout, children: child }))
-    }
-  )
-] });
-var FieldsetLegend = ({ children, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
   import_seeds_react_text.default,
   {
     as: "legend",
@@ -93,11 +79,108 @@ var FieldsetLegend = ({ children, ...rest }) => /* @__PURE__ */ (0, import_jsx_r
     children
   }
 );
-var FieldsetHelperText = ({ children, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_text.default, { as: "p", fontSize: 200, mb: 300, ...rest, children });
+var FieldsetHelperText = ({
+  children,
+  ...rest
+}) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_text.default, { as: "p", fontSize: 200, mb: 300, ...rest, children });
 FieldsetLegend.displayName = "Fieldset.Legend";
 FieldsetHelperText.displayName = "Fieldset.HelperText";
-Fieldset.Legend = FieldsetLegend;
-Fieldset.HelperText = FieldsetHelperText;
+
+// src/FieldsetTailwind.tsx
+var React = __toESM(require("react"));
+var import_jsx_runtime2 = require("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 FieldsetTailwind = ({
+  layout = "vertical",
+  label,
+  helperText,
+  children,
+  className,
+  ...rest
+}) => {
+  const Root = "fieldset";
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    Root,
+    {
+      className: cn("seeds-fieldset", className),
+      "data-qa-fieldset": "",
+      ...rest,
+      children: [
+        typeof label === "string" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("legend", { className: "seeds-fieldset-legend", children: label }) : label,
+        typeof helperText === "string" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "seeds-fieldset-helper-text", children: helperText }) : helperText,
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: cn("seeds-fieldset-list", `seeds-fieldset-list-${layout}`), children: React.Children.map(children, (child) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "div",
+          {
+            className: cn(
+              "seeds-fieldset-item",
+              `seeds-fieldset-item-${layout}`
+            ),
+            children: child
+          }
+        )) })
+      ]
+    }
+  );
+};
+FieldsetTailwind.displayName = "FieldsetTailwind";
+
+// src/FieldsetHybrid.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var FieldsetHybrid = ({
+  layout = "vertical",
+  label,
+  helperText,
+  children,
+  ...rest
+}) => {
+  if ((0, import_seeds_react_system_props.hasStyledProps)(rest)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_seeds_react_box2.default, { as: "fieldset", border: "none", p: 0, "data-qa-fieldset": "", ...rest, children: [
+      typeof label === "string" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FieldsetLegend, { children: label }) : label,
+      typeof helperText === "string" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FieldsetHelperText, { children: helperText }) : helperText,
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        import_seeds_react_box2.default,
+        {
+          display: "flex",
+          flexDirection: layout === "vertical" ? "column" : "row",
+          children: React2.Children.map(children, (child) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChildContainer, { layout, children: child }))
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    FieldsetTailwind,
+    {
+      layout,
+      label,
+      helperText,
+      ...rest,
+      children
+    }
+  );
+};
+FieldsetHybrid.displayName = "Fieldset";
+var FieldsetHybrid_default = FieldsetHybrid;
+
+// src/Fieldset.tsx
+var Fieldset = Object.assign(FieldsetHybrid_default, {
+  Legend: FieldsetLegend,
+  HelperText: FieldsetHelperText
+});
 var Fieldset_default = Fieldset;
 
 // src/FieldsetTypes.ts

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/Fieldset.tsx","../src/styles.ts","../src/FieldsetTypes.ts"],"sourcesContent":["import Fieldset from \"./Fieldset\";\n\nexport default Fieldset;\nexport { Fieldset };\nexport * from \"./FieldsetTypes\";\n","import * as React from \"react\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport { ChildContainer } from \"./styles\";\nimport type {\n  TypeFieldsetProps,\n  TypeFieldsetLegendProps,\n  TypeFieldsetHelperText,\n} from \"./FieldsetTypes\";\n\n/**\n * Fieldset Component\n */\nconst Fieldset = ({\n  layout = \"vertical\",\n  label,\n  helperText,\n  children,\n  ...rest\n}: TypeFieldsetProps) => (\n  <Box as=\"fieldset\" border=\"none\" p={0} data-qa-fieldset=\"\" {...rest}>\n    {typeof label === \"string\" ? (\n      <Fieldset.Legend>{label}</Fieldset.Legend>\n    ) : (\n      label\n    )}\n    {typeof helperText === \"string\" ? (\n      <Fieldset.HelperText>{helperText}</Fieldset.HelperText>\n    ) : (\n      helperText\n    )}\n    <Box\n      display=\"flex\"\n      flexDirection={layout === \"vertical\" ? \"column\" : \"row\"}\n    >\n      {React.Children.map(children, (child) => (\n        <ChildContainer layout={layout}>{child}</ChildContainer>\n      ))}\n    </Box>\n  </Box>\n);\n\nconst FieldsetLegend = ({ children, ...rest }: TypeFieldsetLegendProps) => (\n  <Text\n    as=\"legend\"\n    fontSize={300}\n    fontWeight=\"semibold\"\n    color=\"text.body\"\n    mb={300}\n    {...rest}\n  >\n    {children}\n  </Text>\n);\n\nconst FieldsetHelperText = ({ children, ...rest }: TypeFieldsetHelperText) => (\n  <Text as=\"p\" fontSize={200} mb={300} {...rest}>\n    {children}\n  </Text>\n);\n\nFieldsetLegend.displayName = \"Fieldset.Legend\";\nFieldsetHelperText.displayName = \"Fieldset.HelperText\";\n\nFieldset.Legend = FieldsetLegend;\nFieldset.HelperText = FieldsetHelperText;\n\nexport default Fieldset;\n","import styled, { css } from \"styled-components\";\nimport type { TypeFieldsetChildContainerProps } from \"./FieldsetTypes\";\nimport Box from \"@sproutsocial/seeds-react-box\";\n\nexport const ChildContainer = styled(Box)<TypeFieldsetChildContainerProps>`\n  ${(props) =>\n    props.layout === \"vertical\" &&\n    css`\n      margin-top: ${props.theme.space[300]};\n\n      &:first-child {\n        margin-top: 0;\n      }\n    `}\n\n  ${(props) =>\n    props.layout === \"horizontal\" &&\n    css`\n      margin-left: ${props.theme.space[300]};\n\n      &:first-child {\n        margin-left: 0;\n      }\n    `}\n`;\n","import type { TypeTextProps } from \"@sproutsocial/seeds-react-text\";\nimport React from \"react\";\nimport type { TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\n\nexport interface TypeFieldsetProps extends TypeBoxProps {\n  /** Label text to display above the fieldset */\n  label: React.ReactNode;\n  helperText?: React.ReactNode;\n  layout?: \"vertical\" | \"horizontal\";\n  children: React.ReactNode;\n}\n\nexport interface TypeFieldsetChildContainerProps {\n  layout: TypeFieldsetProps[\"layout\"];\n}\n\nexport interface TypeFieldsetLegendProps extends TypeTextProps {\n  children: React.ReactNode;\n}\n\nexport interface TypeFieldsetHelperText extends TypeTextProps {\n  children: React.ReactNode;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;AACvB,IAAAA,0BAAgB;AAChB,8BAAiB;;;ACFjB,+BAA4B;AAE5B,6BAAgB;AAET,IAAM,qBAAiB,yBAAAC,SAAO,uBAAAC,OAAG;AAAA,IACpC,CAAC,UACD,MAAM,WAAW,cACjB;AAAA,oBACgB,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,KAKrC;AAAA;AAAA,IAED,CAAC,UACD,MAAM,WAAW,gBACjB;AAAA,qBACiB,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,KAKtC;AAAA;;;ADHH;AAPF,IAAM,WAAW,CAAC;AAAA,EAChB,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACE,6CAAC,wBAAAC,SAAA,EAAI,IAAG,YAAW,QAAO,QAAO,GAAG,GAAG,oBAAiB,IAAI,GAAG,MAC5D;AAAA,SAAO,UAAU,WAChB,4CAAC,SAAS,QAAT,EAAiB,iBAAM,IAExB;AAAA,EAED,OAAO,eAAe,WACrB,4CAAC,SAAS,YAAT,EAAqB,sBAAW,IAEjC;AAAA,EAEF;AAAA,IAAC,wBAAAA;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,eAAe,WAAW,aAAa,WAAW;AAAA,MAEjD,UAAM,eAAS,IAAI,UAAU,CAAC,UAC7B,4CAAC,kBAAe,QAAiB,iBAAM,CACxC;AAAA;AAAA,EACH;AAAA,GACF;AAGF,IAAM,iBAAiB,CAAC,EAAE,UAAU,GAAG,KAAK,MAC1C;AAAA,EAAC,wBAAAC;AAAA,EAAA;AAAA,IACC,IAAG;AAAA,IACH,UAAU;AAAA,IACV,YAAW;AAAA,IACX,OAAM;AAAA,IACN,IAAI;AAAA,IACH,GAAG;AAAA,IAEH;AAAA;AACH;AAGF,IAAM,qBAAqB,CAAC,EAAE,UAAU,GAAG,KAAK,MAC9C,4CAAC,wBAAAA,SAAA,EAAK,IAAG,KAAI,UAAU,KAAK,IAAI,KAAM,GAAG,MACtC,UACH;AAGF,eAAe,cAAc;AAC7B,mBAAmB,cAAc;AAEjC,SAAS,SAAS;AAClB,SAAS,aAAa;AAEtB,IAAO,mBAAQ;;;AElEf,mBAAkB;;;AHClB,IAAO,gBAAQ;","names":["import_seeds_react_box","styled","Box","Box","Text"]}
+{"version":3,"sources":["../src/index.ts","../src/FieldsetHybrid.tsx","../src/styles.ts","../src/FieldsetParts.tsx","../src/FieldsetTailwind.tsx","../src/Fieldset.tsx","../src/FieldsetTypes.ts"],"sourcesContent":["import Fieldset from \"./Fieldset\";\n\nexport default Fieldset;\nexport { Fieldset };\nexport * from \"./FieldsetTypes\";\n","/**\n * Hybrid Fieldset Component\n * Automatically chooses between Tailwind and styled-components based on props\n */\n\nimport * as React from \"react\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport { hasStyledProps } from \"@sproutsocial/seeds-react-system-props\";\nimport { ChildContainer } from \"./styles\"; // Styled-components version\nimport { FieldsetLegend, FieldsetHelperText } from \"./FieldsetParts\";\nimport { FieldsetTailwind } from \"./FieldsetTailwind\"; // Tailwind version\nimport type { TypeFieldsetProps } from \"./FieldsetTypes\";\n\nconst FieldsetHybrid = ({\n  layout = \"vertical\",\n  label,\n  helperText,\n  children,\n  ...rest\n}: TypeFieldsetProps) => {\n  if (hasStyledProps(rest)) {\n    // Legacy styled-components tree — identical to the pre-migration Fieldset body\n    return (\n      <Box as=\"fieldset\" border=\"none\" p={0} data-qa-fieldset=\"\" {...rest}>\n        {typeof label === \"string\" ? (\n          <FieldsetLegend>{label}</FieldsetLegend>\n        ) : (\n          label\n        )}\n        {typeof helperText === \"string\" ? (\n          <FieldsetHelperText>{helperText}</FieldsetHelperText>\n        ) : (\n          helperText\n        )}\n        <Box\n          display=\"flex\"\n          flexDirection={layout === \"vertical\" ? \"column\" : \"row\"}\n        >\n          {React.Children.map(children, (child) => (\n            <ChildContainer layout={layout}>{child}</ChildContainer>\n          ))}\n        </Box>\n      </Box>\n    );\n  }\n\n  // Use Tailwind version (preferred - better performance)\n  return (\n    <FieldsetTailwind\n      layout={layout}\n      label={label}\n      helperText={helperText}\n      {...rest}\n    >\n      {children}\n    </FieldsetTailwind>\n  );\n};\n\nFieldsetHybrid.displayName = \"Fieldset\";\nexport default FieldsetHybrid;\n","import styled, { css } from \"styled-components\";\nimport type { TypeFieldsetChildContainerProps } from \"./FieldsetTypes\";\nimport Box from \"@sproutsocial/seeds-react-box\";\n\nexport const ChildContainer = styled(Box)<TypeFieldsetChildContainerProps>`\n  ${(props) =>\n    props.layout === \"vertical\" &&\n    css`\n      margin-top: ${props.theme.space[300]};\n\n      &:first-child {\n        margin-top: 0;\n      }\n    `}\n\n  ${(props) =>\n    props.layout === \"horizontal\" &&\n    css`\n      margin-left: ${props.theme.space[300]};\n\n      &:first-child {\n        margin-left: 0;\n      }\n    `}\n`;\n","import Text from \"@sproutsocial/seeds-react-text\";\nimport type {\n  TypeFieldsetLegendProps,\n  TypeFieldsetHelperText,\n} from \"./FieldsetTypes\";\n\n/**\n * Text-based legend and helper-text parts for Fieldset.\n *\n * These remain styled-components (Text) because they are exposed as the public\n * Fieldset.Legend / Fieldset.HelperText statics and accept arbitrary\n * styled-system props. They are shared by both the styled-components branch of\n * FieldsetHybrid and the compound statics attached in Fieldset.tsx.\n */\nexport const FieldsetLegend = ({\n  children,\n  ...rest\n}: TypeFieldsetLegendProps) => (\n  <Text\n    as=\"legend\"\n    fontSize={300}\n    fontWeight=\"semibold\"\n    color=\"text.body\"\n    mb={300}\n    {...rest}\n  >\n    {children}\n  </Text>\n);\n\nexport const FieldsetHelperText = ({\n  children,\n  ...rest\n}: TypeFieldsetHelperText) => (\n  <Text as=\"p\" fontSize={200} mb={300} {...rest}>\n    {children}\n  </Text>\n);\n\nFieldsetLegend.displayName = \"Fieldset.Legend\";\nFieldsetHelperText.displayName = \"Fieldset.HelperText\";\n","/**\n * Tailwind CSS implementation of Fieldset component\n * Uses Seeds fieldset CSS classes from fieldset.css\n */\n\nimport * as React from \"react\";\nimport type { TypeFieldsetProps } from \"./FieldsetTypes\";\n\n// Utility for merging class names properly\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 const FieldsetTailwind = ({\n  layout = \"vertical\",\n  label,\n  helperText,\n  children,\n  className,\n  ...rest\n}: TypeFieldsetProps) => {\n  // Use a loosely-typed root so DOM attributes in `...rest` (e.g. aria-live) are\n  // forwarded without TypeScript flagging styled-system props carried by\n  // TypeBoxProps (e.g. `color`) that conflict with the intrinsic <fieldset> attrs.\n  // Mirrors ButtonTailwind, which spreads `...rest` onto an `as any` element.\n  const Root = \"fieldset\" as any;\n\n  return (\n    <Root\n      className={cn(\"seeds-fieldset\", className)}\n      data-qa-fieldset=\"\"\n      {...rest}\n    >\n      {typeof label === \"string\" ? (\n        <legend className=\"seeds-fieldset-legend\">{label}</legend>\n      ) : (\n        label\n      )}\n      {typeof helperText === \"string\" ? (\n        <p className=\"seeds-fieldset-helper-text\">{helperText}</p>\n      ) : (\n        helperText\n      )}\n      <div className={cn(\"seeds-fieldset-list\", `seeds-fieldset-list-${layout}`)}>\n        {React.Children.map(children, (child) => (\n          <div\n            className={cn(\n              \"seeds-fieldset-item\",\n              `seeds-fieldset-item-${layout}`\n            )}\n          >\n            {child}\n          </div>\n        ))}\n      </div>\n    </Root>\n  );\n};\n\nFieldsetTailwind.displayName = \"FieldsetTailwind\";\n","import FieldsetHybrid from \"./FieldsetHybrid\";\nimport { FieldsetLegend, FieldsetHelperText } from \"./FieldsetParts\";\n\n/**\n * Fieldset Component\n *\n * Thin assembly over the hybrid implementation: FieldsetHybrid routes to the\n * styled-components path when styled-system props are passed and to the Tailwind\n * path otherwise. The public Fieldset.Legend / Fieldset.HelperText statics remain\n * Text-based (see FieldsetParts) so they keep accepting styled-system props.\n */\nconst Fieldset = Object.assign(FieldsetHybrid, {\n  Legend: FieldsetLegend,\n  HelperText: FieldsetHelperText,\n});\n\nexport default Fieldset;\n","import type { TypeTextProps } from \"@sproutsocial/seeds-react-text\";\nimport React from \"react\";\nimport type { TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\n\nexport interface TypeFieldsetProps extends TypeBoxProps {\n  /** Label text to display above the fieldset */\n  label: React.ReactNode;\n  helperText?: React.ReactNode;\n  layout?: \"vertical\" | \"horizontal\";\n  children: React.ReactNode;\n}\n\nexport interface TypeFieldsetChildContainerProps {\n  layout: TypeFieldsetProps[\"layout\"];\n}\n\nexport interface TypeFieldsetLegendProps extends TypeTextProps {\n  children: React.ReactNode;\n}\n\nexport interface TypeFieldsetHelperText extends TypeTextProps {\n  children: React.ReactNode;\n}\n"],"mappings":"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","names":["React","import_seeds_react_box","styled","Box","Text","import_jsx_runtime","import_jsx_runtime","Box"]}

package/package.json

@@ -1,15 +1,26 @@
 {
   "name": "@sproutsocial/seeds-react-fieldset",
-  "version": "1.0.26",
+  "version": "1.0.27",
   "description": "Seeds React Fieldset",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./dist/fieldset.css": "./dist/fieldset.css"
+  },
   "scripts": {
-    "build": "tsup --dts",
-    "build:debug": "tsup --dts --metafile",
+    "build": "tsup --dts && cp src/fieldset.css dist/fieldset.css",
+    "build:debug": "tsup --dts --metafile && cp src/fieldset.css dist/fieldset.css",
     "dev": "tsup --watch --dts",
     "clean": "rm -rf .turbo dist",
     "clean:modules": "rm -rf node_modules",
@@ -34,7 +45,7 @@
     "@sproutsocial/seeds-tsconfig": "*",
     "@sproutsocial/seeds-testing": "*",
     "@sproutsocial/seeds-react-testing-library": "*",
-    "@sproutsocial/seeds-react-radio": "^1.3.26"
+    "@sproutsocial/seeds-react-radio": "^1.3.27"
   },
   "peerDependencies": {
     "styled-components": "^5.2.3"

package/.eslintignore

@@ -1,6 +0,0 @@
-# Node modules
-node_modules/
-
-# Build output
-dist/
-coverage/

package/.eslintrc.js

@@ -1,4 +0,0 @@
-module.exports = {
-  root: true,
-  extends: ["eslint-config-seeds/racine"],
-};

package/.turbo/turbo-build.log

@@ -1,21 +0,0 @@
-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-fieldset/tsup.config.ts
-CLI Target: es2022
-CLI Cleaning output folder
-CJS Build start
-ESM Build start
-CJS dist/index.js     4.18 KB
-CJS dist/index.js.map 4.56 KB
-CJS ⚡️ Build success in 18ms
-ESM dist/esm/index.js     2.09 KB
-ESM dist/esm/index.js.map 4.45 KB
-ESM ⚡️ Build success in 18ms
-DTS Build start
-DTS ⚡️ Build success in 1769ms
-DTS dist/index.d.ts  1.30 KB
-DTS dist/index.d.mts 1.30 KB
-Done in 2.54s.

package/CHANGELOG.md

@@ -1,221 +0,0 @@
-# @sproutsocial/seeds-react-fieldset
-
-## 1.0.26
-
-### Patch Changes
-
-- Updated dependencies [6611f6a]
-  - @sproutsocial/seeds-react-system-props@3.1.2
-  - @sproutsocial/seeds-react-box@1.1.24
-  - @sproutsocial/seeds-react-text@1.5.1
-
-## 1.0.25
-
-### Patch Changes
-
-- Updated dependencies [85f9728]
-- Updated dependencies [fa7d859]
-  - @sproutsocial/seeds-react-theme@4.2.0
-  - @sproutsocial/seeds-react-box@1.1.23
-
-## 1.0.24
-
-### Patch Changes
-
-- Updated dependencies [65b5879]
-  - @sproutsocial/seeds-react-text@1.5.0
-
-## 1.0.23
-
-### Patch Changes
-
-- Updated dependencies [a13a571]
-  - @sproutsocial/seeds-react-theme@4.1.1
-  - @sproutsocial/seeds-react-box@1.1.22
-
-## 1.0.22
-
-### Patch Changes
-
-- Updated dependencies [edc1819]
-  - @sproutsocial/seeds-react-text@1.4.3
-
-## 1.0.21
-
-### Patch Changes
-
-- Updated dependencies [5892f44]
-  - @sproutsocial/seeds-react-system-props@3.1.1
-  - @sproutsocial/seeds-react-box@1.1.21
-  - @sproutsocial/seeds-react-text@1.4.2
-
-## 1.0.20
-
-### Patch Changes
-
-- Updated dependencies [5114a32]
-  - @sproutsocial/seeds-react-theme@4.1.0
-  - @sproutsocial/seeds-react-box@1.1.20
-
-## 1.0.19
-
-### Patch Changes
-
-- Updated dependencies [132ef9d]
-- Updated dependencies [132ef9d]
-  - @sproutsocial/seeds-react-theme@4.0.0
-  - @sproutsocial/seeds-react-system-props@3.1.0
-  - @sproutsocial/seeds-react-box@1.1.19
-  - @sproutsocial/seeds-react-text@1.4.1
-
-## 1.0.18
-
-### Patch Changes
-
-- Updated dependencies [47c62b3]
-  - @sproutsocial/seeds-react-theme@3.7.1
-  - @sproutsocial/seeds-react-box@1.1.18
-
-## 1.0.17
-
-### Patch Changes
-
-- Updated dependencies [06da9c2]
-  - @sproutsocial/seeds-react-theme@3.7.0
-  - @sproutsocial/seeds-react-box@1.1.17
-
-## 1.0.16
-
-### Patch Changes
-
-- Updated dependencies [4ba8720]
-  - @sproutsocial/seeds-react-theme@3.6.2
-  - @sproutsocial/seeds-react-box@1.1.16
-
-## 1.0.15
-
-### Patch Changes
-
-- Updated dependencies [1f9a473]
-  - @sproutsocial/seeds-react-theme@3.6.1
-  - @sproutsocial/seeds-react-box@1.1.15
-
-## 1.0.14
-
-### Patch Changes
-
-- Updated dependencies [17d4f12]
-  - @sproutsocial/seeds-react-theme@3.6.0
-  - @sproutsocial/seeds-react-box@1.1.14
-
-## 1.0.13
-
-### Patch Changes
-
-- Updated dependencies [118e300]
-  - @sproutsocial/seeds-react-theme@3.5.1
-  - @sproutsocial/seeds-react-box@1.1.13
-
-## 1.0.12
-
-### Patch Changes
-
-- Updated dependencies [db6ce39]
-- Updated dependencies [20bb01b]
-  - @sproutsocial/seeds-react-theme@3.5.0
-  - @sproutsocial/seeds-react-box@1.1.12
-
-## 1.0.11
-
-### Patch Changes
-
-- Updated dependencies [29ced53]
-  - @sproutsocial/seeds-react-text@1.4.0
-
-## 1.0.10
-
-### Patch Changes
-
-- Updated dependencies [7716e16]
-  - @sproutsocial/seeds-react-theme@3.4.0
-  - @sproutsocial/seeds-react-box@1.1.11
-
-## 1.0.9
-
-### Patch Changes
-
-- @sproutsocial/seeds-react-theme@3.3.2
-- @sproutsocial/seeds-react-box@1.1.10
-
-## 1.0.8
-
-### Patch Changes
-
-- @sproutsocial/seeds-react-theme@3.3.1
-- @sproutsocial/seeds-react-box@1.1.9
-
-## 1.0.7
-
-### Patch Changes
-
-- Updated dependencies [750d1ea]
-  - @sproutsocial/seeds-react-theme@3.3.0
-  - @sproutsocial/seeds-react-box@1.1.8
-
-## 1.0.6
-
-### Patch Changes
-
-- Updated dependencies [fa7579a]
-  - @sproutsocial/seeds-react-theme@3.2.1
-  - @sproutsocial/seeds-react-box@1.1.7
-
-## 1.0.5
-
-### Patch Changes
-
-- Updated dependencies [8f6ba8d]
-  - @sproutsocial/seeds-react-theme@3.2.0
-  - @sproutsocial/seeds-react-box@1.1.6
-
-## 1.0.4
-
-### Patch Changes
-
-- Updated dependencies [b1c3b44]
-  - @sproutsocial/seeds-react-theme@3.1.1
-  - @sproutsocial/seeds-react-box@1.1.5
-
-## 1.0.3
-
-### Patch Changes
-
-- Updated dependencies [47580c4]
-  - @sproutsocial/seeds-react-theme@3.1.0
-  - @sproutsocial/seeds-react-box@1.1.4
-
-## 1.0.2
-
-### Patch Changes
-
-- Updated dependencies [22e1111]
-  - @sproutsocial/seeds-react-text@1.3.2
-  - @sproutsocial/seeds-react-theme@3.0.1
-  - @sproutsocial/seeds-react-box@1.1.3
-
-## 1.0.1
-
-### Patch Changes
-
-- 9fd8bac: Update dependencies to use semantic package version instead of wildcards
-- Updated dependencies [9fd8bac]
-  - @sproutsocial/seeds-react-system-props@3.0.2
-  - @sproutsocial/seeds-react-theme@2.2.1
-  - @sproutsocial/seeds-react-text@1.3.1
-  - @sproutsocial/seeds-react-box@1.1.2
-
-## 1.0.0
-
-### Major Changes
-
-- 8ca97dd: Migrated FormField, Fieldset, and Label to their own seeds-react component

package/jest.config.js

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

package/src/Fieldset.stories.tsx

@@ -1,222 +0,0 @@
-import React, { useState } from "react";
-import { Box } from "@sproutsocial/seeds-react-box";
-import { Button } from "@sproutsocial/seeds-react-button";
-import { FormField } from "@sproutsocial/seeds-react-form-field";
-import { Input } from "@sproutsocial/seeds-react-input";
-import { Radio } from "@sproutsocial/seeds-react-radio";
-import { Text } from "@sproutsocial/seeds-react-text";
-import Fieldset from "./Fieldset";
-
-export default {
-  title: "Components/Form Elements/Fieldset",
-  component: Fieldset,
-};
-
-export const RadioGroup = () => {
-  const values = ["Chicago", "Seattle", "Dublin"];
-  const [selectedValue, setSelectedValue] = useState(values[0]);
-  const isChecked = (value: string | undefined) => value === selectedValue;
-  // @ts-ignore - idk what to type this event as
-  const _handleChange = (e) => {
-    e.target as HTMLInputElement;
-    setSelectedValue(e.target.value);
-  };
-
-  return (
-    <Box width="443px">
-      <Fieldset label="Select a location">
-        {values.map((value) => (
-          <Radio
-            id={value}
-            value={value}
-            name="location"
-            label={value}
-            checked={isChecked(value)}
-            onChange={_handleChange}
-          />
-        ))}
-      </Fieldset>
-    </Box>
-  );
-};
-
-RadioGroup.story = {
-  name: "Radio group",
-};
-
-export const inputs = () => (
-  <Box width="443px">
-    <Fieldset
-      label={
-        <Text fontSize={400} color="text.headline">
-          Your Name
-        </Text>
-      }
-    >
-      <FormField label="First Name">
-        {(props) => <Input {...props} name="first-name" />}
-      </FormField>
-      <FormField label="Last Name">
-        {(props) => <Input {...props} name="last-name" />}
-      </FormField>
-    </Fieldset>
-  </Box>
-);
-
-inputs.story = {
-  name: "Inputs",
-};
-
-export const HorizontalRadios = () => {
-  const values = ["Chicago", "Seattle", "Dublin"];
-  const [selectedValue, setSelectedValue] = useState(values[0]);
-  const isChecked = (value: string | undefined) => value === selectedValue;
-  // @ts-ignore - idk what to type this event as
-  const _handleChange = (e) => {
-    e.target as HTMLInputElement;
-    setSelectedValue(e.target.value);
-  };
-
-  return (
-    <Box width="443px">
-      <Fieldset label="Select a location" layout="horizontal">
-        {values.map((value) => (
-          <Radio
-            id={value}
-            value={value}
-            name="location"
-            label={value}
-            checked={isChecked(value)}
-            onChange={_handleChange}
-          />
-        ))}
-      </Fieldset>
-    </Box>
-  );
-};
-
-HorizontalRadios.story = {
-  name: "Horizontal Radios",
-};
-
-export const horizontalInputs = () => (
-  <Box width="443px">
-    <Fieldset label="Your Name" layout="horizontal">
-      <FormField label="First Name">
-        {(props) => <Input {...props} name="first-name" />}
-      </FormField>
-      <FormField label="Last Name">
-        {(props) => <Input {...props} name="last-name" />}
-      </FormField>
-    </Fieldset>
-  </Box>
-);
-
-horizontalInputs.story = {
-  name: "Horizontal Inputs",
-};
-
-export const ValidateInput = () => {
-  const [firstNameValue, setFirstNameValue] = useState("");
-  const [lastNameValue, setLastNameValue] = useState("");
-  const [validation, setValidation] = useState({
-    firstName: false,
-    lastName: false,
-  });
-
-  const firstNameValidation = firstNameValue === "Justyn" ? false : true;
-  const lastNameValidation = lastNameValue === "Howard" ? false : true;
-
-  const validate = () => {
-    setValidation({
-      firstName: firstNameValidation,
-      lastName: lastNameValidation,
-    });
-  };
-
-  // @ts-ignore - idk what to type this event as
-  const handleFirstNameOnChange = ({ target }) => {
-    if (firstNameValue.length > 0 && validation.firstName) {
-      setValidation({
-        firstName: false,
-        lastName: lastNameValidation,
-      });
-    }
-    setFirstNameValue(target.value);
-  };
-
-  // @ts-ignore - idk what to type this event as
-  const handleLastNameOnChange = ({ target }) => {
-    if (lastNameValue.length > 0 && validation.lastName) {
-      setValidation({
-        firstName: firstNameValidation,
-        lastName: false,
-      });
-    }
-    setLastNameValue(target.value);
-  };
-
-  return (
-    <Box width="443px">
-      <Fieldset label="Your Name" aria-live="polite">
-        <FormField
-          label="First Name"
-          isInvalid={validation.firstName}
-          error='First name must be "Justyn" to continue'
-        >
-          {(props) => (
-            <Input
-              {...props}
-              value={firstNameValue}
-              onChange={(e) => handleFirstNameOnChange(e)}
-              name="first-name"
-            />
-          )}
-        </FormField>
-        <FormField
-          label="Last Name"
-          isInvalid={validation.lastName}
-          error='Last name must be "Howard" to continue'
-        >
-          {(props) => (
-            <Input
-              {...props}
-              value={lastNameValue}
-              onChange={(e) => handleLastNameOnChange(e)}
-              name="last-name"
-            />
-          )}
-        </FormField>
-        <Button type="submit" appearance="primary" onClick={validate}>
-          Submit
-        </Button>
-      </Fieldset>
-    </Box>
-  );
-};
-
-ValidateInput.storyName = "Validation";
-
-export const customFieldset = () => (
-  <Box width="443px">
-    <Fieldset
-      label={
-        <Fieldset.Legend fontSize={500} color="green.400">
-          What's your sign?
-        </Fieldset.Legend>
-      }
-      helperText={
-        <Fieldset.HelperText fontSize={400} color="blue.700">
-          Mucho Mucho Amor
-        </Fieldset.HelperText>
-      }
-    >
-      <FormField label="Name">
-        {(props) => <Input {...props} name="name" />}
-      </FormField>
-      <FormField label="Zodiac">
-        {(props) => <Input {...props} name="zodiac" />}
-      </FormField>
-    </Fieldset>
-  </Box>
-);

package/src/Fieldset.tsx

@@ -1,68 +0,0 @@
-import * as React from "react";
-import Box from "@sproutsocial/seeds-react-box";
-import Text from "@sproutsocial/seeds-react-text";
-import { ChildContainer } from "./styles";
-import type {
-  TypeFieldsetProps,
-  TypeFieldsetLegendProps,
-  TypeFieldsetHelperText,
-} from "./FieldsetTypes";
-
-/**
- * Fieldset Component
- */
-const Fieldset = ({
-  layout = "vertical",
-  label,
-  helperText,
-  children,
-  ...rest
-}: TypeFieldsetProps) => (
-  <Box as="fieldset" border="none" p={0} data-qa-fieldset="" {...rest}>
-    {typeof label === "string" ? (
-      <Fieldset.Legend>{label}</Fieldset.Legend>
-    ) : (
-      label
-    )}
-    {typeof helperText === "string" ? (
-      <Fieldset.HelperText>{helperText}</Fieldset.HelperText>
-    ) : (
-      helperText
-    )}
-    <Box
-      display="flex"
-      flexDirection={layout === "vertical" ? "column" : "row"}
-    >
-      {React.Children.map(children, (child) => (
-        <ChildContainer layout={layout}>{child}</ChildContainer>
-      ))}
-    </Box>
-  </Box>
-);
-
-const FieldsetLegend = ({ children, ...rest }: TypeFieldsetLegendProps) => (
-  <Text
-    as="legend"
-    fontSize={300}
-    fontWeight="semibold"
-    color="text.body"
-    mb={300}
-    {...rest}
-  >
-    {children}
-  </Text>
-);
-
-const FieldsetHelperText = ({ children, ...rest }: TypeFieldsetHelperText) => (
-  <Text as="p" fontSize={200} mb={300} {...rest}>
-    {children}
-  </Text>
-);
-
-FieldsetLegend.displayName = "Fieldset.Legend";
-FieldsetHelperText.displayName = "Fieldset.HelperText";
-
-Fieldset.Legend = FieldsetLegend;
-Fieldset.HelperText = FieldsetHelperText;
-
-export default Fieldset;

package/src/FieldsetTypes.ts

@@ -1,23 +0,0 @@
-import type { TypeTextProps } from "@sproutsocial/seeds-react-text";
-import React from "react";
-import type { TypeBoxProps } from "@sproutsocial/seeds-react-box";
-
-export interface TypeFieldsetProps extends TypeBoxProps {
-  /** Label text to display above the fieldset */
-  label: React.ReactNode;
-  helperText?: React.ReactNode;
-  layout?: "vertical" | "horizontal";
-  children: React.ReactNode;
-}
-
-export interface TypeFieldsetChildContainerProps {
-  layout: TypeFieldsetProps["layout"];
-}
-
-export interface TypeFieldsetLegendProps extends TypeTextProps {
-  children: React.ReactNode;
-}
-
-export interface TypeFieldsetHelperText extends TypeTextProps {
-  children: React.ReactNode;
-}

package/src/__tests__/Fieldset.test.tsx

@@ -1,31 +0,0 @@
-import React from "react";
-import { render, screen } from "@sproutsocial/seeds-react-testing-library";
-import Radio from "@sproutsocial/seeds-react-radio";
-import Fieldset from "../Fieldset";
-
-test("Fieldset builds component when supplied props", () => {
-  render(
-    <Fieldset label="the label" helperText="helper text">
-      <Radio id="the content" name="the content" label="the content" />
-    </Fieldset>
-  );
-  expect(screen.getByText("the label")).toBeInTheDocument();
-  expect(screen.getByText("helper text")).toBeInTheDocument();
-  expect(screen.getByLabelText("the content")).toBeInTheDocument();
-});
-
-test("Fieldset supports custom label and helper text", () => {
-  render(
-    <Fieldset
-      label={<Fieldset.Legend fontSize={500}>the label</Fieldset.Legend>}
-      helperText={
-        <Fieldset.HelperText mb={400}>helper text</Fieldset.HelperText>
-      }
-    >
-      <Radio id="the content" name="the content" label="the content" />
-    </Fieldset>
-  );
-  expect(screen.getByText("the label")).toBeInTheDocument();
-  expect(screen.getByText("helper text")).toBeInTheDocument();
-  expect(screen.getByLabelText("the content")).toBeInTheDocument();
-});

package/src/__tests__/Fieldset.typetest.tsx

@@ -1,30 +0,0 @@
-import * as React from "react";
-import Radio from "@sproutsocial/seeds-react-radio";
-import Fieldset from "../Fieldset";
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-function FieldsetTypes() {
-  return (
-    <>
-      <Fieldset label="the label" helperText="helper text">
-        <Radio id="the content" name="the content" label="the content" />
-      </Fieldset>
-      <Fieldset
-        label={<Fieldset.Legend fontSize={500}>the label</Fieldset.Legend>}
-        helperText={
-          <Fieldset.HelperText mb={400}>helper text</Fieldset.HelperText>
-        }
-      >
-        <Radio id="the content" name="the content" label="the content" />
-      </Fieldset>
-
-      {/* @ts-expect-error - test that invalid type is rejected */}
-      <Fieldset>{/* empty */}</Fieldset>
-
-      {/* @ts-expect-error - test that invalid type is rejected */}
-      <Fieldset>
-        <div>thing</div>
-      </Fieldset>
-    </>
-  );
-}

package/src/index.ts

@@ -1,5 +0,0 @@
-import Fieldset from "./Fieldset";
-
-export default Fieldset;
-export { Fieldset };
-export * from "./FieldsetTypes";

package/src/styled.d.ts

@@ -1,7 +0,0 @@
-import "styled-components";
-import { TypeTheme } from "@sproutsocial/seeds-react-theme";
-
-declare module "styled-components" {
-  // eslint-disable-next-line @typescript-eslint/no-empty-interface
-  export interface DefaultTheme extends TypeTheme {}
-}

package/src/styles.ts

@@ -1,25 +0,0 @@
-import styled, { css } from "styled-components";
-import type { TypeFieldsetChildContainerProps } from "./FieldsetTypes";
-import Box from "@sproutsocial/seeds-react-box";
-
-export const ChildContainer = styled(Box)<TypeFieldsetChildContainerProps>`
-  ${(props) =>
-    props.layout === "vertical" &&
-    css`
-      margin-top: ${props.theme.space[300]};
-
-      &:first-child {
-        margin-top: 0;
-      }
-    `}
-
-  ${(props) =>
-    props.layout === "horizontal" &&
-    css`
-      margin-left: ${props.theme.space[300]};
-
-      &:first-child {
-        margin-left: 0;
-      }
-    `}
-`;

package/tsconfig.json

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

package/tsup.config.ts

@@ -1,12 +0,0 @@
-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,
-}));