npm - @appcorp/app-corp-vista - Versions diffs - 0.2.4 → 0.2.5 - Mend

@appcorp/app-corp-vista 0.2.4 → 0.2.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (27) hide show

package/molecules/vista-header-v1/vista-header-v1.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { VistaHeaderV1Props } from '../../type/vista-header-type';
+export declare const VistaHeaderV1: FC<VistaHeaderV1Props>;

package/molecules/vista-header-v1/vista-header-v1.js ADDED Viewed

@@ -0,0 +1,122 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VistaHeaderV1 = void 0;
+var react_1 = __importStar(require("react"));
+var react_2 = require("@headlessui/react");
+var outline_1 = require("@heroicons/react/24/outline");
+var solid_1 = require("@heroicons/react/20/solid");
+var products = [
+    { name: 'Analytics', description: 'Get a better understanding of your traffic', href: '#', icon: outline_1.ChartPieIcon },
+    { name: 'Engagement', description: 'Speak directly to your customers', href: '#', icon: outline_1.CursorArrowRaysIcon },
+    { name: 'Security', description: 'Your customers’ data will be safe and secure', href: '#', icon: outline_1.FingerPrintIcon },
+    { name: 'Integrations', description: 'Connect with third-party tools', href: '#', icon: outline_1.SquaresPlusIcon },
+    { name: 'Automations', description: 'Build strategic funnels that will convert', href: '#', icon: outline_1.ArrowPathIcon },
+];
+var callsToAction = [
+    { name: 'Watch demo', href: '#', icon: solid_1.PlayCircleIcon },
+    { name: 'Contact sales', href: '#', icon: solid_1.PhoneIcon },
+];
+var VistaHeaderV1 = function (_a) {
+    var id = _a.id;
+    var _b = (0, react_1.useState)(false), mobileMenuOpen = _b[0], setMobileMenuOpen = _b[1];
+    return (react_1.default.createElement("header", { className: "bg-white" },
+        react_1.default.createElement("nav", { "aria-label": "Global", className: "mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8" },
+            react_1.default.createElement("div", { className: "flex lg:flex-1" },
+                react_1.default.createElement("a", { href: "#", className: "-m-1.5 p-1.5" },
+                    react_1.default.createElement("span", { className: "sr-only" }, "Your Company"),
+                    react_1.default.createElement("img", { alt: "", src: "https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600", className: "h-8 w-auto" }))),
+            react_1.default.createElement("div", { className: "flex lg:hidden" },
+                react_1.default.createElement("button", { type: "button", onClick: function () { return setMobileMenuOpen(true); }, className: "-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700" },
+                    react_1.default.createElement("span", { className: "sr-only" }, "Open main menu"),
+                    react_1.default.createElement(outline_1.Bars3Icon, { "aria-hidden": "true", className: "size-6" }))),
+            react_1.default.createElement(react_2.PopoverGroup, { className: "hidden lg:flex lg:gap-x-12" },
+                react_1.default.createElement(react_2.Popover, { className: "relative" },
+                    react_1.default.createElement(react_2.PopoverButton, { className: "flex items-center gap-x-1 text-sm/6 font-semibold text-gray-900" },
+                        "Product",
+                        react_1.default.createElement(solid_1.ChevronDownIcon, { "aria-hidden": "true", className: "size-5 flex-none text-gray-400" })),
+                    react_1.default.createElement(react_2.PopoverPanel, { transition: true, className: "absolute left-1/2 z-10 mt-3 w-screen max-w-md -translate-x-1/2 overflow-hidden rounded-3xl bg-white shadow-lg ring-1 ring-gray-900/5 transition data-closed:translate-y-1 data-closed:opacity-0 data-enter:duration-200 data-enter:ease-out data-leave:duration-150 data-leave:ease-in" },
+                        react_1.default.createElement("div", { className: "p-4" }, products.map(function (item) { return (react_1.default.createElement("div", { key: item.name, className: "group relative flex items-center gap-x-6 rounded-lg p-4 text-sm/6 hover:bg-gray-50" },
+                            react_1.default.createElement("div", { className: "flex size-11 flex-none items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white" },
+                                react_1.default.createElement(item.icon, { "aria-hidden": "true", className: "size-6 text-gray-600 group-hover:text-indigo-600" })),
+                            react_1.default.createElement("div", { className: "flex-auto" },
+                                react_1.default.createElement("a", { href: item.href, className: "block font-semibold text-gray-900" },
+                                    item.name,
+                                    react_1.default.createElement("span", { className: "absolute inset-0" })),
+                                react_1.default.createElement("p", { className: "mt-1 text-gray-600" }, item.description)))); })),
+                        react_1.default.createElement("div", { className: "grid grid-cols-2 divide-x divide-gray-900/5 bg-gray-50" }, callsToAction.map(function (item) { return (react_1.default.createElement("a", { key: item.name, href: item.href, className: "flex items-center justify-center gap-x-2.5 p-3 text-sm/6 font-semibold text-gray-900 hover:bg-gray-100" },
+                            react_1.default.createElement(item.icon, { "aria-hidden": "true", className: "size-5 flex-none text-gray-400" }),
+                            item.name)); })))),
+                react_1.default.createElement("a", { href: "#", className: "text-sm/6 font-semibold text-gray-900" }, "Features"),
+                react_1.default.createElement("a", { href: "#", className: "text-sm/6 font-semibold text-gray-900" }, "Marketplace"),
+                react_1.default.createElement("a", { href: "#", className: "text-sm/6 font-semibold text-gray-900" }, "Company")),
+            react_1.default.createElement("div", { className: "hidden lg:flex lg:flex-1 lg:justify-end" },
+                react_1.default.createElement("a", { href: "#", className: "text-sm/6 font-semibold text-gray-900" },
+                    "Log in ",
+                    react_1.default.createElement("span", { "aria-hidden": "true" }, "\u2192")))),
+        react_1.default.createElement(react_2.Dialog, { open: mobileMenuOpen, onClose: setMobileMenuOpen, className: "lg:hidden" },
+            react_1.default.createElement("div", { className: "fixed inset-0 z-50" }),
+            react_1.default.createElement(react_2.DialogPanel, { className: "fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white p-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10" },
+                react_1.default.createElement("div", { className: "flex items-center justify-between" },
+                    react_1.default.createElement("a", { href: "#", className: "-m-1.5 p-1.5" },
+                        react_1.default.createElement("span", { className: "sr-only" }, "Your Company"),
+                        react_1.default.createElement("img", { alt: "", src: "https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600", className: "h-8 w-auto" })),
+                    react_1.default.createElement("button", { type: "button", onClick: function () { return setMobileMenuOpen(false); }, className: "-m-2.5 rounded-md p-2.5 text-gray-700" },
+                        react_1.default.createElement("span", { className: "sr-only" }, "Close menu"),
+                        react_1.default.createElement(outline_1.XMarkIcon, { "aria-hidden": "true", className: "size-6" }))),
+                react_1.default.createElement("div", { className: "mt-6 flow-root" },
+                    react_1.default.createElement("div", { className: "-my-6 divide-y divide-gray-500/10" },
+                        react_1.default.createElement("div", { className: "space-y-2 py-6" },
+                            react_1.default.createElement(react_2.Disclosure, { as: "div", className: "-mx-3" },
+                                react_1.default.createElement(react_2.DisclosureButton, { className: "group flex w-full items-center justify-between rounded-lg py-2 pr-3.5 pl-3 text-base/7 font-semibold text-gray-900 hover:bg-gray-50" },
+                                    "Product",
+                                    react_1.default.createElement(solid_1.ChevronDownIcon, { "aria-hidden": "true", className: "size-5 flex-none group-data-open:rotate-180" })),
+                                react_1.default.createElement(react_2.DisclosurePanel, { className: "mt-2 space-y-2" }, __spreadArray(__spreadArray([], products, true), callsToAction, true).map(function (item) { return (react_1.default.createElement(react_2.DisclosureButton, { key: item.name, as: "a", href: item.href, className: "block rounded-lg py-2 pr-3 pl-6 text-sm/7 font-semibold text-gray-900 hover:bg-gray-50" }, item.name)); }))),
+                            react_1.default.createElement("a", { href: "#", className: "-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50" }, "Features"),
+                            react_1.default.createElement("a", { href: "#", className: "-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50" }, "Marketplace"),
+                            react_1.default.createElement("a", { href: "#", className: "-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50" }, "Company")),
+                        react_1.default.createElement("div", { className: "py-6" },
+                            react_1.default.createElement("a", { href: "#", className: "-mx-3 block rounded-lg px-3 py-2.5 text-base/7 font-semibold text-gray-900 hover:bg-gray-50" }, "Log in"))))))));
+};
+exports.VistaHeaderV1 = VistaHeaderV1;

