@pittorica/progress-react 0.24.0 → 0.26.0

package/README.md

@@ -12,7 +12,16 @@ npm install @pittorica/progress-react
 
 ```jsx
 import { Progress } from '@pittorica/progress-react';
-// TODO: Add usage example
+
+function MyComponent() {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+      <Progress value={45} color="indigo" />
+      <Progress value={100} color="success" />
+      <Progress value={15} color="danger" />
+    </div>
+  );
+}
 ```
 
 ## License

package/dist/Progress.d.ts

@@ -1,20 +1,23 @@
+import { type ElementType } from 'react';
 import { type BoxProps } from '@pittorica/box-react';
 import type { PittoricaColor } from '@pittorica/text-react';
-export interface ProgressProps extends BoxProps {
+/**
+ * Fix TS2314 & TS2312: Use 'type' alias for intersection with polymorphic BoxProps<E>.
+ */
+export type ProgressProps<E extends ElementType = 'div'> = BoxProps<E> & {
     /** @default 0 */
     value?: number;
     /** @default 100 */
     max?: number;
     /** @default 'indigo' */
     color?: PittoricaColor;
-    /** @default 'default' */
-    variant?: 'default' | 'wave';
-}
+};
 /**
- * Funky Progress component using SVG Patterns for decorative effects.
+ * Progress component displays an indicator of the status of a task or process.
+ * Fully polymorphic and agnostic foundation.
  */
 export declare const Progress: {
-    ({ value, max, color, variant, className, style, ...props }: ProgressProps): import("react/jsx-runtime").JSX.Element;
+    <E extends ElementType = "div">({ value, max, color, className, style, as, ...props }: ProgressProps<E>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 //# sourceMappingURL=Progress.d.ts.map

package/dist/Progress.d.ts.map

@@ -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"}
+{"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

@@ -1,3 +1,2 @@
-export type { ProgressProps } from './Progress.js';
-export { Progress } from './Progress.js';
+export * from './Progress.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}

package/dist/index.js

@@ -1,163 +1,111 @@
-import { jsx as n, jsxs as b } from "react/jsx-runtime";
-import { useId as q } from "react";
-function $(t) {
-  var e, i, r = "";
-  if (typeof t == "string" || typeof t == "number") r += t;
-  else if (typeof t == "object") if (Array.isArray(t)) {
-    var s = t.length;
-    for (e = 0; e < s; e++) t[e] && (i = $(t[e])) && (r && (r += " "), r += i);
-  } else for (i in t) t[i] && (r && (r += " "), r += i);
-  return r;
+import { jsx as f } from "react/jsx-runtime";
+function N(a) {
+  var e, i, t = "";
+  if (typeof a == "string" || typeof a == "number") t += a;
+  else if (typeof a == "object") if (Array.isArray(a)) {
+    var p = a.length;
+    for (e = 0; e < p; e++) a[e] && (i = N(a[e])) && (t && (t += " "), t += i);
+  } else for (i in a) a[i] && (t && (t += " "), t += i);
+  return t;
 }
-function C() {
-  for (var t, e, i = 0, r = "", s = arguments.length; i < s; i++) (t = arguments[i]) && (e = $(t)) && (r && (r += " "), r += e);
-  return r;
+function M() {
+  for (var a, e, i = 0, t = "", p = arguments.length; i < p; i++) (a = arguments[i]) && (e = N(a)) && (t && (t += " "), t += e);
+  return t;
 }
-function w(t) {
-  var e, i, r = "";
-  if (typeof t == "string" || typeof t == "number") r += t;
-  else if (typeof t == "object") if (Array.isArray(t)) {
-    var s = t.length;
-    for (e = 0; e < s; e++) t[e] && (i = w(t[e])) && (r && (r += " "), r += i);
-  } else for (i in t) t[i] && (r && (r += " "), r += i);
-  return r;
+function T(a) {
+  var e, i, t = "";
+  if (typeof a == "string" || typeof a == "number") t += a;
+  else if (typeof a == "object") if (Array.isArray(a)) {
+    var p = a.length;
+    for (e = 0; e < p; e++) a[e] && (i = T(a[e])) && (t && (t += " "), t += i);
+  } else for (i in a) a[i] && (t && (t += " "), t += i);
+  return t;
 }
-function F() {
-  for (var t, e, i = 0, r = "", s = arguments.length; i < s; i++) (t = arguments[i]) && (e = w(t)) && (r && (r += " "), r += e);
-  return r;
+function P() {
+  for (var a, e, i = 0, t = "", p = arguments.length; i < p; i++) (a = arguments[i]) && (e = T(a)) && (t && (t += " "), t += e);
+  return t;
 }
-const N = ({
-  ref: t,
-  as: e = "div",
-  children: i,
-  display: r,
-  m: s,
-  mt: c,
-  mr: d,
-  mb: m,
-  ml: p,
-  p: h,
-  pt: g,
-  pr: o,
-  pb: l,
-  pl: f,
-  width: u,
-  height: v,
-  position: y,
-  style: x,
-  className: j,
-  href: A,
-  target: T,
-  rel: k,
-  htmlFor: B,
-  type: I,
-  name: L,
-  disabled: M,
-  ...S
+const w = ({
+  as: a,
+  children: e,
+  display: i,
+  m: t,
+  mt: p,
+  mr: n,
+  mb: o,
+  ml: c,
+  mx: g,
+  my: s,
+  p: d,
+  pt: h,
+  pr: l,
+  pb: u,
+  pl: y,
+  px: m,
+  py: v,
+  width: $,
+  height: b,
+  position: x,
+  style: A,
+  className: B,
+  disabled: L,
+  required: R,
+  ...j
 }) => {
-  const a = {};
-  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})`);
-  const W = {
-    ...x,
-    ...a
+  const q = a || "div", r = {};
+  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})`);
+  const S = {
+    ...A,
+    ...r
   };
-  return /* @__PURE__ */ n(
-    e,
+  return /* @__PURE__ */ f(
+    q,
     {
-      ref: t,
-      className: F("pittorica-box", j),
-      style: W,
-      href: A,
-      target: T,
-      rel: k,
-      htmlFor: B,
-      type: I,
-      name: L,
-      disabled: M,
-      ...S,
-      children: i
+      className: P("pittorica-box", B),
+      style: S,
+      disabled: L,
+      required: R,
+      ...j,
+      children: e
     }
   );
 };
-N.displayName = "Box";
-const P = ({
-  value: t = 0,
+w.displayName = "Box";
+const W = ({
+  value: a = 0,
   max: e = 100,
   color: i = "indigo",
-  variant: r = "default",
-  className: s,
-  style: c,
-  ...d
+  className: t,
+  style: p,
+  as: n,
+  ...o
 }) => {
-  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}`;
-  return /* @__PURE__ */ b(
-    N,
+  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;
+  return /* @__PURE__ */ f(
+    w,
     {
-      ...d,
+      as: n || "div",
       role: "progressbar",
-      "aria-valuenow": t,
+      "aria-valuenow": a,
       "aria-valuemin": 0,
       "aria-valuemax": e,
-      className: C("pittorica-progress-root", s),
+      className: M("pittorica-progress-root", t),
       style: {
-        "--pittorica-source-color": g,
-        ...c
+        "--pittorica-source-color": s,
+        ...p
       },
-      children: [
-        /* @__PURE__ */ n(
-          "div",
-          {
-            className: "pittorica-progress-indicator",
-            style: { width: `${p}%` }
-          }
-        ),
-        r === "wave" && /* @__PURE__ */ b("svg", { className: "pittorica-progress-svg", children: [
-          /* @__PURE__ */ n("defs", { children: /* @__PURE__ */ n(
-            "pattern",
-            {
-              id: o,
-              width: "24",
-              height: "16",
-              patternUnits: "userSpaceOnUse",
-              children: /* @__PURE__ */ n(
-                "path",
-                {
-                  d: "M0 8 Q6 0 12 8 T24 8",
-                  stroke: "white",
-                  strokeWidth: "2",
-                  strokeLinecap: "round",
-                  fill: "none",
-                  opacity: "0.5",
-                  children: /* @__PURE__ */ n(
-                    "animateTransform",
-                    {
-                      attributeName: "transform",
-                      type: "translate",
-                      from: "0 0",
-                      to: "24 0",
-                      dur: "1s",
-                      repeatCount: "indefinite"
-                    }
-                  )
-                }
-              )
-            }
-          ) }),
-          /* @__PURE__ */ n(
-            "rect",
-            {
-              width: `${p}%`,
-              height: "100%",
-              fill: `url(#${o})`,
-              style: { transition: "width 660ms cubic-bezier(0.65, 0, 0.35, 1)" }
-            }
-          )
-        ] })
-      ]
+      ...o,
+      children: /* @__PURE__ */ f(
+        "div",
+        {
+          className: "pittorica-progress-indicator",
+          style: { width: `${c}%` }
+        }
+      )
     }
   );
 };
-P.displayName = "Progress";
+W.displayName = "Progress";
 export {
-  P as Progress
+  W as Progress
 };

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@pittorica/progress-react",
-  "version": "0.24.0",
+  "version": "0.26.0",
+  "homepage": "https://pittorica.dcdavidev.me",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -10,8 +11,8 @@
   ],
   "dependencies": {
     "clsx": "^2.1.1",
-    "@pittorica/box-react": "0.24.0",
-    "@pittorica/text-react": "0.24.0"
+    "@pittorica/text-react": "0.26.0",
+    "@pittorica/box-react": "0.26.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",
@@ -21,11 +22,11 @@
     "@vitejs/plugin-react": "^4.0.0",
     "jsdom": "^22.0.0",
     "typescript": "^5.0.0",
-    "vite": "^5.0.0",
-    "vitest": "^2.1.9",
-    "@pittorica/flex-react": "0.24.0",
-    "@pittorica/theme-react": "0.24.0",
-    "pittorica": "0.24.0"
+    "vite": "^6.4.1",
+    "vitest": "^3.2.4",
+    "@pittorica/theme-react": "0.26.0",
+    "@pittorica/flex-react": "0.26.0",
+    "pittorica": "0.26.0"
   },
   "peerDependencies": {
     "react": ">=19",
@@ -35,8 +36,7 @@
     "build": "npm run clean && npm run build:js && npm run build:types",
     "build:js": "vite build",
     "build:types": "tsc -p tsconfig.json",
-    "clean": "rm -rf dist",
-    "dev": "vite",
+    "clean": "rm -rf dist *.tsbuildinfo",
     "test": "vitest run",
     "test:watch": "vitest"
   }

package/dist/Progress.stories.d.ts

@@ -1,13 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Progress } from './Progress.js';
-declare const meta: Meta<typeof Progress>;
-export default meta;
-export declare const Basic: StoryObj<typeof Progress>;
-export declare const FunkyWave: StoryObj<typeof Progress>;
-/**
- * A story that demonstrates the progress bar moving dynamically.
- */
-export declare const AnimatedShowcase: {
-    render: () => import("react/jsx-runtime").JSX.Element;
-};
-//# sourceMappingURL=Progress.stories.d.ts.map

package/dist/Progress.stories.d.ts.map

@@ -1 +0,0 @@
-{"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

@@ -1,5 +0,0 @@
-/**
- * @vitest-environment jsdom
- */
-import '@testing-library/jest-dom';
-//# sourceMappingURL=Progress.test.d.ts.map

package/dist/Progress.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Progress.test.d.ts","sourceRoot":"","sources":["../src/Progress.test.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,2BAA2B,CAAC"}