@sproutsocial/seeds-react-keyboard-key 1.0.25 → 1.0.27

package/.turbo/turbo-build.log

@@ -1,5 +1,23 @@
 yarn run v1.22.22
-$ tsup --dts
+$ tsup --dts && cp src/keyboard-key.css dist/keyboard-key.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.05 KB
-CJS dist/index.js.map 2.43 KB
-CJS ⚡️ Build success in 14ms
-ESM dist/esm/index.js     1.18 KB
-ESM dist/esm/index.js.map 2.34 KB
-ESM ⚡️ Build success in 14ms
+[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     4.66 KB
+CJS dist/index.js.map 5.70 KB
+CJS ⚡️ Build success in 17ms
+ESM dist/esm/index.js     2.52 KB
+ESM dist/esm/index.js.map 5.53 KB
+ESM ⚡️ Build success in 17ms
 DTS Build start
-DTS ⚡️ Build success in 4301ms
-DTS dist/index.d.ts  601.00 B
-DTS dist/index.d.mts 601.00 B
-Done in 6.01s.
+DTS ⚡️ Build success in 5119ms
+DTS dist/index.d.ts  793.00 B
+DTS dist/index.d.mts 793.00 B
+Done in 6.43s.

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @sproutsocial/seeds-react-keyboard-key
 
+## 1.0.27
+
+### Patch Changes
+
+- Updated dependencies [d21ae54]
+  - @sproutsocial/seeds-react-theme@4.2.1
+
+## 1.0.26
+
+### Patch Changes
+
+- Updated dependencies [6611f6a]
+  - @sproutsocial/seeds-react-system-props@3.1.2
+  - @sproutsocial/seeds-react-text@1.5.1
+
 ## 1.0.25
 
 ### Patch Changes

package/dist/esm/index.js

@@ -1,6 +1,9 @@
 // src/KeyboardKey.tsx
 import "react";
-import Text from "@sproutsocial/seeds-react-text";
+
+// src/KeyboardKeyHybrid.tsx
+import "react";
+import Text2 from "@sproutsocial/seeds-react-text";
 
 // src/styles.ts
 import styled from "styled-components";
@@ -20,11 +23,59 @@ var Container = styled.div`
 `;
 var styles_default = Container;
 
-// src/KeyboardKey.tsx
+// src/KeyboardKeyTailwind.tsx
+import "react";
+import Text from "@sproutsocial/seeds-react-text";
 import { jsx } from "react/jsx-runtime";
-var KeyboardKey = ({ children, ...rest }) => {
-  return /* @__PURE__ */ jsx(styles_default, { ...rest, children: /* @__PURE__ */ jsx("kbd", { "data-qa-keyboardkey": children, children: /* @__PURE__ */ jsx(Text, { children }) }) });
+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 KeyboardKeyTailwind = ({
+  children,
+  className,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("seeds-keyboard-key", className),
+      ...rest,
+      children: /* @__PURE__ */ jsx("kbd", { "data-qa-keyboardkey": children, children: /* @__PURE__ */ jsx(Text, { children }) })
+    }
+  );
+};
+KeyboardKeyTailwind.displayName = "KeyboardKeyTailwind";
+
+// src/KeyboardKeyHybrid.tsx
+import { hasStyledProps } from "@sproutsocial/seeds-react-system-props";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var KeyboardKeyHybrid = ({
+  children,
+  ...rest
+}) => {
+  if (hasStyledProps(rest)) {
+    return /* @__PURE__ */ jsx2(styles_default, { ...rest, children: /* @__PURE__ */ jsx2("kbd", { "data-qa-keyboardkey": children, children: /* @__PURE__ */ jsx2(Text2, { children }) }) });
+  }
+  return /* @__PURE__ */ jsx2(KeyboardKeyTailwind, { ...rest, children });
 };
+KeyboardKeyHybrid.displayName = "KeyboardKey";
+
+// src/KeyboardKey.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var KeyboardKey = (props) => /* @__PURE__ */ jsx3(KeyboardKeyHybrid, { ...props });
 
 // src/KeyboardKeyTypes.ts
 import "react";

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/KeyboardKey.tsx","../../src/styles.ts","../../src/KeyboardKeyTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport Container from \"./styles\";\nimport type { TypeKeyboardKeyProps } from \"./KeyboardKeyTypes\";\n\nexport const KeyboardKey = ({ children, ...rest }: TypeKeyboardKeyProps) => {\n  return (\n    <Container {...rest}>\n      <kbd data-qa-keyboardkey={children}>\n        <Text>{children}</Text>\n      </kbd>\n    </Container>\n  );\n};\n","import styled from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\n\nconst Container = styled.div`\n  display: inline-flex;\n  color: ${(props) => props.theme.colors.text.body};\n  background-color: ${(props) => props.theme.colors.container.background.base};\n  border: 1px solid ${(props) => props.theme.colors.container.border.base};\n  border-radius: ${(props) => props.theme.radii[500]};\n  box-shadow: ${(props) => props.theme.shadows.low};\n  padding: 0 ${(props) => props.theme.space[200]};\n  min-width: 20px;\n  justify-content: center;\n\n  ${COMMON}\n`;\n\nexport default Container;\n","import * as React from \"react\";\nimport type {\n  TypeSystemCommonProps,\n  TypeStyledComponentsCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\nexport interface TypeKeyboardKeyProps\n  extends TypeStyledComponentsCommonProps,\n    TypeSystemCommonProps,\n    Omit<React.ComponentPropsWithoutRef<\"div\">, \"color\"> {\n  /** Text to display inside of key */\n  children: string;\n}\n","import { KeyboardKey } from \"./KeyboardKey\";\n\nexport default KeyboardKey;\nexport { KeyboardKey };\nexport * from \"./KeyboardKeyTypes\";\n"],"mappings":";AAAA,OAAuB;AACvB,OAAO,UAAU;;;ACDjB,OAAO,YAAY;AACnB,SAAS,cAAc;AAEvB,IAAM,YAAY,OAAO;AAAA;AAAA,WAEd,CAAC,UAAU,MAAM,MAAM,OAAO,KAAK,IAAI;AAAA,sBAC5B,CAAC,UAAU,MAAM,MAAM,OAAO,UAAU,WAAW,IAAI;AAAA,sBACvD,CAAC,UAAU,MAAM,MAAM,OAAO,UAAU,OAAO,IAAI;AAAA,mBACtD,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,gBACpC,CAAC,UAAU,MAAM,MAAM,QAAQ,GAAG;AAAA,eACnC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA,IAI5C,MAAM;AAAA;AAGV,IAAO,iBAAQ;;;ADRP;AAJD,IAAM,cAAc,CAAC,EAAE,UAAU,GAAG,KAAK,MAA4B;AAC1E,SACE,oBAAC,kBAAW,GAAG,MACb,8BAAC,SAAI,uBAAqB,UACxB,8BAAC,QAAM,UAAS,GAClB,GACF;AAEJ;;;AEbA,OAAuB;;;ACEvB,IAAO,gBAAQ;","names":[]}
+{"version":3,"sources":["../../src/KeyboardKey.tsx","../../src/KeyboardKeyHybrid.tsx","../../src/styles.ts","../../src/KeyboardKeyTailwind.tsx","../../src/KeyboardKeyTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { KeyboardKeyHybrid } from \"./KeyboardKeyHybrid\";\nimport type { TypeKeyboardKeyProps } from \"./KeyboardKeyTypes\";\n\n/**\n * KeyboardKey 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 KeyboardKey = (props: TypeKeyboardKeyProps) => (\n  <KeyboardKeyHybrid {...props} />\n);\n","/**\n * Hybrid KeyboardKey Component\n * Automatically chooses between Tailwind and styled-components based on props\n */\n\nimport * as React from \"react\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport Container from \"./styles\"; // Styled-components version\nimport { KeyboardKeyTailwind } from \"./KeyboardKeyTailwind\"; // Tailwind version\nimport { hasStyledProps } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeKeyboardKeyProps } from \"./KeyboardKeyTypes\";\n\nexport const KeyboardKeyHybrid = ({\n  children,\n  ...rest\n}: TypeKeyboardKeyProps) => {\n  if (hasStyledProps(rest)) {\n    return (\n      <Container {...rest}>\n        <kbd data-qa-keyboardkey={children}>\n          <Text>{children}</Text>\n        </kbd>\n      </Container>\n    );\n  }\n\n  // Use Tailwind version (preferred - better performance)\n  return <KeyboardKeyTailwind {...rest}>{children}</KeyboardKeyTailwind>;\n};\n\nKeyboardKeyHybrid.displayName = \"KeyboardKey\";\n","import styled from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\n\nconst Container = styled.div`\n  display: inline-flex;\n  color: ${(props) => props.theme.colors.text.body};\n  background-color: ${(props) => props.theme.colors.container.background.base};\n  border: 1px solid ${(props) => props.theme.colors.container.border.base};\n  border-radius: ${(props) => props.theme.radii[500]};\n  box-shadow: ${(props) => props.theme.shadows.low};\n  padding: 0 ${(props) => props.theme.space[200]};\n  min-width: 20px;\n  justify-content: center;\n\n  ${COMMON}\n`;\n\nexport default Container;\n","/**\n * Tailwind CSS implementation of KeyboardKey component\n * Uses Seeds keyboard-key CSS classes from keyboard-key.css\n */\n\nimport * as React from \"react\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport type { TypeKeyboardKeyProps } from \"./KeyboardKeyTypes\";\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 KeyboardKeyTailwind = ({\n  children,\n  className,\n  ...rest\n}: TypeKeyboardKeyProps) => {\n  return (\n    <div\n      className={cn(\"seeds-keyboard-key\", className)}\n      {...(rest as React.ComponentPropsWithoutRef<\"div\">)}\n    >\n      <kbd data-qa-keyboardkey={children}>\n        <Text>{children}</Text>\n      </kbd>\n    </div>\n  );\n};\n\nKeyboardKeyTailwind.displayName = \"KeyboardKeyTailwind\";\n","import * as React from \"react\";\nimport type {\n  TypeSystemCommonProps,\n  TypeStyledComponentsCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\nexport interface TypeKeyboardKeyProps\n  extends TypeStyledComponentsCommonProps,\n    TypeSystemCommonProps,\n    Omit<React.ComponentPropsWithoutRef<\"div\">, \"color\"> {\n  /** Text to display inside of key */\n  children: string;\n}\n","import { KeyboardKey } from \"./KeyboardKey\";\n\nexport default KeyboardKey;\nexport { KeyboardKey };\nexport * from \"./KeyboardKeyTypes\";\n"],"mappings":";AAAA,OAAuB;;;ACKvB,OAAuB;AACvB,OAAOA,WAAU;;;ACNjB,OAAO,YAAY;AACnB,SAAS,cAAc;AAEvB,IAAM,YAAY,OAAO;AAAA;AAAA,WAEd,CAAC,UAAU,MAAM,MAAM,OAAO,KAAK,IAAI;AAAA,sBAC5B,CAAC,UAAU,MAAM,MAAM,OAAO,UAAU,WAAW,IAAI;AAAA,sBACvD,CAAC,UAAU,MAAM,MAAM,OAAO,UAAU,OAAO,IAAI;AAAA,mBACtD,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,gBACpC,CAAC,UAAU,MAAM,MAAM,QAAQ,GAAG;AAAA,eACnC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA,IAI5C,MAAM;AAAA;AAGV,IAAO,iBAAQ;;;ACZf,OAAuB;AACvB,OAAO,UAAU;AAqCT;AAjCR,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,sBAAsB,CAAC;AAAA,EAClC;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA4B;AAC1B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,sBAAsB,SAAS;AAAA,MAC5C,GAAI;AAAA,MAEL,8BAAC,SAAI,uBAAqB,UACxB,8BAAC,QAAM,UAAS,GAClB;AAAA;AAAA,EACF;AAEJ;AAEA,oBAAoB,cAAc;;;AFxClC,SAAS,sBAAsB;AAWrB,gBAAAC,YAAA;AARH,IAAM,oBAAoB,CAAC;AAAA,EAChC;AAAA,EACA,GAAG;AACL,MAA4B;AAC1B,MAAI,eAAe,IAAI,GAAG;AACxB,WACE,gBAAAA,KAAC,kBAAW,GAAG,MACb,0BAAAA,KAAC,SAAI,uBAAqB,UACxB,0BAAAA,KAACC,OAAA,EAAM,UAAS,GAClB,GACF;AAAA,EAEJ;AAGA,SAAO,gBAAAD,KAAC,uBAAqB,GAAG,MAAO,UAAS;AAClD;AAEA,kBAAkB,cAAc;;;ADpB9B,gBAAAE,YAAA;AADK,IAAM,cAAc,CAAC,UAC1B,gBAAAA,KAAC,qBAAmB,GAAG,OAAO;;;AIVhC,OAAuB;;;ACEvB,IAAO,gBAAQ;","names":["Text","jsx","Text","jsx"]}

