@sproutsocial/seeds-react-indicator 1.0.43 → 1.0.44

package/.turbo/turbo-build.log

@@ -1,5 +1,23 @@
 yarn run v1.22.22
-$ tsup --dts
+$ tsup --dts && cp src/indicator.css dist/indicator.css
+▲ [WARNING] The condition "types" here will never be used as it comes after both "import" and "require" [package.json]
+
+    package.json:14:6:
+      14 │       "types": "./dist/index.d.ts"
+         ╵       ~~~~~~~
+
+  The "import" condition comes earlier and will be used for all "import" statements:
+
+    package.json:12:6:
+      12 │       "import": "./dist/esm/index.js",
+         ╵       ~~~~~~~~
+
+  The "require" condition comes earlier and will be used for all "require" calls:
+
+    package.json:13:6:
+      13 │       "require": "./dist/index.js",
+         ╵       ~~~~~~~~~
+
 CLI Building entry: src/index.ts
 CLI Using tsconfig: tsconfig.json
 CLI tsup v8.5.0
@@ -8,14 +26,52 @@ $ tsup --dts
 CLI Cleaning output folder
 CJS Build start
 ESM Build start
-CJS dist/index.js     3.29 KB
-CJS dist/index.js.map 2.64 KB
-CJS ⚡️ Build success in 62ms
-ESM dist/esm/index.js     1.39 KB
-ESM dist/esm/index.js.map 2.57 KB
-ESM ⚡️ Build success in 62ms
+[warn] ▲ [WARNING] The condition "types" here will never be used as it comes after both "import" and "require" [package.json]
+
+    package.json:14:6:
+      14 │       "types": "./dist/index.d.ts"
+         ╵       ~~~~~~~
+
+  The "import" condition comes earlier and will be used for all "import" statements:
+
+    package.json:12:6:
+      12 │       "import": "./dist/esm/index.js",
+         ╵       ~~~~~~~~
+
+  The "require" condition comes earlier and will be used for all "require" calls:
+
+    package.json:13:6:
+      13 │       "require": "./dist/index.js",
+         ╵       ~~~~~~~~~
+
+
+[warn] ▲ [WARNING] The condition "types" here will never be used as it comes after both "import" and "require" [package.json]
+
+    package.json:14:6:
+      14 │       "types": "./dist/index.d.ts"
+         ╵       ~~~~~~~
+
+  The "import" condition comes earlier and will be used for all "import" statements:
+
+    package.json:12:6:
+      12 │       "import": "./dist/esm/index.js",
+         ╵       ~~~~~~~~
+
+  The "require" condition comes earlier and will be used for all "require" calls:
+
+    package.json:13:6:
+      13 │       "require": "./dist/index.js",
+         ╵       ~~~~~~~~~
+
+
+CJS dist/index.js     5.08 KB
+CJS dist/index.js.map 6.11 KB
+CJS ⚡️ Build success in 18ms
+ESM dist/esm/index.js     2.93 KB
+ESM dist/esm/index.js.map 5.98 KB
+ESM ⚡️ Build success in 19ms
 DTS Build start
-DTS ⚡️ Build success in 6247ms
-DTS dist/index.d.ts  548.00 B
-DTS dist/index.d.mts 548.00 B
-Done in 7.82s.
+DTS ⚡️ Build success in 6693ms
+DTS dist/index.d.ts  739.00 B
+DTS dist/index.d.mts 739.00 B
+Done in 8.18s.

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @sproutsocial/seeds-react-indicator
 
+## 1.0.44
+
+### Patch Changes
+
+- Updated dependencies [d21ae54]
+  - @sproutsocial/seeds-react-theme@4.2.1
+  - @sproutsocial/seeds-react-icon@2.4.4
+  - @sproutsocial/seeds-react-mixins@4.3.10
+
 ## 1.0.43
 
 ### Patch Changes

package/dist/esm/index.js

@@ -1,6 +1,9 @@
 // src/Indicator.tsx
 import "react";
-import Icon from "@sproutsocial/seeds-react-icon";
+
+// src/IndicatorHybrid.tsx
+import "react";
+import Icon2 from "@sproutsocial/seeds-react-icon";
 
 // src/styles.ts
 import styled from "styled-components";
