@appcorp/app-corp-vista 0.2.4 → 0.2.5

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

@@ -0,0 +1,131 @@
+"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.VistaHeaderV9 = 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 company = [
+    { name: 'About us', href: '#', description: 'Learn more about our company values and mission to empower others' },
+    { name: 'Careers', href: '#', description: 'Looking for you next career opportunity? See all of our open positions' },
+    {
+        name: 'Support',
+        href: '#',
+        description: 'Get in touch with our dedicated support team or reach out on our community forums',
+    },
+    { name: 'Blog', href: '#', description: 'Read our latest announcements and get perspectives from our team' },
+];
+var VistaHeaderV9 = 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 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 gap-x-6 rounded-lg p-4 text-sm/6 hover:bg-gray-50" },
+                            react_1.default.createElement("div", { className: "mt-1 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(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" },
+                        "Company",
+                        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-96 -translate-x-1/2 rounded-3xl bg-white p-4 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" }, company.map(function (item) { return (react_1.default.createElement("div", { key: item.name, className: "relative rounded-lg p-4 hover:bg-gray-50" },
+                        react_1.default.createElement("a", { href: item.href, className: "block text-sm/6 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-sm/6 text-gray-600" }, item.description))); })))),
+            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-10" }),
+            react_1.default.createElement(react_2.DialogPanel, { className: "fixed inset-y-0 right-0 z-10 flex w-full flex-col justify-between overflow-y-auto bg-white sm:max-w-sm sm:ring-1 sm:ring-gray-900/10" },
+                react_1.default.createElement("div", { className: "p-6" },
+                    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" }, products.map(function (item) { return (react_1.default.createElement("a", { key: item.name, href: item.href, className: "group -mx-3 flex items-center gap-x-6 rounded-lg p-3 text-base/7 font-semibold text-gray-900 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" })),
+                                item.name)); })),
+                            react_1.default.createElement("div", { className: "space-y-2 py-6" },
+                                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"),
+                                company.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"))))),
+                react_1.default.createElement("div", { className: "sticky bottom-0 grid grid-cols-2 divide-x divide-gray-900/5 bg-gray-50 text-center" }, callsToAction.map(function (item) { return (react_1.default.createElement("a", { key: item.name, href: item.href, className: "p-3 text-base/7 font-semibold text-gray-900 hover:bg-gray-100" }, item.name)); }))))));
+};
+exports.VistaHeaderV9 = VistaHeaderV9;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appcorp/app-corp-vista",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "scripts": {
     "build": "yarn clean && yarn build:ts && cp package.json lib && cp README.md lib",
     "build:next": "next build",

package/type/vista-header-type.d.ts

@@ -0,0 +1,36 @@
+export interface VistaHeaderV1Props {
+    id: string;
+}
+export interface VistaHeaderV2Props {
+    id: string;
+}
+export interface VistaHeaderV3Props {
+    id: string;
+}
+export interface VistaHeaderV4Props {
+    id: string;
+}
+export interface VistaHeaderV5Props {
+    id: string;
+}
+export interface VistaHeaderV6Props {
+    id: string;
+}
+export interface VistaHeaderV7Props {
+    id: string;
+}
+export interface VistaHeaderV8Props {
+    id: string;
+}
+export interface VistaHeaderV9Props {
+    id: string;
+}
+export interface VistaHeaderV10Props {
+    id: string;
+}
+export interface VistaHeaderV11Props {
+    id: string;
+}
+export interface VistaHeaderV12Props {
+    id: string;
+}

package/type/vista-header-type.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });