@sproutsocial/seeds-react-chat-bubble 0.2.0

package/dist/esm/index.js

@@ -0,0 +1,61 @@
+// src/styles.ts
+import styled from "styled-components";
+import { COMMON } from "@sproutsocial/seeds-react-system-props";
+var StyledChatBubble = styled.div`
+  font-family: ${(p) => p.theme.fontFamily};
+  ${(p) => p.size === "small" ? p.theme.typography[200] : p.theme.typography[300]};
+  border-radius: ${(p) => {
+  const radius = p.size === "small" ? "12px" : "16px";
+  return p.type === "sent" ? `${radius} ${radius} 0px ${radius}` : `${radius} ${radius} ${radius} 0px`;
+}};
+  display: inline-flex;
+  align-items: center;
+  align-self: ${(p) => p.type === "sent" ? "flex-end" : "flex-start"};
+  max-width: 80%;
+  word-break: break-word;
+  color: ${(p) => p.type === "sent" ? p.theme.colors.text.inverse : p.theme.colors.text.body};
+  background: ${(p) => p.type === "sent" ? p.theme.colors.button.primary.background.base : p.theme.colors.container.background.decorative.blue};
+  padding: ${(p) => p.size === "small" ? `${p.theme.space[200]} ${p.theme.space[300]}` : `${p.theme.space[300]} ${p.theme.space[400]}`};
+  ${COMMON};
+`;
+
+// src/ChatBubble.tsx
+import { jsx } from "react/jsx-runtime";
+var ChatBubble = ({
+  children,
+  type = "received",
+  size = "default",
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsx(
+    StyledChatBubble,
+    {
+      type,
+      size,
+      "data-qa-chat-bubble": true,
+      ...rest,
+      children
+    }
+  );
+};
+var ChatBubble_default = ChatBubble;
+
+// src/constants.ts
+var chatBubbleTypes = {
+  received: "received",
+  sent: "sent"
+};
+var chatBubbleSizes = {
+  default: "default",
+  small: "small"
+};
+
+// src/index.ts
+var index_default = ChatBubble_default;
+export {
+  ChatBubble_default as ChatBubble,
+  chatBubbleSizes,
+  chatBubbleTypes,
+  index_default as default
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/styles.ts","../../src/ChatBubble.tsx","../../src/constants.ts","../../src/index.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeChatBubbleType, TypeChatBubbleSize } from \"./ChatBubbleTypes\";\n\nexport const StyledChatBubble = styled.div<{\n  type: TypeChatBubbleType;\n  size: TypeChatBubbleSize;\n}>`\n  font-family: ${(p) => p.theme.fontFamily};\n  ${(p) =>\n    p.size === \"small\" ? p.theme.typography[200] : p.theme.typography[300]};\n  border-radius: ${(p) => {\n    const radius = p.size === \"small\" ? \"12px\" : \"16px\";\n    return p.type === \"sent\"\n      ? `${radius} ${radius} 0px ${radius}`\n      : `${radius} ${radius} ${radius} 0px`;\n  }};\n  display: inline-flex;\n  align-items: center;\n  align-self: ${(p) => (p.type === \"sent\" ? \"flex-end\" : \"flex-start\")};\n  max-width: 80%;\n  word-break: break-word;\n  color: ${(p) =>\n    p.type === \"sent\"\n      ? p.theme.colors.text.inverse\n      : p.theme.colors.text.body};\n  background: ${(p) =>\n    p.type === \"sent\"\n      ? p.theme.colors.button.primary.background.base\n      : p.theme.colors.container.background.decorative.blue};\n  padding: ${(p) =>\n    p.size === \"small\"\n      ? `${p.theme.space[200]} ${p.theme.space[300]}`\n      : `${p.theme.space[300]} ${p.theme.space[400]}`};\n  ${COMMON};\n`;\n","import { StyledChatBubble } from \"./styles\";\nimport type { TypeChatBubbleProps } from \"./ChatBubbleTypes\";\n\nconst ChatBubble = ({\n  children,\n  type = \"received\",\n  size = \"default\",\n  ...rest\n}: TypeChatBubbleProps) => {\n  return (\n    <StyledChatBubble\n      type={type}\n      size={size}\n      data-qa-chat-bubble\n      {...rest}\n    >\n      {children}\n    </StyledChatBubble>\n  );\n};\n\nexport default ChatBubble;\n","export const chatBubbleTypes = {\n  received: \"received\",\n  sent: \"sent\",\n} as const;\n\nexport const chatBubbleSizes = {\n  default: \"default\",\n  small: \"small\",\n} as const;\n","import ChatBubble from \"./ChatBubble\";\n\nexport default ChatBubble;\nexport { ChatBubble };\nexport * from \"./ChatBubbleTypes\";\nexport * from \"./constants\";\n"],"mappings":";AAAA,OAAO,YAAY;AACnB,SAAS,cAAc;AAGhB,IAAM,mBAAmB,OAAO;AAAA,iBAItB,CAAC,MAAM,EAAE,MAAM,UAAU;AAAA,IACtC,CAAC,MACD,EAAE,SAAS,UAAU,EAAE,MAAM,WAAW,GAAG,IAAI,EAAE,MAAM,WAAW,GAAG,CAAC;AAAA,mBACvD,CAAC,MAAM;AACtB,QAAM,SAAS,EAAE,SAAS,UAAU,SAAS;AAC7C,SAAO,EAAE,SAAS,SACd,GAAG,MAAM,IAAI,MAAM,QAAQ,MAAM,KACjC,GAAG,MAAM,IAAI,MAAM,IAAI,MAAM;AACnC,CAAC;AAAA;AAAA;AAAA,gBAGa,CAAC,MAAO,EAAE,SAAS,SAAS,aAAa,YAAa;AAAA;AAAA;AAAA,WAG3D,CAAC,MACR,EAAE,SAAS,SACP,EAAE,MAAM,OAAO,KAAK,UACpB,EAAE,MAAM,OAAO,KAAK,IAAI;AAAA,gBAChB,CAAC,MACb,EAAE,SAAS,SACP,EAAE,MAAM,OAAO,OAAO,QAAQ,WAAW,OACzC,EAAE,MAAM,OAAO,UAAU,WAAW,WAAW,IAAI;AAAA,aAC9C,CAAC,MACV,EAAE,SAAS,UACP,GAAG,EAAE,MAAM,MAAM,GAAG,CAAC,IAAI,EAAE,MAAM,MAAM,GAAG,CAAC,KAC3C,GAAG,EAAE,MAAM,MAAM,GAAG,CAAC,IAAI,EAAE,MAAM,MAAM,GAAG,CAAC,EAAE;AAAA,IACjD,MAAM;AAAA;;;ACxBN;AAPJ,IAAM,aAAa,CAAC;AAAA,EAClB;AAAA,EACA,OAAO;AAAA,EACP,OAAO;AAAA,EACP,GAAG;AACL,MAA2B;AACzB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,uBAAmB;AAAA,MAClB,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,qBAAQ;;;ACrBR,IAAM,kBAAkB;AAAA,EAC7B,UAAU;AAAA,EACV,MAAM;AACR;AAEO,IAAM,kBAAkB;AAAA,EAC7B,SAAS;AAAA,EACT,OAAO;AACT;;;ACNA,IAAO,gBAAQ;","names":[]}

