@eloisallena/web_components 1.0.8 → 1.0.10

package/dist/src/component/button/Button.d.ts

@@ -4,5 +4,6 @@ export interface ButtonProps {
     isLoading?: boolean;
     disabled?: boolean;
     onClick?: () => void;
+    style?: string;
 }
 export declare const Button: React.FC<ButtonProps>;

package/dist/src/component/header/Drawer.d.ts

@@ -1,11 +1,6 @@
 import { default as React } from 'react';
-export interface DrawerProps {
-    navDrawer: {
-        id: number;
-        href: string;
-        label: string;
-    }[];
-    style?: string;
-    onItemClick?: (label: string) => void;
+import { NavItem, NavigationProps } from './types';
+export interface DrawerProps extends NavigationProps {
+    navDrawer: NavItem[];
 }
 export declare const Drawer: React.FC<DrawerProps>;

package/dist/src/component/header/NavBar.d.ts

@@ -1,11 +1,6 @@
 import { default as React } from 'react';
-export interface NavBarProps {
-    navBar: {
-        id: number;
-        href: string;
-        label: string;
-    }[];
-    style?: string;
-    onItemClick?: (label: string) => void;
+import { NavItem, NavigationProps } from './types';
+export interface NavBarProps extends NavigationProps {
+    navBar: NavItem[];
 }
 export declare const NavBar: React.FC<NavBarProps>;

package/dist/src/component/header/index.d.ts

@@ -8,3 +8,4 @@ export { NavBar } from './NavBar';
 export type { NavBarProps } from './NavBar';
 export { SearchBar } from './SearchBar';
 export type { SearchBarProps } from './SearchBar';
+export type { NavItem, NavigationProps } from './types';

package/dist/src/component/header/types.d.ts

@@ -0,0 +1,9 @@
+export interface NavItem {
+    id: number;
+    href: string;
+    label: string;
+}
+export interface NavigationProps {
+    style?: string;
+    onItemClick?: (label: string) => void;
+}

package/dist/src/component/stories/LandingLayout.d.ts

@@ -1,5 +1,12 @@
 import { default as React } from 'react';
+import { NavItem } from '../header';
 export interface LandingLayoutProps {
     children: React.ReactNode;
+    navItems: NavItem[];
+    logo?: string;
+    companyTitle?: string;
+    description?: string;
+    email?: string;
+    phone?: string;
 }
 export declare const LandingLayout: React.FC<LandingLayoutProps>;

package/dist/{web-components.cjs.ts → web-components.cjs.js}

@@ -3,8 +3,8 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
-  <%s key={someKey} {...props} />`,o,p,m,p),L[p+o]=!0)}if(p=null,i!==void 0&&(r(i),p=``+i),s(n)&&(r(n.key),p=``+n.key),`key`in n)for(var h in i={},n)h!==`key`&&(i[h]=n[h]);else i=n;return p&&c(i,typeof e==`function`?e.displayName||e.name||`Unknown`:e),u(e,p,i,a(),l,d)}function f(e){p(e)?e._store&&(e._store.validated=1):typeof e==`object`&&e&&e.$$typeof===E&&(e._payload.status===`fulfilled`?p(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function p(e){return typeof e==`object`&&!!e&&e.$$typeof===h}var m=require(`react`),h=Symbol.for(`react.transitional.element`),g=Symbol.for(`react.portal`),_=Symbol.for(`react.fragment`),v=Symbol.for(`react.strict_mode`),y=Symbol.for(`react.profiler`),b=Symbol.for(`react.consumer`),x=Symbol.for(`react.context`),S=Symbol.for(`react.forward_ref`),C=Symbol.for(`react.suspense`),w=Symbol.for(`react.suspense_list`),T=Symbol.for(`react.memo`),E=Symbol.for(`react.lazy`),D=Symbol.for(`react.activity`),O=Symbol.for(`react.client.reference`),k=m.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,A=Object.prototype.hasOwnProperty,j=Array.isArray,M=console.createTask?console.createTask:function(){return null};m={react_stack_bottom_frame:function(e){return e()}};var N,P={},F=m.react_stack_bottom_frame.bind(m,o)(),I=M(i(o)),L={};e.Fragment=_,e.jsx=function(e,t,n){var r=1e4>k.recentlyCreatedOwnerStacks++;return d(e,t,n,!1,r?Error(`react-stack-top-frame`):F,r?M(i(e)):I)},e.jsxs=function(e,t,n){var r=1e4>k.recentlyCreatedOwnerStacks++;return d(e,t,n,!0,r?Error(`react-stack-top-frame`):F,r?M(i(e)):I)}})()})),f=o(((e,t)=>{process.env.NODE_ENV===`production`?t.exports=u():t.exports=d()}))(),p=()=>(0,f.jsx)(`span`,{className:`animate-spin rounded-full h-4 w-4 border-b-2 border-white`}),m=({variant:e=`primary`,label:t,isLoading:n=!1,disabled:r=!1,onClick:i})=>{let a={primary:`bg-primary-button text-primary`,secondary:`bg-secondary-button text-primary`,restore:`bg-restore-button text-primary`,delete:`bg-delete-button text-primary`,disabled:`bg-disabled-button text-primary`},o=n?(0,f.jsx)(p,{}):null,s=r||n;return(0,f.jsx)(`div`,{children:(0,f.jsxs)(`button`,{className:`${a[e]} flex items-center gap-3 px-4 py-2 rounded-2xl text-sm font-medium w-full justify-center md:w-70 lg:w-25
-       ${s?`cursor-not-allowed opacity-50`:`hover:cursor-pointer`}`,disabled:s,onClick:i,children:[o,t]})})},h=({children:e})=>(0,f.jsx)(`div`,{className:`bg-primary w-full max-w-sm rounded-lg shadow-md overflow-hidden`,children:e}),g=({children:e})=>(0,f.jsx)(`footer`,{className:`\r
+  <%s key={someKey} {...props} />`,o,p,m,p),L[p+o]=!0)}if(p=null,i!==void 0&&(r(i),p=``+i),s(n)&&(r(n.key),p=``+n.key),`key`in n)for(var h in i={},n)h!==`key`&&(i[h]=n[h]);else i=n;return p&&c(i,typeof e==`function`?e.displayName||e.name||`Unknown`:e),u(e,p,i,a(),l,d)}function f(e){p(e)?e._store&&(e._store.validated=1):typeof e==`object`&&e&&e.$$typeof===E&&(e._payload.status===`fulfilled`?p(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function p(e){return typeof e==`object`&&!!e&&e.$$typeof===h}var m=require(`react`),h=Symbol.for(`react.transitional.element`),g=Symbol.for(`react.portal`),_=Symbol.for(`react.fragment`),v=Symbol.for(`react.strict_mode`),y=Symbol.for(`react.profiler`),b=Symbol.for(`react.consumer`),x=Symbol.for(`react.context`),S=Symbol.for(`react.forward_ref`),C=Symbol.for(`react.suspense`),w=Symbol.for(`react.suspense_list`),T=Symbol.for(`react.memo`),E=Symbol.for(`react.lazy`),D=Symbol.for(`react.activity`),O=Symbol.for(`react.client.reference`),k=m.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,A=Object.prototype.hasOwnProperty,j=Array.isArray,M=console.createTask?console.createTask:function(){return null};m={react_stack_bottom_frame:function(e){return e()}};var N,P={},F=m.react_stack_bottom_frame.bind(m,o)(),I=M(i(o)),L={};e.Fragment=_,e.jsx=function(e,t,n){var r=1e4>k.recentlyCreatedOwnerStacks++;return d(e,t,n,!1,r?Error(`react-stack-top-frame`):F,r?M(i(e)):I)},e.jsxs=function(e,t,n){var r=1e4>k.recentlyCreatedOwnerStacks++;return d(e,t,n,!0,r?Error(`react-stack-top-frame`):F,r?M(i(e)):I)}})()})),f=o(((e,t)=>{process.env.NODE_ENV===`production`?t.exports=u():t.exports=d()}))(),p=()=>(0,f.jsx)(`span`,{className:`animate-spin rounded-full h-4 w-4 border-b-2 border-white`}),m=({variant:e=`primary`,label:t,isLoading:n=!1,disabled:r=!1,onClick:i,style:a})=>{let o={primary:`bg-primary-button text-primary`,secondary:`bg-secondary-button text-primary`,restore:`bg-restore-button text-primary`,delete:`bg-delete-button text-primary`,disabled:`bg-disabled-button text-primary`},s=n?(0,f.jsx)(p,{}):null,c=r||n;return(0,f.jsx)(`div`,{children:(0,f.jsxs)(`button`,{className:`${o[e]} flex items-center gap-3 px-4 py-2 rounded-2xl text-sm font-medium w-full justify-center md:w-70 lg:w-25
+       ${c?`cursor-not-allowed opacity-50`:`hover:cursor-pointer`} ${a||``}`,disabled:c,onClick:i,children:[s,t]})})},h=({children:e})=>(0,f.jsx)(`div`,{className:`bg-primary w-full max-w-sm rounded-lg shadow-md overflow-hidden`,children:e}),g=({children:e})=>(0,f.jsx)(`footer`,{className:`\r
         w-full\r
         bg-gray\r
         text-white\r
@@ -211,7 +211,7 @@ React keys must be passed directly to JSX without using spread:
                     transition-colors\r
                     hover:text-blue-600\r
                     hover:underline\r
-                  `,children:t.label}),!r&&(0,f.jsx)(`span`,{className:`text-gray-400`,children:`>`})]},t.id)})})}),I=({children:e})=>{let[t,n]=l.default.useState(`Home`),r=[{id:1,href:`#home`,label:`Home`},{id:2,href:`#about`,label:`About`},{id:3,href:`#services`,label:`Services`},{id:4,href:`#contact`,label:`Contact`}];return(0,f.jsxs)(`div`,{className:`w-full scroll-smooth`,children:[(0,f.jsx)(`div`,{className:`sticky top-0 z-50 bg-white`,children:(0,f.jsxs)(S,{children:[(0,f.jsxs)(`div`,{className:`flex items-center gap-4 lg:gap-10`,children:[(0,f.jsx)(w,{logo:`/icon.svg`,title:`QTEK`}),(0,f.jsx)(T,{navBar:r,onItemClick:n})]}),(0,f.jsxs)(`div`,{className:`flex shrink-0 items-center gap-2 sm:gap-3`,children:[(0,f.jsx)(D,{}),(0,f.jsx)(C,{navDrawer:r,onItemClick:n})]})]})}),(0,f.jsx)(`div`,{className:` \r
+                  `,children:t.label}),!r&&(0,f.jsx)(`span`,{className:`text-gray-400`,children:`>`})]},t.id)})})}),I=({children:e,navItems:t,logo:n,companyTitle:r,description:i=``,email:a=``,phone:o=``})=>{let[s,c]=l.default.useState(t[0]?.label||`Home`);return(0,f.jsxs)(`div`,{className:`w-full scroll-smooth`,children:[(0,f.jsx)(`div`,{className:`sticky top-0 z-50 bg-white`,children:(0,f.jsxs)(S,{children:[(0,f.jsxs)(`div`,{className:`flex items-center gap-4 lg:gap-10`,children:[(0,f.jsx)(w,{logo:n||``,title:r||`Company Name`}),(0,f.jsx)(T,{navBar:t,onItemClick:c})]}),(0,f.jsxs)(`div`,{className:`flex shrink-0 items-center gap-2 sm:gap-3`,children:[(0,f.jsx)(D,{}),(0,f.jsx)(C,{navDrawer:t,onItemClick:c})]})]})}),(0,f.jsx)(`div`,{className:` \r
             mx-auto\r
             max-w-full\r
             px-6\r
@@ -219,7 +219,7 @@ React keys must be passed directly to JSX without using spread:
             sticky\r
             z-40\r
             top-16\r
-            bg-light-gray`,children:(0,f.jsx)(F,{items:[{id:1,label:t,href:`#`}]})}),e,(0,f.jsxs)(g,{children:[(0,f.jsx)(y,{description:`Building modern and scalable digital solutions.`,children:(0,f.jsx)(`div`,{className:`scale-150 origin-left`,children:(0,f.jsx)(w,{logo:`/icon.svg`,title:`QTEK`})})}),(0,f.jsx)(b,{title:`Quick Links`,links:r,onItemClick:n}),(0,f.jsx)(v,{email:`hello@qtek.com`,phone:`+63 900 000 0000`,socials:[{id:1,label:`Facebook`,href:`#`},{id:2,label:`LinkedIn`,href:`#`},{id:3,label:`GitHub`,href:`#`}]}),(0,f.jsx)(_,{copyright:`© 2026 QTEK. All rights reserved.`})]})]})},L=({children:e,style:t,maxRows:n=5})=>(0,f.jsx)(`div`,{className:`
+            bg-light-gray`,children:(0,f.jsx)(F,{items:[{id:1,label:s,href:`#`}]})}),e,(0,f.jsxs)(g,{children:[(0,f.jsx)(y,{description:i,children:(0,f.jsx)(`div`,{className:`scale-150 origin-left`,children:(0,f.jsx)(w,{logo:n||``,title:r||`Company Name`})})}),(0,f.jsx)(b,{title:`Quick Links`,links:t,onItemClick:c}),(0,f.jsx)(v,{email:a,phone:o,socials:[{id:1,label:`Facebook`,href:`#`},{id:2,label:`LinkedIn`,href:`#`},{id:3,label:`GitHub`,href:`#`}]}),(0,f.jsx)(_,{copyright:`© 2026 QTEK. All rights reserved.`})]})]})},L=({children:e,style:t,maxRows:n=5})=>(0,f.jsx)(`div`,{className:`
         w-full
         overflow-hidden
         rounded-md

package/dist/{web-components.es.ts → web-components.es.js}

@@ -178,20 +178,20 @@ var n = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t
 	})();
 })), o = (/* @__PURE__ */ n(((e, t) => {
 	process.env.NODE_ENV === "production" ? t.exports = i() : t.exports = a();
-})))(), s = () => /* @__PURE__ */ (0, o.jsx)("span", { className: "animate-spin rounded-full h-4 w-4 border-b-2 border-white" }), c = ({ variant: e = "primary", label: t, isLoading: n = !1, disabled: r = !1, onClick: i }) => {
-	let a = {
+})))(), s = () => /* @__PURE__ */ (0, o.jsx)("span", { className: "animate-spin rounded-full h-4 w-4 border-b-2 border-white" }), c = ({ variant: e = "primary", label: t, isLoading: n = !1, disabled: r = !1, onClick: i, style: a }) => {
+	let c = {
 		primary: "bg-primary-button text-primary",
 		secondary: "bg-secondary-button text-primary",
 		restore: "bg-restore-button text-primary",
 		delete: "bg-delete-button text-primary",
 		disabled: "bg-disabled-button text-primary"
-	}, c = n ? /* @__PURE__ */ (0, o.jsx)(s, {}) : null, l = r || n;
+	}, l = n ? /* @__PURE__ */ (0, o.jsx)(s, {}) : null, u = r || n;
 	return /* @__PURE__ */ (0, o.jsx)("div", { children: /* @__PURE__ */ (0, o.jsxs)("button", {
-		className: `${a[e]} flex items-center gap-3 px-4 py-2 rounded-2xl text-sm font-medium w-full justify-center md:w-70 lg:w-25
-       ${l ? "cursor-not-allowed opacity-50" : "hover:cursor-pointer"}`,
-		disabled: l,
+		className: `${c[e]} flex items-center gap-3 px-4 py-2 rounded-2xl text-sm font-medium w-full justify-center md:w-70 lg:w-25
+       ${u ? "cursor-not-allowed opacity-50" : "hover:cursor-pointer"} ${a || ""}`,
+		disabled: u,
 		onClick: i,
-		children: [c, t]
+		children: [l, t]
 	}) });
 }, l = ({ children: e }) => /* @__PURE__ */ (0, o.jsx)("div", {
 	className: "bg-primary w-full max-w-sm rounded-lg shadow-md overflow-hidden",
@@ -595,29 +595,8 @@ var n = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t
 			}, t.id);
 		})
 	})