package/molecules/vista-header-v10/vista-header-v10.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import React from 'react';
2	+ export declare const VistaHeaderV10: () => React.JSX.Element;

package/molecules/vista-header-v10/vista-header-v10.js ADDED Viewed

@@ -0,0 +1,79 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VistaHeaderV10 = void 0;
+var react_1 = __importStar(require("react"));
+var react_2 = require("@headlessui/react");
+var outline_1 = require("@heroicons/react/24/outline");
+var navigation = [
+    { name: 'Product', href: '#' },
+    { name: 'Features', href: '#' },
+    { name: 'Marketplace', href: '#' },
+    { name: 'Company', href: '#' },
+];
+var VistaHeaderV10 = function () {
+    var _a = (0, react_1.useState)(false), mobileMenuOpen = _a[0], setMobileMenuOpen = _a[1];
+    return (react_1.default.createElement("header", { className: "bg-white" },
+        react_1.default.createElement("nav", { "aria-label": "Global", className: "mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8" },
+            react_1.default.createElement("div", { className: "flex items-center gap-x-12" },
+                react_1.default.createElement("a", { href: "#", className: "-m-1.5 p-1.5" },
+                    react_1.default.createElement("span", { className: "sr-only" }, "Your Company"),
+                    react_1.default.createElement("img", { alt: "", src: "https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600", className: "h-8 w-auto" })),
+                react_1.default.createElement("div", { className: "hidden lg:flex lg:gap-x-12" }, navigation.map(function (item) { return (react_1.default.createElement("a", { key: item.name, href: item.href, className: "text-sm/6 font-semibold text-gray-900" }, item.name)); }))),
+            react_1.default.createElement("div", { className: "flex lg:hidden" },
+                react_1.default.createElement("button", { type: "button", onClick: function () { return setMobileMenuOpen(true); }, className: "-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700" },
+                    react_1.default.createElement("span", { className: "sr-only" }, "Open main menu"),
+                    react_1.default.createElement(outline_1.Bars3Icon, { "aria-hidden": "true", className: "size-6" }))),
+            react_1.default.createElement("div", { className: "hidden lg:flex" },
+                react_1.default.createElement("a", { href: "#", className: "text-sm/6 font-semibold text-gray-900" },
+                    "Log in ",
+                    react_1.default.createElement("span", { "aria-hidden": "true" }, "\u2192")))),
+        react_1.default.createElement(react_2.Dialog, { open: mobileMenuOpen, onClose: setMobileMenuOpen, className: "lg:hidden" },
+            react_1.default.createElement("div", { className: "fixed inset-0 z-50" }),
+            react_1.default.createElement(react_2.DialogPanel, { className: "fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white p-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10" },
+                react_1.default.createElement("div", { className: "flex items-center justify-between" },
+                    react_1.default.createElement("a", { href: "#", className: "-m-1.5 p-1.5" },
+                        react_1.default.createElement("span", { className: "sr-only" }, "Your Company"),
+                        react_1.default.createElement("img", { alt: "", src: "https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600", className: "h-8 w-auto" })),
+                    react_1.default.createElement("button", { type: "button", onClick: function () { return setMobileMenuOpen(false); }, className: "-m-2.5 rounded-md p-2.5 text-gray-700" },
+                        react_1.default.createElement("span", { className: "sr-only" }, "Close menu"),
+                        react_1.default.createElement(outline_1.XMarkIcon, { "aria-hidden": "true", className: "size-6" }))),
+                react_1.default.createElement("div", { className: "mt-6 flow-root" },
+                    react_1.default.createElement("div", { className: "-my-6 divide-y divide-gray-500/10" },
+                        react_1.default.createElement("div", { className: "space-y-2 py-6" }, navigation.map(function (item) { return (react_1.default.createElement("a", { key: item.name, href: item.href, className: "-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50" }, item.name)); })),
+                        react_1.default.createElement("div", { className: "py-6" },
+                            react_1.default.createElement("a", { href: "#", className: "-mx-3 block rounded-lg px-3 py-2.5 text-base/7 font-semibold text-gray-900 hover:bg-gray-50" }, "Log in"))))))));
+};
+exports.VistaHeaderV10 = VistaHeaderV10;

