@sproutsocial/seeds-react-progress 0.1.0

package/.eslintignore

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

package/.eslintrc.js

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

package/.turbo/turbo-build.log

@@ -0,0 +1,21 @@
+yarn run v1.22.22
+$ tsup --dts
+CLI Building entry: src/index.ts
+CLI Using tsconfig: tsconfig.json
+CLI tsup v8.5.0
+CLI Using tsup config: /home/runner/_work/seeds/seeds/seeds-react/seeds-react-progress/tsup.config.ts
+CLI Target: es2022
+CLI Cleaning output folder
+CJS Build start
+ESM Build start
+CJS dist/index.js     3.27 KB
+CJS dist/index.js.map 3.51 KB
+CJS ⚡️ Build success in 14ms
+ESM dist/esm/index.js     1.46 KB
+ESM dist/esm/index.js.map 3.41 KB
+ESM ⚡️ Build success in 14ms
+DTS Build start
+DTS ⚡️ Build success in 3861ms
+DTS dist/index.d.ts  1.11 KB
+DTS dist/index.d.mts 1.11 KB
+Done in 4.84s.

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @sproutsocial/seeds-react-progress
+
+## 0.1.0
+
+### Minor Changes
+
+- 817ac56: Add new Progress component built on Radix UI Progress primitive with full accessibility support

package/dist/esm/index.js

@@ -0,0 +1,68 @@
+// src/Progress.tsx
+import "react";
+
+// src/styles.ts
+import styled from "styled-components";
+import * as Progress from "@radix-ui/react-progress";
+import { COMMON } from "@sproutsocial/seeds-react-system-props";
+var StyledRoot = styled(Progress.Root).attrs({
+  className: "Progress"
+})`
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 8px;
+  border-radius: ${(p) => p.theme.radii.outer};
+  background-color: ${(p) => p.theme.colors.container.border.base};
+
+  ${COMMON}
+`;
+var StyledIndicator = styled(Progress.Indicator)`
+  height: 100%;
+  width: 100%;
+  border-radius: ${(p) => p.theme.radii.outer};
+  background-color: ${(p) => p.theme.colors.icon.base};
+  transition: transform 150ms ease;
+`;
+
+// src/Progress.tsx
+import { jsx } from "react/jsx-runtime";
+var Progress2 = ({
+  value,
+  max = 100,
+  getValueLabel,
+  indicatorStyle,
+  ...rest
+}) => {
+  const percentage = max > 0 ? Math.min(value / max * 100, 100) : 0;
+  return /* @__PURE__ */ jsx(
+    StyledRoot,
+    {
+      value,
+      max,
+      getValueLabel,
+      "data-qa-progress": "",
+      ...rest,
+      children: /* @__PURE__ */ jsx(
+        StyledIndicator,
+        {
+          style: {
+            transform: `translateX(-${100 - percentage}%)`,
+            ...indicatorStyle
+          }
+        }
+      )
+    }
+  );
+};
+
+// src/ProgressTypes.ts
+import "react";
+
+// src/index.ts
+var index_default = Progress2;
+export {
+  Progress2 as Progress,
+  index_default as default
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Progress.tsx","../../src/styles.ts","../../src/ProgressTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { StyledRoot, StyledIndicator } from \"./styles\";\nimport type { TypeProgressProps } from \"./ProgressTypes\";\n\nexport const Progress = ({\n  value,\n  max = 100,\n  getValueLabel,\n  indicatorStyle,\n  ...rest\n}: TypeProgressProps) => {\n  const percentage = max > 0 ? Math.min((value / max) * 100, 100) : 0;\n\n  return (\n    <StyledRoot\n      value={value}\n      max={max}\n      getValueLabel={getValueLabel}\n      data-qa-progress=\"\"\n      {...rest}\n    >\n      <StyledIndicator\n        style={{\n          transform: `translateX(-${100 - percentage}%)`,\n          ...indicatorStyle,\n        }}\n      />\n    </StyledRoot>\n  );\n};\n","import styled from \"styled-components\";\nimport * as Progress from \"@radix-ui/react-progress\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\n\nexport const StyledRoot = styled(Progress.Root).attrs({\n  className: \"Progress\",\n})`\n  position: relative;\n  overflow: hidden;\n  width: 100%;\n  height: 8px;\n  border-radius: ${(p) => p.theme.radii.outer};\n  background-color: ${(p) => p.theme.colors.container.border.base};\n\n  ${COMMON}\n`;\n\nexport const StyledIndicator = styled(Progress.Indicator)`\n  height: 100%;\n  width: 100%;\n  border-radius: ${(p) => p.theme.radii.outer};\n  background-color: ${(p) => p.theme.colors.icon.base};\n  transition: transform 150ms ease;\n`;\n","import * as React from \"react\";\nimport type {\n  TypeStyledComponentsCommonProps,\n  TypeSystemCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\ntype TypeAriaLabel =\n  | { \"aria-label\": string; \"aria-labelledby\"?: string }\n  | { \"aria-label\"?: string; \"aria-labelledby\": string };\n\nexport type TypeProgressProps = TypeStyledComponentsCommonProps &\n  TypeSystemCommonProps &\n  Omit<React.ComponentPropsWithoutRef<\"div\">, \"color\"> &\n  TypeAriaLabel & {\n    /** The current progress value */\n    value: number;\n    /** The maximum progress value. Defaults to 100 */\n    max?: number;\n    /** A function to get the accessible label text representing the current value. Defaults to \"{value}%\" */\n    getValueLabel?: (value: number, max: number) => string;\n    /** Custom CSS for the indicator (fill) element, e.g. a gradient background */\n    indicatorStyle?: React.CSSProperties;\n  };\n","import { Progress } from \"./Progress\";\n\nexport default Progress;\nexport { Progress };\nexport * from \"./ProgressTypes\";\n"],"mappings":";AAAA,OAAuB;;;ACAvB,OAAO,YAAY;AACnB,YAAY,cAAc;AAC1B,SAAS,cAAc;AAEhB,IAAM,aAAa,OAAgB,aAAI,EAAE,MAAM;AAAA,EACpD,WAAW;AACb,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,mBAKkB,CAAC,MAAM,EAAE,MAAM,MAAM,KAAK;AAAA,sBACvB,CAAC,MAAM,EAAE,MAAM,OAAO,UAAU,OAAO,IAAI;AAAA;AAAA,IAE7D,MAAM;AAAA;AAGH,IAAM,kBAAkB,OAAgB,kBAAS;AAAA;AAAA;AAAA,mBAGrC,CAAC,MAAM,EAAE,MAAM,MAAM,KAAK;AAAA,sBACvB,CAAC,MAAM,EAAE,MAAM,OAAO,KAAK,IAAI;AAAA;AAAA;;;ADA/C;AAjBC,IAAMA,YAAW,CAAC;AAAA,EACvB;AAAA,EACA,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAyB;AACvB,QAAM,aAAa,MAAM,IAAI,KAAK,IAAK,QAAQ,MAAO,KAAK,GAAG,IAAI;AAElE,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,oBAAiB;AAAA,MAChB,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,YACL,WAAW,eAAe,MAAM,UAAU;AAAA,YAC1C,GAAG;AAAA,UACL;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;;;AE7BA,OAAuB;;;ACEvB,IAAO,gBAAQC;","names":["Progress","Progress"]}