package/dist/index.d.mts

@@ -0,0 +1,25 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { TypeSystemCommonProps, TypeStyledComponentsCommonProps } from '@sproutsocial/seeds-react-system-props';
+
+declare const chatBubbleTypes: {
+    readonly received: "received";
+    readonly sent: "sent";
+};
+declare const chatBubbleSizes: {
+    readonly default: "default";
+    readonly small: "small";
+};
+
+type TypeChatBubbleType = keyof typeof chatBubbleTypes;
+type TypeChatBubbleSize = keyof typeof chatBubbleSizes;
+interface TypeBaseChatBubbleProps extends Omit<React.ComponentPropsWithoutRef<"div">, keyof TypeSystemCommonProps>, TypeSystemCommonProps, TypeStyledComponentsCommonProps {
+}
+interface TypeChatBubbleProps extends TypeBaseChatBubbleProps {
+    children?: React.ReactNode;
+    type?: TypeChatBubbleType;
+    size?: TypeChatBubbleSize;
+}
+
+declare const ChatBubble: ({ children, type, size, ...rest }: TypeChatBubbleProps) => react_jsx_runtime.JSX.Element;
+
+export { ChatBubble, type TypeBaseChatBubbleProps, type TypeChatBubbleProps, type TypeChatBubbleSize, type TypeChatBubbleType, chatBubbleSizes, chatBubbleTypes, ChatBubble as default };

package/dist/index.d.ts