package/molecules/vista-header-v11/vista-header-v11.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import React from 'react';
2	+ export declare const VistaHeaderV11: () => React.JSX.Element;

package/molecules/vista-header-v11/vista-header-v11.js ADDED Viewed

@@ -0,0 +1,78 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VistaHeaderV11 = void 0;
+var react_1 = __importStar(require("react"));
+var react_2 = require("@headlessui/react");
+var outline_1 = require("@heroicons/react/24/outline");
+var navigation = [
+    { name: 'Product', href: '#' },
+    { name: 'Features', href: '#' },
+    { name: 'Marketplace', href: '#' },
+    { name: 'Company', href: '#' },
+];
+var VistaHeaderV11 = function () {
+    var _a = (0, react_1.useState)(false), mobileMenuOpen = _a[0], setMobileMenuOpen = _a[1];
+    return (react_1.default.createElement("header", { className: "bg-white" },
+        react_1.default.createElement("nav", { "aria-label": "Global", className: "mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8" },
+            react_1.default.createElement("a", { href: "#", className: "-m-1.5 p-1.5" },
+                react_1.default.createElement("span", { className: "sr-only" }, "Your Company"),
+                react_1.default.createElement("img", { alt: "", src: "https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600", className: "h-8 w-auto" })),
+            react_1.default.createElement("div", { className: "flex lg:hidden" },
+                react_1.default.createElement("button", { type: "button", onClick: function () { return setMobileMenuOpen(true); }, className: "-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700" },
+                    react_1.default.createElement("span", { className: "sr-only" }, "Open main menu"),
+                    react_1.default.createElement(outline_1.Bars3Icon, { "aria-hidden": "true", className: "size-6" }))),
+            react_1.default.createElement("div", { className: "hidden lg:flex lg:gap-x-12" },
+                navigation.map(function (item) { return (react_1.default.createElement("a", { key: item.name, href: item.href, className: "text-sm/6 font-semibold text-gray-900" }, item.name)); }),
+                react_1.default.createElement("a", { href: "#", className: "text-sm/6 font-semibold text-gray-900" },
+                    "Log in ",
+                    react_1.default.createElement("span", { "aria-hidden": "true" }, "\u2192")))),
+        react_1.default.createElement(react_2.Dialog, { open: mobileMenuOpen, onClose: setMobileMenuOpen, className: "lg:hidden" },
+            react_1.default.createElement("div", { className: "fixed inset-0 z-50" }),
+            react_1.default.createElement(react_2.DialogPanel, { className: "fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white p-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10" },
+                react_1.default.createElement("div", { className: "flex items-center justify-between" },
+                    react_1.default.createElement("a", { href: "#", className: "-m-1.5 p-1.5" },
+                        react_1.default.createElement("span", { className: "sr-only" }, "Your Company"),
+                        react_1.default.createElement("img", { alt: "", src: "https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600", className: "h-8 w-auto" })),
+                    react_1.default.createElement("button", { type: "button", onClick: function () { return setMobileMenuOpen(false); }, className: "-m-2.5 rounded-md p-2.5 text-gray-700" },
+                        react_1.default.createElement("span", { className: "sr-only" }, "Close menu"),
+                        react_1.default.createElement(outline_1.XMarkIcon, { "aria-hidden": "true", className: "size-6" }))),
+                react_1.default.createElement("div", { className: "mt-6 flow-root" },
+                    react_1.default.createElement("div", { className: "-my-6 divide-y divide-gray-500/10" },
+                        react_1.default.createElement("div", { className: "space-y-2 py-6" }, navigation.map(function (item) { return (react_1.default.createElement("a", { key: item.name, href: item.href, className: "-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50" }, item.name)); })),
+                        react_1.default.createElement("div", { className: "py-6" },
+                            react_1.default.createElement("a", { href: "#", className: "-mx-3 block rounded-lg px-3 py-2.5 text-base/7 font-semibold text-gray-900 hover:bg-gray-50" }, "Log in"))))))));
+};
+exports.VistaHeaderV11 = VistaHeaderV11;

