@spark-ui/progress 7.3.6 → 8.0.0

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.0.0](https://github.com/adevinta/spark/compare/v7.3.7...v8.0.0) (2025-01-13)
+
+**Note:** Version bump only for package @spark-ui/progress
+
+## [7.3.7](https://github.com/adevinta/spark/compare/v7.3.6...v7.3.7) (2025-01-08)
+
+**Note:** Version bump only for package @spark-ui/progress
+
 ## [7.3.6](https://github.com/adevinta/spark/compare/v7.3.5...v7.3.6) (2025-01-08)
 
 **Note:** Version bump only for package @spark-ui/progress

package/dist/Progress.d.ts

@@ -1,9 +1,12 @@
 import { ProgressProps as ProgressPrimitiveProps } from '@radix-ui/react-progress';
+import { PropsWithChildren, Ref } from 'react';
 import { ProgressIndicatorStylesProps } from './ProgressIndicator.styles';
 export interface ProgressProps extends ProgressPrimitiveProps, Pick<ProgressIndicatorStylesProps, 'intent'> {
     shape?: 'square' | 'rounded';
     isIndeterminate?: boolean;
+    ref?: Ref<HTMLDivElement>;
 }
-export declare const Progress: import("react").ForwardRefExoticComponent<ProgressProps & {
-    children?: import("react").ReactNode;
-} & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Progress: {
+    ({ className, value: valueProp, max, shape, intent, isIndeterminate, children, ref, ...others }: PropsWithChildren<ProgressProps>): import("react").JSX.Element;
+    displayName: string;
+};

package/dist/ProgressBar.d.ts

@@ -1,5 +1,6 @@
-import { ComponentPropsWithoutRef } from 'react';
-export type ProgressBarProps = ComponentPropsWithoutRef<'div'>;
-export declare const ProgressBar: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    children?: import("react").ReactNode;
-} & import("react").RefAttributes<HTMLDivElement>>;
+import { ComponentPropsWithRef, PropsWithChildren } from 'react';
+export type ProgressBarProps = ComponentPropsWithRef<'div'>;
+export declare const ProgressBar: {
+    ({ className, children, ref, ...others }: PropsWithChildren<ProgressBarProps>): import("react").JSX.Element;
+    displayName: string;
+};

package/dist/ProgressIndicator.d.ts

@@ -1,5 +1,6 @@
-import { ComponentPropsWithoutRef } from 'react';
-export type ProgressIndicatorProps = ComponentPropsWithoutRef<'div'>;
-export declare const ProgressIndicator: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    children?: import("react").ReactNode;
-} & import("react").RefAttributes<HTMLDivElement>>;
+import { ComponentPropsWithRef, PropsWithChildren } from 'react';
+export type ProgressIndicatorProps = ComponentPropsWithRef<'div'>;
+export declare const ProgressIndicator: {
+    ({ className, style, ref, ...others }: PropsWithChildren<ProgressIndicatorProps>): import("react").JSX.Element;
+    displayName: string;
+};

package/dist/ProgressLabel.d.ts

@@ -1,3 +1,6 @@
-import { ComponentPropsWithoutRef } from 'react';
-export type ProgressLabelProps = ComponentPropsWithoutRef<'span'>;
-export declare const ProgressLabel: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+import { ComponentPropsWithRef } from 'react';
+export type ProgressLabelProps = ComponentPropsWithRef<'span'>;
+export declare const ProgressLabel: {
+    ({ id: idProp, children, ref: forwardedRef, ...others }: ProgressLabelProps): import("react").JSX.Element;
+    displayName: string;
+};

package/dist/index.js