package/dist/index.d.mts

@@ -0,0 +1,25 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { TypeStyledComponentsCommonProps, TypeSystemCommonProps } from '@sproutsocial/seeds-react-system-props';
+
+type TypeAriaLabel = {
+    "aria-label": string;
+    "aria-labelledby"?: string;
+} | {
+    "aria-label"?: string;
+    "aria-labelledby": string;
+};
+type TypeProgressProps = TypeStyledComponentsCommonProps & TypeSystemCommonProps & Omit<React.ComponentPropsWithoutRef<"div">, "color"> & TypeAriaLabel & {
+    /** The current progress value */
+    value: number;
+    /** The maximum progress value. Defaults to 100 */
+    max?: number;
+    /** A function to get the accessible label text representing the current value. Defaults to "{value}%" */
+    getValueLabel?: (value: number, max: number) => string;
+    /** Custom CSS for the indicator (fill) element, e.g. a gradient background */
+    indicatorStyle?: React.CSSProperties;
+};
+
+declare const Progress: ({ value, max, getValueLabel, indicatorStyle, ...rest }: TypeProgressProps) => react_jsx_runtime.JSX.Element;
+
+export { Progress, type TypeProgressProps, Progress as default };

package/dist/index.d.ts

@@ -0,0 +1,25 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { TypeStyledComponentsCommonProps, TypeSystemCommonProps } from '@sproutsocial/seeds-react-system-props';
+
+type TypeAriaLabel = {
+    "aria-label": string;
+    "aria-labelledby"?: string;
+} | {
+    "aria-label"?: string;
+    "aria-labelledby": string;
+};
+type TypeProgressProps = TypeStyledComponentsCommonProps & TypeSystemCommonProps & Omit<React.ComponentPropsWithoutRef<"div">, "color"> & TypeAriaLabel & {
+    /** The current progress value */
+    value: number;
+    /** The maximum progress value. Defaults to 100 */
+    max?: number;
+    /** A function to get the accessible label text representing the current value. Defaults to "{value}%" */
+    getValueLabel?: (value: number, max: number) => string;
+    /** Custom CSS for the indicator (fill) element, e.g. a gradient background */
+    indicatorStyle?: React.CSSProperties;
+};
+
+declare const Progress: ({ value, max, getValueLabel, indicatorStyle, ...rest }: TypeProgressProps) => react_jsx_runtime.JSX.Element;
+
+export { Progress, type TypeProgressProps, Progress as default };

