@tecsinapse/cortex-react 1.7.6 → 1.8.0-beta.0

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

@@ -0,0 +1,28 @@
+'use strict';
+
+var React = require('react');
+var stepNodeVariants = require('../../styles/stepNodeVariants.js');
+
+const Node = ({
+  marked = false,
+  intent = "success",
+  isFirst = false,
+  isLast = false,
+  segmented = false,
+  selected = false,
+  children,
+  className,
+  ...rest
+}) => {
+  const { container, content, separator } = stepNodeVariants.StepNodeVariants({
+    intent,
+    marked,
+    isFirst,
+    isLast,
+    selected,
+    disabled: rest.disabled
+  });
+  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));
+};
+
+exports.Node = Node;

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

@@ -0,0 +1,36 @@
+'use strict';
+
+var React = require('react');
+var Node = require('./Node.js');
+
+const Root = ({ segmented = false, children }) => {
+  const [selectedNode, setSelectedNode] = React.useState(null);
+  const childrenCount = React.useMemo(
+    () => React.Children.count(children),
+    [children]
+  );
+  const handleNodeClick = React.useCallback((index, onClick) => {
+    setSelectedNode(index);
+    if (onClick) {
+      onClick();
+    }
+  }, []);
+  const renderNode = React.useMemo(
+    () => (child, index) => {
+      if (React.isValidElement(child) && child.type === Node.Node) {
+        return React.cloneElement(child, {
+          isFirst: index === 0,
+          isLast: index === childrenCount - 1,
+          selected: selectedNode === index,
+          segmented,
+          onClick: () => handleNodeClick(index, child.props.onClick)
+        });
+      }
+      return null;
+    },
+    [childrenCount, selectedNode, segmented]
+  );
+  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/components/Stepper/index.js

@@ -0,0 +1,11 @@
+'use strict';
+
+var Node = require('./Node.js');
+var Root = require('./Root.js');
+
+const Stepper = {
+  Root: Root.Root,
+  Node: Node.Node
+};
+
+exports.Stepper = Stepper;

package/dist/cjs/index.js

@@ -40,6 +40,7 @@ var TimeFieldInput = require('./components/TimeField/TimeFieldInput.js');
 var Toggle = require('./components/Toggle.js');
 var Tooltip = require('./components/Tooltip.js');
 var index$5 = require('./components/Uploader/index.js');
+var index$6 = require('./components/Stepper/index.js');
 var useCalendar = require('./hooks/useCalendar.js');
 var useCalendarCell = require('./hooks/useCalendarCell.js');
 var useCalendarGrid = require('./hooks/useCalendarGrid.js');
@@ -114,6 +115,7 @@ exports.TimeFieldInput = TimeFieldInput.TimeFieldInput;
 exports.Toggle = Toggle.Toggle;
 exports.Tooltip = Tooltip.Tooltip;
 exports.Uploader = index$5.Uploader;
+exports.Stepper = index$6.Stepper;
 exports.useCalendar = useCalendar.useCalendar;
 exports.useCalendarCell = useCalendarCell.useCalendarCell;
 exports.useCalendarGrid = useCalendarGrid.useCalendarGrid;

package/dist/cjs/styles/stepNodeVariants.js

@@ -0,0 +1,62 @@
+'use strict';
+
+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",
+    separator: "h-micro w-full"
+  },
+  variants: {
+    intent: {
+      success: {
+        separator: "bg-success-medium"
+      },
+      warning: {
+        separator: "bg-warning-medium"
+      },
+      error: {
+        separator: "bg-error-medium"
+      }
+    },
+    marked: {
+      true: {
+        content: "font-bold"
+      },
+      false: {
+        content: "text-secondary-medium",
+        separator: "bg-secondary-light"
+      }
+    },
+    selected: {
+      true: {
+        content: "text-primary-medium"
+      }
+    },
+    isFirst: {
+      true: {
+        separator: "rounded-l-lg"
+      }
+    },
+    isLast: {
+      true: {
+        separator: "rounded-r-lg"
+      }
+    },
+    disabled: {
+      true: {
+        container: "opacity-50 cursor-not-allowed",
+        content: "pointer-events-none"
+      }
+    }
+  },
+  defaultVariants: {
+    intent: "success",
+    marked: false,
+    selected: false,
+    disabled: false
+  }
+});
+
+exports.StepNodeVariants = StepNodeVariants;

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

@@ -0,0 +1,26 @@
+import React__default from 'react';
+import { StepNodeVariants } from '../../styles/stepNodeVariants.js';
+
+const Node = ({
+  marked = false,
+  intent = "success",
+  isFirst = false,
+  isLast = false,
+  segmented = false,
+  selected = false,
+  children,
+  className,
+  ...rest
+}) => {
+  const { container, content, separator } = StepNodeVariants({
+    intent,
+    marked,
+    isFirst,
+    isLast,
+    selected,
+    disabled: rest.disabled
+  });
+  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));
+};
+
+export { Node };

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