@@ -1 +1 @@
-"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("@spark-ui/use-merge-refs"),I=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},w=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:[]}}}),u=e.forwardRef(({className:a,style:r,...s},n)=>{const{value:l,max:t,intent:o,shape:c,isIndeterminate:i}=b(),d=(t-l)/t*100;return e.createElement(h.ProgressIndicator,{className:w({className:a,intent:o,shape:c,isIndeterminate:i}),style:{...r,...!i&&{transform:`translateX(-${d}%)`}},ref:n,...s})});u.displayName="Progress.Indicator";const m=e.forwardRef(({className:a,children:r=e.createElement(u,null),...s},n)=>{const{shape:l}=b();return e.createElement("div",{className:I({className:a,shape:l}),ref:n,...s},r)});m.displayName="Progress.Bar";const P=e.forwardRef(({className:a,value:r,max:s=100,shape:n="square",intent:l="basic",isIndeterminate:t=!1,children:o=e.createElement(m,null),...c},i)=>{const[d,f]=e.useState(),y=e.useMemo(()=>({value:r??0,max:s,intent:l,shape:n,isIndeterminate:t,onLabelId:f}),[s,r,l,n,t,f]);return e.createElement(v.Provider,{"data-spark-component":"progress",value:y},e.createElement(h.Progress,{ref:i,className:g.cx("flex flex-col gap-sm",a),value:r,"aria-labelledby":d,max:s,...c},o))});P.displayName="Progress";const p=e.forwardRef(({id:a,children:r,...s},n)=>{const l=`:progress-label-${e.useId()}`,t=a||l,{onLabelId:o}=b(),c=e.useCallback(d=>{o(d?t:void 0)},[t,o]),i=x.useMergeRefs(n,c);return e.createElement("span",{id:t,className:"text-body-2 text-on-surface",ref:i,...s},r)});p.displayName="Progress.Label";const N=Object.assign(P,{Label:p,Bar:m,Indicator:u});N.displayName="Progress",m.displayName="Progress.Bar",u.displayName="Progress.Indicator",p.displayName="Progress.Label",exports.Progress=N;
+"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("@spark-ui/use-merge-refs"),I=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},E=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:[]}}}),u=({className:a,style:r,ref:s,...n})=>{const{value:l,max:t,intent:o,shape:c,isIndeterminate:i}=b(),d=(t-l)/t*100;return e.createElement(h.ProgressIndicator,{className:E({className:a,intent:o,shape:c,isIndeterminate:i}),style:{...r,...!i&&{transform:`translateX(-${d}%)`}},ref:s,...n})};u.displayName="Progress.Indicator";const m=({className:a,children:r=e.createElement(u,null),ref:s,...n})=>{const{shape:l}=b();return e.createElement("div",{className:I({className:a,shape:l}),ref:s,...n},r)};m.displayName="Progress.Bar";const P=({className:a,value:r,max:s=100,shape:n="square",intent:l="basic",isIndeterminate:t=!1,children:o=e.createElement(m,null),ref:c,...i})=>{const[d,f]=e.useState(),y=e.useMemo(()=>({value:r??0,max:s,intent:l,shape:n,isIndeterminate:t,onLabelId:f}),[s,r,l,n,t,f]);return e.createElement(v.Provider,{"data-spark-component":"progress",value:y},e.createElement(h.Progress,{ref:c,className:g.cx("flex flex-col gap-sm",a),value:r,"aria-labelledby":d,max:s,...i},o))};P.displayName="Progress";const p=({id:a,children:r,ref:s,...n})=>{const l=`:progress-label-${e.useId()}`,t=a||l,{onLabelId:o}=b(),c=e.useCallback(d=>{o(d?t:void 0)},[t,o]),i=x.useMergeRefs(s,c);return e.createElement("span",{id:t,className:"text-body-2 text-on-surface",ref:i,...n},r)};p.displayName="Progress.Label";const N=Object.assign(P,{Label:p,Bar:m,Indicator:u});N.displayName="Progress",m.displayName="Progress.Bar",u.displayName="Progress.Indicator",p.displayName="Progress.Label",exports.Progress=N;

package/dist/index.mjs

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

package/dist/public/docgen.json

@@ -52,6 +52,25 @@
           "name": "boolean"
         }
       },
+      "ref": {
+        "defaultValue": null,
+        "description": "",
+        "name": "ref",
+        "parent": {
+          "fileName": "progress/src/Progress.tsx",
+          "name": "ProgressProps"
+        },
+        "declarations": [
+          {
+            "fileName": "progress/src/Progress.tsx",
+            "name": "ProgressProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "Ref<HTMLDivElement>"
+        }
+      },
       "value": {
         "defaultValue": null,
         "description": "",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/progress",
-  "version": "7.3.6",
+  "version": "8.0.0",
   "description": "Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.",
   "publishConfig": {
     "access": "public"
@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "@radix-ui/react-progress": "1.1.0",
-    "@spark-ui/use-merge-refs": "^7.3.6",
+    "@spark-ui/use-merge-refs": "^8.0.0",
     "class-variance-authority": "0.7.0"
   },
   "peerDependencies": {
@@ -48,5 +48,5 @@
   },
   "homepage": "https://sparkui.vercel.app",
   "license": "MIT",
-  "gitHead": "969983868f32c57cf6d6ffc838de66b51fa4163d"
+  "gitHead": "309903aa55f44ebd43d2a1fe43691f110a5036ea"
 }