@pittorica/progress-react 0.24.0 → 0.25.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 (4) hide show
  1. package/dist/Progress.d.ts +8 -3
  2. package/dist/Progress.d.ts.map +1 -1
  3. package/dist/index.js +80 -88
  4. package/package.json +6 -7
package/dist/Progress.d.ts CHANGED
@@ -1,6 +1,10 @@
1
+ import { type ElementType } from 'react';
1
2
  import { type BoxProps } from '@pittorica/box-react';
2
3
  import type { PittoricaColor } from '@pittorica/text-react';
3
- export interface ProgressProps extends BoxProps {
4
+ /**
5
+ * Fix TS2314 & TS2312: Use 'type' alias for intersection with polymorphic BoxProps<E>.
6
+ */
7
+ export type ProgressProps<E extends ElementType = 'div'> = BoxProps<E> & {
4
8
  /** @default 0 */
5
9
  value?: number;
6
10
  /** @default 100 */
@@ -9,12 +13,13 @@ export interface ProgressProps extends BoxProps {
9
13
  color?: PittoricaColor;
10
14
  /** @default 'default' */
11
15
  variant?: 'default' | 'wave';
12
- }
16
+ };
13
17
  /**
14
18
  * Funky Progress component using SVG Patterns for decorative effects.
19
+ * Fully polymorphic and agnostic foundation.
15
20
  */
16
21
  export declare const Progress: {
17
- ({ value, max, color, variant, className, style, ...props }: ProgressProps): import("react/jsx-runtime").JSX.Element;
22
+ <E extends ElementType = "div">({ value, max, color, variant, className, style, as, ...props }: ProgressProps<E>): import("react/jsx-runtime").JSX.Element;
18
23
  displayName: string;
19
24
  };
20
25
  //# 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":"AAIA,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAE5D,MAAM,WAAW,aAAc,SAAQ,QAAQ;IAC7C,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;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ;iEAQlB,aAAa;;CAsEf,CAAC"}
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"}
package/dist/index.js CHANGED
@@ -1,125 +1,117 @@
1
- import { jsx as n, jsxs as b } from "react/jsx-runtime";
2
- import { useId as q } from "react";
3
- function $(t) {
4
- var e, i, r = "";
5
- if (typeof t == "string" || typeof t == "number") r += t;
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
6
  else if (typeof t == "object") if (Array.isArray(t)) {
7
7
  var s = t.length;
8
- for (e = 0; e < s; e++) t[e] && (i = $(t[e])) && (r && (r += " "), r += i);
9
- } else for (i in t) t[i] && (r && (r += " "), r += i);
10
- return r;
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;
11
11
  }
12
- function C() {
13
- for (var t, e, i = 0, r = "", s = arguments.length; i < s; i++) (t = arguments[i]) && (e = $(t)) && (r && (r += " "), r += e);
14
- return r;
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;
15
15
  }
16
- function w(t) {
17
- var e, i, r = "";
18
- if (typeof t == "string" || typeof t == "number") r += t;
16
+ function T(t) {
17
+ var e, i, a = "";
18
+ if (typeof t == "string" || typeof t == "number") a += t;
19
19
  else if (typeof t == "object") if (Array.isArray(t)) {
20
20
  var s = t.length;
21
- for (e = 0; e < s; e++) t[e] && (i = w(t[e])) && (r && (r += " "), r += i);
22
- } else for (i in t) t[i] && (r && (r += " "), r += i);
23
- return r;
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;
24
24
  }
25
- function F() {
26
- for (var t, e, i = 0, r = "", s = arguments.length; i < s; i++) (t = arguments[i]) && (e = w(t)) && (r && (r += " "), r += e);
27
- return r;
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;
28
28
  }
29
- const N = ({
30
- ref: t,
31
- as: e = "div",
32
- children: i,
33
- display: r,
34
- m: s,
35
- mt: c,
29
+ const A = ({
30
+ as: t,
31
+ children: e,
32
+ display: i,
33
+ m: a,
34
+ mt: s,
36
35
  mr: d,
37
- mb: m,
38
- ml: p,
39
- p: h,
40
- pt: g,
41
- pr: o,
36
+ mb: g,
37
+ ml: m,
38
+ mx: o,
39
+ my: n,
40
+ p: f,
41
+ pt: h,
42
+ pr: c,
42
43
  pb: l,
43
- pl: f,
44
- width: u,
45
- height: v,
46
- position: y,
47
- style: x,
44
+ pl: y,
45
+ px: v,
46
+ py: u,
47
+ width: $,
48
+ height: b,
49
+ position: w,
50
+ style: L,
48
51
  className: j,
49
- href: A,
50
- target: T,
51
- rel: k,
52
- htmlFor: B,
53
- type: I,
54
- name: L,
55
- disabled: M,
56
- ...S
52
+ disabled: k,
53
+ ...B
57
54
  }) => {
58
- const a = {};
59
- r && (a.display = r), u && (a.width = u), v && (a.height = v), y && (a.position = y), s && (a.margin = `var(--pittorica-space-${s})`), c && (a.marginTop = `var(--pittorica-space-${c})`), d && (a.marginRight = `var(--pittorica-space-${d})`), m && (a.marginBottom = `var(--pittorica-space-${m})`), p && (a.marginLeft = `var(--pittorica-space-${p})`), h && (a.padding = `var(--pittorica-space-${h})`), g && (a.paddingTop = `var(--pittorica-space-${g})`), o && (a.paddingRight = `var(--pittorica-space-${o})`), l && (a.paddingBottom = `var(--pittorica-space-${l})`), f && (a.paddingLeft = `var(--pittorica-space-${f})`);
60
- const W = {
61
- ...x,
62
- ...a
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,
59
+ ...r
63
60
  };
64
- return /* @__PURE__ */ n(
65
- e,
61
+ return /* @__PURE__ */ p(
62
+ R,
66
63
  {
67
- ref: t,
68
- className: F("pittorica-box", j),
69
- style: W,
70
- href: A,
71
- target: T,
72
- rel: k,
73
- htmlFor: B,
74
- type: I,
75
- name: L,
76
- disabled: M,
77
- ...S,
78
- children: i
64
+ className: W("pittorica-box", j),
65
+ style: I,
66
+ disabled: k,
67
+ ...B,
68
+ children: e
79
69
  }
80
70
  );
81
71
  };
82
- N.displayName = "Box";
83
- const P = ({
72
+ A.displayName = "Box";
73
+ const C = ({
84
74
  value: t = 0,
85
75
  max: e = 100,
86
76
  color: i = "indigo",
87
- variant: r = "default",
77
+ variant: a = "default",
88
78
  className: s,
89
- style: c,
90
- ...d
79
+ style: d,
80
+ as: g,
81
+ ...m
91
82
  }) => {
92
- const m = q(), p = Math.min(Math.max(0, t / e * 100), 100), g = i !== "inherit" && !(i != null && i.startsWith("#")) && !(i != null && i.startsWith("rgb")) ? `var(--pittorica-${i}-9)` : i, o = `pittorica-progress-pattern-${m}`;
93
- return /* @__PURE__ */ b(
94
- N,
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,
95
86
  {
96
- ...d,
87
+ as: g || "div",
97
88
  role: "progressbar",
98
89
  "aria-valuenow": t,
99
90
  "aria-valuemin": 0,
100
91
  "aria-valuemax": e,
101
- className: C("pittorica-progress-root", s),
92
+ className: S("pittorica-progress-root", s),
102
93
  style: {
103
- "--pittorica-source-color": g,
104
- ...c
94
+ "--pittorica-source-color": h,
95
+ ...d
105
96
  },
97
+ ...m,
106
98
  children: [
107
- /* @__PURE__ */ n(
99
+ /* @__PURE__ */ p(
108
100
  "div",
109
101
  {
110
102
  className: "pittorica-progress-indicator",
111
- style: { width: `${p}%` }
103
+ style: { width: `${n}%` }
112
104
  }
113
105
  ),
114
- r === "wave" && /* @__PURE__ */ b("svg", { className: "pittorica-progress-svg", children: [
115
- /* @__PURE__ */ n("defs", { children: /* @__PURE__ */ n(
106
+ a === "wave" && /* @__PURE__ */ x("svg", { className: "pittorica-progress-svg", children: [
107
+ /* @__PURE__ */ p("defs", { children: /* @__PURE__ */ p(
116
108
  "pattern",
117
109
  {
118
- id: o,
110
+ id: c,
119
111
  width: "24",
120
112
  height: "16",
121
113
  patternUnits: "userSpaceOnUse",
122
- children: /* @__PURE__ */ n(
114
+ children: /* @__PURE__ */ p(
123
115
  "path",
124
116
  {
125
117
  d: "M0 8 Q6 0 12 8 T24 8",
@@ -128,7 +120,7 @@ const P = ({
128
120
  strokeLinecap: "round",
129
121
  fill: "none",
130
122
  opacity: "0.5",
131
- children: /* @__PURE__ */ n(
123
+ children: /* @__PURE__ */ p(
132
124
  "animateTransform",
133
125
  {
134
126
  attributeName: "transform",
@@ -143,12 +135,12 @@ const P = ({
143
135
  )
144
136
  }
145
137
  ) }),
146
- /* @__PURE__ */ n(
138
+ /* @__PURE__ */ p(
147
139
  "rect",
148
140
  {
149
- width: `${p}%`,
141
+ width: `${n}%`,
150
142
  height: "100%",
151
- fill: `url(#${o})`,
143
+ fill: `url(#${c})`,
152
144
  style: { transition: "width 660ms cubic-bezier(0.65, 0, 0.35, 1)" }
153
145
  }
154
146
  )
@@ -157,7 +149,7 @@ const P = ({
157
149
  }
158
150
  );
159
151
  };
160
- P.displayName = "Progress";
152
+ C.displayName = "Progress";
161
153
  export {
162
- P as Progress
154
+ C as Progress
163
155
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pittorica/progress-react",
3
- "version": "0.24.0",
3
+ "version": "0.25.0",
4
4
  "type": "module",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.js",
@@ -10,8 +10,8 @@
10
10
  ],
11
11
  "dependencies": {
12
12
  "clsx": "^2.1.1",
13
- "@pittorica/box-react": "0.24.0",
14
- "@pittorica/text-react": "0.24.0"
13
+ "@pittorica/box-react": "0.25.0",
14
+ "@pittorica/text-react": "0.25.0"
15
15
  },
16
16
  "devDependencies": {
17
17
  "@testing-library/jest-dom": "^6.9.1",
@@ -23,9 +23,9 @@
23
23
  "typescript": "^5.0.0",
24
24
  "vite": "^5.0.0",
25
25
  "vitest": "^2.1.9",
26
- "@pittorica/flex-react": "0.24.0",
27
- "@pittorica/theme-react": "0.24.0",
28
- "pittorica": "0.24.0"
26
+ "@pittorica/flex-react": "0.25.0",
27
+ "@pittorica/theme-react": "0.25.0",
28
+ "pittorica": "0.25.0"
29
29
  },
30
30
  "peerDependencies": {
31
31
  "react": ">=19",
@@ -36,7 +36,6 @@
36
36
  "build:js": "vite build",
37
37
  "build:types": "tsc -p tsconfig.json",
38
38
  "clean": "rm -rf dist",
39
- "dev": "vite",
40
39
  "test": "vitest run",
41
40
  "test:watch": "vitest"
42
41
  }