@pittorica/progress-react 0.25.0 → 0.26.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/README.md +10 -1
  2. package/dist/Progress.d.ts +2 -4
  3. package/dist/Progress.d.ts.map +1 -1
  4. package/dist/index.d.ts +1 -2
  5. package/dist/index.d.ts.map +1 -1
  6. package/dist/index.js +79 -123
  7. package/package.json +10 -9
  8. package/dist/Progress.stories.d.ts +0 -13
  9. package/dist/Progress.stories.d.ts.map +0 -1
  10. package/dist/Progress.test.d.ts +0 -5
  11. package/dist/Progress.test.d.ts.map +0 -1
package/README.md CHANGED
@@ -12,7 +12,16 @@ npm install @pittorica/progress-react
12
12
 
13
13
  ```jsx
14
14
  import { Progress } from '@pittorica/progress-react';
15
- // TODO: Add usage example
15
+
16
+ function MyComponent() {
17
+ return (
18
+ <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
19
+ <Progress value={45} color="indigo" />
20
+ <Progress value={100} color="success" />
21
+ <Progress value={15} color="danger" />
22
+ </div>
23
+ );
24
+ }
16
25
  ```
17
26
 
18
27
  ## License
package/dist/Progress.d.ts CHANGED
@@ -11,15 +11,13 @@ export type ProgressProps<E extends ElementType = 'div'> = BoxProps<E> & {
11
11
  max?: number;
12
12
  /** @default 'indigo' */
13
13
  color?: PittoricaColor;
14
- /** @default 'default' */
15
- variant?: 'default' | 'wave';
16
14
  };
17
15
  /**
18
- * Funky Progress component using SVG Patterns for decorative effects.
16
+ * Progress component displays an indicator of the status of a task or process.
19
17
  * Fully polymorphic and agnostic foundation.
20
18
  */
21
19
  export declare const Progress: {
22
- <E extends ElementType = "div">({ value, max, color, variant, className, style, as, ...props }: ProgressProps<E>): import("react/jsx-runtime").JSX.Element;
20
+ <E extends ElementType = "div">({ value, max, color, className, style, as, ...props }: ProgressProps<E>): import("react/jsx-runtime").JSX.Element;
23
21
  displayName: string;
24
22
  };
25
23
  //# sourceMappingURL=Progress.d.ts.map
