@appcorp/app-corp-vista 0.2.4 → 0.2.6

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

@@ -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

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

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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

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

package/molecules/vista-header-v4/vista-header-v4.js

@@ -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.VistaHeaderV4 = 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 VistaHeaderV4 = 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-indigo-600" },
+        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=white", 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-indigo-300" },
+                    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-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.VistaHeaderV4 = VistaHeaderV4;

package/molecules/vista-header-v5/vista-header-v5.d.ts

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

package/molecules/vista-header-v5/vista-header-v5.js

@@ -0,0 +1,139 @@
+"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.VistaHeaderV5 = 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 where your traffic is coming from',
+        href: '#',
+        icon: outline_1.ChartPieIcon,
+    },
+    {
+        name: 'Engagement',
+        description: 'Speak directly to your customers with our engagement tool',
+        href: '#',
+        icon: outline_1.CursorArrowRaysIcon,
+    },
+    { name: 'Security', description: 'Your customers data will be safe and secure', href: '#', icon: outline_1.FingerPrintIcon },
+    {
+        name: 'Integrations',
+        description: 'Your customers data will be safe and secure',
+        href: '#',
+        icon: outline_1.SquaresPlusIcon,
+    },
+];
+var callsToAction = [
+    { name: 'Watch demo', href: '#', icon: solid_1.PlayCircleIcon },
+    { name: 'Contact sales', href: '#', icon: solid_1.PhoneIcon },
+    { name: 'View all products', href: '#', icon: solid_1.RectangleGroupIcon },
+];
+var VistaHeaderV5 = function () {
+    var _a = (0, react_1.useState)(false), mobileMenuOpen = _a[0], setMobileMenuOpen = _a[1];
+    return (react_1.default.createElement("header", { className: "relative isolate z-10 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, null,
+                    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 inset-x-0 top-16 bg-white 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", { "aria-hidden": "true", className: "absolute inset-0 top-1/2 bg-white shadow-lg ring-1 ring-gray-900/5" }),
+                        react_1.default.createElement("div", { className: "relative bg-white" },
+                            react_1.default.createElement("div", { className: "mx-auto grid max-w-7xl grid-cols-4 gap-x-4 px-6 py-10 lg:px-8 xl:gap-x-8" }, products.map(function (item) { return (react_1.default.createElement("div", { key: item.name, className: "group relative rounded-lg p-6 text-sm/6 hover:bg-gray-50" },
+                                react_1.default.createElement("div", { className: "flex size-11 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("a", { href: item.href, className: "mt-6 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: "bg-gray-50" },
+                                react_1.default.createElement("div", { className: "mx-auto max-w-7xl px-6 lg:px-8" },
+                                    react_1.default.createElement("div", { className: "grid grid-cols-3 divide-x divide-gray-900/5 border-x border-gray-900/5" }, 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.VistaHeaderV5 = VistaHeaderV5;

package/molecules/vista-header-v6/vista-header-v6.d.ts

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