package/molecules/vista-header-v12/vista-header-v12.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import React from 'react';
2	+ export declare const VistaHeaderV12: () => React.JSX.Element;

package/molecules/vista-header-v12/vista-header-v12.js ADDED Viewed

@@ -0,0 +1,79 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VistaHeaderV12 = void 0;
+var react_1 = __importStar(require("react"));
+var react_2 = require("@headlessui/react");
+var outline_1 = require("@heroicons/react/24/outline");
+var navigation = [
+    { name: 'Product', href: '#' },
+    { name: 'Features', href: '#' },
+    { name: 'Company', href: '#' },
+];
+var VistaHeaderV12 = function () {
+    var _a = (0, react_1.useState)(false), mobileMenuOpen = _a[0], setMobileMenuOpen = _a[1];
+    return (react_1.default.createElement("header", { className: "bg-white" },
+        react_1.default.createElement("nav", { "aria-label": "Global", className: "mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8" },
+            react_1.default.createElement("div", { className: "flex flex-1" },
+                react_1.default.createElement("div", { className: "hidden lg:flex lg:gap-x-12" }, navigation.map(function (item) { return (react_1.default.createElement("a", { key: item.name, href: item.href, className: "text-sm/6 font-semibold text-gray-900" }, item.name)); })),
+                react_1.default.createElement("div", { className: "flex lg:hidden" },
+                    react_1.default.createElement("button", { type: "button", onClick: function () { return setMobileMenuOpen(true); }, className: "-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700" },
+                        react_1.default.createElement("span", { className: "sr-only" }, "Open main menu"),
+                        react_1.default.createElement(outline_1.Bars3Icon, { "aria-hidden": "true", className: "size-6" })))),
+            react_1.default.createElement("a", { href: "#", className: "-m-1.5 p-1.5" },
+                react_1.default.createElement("span", { className: "sr-only" }, "Your Company"),
+                react_1.default.createElement("img", { alt: "", src: "https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600", className: "h-8 w-auto" })),
+            react_1.default.createElement("div", { className: "flex flex-1 justify-end" },
+                react_1.default.createElement("a", { href: "#", className: "text-sm/6 font-semibold text-gray-900" },
+                    "Log in ",
+                    react_1.default.createElement("span", { "aria-hidden": "true" }, "\u2192")))),
+        react_1.default.createElement(react_2.Dialog, { open: mobileMenuOpen, onClose: setMobileMenuOpen, className: "lg:hidden" },
+            react_1.default.createElement("div", { className: "fixed inset-0 z-10" }),
+            react_1.default.createElement(react_2.DialogPanel, { className: "fixed inset-y-0 left-0 z-10 w-full overflow-y-auto bg-white px-6 py-6" },
+                react_1.default.createElement("div", { className: "flex items-center justify-between" },
+                    react_1.default.createElement("div", { className: "flex flex-1" },
+                        react_1.default.createElement("button", { type: "button", onClick: function () { return setMobileMenuOpen(false); }, className: "-m-2.5 rounded-md p-2.5 text-gray-700" },
+                            react_1.default.createElement("span", { className: "sr-only" }, "Close menu"),
+                            react_1.default.createElement(outline_1.XMarkIcon, { "aria-hidden": "true", className: "size-6" }))),
+                    react_1.default.createElement("a", { href: "#", className: "-m-1.5 p-1.5" },
+                        react_1.default.createElement("span", { className: "sr-only" }, "Your Company"),
+                        react_1.default.createElement("img", { alt: "", src: "https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600", className: "h-8 w-auto" })),
+                    react_1.default.createElement("div", { className: "flex flex-1 justify-end" },
+                        react_1.default.createElement("a", { href: "#", className: "text-sm/6 font-semibold text-gray-900" },
+                            "Log in ",
+                            react_1.default.createElement("span", { "aria-hidden": "true" }, "\u2192")))),
+                react_1.default.createElement("div", { className: "mt-6 space-y-2" }, navigation.map(function (item) { return (react_1.default.createElement("a", { key: item.name, href: item.href, className: "-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50" }, item.name)); }))))));
+};
+exports.VistaHeaderV12 = VistaHeaderV12;