@@ -0,0 +1,34 @@
+import React__default, { useState, useMemo, useCallback } from 'react';
+import { Node } from './Node.js';
+
+const Root = ({ segmented = false, children }) => {
+  const [selectedNode, setSelectedNode] = useState(null);
+  const childrenCount = useMemo(
+    () => React__default.Children.count(children),
+    [children]
+  );
+  const handleNodeClick = useCallback((index, onClick) => {
+    setSelectedNode(index);
+    if (onClick) {
+      onClick();
+    }
+  }, []);
+  const renderNode = useMemo(
+    () => (child, index) => {
+      if (React__default.isValidElement(child) && child.type === Node) {
+        return React__default.cloneElement(child, {
+          isFirst: index === 0,
+          isLast: index === childrenCount - 1,
+          selected: selectedNode === index,
+          segmented,
+          onClick: () => handleNodeClick(index, child.props.onClick)
+        });
+      }
+      return null;
+    },
+    [childrenCount, selectedNode, segmented]
+  );
+  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/components/Stepper/index.js

@@ -0,0 +1,9 @@
+import { Node } from './Node.js';
+import { Root } from './Root.js';
+
+const Stepper = {
+  Root,
+  Node
+};
+
+export { Stepper };

package/dist/esm/index.js

@@ -38,6 +38,7 @@ export { TimeFieldInput } from './components/TimeField/TimeFieldInput.js';
 export { Toggle } from './components/Toggle.js';
 export { Tooltip } from './components/Tooltip.js';
 export { Uploader } from './components/Uploader/index.js';
+export { Stepper } from './components/Stepper/index.js';
 export { useCalendar } from './hooks/useCalendar.js';
 export { useCalendarCell } from './hooks/useCalendarCell.js';
 export { useCalendarGrid } from './hooks/useCalendarGrid.js';

package/dist/esm/styles/stepNodeVariants.js

@@ -0,0 +1,60 @@
+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",
+    separator: "h-micro w-full"
+  },
+  variants: {
+    intent: {
+      success: {
+        separator: "bg-success-medium"
+      },
+      warning: {
+        separator: "bg-warning-medium"
+      },
+      error: {
+        separator: "bg-error-medium"
+      }
+    },
+    marked: {
+      true: {
+        content: "font-bold"
+      },
+      false: {
+        content: "text-secondary-medium",
+        separator: "bg-secondary-light"
+      }
+    },
+    selected: {
+      true: {
+        content: "text-primary-medium"
+      }
+    },
+    isFirst: {
+      true: {
+        separator: "rounded-l-lg"
+      }
+    },
+    isLast: {
+      true: {
+        separator: "rounded-r-lg"
+      }
+    },
+    disabled: {
+      true: {
+        container: "opacity-50 cursor-not-allowed",
+        content: "pointer-events-none"
+      }
+    }
+  },
+  defaultVariants: {
+    intent: "success",
+    marked: false,
+    selected: false,
+    disabled: false
+  }
+});
+
+export { StepNodeVariants };

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

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface StepNodeProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
+    marked?: boolean;
+    intent?: 'success' | 'warning' | 'error';
+    isFirst?: boolean;
+    isLast?: boolean;
+    segmented?: boolean;
+    selected?: boolean;
+    children: React.ReactNode;
+}
+export declare const Node: ({ marked, intent, isFirst, isLast, segmented, selected, children, className, ...rest }: StepNodeProps) => JSX.Element;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface StepRootProps {
+    segmented?: boolean;
+    children: React.ReactNode;
+}
+export declare const Root: ({ segmented, children }: StepRootProps) => JSX.Element;

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

@@ -0,0 +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;
+};

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

@@ -30,3 +30,4 @@ export * from './TimeField';
 export * from './Toggle';
 export * from './Tooltip';
 export * from './Uploader';
+export * from './Stepper';

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