package/dist/index.js

@@ -0,0 +1,105 @@
+"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, {
+  Progress: () => Progress2,
+  default: () => index_default
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/Progress.tsx
+var React = require("react");
+
+// src/styles.ts
+var import_styled_components = __toESM(require("styled-components"));
+var Progress = __toESM(require("@radix-ui/react-progress"));
+var import_seeds_react_system_props = require("@sproutsocial/seeds-react-system-props");
+var StyledRoot = (0, import_styled_components.default)(Progress.Root).attrs({
+  className: "Progress"
+})`
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 8px;
+  border-radius: ${(p) => p.theme.radii.outer};
+  background-color: ${(p) => p.theme.colors.container.border.base};
+
+  ${import_seeds_react_system_props.COMMON}
+`;
+var StyledIndicator = (0, import_styled_components.default)(Progress.Indicator)`
+  height: 100%;
+  width: 100%;
+  border-radius: ${(p) => p.theme.radii.outer};
+  background-color: ${(p) => p.theme.colors.icon.base};
+  transition: transform 150ms ease;
+`;
+
+// src/Progress.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Progress2 = ({
+  value,
+  max = 100,
+  getValueLabel,
+  indicatorStyle,
+  ...rest
+}) => {
+  const percentage = max > 0 ? Math.min(value / max * 100, 100) : 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    StyledRoot,
+    {
+      value,
+      max,
+      getValueLabel,
+      "data-qa-progress": "",
+      ...rest,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        StyledIndicator,
+        {
+          style: {
+            transform: `translateX(-${100 - percentage}%)`,
+            ...indicatorStyle
+          }
+        }
+      )
+    }
+  );
+};
+
+// src/ProgressTypes.ts
+var React2 = require("react");
+
+// src/index.ts
+var index_default = Progress2;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Progress
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/Progress.tsx","../src/styles.ts","../src/ProgressTypes.ts"],"sourcesContent":["import { Progress } from \"./Progress\";\n\nexport default Progress;\nexport { Progress };\nexport * from \"./ProgressTypes\";\n","import * as React from \"react\";\nimport { StyledRoot, StyledIndicator } from \"./styles\";\nimport type { TypeProgressProps } from \"./ProgressTypes\";\n\nexport const Progress = ({\n  value,\n  max = 100,\n  getValueLabel,\n  indicatorStyle,\n  ...rest\n}: TypeProgressProps) => {\n  const percentage = max > 0 ? Math.min((value / max) * 100, 100) : 0;\n\n  return (\n    <StyledRoot\n      value={value}\n      max={max}\n      getValueLabel={getValueLabel}\n      data-qa-progress=\"\"\n      {...rest}\n    >\n      <StyledIndicator\n        style={{\n          transform: `translateX(-${100 - percentage}%)`,\n          ...indicatorStyle,\n        }}\n      />\n    </StyledRoot>\n  );\n};\n","import styled from \"styled-components\";\nimport * as Progress from \"@radix-ui/react-progress\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\n\nexport const StyledRoot = styled(Progress.Root).attrs({\n  className: \"Progress\",\n})`\n  position: relative;\n  overflow: hidden;\n  width: 100%;\n  height: 8px;\n  border-radius: ${(p) => p.theme.radii.outer};\n  background-color: ${(p) => p.theme.colors.container.border.base};\n\n  ${COMMON}\n`;\n\nexport const StyledIndicator = styled(Progress.Indicator)`\n  height: 100%;\n  width: 100%;\n  border-radius: ${(p) => p.theme.radii.outer};\n  background-color: ${(p) => p.theme.colors.icon.base};\n  transition: transform 150ms ease;\n`;\n","import * as React from \"react\";\nimport type {\n  TypeStyledComponentsCommonProps,\n  TypeSystemCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\ntype TypeAriaLabel =\n  | { \"aria-label\": string; \"aria-labelledby\"?: string }\n  | { \"aria-label\"?: string; \"aria-labelledby\": string };\n\nexport type TypeProgressProps = TypeStyledComponentsCommonProps &\n  TypeSystemCommonProps &\n  Omit<React.ComponentPropsWithoutRef<\"div\">, \"color\"> &\n  TypeAriaLabel & {\n    /** The current progress value */\n    value: number;\n    /** The maximum progress value. Defaults to 100 */\n    max?: number;\n    /** A function to get the accessible label text representing the current value. Defaults to \"{value}%\" */\n    getValueLabel?: (value: number, max: number) => string;\n    /** Custom CSS for the indicator (fill) element, e.g. a gradient background */\n    indicatorStyle?: React.CSSProperties;\n  };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,kBAAAA;AAAA,EAAA;AAAA;AAAA;;;ACAA,YAAuB;;;ACAvB,+BAAmB;AACnB,eAA0B;AAC1B,sCAAuB;AAEhB,IAAM,iBAAa,yBAAAC,SAAgB,aAAI,EAAE,MAAM;AAAA,EACpD,WAAW;AACb,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,mBAKkB,CAAC,MAAM,EAAE,MAAM,MAAM,KAAK;AAAA,sBACvB,CAAC,MAAM,EAAE,MAAM,OAAO,UAAU,OAAO,IAAI;AAAA;AAAA,IAE7D,sCAAM;AAAA;AAGH,IAAM,sBAAkB,yBAAAA,SAAgB,kBAAS;AAAA;AAAA;AAAA,mBAGrC,CAAC,MAAM,EAAE,MAAM,MAAM,KAAK;AAAA,sBACvB,CAAC,MAAM,EAAE,MAAM,OAAO,KAAK,IAAI;AAAA;AAAA;;;ADA/C;AAjBC,IAAMC,YAAW,CAAC;AAAA,EACvB;AAAA,EACA,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAyB;AACvB,QAAM,aAAa,MAAM,IAAI,KAAK,IAAK,QAAQ,MAAO,KAAK,GAAG,IAAI;AAElE,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,oBAAiB;AAAA,MAChB,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,YACL,WAAW,eAAe,MAAM,UAAU;AAAA,YAC1C,GAAG;AAAA,UACL;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;;;AE7BA,IAAAC,SAAuB;;;AHEvB,IAAO,gBAAQC;","names":["Progress","styled","Progress","React","Progress"]}