package/molecules/vista-header-v2/vista-header-v2.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { VistaHeaderV2Props } from '../../type/vista-header-type';
+export declare const VistaHeaderV2: FC<VistaHeaderV2Props>;

package/molecules/vista-header-v2/vista-header-v2.js ADDED Viewed

@@ -0,0 +1,80 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VistaHeaderV2 = void 0;
+var react_1 = __importStar(require("react"));
+var react_2 = require("@headlessui/react");
+var outline_1 = require("@heroicons/react/24/outline");
+var navigation = [
+    { name: 'Product', href: '#' },
+    { name: 'Features', href: '#' },
+    { name: 'Marketplace', href: '#' },
+    { name: 'Company', href: '#' },
+];
+var VistaHeaderV2 = function (_a) {
+    var id = _a.id;
+    var _b = (0, react_1.useState)(false), mobileMenuOpen = _b[0], setMobileMenuOpen = _b[1];
+    return (react_1.default.createElement("header", { className: "bg-white" },
+        react_1.default.createElement("nav", { "aria-label": "Global", className: "mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8" },
+            react_1.default.createElement("div", { className: "flex lg:flex-1" },
+                react_1.default.createElement("a", { href: "#", className: "-m-1.5 p-1.5" },
+                    react_1.default.createElement("span", { className: "sr-only" }, "Your Company"),
+                    react_1.default.createElement("img", { alt: "", src: "https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600", className: "h-8 w-auto" }))),
+            react_1.default.createElement("div", { className: "flex lg:hidden" },
+                react_1.default.createElement("button", { type: "button", onClick: function () { return setMobileMenuOpen(true); }, className: "-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700" },
+                    react_1.default.createElement("span", { className: "sr-only" }, "Open main menu"),
+                    react_1.default.createElement(outline_1.Bars3Icon, { "aria-hidden": "true", className: "size-6" }))),
+            react_1.default.createElement("div", { className: "hidden lg:flex lg:gap-x-12" }, navigation.map(function (item) { return (react_1.default.createElement("a", { key: item.name, href: item.href, className: "text-sm/6 font-semibold text-gray-900" }, item.name)); })),
+            react_1.default.createElement("div", { className: "hidden lg:flex lg:flex-1 lg:justify-end" },
+                react_1.default.createElement("a", { href: "#", className: "text-sm/6 font-semibold text-gray-900" },
+                    "Log in ",
+                    react_1.default.createElement("span", { "aria-hidden": "true" }, "\u2192")))),
+        react_1.default.createElement(react_2.Dialog, { open: mobileMenuOpen, onClose: setMobileMenuOpen, className: "lg:hidden" },
+            react_1.default.createElement("div", { className: "fixed inset-0 z-50" }),
+            react_1.default.createElement(react_2.DialogPanel, { className: "fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white p-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10" },
+                react_1.default.createElement("div", { className: "flex items-center justify-between" },
+                    react_1.default.createElement("a", { href: "#", className: "-m-1.5 p-1.5" },
+                        react_1.default.createElement("span", { className: "sr-only" }, "Your Company"),
+                        react_1.default.createElement("img", { alt: "", src: "https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600", className: "h-8 w-auto" })),
+                    react_1.default.createElement("button", { type: "button", onClick: function () { return setMobileMenuOpen(false); }, className: "-m-2.5 rounded-md p-2.5 text-gray-700" },
+                        react_1.default.createElement("span", { className: "sr-only" }, "Close menu"),
+                        react_1.default.createElement(outline_1.XMarkIcon, { "aria-hidden": "true", className: "size-6" }))),
+                react_1.default.createElement("div", { className: "mt-6 flow-root" },
+                    react_1.default.createElement("div", { className: "-my-6 divide-y divide-gray-500/10" },
+                        react_1.default.createElement("div", { className: "space-y-2 py-6" }, navigation.map(function (item) { return (react_1.default.createElement("a", { key: item.name, href: item.href, className: "-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50" }, item.name)); })),
+                        react_1.default.createElement("div", { className: "py-6" },
+                            react_1.default.createElement("a", { href: "#", className: "-mx-3 block rounded-lg px-3 py-2.5 text-base/7 font-semibold text-gray-900 hover:bg-gray-50" }, "Log in"))))))));
+};
+exports.VistaHeaderV2 = VistaHeaderV2;