-}), A = ({ children: t }) => {
-	let [n, r] = e.useState("Home"), i = [
-		{
-			id: 1,
-			href: "#home",
-			label: "Home"
-		},
-		{
-			id: 2,
-			href: "#about",
-			label: "About"
-		},
-		{
-			id: 3,
-			href: "#services",
-			label: "Services"
-		},
-		{
-			id: 4,
-			href: "#contact",
-			label: "Contact"
-		}
-	];
+}), A = ({ children: t, navItems: n, logo: r, companyTitle: i, description: a = "", email: s = "", phone: c = "" }) => {
+	let [l, h] = e.useState(n[0]?.label || "Home");
 	return /* @__PURE__ */ (0, o.jsxs)("div", {
 		className: "w-full scroll-smooth",
 		children: [
@@ -626,17 +605,17 @@ var n = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t
 				children: /* @__PURE__ */ (0, o.jsxs)(g, { children: [/* @__PURE__ */ (0, o.jsxs)("div", {
 					className: "flex items-center gap-4 lg:gap-10",
 					children: [/* @__PURE__ */ (0, o.jsx)(v, {
-						logo: "/icon.svg",
-						title: "QTEK"
+						logo: r || "",
+						title: i || "Company Name"
 					}), /* @__PURE__ */ (0, o.jsx)(y, {
-						navBar: i,
-						onItemClick: r
+						navBar: n,
+						onItemClick: h
 					})]
 				}), /* @__PURE__ */ (0, o.jsxs)("div", {
 					className: "flex shrink-0 items-center gap-2 sm:gap-3",
 					children: [/* @__PURE__ */ (0, o.jsx)(x, {}), /* @__PURE__ */ (0, o.jsx)(_, {
-						navDrawer: i,
-						onItemClick: r
+						navDrawer: n,
+						onItemClick: h
 					})]
 				})] })
 			}),
@@ -644,30 +623,30 @@ var n = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t
 				className: " \r\n            mx-auto\r\n            max-w-full\r\n            px-6\r\n            py-4\r\n            sticky\r\n            z-40\r\n            top-16\r\n            bg-light-gray",
 				children: /* @__PURE__ */ (0, o.jsx)(k, { items: [{
 					id: 1,
-					label: n,
+					label: l,
 					href: "#"
 				}] })
 			}),
 			t,
 			/* @__PURE__ */ (0, o.jsxs)(u, { children: [
 				/* @__PURE__ */ (0, o.jsx)(p, {
-					description: "Building modern and scalable digital solutions.",
+					description: a,
 					children: /* @__PURE__ */ (0, o.jsx)("div", {
 						className: "scale-150 origin-left",
 						children: /* @__PURE__ */ (0, o.jsx)(v, {
-							logo: "/icon.svg",
-							title: "QTEK"
+							logo: r || "",
+							title: i || "Company Name"
 						})
 					})
 				}),
 				/* @__PURE__ */ (0, o.jsx)(m, {
 					title: "Quick Links",
-					links: i,
-					onItemClick: r
+					links: n,
+					onItemClick: h
 				}),
 				/* @__PURE__ */ (0, o.jsx)(f, {
-					email: "hello@qtek.com",
-					phone: "+63 900 000 0000",
+					email: s,
+					phone: c,
 					socials: [
 						{
 							id: 1,

package/package.json

@@ -1,6 +1,6 @@
  {
   "name": "@eloisallena/web_components",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "private": false,
   "files": [
     "dist"

package/dist/.next/types/validator.d.ts

@@ -1 +0,0 @@
-export {};