package/jest.config.js

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

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@sproutsocial/seeds-react-progress",
+  "version": "0.1.0",
+  "description": "Seeds React Progress",
+  "author": "Sprout Social, Inc.",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsup --dts",
+    "build:debug": "tsup --dts --metafile",
+    "dev": "tsup --watch --dts",
+    "clean": "rm -rf .turbo dist",
+    "clean:modules": "rm -rf node_modules",
+    "typecheck": "tsc --noEmit",
+    "test": "jest",
+    "test:watch": "jest --watch --coverage=false"
+  },
+  "dependencies": {
+    "@radix-ui/react-progress": "^1.1.2",
+    "@sproutsocial/seeds-react-theme": "^3.6.0",
+    "@sproutsocial/seeds-react-system-props": "^3.0.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/styled-components": "^5.1.26",
+    "@sproutsocial/eslint-config-seeds": "*",
+    "react": "^18.0.0",
+    "styled-components": "^5.2.3",
+    "tsup": "^8.3.4",
+    "typescript": "^5.6.2",
+    "@sproutsocial/seeds-tsconfig": "*",
+    "@sproutsocial/seeds-testing": "*",
+    "@sproutsocial/seeds-react-testing-library": "*"
+  },
+  "peerDependencies": {
+    "styled-components": "^5.2.3"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}

package/src/Progress.stories.tsx

