@tecsinapse/cortex-react 1.9.7 → 1.9.8-beta.0

package/dist/cjs/components/Stepper/Node.js

@@ -10,6 +10,7 @@ const Node = ({
   isLast = false,
   segmented = false,
   selected = false,
+  interactive = true,
   children,
   className,
   ...rest
@@ -19,10 +20,11 @@ const Node = ({
     marked,
     isFirst,
     isLast,
-    selected,
-    disabled: rest.disabled
+    selected: selected && interactive,
+    disabled: rest.disabled,
+    interactive
   });
-  return /* @__PURE__ */ React.createElement("button", { type: "button", className: container({ className }), ...rest }, /* @__PURE__ */ React.createElement("div", { className: content() }, children), segmented ? /* @__PURE__ */ React.createElement("div", { className: separator() }) : /* @__PURE__ */ React.createElement(React.Fragment, null));
+  return /* @__PURE__ */ React.createElement("button", { type: "button", className: container({ className }), ...rest }, children ? /* @__PURE__ */ React.createElement("div", { className: content() }, children) : /* @__PURE__ */ React.createElement(React.Fragment, null), segmented ? /* @__PURE__ */ React.createElement("div", { className: separator() }) : /* @__PURE__ */ React.createElement(React.Fragment, null));
 };
 
 exports.Node = Node;

package/dist/cjs/components/Stepper/Root.js

@@ -2,8 +2,14 @@
 
 var React = require('react');
 var Node = require('./Node.js');
+var clsx = require('clsx');
 
-const Root = ({ segmented = false, children }) => {
+const Root = ({
+  segmented = false,
+  children,
+  className = "",
+  interactive = true
+}) => {
   const initialSelectedIndex = React.useMemo(() => {
     let initialIndex = null;
     React.Children.forEach(children, (child, index) => {
@@ -20,12 +26,17 @@ const Root = ({ segmented = false, children }) => {
     () => React.Children.count(children),
     [children]
   );
-  const handleNodeClick = React.useCallback((index, onClick) => {
-    setSelectedNode(index);
-    if (onClick) {
-      onClick();
-    }
-  }, []);
+  const handleNodeClick = React.useCallback(
+    (index, onClick) => {
+      if (interactive) {
+        setSelectedNode(index);
+        if (onClick) {
+          onClick();
+        }
+      }
+    },
+    [interactive]
+  );
   const renderNode = React.useMemo(
     () => (child, index) => {
       if (React.isValidElement(child) && child.type === Node.Node) {
@@ -34,14 +45,24 @@ const Root = ({ segmented = false, children }) => {
           isLast: index === childrenCount - 1,
           selected: selectedNode === index,
           segmented,
+          interactive,
           onClick: () => handleNodeClick(index, child.props.onClick)
         });
       }
       return null;
     },
-    [childrenCount, selectedNode, segmented]
+    [childrenCount, selectedNode, segmented, interactive]
+  );
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: clsx(
+        "flex w-full space-x-2 bg-white p-4 pb-2 rounded-mili",
+        className
+      )
+    },
+    React.Children.map(children, renderNode)
   );
-  return /* @__PURE__ */ React.createElement("div", { className: "flex w-full space-x-2 bg-white p-4 pb-2 rounded-mili" }, React.Children.map(children, renderNode));
 };
 
 exports.Root = Root;

package/dist/cjs/styles/stepNodeVariants.js

@@ -5,7 +5,7 @@ var tailwindVariants = require('tailwind-variants');
 const StepNodeVariants = tailwindVariants.tv({
   slots: {
     container: "flex flex-col items-center justify-center text-center w-full max-w-[268px]",
-    content: "flex p-mili text-center w-full text-sub justify-center font-bold cursor-pointer",
+    content: "flex p-mili text-center w-full text-sub justify-center font-bold",
     separator: "h-micro w-full"
   },
   variants: {
@@ -20,6 +20,11 @@ const StepNodeVariants = tailwindVariants.tv({
         separator: "bg-error-medium"
       }
     },
+    interactive: {
+      true: {
+        content: "cursor-pointer"
+      }
+    },
     marked: {
       true: {
         content: "font-bold"

package/dist/esm/components/Stepper/Node.js

@@ -8,6 +8,7 @@ const Node = ({
   isLast = false,
   segmented = false,
   selected = false,
+  interactive = true,
   children,
   className,
   ...rest
@@ -17,10 +18,11 @@ const Node = ({
     marked,
     isFirst,
     isLast,
-    selected,
-    disabled: rest.disabled
+    selected: selected && interactive,
+    disabled: rest.disabled,
+    interactive
   });
-  return /* @__PURE__ */ React__default.createElement("button", { type: "button", className: container({ className }), ...rest }, /* @__PURE__ */ React__default.createElement("div", { className: content() }, children), segmented ? /* @__PURE__ */ React__default.createElement("div", { className: separator() }) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null));
+  return /* @__PURE__ */ React__default.createElement("button", { type: "button", className: container({ className }), ...rest }, children ? /* @__PURE__ */ React__default.createElement("div", { className: content() }, children) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null), segmented ? /* @__PURE__ */ React__default.createElement("div", { className: separator() }) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null));
 };
 
 export { Node };

package/dist/esm/components/Stepper/Root.js

@@ -1,7 +1,13 @@
 import React__default, { useMemo, useState, useCallback } from 'react';
 import { Node } from './Node.js';
+import clsx from 'clsx';
 
-const Root = ({ segmented = false, children }) => {
+const Root = ({
+  segmented = false,
+  children,
+  className = "",
+  interactive = true
+}) => {
   const initialSelectedIndex = useMemo(() => {
     let initialIndex = null;
     React__default.Children.forEach(children, (child, index) => {
@@ -18,12 +24,17 @@ const Root = ({ segmented = false, children }) => {
     () => React__default.Children.count(children),
     [children]
   );
-  const handleNodeClick = useCallback((index, onClick) => {
-    setSelectedNode(index);
-    if (onClick) {
-      onClick();
-    }
-  }, []);
+  const handleNodeClick = useCallback(
+    (index, onClick) => {
+      if (interactive) {
+        setSelectedNode(index);
+        if (onClick) {
+          onClick();
+        }
+      }
+    },
+    [interactive]
+  );
   const renderNode = useMemo(
     () => (child, index) => {
       if (React__default.isValidElement(child) && child.type === Node) {
@@ -32,14 +43,24 @@ const Root = ({ segmented = false, children }) => {
           isLast: index === childrenCount - 1,
           selected: selectedNode === index,
           segmented,
+          interactive,
           onClick: () => handleNodeClick(index, child.props.onClick)
         });
       }
       return null;
     },
-    [childrenCount, selectedNode, segmented]
+    [childrenCount, selectedNode, segmented, interactive]
+  );
+  return /* @__PURE__ */ React__default.createElement(
+    "div",
+    {
+      className: clsx(
+        "flex w-full space-x-2 bg-white p-4 pb-2 rounded-mili",
+        className
+      )
+    },
+    React__default.Children.map(children, renderNode)
   );
-  return /* @__PURE__ */ React__default.createElement("div", { className: "flex w-full space-x-2 bg-white p-4 pb-2 rounded-mili" }, React__default.Children.map(children, renderNode));
 };
 
 export { Root };

package/dist/esm/styles/stepNodeVariants.js

@@ -3,7 +3,7 @@ import { tv } from 'tailwind-variants';
 const StepNodeVariants = tv({
   slots: {
     container: "flex flex-col items-center justify-center text-center w-full max-w-[268px]",
-    content: "flex p-mili text-center w-full text-sub justify-center font-bold cursor-pointer",
+    content: "flex p-mili text-center w-full text-sub justify-center font-bold",
     separator: "h-micro w-full"
   },
   variants: {
@@ -18,6 +18,11 @@ const StepNodeVariants = tv({
         separator: "bg-error-medium"
       }
     },
+    interactive: {
+      true: {
+        content: "cursor-pointer"
+      }
+    },
     marked: {
       true: {
         content: "font-bold"

package/dist/types/components/Stepper/Node.d.ts

@@ -6,6 +6,7 @@ export interface StepNodeProps extends Omit<React.ButtonHTMLAttributes<HTMLButto
     isLast?: boolean;
     segmented?: boolean;
     selected?: boolean;
-    children: React.ReactNode;
+    interactive?: boolean;
+    children?: React.ReactNode;
 }
-export declare const Node: ({ marked, intent, isFirst, isLast, segmented, selected, children, className, ...rest }: StepNodeProps) => JSX.Element;
+export declare const Node: ({ marked, intent, isFirst, isLast, segmented, selected, interactive, children, className, ...rest }: StepNodeProps) => JSX.Element;

package/dist/types/components/Stepper/Root.d.ts

@@ -2,5 +2,7 @@ import React from 'react';
 export interface StepRootProps {
     children: React.ReactNode;
     segmented?: boolean;
+    className?: string;
+    interactive?: boolean;
 }
-export declare const Root: ({ segmented, children }: StepRootProps) => JSX.Element;
+export declare const Root: ({ segmented, children, className, interactive, }: StepRootProps) => JSX.Element;

package/dist/types/components/Stepper/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 export declare const Stepper: {
-    Root: ({ segmented, children }: import("./Root").StepRootProps) => JSX.Element;
-    Node: ({ marked, intent, isFirst, isLast, segmented, selected, children, className, ...rest }: import("./Node").StepNodeProps) => JSX.Element;
+    Root: ({ segmented, children, className, interactive, }: import("./Root").StepRootProps) => JSX.Element;
+    Node: ({ marked, intent, isFirst, isLast, segmented, selected, interactive, children, className, ...rest }: import("./Node").StepNodeProps) => JSX.Element;
 };

package/dist/types/styles/stepNodeVariants.d.ts

@@ -10,6 +10,11 @@ export declare const StepNodeVariants: import("tailwind-variants").TVReturnType<
             separator: string;
         };
     };
+    interactive: {
+        true: {
+            content: string;
+        };
+    };
     marked: {
         true: {
             content: string;
@@ -56,6 +61,11 @@ export declare const StepNodeVariants: import("tailwind-variants").TVReturnType<
             separator: string;
         };
     };
+    interactive: {
+        true: {
+            content: string;
+        };
+    };
     marked: {
         true: {
             content: string;
@@ -98,6 +108,11 @@ export declare const StepNodeVariants: import("tailwind-variants").TVReturnType<
             separator: string;
         };
     };
+    interactive: {
+        true: {
+            content: string;
+        };
+    };
     marked: {
         true: {
             content: string;
@@ -140,6 +155,11 @@ export declare const StepNodeVariants: import("tailwind-variants").TVReturnType<
             separator: string;
         };
     };
+    interactive: {
+        true: {
+            content: string;
+        };
+    };
     marked: {
         true: {
             content: string;
@@ -186,6 +206,11 @@ export declare const StepNodeVariants: import("tailwind-variants").TVReturnType<
             separator: string;
         };
     };
+    interactive: {
+        true: {
+            content: string;
+        };
+    };
     marked: {
         true: {
             content: string;
@@ -232,6 +257,11 @@ export declare const StepNodeVariants: import("tailwind-variants").TVReturnType<
             separator: string;
         };
     };
+    interactive: {
+        true: {
+            content: string;
+        };
+    };
     marked: {
         true: {
             content: string;
@@ -274,6 +304,11 @@ export declare const StepNodeVariants: import("tailwind-variants").TVReturnType<
             separator: string;
         };
     };
+    interactive: {
+        true: {
+            content: string;
+        };
+    };
     marked: {
         true: {
             content: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tecsinapse/cortex-react",
-  "version": "1.9.7",
+  "version": "1.9.8-beta.0",
   "description": "React components based in @tecsinapse/cortex-core",
   "license": "MIT",
   "main": "dist/esm/index.js",
@@ -20,7 +20,7 @@
   "dependencies": {
     "@floating-ui/react": "^0.26.18",
     "@internationalized/date": "*",
-    "@tecsinapse/cortex-core": "0.4.4",
+    "@tecsinapse/cortex-core": "0.4.5-beta.0",
     "clsx": "*",
     "currency.js": "~2.0.4",
     "react-aria": "^3.33.1",
@@ -48,5 +48,5 @@
     "react-dom": ">=18.0.0",
     "tailwind": ">=3.3.0"
   },
-  "gitHead": "df81e9e6e1b2667af96e31c9183a79deb2a2b8bd"
+  "gitHead": "61ca4cc610e1e2376ce6f195f6660aea20081c0d"
 }