@nimbus-ds/progress-bar 1.0.0

package/CHANGELOG.md

@@ -0,0 +1,14 @@
+# Changelog
+
+The ProgressBar component allows us to display the progress of an operation or task in a visual format.
+
+## 2025-08-01 `1.0.0`
+
+### 🎉 New features
+
+- Added ProgressBar component. ([#325](https://github.com/TiendaNube/nimbus-design-system/pull/325))
+- Added `value` prop to control progress from 0 to 100.
+- Added `appearance` prop with variants: primary, success, warning, danger, neutral and ai-generative.
+- Included ProgressBar skeleton component for loading states.
+- Implemented accessibility support with ARIA attributes.
+- Provided comprehensive TypeScript types and documentation.

package/README.md

@@ -0,0 +1,51 @@
+# `@nimbus-ds/progress-bar`
+
+[![@nimbus-ds/progress-bar](https://img.shields.io/npm/v/@nimbus-ds/progress-bar?label=%40nimbus-ds%2Fprogress-bar)](https://www.npmjs.com/package/@nimbus-ds/progress-bar)
+
+The ProgressBar component is used to display the progress of an operation or task in a visual format.
+
+## Installation
+
+```sh
+$ yarn add @nimbus-ds/progress-bar
+# or
+$ npm install @nimbus-ds/progress-bar
+```
+
+### Component Anatomy
+
+The component consists of a horizontal bar with a fill that represents the progress value as a percentage from 0 to 100.
+
+## Guidelines
+
+We use the ProgressBar component to visually communicate the completion status of operations, tasks, or any measurable progress.
+
+### Variants
+
+The component has 5 appearance variants that can be used according to the context:
+
+- **Neutral** - Used for general progress indication without specific semantic meaning
+- **Primary** - Used to highlight important progress or main tasks  
+- **Success** - Used to indicate positive progress or successful completion stages
+- **Warning** - Used to indicate caution or attention-required progress
+- **Danger** - Used to indicate critical or error-related progress
+
+### Usage recommendations
+
+- Use to show completion percentage of tasks, uploads, downloads, or any measurable operation
+- Ensure the progress value is meaningful and accurately represents the actual completion state
+- Consider adding text labels to provide additional context when necessary
+- Use appropriate appearance variants to convey the semantic meaning of the progress
+
+### Accessibility
+
+The component includes proper ARIA attributes:
+- `role="progressbar"` to identify the element as a progress indicator
+- `aria-valuenow` to indicate the current progress value
+- `aria-valuemin` and `aria-valuemax` to define the range (0-100)
+
+## Usage
+
+View docs [here](https://nimbus.nuvemshop.com.br/documentation/atomic-components/progress-bar).
+
+<img alt="Nimbus" style="margin-bottom: 30px;" src="https://tiendanube.github.io/design-system-nimbus/static/media/nimbus-logo.ab60bd79.png" height="30" /> 

package/dist/CHANGELOG.md

@@ -0,0 +1,14 @@
+# Changelog
+
+The ProgressBar component allows us to display the progress of an operation or task in a visual format.
+
+## 2025-08-01 `1.0.0`
+
+### 🎉 New features
+
+- Added ProgressBar component. ([#325](https://github.com/TiendaNube/nimbus-design-system/pull/325))
+- Added `value` prop to control progress from 0 to 100.
+- Added `appearance` prop with variants: primary, success, warning, danger, neutral and ai-generative.
+- Included ProgressBar skeleton component for loading states.
+- Implemented accessibility support with ARIA attributes.
+- Provided comprehensive TypeScript types and documentation.

package/dist/README.md

@@ -0,0 +1,51 @@
+# `@nimbus-ds/progress-bar`
+
+[![@nimbus-ds/progress-bar](https://img.shields.io/npm/v/@nimbus-ds/progress-bar?label=%40nimbus-ds%2Fprogress-bar)](https://www.npmjs.com/package/@nimbus-ds/progress-bar)
+
+The ProgressBar component is used to display the progress of an operation or task in a visual format.
+
+## Installation
+
+```sh
+$ yarn add @nimbus-ds/progress-bar
+# or
+$ npm install @nimbus-ds/progress-bar
+```
+
+### Component Anatomy
+
+The component consists of a horizontal bar with a fill that represents the progress value as a percentage from 0 to 100.
+
+## Guidelines
+
+We use the ProgressBar component to visually communicate the completion status of operations, tasks, or any measurable progress.
+
+### Variants
+
+The component has 5 appearance variants that can be used according to the context:
+
+- **Neutral** - Used for general progress indication without specific semantic meaning
+- **Primary** - Used to highlight important progress or main tasks  
+- **Success** - Used to indicate positive progress or successful completion stages
+- **Warning** - Used to indicate caution or attention-required progress
+- **Danger** - Used to indicate critical or error-related progress
+
+### Usage recommendations
+
+- Use to show completion percentage of tasks, uploads, downloads, or any measurable operation
+- Ensure the progress value is meaningful and accurately represents the actual completion state
+- Consider adding text labels to provide additional context when necessary
+- Use appropriate appearance variants to convey the semantic meaning of the progress
+
+### Accessibility
+
+The component includes proper ARIA attributes:
+- `role="progressbar"` to identify the element as a progress indicator
+- `aria-valuenow` to indicate the current progress value
+- `aria-valuemin` and `aria-valuemax` to define the range (0-100)
+
+## Usage
+
+View docs [here](https://nimbus.nuvemshop.com.br/documentation/atomic-components/progress-bar).
+
+<img alt="Nimbus" style="margin-bottom: 30px;" src="https://tiendanube.github.io/design-system-nimbus/static/media/nimbus-logo.ab60bd79.png" height="30" /> 

package/dist/index.d.ts

@@ -0,0 +1,61 @@
+// Generated by dts-bundle-generator v7.2.0
+
+import React from 'react';
+import { ComponentPropsWithRef, HTMLAttributes } from 'react';
+
+export interface SkeletonProperties {
+	/**
+	 * Width of the skeleton. Useful when the skeleton is inside an inline element with no width of its own.
+	 */
+	width: string;
+	/**
+	 * Height of the skeleton. Useful when you don't want to adapt the skeleton to a text element but for instance a card.
+	 */
+	height: string;
+	/**
+	 * The border radius of the skeleton.
+	 */
+	borderRadius?: string;
+	/**
+	 * This is an attribute used to identify a DOM node for testing purposes.
+	 */
+	"data-testid"?: string;
+}
+export type SkeletonProps = SkeletonProperties & HTMLAttributes<HTMLDivElement>;
+export type ProgressBarSkeletonProperties = Partial<Pick<SkeletonProps, "width" | "height" | "data-testid">>;
+declare const ProgressBarSkeleton: React.FC<ProgressBarSkeletonProperties>;
+export interface ProgressBarComponents {
+	Skeleton: typeof ProgressBarSkeleton;
+}
+export interface ProgressBarProperties {
+	/**
+	 * Progress value from 0 to 100
+	 * @note Always renders with a minimum 8px width for visual consistency
+	 */
+	value: number;
+	/**
+	 * Change the visual style of the progress bar.
+	 * @default neutral
+	 */
+	appearance?: "primary" | "success" | "warning" | "danger" | "neutral" | "ai-generative";
+}
+/**
+ * ProgressBar component displays the progress of an operation or task in a visual format.
+ * It provides a horizontal bar that fills based on the completion percentage.
+ *
+ * @component
+ * @example
+ * <ProgressBar value={50} appearance="primary" />
+ *
+ * @example
+ * // With skeleton loading state
+ * <ProgressBar.Skeleton width="200px" />
+ */
+export declare const ProgressBar: React.ForwardRefExoticComponent<ProgressBarProperties & Omit<React.HTMLAttributes<HTMLDivElement>, keyof ProgressBarProperties> & React.RefAttributes<HTMLDivElement>> & ProgressBarComponents;
+export type ProgressBarProps = ComponentPropsWithRef<typeof ProgressBar>;
+
+export {
+	ProgressBar as default,
+};
+
+export {};

package/dist/index.js

@@ -0,0 +1,2 @@
+"use client";
+!function(e,r){"object"==typeof exports&&"object"==typeof module?module.exports=r(require("react"),require("@nimbus-ds/styles"),require("@nimbus-ds/skeleton")):"function"==typeof define&&define.amd?define(["react","@nimbus-ds/styles","@nimbus-ds/skeleton"],r):"object"==typeof exports?exports["@nimbus-ds/progress-bar"]=r(require("react"),require("@nimbus-ds/styles"),require("@nimbus-ds/skeleton")):e["@nimbus-ds/progress-bar"]=r(e.react,e["@nimbus-ds/styles"],e["@nimbus-ds/skeleton"])}(global,((e,r,t)=>(()=>{"use strict";var n={428:(e,r,t)=>{Object.defineProperty(r,"__esModule",{value:!0}),r.ProgressBar=void 0;const n=t(769).__importStar(t(155)),o=t(367),a=t(337),i=(0,n.forwardRef)((({className:e,style:r,value:t,appearance:a="neutral",...i},s)=>{const c=(0,n.useMemo)((()=>Math.min(100,Math.max(0,t))),[t]),u=`${c}%`;return n.default.createElement("div",{...i,ref:s,className:[o.progressBar.classnames.container,e].filter(Boolean).join(" "),style:r,role:"progressbar","aria-valuenow":c,"aria-valuemin":0,"aria-valuemax":100},n.default.createElement("div",{className:o.progressBar.classnames.appearance[a],style:{width:u},"data-testid":"progress-bar-fill"}))}));r.ProgressBar=i,i.Skeleton=a.ProgressBarSkeleton,i.displayName="ProgressBar",i.Skeleton.displayName="ProgressBar.Skeleton"},998:(e,r,t)=>{Object.defineProperty(r,"__esModule",{value:!0}),r.ProgressBarSkeleton=void 0;const n=t(769).__importDefault(t(155)),o=t(334);r.ProgressBarSkeleton=({width:e="100%",...r})=>n.default.createElement(o.Skeleton,{width:e,height:"0.5rem",borderRadius:"0.5rem",...r})},781:(e,r,t)=>{Object.defineProperty(r,"__esModule",{value:!0}),r.ProgressBarSkeleton=void 0;var n=t(998);Object.defineProperty(r,"ProgressBarSkeleton",{enumerable:!0,get:function(){return n.ProgressBarSkeleton}})},337:(e,r,t)=>{Object.defineProperty(r,"__esModule",{value:!0}),r.ProgressBarSkeleton=void 0;var n=t(781);Object.defineProperty(r,"ProgressBarSkeleton",{enumerable:!0,get:function(){return n.ProgressBarSkeleton}})},334:e=>{e.exports=t},367:e=>{e.exports=r},155:r=>{r.exports=e},769:(e,r,t)=>{t.r(r),t.d(r,{__addDisposableResource:()=>R,__assign:()=>a,__asyncDelegator:()=>S,__asyncGenerator:()=>j,__asyncValues:()=>x,__await:()=>O,__awaiter:()=>y,__classPrivateFieldGet:()=>D,__classPrivateFieldIn:()=>I,__classPrivateFieldSet:()=>M,__createBinding:()=>b,__decorate:()=>s,__disposeResources:()=>F,__esDecorate:()=>u,__exportStar:()=>v,__extends:()=>o,__generator:()=>_,__importDefault:()=>T,__importStar:()=>B,__makeTemplateObject:()=>E,__metadata:()=>d,__param:()=>c,__propKey:()=>f,__read:()=>m,__rest:()=>i,__runInitializers:()=>l,__setFunctionName:()=>p,__spread:()=>w,__spreadArray:()=>P,__spreadArrays:()=>g,__values:()=>h,default:()=>q});var n=function(e,r){return n=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,r){e.__proto__=r}||function(e,r){for(var t in r)Object.prototype.hasOwnProperty.call(r,t)&&(e[t]=r[t])},n(e,r)};function o(e,r){if("function"!=typeof r&&null!==r)throw new TypeError("Class extends value "+String(r)+" is not a constructor or null");function t(){this.constructor=e}n(e,r),e.prototype=null===r?Object.create(r):(t.prototype=r.prototype,new t)}var a=function(){return a=Object.assign||function(e){for(var r,t=1,n=arguments.length;t<n;t++)for(var o in r=arguments[t])Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o]);return e},a.apply(this,arguments)};function i(e,r){var t={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&r.indexOf(n)<0&&(t[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(e);o<n.length;o++)r.indexOf(n[o])<0&&Object.prototype.propertyIsEnumerable.call(e,n[o])&&(t[n[o]]=e[n[o]])}return t}function s(e,r,t,n){var o,a=arguments.length,i=a<3?r:null===n?n=Object.getOwnPropertyDescriptor(r,t):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,r,t,n);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(i=(a<3?o(i):a>3?o(r,t,i):o(r,t))||i);return a>3&&i&&Object.defineProperty(r,t,i),i}function c(e,r){return function(t,n){r(t,n,e)}}function u(e,r,t,n,o,a){function i(e){if(void 0!==e&&"function"!=typeof e)throw new TypeError("Function expected");return e}for(var s,c=n.kind,u="getter"===c?"get":"setter"===c?"set":"value",l=!r&&e?n.static?e:e.prototype:null,f=r||(l?Object.getOwnPropertyDescriptor(l,n.name):{}),p=!1,d=t.length-1;d>=0;d--){var y={};for(var _ in n)y[_]="access"===_?{}:n[_];for(var _ in n.access)y.access[_]=n.access[_];y.addInitializer=function(e){if(p)throw new TypeError("Cannot add initializers after decoration has completed");a.push(i(e||null))};var b=(0,t[d])("accessor"===c?{get:f.get,set:f.set}:f[u],y);if("accessor"===c){if(void 0===b)continue;if(null===b||"object"!=typeof b)throw new TypeError("Object expected");(s=i(b.get))&&(f.get=s),(s=i(b.set))&&(f.set=s),(s=i(b.init))&&o.unshift(s)}else(s=i(b))&&("field"===c?o.unshift(s):f[u]=s)}l&&Object.defineProperty(l,n.name,f),p=!0}function l(e,r,t){for(var n=arguments.length>2,o=0;o<r.length;o++)t=n?r[o].call(e,t):r[o].call(e);return n?t:void 0}function f(e){return"symbol"==typeof e?e:"".concat(e)}function p(e,r,t){return"symbol"==typeof r&&(r=r.description?"[".concat(r.description,"]"):""),Object.defineProperty(e,"name",{configurable:!0,value:t?"".concat(t," ",r):r})}function d(e,r){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,r)}function y(e,r,t,n){return new(t||(t=Promise))((function(o,a){function i(e){try{c(n.next(e))}catch(e){a(e)}}function s(e){try{c(n.throw(e))}catch(e){a(e)}}function c(e){var r;e.done?o(e.value):(r=e.value,r instanceof t?r:new t((function(e){e(r)}))).then(i,s)}c((n=n.apply(e,r||[])).next())}))}function _(e,r){var t,n,o,a,i={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return a={next:s(0),throw:s(1),return:s(2)},"function"==typeof Symbol&&(a[Symbol.iterator]=function(){return this}),a;function s(s){return function(c){return function(s){if(t)throw new TypeError("Generator is already executing.");for(;a&&(a=0,s[0]&&(i=0)),i;)try{if(t=1,n&&(o=2&s[0]?n.return:s[0]?n.throw||((o=n.return)&&o.call(n),0):n.next)&&!(o=o.call(n,s[1])).done)return o;switch(n=0,o&&(s=[2&s[0],o.value]),s[0]){case 0:case 1:o=s;break;case 4:return i.label++,{value:s[1],done:!1};case 5:i.label++,n=s[1],s=[0];continue;case 7:s=i.ops.pop(),i.trys.pop();continue;default:if(!(o=i.trys,(o=o.length>0&&o[o.length-1])||6!==s[0]&&2!==s[0])){i=0;continue}if(3===s[0]&&(!o||s[1]>o[0]&&s[1]<o[3])){i.label=s[1];break}if(6===s[0]&&i.label<o[1]){i.label=o[1],o=s;break}if(o&&i.label<o[2]){i.label=o[2],i.ops.push(s);break}o[2]&&i.ops.pop(),i.trys.pop();continue}s=r.call(e,i)}catch(e){s=[6,e],n=0}finally{t=o=0}if(5&s[0])throw s[1];return{value:s[0]?s[1]:void 0,done:!0}}([s,c])}}}var b=Object.create?function(e,r,t,n){void 0===n&&(n=t);var o=Object.getOwnPropertyDescriptor(r,t);o&&!("get"in o?!r.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return r[t]}}),Object.defineProperty(e,n,o)}:function(e,r,t,n){void 0===n&&(n=t),e[n]=r[t]};function v(e,r){for(var t in e)"default"===t||Object.prototype.hasOwnProperty.call(r,t)||b(r,e,t)}function h(e){var r="function"==typeof Symbol&&Symbol.iterator,t=r&&e[r],n=0;if(t)return t.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&n>=e.length&&(e=void 0),{value:e&&e[n++],done:!e}}};throw new TypeError(r?"Object is not iterable.":"Symbol.iterator is not defined.")}function m(e,r){var t="function"==typeof Symbol&&e[Symbol.iterator];if(!t)return e;var n,o,a=t.call(e),i=[];try{for(;(void 0===r||r-- >0)&&!(n=a.next()).done;)i.push(n.value)}catch(e){o={error:e}}finally{try{n&&!n.done&&(t=a.return)&&t.call(a)}finally{if(o)throw o.error}}return i}function w(){for(var e=[],r=0;r<arguments.length;r++)e=e.concat(m(arguments[r]));return e}function g(){for(var e=0,r=0,t=arguments.length;r<t;r++)e+=arguments[r].length;var n=Array(e),o=0;for(r=0;r<t;r++)for(var a=arguments[r],i=0,s=a.length;i<s;i++,o++)n[o]=a[i];return n}function P(e,r,t){if(t||2===arguments.length)for(var n,o=0,a=r.length;o<a;o++)!n&&o in r||(n||(n=Array.prototype.slice.call(r,0,o)),n[o]=r[o]);return e.concat(n||Array.prototype.slice.call(r))}function O(e){return this instanceof O?(this.v=e,this):new O(e)}function j(e,r,t){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var n,o=t.apply(e,r||[]),a=[];return n={},i("next"),i("throw"),i("return"),n[Symbol.asyncIterator]=function(){return this},n;function i(e){o[e]&&(n[e]=function(r){return new Promise((function(t,n){a.push([e,r,t,n])>1||s(e,r)}))})}function s(e,r){try{(t=o[e](r)).value instanceof O?Promise.resolve(t.value.v).then(c,u):l(a[0][2],t)}catch(e){l(a[0][3],e)}var t}function c(e){s("next",e)}function u(e){s("throw",e)}function l(e,r){e(r),a.shift(),a.length&&s(a[0][0],a[0][1])}}function S(e){var r,t;return r={},n("next"),n("throw",(function(e){throw e})),n("return"),r[Symbol.iterator]=function(){return this},r;function n(n,o){r[n]=e[n]?function(r){return(t=!t)?{value:O(e[n](r)),done:!1}:o?o(r):r}:o}}function x(e){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var r,t=e[Symbol.asyncIterator];return t?t.call(e):(e=h(e),r={},n("next"),n("throw"),n("return"),r[Symbol.asyncIterator]=function(){return this},r);function n(t){r[t]=e[t]&&function(r){return new Promise((function(n,o){(function(e,r,t,n){Promise.resolve(n).then((function(r){e({value:r,done:t})}),r)})(n,o,(r=e[t](r)).done,r.value)}))}}}function E(e,r){return Object.defineProperty?Object.defineProperty(e,"raw",{value:r}):e.raw=r,e}var k=Object.create?function(e,r){Object.defineProperty(e,"default",{enumerable:!0,value:r})}:function(e,r){e.default=r};function B(e){if(e&&e.__esModule)return e;var r={};if(null!=e)for(var t in e)"default"!==t&&Object.prototype.hasOwnProperty.call(e,t)&&b(r,e,t);return k(r,e),r}function T(e){return e&&e.__esModule?e:{default:e}}function D(e,r,t,n){if("a"===t&&!n)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof r?e!==r||!n:!r.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===t?n:"a"===t?n.call(e):n?n.value:r.get(e)}function M(e,r,t,n,o){if("m"===n)throw new TypeError("Private method is not writable");if("a"===n&&!o)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof r?e!==r||!o:!r.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===n?o.call(e,t):o?o.value=t:r.set(e,t),t}function I(e,r){if(null===r||"object"!=typeof r&&"function"!=typeof r)throw new TypeError("Cannot use 'in' operator on non-object");return"function"==typeof e?r===e:e.has(r)}function R(e,r,t){if(null!=r){if("object"!=typeof r&&"function"!=typeof r)throw new TypeError("Object expected.");var n;if(t){if(!Symbol.asyncDispose)throw new TypeError("Symbol.asyncDispose is not defined.");n=r[Symbol.asyncDispose]}if(void 0===n){if(!Symbol.dispose)throw new TypeError("Symbol.dispose is not defined.");n=r[Symbol.dispose]}if("function"!=typeof n)throw new TypeError("Object not disposable.");e.stack.push({value:r,dispose:n,async:t})}else t&&e.stack.push({async:!0});return r}var A="function"==typeof SuppressedError?SuppressedError:function(e,r,t){var n=new Error(t);return n.name="SuppressedError",n.error=e,n.suppressed=r,n};function F(e){function r(r){e.error=e.hasError?new A(r,e.error,"An error was suppressed during disposal."):r,e.hasError=!0}return function t(){for(;e.stack.length;){var n=e.stack.pop();try{var o=n.dispose&&n.dispose.call(n.value);if(n.async)return Promise.resolve(o).then(t,(function(e){return r(e),t()}))}catch(e){r(e)}}if(e.hasError)throw e.error}()}const q={__extends:o,__assign:a,__rest:i,__decorate:s,__param:c,__metadata:d,__awaiter:y,__generator:_,__createBinding:b,__exportStar:v,__values:h,__read:m,__spread:w,__spreadArrays:g,__spreadArray:P,__await:O,__asyncGenerator:j,__asyncDelegator:S,__asyncValues:x,__makeTemplateObject:E,__importStar:B,__importDefault:T,__classPrivateFieldGet:D,__classPrivateFieldSet:M,__classPrivateFieldIn:I,__addDisposableResource:R,__disposeResources:F}}},o={};function a(e){var r=o[e];if(void 0!==r)return r.exports;var t=o[e]={exports:{}};return n[e](t,t.exports,a),t.exports}a.d=(e,r)=>{for(var t in r)a.o(r,t)&&!a.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:r[t]})},a.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),a.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var i={};return(()=>{var e=i;Object.defineProperty(e,"__esModule",{value:!0}),e.ProgressBar=void 0;const r=a(428);var t=a(428);Object.defineProperty(e,"ProgressBar",{enumerable:!0,get:function(){return t.ProgressBar}}),e.default=r.ProgressBar})(),i})()));

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@nimbus-ds/progress-bar",
+  "version": "1.0.0",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "yarn g:webpack",
+    "clean": "rm -rf dist",
+    "version": "yarn version"
+  },
+  "dependencies": {
+    "@nimbus-ds/skeleton": "^3.0.1"
+  },
+  "peerDependencies": {
+    "@nimbus-ds/styles": "^9.20.0",
+    "react": "^16.8 || ^17.0 || ^18.0",
+    "react-dom": "^16.8 || ^17.0 || ^18.0"
+  },
+  "homepage": "https://nimbus.nuvemshop.com.br/documentation",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/TiendaNube/nimbus-design-system.git"
+  },
+  "bugs": {
+    "url": "https://github.com/TiendaNube/nimbus-design-system/issues"
+  },
+  "devDependencies": {
+    "@nimbus-ds/box": "^4.2.0",
+    "@nimbus-ds/webpack": "^1.6.0"
+  }
+}