@zauru-sdk/components 1.0.11 → 1.0.12

package/src/Titles/TitleH1.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+//H1 Title Component
+export const TitleH1 = ({ texto }: any) => {
+  return (
+    <div className="mb-1">
+      <h1 className="text-4xl font-bold leading-normal mt-0 mb-2 text-zinc-800">
+        {texto}
+      </h1>
+    </div>
+  );
+};

package/src/Titles/TitleH2.tsx

@@ -0,0 +1,10 @@
+//H2 Title Component
+export const TitleH2 = ({ texto }: any) => {
+  return (
+    <div className="py-1 ">
+      <h2 className="text-2xl font-bold leading-normal mt-0 mb-2 text-zinc-800">
+        {texto}
+      </h2>
+    </div>
+  );
+};

package/src/Titles/TitleH3.tsx

@@ -0,0 +1,10 @@
+//H3 Title Component
+export const TitleH3 = ({ texto }: any) => {
+  return (
+    <div className="py-1 ">
+      <h3 className="text-xl leading-normal mt-0 mb-2 text-zinc-800">
+        {texto}
+      </h3>
+    </div>
+  );
+};

package/src/Titles/index.ts

@@ -0,0 +1,5 @@
+export * from "./LabelArray";
+export * from "./TableColumnTitle";
+export * from "./TitleH1";
+export * from "./TitleH2";
+export * from "./TitleH3";

package/src/Tooltip/Tooltip.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import React, { useState } from "react";
+
+type Props = {
+  children: React.ReactNode;
+  text: string;
+};
+
+export const Tooltip = ({ children, text }: Props) => {
+  const [show, setShow] = useState(false);
+
+  return (
+    <div className="relative inline-block">
+      <div
+        onMouseEnter={() => setShow(true)}
+        onMouseLeave={() => setShow(false)}
+      >
+        {children}
+      </div>
+      {show && (
+        <div
+          className="absolute z-10 bg-gray-700 text-white px-2 py-1 rounded-md bottom-full left-1/2 transform -translate-x-1/2"
+          style={{ whiteSpace: "nowrap", height: "2rem" }}
+        >
+          {text}
+          <div
+            className="absolute top-full left-1/2 transform -translate-x-1/2"
+            style={{
+              width: "0",
+              height: "0",
+              borderTop: "6px solid transparent",
+              borderLeft: "6px solid transparent",
+              borderRight: "6px solid transparent",
+              borderBottom: "6px solid gray",
+            }}
+          ></div>
+        </div>
+      )}
+    </div>
+  );
+};

package/src/Tooltip/index.ts

@@ -0,0 +1 @@
+export * from "./Tooltip";

package/src/WithTooltip/WithTooltip.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+type Props = {
+  children: React.ReactNode;
+  text: string;
+};
+
+export const WithTooltip = (props: Props) => {
+  const { children, text } = props;
+
+  return (
+    <>
+      <span className="group relative">
+        {children}
+        <span className="pointer-events-none absolute -top-10 left-1/2 -translate-x-1/2 whitespace-nowrap rounded bg-black px-2 py-1 text-white opacity-0 transition z-50 before:absolute before:left-1/2 before:top-full before:-translate-x-1/2 before:border-4 before:border-transparent before:border-t-black before:content-[''] group-hover:opacity-100 before:z-50">
+          {text}
+        </span>
+      </span>
+    </>
+  );
+};

package/src/WithTooltip/index.tsx

@@ -0,0 +1 @@
+export * from "./WithTooltip";

package/src/Wizards/StepWizard.tsx

@@ -0,0 +1,88 @@
+import type { ReactNode } from "react";
+import React, { useState } from "react";
+import { LoadingInputSkeleton } from "src";
+
+export type StepWizard = {
+  index: number;
+  stepName: string;
+  component: ReactNode;
+};
+
+interface StepWizardProps {
+  steps: StepWizard[];
+  showStepName?: boolean;
+  loading?: boolean;
+}
+
+export const StepWizardComponent: React.FC<StepWizardProps> = ({
+  steps,
+  showStepName = false,
+  loading = false,
+}) => {
+  const [currentStep, setCurrentStep] = useState(0);
+
+  if (loading) {
+    return (
+      <div className="lg:grid lg:grid-cols-10 gap-4">
+        <div className="lg:col-span-2">
+          <select className="lg:hidden mb-5 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
+            <option></option>
+          </select>
+          <div className="hidden lg:block">
+            <LoadingInputSkeleton />
+          </div>
+        </div>
+        <div className="lg:col-span-8">
+          <LoadingInputSkeleton />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="lg:grid lg:grid-cols-10 gap-4">
+      <div className="lg:col-span-2">
+        <select
+          className="lg:hidden mb-5 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"
+          onChange={(e) => setCurrentStep(parseInt(e.target.value))}
+          value={currentStep}
+        >
+          {steps.map((step, index) => (
+            <option key={index} value={index}>
+              {showStepName ? step.stepName : `Step ${index + 1}`}
+            </option>
+          ))}
+        </select>
+        <div className="scroll-hidden hidden lg:block">
+          {steps.map((step, index) => (
+            <div
+              key={index}
+              onClick={() => setCurrentStep(index)}
+              className={`py-2 px-4 mt-5 cursor-pointer rounded ${
+                currentStep === index
+                  ? "bg-blue-500 text-white"
+                  : "text-blue-500 hover:bg-gray-100 border border-gray-300"
+              } ${
+                showStepName
+                  ? "text-wrap break-words"
+                  : "rounded-full w-8 h-8 flex items-center justify-center"
+              }`}
+            >
+              {showStepName ? step.stepName : index + 1}
+            </div>
+          ))}
+        </div>
+      </div>
+      <div className="lg:col-span-8">
+        {steps.map((step, index) => (
+          <div
+            key={index}
+            className={currentStep === index ? "block" : "hidden"}
+          >
+            {step.component}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};

package/src/Wizards/index.ts

@@ -0,0 +1 @@
+export * from "./StepWizard";

package/src/index.ts

@@ -0,0 +1,21 @@
+export * from "./Alerts";
+export * from "./BlockUI";
+export * from "./Buttons";
+export * from "./Card";
+//export * from "./Chat";
+export * from "./Containers";
+export * from "./Footer";
+export * from "./Labels";
+export * from "./Layouts";
+export * from "./LineSeparator";
+export * from "./Modal";
+export * from "./NavBar";
+export * from "./Skeletons";
+export * from "./Tab";
+export * from "./Table";
+export * from "./TaskList";
+export * from "./Titles";
+export * from "./Tooltip";
+export * from "./WithTooltip";
+export * from "./Wizards";
+//export * from "./Zendesk";