package/dist/index.d.mts

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

package/dist/index.d.ts

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

package/dist/index.js

@@ -36,8 +36,11 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/KeyboardKey.tsx
-var React = require("react");
-var import_seeds_react_text = __toESM(require("@sproutsocial/seeds-react-text"));
+var React3 = require("react");
+
+// src/KeyboardKeyHybrid.tsx
+var React2 = require("react");
+var import_seeds_react_text2 = __toESM(require("@sproutsocial/seeds-react-text"));
 
 // src/styles.ts
 var import_styled_components = __toESM(require("styled-components"));
@@ -57,14 +60,62 @@ var Container = import_styled_components.default.div`
 `;
 var styles_default = Container;
 
-// src/KeyboardKey.tsx
+// src/KeyboardKeyTailwind.tsx
+var React = require("react");
+var import_seeds_react_text = __toESM(require("@sproutsocial/seeds-react-text"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var KeyboardKey = ({ children, ...rest }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(styles_default, { ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("kbd", { "data-qa-keyboardkey": children, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_text.default, { children }) }) });
+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 KeyboardKeyTailwind = ({
+  children,
+  className,
+  ...rest
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: cn("seeds-keyboard-key", className),
+      ...rest,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("kbd", { "data-qa-keyboardkey": children, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_text.default, { children }) })
+    }
+  );
+};
+KeyboardKeyTailwind.displayName = "KeyboardKeyTailwind";
+
+// src/KeyboardKeyHybrid.tsx
+var import_seeds_react_system_props2 = require("@sproutsocial/seeds-react-system-props");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var KeyboardKeyHybrid = ({
+  children,
+  ...rest
+}) => {
+  if ((0, import_seeds_react_system_props2.hasStyledProps)(rest)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(styles_default, { ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("kbd", { "data-qa-keyboardkey": children, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_seeds_react_text2.default, { children }) }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(KeyboardKeyTailwind, { ...rest, children });
 };
+KeyboardKeyHybrid.displayName = "KeyboardKey";
+
+// src/KeyboardKey.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var KeyboardKey = (props) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(KeyboardKeyHybrid, { ...props });
 
 // src/KeyboardKeyTypes.ts
-var React2 = require("react");
+var React4 = require("react");
 
 // src/index.ts
 var index_default = KeyboardKey;

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/KeyboardKey.tsx","../src/styles.ts","../src/KeyboardKeyTypes.ts"],"sourcesContent":["import { KeyboardKey } from \"./KeyboardKey\";\n\nexport default KeyboardKey;\nexport { KeyboardKey };\nexport * from \"./KeyboardKeyTypes\";\n","import * as React from \"react\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport Container from \"./styles\";\nimport type { TypeKeyboardKeyProps } from \"./KeyboardKeyTypes\";\n\nexport const KeyboardKey = ({ children, ...rest }: TypeKeyboardKeyProps) => {\n  return (\n    <Container {...rest}>\n      <kbd data-qa-keyboardkey={children}>\n        <Text>{children}</Text>\n      </kbd>\n    </Container>\n  );\n};\n","import styled from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\n\nconst Container = styled.div`\n  display: inline-flex;\n  color: ${(props) => props.theme.colors.text.body};\n  background-color: ${(props) => props.theme.colors.container.background.base};\n  border: 1px solid ${(props) => props.theme.colors.container.border.base};\n  border-radius: ${(props) => props.theme.radii[500]};\n  box-shadow: ${(props) => props.theme.shadows.low};\n  padding: 0 ${(props) => props.theme.space[200]};\n  min-width: 20px;\n  justify-content: center;\n\n  ${COMMON}\n`;\n\nexport default Container;\n","import * as React from \"react\";\nimport type {\n  TypeSystemCommonProps,\n  TypeStyledComponentsCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\nexport interface TypeKeyboardKeyProps\n  extends TypeStyledComponentsCommonProps,\n    TypeSystemCommonProps,\n    Omit<React.ComponentPropsWithoutRef<\"div\">, \"color\"> {\n  /** Text to display inside of key */\n  children: string;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;AACvB,8BAAiB;;;ACDjB,+BAAmB;AACnB,sCAAuB;AAEvB,IAAM,YAAY,yBAAAA,QAAO;AAAA;AAAA,WAEd,CAAC,UAAU,MAAM,MAAM,OAAO,KAAK,IAAI;AAAA,sBAC5B,CAAC,UAAU,MAAM,MAAM,OAAO,UAAU,WAAW,IAAI;AAAA,sBACvD,CAAC,UAAU,MAAM,MAAM,OAAO,UAAU,OAAO,IAAI;AAAA,mBACtD,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,gBACpC,CAAC,UAAU,MAAM,MAAM,QAAQ,GAAG;AAAA,eACnC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA,IAI5C,sCAAM;AAAA;AAGV,IAAO,iBAAQ;;;ADRP;AAJD,IAAM,cAAc,CAAC,EAAE,UAAU,GAAG,KAAK,MAA4B;AAC1E,SACE,4CAAC,kBAAW,GAAG,MACb,sDAAC,SAAI,uBAAqB,UACxB,sDAAC,wBAAAC,SAAA,EAAM,UAAS,GAClB,GACF;AAEJ;;;AEbA,IAAAC,SAAuB;;;AHEvB,IAAO,gBAAQ;","names":["styled","Text","React"]}
+{"version":3,"sources":["../src/index.ts","../src/KeyboardKey.tsx","../src/KeyboardKeyHybrid.tsx","../src/styles.ts","../src/KeyboardKeyTailwind.tsx","../src/KeyboardKeyTypes.ts"],"sourcesContent":["import { KeyboardKey } from \"./KeyboardKey\";\n\nexport default KeyboardKey;\nexport { KeyboardKey };\nexport * from \"./KeyboardKeyTypes\";\n","import * as React from \"react\";\nimport { KeyboardKeyHybrid } from \"./KeyboardKeyHybrid\";\nimport type { TypeKeyboardKeyProps } from \"./KeyboardKeyTypes\";\n\n/**\n * KeyboardKey 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 KeyboardKey = (props: TypeKeyboardKeyProps) => (\n  <KeyboardKeyHybrid {...props} />\n);\n","/**\n * Hybrid KeyboardKey Component\n * Automatically chooses between Tailwind and styled-components based on props\n */\n\nimport * as React from \"react\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport Container from \"./styles\"; // Styled-components version\nimport { KeyboardKeyTailwind } from \"./KeyboardKeyTailwind\"; // Tailwind version\nimport { hasStyledProps } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeKeyboardKeyProps } from \"./KeyboardKeyTypes\";\n\nexport const KeyboardKeyHybrid = ({\n  children,\n  ...rest\n}: TypeKeyboardKeyProps) => {\n  if (hasStyledProps(rest)) {\n    return (\n      <Container {...rest}>\n        <kbd data-qa-keyboardkey={children}>\n          <Text>{children}</Text>\n        </kbd>\n      </Container>\n    );\n  }\n\n  // Use Tailwind version (preferred - better performance)\n  return <KeyboardKeyTailwind {...rest}>{children}</KeyboardKeyTailwind>;\n};\n\nKeyboardKeyHybrid.displayName = \"KeyboardKey\";\n","import styled from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\n\nconst Container = styled.div`\n  display: inline-flex;\n  color: ${(props) => props.theme.colors.text.body};\n  background-color: ${(props) => props.theme.colors.container.background.base};\n  border: 1px solid ${(props) => props.theme.colors.container.border.base};\n  border-radius: ${(props) => props.theme.radii[500]};\n  box-shadow: ${(props) => props.theme.shadows.low};\n  padding: 0 ${(props) => props.theme.space[200]};\n  min-width: 20px;\n  justify-content: center;\n\n  ${COMMON}\n`;\n\nexport default Container;\n","/**\n * Tailwind CSS implementation of KeyboardKey component\n * Uses Seeds keyboard-key CSS classes from keyboard-key.css\n */\n\nimport * as React from \"react\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport type { TypeKeyboardKeyProps } from \"./KeyboardKeyTypes\";\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 KeyboardKeyTailwind = ({\n  children,\n  className,\n  ...rest\n}: TypeKeyboardKeyProps) => {\n  return (\n    <div\n      className={cn(\"seeds-keyboard-key\", className)}\n      {...(rest as React.ComponentPropsWithoutRef<\"div\">)}\n    >\n      <kbd data-qa-keyboardkey={children}>\n        <Text>{children}</Text>\n      </kbd>\n    </div>\n  );\n};\n\nKeyboardKeyTailwind.displayName = \"KeyboardKeyTailwind\";\n","import * as React from \"react\";\nimport type {\n  TypeSystemCommonProps,\n  TypeStyledComponentsCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\nexport interface TypeKeyboardKeyProps\n  extends TypeStyledComponentsCommonProps,\n    TypeSystemCommonProps,\n    Omit<React.ComponentPropsWithoutRef<\"div\">, \"color\"> {\n  /** Text to display inside of key */\n  children: string;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,IAAAA,SAAuB;;;ACKvB,IAAAC,SAAuB;AACvB,IAAAC,2BAAiB;;;ACNjB,+BAAmB;AACnB,sCAAuB;AAEvB,IAAM,YAAY,yBAAAC,QAAO;AAAA;AAAA,WAEd,CAAC,UAAU,MAAM,MAAM,OAAO,KAAK,IAAI;AAAA,sBAC5B,CAAC,UAAU,MAAM,MAAM,OAAO,UAAU,WAAW,IAAI;AAAA,sBACvD,CAAC,UAAU,MAAM,MAAM,OAAO,UAAU,OAAO,IAAI;AAAA,mBACtD,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,gBACpC,CAAC,UAAU,MAAM,MAAM,QAAQ,GAAG;AAAA,eACnC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA,IAI5C,sCAAM;AAAA;AAGV,IAAO,iBAAQ;;;ACZf,YAAuB;AACvB,8BAAiB;AAqCT;AAjCR,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,sBAAsB,CAAC;AAAA,EAClC;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA4B;AAC1B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,sBAAsB,SAAS;AAAA,MAC5C,GAAI;AAAA,MAEL,sDAAC,SAAI,uBAAqB,UACxB,sDAAC,wBAAAC,SAAA,EAAM,UAAS,GAClB;AAAA;AAAA,EACF;AAEJ;AAEA,oBAAoB,cAAc;;;AFxClC,IAAAC,mCAA+B;AAWrB,IAAAC,sBAAA;AARH,IAAM,oBAAoB,CAAC;AAAA,EAChC;AAAA,EACA,GAAG;AACL,MAA4B;AAC1B,UAAI,iDAAe,IAAI,GAAG;AACxB,WACE,6CAAC,kBAAW,GAAG,MACb,uDAAC,SAAI,uBAAqB,UACxB,uDAAC,yBAAAC,SAAA,EAAM,UAAS,GAClB,GACF;AAAA,EAEJ;AAGA,SAAO,6CAAC,uBAAqB,GAAG,MAAO,UAAS;AAClD;AAEA,kBAAkB,cAAc;;;ADpB9B,IAAAC,sBAAA;AADK,IAAM,cAAc,CAAC,UAC1B,6CAAC,qBAAmB,GAAG,OAAO;;;AIVhC,IAAAC,SAAuB;;;ALEvB,IAAO,gBAAQ;","names":["React","React","import_seeds_react_text","styled","Text","import_seeds_react_system_props","import_jsx_runtime","Text","import_jsx_runtime","React"]}

package/dist/keyboard-key.css

@@ -0,0 +1,24 @@
+/**
+ * Seeds KeyboardKey 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-keyboard-key {
+    display: inline-flex;
+    color: var(--color-text-body);
+    background-color: var(--color-container-bg-base);
+    border: 1px solid var(--color-container-border-base);
+    border-radius: var(--radius-500);
+    box-shadow: var(--shadow-low);
+    padding: 0 var(--space-200);
+    min-width: 20px;
+    justify-content: center;
+  }
+}

package/package.json

@@ -1,15 +1,23 @@
 {
   "name": "@sproutsocial/seeds-react-keyboard-key",
-  "version": "1.0.25",
+  "version": "1.0.27",
   "description": "Seeds React KeyboardKey",
   "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/keyboard-key.css": "./dist/keyboard-key.css"
+  },
   "scripts": {
-    "build": "tsup --dts",
-    "build:debug": "tsup --dts --metafile",
+    "build": "tsup --dts && cp src/keyboard-key.css dist/keyboard-key.css",
+    "build:debug": "tsup --dts --metafile && cp src/keyboard-key.css dist/keyboard-key.css",
     "dev": "tsup --watch --dts",
     "clean": "rm -rf .turbo dist",
     "clean:modules": "rm -rf node_modules",
@@ -18,9 +26,9 @@
     "test:watch": "jest --watch --coverage=false"
   },
   "dependencies": {
-    "@sproutsocial/seeds-react-theme": "^4.2.0",
-    "@sproutsocial/seeds-react-system-props": "^3.1.1",
-    "@sproutsocial/seeds-react-text": "^1.5.0"
+    "@sproutsocial/seeds-react-theme": "^4.2.1",
+    "@sproutsocial/seeds-react-system-props": "^3.1.2",
+    "@sproutsocial/seeds-react-text": "^1.5.1"
   },
   "devDependencies": {
     "@types/react": "^18.0.0",

package/src/KeyboardKey.tsx

@@ -1,14 +1,12 @@
 import * as React from "react";
-import Text from "@sproutsocial/seeds-react-text";
-import Container from "./styles";
+import { KeyboardKeyHybrid } from "./KeyboardKeyHybrid";
 import type { TypeKeyboardKeyProps } from "./KeyboardKeyTypes";
 
-export const KeyboardKey = ({ children, ...rest }: TypeKeyboardKeyProps) => {
-  return (
-    <Container {...rest}>
-      <kbd data-qa-keyboardkey={children}>
-        <Text>{children}</Text>
-      </kbd>
-    </Container>
-  );
-};
+/**
+ * KeyboardKey component. Automatically routes between the Tailwind
+ * implementation (preferred) and the styled-components implementation (for
+ * consumers using system props or styled() extension).
+ */
+export const KeyboardKey = (props: TypeKeyboardKeyProps) => (
+  <KeyboardKeyHybrid {...props} />
+);

package/src/KeyboardKeyHybrid.tsx

@@ -0,0 +1,31 @@
+/**
+ * Hybrid KeyboardKey Component
+ * Automatically chooses between Tailwind and styled-components based on props
+ */
+
+import * as React from "react";
+import Text from "@sproutsocial/seeds-react-text";
+import Container from "./styles"; // Styled-components version
+import { KeyboardKeyTailwind } from "./KeyboardKeyTailwind"; // Tailwind version
+import { hasStyledProps } from "@sproutsocial/seeds-react-system-props";
+import type { TypeKeyboardKeyProps } from "./KeyboardKeyTypes";
+
+export const KeyboardKeyHybrid = ({
+  children,
+  ...rest
+}: TypeKeyboardKeyProps) => {
+  if (hasStyledProps(rest)) {
+    return (
+      <Container {...rest}>
+        <kbd data-qa-keyboardkey={children}>
+          <Text>{children}</Text>
+        </kbd>
+      </Container>
+    );
+  }
+
+  // Use Tailwind version (preferred - better performance)
+  return <KeyboardKeyTailwind {...rest}>{children}</KeyboardKeyTailwind>;
+};
+
+KeyboardKeyHybrid.displayName = "KeyboardKey";

package/src/KeyboardKeyTailwind.tsx

@@ -0,0 +1,50 @@
+/**
+ * Tailwind CSS implementation of KeyboardKey component
+ * Uses Seeds keyboard-key CSS classes from keyboard-key.css
+ */
+
+import * as React from "react";
+import Text from "@sproutsocial/seeds-react-text";
+import type { TypeKeyboardKeyProps } from "./KeyboardKeyTypes";
+
+// 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 KeyboardKeyTailwind = ({
+  children,
+  className,
+  ...rest
+}: TypeKeyboardKeyProps) => {
+  return (
+    <div
+      className={cn("seeds-keyboard-key", className)}
+      {...(rest as React.ComponentPropsWithoutRef<"div">)}
+    >
+      <kbd data-qa-keyboardkey={children}>
+        <Text>{children}</Text>
+      </kbd>
+    </div>
+  );
+};
+
+KeyboardKeyTailwind.displayName = "KeyboardKeyTailwind";

package/src/__tests__/features.test.tsx

@@ -8,4 +8,28 @@ describe("KeyboardKey", () => {
     render(<KeyboardKey>{children}</KeyboardKey>);
     expect(screen.getByText(children)).toBeInTheDocument();
   });
+
+  it("renders the Tailwind path with the seeds-keyboard-key class and qa attribute", () => {
+    render(<KeyboardKey>esc</KeyboardKey>);
+    const kbd = screen.getByText("esc").closest("kbd");
+    expect(kbd).toHaveAttribute("data-qa-keyboardkey", "esc");
+    expect(kbd?.parentElement).toHaveClass("seeds-keyboard-key");
+  });
+
+  it("merges a consumer className on the Tailwind path (styled() contract)", () => {
+    render(<KeyboardKey className="custom">esc</KeyboardKey>);
+    const container = screen.getByText("esc").closest("kbd")?.parentElement;
+    expect(container).toHaveClass("seeds-keyboard-key");
+    expect(container).toHaveClass("custom");
+  });
+
+  it("routes through the styled-components path when a system prop is present", () => {
+    // mt is a system prop, which routes KeyboardKey through the styled-components path
+    render(<KeyboardKey mt={200}>esc</KeyboardKey>);
+    expect(screen.getByText("esc")).toBeInTheDocument();
+    expect(screen.getByText("esc").closest("kbd")).toHaveAttribute(
+      "data-qa-keyboardkey",
+      "esc"
+    );
+  });
 });

package/src/keyboard-key.css

@@ -0,0 +1,24 @@
+/**
+ * Seeds KeyboardKey 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-keyboard-key {
+    display: inline-flex;
+    color: var(--color-text-body);
+    background-color: var(--color-container-bg-base);
+    border: 1px solid var(--color-container-border-base);
+    border-radius: var(--radius-500);
+    box-shadow: var(--shadow-low);
+    padding: 0 var(--space-200);
+    min-width: 20px;
+    justify-content: center;
+  }
+}