package/molecules/vista-header-v3/vista-header-v3.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { VistaHeaderV3Props } from '../../type/vista-header-type';
+export declare const VistaHeaderV3: FC<VistaHeaderV3Props>;

package/molecules/vista-header-v3/vista-header-v3.js ADDED Viewed

@@ -0,0 +1,80 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VistaHeaderV3 = void 0;
+var react_1 = __importStar(require("react"));
+var react_2 = require("@headlessui/react");
+var outline_1 = require("@heroicons/react/24/outline");
+var navigation = [
+    { name: 'Product', href: '#' },
+    { name: 'Features', href: '#' },
+    { name: 'Marketplace', href: '#' },
+    { name: 'Company', href: '#' },
+];
+var VistaHeaderV3 = function (_a) {
+    var id = _a.id;
+    var _b = (0, react_1.useState)(false), mobileMenuOpen = _b[0], setMobileMenuOpen = _b[1];
+    return (react_1.default.createElement("header", { className: "bg-gray-900" },
+        react_1.default.createElement("nav", { "aria-label": "Global", className: "mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8" },
+            react_1.default.createElement("div", { className: "flex lg:flex-1" },
+                react_1.default.createElement("a", { href: "#", className: "-m-1.5 p-1.5" },
+                    react_1.default.createElement("span", { className: "sr-only" }, "Your Company"),
+                    react_1.default.createElement("img", { alt: "", src: "https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=500", className: "h-8 w-auto" }))),
+            react_1.default.createElement("div", { className: "flex lg:hidden" },
+                react_1.default.createElement("button", { type: "button", onClick: function () { return setMobileMenuOpen(true); }, className: "-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-400" },
+                    react_1.default.createElement("span", { className: "sr-only" }, "Open main menu"),
+                    react_1.default.createElement(outline_1.Bars3Icon, { "aria-hidden": "true", className: "size-6" }))),
+            react_1.default.createElement("div", { className: "hidden lg:flex lg:gap-x-12" }, navigation.map(function (item) { return (react_1.default.createElement("a", { key: item.name, href: item.href, className: "text-sm/6 font-semibold text-white" }, item.name)); })),
+            react_1.default.createElement("div", { className: "hidden lg:flex lg:flex-1 lg:justify-end" },
+                react_1.default.createElement("a", { href: "#", className: "text-sm/6 font-semibold text-white" },
+                    "Log in ",
+                    react_1.default.createElement("span", { "aria-hidden": "true" }, "\u2192")))),
+        react_1.default.createElement(react_2.Dialog, { open: mobileMenuOpen, onClose: setMobileMenuOpen, className: "lg:hidden" },
+            react_1.default.createElement("div", { className: "fixed inset-0 z-50" }),
+            react_1.default.createElement(react_2.DialogPanel, { className: "fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-gray-900 p-6 sm:max-w-sm sm:ring-1 sm:ring-white/10" },
+                react_1.default.createElement("div", { className: "flex items-center justify-between" },
+                    react_1.default.createElement("a", { href: "#", className: "-m-1.5 p-1.5" },
+                        react_1.default.createElement("span", { className: "sr-only" }, "Your Company"),
+                        react_1.default.createElement("img", { alt: "", src: "https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=500", className: "h-8 w-auto" })),
+                    react_1.default.createElement("button", { type: "button", onClick: function () { return setMobileMenuOpen(false); }, className: "-m-2.5 rounded-md p-2.5 text-gray-400" },
+                        react_1.default.createElement("span", { className: "sr-only" }, "Close menu"),
+                        react_1.default.createElement(outline_1.XMarkIcon, { "aria-hidden": "true", className: "size-6" }))),
+                react_1.default.createElement("div", { className: "mt-6 flow-root" },
+                    react_1.default.createElement("div", { className: "-my-6 divide-y divide-gray-500/25" },
+                        react_1.default.createElement("div", { className: "space-y-2 py-6" }, navigation.map(function (item) { return (react_1.default.createElement("a", { key: item.name, href: item.href, className: "-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-white hover:bg-gray-800" }, item.name)); })),
+                        react_1.default.createElement("div", { className: "py-6" },
+                            react_1.default.createElement("a", { href: "#", className: "-mx-3 block rounded-lg px-3 py-2.5 text-base/7 font-semibold text-white hover:bg-gray-800" }, "Log in"))))))));
+};
+exports.VistaHeaderV3 = VistaHeaderV3;

package/molecules/vista-header-v4/vista-header-v4.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { VistaHeaderV4Props } from '../../type/vista-header-type';
+export declare const VistaHeaderV4: FC<VistaHeaderV4Props>;