@@ -0,0 +1,25 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { TypeSystemCommonProps, TypeStyledComponentsCommonProps } from '@sproutsocial/seeds-react-system-props';
+
+declare const chatBubbleTypes: {
+    readonly received: "received";
+    readonly sent: "sent";
+};
+declare const chatBubbleSizes: {
+    readonly default: "default";
+    readonly small: "small";
+};
+
+type TypeChatBubbleType = keyof typeof chatBubbleTypes;
+type TypeChatBubbleSize = keyof typeof chatBubbleSizes;
+interface TypeBaseChatBubbleProps extends Omit<React.ComponentPropsWithoutRef<"div">, keyof TypeSystemCommonProps>, TypeSystemCommonProps, TypeStyledComponentsCommonProps {
+}
+interface TypeChatBubbleProps extends TypeBaseChatBubbleProps {
+    children?: React.ReactNode;
+    type?: TypeChatBubbleType;
+    size?: TypeChatBubbleSize;
+}
+
+declare const ChatBubble: ({ children, type, size, ...rest }: TypeChatBubbleProps) => react_jsx_runtime.JSX.Element;
+
+export { ChatBubble, type TypeBaseChatBubbleProps, type TypeChatBubbleProps, type TypeChatBubbleSize, type TypeChatBubbleType, chatBubbleSizes, chatBubbleTypes, ChatBubble as default };

package/dist/index.js

