@spark-ui/progress 1.2.0 → 1.4.0

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.4.0](https://github.com/adevinta/spark/compare/@spark-ui/progress@1.3.0...@spark-ui/progress@1.4.0) (2023-10-13)
+
+### Features
+
+- **progress:** add intent prop ([a13d817](https://github.com/adevinta/spark/commit/a13d817cb512c083bb77907c06a9be1ed128f68a))
+- **progress:** add shape prop ([f955926](https://github.com/adevinta/spark/commit/f955926a099b5bc1778ed61edb7228b8bb24d570))
+
+# [1.3.0](https://github.com/adevinta/spark/compare/@spark-ui/progress@1.2.0...@spark-ui/progress@1.3.0) (2023-09-29)
+
+### Bug Fixes
+
+- doc ([5506203](https://github.com/adevinta/spark/commit/55062039dc67c3532be42a4661540052094163d9))
+- **progress:** doc ([8935b5f](https://github.com/adevinta/spark/commit/8935b5f5e8f162530af2ea1d8b9d8fee5600d23c))
+
+### Features
+
+- **progress:** lint ([1a6c11f](https://github.com/adevinta/spark/commit/1a6c11f4b81e204b47c189cc0afb8458e7eb84b0))
+
 # [1.2.0](https://github.com/adevinta/spark/compare/@spark-ui/progress@1.1.2...@spark-ui/progress@1.2.0) (2023-09-28)
 
 ### Features

package/README.md

@@ -1,13 +1,13 @@
 # Progress
 > @spark-ui/progress
 
-![storybook](https://img.shields.io/badge/storybook-black?logo=storybook&link=https%3A%2F%2Fsparkui.vercel.app%2F%3Fpath%3D%2Fdocs%2Fcomponents-progress--docs)
-![documentation](https://img.shields.io/badge/documentation-black?logo=googledocs&link=https%3A%2F%2Fsparkui-adv.vercel.app%2Fdocs%2Fcomponents%2Fprogress)
-![issue](https://img.shields.io/badge/report%20a%20bug-black?logo=openbugbounty&logoColor=red&link=https%3A%2F%2Fgithub.com%2Fadevinta%2Fspark%2Fissues%2Fnew%3F%26projects%3D4%26template%3Dbug-report.yml%26assignees%3D%26labels%3Dcomponent%2Cprogress)
-![npm](https://img.shields.io/npm/dt/%40spark-ui/progress?logo=npm&labelColor=black&link=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2F%40spark-ui%2Fprogress)
+[![storybook](https://img.shields.io/badge/storybook-black?logo=storybook)](https://sparkui.vercel.app/?path=/docs/components-progress--docs)
+[![documentation](https://img.shields.io/badge/documentation-black?logo=googledocs)](https://sparkui-adv.vercel.app/docs/components/progress)
+[![issue](https://img.shields.io/badge/report%20a%20bug-black?logo=openbugbounty&logoColor=red)](https://github.com/adevinta/spark/issues/new?&projects=4&template=bug-report.yml&assignees=&labels=component,progress)
+[![npm](https://img.shields.io/npm/dt/%40spark-ui/progress?logo=npm&labelColor=black)](https://www.npmjs.com/package/@spark-ui/progress)
 
 
 This package is part of the [`@spark-ui`](https://github.com/adevinta/spark) react-js user interface component library project.
 
-![Issues open](https://img.shields.io/github/issues-search/adevinta/spark?query=is%3Aopen%20label%3Acomponent%20label%3Aprogressl&logo=openbugbounty&logoColor=red&label=issues%20open&color=red&link=https%3A%2F%2Fgithub.com%2Fadevinta%2Fspark%2Fissues%3Fq%3Dis%253Aopen%2Blabel%253Acomponent%2Blabel%253Aprogress)
-![NPM](https://img.shields.io/npm/l/%40spark-ui%2Fprogress)
+[![Issues open](https://img.shields.io/github/issues-search/adevinta/spark?query=is%3Aopen%20label%3Acomponent%20label%3Aprogressl&logo=openbugbounty&logoColor=red&label=issues%20open&color=red)](https://github.com/adevinta/spark/issues?q=is%3Aopen+label%3Acomponent+label%3Aprogress)
+[![NPM](https://img.shields.io/npm/l/%40spark-ui%2Fprogress)](https://github.com/adevinta/spark/blob/main/packages/components/progress/LICENSE.md)

package/dist/Progress.d.ts

@@ -1,5 +1,7 @@
 import { ProgressProps as ProgressPrimitiveProps } from '@radix-ui/react-progress';
-export interface ProgressProps extends ProgressPrimitiveProps {
+import { ProgressIndicatorStylesProps } from './ProgressIndicator.styles';
+export interface ProgressProps extends ProgressPrimitiveProps, Pick<ProgressIndicatorStylesProps, 'intent'> {
+    shape?: 'square' | 'rounded';
     isIndeterminate?: boolean;
 }
 export declare const Progress: import("react").ForwardRefExoticComponent<ProgressProps & {

package/dist/ProgressBar.styles.d.ts

@@ -0,0 +1,5 @@
+import { VariantProps } from 'class-variance-authority';
+export declare const progressBarStyles: (props?: ({
+    shape?: "square" | "rounded" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export type ProgressBarStylesProps = VariantProps<typeof progressBarStyles>;

package/dist/ProgressContext.d.ts

@@ -1,7 +1,10 @@
+import { ProgressIndicatorStylesProps } from './ProgressIndicator.styles';
 export interface ProgressContextValue {
     value: number;
     max: number;
     isIndeterminate: boolean;
+    shape: 'square' | 'rounded';
+    intent: ProgressIndicatorStylesProps['intent'];
     onLabelId: (id?: string) => void;
 }
 export declare const ProgressContext: import("react").Context<ProgressContextValue | null>;

package/dist/ProgressIndicator.styles.d.ts

@@ -1,5 +1,7 @@
 import { VariantProps } from 'class-variance-authority';
 export declare const progressIndicatorStyles: (props?: ({
+    intent?: "main" | "basic" | "support" | "accent" | "success" | "alert" | "danger" | "info" | "neutral" | null | undefined;
+    shape?: "square" | "rounded" | null | undefined;
     isIndeterminate?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export type ProgressIndicatorStylesProps = VariantProps<typeof progressIndicatorStyles>;

package/dist/index.d.ts

@@ -8,6 +8,7 @@ export declare const Progress: FC<ProgressProps> & {
     Bar: typeof ProgressBar;
     Indicator: typeof ProgressIndicator;
 };
+export { type ProgressProps } from './Progress';
 export { type ProgressBarProps } from './ProgressBar';
 export { type ProgressLabelProps } from './ProgressLabel';
 export { type ProgressIndicatorProps } from './ProgressIndicator';

package/dist/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),b=require("@radix-ui/react-progress"),u=require("class-variance-authority"),y=require("@radix-ui/react-id"),x=require("@spark-ui/use-merge-refs"),p=e.createContext(null),N=()=>{const r=e.useContext(p);if(!r)throw new Error("useProgress must be used within a Progress provider");return r},I=u.cva(["h-full w-full","bg-basic","rounded-sm","transition-transform duration-400"],{variants:{isIndeterminate:{true:["absolute","-translate-x-1/2","animate-standalone-indeterminate-bar"],false:[]}}}),m=e.forwardRef(({className:r,style:a,...s},t)=>{const{value:n,max:l,isIndeterminate:o}=N(),i=(l-n)/l*100;return e.createElement(b.ProgressIndicator,{className:I({isIndeterminate:o,className:r}),style:{...a,...!o&&{transform:`translateX(-${i}%)`}},ref:t,...s})});m.displayName="Progress.Indicator";const c=e.forwardRef(({className:r,children:a=e.createElement(m,null),...s},t)=>e.createElement("div",{className:u.cx("relative h-sz-4 w-full transform-gpu overflow-hidden rounded-sm bg-on-background/dim-4",r),ref:t,...s},a));c.displayName="Progress.Bar";const P=e.forwardRef(({className:r,value:a,max:s=100,isIndeterminate:t=!1,children:n=e.createElement(c,null),...l},o)=>{const[i,d]=e.useState(),v=e.useMemo(()=>({value:a??0,max:s,isIndeterminate:t,onLabelId:d}),[s,a,t,d]);return e.createElement(p.Provider,{"data-spark-component":"progress",value:v},e.createElement(b.Progress,{ref:o,className:u.cx("flex flex-col gap-sm",r),value:a,"aria-labelledby":i,max:s,...l},n))});P.displayName="Progress";const f=e.forwardRef(({id:r,children:a,...s},t)=>{const n=y.useId(r),{onLabelId:l}=N(),o=e.useCallback(d=>{l(d?n:void 0)},[n,l]),i=x.useMergeRefs(t,o);return e.createElement("span",{id:n,className:"text-body-2 text-on-surface",ref:i,...s},a)});f.displayName="Progress.Label";const g=Object.assign(P,{Label:f,Bar:c,Indicator:m});g.displayName="Progress",c.displayName="Progress.Bar",m.displayName="Progress.Indicator",f.displayName="Progress.Label",exports.Progress=g;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),h=require("@radix-ui/react-progress"),g=require("class-variance-authority"),x=require("@radix-ui/react-id"),I=require("@spark-ui/use-merge-refs"),w=g.cva(["relative","h-sz-4 w-full","transform-gpu overflow-hidden","bg-on-background/dim-4"],{variants:{shape:{square:[],rounded:["rounded-sm"]}}}),v=e.createContext(null),b=()=>{const a=e.useContext(v);if(!a)throw new Error("useProgress must be used within a Progress provider");return a},q=g.cva(["h-full w-full","transition-transform duration-400"],{variants:{intent:{basic:["bg-basic"],main:["bg-main"],support:["bg-support"],accent:["bg-accent"],success:["bg-success"],alert:["bg-alert"],danger:["bg-error"],info:["bg-info"],neutral:["bg-neutral"]},shape:{square:[],rounded:["rounded-sm"]},isIndeterminate:{true:["absolute","-translate-x-1/2","animate-standalone-indeterminate-bar"],false:[]}}}),d=e.forwardRef(({className:a,style:s,...t},n)=>{const{value:r,max:l,intent:i,shape:c,isIndeterminate:o}=b(),m=(l-r)/l*100;return e.createElement(h.ProgressIndicator,{className:q({className:a,intent:i,shape:c,isIndeterminate:o}),style:{...s,...!o&&{transform:`translateX(-${m}%)`}},ref:n,...t})});d.displayName="Progress.Indicator";const u=e.forwardRef(({className:a,children:s=e.createElement(d,null),...t},n)=>{const{shape:r}=b();return e.createElement("div",{className:w({className:a,shape:r}),ref:n,...t},s)});u.displayName="Progress.Bar";const P=e.forwardRef(({className:a,value:s,max:t=100,shape:n="square",intent:r="basic",isIndeterminate:l=!1,children:i=e.createElement(u,null),...c},o)=>{const[m,p]=e.useState(),y=e.useMemo(()=>({value:s??0,max:t,intent:r,shape:n,isIndeterminate:l,onLabelId:p}),[t,s,r,n,l,p]);return e.createElement(v.Provider,{"data-spark-component":"progress",value:y},e.createElement(h.Progress,{ref:o,className:g.cx("flex flex-col gap-sm",a),value:s,"aria-labelledby":m,max:t,...c},i))});P.displayName="Progress";const f=e.forwardRef(({id:a,children:s,...t},n)=>{const r=x.useId(a),{onLabelId:l}=b(),i=e.useCallback(o=>{l(o?r:void 0)},[r,l]),c=I.useMergeRefs(n,i);return e.createElement("span",{id:r,className:"text-body-2 text-on-surface",ref:c,...t},s)});f.displayName="Progress.Label";const N=Object.assign(P,{Label:f,Bar:u,Indicator:d});N.displayName="Progress",u.displayName="Progress.Bar",d.displayName="Progress.Indicator",f.displayName="Progress.Label",exports.Progress=N;

package/dist/index.mjs

@@ -1,34 +1,37 @@
-import o, { createContext as v, useContext as x, forwardRef as d, useState as y, useMemo as I, useCallback as h } from "react";
-import { ProgressIndicator as E, Progress as w } from "@radix-ui/react-progress";
-import { cva as L, cx as g } from "class-variance-authority";
-import { useId as k } from "@radix-ui/react-id";
-import { useMergeRefs as B } from "@spark-ui/use-merge-refs";
-const p = v(null), b = () => {
-  const e = x(p);
+import o, { createContext as x, useContext as y, forwardRef as c, useState as I, useMemo as E, useCallback as w } from "react";
+import { ProgressIndicator as L, Progress as k } from "@radix-ui/react-progress";
+import { cva as h, cx as q } from "class-variance-authority";
+import { useId as B } from "@radix-ui/react-id";
+import { useMergeRefs as C } from "@spark-ui/use-merge-refs";
+const M = h(["relative", "h-sz-4 w-full", "transform-gpu overflow-hidden", "bg-on-background/dim-4"], { variants: { shape: { square: [], rounded: ["rounded-sm"] } } }), N = x(null), g = () => {
+  const e = y(N);
   if (!e)
     throw new Error("useProgress must be used within a Progress provider");
   return e;
-}, C = L(["h-full w-full", "bg-basic", "rounded-sm", "transition-transform duration-400"], { variants: { isIndeterminate: { true: ["absolute", "-translate-x-1/2", "animate-standalone-indeterminate-bar"], false: [] } } }), c = d(({ className: e, style: a, ...s }, r) => {
-  const { value: t, max: n, isIndeterminate: l } = b(), m = (n - t) / n * 100;
-  return o.createElement(E, { className: C({ isIndeterminate: l, className: e }), style: { ...a, ...!l && { transform: `translateX(-${m}%)` } }, ref: r, ...s });
+}, R = h(["h-full w-full", "transition-transform duration-400"], { variants: { intent: { basic: ["bg-basic"], main: ["bg-main"], support: ["bg-support"], accent: ["bg-accent"], success: ["bg-success"], alert: ["bg-alert"], danger: ["bg-error"], info: ["bg-info"], neutral: ["bg-neutral"] }, shape: { square: [], rounded: ["rounded-sm"] }, isIndeterminate: { true: ["absolute", "-translate-x-1/2", "animate-standalone-indeterminate-bar"], false: [] } } }), d = c(({ className: e, style: s, ...r }, t) => {
+  const { value: a, max: n, intent: i, shape: m, isIndeterminate: l } = g(), p = (n - a) / n * 100;
+  return o.createElement(L, { className: R({ className: e, intent: i, shape: m, isIndeterminate: l }), style: { ...s, ...!l && { transform: `translateX(-${p}%)` } }, ref: t, ...r });
+});
+d.displayName = "Progress.Indicator";
+const u = c(({ className: e, children: s = o.createElement(d, null), ...r }, t) => {
+  const { shape: a } = g();
+  return o.createElement("div", { className: M({ className: e, shape: a }), ref: t, ...r }, s);
 });
-c.displayName = "Progress.Indicator";
-const u = d(({ className: e, children: a = o.createElement(c, null), ...s }, r) => o.createElement("div", { className: g("relative h-sz-4 w-full transform-gpu overflow-hidden rounded-sm bg-on-background/dim-4", e), ref: r, ...s }, a));
 u.displayName = "Progress.Bar";
-const N = d(({ className: e, value: a, max: s = 100, isIndeterminate: r = !1, children: t = o.createElement(u, null), ...n }, l) => {
-  const [m, i] = y(), P = I(() => ({ value: a ?? 0, max: s, isIndeterminate: r, onLabelId: i }), [s, a, r, i]);
-  return o.createElement(p.Provider, { "data-spark-component": "progress", value: P }, o.createElement(w, { ref: l, className: g("flex flex-col gap-sm", e), value: a, "aria-labelledby": m, max: s, ...n }, t));
+const v = c(({ className: e, value: s, max: r = 100, shape: t = "square", intent: a = "basic", isIndeterminate: n = !1, children: i = o.createElement(u, null), ...m }, l) => {
+  const [p, f] = I(), P = E(() => ({ value: s ?? 0, max: r, intent: a, shape: t, isIndeterminate: n, onLabelId: f }), [r, s, a, t, n, f]);
+  return o.createElement(N.Provider, { "data-spark-component": "progress", value: P }, o.createElement(k, { ref: l, className: q("flex flex-col gap-sm", e), value: s, "aria-labelledby": p, max: r, ...m }, i));
 });
-N.displayName = "Progress";
-const f = d(({ id: e, children: a, ...s }, r) => {
-  const t = k(e), { onLabelId: n } = b(), l = h((i) => {
-    n(i ? t : void 0);
-  }, [t, n]), m = B(r, l);
-  return o.createElement("span", { id: t, className: "text-body-2 text-on-surface", ref: m, ...s }, a);
+v.displayName = "Progress";
+const b = c(({ id: e, children: s, ...r }, t) => {
+  const a = B(e), { onLabelId: n } = g(), i = w((l) => {
+    n(l ? a : void 0);
+  }, [a, n]), m = C(t, i);
+  return o.createElement("span", { id: a, className: "text-body-2 text-on-surface", ref: m, ...r }, s);
 });
-f.displayName = "Progress.Label";
-const M = Object.assign(N, { Label: f, Bar: u, Indicator: c });
-M.displayName = "Progress", u.displayName = "Progress.Bar", c.displayName = "Progress.Indicator", f.displayName = "Progress.Label";
+b.displayName = "Progress.Label";
+const j = Object.assign(v, { Label: b, Bar: u, Indicator: d });
+j.displayName = "Progress", u.displayName = "Progress.Bar", d.displayName = "Progress.Indicator", b.displayName = "Progress.Label";
 export {
-  M as Progress
+  j as Progress
 };

package/dist/public/docgen.json

@@ -5,6 +5,34 @@
     "displayName": "Progress",
     "methods": [],
     "props": {
+      "shape": {
+        "defaultValue": null,
+        "description": "",
+        "name": "shape",
+        "parent": {
+          "fileName": "progress/src/Progress.tsx",
+          "name": "ProgressProps"
+        },
+        "declarations": [
+          {
+            "fileName": "progress/src/Progress.tsx",
+            "name": "ProgressProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "enum",
+          "raw": "\"square\" | \"rounded\"",
+          "value": [
+            {
+              "value": "\"square\""
+            },
+            {
+              "value": "\"rounded\""
+            }
+          ]
+        }
+      },
       "isIndeterminate": {
         "defaultValue": null,
         "description": "",
@@ -95,6 +123,46 @@
         "type": {
           "name": "boolean"
         }
+      },
+      "intent": {
+        "defaultValue": null,
+        "description": "",
+        "name": "intent",
+        "declarations": [],
+        "required": false,
+        "type": {
+          "name": "enum",
+          "raw": "\"main\" | \"basic\" | \"support\" | \"accent\" | \"success\" | \"alert\" | \"danger\" | \"info\" | \"neutral\"",
+          "value": [
+            {
+              "value": "\"main\""
+            },
+            {
+              "value": "\"basic\""
+            },
+            {
+              "value": "\"support\""
+            },
+            {
+              "value": "\"accent\""
+            },
+            {
+              "value": "\"success\""
+            },
+            {
+              "value": "\"alert\""
+            },
+            {
+              "value": "\"danger\""
+            },
+            {
+              "value": "\"info\""
+            },
+            {
+              "value": "\"neutral\""
+            }
+          ]
+        }
       }
     }
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/progress",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "description": "Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.",
   "publishConfig": {
     "access": "public"
@@ -48,5 +48,5 @@
   },
   "homepage": "https://sparkui.vercel.app",
   "license": "MIT",
-  "gitHead": "60a8f00aef92177084ac744bc4fd56ef13bc9948"
+  "gitHead": "24c1a2854b821dbe54d3a7bef88468ced9552aef"
 }