@spark-ui/progress 0.1.0 → 0.2.1

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.
 
+## [0.2.1](https://github.com/adevinta/spark/compare/@spark-ui/progress@0.2.0...@spark-ui/progress@0.2.1) (2023-08-29)
+
+### Bug Fixes
+
+- **progress:** improve animation ([5ffcb1d](https://github.com/adevinta/spark/commit/5ffcb1dddebf1feb1f5634832ad0ca91a639ac10))
+- **progress:** update styles ([4532c10](https://github.com/adevinta/spark/commit/4532c100361a6314e6de5be76f0e13b1017701a0))
+
+# [0.2.0](https://github.com/adevinta/spark/compare/@spark-ui/progress@0.1.0...@spark-ui/progress@0.2.0) (2023-08-25)
+
+### Features
+
+- **progress:** add documentation and tests ([19ac4e5](https://github.com/adevinta/spark/commit/19ac4e5f08d2dbb38415ae4ca4e2000d75a59506))
+- **progress:** add label to progress component ([efa8f28](https://github.com/adevinta/spark/commit/efa8f289ef1dc7379a297d0c2c8e74c87b6194cc))
+- **progress:** improve demo and API ([0387bc7](https://github.com/adevinta/spark/commit/0387bc7bc32b5f3bc976b9b9a172b1b62389ee4e))
+- **progress:** remove not needed id ([62ec87a](https://github.com/adevinta/spark/commit/62ec87a90c2c384a5b98335d4f79b30cc76eb916))
+- **progress:** update animation ([520f54a](https://github.com/adevinta/spark/commit/520f54af5f2586725cd56bc2434dae6d5385d968))
+- **progress:** update deps and minor changes ([5fd0450](https://github.com/adevinta/spark/commit/5fd04503bc7d6d6ea76c2eb4e80340ad52946c76))
+
 # 0.1.0 (2023-08-21)
 
 ### Features

package/dist/Progress.d.ts

@@ -1,5 +1,7 @@
 import { ProgressProps as ProgressPrimitiveProps } from '@radix-ui/react-progress';
-export type ProgressProps = ProgressPrimitiveProps;
-export declare const Progress: import("react").ForwardRefExoticComponent<ProgressPrimitiveProps & {
+export interface ProgressProps extends ProgressPrimitiveProps {
+    isIndeterminate?: boolean;
+}
+export declare const Progress: import("react").ForwardRefExoticComponent<ProgressProps & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/dist/ProgressBar.d.ts

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

package/dist/ProgressContext.d.ts

@@ -0,0 +1,8 @@
+export interface ProgressContextValue {
+    value: number;
+    max: number;
+    isIndeterminate: boolean;
+    onLabelId: (id?: string) => void;
+}
+export declare const ProgressContext: import("react").Context<ProgressContextValue | null>;
+export declare const useProgress: () => ProgressContextValue;

package/dist/ProgressIndicator.d.ts

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

package/dist/ProgressIndicator.styles.d.ts

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

package/dist/ProgressLabel.d.ts

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

package/dist/index.d.ts

@@ -1 +1,13 @@
-export { Progress } from './Progress';
+import { FC } from 'react';
+import { ProgressProps } from './Progress';
+import { ProgressBar } from './ProgressBar';
+import { ProgressIndicator } from './ProgressIndicator';
+import { ProgressLabel } from './ProgressLabel';
+export { type ProgressBarProps } from './ProgressBar';
+export { type ProgressLabelProps } from './ProgressLabel';
+export { type ProgressIndicatorProps } from './ProgressIndicator';
+export declare const Progress: FC<ProgressProps> & {
+    Label: typeof ProgressLabel;
+    Bar: typeof ProgressBar;
+    Indicator: typeof ProgressIndicator;
+};

package/dist/index.js

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

package/dist/index.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/progress",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "description": "Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.",
   "publishConfig": {
     "access": "public"
@@ -12,7 +12,10 @@
     "build": "vite build"
   },
   "dependencies": {
-    "@radix-ui/react-progress": "1.0.3"
+    "@radix-ui/react-id": "1.0.1",
+    "@radix-ui/react-progress": "1.0.3",
+    "@spark-ui/use-merge-refs": "^0.3.4",
+    "class-variance-authority": "0.7.0"
   },
   "peerDependencies": {
     "@spark-ui/theme-utils": "^3.0.2",
@@ -30,5 +33,5 @@
   },
   "homepage": "https://sparkui.vercel.app",
   "license": "MIT",
-  "gitHead": "3b9aceb8fc1c0b62cad5536d6585b6300b4357d1"
+  "gitHead": "f620242462b456136fd398e593b6a1d8a6cbc0a5"
 }