@@ -28,12 +31,35 @@ var Container = styled.span.attrs({
 `;
 var styles_default = Container;
 
-// src/Indicator.tsx
+// src/IndicatorTailwind.tsx
+import "react";
+import Icon from "@sproutsocial/seeds-react-icon";
 import { jsx, jsxs } from "react/jsx-runtime";
-var Indicator = ({ tooltip = "", ...rest }) => {
+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 IndicatorTailwind = ({
+  tooltip = "",
+  className,
+  ...rest
+}) => {
   return /* @__PURE__ */ jsxs(
-    styles_default,
+    "span",
     {
+      className: cn("Indicator", "seeds-indicator", className),
       "data-tip": tooltip,
       "data-qa-indicator": "",
       "aria-label": tooltip,
@@ -46,6 +72,38 @@ var Indicator = ({ tooltip = "", ...rest }) => {
     }
   );
 };
+IndicatorTailwind.displayName = "IndicatorTailwind";
+
+// src/IndicatorHybrid.tsx
+import { hasStyledProps } from "@sproutsocial/seeds-react-system-props";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var IndicatorHybrid = ({
+  tooltip = "",
+  ...rest
+}) => {
+  if (hasStyledProps(rest)) {
+    return /* @__PURE__ */ jsxs2(
+      styles_default,
+      {
+        "data-tip": tooltip,
+        "data-qa-indicator": "",
+        "aria-label": tooltip,
+        tabIndex: 0,
+        ...rest,
+        children: [
+          tooltip && /* @__PURE__ */ jsx2("div", { children: tooltip }),
+          /* @__PURE__ */ jsx2(Icon2, { name: "circle-fill-solid", size: "mini", "aria-hidden": true })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx2(IndicatorTailwind, { tooltip, ...rest });
+};
+IndicatorHybrid.displayName = "Indicator";
+
+// src/Indicator.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Indicator = (props) => /* @__PURE__ */ jsx3(IndicatorHybrid, { ...props });
 
 // src/IndicatorTypes.ts
 import "react";

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Indicator.tsx","../../src/styles.ts","../../src/IndicatorTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport Container from \"./styles\";\nimport type { TypeIndicatorProps } from \"./IndicatorTypes\";\n\nexport const Indicator = ({ tooltip = \"\", ...rest }: TypeIndicatorProps) => {\n  return (\n    <Container\n      data-tip={tooltip}\n      data-qa-indicator=\"\"\n      aria-label={tooltip}\n      tabIndex={0}\n      {...rest}\n    >\n      {tooltip && <div>{tooltip}</div>}\n      <Icon name=\"circle-fill-solid\" size=\"mini\" aria-hidden />\n    </Container>\n  );\n};\n","import styled from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport { visuallyHidden } from \"@sproutsocial/seeds-react-mixins\";\n\nconst Container = styled.span.attrs({\n  className: \"Indicator\",\n})`\n  position: relative;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  width: ${(props) => props.theme.space[400]};\n  height: ${(props) => props.theme.space[400]};\n  font-size: 10px;\n  line-height: 0;\n  color: ${(props) => props.color ?? props.theme.colors.icon.info};\n  text-align: center;\n\n  > div {\n    ${visuallyHidden}\n  }\n\n  ${COMMON}\n`;\n\nexport default Container;\n","import * as React from \"react\";\nimport type {\n  TypeStyledComponentsCommonProps,\n  TypeSystemCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\nexport interface TypeIndicatorProps\n  extends TypeStyledComponentsCommonProps,\n    TypeSystemCommonProps,\n    Omit<React.ComponentPropsWithoutRef<\"span\">, \"color\"> {\n  tooltip?: string;\n}\n","import { Indicator } from \"./Indicator\";\n\nexport default Indicator;\nexport { Indicator };\nexport * from \"./IndicatorTypes\";\n"],"mappings":";AAAA,OAAuB;AACvB,OAAO,UAAU;;;ACDjB,OAAO,YAAY;AACnB,SAAS,cAAc;AACvB,SAAS,sBAAsB;AAE/B,IAAM,YAAY,OAAO,KAAK,MAAM;AAAA,EAClC,WAAW;AACb,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,WAKU,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,YAChC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA,WAGlC,CAAC,UAAU,MAAM,SAAS,MAAM,MAAM,OAAO,KAAK,IAAI;AAAA;AAAA;AAAA;AAAA,MAI3D,cAAc;AAAA;AAAA;AAAA,IAGhB,MAAM;AAAA;AAGV,IAAO,iBAAQ;;;ADlBX,SAOc,KAPd;AAFG,IAAM,YAAY,CAAC,EAAE,UAAU,IAAI,GAAG,KAAK,MAA0B;AAC1E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,YAAU;AAAA,MACV,qBAAkB;AAAA,MAClB,cAAY;AAAA,MACZ,UAAU;AAAA,MACT,GAAG;AAAA,MAEH;AAAA,mBAAW,oBAAC,SAAK,mBAAQ;AAAA,QAC1B,oBAAC,QAAK,MAAK,qBAAoB,MAAK,QAAO,eAAW,MAAC;AAAA;AAAA;AAAA,EACzD;AAEJ;;;AElBA,OAAuB;;;ACEvB,IAAO,gBAAQ;","names":[]}
+{"version":3,"sources":["../../src/Indicator.tsx","../../src/IndicatorHybrid.tsx","../../src/styles.ts","../../src/IndicatorTailwind.tsx","../../src/IndicatorTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { IndicatorHybrid } from \"./IndicatorHybrid\";\nimport type { TypeIndicatorProps } from \"./IndicatorTypes\";\n\n/**\n * Indicator component. Automatically routes between the Tailwind\n * implementation (preferred) and the styled-components implementation (for\n * consumers using system props or styled() extension).\n */\nexport const Indicator = (props: TypeIndicatorProps) => (\n  <IndicatorHybrid {...props} />\n);\n","/**\n * Hybrid Indicator Component\n * Automatically chooses between Tailwind and styled-components based on props\n */\n\nimport * as React from \"react\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport Container from \"./styles\"; // Styled-components version\nimport { IndicatorTailwind } from \"./IndicatorTailwind\"; // Tailwind version\nimport { hasStyledProps } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeIndicatorProps } from \"./IndicatorTypes\";\n\nexport const IndicatorHybrid = ({\n  tooltip = \"\",\n  ...rest\n}: TypeIndicatorProps) => {\n  if (hasStyledProps(rest)) {\n    return (\n      <Container\n        data-tip={tooltip}\n        data-qa-indicator=\"\"\n        aria-label={tooltip}\n        tabIndex={0}\n        {...rest}\n      >\n        {tooltip && <div>{tooltip}</div>}\n        <Icon name=\"circle-fill-solid\" size=\"mini\" aria-hidden />\n      </Container>\n    );\n  }\n\n  // Use Tailwind version (preferred - better performance)\n  return <IndicatorTailwind tooltip={tooltip} {...rest} />;\n};\n\nIndicatorHybrid.displayName = \"Indicator\";\n","import styled from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport { visuallyHidden } from \"@sproutsocial/seeds-react-mixins\";\n\nconst Container = styled.span.attrs({\n  className: \"Indicator\",\n})`\n  position: relative;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  width: ${(props) => props.theme.space[400]};\n  height: ${(props) => props.theme.space[400]};\n  font-size: 10px;\n  line-height: 0;\n  color: ${(props) => props.color ?? props.theme.colors.icon.info};\n  text-align: center;\n\n  > div {\n    ${visuallyHidden}\n  }\n\n  ${COMMON}\n`;\n\nexport default Container;\n","/**\n * Tailwind CSS implementation of Indicator component\n * Uses Seeds indicator CSS classes from indicator.css\n */\n\nimport * as React from \"react\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport type { TypeIndicatorProps } from \"./IndicatorTypes\";\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 IndicatorTailwind = ({\n  tooltip = \"\",\n  className,\n  ...rest\n}: TypeIndicatorProps) => {\n  return (\n    <span\n      className={cn(\"Indicator\", \"seeds-indicator\", className)}\n      data-tip={tooltip}\n      data-qa-indicator=\"\"\n      aria-label={tooltip}\n      tabIndex={0}\n      {...(rest as React.ComponentPropsWithoutRef<\"span\">)}\n    >\n      {tooltip && <div>{tooltip}</div>}\n      <Icon name=\"circle-fill-solid\" size=\"mini\" aria-hidden />\n    </span>\n  );\n};\n\nIndicatorTailwind.displayName = \"IndicatorTailwind\";\n","import * as React from \"react\";\nimport type {\n  TypeStyledComponentsCommonProps,\n  TypeSystemCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\nexport interface TypeIndicatorProps\n  extends TypeStyledComponentsCommonProps,\n    TypeSystemCommonProps,\n    Omit<React.ComponentPropsWithoutRef<\"span\">, \"color\"> {\n  tooltip?: string;\n}\n","import { Indicator } from \"./Indicator\";\n\nexport default Indicator;\nexport { Indicator };\nexport * from \"./IndicatorTypes\";\n"],"mappings":";AAAA,OAAuB;;;ACKvB,OAAuB;AACvB,OAAOA,WAAU;;;ACNjB,OAAO,YAAY;AACnB,SAAS,cAAc;AACvB,SAAS,sBAAsB;AAE/B,IAAM,YAAY,OAAO,KAAK,MAAM;AAAA,EAClC,WAAW;AACb,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,WAKU,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,YAChC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA,WAGlC,CAAC,UAAU,MAAM,SAAS,MAAM,MAAM,OAAO,KAAK,IAAI;AAAA;AAAA;AAAA;AAAA,MAI3D,cAAc;AAAA;AAAA;AAAA,IAGhB,MAAM;AAAA;AAGV,IAAO,iBAAQ;;;ACpBf,OAAuB;AACvB,OAAO,UAAU;AAgCb,SAQc,KARd;AA5BJ,SAAS,MACJ,QACK;AACR,QAAM,UAAoB,CAAC;AAE3B,aAAW,SAAS,QAAQ;AAC1B,QAAI,CAAC,MAAO;AAEZ,QAAI,OAAO,UAAU,UAAU;AAC7B,cAAQ,KAAK,KAAK;AAAA,IACpB,WAAW,OAAO,UAAU,UAAU;AACpC,iBAAW,CAAC,KAAK,KAAK,KAAK,OAAO,QAAQ,KAAK,GAAG;AAChD,YAAI,OAAO;AACT,kBAAQ,KAAK,GAAG;AAAA,QAClB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,SAAO,QAAQ,KAAK,GAAG;AACzB;AAEO,IAAM,oBAAoB,CAAC;AAAA,EAChC,UAAU;AAAA,EACV;AAAA,EACA,GAAG;AACL,MAA0B;AACxB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,aAAa,mBAAmB,SAAS;AAAA,MACvD,YAAU;AAAA,MACV,qBAAkB;AAAA,MAClB,cAAY;AAAA,MACZ,UAAU;AAAA,MACT,GAAI;AAAA,MAEJ;AAAA,mBAAW,oBAAC,SAAK,mBAAQ;AAAA,QAC1B,oBAAC,QAAK,MAAK,qBAAoB,MAAK,QAAO,eAAW,MAAC;AAAA;AAAA;AAAA,EACzD;AAEJ;AAEA,kBAAkB,cAAc;;;AF3ChC,SAAS,sBAAsB;AASzB,SAOc,OAAAC,MAPd,QAAAC,aAAA;AANC,IAAM,kBAAkB,CAAC;AAAA,EAC9B,UAAU;AAAA,EACV,GAAG;AACL,MAA0B;AACxB,MAAI,eAAe,IAAI,GAAG;AACxB,WACE,gBAAAA;AAAA,MAAC;AAAA;AAAA,QACC,YAAU;AAAA,QACV,qBAAkB;AAAA,QAClB,cAAY;AAAA,QACZ,UAAU;AAAA,QACT,GAAG;AAAA,QAEH;AAAA,qBAAW,gBAAAD,KAAC,SAAK,mBAAQ;AAAA,UAC1B,gBAAAA,KAACE,OAAA,EAAK,MAAK,qBAAoB,MAAK,QAAO,eAAW,MAAC;AAAA;AAAA;AAAA,IACzD;AAAA,EAEJ;AAGA,SAAO,gBAAAF,KAAC,qBAAkB,SAAmB,GAAG,MAAM;AACxD;AAEA,gBAAgB,cAAc;;;ADzB5B,gBAAAG,YAAA;AADK,IAAM,YAAY,CAAC,UACxB,gBAAAA,KAAC,mBAAiB,GAAG,OAAO;;;AIV9B,OAAuB;;;ACEvB,IAAO,gBAAQ;","names":["Icon","jsx","jsxs","Icon","jsx"]}

package/dist/index.d.mts

@@ -6,6 +6,11 @@ interface TypeIndicatorProps extends TypeStyledComponentsCommonProps, TypeSystem
     tooltip?: string;
 }
 
-declare const Indicator: ({ tooltip, ...rest }: TypeIndicatorProps) => react_jsx_runtime.JSX.Element;
+/**
+ * Indicator component. Automatically routes between the Tailwind
+ * implementation (preferred) and the styled-components implementation (for
+ * consumers using system props or styled() extension).
+ */
+declare const Indicator: (props: TypeIndicatorProps) => react_jsx_runtime.JSX.Element;
 
 export { Indicator, type TypeIndicatorProps, Indicator as default };

package/dist/index.d.ts

@@ -6,6 +6,11 @@ interface TypeIndicatorProps extends TypeStyledComponentsCommonProps, TypeSystem
     tooltip?: string;
 }
 
-declare const Indicator: ({ tooltip, ...rest }: TypeIndicatorProps) => react_jsx_runtime.JSX.Element;
+/**
+ * Indicator component. Automatically routes between the Tailwind
+ * implementation (preferred) and the styled-components implementation (for
+ * consumers using system props or styled() extension).
+ */
+declare const Indicator: (props: TypeIndicatorProps) => react_jsx_runtime.JSX.Element;
 
 export { Indicator, type TypeIndicatorProps, Indicator as default };

package/dist/index.js

@@ -36,8 +36,11 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/Indicator.tsx
-var React = require("react");
-var import_seeds_react_icon = __toESM(require("@sproutsocial/seeds-react-icon"));
+var React3 = require("react");
+
+// src/IndicatorHybrid.tsx
+var React2 = require("react");
+var import_seeds_react_icon2 = __toESM(require("@sproutsocial/seeds-react-icon"));
 
 // src/styles.ts
 var import_styled_components = __toESM(require("styled-components"));
@@ -65,12 +68,35 @@ var Container = import_styled_components.default.span.attrs({
 `;
 var styles_default = Container;
 
-// src/Indicator.tsx
+// src/IndicatorTailwind.tsx
+var React = require("react");
+var import_seeds_react_icon = __toESM(require("@sproutsocial/seeds-react-icon"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var Indicator = ({ tooltip = "", ...rest }) => {
+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 IndicatorTailwind = ({
+  tooltip = "",
+  className,
+  ...rest
+}) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    styles_default,
+    "span",
     {
+      className: cn("Indicator", "seeds-indicator", className),
       "data-tip": tooltip,
       "data-qa-indicator": "",
       "aria-label": tooltip,
@@ -83,9 +109,41 @@ var Indicator = ({ tooltip = "", ...rest }) => {
     }
   );
 };
+IndicatorTailwind.displayName = "IndicatorTailwind";
+
+// src/IndicatorHybrid.tsx
+var import_seeds_react_system_props2 = require("@sproutsocial/seeds-react-system-props");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var IndicatorHybrid = ({
+  tooltip = "",
+  ...rest
+}) => {
+  if ((0, import_seeds_react_system_props2.hasStyledProps)(rest)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      styles_default,
+      {
+        "data-tip": tooltip,
+        "data-qa-indicator": "",
+        "aria-label": tooltip,
+        tabIndex: 0,
+        ...rest,
+        children: [
+          tooltip && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { children: tooltip }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_seeds_react_icon2.default, { name: "circle-fill-solid", size: "mini", "aria-hidden": true })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(IndicatorTailwind, { tooltip, ...rest });
+};
+IndicatorHybrid.displayName = "Indicator";
+
+// src/Indicator.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Indicator = (props) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IndicatorHybrid, { ...props });
 
 // src/IndicatorTypes.ts
-var React2 = require("react");
+var React4 = require("react");
 
 // src/index.ts
 var index_default = Indicator;

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/Indicator.tsx","../src/styles.ts","../src/IndicatorTypes.ts"],"sourcesContent":["import { Indicator } from \"./Indicator\";\n\nexport default Indicator;\nexport { Indicator };\nexport * from \"./IndicatorTypes\";\n","import * as React from \"react\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport Container from \"./styles\";\nimport type { TypeIndicatorProps } from \"./IndicatorTypes\";\n\nexport const Indicator = ({ tooltip = \"\", ...rest }: TypeIndicatorProps) => {\n  return (\n    <Container\n      data-tip={tooltip}\n      data-qa-indicator=\"\"\n      aria-label={tooltip}\n      tabIndex={0}\n      {...rest}\n    >\n      {tooltip && <div>{tooltip}</div>}\n      <Icon name=\"circle-fill-solid\" size=\"mini\" aria-hidden />\n    </Container>\n  );\n};\n","import styled from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport { visuallyHidden } from \"@sproutsocial/seeds-react-mixins\";\n\nconst Container = styled.span.attrs({\n  className: \"Indicator\",\n})`\n  position: relative;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  width: ${(props) => props.theme.space[400]};\n  height: ${(props) => props.theme.space[400]};\n  font-size: 10px;\n  line-height: 0;\n  color: ${(props) => props.color ?? props.theme.colors.icon.info};\n  text-align: center;\n\n  > div {\n    ${visuallyHidden}\n  }\n\n  ${COMMON}\n`;\n\nexport default Container;\n","import * as React from \"react\";\nimport type {\n  TypeStyledComponentsCommonProps,\n  TypeSystemCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\nexport interface TypeIndicatorProps\n  extends TypeStyledComponentsCommonProps,\n    TypeSystemCommonProps,\n    Omit<React.ComponentPropsWithoutRef<\"span\">, \"color\"> {\n  tooltip?: string;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;AACvB,8BAAiB;;;ACDjB,+BAAmB;AACnB,sCAAuB;AACvB,gCAA+B;AAE/B,IAAM,YAAY,yBAAAA,QAAO,KAAK,MAAM;AAAA,EAClC,WAAW;AACb,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,WAKU,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,YAChC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA,WAGlC,CAAC,UAAU,MAAM,SAAS,MAAM,MAAM,OAAO,KAAK,IAAI;AAAA;AAAA;AAAA;AAAA,MAI3D,wCAAc;AAAA;AAAA;AAAA,IAGhB,sCAAM;AAAA;AAGV,IAAO,iBAAQ;;;ADlBX;AAFG,IAAM,YAAY,CAAC,EAAE,UAAU,IAAI,GAAG,KAAK,MAA0B;AAC1E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,YAAU;AAAA,MACV,qBAAkB;AAAA,MAClB,cAAY;AAAA,MACZ,UAAU;AAAA,MACT,GAAG;AAAA,MAEH;AAAA,mBAAW,4CAAC,SAAK,mBAAQ;AAAA,QAC1B,4CAAC,wBAAAC,SAAA,EAAK,MAAK,qBAAoB,MAAK,QAAO,eAAW,MAAC;AAAA;AAAA;AAAA,EACzD;AAEJ;;;AElBA,IAAAC,SAAuB;;;AHEvB,IAAO,gBAAQ;","names":["styled","Icon","React"]}
+{"version":3,"sources":["../src/index.ts","../src/Indicator.tsx","../src/IndicatorHybrid.tsx","../src/styles.ts","../src/IndicatorTailwind.tsx","../src/IndicatorTypes.ts"],"sourcesContent":["import { Indicator } from \"./Indicator\";\n\nexport default Indicator;\nexport { Indicator };\nexport * from \"./IndicatorTypes\";\n","import * as React from \"react\";\nimport { IndicatorHybrid } from \"./IndicatorHybrid\";\nimport type { TypeIndicatorProps } from \"./IndicatorTypes\";\n\n/**\n * Indicator component. Automatically routes between the Tailwind\n * implementation (preferred) and the styled-components implementation (for\n * consumers using system props or styled() extension).\n */\nexport const Indicator = (props: TypeIndicatorProps) => (\n  <IndicatorHybrid {...props} />\n);\n","/**\n * Hybrid Indicator Component\n * Automatically chooses between Tailwind and styled-components based on props\n */\n\nimport * as React from \"react\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport Container from \"./styles\"; // Styled-components version\nimport { IndicatorTailwind } from \"./IndicatorTailwind\"; // Tailwind version\nimport { hasStyledProps } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeIndicatorProps } from \"./IndicatorTypes\";\n\nexport const IndicatorHybrid = ({\n  tooltip = \"\",\n  ...rest\n}: TypeIndicatorProps) => {\n  if (hasStyledProps(rest)) {\n    return (\n      <Container\n        data-tip={tooltip}\n        data-qa-indicator=\"\"\n        aria-label={tooltip}\n        tabIndex={0}\n        {...rest}\n      >\n        {tooltip && <div>{tooltip}</div>}\n        <Icon name=\"circle-fill-solid\" size=\"mini\" aria-hidden />\n      </Container>\n    );\n  }\n\n  // Use Tailwind version (preferred - better performance)\n  return <IndicatorTailwind tooltip={tooltip} {...rest} />;\n};\n\nIndicatorHybrid.displayName = \"Indicator\";\n","import styled from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport { visuallyHidden } from \"@sproutsocial/seeds-react-mixins\";\n\nconst Container = styled.span.attrs({\n  className: \"Indicator\",\n})`\n  position: relative;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  width: ${(props) => props.theme.space[400]};\n  height: ${(props) => props.theme.space[400]};\n  font-size: 10px;\n  line-height: 0;\n  color: ${(props) => props.color ?? props.theme.colors.icon.info};\n  text-align: center;\n\n  > div {\n    ${visuallyHidden}\n  }\n\n  ${COMMON}\n`;\n\nexport default Container;\n","/**\n * Tailwind CSS implementation of Indicator component\n * Uses Seeds indicator CSS classes from indicator.css\n */\n\nimport * as React from \"react\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport type { TypeIndicatorProps } from \"./IndicatorTypes\";\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 IndicatorTailwind = ({\n  tooltip = \"\",\n  className,\n  ...rest\n}: TypeIndicatorProps) => {\n  return (\n    <span\n      className={cn(\"Indicator\", \"seeds-indicator\", className)}\n      data-tip={tooltip}\n      data-qa-indicator=\"\"\n      aria-label={tooltip}\n      tabIndex={0}\n      {...(rest as React.ComponentPropsWithoutRef<\"span\">)}\n    >\n      {tooltip && <div>{tooltip}</div>}\n      <Icon name=\"circle-fill-solid\" size=\"mini\" aria-hidden />\n    </span>\n  );\n};\n\nIndicatorTailwind.displayName = \"IndicatorTailwind\";\n","import * as React from \"react\";\nimport type {\n  TypeStyledComponentsCommonProps,\n  TypeSystemCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\nexport interface TypeIndicatorProps\n  extends TypeStyledComponentsCommonProps,\n    TypeSystemCommonProps,\n    Omit<React.ComponentPropsWithoutRef<\"span\">, \"color\"> {\n  tooltip?: string;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,IAAAA,SAAuB;;;ACKvB,IAAAC,SAAuB;AACvB,IAAAC,2BAAiB;;;ACNjB,+BAAmB;AACnB,sCAAuB;AACvB,gCAA+B;AAE/B,IAAM,YAAY,yBAAAC,QAAO,KAAK,MAAM;AAAA,EAClC,WAAW;AACb,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,WAKU,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,YAChC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA,WAGlC,CAAC,UAAU,MAAM,SAAS,MAAM,MAAM,OAAO,KAAK,IAAI;AAAA;AAAA;AAAA;AAAA,MAI3D,wCAAc;AAAA;AAAA;AAAA,IAGhB,sCAAM;AAAA;AAGV,IAAO,iBAAQ;;;ACpBf,YAAuB;AACvB,8BAAiB;AAgCb;AA5BJ,SAAS,MACJ,QACK;AACR,QAAM,UAAoB,CAAC;AAE3B,aAAW,SAAS,QAAQ;AAC1B,QAAI,CAAC,MAAO;AAEZ,QAAI,OAAO,UAAU,UAAU;AAC7B,cAAQ,KAAK,KAAK;AAAA,IACpB,WAAW,OAAO,UAAU,UAAU;AACpC,iBAAW,CAAC,KAAK,KAAK,KAAK,OAAO,QAAQ,KAAK,GAAG;AAChD,YAAI,OAAO;AACT,kBAAQ,KAAK,GAAG;AAAA,QAClB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,SAAO,QAAQ,KAAK,GAAG;AACzB;AAEO,IAAM,oBAAoB,CAAC;AAAA,EAChC,UAAU;AAAA,EACV;AAAA,EACA,GAAG;AACL,MAA0B;AACxB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,aAAa,mBAAmB,SAAS;AAAA,MACvD,YAAU;AAAA,MACV,qBAAkB;AAAA,MAClB,cAAY;AAAA,MACZ,UAAU;AAAA,MACT,GAAI;AAAA,MAEJ;AAAA,mBAAW,4CAAC,SAAK,mBAAQ;AAAA,QAC1B,4CAAC,wBAAAC,SAAA,EAAK,MAAK,qBAAoB,MAAK,QAAO,eAAW,MAAC;AAAA;AAAA;AAAA,EACzD;AAEJ;AAEA,kBAAkB,cAAc;;;AF3ChC,IAAAC,mCAA+B;AASzB,IAAAC,sBAAA;AANC,IAAM,kBAAkB,CAAC;AAAA,EAC9B,UAAU;AAAA,EACV,GAAG;AACL,MAA0B;AACxB,UAAI,iDAAe,IAAI,GAAG;AACxB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,YAAU;AAAA,QACV,qBAAkB;AAAA,QAClB,cAAY;AAAA,QACZ,UAAU;AAAA,QACT,GAAG;AAAA,QAEH;AAAA,qBAAW,6CAAC,SAAK,mBAAQ;AAAA,UAC1B,6CAAC,yBAAAC,SAAA,EAAK,MAAK,qBAAoB,MAAK,QAAO,eAAW,MAAC;AAAA;AAAA;AAAA,IACzD;AAAA,EAEJ;AAGA,SAAO,6CAAC,qBAAkB,SAAmB,GAAG,MAAM;AACxD;AAEA,gBAAgB,cAAc;;;ADzB5B,IAAAC,sBAAA;AADK,IAAM,YAAY,CAAC,UACxB,6CAAC,mBAAiB,GAAG,OAAO;;;AIV9B,IAAAC,SAAuB;;;ALEvB,IAAO,gBAAQ;","names":["React","React","import_seeds_react_icon","styled","Icon","import_seeds_react_system_props","import_jsx_runtime","Icon","import_jsx_runtime","React"]}

package/dist/indicator.css

@@ -0,0 +1,36 @@
+/**
+ * Seeds Indicator 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.
+ *
+ * All rules are wrapped in `@layer components` so that consumer Tailwind
+ * utilities (unlayered) win the cascade over these styles.
+ */
+
+@layer components {
+  .seeds-indicator {
+    position: relative;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    width: var(--space-400);
+    height: var(--space-400);
+    font-size: 10px;
+    line-height: 0;
+    color: var(--color-icon-info);
+    text-align: center;
+  }
+
+  .seeds-indicator > div {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    border: 0;
+  }
+}

package/package.json

@@ -1,15 +1,23 @@
 {
   "name": "@sproutsocial/seeds-react-indicator",
-  "version": "1.0.43",
+  "version": "1.0.44",
   "description": "Seeds React Indicator",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./dist/indicator.css": "./dist/indicator.css"
+  },
   "scripts": {
-    "build": "tsup --dts",
-    "build:debug": "tsup --dts --metafile",
+    "build": "tsup --dts && cp src/indicator.css dist/indicator.css",
+    "build:debug": "tsup --dts --metafile && cp src/indicator.css dist/indicator.css",
     "dev": "tsup --watch --dts",
     "clean": "rm -rf .turbo dist",
     "clean:modules": "rm -rf node_modules",
@@ -18,10 +26,10 @@
     "test:watch": "jest --watch --coverage=false"
   },
   "dependencies": {
-    "@sproutsocial/seeds-react-theme": "^4.2.0",
+    "@sproutsocial/seeds-react-theme": "^4.2.1",
     "@sproutsocial/seeds-react-system-props": "^3.1.2",
-    "@sproutsocial/seeds-react-icon": "^2.4.3",
-    "@sproutsocial/seeds-react-mixins": "^4.3.9"
+    "@sproutsocial/seeds-react-icon": "^2.4.4",
+    "@sproutsocial/seeds-react-mixins": "^4.3.10"
   },
   "devDependencies": {
     "@types/react": "^18.0.0",

package/src/Indicator.tsx

@@ -1,19 +1,12 @@
 import * as React from "react";
-import Icon from "@sproutsocial/seeds-react-icon";
-import Container from "./styles";
+import { IndicatorHybrid } from "./IndicatorHybrid";
 import type { TypeIndicatorProps } from "./IndicatorTypes";
 
-export const Indicator = ({ tooltip = "", ...rest }: TypeIndicatorProps) => {
-  return (
-    <Container
-      data-tip={tooltip}
-      data-qa-indicator=""
-      aria-label={tooltip}
-      tabIndex={0}
-      {...rest}
-    >
-      {tooltip && <div>{tooltip}</div>}
-      <Icon name="circle-fill-solid" size="mini" aria-hidden />
-    </Container>
-  );
-};
+/**
+ * Indicator component. Automatically routes between the Tailwind
+ * implementation (preferred) and the styled-components implementation (for
+ * consumers using system props or styled() extension).
+ */
+export const Indicator = (props: TypeIndicatorProps) => (
+  <IndicatorHybrid {...props} />
+);

package/src/IndicatorHybrid.tsx

@@ -0,0 +1,36 @@
+/**
+ * Hybrid Indicator Component
+ * Automatically chooses between Tailwind and styled-components based on props
+ */
+
+import * as React from "react";
+import Icon from "@sproutsocial/seeds-react-icon";
+import Container from "./styles"; // Styled-components version
+import { IndicatorTailwind } from "./IndicatorTailwind"; // Tailwind version
+import { hasStyledProps } from "@sproutsocial/seeds-react-system-props";
+import type { TypeIndicatorProps } from "./IndicatorTypes";
+
+export const IndicatorHybrid = ({
+  tooltip = "",
+  ...rest
+}: TypeIndicatorProps) => {
+  if (hasStyledProps(rest)) {
+    return (
+      <Container
+        data-tip={tooltip}
+        data-qa-indicator=""
+        aria-label={tooltip}
+        tabIndex={0}
+        {...rest}
+      >
+        {tooltip && <div>{tooltip}</div>}
+        <Icon name="circle-fill-solid" size="mini" aria-hidden />
+      </Container>
+    );
+  }
+
+  // Use Tailwind version (preferred - better performance)
+  return <IndicatorTailwind tooltip={tooltip} {...rest} />;
+};
+
+IndicatorHybrid.displayName = "Indicator";

package/src/IndicatorTailwind.tsx

@@ -0,0 +1,53 @@
+/**
+ * Tailwind CSS implementation of Indicator component
+ * Uses Seeds indicator CSS classes from indicator.css
+ */
+
+import * as React from "react";
+import Icon from "@sproutsocial/seeds-react-icon";
+import type { TypeIndicatorProps } from "./IndicatorTypes";
+
+// Utility for merging class names properly
+function cn(
+  ...inputs: (string | undefined | null | false | Record<string, boolean>)[]
+): string {
+  const classes: string[] = [];
+
+  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(" ");
+}
+
+export const IndicatorTailwind = ({
+  tooltip = "",
+  className,
+  ...rest
+}: TypeIndicatorProps) => {
+  return (
+    <span
+      className={cn("Indicator", "seeds-indicator", className)}
+      data-tip={tooltip}
+      data-qa-indicator=""
+      aria-label={tooltip}
+      tabIndex={0}
+      {...(rest as React.ComponentPropsWithoutRef<"span">)}
+    >
+      {tooltip && <div>{tooltip}</div>}
+      <Icon name="circle-fill-solid" size="mini" aria-hidden />
+    </span>
+  );
+};
+
+IndicatorTailwind.displayName = "IndicatorTailwind";

package/src/__tests__/features.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { render } from "@sproutsocial/seeds-react-testing-library";
+import { render, screen } from "@sproutsocial/seeds-react-testing-library";
 import { Indicator } from "../";
 
 describe("Indicator", () => {
@@ -7,4 +7,27 @@ describe("Indicator", () => {
     const { container } = render(<Indicator />);
     expect(container).toBeTruthy();
   });
+
+  it("renders the Tailwind path with the Indicator and seeds-indicator classes", () => {
+    const { container } = render(<Indicator tooltip="online" />);
+    const el = container.querySelector("[data-qa-indicator]");
+    expect(el).toHaveClass("Indicator");
+    expect(el).toHaveClass("seeds-indicator");
+    expect(el).toHaveAttribute("aria-label", "online");
+  });
+
+  it("merges a consumer className on the Tailwind path (styled() contract)", () => {
+    const { container } = render(<Indicator className="custom" />);
+    const el = container.querySelector("[data-qa-indicator]");
+    expect(el).toHaveClass("seeds-indicator");
+    expect(el).toHaveClass("custom");
+  });
+
+  it("routes through the styled-components path when a system prop is present", () => {
+    // mt is a system prop, which routes Indicator through the styled-components path
+    const { container } = render(<Indicator mt={200} />);
+    const el = container.querySelector("[data-qa-indicator]");
+    expect(el).toBeInTheDocument();
+    expect(el).toHaveClass("Indicator");
+  });
 });

package/src/indicator.css

@@ -0,0 +1,36 @@
+/**
+ * Seeds Indicator 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.
+ *
+ * All rules are wrapped in `@layer components` so that consumer Tailwind
+ * utilities (unlayered) win the cascade over these styles.
+ */
+
+@layer components {
+  .seeds-indicator {
+    position: relative;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    width: var(--space-400);
+    height: var(--space-400);
+    font-size: 10px;
+    line-height: 0;
+    color: var(--color-icon-info);
+    text-align: center;
+  }
+
+  .seeds-indicator > div {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    border: 0;
+  }
+}