package/dist/Progress.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Progress.d.ts","sourceRoot":"","sources":["../src/Progress.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,WAAW,EAAS,MAAM,OAAO,CAAC;AAIpE,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAE5D;;GAEG;AACH,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IAAI,QAAQ,CAAC,CAAC,CAAC,GAAG;IACvE,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mBAAmB;IACnB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,wBAAwB;IACxB,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,yBAAyB;IACzB,OAAO,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;CAC9B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,QAAQ;KAAI,CAAC,SAAS,WAAW,0EAS3C,aAAa,CAAC,CAAC,CAAC;;CAwElB,CAAC"}
1
+ {"version":3,"file":"Progress.d.ts","sourceRoot":"","sources":["../src/Progress.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,WAAW,EAAE,MAAM,OAAO,CAAC;AAI7D,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAE5D;;GAEG;AACH,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IAAI,QAAQ,CAAC,CAAC,CAAC,GAAG;IACvE,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mBAAmB;IACnB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,wBAAwB;IACxB,KAAK,CAAC,EAAE,cAAc,CAAC;CACxB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,QAAQ;KAAI,CAAC,SAAS,WAAW,iEAQ3C,aAAa,CAAC,CAAC,CAAC;;CAgClB,CAAC"}
package/dist/index.d.ts CHANGED
@@ -1,3 +1,2 @@
1
- export type { ProgressProps } from './Progress.js';
2
- export { Progress } from './Progress.js';
1
+ export * from './Progress.js';
3
2
  //# sourceMappingURL=index.d.ts.map
package/dist/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}
package/dist/index.js CHANGED
@@ -1,155 +1,111 @@
1
- import { jsx as p, jsxs as x } from "react/jsx-runtime";
2
- import { useId as M } from "react";
3
- function N(t) {
4
- var e, i, a = "";
5
- if (typeof t == "string" || typeof t == "number") a += t;
6
- else if (typeof t == "object") if (Array.isArray(t)) {
7
- var s = t.length;
8
- for (e = 0; e < s; e++) t[e] && (i = N(t[e])) && (a && (a += " "), a += i);
9
- } else for (i in t) t[i] && (a && (a += " "), a += i);
10
- return a;
1
+ import { jsx as f } from "react/jsx-runtime";
2
+ function N(a) {
3
+ var e, i, t = "";
4
+ if (typeof a == "string" || typeof a == "number") t += a;
5
+ else if (typeof a == "object") if (Array.isArray(a)) {
6
+ var p = a.length;
7
+ for (e = 0; e < p; e++) a[e] && (i = N(a[e])) && (t && (t += " "), t += i);
8
+ } else for (i in a) a[i] && (t && (t += " "), t += i);
9
+ return t;
11
10
  }
12
- function S() {
13
- for (var t, e, i = 0, a = "", s = arguments.length; i < s; i++) (t = arguments[i]) && (e = N(t)) && (a && (a += " "), a += e);
14
- return a;
11
+ function M() {
12
+ for (var a, e, i = 0, t = "", p = arguments.length; i < p; i++) (a = arguments[i]) && (e = N(a)) && (t && (t += " "), t += e);
13
+ return t;
15
14
  }
16
- function T(t) {
17
- var e, i, a = "";
18
- if (typeof t == "string" || typeof t == "number") a += t;
19
- else if (typeof t == "object") if (Array.isArray(t)) {
20
- var s = t.length;
21
- for (e = 0; e < s; e++) t[e] && (i = T(t[e])) && (a && (a += " "), a += i);
22
- } else for (i in t) t[i] && (a && (a += " "), a += i);
23
- return a;
15
+ function T(a) {
16
+ var e, i, t = "";
17
+ if (typeof a == "string" || typeof a == "number") t += a;
18
+ else if (typeof a == "object") if (Array.isArray(a)) {
19
+ var p = a.length;
20
+ for (e = 0; e < p; e++) a[e] && (i = T(a[e])) && (t && (t += " "), t += i);
21
+ } else for (i in a) a[i] && (t && (t += " "), t += i);
22
+ return t;
24
23
  }
25
- function W() {
26
- for (var t, e, i = 0, a = "", s = arguments.length; i < s; i++) (t = arguments[i]) && (e = T(t)) && (a && (a += " "), a += e);
27
- return a;
24
+ function P() {
25
+ for (var a, e, i = 0, t = "", p = arguments.length; i < p; i++) (a = arguments[i]) && (e = T(a)) && (t && (t += " "), t += e);
26
+ return t;
28
27
  }
29
- const A = ({
30
- as: t,
28
+ const w = ({
29
+ as: a,
31
30
  children: e,
32
31
  display: i,
33
- m: a,
34
- mt: s,
35
- mr: d,
36
- mb: g,
37
- ml: m,
38
- mx: o,
39
- my: n,
40
- p: f,
32
+ m: t,
33
+ mt: p,
34
+ mr: n,
35
+ mb: o,
36
+ ml: c,
37
+ mx: g,
38
+ my: s,
39
+ p: d,
41
40
  pt: h,
42
- pr: c,
43
- pb: l,
41
+ pr: l,
42
+ pb: u,
44
43
  pl: y,
45
- px: v,
46
- py: u,
44
+ px: m,
45
+ py: v,
47
46
  width: $,
48
47
  height: b,
49
- position: w,
50
- style: L,
51
- className: j,
52
- disabled: k,
53
- ...B
48
+ position: x,
49
+ style: A,
50
+ className: B,
51
+ disabled: L,
52
+ required: R,
53
+ ...j
54
54
  }) => {
55
- const R = t || "div", r = {};
56
- i && (r.display = i), $ && (r.width = $), b && (r.height = b), w && (r.position = w), a && (r.margin = `var(--pittorica-space-${a})`), s && (r.marginTop = `var(--pittorica-space-${s})`), d && (r.marginRight = `var(--pittorica-space-${d})`), g && (r.marginBottom = `var(--pittorica-space-${g})`), m && (r.marginLeft = `var(--pittorica-space-${m})`), o && (r.marginLeft = `var(--pittorica-space-${o})`, r.marginRight = `var(--pittorica-space-${o})`), n && (r.marginTop = `var(--pittorica-space-${n})`, r.marginBottom = `var(--pittorica-space-${n})`), f && (r.padding = `var(--pittorica-space-${f})`), h && (r.paddingTop = `var(--pittorica-space-${h})`), c && (r.paddingRight = `var(--pittorica-space-${c})`), l && (r.paddingBottom = `var(--pittorica-space-${l})`), y && (r.paddingLeft = `var(--pittorica-space-${y})`), v && (r.paddingLeft = `var(--pittorica-space-${v})`, r.paddingRight = `var(--pittorica-space-${v})`), u && (r.paddingTop = `var(--pittorica-space-${u})`, r.paddingBottom = `var(--pittorica-space-${u})`);
57
- const I = {
58
- ...L,
55
+ const q = a || "div", r = {};
56
+ i && (r.display = i), $ && (r.width = $), b && (r.height = b), x && (r.position = x), t && (r.margin = `var(--pittorica-space-${t})`), p && (r.marginTop = `var(--pittorica-space-${p})`), n && (r.marginRight = `var(--pittorica-space-${n})`), o && (r.marginBottom = `var(--pittorica-space-${o})`), c && (r.marginLeft = `var(--pittorica-space-${c})`), g && (r.marginLeft = `var(--pittorica-space-${g})`, r.marginRight = `var(--pittorica-space-${g})`), s && (r.marginTop = `var(--pittorica-space-${s})`, r.marginBottom = `var(--pittorica-space-${s})`), d && (r.padding = `var(--pittorica-space-${d})`), h && (r.paddingTop = `var(--pittorica-space-${h})`), l && (r.paddingRight = `var(--pittorica-space-${l})`), u && (r.paddingBottom = `var(--pittorica-space-${u})`), y && (r.paddingLeft = `var(--pittorica-space-${y})`), m && (r.paddingLeft = `var(--pittorica-space-${m})`, r.paddingRight = `var(--pittorica-space-${m})`), v && (r.paddingTop = `var(--pittorica-space-${v})`, r.paddingBottom = `var(--pittorica-space-${v})`);
57
+ const S = {
58
+ ...A,
59
59
  ...r
60
60
  };
61
- return /* @__PURE__ */ p(
62
- R,
61
+ return /* @__PURE__ */ f(
62
+ q,
63
63
  {
64
- className: W("pittorica-box", j),
65
- style: I,
66
- disabled: k,
67
- ...B,
64
+ className: P("pittorica-box", B),
65
+ style: S,
66
+ disabled: L,
67
+ required: R,
68
+ ...j,
68
69
  children: e
69
70
  }
70
71
  );
71
72
  };
72
- A.displayName = "Box";
73
- const C = ({
74
- value: t = 0,
73
+ w.displayName = "Box";
74
+ const W = ({
75
+ value: a = 0,
75
76
  max: e = 100,
76
77
  color: i = "indigo",
77
- variant: a = "default",
78
- className: s,
79
- style: d,
80
- as: g,
81
- ...m
78
+ className: t,
79
+ style: p,
80
+ as: n,
81
+ ...o
82
82
  }) => {
83
- const o = M(), n = Math.min(Math.max(0, t / e * 100), 100), h = i !== "inherit" && !(i != null && i.startsWith("#")) && !(i != null && i.startsWith("rgb")) ? `var(--pittorica-${i}-9)` : i, c = `pittorica-progress-pattern-${o}`;
84
- return /* @__PURE__ */ x(
85
- A,
83
+ const c = Math.min(Math.max(0, a / e * 100), 100), s = i !== "inherit" && !(i != null && i.startsWith("#")) && !(i != null && i.startsWith("rgb")) ? `var(--pittorica-${i}-9)` : i;
84
+ return /* @__PURE__ */ f(
85
+ w,
86
86
  {
87
- as: g || "div",
87
+ as: n || "div",
88
88
  role: "progressbar",
89
- "aria-valuenow": t,
89
+ "aria-valuenow": a,
90
90
  "aria-valuemin": 0,
91
91
  "aria-valuemax": e,
92
- className: S("pittorica-progress-root", s),
92
+ className: M("pittorica-progress-root", t),
93
93
  style: {
94
- "--pittorica-source-color": h,
95
- ...d
94
+ "--pittorica-source-color": s,
95
+ ...p
96
96
  },
97
- ...m,
98
- children: [
99
- /* @__PURE__ */ p(
100
- "div",
101
- {
102
- className: "pittorica-progress-indicator",
103
- style: { width: `${n}%` }
104
- }
105
- ),
106
- a === "wave" && /* @__PURE__ */ x("svg", { className: "pittorica-progress-svg", children: [
107
- /* @__PURE__ */ p("defs", { children: /* @__PURE__ */ p(
108
- "pattern",
109
- {
110
- id: c,
111
- width: "24",
112
- height: "16",
113
- patternUnits: "userSpaceOnUse",
114
- children: /* @__PURE__ */ p(
115
- "path",
116
- {
117
- d: "M0 8 Q6 0 12 8 T24 8",
118
- stroke: "white",
119
- strokeWidth: "2",
120
- strokeLinecap: "round",
121
- fill: "none",
122
- opacity: "0.5",
123
- children: /* @__PURE__ */ p(
124
- "animateTransform",
125
- {
126
- attributeName: "transform",
127
- type: "translate",
128
- from: "0 0",
129
- to: "24 0",
130
- dur: "1s",
131
- repeatCount: "indefinite"
132
- }
133
- )
134
- }
135
- )
136
- }
137
- ) }),
138
- /* @__PURE__ */ p(
139
- "rect",
140
- {
141
- width: `${n}%`,
142
- height: "100%",
143
- fill: `url(#${c})`,
144
- style: { transition: "width 660ms cubic-bezier(0.65, 0, 0.35, 1)" }
145
- }
146
- )
147
- ] })
148
- ]
97
+ ...o,
98
+ children: /* @__PURE__ */ f(
99
+ "div",
100
+ {
101
+ className: "pittorica-progress-indicator",
102
+ style: { width: `${c}%` }
103
+ }
104
+ )
149
105
  }
150
106
  );
151
107
  };
152
- C.displayName = "Progress";
108
+ W.displayName = "Progress";
153
109
  export {
154
- C as Progress
110
+ W as Progress
155
111
  };
package/package.json CHANGED
@@ -1,6 +1,7 @@
1
1
  {
2
2
  "name": "@pittorica/progress-react",
3
- "version": "0.25.0",
3
+ "version": "0.26.0",
4
+ "homepage": "https://pittorica.dcdavidev.me",
4
5
  "type": "module",
5
6
  "main": "./dist/index.js",
6
7
  "module": "./dist/index.js",
@@ -10,8 +11,8 @@
10
11
  ],
11
12
  "dependencies": {
12
13
  "clsx": "^2.1.1",
13
- "@pittorica/box-react": "0.25.0",
14
- "@pittorica/text-react": "0.25.0"
14
+ "@pittorica/text-react": "0.26.0",
15
+ "@pittorica/box-react": "0.26.0"
15
16
  },
16
17
  "devDependencies": {
17
18
  "@testing-library/jest-dom": "^6.9.1",
@@ -21,11 +22,11 @@
21
22
  "@vitejs/plugin-react": "^4.0.0",
22
23
  "jsdom": "^22.0.0",
23
24
  "typescript": "^5.0.0",
24
- "vite": "^5.0.0",
25
- "vitest": "^2.1.9",
26
- "@pittorica/flex-react": "0.25.0",
27
- "@pittorica/theme-react": "0.25.0",
28
- "pittorica": "0.25.0"
25
+ "vite": "^6.4.1",
26
+ "vitest": "^3.2.4",
27
+ "@pittorica/theme-react": "0.26.0",
28
+ "@pittorica/flex-react": "0.26.0",
29
+ "pittorica": "0.26.0"
29
30
  },
30
31
  "peerDependencies": {
31
32
  "react": ">=19",
@@ -35,7 +36,7 @@
35
36
  "build": "npm run clean && npm run build:js && npm run build:types",
36
37
  "build:js": "vite build",
37
38
  "build:types": "tsc -p tsconfig.json",
38
- "clean": "rm -rf dist",
39
+ "clean": "rm -rf dist *.tsbuildinfo",
39
40
  "test": "vitest run",
40
41
  "test:watch": "vitest"
41
42
  }
package/dist/Progress.stories.d.ts DELETED
@@ -1,13 +0,0 @@
1
- import type { Meta, StoryObj } from '@storybook/react';
2
- import { Progress } from './Progress.js';
3
- declare const meta: Meta<typeof Progress>;
4
- export default meta;
5
- export declare const Basic: StoryObj<typeof Progress>;
6
- export declare const FunkyWave: StoryObj<typeof Progress>;
7
- /**
8
- * A story that demonstrates the progress bar moving dynamically.
9
- */
10
- export declare const AnimatedShowcase: {
11
- render: () => import("react/jsx-runtime").JSX.Element;
12
- };
13
- //# sourceMappingURL=Progress.stories.d.ts.map
package/dist/Progress.stories.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"Progress.stories.d.ts","sourceRoot":"","sources":["../src/Progress.stories.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAI/B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,KAAK,EAAE,QAAQ,CAAC,OAAO,QAAQ,CAK3C,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,QAAQ,CAAC,OAAO,QAAQ,CAO/C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB;;CAyC5B,CAAC"}
package/dist/Progress.test.d.ts DELETED
@@ -1,5 +0,0 @@
1
- /**
2
- * @vitest-environment jsdom
3
- */
4
- import '@testing-library/jest-dom';
5
- //# sourceMappingURL=Progress.test.d.ts.map
package/dist/Progress.test.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"Progress.test.d.ts","sourceRoot":"","sources":["../src/Progress.test.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,2BAA2B,CAAC"}