@@ -0,0 +1,83 @@
+import React from "react";
+import { Progress } from "./";
+import type { TypeProgressProps } from "./ProgressTypes";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof Progress> = {
+  title: "Components/Progress",
+  component: Progress,
+  args: {
+    value: 33,
+    max: 100,
+    "aria-label": "Credits remaining",
+  },
+  argTypes: {
+    value: { control: { type: "range", min: 0, max: 100, step: 1 } },
+    max: { control: { type: "number" } },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ maxWidth: 500 }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Progress>;
+
+export const Default: Story = {
+  render: (args: TypeProgressProps) => <Progress {...args} />,
+};
+
+Default.storyName = "Default";
+
+export const Empty: Story = {
+  args: {
+    value: 0,
+  },
+};
+
+export const Full: Story = {
+  args: {
+    value: 100,
+  },
+};
+
+export const CustomValueLabel: Story = {
+  render: (args: TypeProgressProps) => {
+    const getValueLabel = (value: number, max: number) =>
+      `${value} of ${max} credits remaining`;
+    const label = getValueLabel(args.value, args.max ?? 100);
+
+    return (
+      <div>
+        <Progress {...args} getValueLabel={getValueLabel} />
+        <p>aria-valuetext: &quot;{label}&quot;</p>
+      </div>
+    );
+  },
+  args: {
+    value: 33,
+    max: 100,
+  },
+};
+
+export const CustomGradient: Story = {
+  args: {
+    value: 67,
+    indicatorStyle: {
+      background: `radial-gradient(
+        ellipse at left,
+        rgba(32, 91, 195, 1) 0%,
+        rgba(62, 86, 210, 1) 15%,
+        rgba(92, 81, 225, 1) 30%,
+        rgba(151, 71, 255, 1) 61%,
+        rgba(197, 101, 250, 1) 80%,
+        rgba(242, 130, 245, 1) 100%
+      )`,
+    },
+  },
+};

package/src/Progress.tsx

@@ -0,0 +1,30 @@
+import * as React from "react";
+import { StyledRoot, StyledIndicator } from "./styles";
+import type { TypeProgressProps } from "./ProgressTypes";
+
+export const Progress = ({
+  value,
+  max = 100,
+  getValueLabel,
+  indicatorStyle,
+  ...rest
+}: TypeProgressProps) => {
+  const percentage = max > 0 ? Math.min((value / max) * 100, 100) : 0;
+
+  return (
+    <StyledRoot
+      value={value}
+      max={max}
+      getValueLabel={getValueLabel}
+      data-qa-progress=""
+      {...rest}
+    >
+      <StyledIndicator
+        style={{
+          transform: `translateX(-${100 - percentage}%)`,
+          ...indicatorStyle,
+        }}
+      />
+    </StyledRoot>
+  );
+};

package/src/ProgressTypes.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+import type {
+  TypeStyledComponentsCommonProps,
+  TypeSystemCommonProps,
+} from "@sproutsocial/seeds-react-system-props";
+
+type TypeAriaLabel =
+  | { "aria-label": string; "aria-labelledby"?: string }
+  | { "aria-label"?: string; "aria-labelledby": string };
+
+export type TypeProgressProps = TypeStyledComponentsCommonProps &
+  TypeSystemCommonProps &
+  Omit<React.ComponentPropsWithoutRef<"div">, "color"> &
+  TypeAriaLabel & {
+    /** The current progress value */
+    value: number;
+    /** The maximum progress value. Defaults to 100 */
+    max?: number;
+    /** A function to get the accessible label text representing the current value. Defaults to "{value}%" */
+    getValueLabel?: (value: number, max: number) => string;
+    /** Custom CSS for the indicator (fill) element, e.g. a gradient background */
+    indicatorStyle?: React.CSSProperties;
+  };

package/src/__tests__/Progress.test.tsx

@@ -0,0 +1,120 @@
+import React from "react";
+import { render, screen } from "@sproutsocial/seeds-react-testing-library";
+import { Progress } from "../";
+
+describe("Progress", () => {
+  it("should render with the progressbar role", () => {
+    render(<Progress value={50} aria-label="Credits remaining" />);
+
+    expect(screen.getByRole("progressbar")).toBeInTheDocument();
+  });
+
+  it("should set aria-valuenow to the value", () => {
+    render(<Progress value={33} aria-label="Credits remaining" />);
+
+    expect(screen.getByRole("progressbar")).toHaveAttribute(
+      "aria-valuenow",
+      "33"
+    );
+  });
+
+  it("should set aria-valuemax to the max", () => {
+    render(<Progress value={50} max={200} aria-label="Credits remaining" />);
+
+    expect(screen.getByRole("progressbar")).toHaveAttribute(
+      "aria-valuemax",
+      "200"
+    );
+  });
+
+  it("should apply the correct transform for the indicator", () => {
+    const { container } = render(
+      <Progress value={75} aria-label="Credits remaining" />
+    );
+
+    const indicator = container.querySelector(".Progress > div");
+    expect(indicator).toHaveStyle("transform: translateX(-25%)");
+  });
+
+  it("should clamp percentage to 100 when value exceeds max", () => {
+    const { container } = render(
+      <Progress value={150} max={100} aria-label="Credits remaining" />
+    );
+
+    const indicator = container.querySelector(".Progress > div");
+    expect(indicator).toHaveStyle("transform: translateX(-0%)");
+  });
+
+  it("should handle 0 max gracefully", () => {
+    render(<Progress value={50} max={0} aria-label="Credits remaining" />);
+
+    const progressbar = screen.getByRole("progressbar");
+    expect(progressbar).toBeInTheDocument();
+  });
+
+  it("should apply custom indicator styles", () => {
+    const { container } = render(
+      <Progress
+        value={50}
+        aria-label="Credits remaining"
+        indicatorStyle={{ background: "linear-gradient(red, blue)" }}
+      />
+    );
+
+    const indicator = container.querySelector(".Progress > div");
+    expect(indicator).toHaveStyle("background: linear-gradient(red, blue)");
+  });
+
+  it("should use custom getValueLabel", () => {
+    render(
+      <Progress
+        value={3}
+        max={10}
+        aria-label="Steps completed"
+        getValueLabel={(value, max) => `${value} of ${max} steps`}
+      />
+    );
+
+    expect(screen.getByRole("progressbar")).toHaveAttribute(
+      "aria-valuetext",
+      "3 of 10 steps"
+    );
+  });
+
+  it("should support aria-labelledby", () => {
+    render(
+      <>
+        <span id="progress-label">Upload progress</span>
+        <Progress value={50} aria-labelledby="progress-label" />
+      </>
+    );
+
+    expect(screen.getByRole("progressbar")).toHaveAttribute(
+      "aria-labelledby",
+      "progress-label"
+    );
+  });
+
+  it("should set aria-label on the progressbar", () => {
+    render(<Progress value={50} aria-label="Credits remaining" />);
+
+    expect(screen.getByRole("progressbar")).toHaveAttribute(
+      "aria-label",
+      "Credits remaining"
+    );
+  });
+
+  it("should allow passing qa props", () => {
+    render(
+      <Progress
+        value={50}
+        aria-label="Credits remaining"
+        data-qa-progress="credits"
+      />
+    );
+
+    expect(
+      screen.getByRole("progressbar").closest("[data-qa-progress]")
+    ).toBeTruthy();
+  });
+});

package/src/__tests__/Progress.typetest.tsx

@@ -0,0 +1,32 @@
+import * as React from "react";
+import { render } from "@sproutsocial/seeds-react-testing-library";
+import { Progress } from "../";
+
+describe.skip("Progress/types", () => {
+  it("should accept valid props", () => {
+    render(
+      <>
+        <Progress value={50} aria-label="Credits" />
+        <Progress value={50} max={200} aria-label="Credits" />
+        <Progress
+          value={50}
+          aria-label="Credits"
+          getValueLabel={(value, max) => `${value}/${max}`}
+        />
+        <Progress
+          value={50}
+          aria-label="Credits"
+          indicatorStyle={{ background: "red" }}
+        />
+        <Progress value={50} aria-label="Credits" m={400} />
+        <Progress value={50} aria-labelledby="my-label" />
+        {/* @ts-expect-error - value is required */}
+        <Progress aria-label="Credits" />
+        {/* @ts-expect-error - value must be a number */}
+        <Progress value="50" aria-label="Credits" />
+        {/* @ts-expect-error - aria-label or aria-labelledby is required */}
+        <Progress value={50} />
+      </>
+    );
+  });
+});

package/src/index.ts

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

package/src/styled.d.ts

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,24 @@
+import styled from "styled-components";
+import * as Progress from "@radix-ui/react-progress";
+import { COMMON } from "@sproutsocial/seeds-react-system-props";
+
+export const StyledRoot = styled(Progress.Root).attrs({
+  className: "Progress",
+})`
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 8px;
+  border-radius: ${(p) => p.theme.radii.outer};
+  background-color: ${(p) => p.theme.colors.container.border.base};
+
+  ${COMMON}
+`;
+
+export const StyledIndicator = styled(Progress.Indicator)`
+  height: 100%;
+  width: 100%;
+  border-radius: ${(p) => p.theme.radii.outer};
+  background-color: ${(p) => p.theme.colors.icon.base};
+  transition: transform 150ms ease;
+`;

package/tsconfig.json

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

package/tsup.config.ts

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