@@ -0,0 +1,100 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  ChatBubble: () => ChatBubble_default,
+  chatBubbleSizes: () => chatBubbleSizes,
+  chatBubbleTypes: () => chatBubbleTypes,
+  default: () => index_default
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/styles.ts
+var import_styled_components = __toESM(require("styled-components"));
+var import_seeds_react_system_props = require("@sproutsocial/seeds-react-system-props");
+var StyledChatBubble = import_styled_components.default.div`
+  font-family: ${(p) => p.theme.fontFamily};
+  ${(p) => p.size === "small" ? p.theme.typography[200] : p.theme.typography[300]};
+  border-radius: ${(p) => {
+  const radius = p.size === "small" ? "12px" : "16px";
+  return p.type === "sent" ? `${radius} ${radius} 0px ${radius}` : `${radius} ${radius} ${radius} 0px`;
+}};
+  display: inline-flex;
+  align-items: center;
+  align-self: ${(p) => p.type === "sent" ? "flex-end" : "flex-start"};
+  max-width: 80%;
+  word-break: break-word;
+  color: ${(p) => p.type === "sent" ? p.theme.colors.text.inverse : p.theme.colors.text.body};
+  background: ${(p) => p.type === "sent" ? p.theme.colors.button.primary.background.base : p.theme.colors.container.background.decorative.blue};
+  padding: ${(p) => p.size === "small" ? `${p.theme.space[200]} ${p.theme.space[300]}` : `${p.theme.space[300]} ${p.theme.space[400]}`};
+  ${import_seeds_react_system_props.COMMON};
+`;
+
+// src/ChatBubble.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var ChatBubble = ({
+  children,
+  type = "received",
+  size = "default",
+  ...rest
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    StyledChatBubble,
+    {
+      type,
+      size,
+      "data-qa-chat-bubble": true,
+      ...rest,
+      children
+    }
+  );
+};
+var ChatBubble_default = ChatBubble;
+
+// src/constants.ts
+var chatBubbleTypes = {
+  received: "received",
+  sent: "sent"
+};
+var chatBubbleSizes = {
+  default: "default",
+  small: "small"
+};
+
+// src/index.ts
+var index_default = ChatBubble_default;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ChatBubble,
+  chatBubbleSizes,
+  chatBubbleTypes
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/styles.ts","../src/ChatBubble.tsx","../src/constants.ts"],"sourcesContent":["import ChatBubble from \"./ChatBubble\";\n\nexport default ChatBubble;\nexport { ChatBubble };\nexport * from \"./ChatBubbleTypes\";\nexport * from \"./constants\";\n","import styled from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeChatBubbleType, TypeChatBubbleSize } from \"./ChatBubbleTypes\";\n\nexport const StyledChatBubble = styled.div<{\n  type: TypeChatBubbleType;\n  size: TypeChatBubbleSize;\n}>`\n  font-family: ${(p) => p.theme.fontFamily};\n  ${(p) =>\n    p.size === \"small\" ? p.theme.typography[200] : p.theme.typography[300]};\n  border-radius: ${(p) => {\n    const radius = p.size === \"small\" ? \"12px\" : \"16px\";\n    return p.type === \"sent\"\n      ? `${radius} ${radius} 0px ${radius}`\n      : `${radius} ${radius} ${radius} 0px`;\n  }};\n  display: inline-flex;\n  align-items: center;\n  align-self: ${(p) => (p.type === \"sent\" ? \"flex-end\" : \"flex-start\")};\n  max-width: 80%;\n  word-break: break-word;\n  color: ${(p) =>\n    p.type === \"sent\"\n      ? p.theme.colors.text.inverse\n      : p.theme.colors.text.body};\n  background: ${(p) =>\n    p.type === \"sent\"\n      ? p.theme.colors.button.primary.background.base\n      : p.theme.colors.container.background.decorative.blue};\n  padding: ${(p) =>\n    p.size === \"small\"\n      ? `${p.theme.space[200]} ${p.theme.space[300]}`\n      : `${p.theme.space[300]} ${p.theme.space[400]}`};\n  ${COMMON};\n`;\n","import { StyledChatBubble } from \"./styles\";\nimport type { TypeChatBubbleProps } from \"./ChatBubbleTypes\";\n\nconst ChatBubble = ({\n  children,\n  type = \"received\",\n  size = \"default\",\n  ...rest\n}: TypeChatBubbleProps) => {\n  return (\n    <StyledChatBubble\n      type={type}\n      size={size}\n      data-qa-chat-bubble\n      {...rest}\n    >\n      {children}\n    </StyledChatBubble>\n  );\n};\n\nexport default ChatBubble;\n","export const chatBubbleTypes = {\n  received: \"received\",\n  sent: \"sent\",\n} as const;\n\nexport const chatBubbleSizes = {\n  default: \"default\",\n  small: \"small\",\n} as const;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,+BAAmB;AACnB,sCAAuB;AAGhB,IAAM,mBAAmB,yBAAAA,QAAO;AAAA,iBAItB,CAAC,MAAM,EAAE,MAAM,UAAU;AAAA,IACtC,CAAC,MACD,EAAE,SAAS,UAAU,EAAE,MAAM,WAAW,GAAG,IAAI,EAAE,MAAM,WAAW,GAAG,CAAC;AAAA,mBACvD,CAAC,MAAM;AACtB,QAAM,SAAS,EAAE,SAAS,UAAU,SAAS;AAC7C,SAAO,EAAE,SAAS,SACd,GAAG,MAAM,IAAI,MAAM,QAAQ,MAAM,KACjC,GAAG,MAAM,IAAI,MAAM,IAAI,MAAM;AACnC,CAAC;AAAA;AAAA;AAAA,gBAGa,CAAC,MAAO,EAAE,SAAS,SAAS,aAAa,YAAa;AAAA;AAAA;AAAA,WAG3D,CAAC,MACR,EAAE,SAAS,SACP,EAAE,MAAM,OAAO,KAAK,UACpB,EAAE,MAAM,OAAO,KAAK,IAAI;AAAA,gBAChB,CAAC,MACb,EAAE,SAAS,SACP,EAAE,MAAM,OAAO,OAAO,QAAQ,WAAW,OACzC,EAAE,MAAM,OAAO,UAAU,WAAW,WAAW,IAAI;AAAA,aAC9C,CAAC,MACV,EAAE,SAAS,UACP,GAAG,EAAE,MAAM,MAAM,GAAG,CAAC,IAAI,EAAE,MAAM,MAAM,GAAG,CAAC,KAC3C,GAAG,EAAE,MAAM,MAAM,GAAG,CAAC,IAAI,EAAE,MAAM,MAAM,GAAG,CAAC,EAAE;AAAA,IACjD,sCAAM;AAAA;;;ACxBN;AAPJ,IAAM,aAAa,CAAC;AAAA,EAClB;AAAA,EACA,OAAO;AAAA,EACP,OAAO;AAAA,EACP,GAAG;AACL,MAA2B;AACzB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,uBAAmB;AAAA,MAClB,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,qBAAQ;;;ACrBR,IAAM,kBAAkB;AAAA,EAC7B,UAAU;AAAA,EACV,MAAM;AACR;AAEO,IAAM,kBAAkB;AAAA,EAC7B,SAAS;AAAA,EACT,OAAO;AACT;;;AHNA,IAAO,gBAAQ;","names":["styled"]}

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@sproutsocial/seeds-react-chat-bubble",
+  "version": "0.2.0",
+  "description": "Seeds React Chat Bubble",
+  "author": "Sprout Social, Inc.",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup --dts",
+    "build:debug": "tsup --dts --metafile",
+    "dev": "tsup --watch --dts",
+    "clean": "rm -rf .turbo dist",
+    "clean:modules": "rm -rf node_modules",
+    "typecheck": "tsc --noEmit",
+    "test": "jest",
+    "test:watch": "jest --watch --coverage=false"
+  },
+  "dependencies": {
+    "@sproutsocial/seeds-react-system-props": "^3.0.2"
+  },
+  "devDependencies": {
+    "tsup": "^8.3.4",
+    "typescript": "^5.6.2",
+    "@types/react": "^18.0.0",
+    "@types/styled-components": "^5.1.26",
+    "@sproutsocial/eslint-config-seeds": "*",
+    "react": "^18.0.0",
+    "styled-components": "^5.2.3",
+    "@sproutsocial/seeds-tsconfig": "*",
+    "@sproutsocial/seeds-testing": "*",
+    "@sproutsocial/seeds-react-testing-library": "*"
+  },
+  "peerDependencies": {
+    "styled-components": "^5.2.3"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}