@@ -0,0 +1,307 @@
+export declare const StepNodeVariants: import("tailwind-variants").TVReturnType<{
+    intent: {
+        success: {
+            separator: string;
+        };
+        warning: {
+            separator: string;
+        };
+        error: {
+            separator: string;
+        };
+    };
+    marked: {
+        true: {
+            content: string;
+        };
+        false: {
+            content: string;
+            separator: string;
+        };
+    };
+    selected: {
+        true: {
+            content: string;
+        };
+    };
+    isFirst: {
+        true: {
+            separator: string;
+        };
+    };
+    isLast: {
+        true: {
+            separator: string;
+        };
+    };
+    disabled: {
+        true: {
+            container: string;
+            content: string;
+        };
+    };
+}, {
+    container: string;
+    content: string;
+    separator: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<{
+    intent: {
+        success: {
+            separator: string;
+        };
+        warning: {
+            separator: string;
+        };
+        error: {
+            separator: string;
+        };
+    };
+    marked: {
+        true: {
+            content: string;
+        };
+        false: {
+            content: string;
+            separator: string;
+        };
+    };
+    selected: {
+        true: {
+            content: string;
+        };
+    };
+    isFirst: {
+        true: {
+            separator: string;
+        };
+    };
+    isLast: {
+        true: {
+            separator: string;
+        };
+    };
+    disabled: {
+        true: {
+            container: string;
+            content: string;
+        };
+    };
+}, {
+    intent: {
+        success: {
+            separator: string;
+        };
+        warning: {
+            separator: string;
+        };
+        error: {
+            separator: string;
+        };
+    };
+    marked: {
+        true: {
+            content: string;
+        };
+        false: {
+            content: string;
+            separator: string;
+        };
+    };
+    selected: {
+        true: {
+            content: string;
+        };
+    };
+    isFirst: {
+        true: {
+            separator: string;
+        };
+    };
+    isLast: {
+        true: {
+            separator: string;
+        };
+    };
+    disabled: {
+        true: {
+            container: string;
+            content: string;
+        };
+    };
+}>, {
+    intent: {
+        success: {
+            separator: string;
+        };
+        warning: {
+            separator: string;
+        };
+        error: {
+            separator: string;
+        };
+    };
+    marked: {
+        true: {
+            content: string;
+        };
+        false: {
+            content: string;
+            separator: string;
+        };
+    };
+    selected: {
+        true: {
+            content: string;
+        };
+    };
+    isFirst: {
+        true: {
+            separator: string;
+        };
+    };
+    isLast: {
+        true: {
+            separator: string;
+        };
+    };
+    disabled: {
+        true: {
+            container: string;
+            content: string;
+        };
+    };
+}, {
+    container: string;
+    content: string;
+    separator: string;
+}, import("tailwind-variants").TVReturnType<{
+    intent: {
+        success: {
+            separator: string;
+        };
+        warning: {
+            separator: string;
+        };
+        error: {
+            separator: string;
+        };
+    };
+    marked: {
+        true: {
+            content: string;
+        };
+        false: {
+            content: string;
+            separator: string;
+        };
+    };
+    selected: {
+        true: {
+            content: string;
+        };
+    };
+    isFirst: {
+        true: {
+            separator: string;
+        };
+    };
+    isLast: {
+        true: {
+            separator: string;
+        };
+    };
+    disabled: {
+        true: {
+            container: string;
+            content: string;
+        };
+    };
+}, {
+    container: string;
+    content: string;
+    separator: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<{
+    intent: {
+        success: {
+            separator: string;
+        };
+        warning: {
+            separator: string;
+        };
+        error: {
+            separator: string;
+        };
+    };
+    marked: {
+        true: {
+            content: string;
+        };
+        false: {
+            content: string;
+            separator: string;
+        };
+    };
+    selected: {
+        true: {
+            content: string;
+        };
+    };
+    isFirst: {
+        true: {
+            separator: string;
+        };
+    };
+    isLast: {
+        true: {
+            separator: string;
+        };
+    };
+    disabled: {
+        true: {
+            container: string;
+            content: string;
+        };
+    };
+}, {
+    intent: {
+        success: {
+            separator: string;
+        };
+        warning: {
+            separator: string;
+        };
+        error: {
+            separator: string;
+        };
+    };
+    marked: {
+        true: {
+            content: string;
+        };
+        false: {
+            content: string;
+            separator: string;
+        };
+    };
+    selected: {
+        true: {
+            content: string;
+        };
+    };
+    isFirst: {
+        true: {
+            separator: string;
+        };
+    };
+    isLast: {
+        true: {
+            separator: string;
+        };
+    };
+    disabled: {
+        true: {
+            container: string;
+            content: string;
+        };
+    };
+}>, unknown, unknown, undefined>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tecsinapse/cortex-react",
-  "version": "1.7.6",
+  "version": "1.8.0-beta.0",
   "description": "React components based in @tecsinapse/cortex-core",
   "license": "MIT",
   "main": "dist/esm/index.js",
@@ -48,5 +48,5 @@
     "react-dom": ">=18.0.0",
     "tailwind": ">=3.3.0"
   },
-  "gitHead": "47608580c72ce679a690ab44f7cc33c916f26df8"
+  "gitHead": "db9ab6aab2ffeac3f02916553595bf44673ee595"
 }