@ztwoint/z-ui 0.1.76 → 0.1.77

package/dist/components/stepper/stepper.js

@@ -1,12 +1,12 @@
-import { jsx as l, jsxs as p } from "react/jsx-runtime";
+import { jsx as o, jsxs as p } from "react/jsx-runtime";
 import { forwardRef as c, useState as h, useImperativeHandle as x } from "react";
 import { Z2StepperItem as w } from "../stepper-item/stepper-item.js";
 function b() {
-  return /* @__PURE__ */ l("div", { className: "w-3 h-[1.5px] border-solid border-1 stroke-solid-high" });
+  return /* @__PURE__ */ o("div", { className: "w-3 h-[1.5px] border-solid border-1 stroke-solid-high" });
 }
 const S = c(
   ({ items: f }, u) => {
-    const [o, d] = h(() => f.map((t, a) => ({
+    const [d, l] = h(() => f.map((t, a) => ({
       ...t,
       state: t.state ?? (a === 0 ? "active" : "disabled")
     }))), i = (t, a, n = "handleNext") => {
@@ -19,7 +19,7 @@ const S = c(
     };
     return x(u, () => ({
       handleNext: (t, a) => {
-        d((n) => {
+        l((n) => {
           const r = i(n, t, "handleNext");
           return r === n.length - 1 ? n.map(
             (e, s) => s === r ? { ...e, state: "completed" } : e
@@ -27,13 +27,13 @@ const S = c(
         });
       },
       handlePrev: (t, a) => {
-        d((n) => {
+        l((n) => {
           const r = i(n, t, "handlePrev");
           return r <= 0 ? n : n.map((e, s) => s === r ? { ...e, state: "disabled" } : s === r - 1 ? { ...e, state: "active", label: a ?? e.label } : e);
         });
       },
       reset: () => {
-        d(
+        l(
           (t) => t.map((a, n) => ({
             ...a,
             state: n === 0 ? "active" : "disabled"
@@ -42,15 +42,15 @@ const S = c(
       },
       setStepState: (t, a) => {
         if (!t) throw new Error("setStepState: id is required");
-        d((n) => {
+        l((n) => {
           const r = n.findIndex((e) => e.id === t);
           if (r === -1) throw new Error(`setStepState: step with id '${t}' not found`);
           return n.map((e, s) => s === r ? { ...e, state: a } : e);
         });
       }
-    })), /* @__PURE__ */ l("div", { className: "w-fit flex flex-row items-center gap-6", children: o.map((t, a) => /* @__PURE__ */ p("div", { className: "flex flex-row items-center gap-6", children: [
-      /* @__PURE__ */ l(w, { label: t.label, state: t.state }),
-      a < o.length - 1 && /* @__PURE__ */ l(b, {})
+    })), /* @__PURE__ */ o("div", { className: "w-fit flex flex-row items-center gap-6", children: d.map((t, a) => /* @__PURE__ */ p("div", { className: "flex flex-row items-center gap-6", children: [
+      /* @__PURE__ */ o(w, { label: t.label, state: t.state, onClick: t.onClick }),
+      a < d.length - 1 && /* @__PURE__ */ o(b, {})
     ] }, t.id)) });
   }
 );

package/dist/components/stepper/stepper.types.d.ts

@@ -3,6 +3,7 @@ export type StepperItemType = {
     id: string;
     label: string;
     state?: StepperState;
+    onClick?: () => void;
 };
 export type StepperHandle = {
     handleNext: (activeId?: string, label?: string) => void;

package/dist/components/stepper-item/stepper-item.d.ts

@@ -3,8 +3,8 @@ import * as React from 'react';
 declare const z2StepperItemVariants: (props?: ({
     state?: "disabled" | "active" | "completed" | null | undefined;
 } & import('class-variance-authority/dist/types').ClassProp) | undefined) => string;
-export interface Z2StepperItemProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof z2StepperItemVariants> {
+export interface Z2StepperItemProps extends React.HTMLAttributes<HTMLButtonElement>, VariantProps<typeof z2StepperItemVariants> {
     label: string;
 }
-export declare const Z2StepperItem: React.ForwardRefExoticComponent<Z2StepperItemProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Z2StepperItem: React.ForwardRefExoticComponent<Z2StepperItemProps & React.RefAttributes<HTMLButtonElement>>;
 export {};

package/dist/components/stepper-item/stepper-item.js

@@ -3,39 +3,40 @@ import * as c from "react";
 import { cva as p } from "class-variance-authority";
 import { cn as l } from "../../lib/utils.js";
 import f from "../assets/icons/circle-check-filled.js";
-import n from "../assets/icons/media-record.js";
-const h = p("w-fit flex items-center select-none gap-2", {
+import o from "../assets/icons/media-record.js";
+const u = p("w-fit flex items-center select-none gap-2", {
   variants: {
     state: {
-      active: "",
-      completed: "opacity-100",
+      active: "cursor-pointer",
+      completed: "opacity-100 cursor-pointer",
       disabled: "cursor-not-allowed"
     }
   },
   defaultVariants: {
     state: "active"
   }
-}), u = "rounded-full transition-colors w-4 h-4 border-none", v = c.forwardRef(
-  ({ label: a, state: e = "active", className: o, ...s }, d) => {
-    let t, r;
-    return e === "completed" ? (t = /* @__PURE__ */ i(f, { fill: "var(--blue-500)", width: 16, height: 16 }), r = "text-neutral-primary leading-none-medium-sm") : e === "active" ? (t = /* @__PURE__ */ i(n, { fill: "var(--blue-500)", width: 16, height: 16 }), r = "text-neutral-primary leading-none-medium-sm") : (t = /* @__PURE__ */ i(n, { fill: "var(--neutral-500)", width: 16, height: 16 }), r = "text-neutral-secondary leading-none-medium-sm"), /* @__PURE__ */ m(
-      "div",
+}), h = "rounded-full transition-colors w-4 h-4 border-none", b = c.forwardRef(
+  ({ label: a, state: e = "active", className: n, ...s }, d) => {
+    let r, t;
+    return e === "completed" ? (r = /* @__PURE__ */ i(f, { fill: "var(--blue-500)", width: 16, height: 16 }), t = "text-neutral-primary leading-none-medium-sm") : e === "active" ? (r = /* @__PURE__ */ i(o, { fill: "var(--blue-500)", width: 16, height: 16 }), t = "text-neutral-primary leading-none-medium-sm") : (r = /* @__PURE__ */ i(o, { fill: "var(--neutral-500)", width: 16, height: 16 }), t = "text-neutral-secondary leading-none-medium-sm"), /* @__PURE__ */ m(
+      "button",
       {
         ref: d,
-        className: l(h({ state: e }), o),
+        className: l(u({ state: e }), n),
         "aria-disabled": e === "disabled",
         title: e || "disabled",
+        disabled: e === "disabled",
         "aria-label": a,
         ...s,
         children: [
-          /* @__PURE__ */ i("span", { className: u, children: t }),
-          /* @__PURE__ */ i("span", { className: l(r), children: a })
+          /* @__PURE__ */ i("span", { className: h, children: r }),
+          /* @__PURE__ */ i("span", { className: l(t), children: a })
         ]
       }
     );
   }
 );
-v.displayName = "Z2StepperItem";
+b.displayName = "Z2StepperItem";
 export {
-  v as Z2StepperItem
+  b as Z2StepperItem
 };

package/dist/types/components/stepper/stepper.types.d.ts

@@ -3,6 +3,7 @@ export type StepperItemType = {
     id: string;
     label: string;
     state?: StepperState;
+    onClick?: () => void;
 };
 export type StepperHandle = {
     handleNext: (activeId?: string, label?: string) => void;

package/dist/types/components/stepper-item/stepper-item.d.ts

@@ -3,8 +3,8 @@ import { type VariantProps } from 'class-variance-authority';
 declare const z2StepperItemVariants: (props?: ({
     state?: "disabled" | "active" | "completed" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export interface Z2StepperItemProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof z2StepperItemVariants> {
+export interface Z2StepperItemProps extends React.HTMLAttributes<HTMLButtonElement>, VariantProps<typeof z2StepperItemVariants> {
     label: string;
 }
-export declare const Z2StepperItem: React.ForwardRefExoticComponent<Z2StepperItemProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Z2StepperItem: React.ForwardRefExoticComponent<Z2StepperItemProps & React.RefAttributes<HTMLButtonElement>>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ztwoint/z-ui",
-  "version": "0.1.76",
+  "version": "0.1.77",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",