@spark-ui/progress 1.4.1 → 1.4.2

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.4.2](https://github.com/adevinta/spark/compare/@spark-ui/progress@1.4.1...@spark-ui/progress@1.4.2) (2024-04-22)
+
+**Note:** Version bump only for package @spark-ui/progress
+
 ## [1.4.1](https://github.com/adevinta/spark/compare/@spark-ui/progress@1.4.0...@spark-ui/progress@1.4.1) (2023-12-05)
 
 **Note:** Version bump only for package @spark-ui/progress

package/dist/ProgressContext.d.ts

@@ -8,4 +8,5 @@ export interface ProgressContextValue {
     onLabelId: (id?: string) => void;
 }
 export declare const ProgressContext: import("react").Context<ProgressContextValue | null>;
+export declare const ID_PREFIX = ":progress";
 export declare const useProgress: () => ProgressContextValue;

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("@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;
+"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;

package/dist/index.mjs

@@ -1,37 +1,36 @@
-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 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);
   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: [] } } }), 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 });
+}, 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 });
 });
-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);
+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);
 });
-u.displayName = "Progress.Bar";
-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));
+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 = 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);
+const b = d(({ id: e, children: a, ...s }, t) => {
+  const n = `:progress-label-${w()}`, r = e || n, { onLabelId: l } = g(), m = L((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 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";
+const $ = Object.assign(v, { Label: b, Bar: p, Indicator: u });
+$.displayName = "Progress", p.displayName = "Progress.Bar", u.displayName = "Progress.Indicator", b.displayName = "Progress.Label";
 export {
-  j as Progress
+  $ as Progress
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/progress",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "description": "Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.",
   "publishConfig": {
     "access": "public"
@@ -23,7 +23,6 @@
     "build": "vite build"
   },
   "dependencies": {
-    "@radix-ui/react-id": "1.0.1",
     "@radix-ui/react-progress": "1.0.3",
     "@spark-ui/use-merge-refs": "^0.4.0",
     "class-variance-authority": "0.7.0"
@@ -48,5 +47,5 @@
   },
   "homepage": "https://sparkui.vercel.app",
   "license": "MIT",
-  "gitHead": "e2fd654d551c09971906b3b0036f9a385369bb7a"
+  "gitHead": "5ed3e4725b9166b355dc96ce39f0d35e414a1ad9"
 }