@eloisallena/web_components 1.0.4 → 1.0.6

package/dist/component/breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,9 @@
+interface BreadcrumbsProps {
+    items: {
+        id: number;
+        label: string;
+        href: string;
+    }[];
+}
+export declare const Breadcrumbs: React.FC<BreadcrumbsProps>;
+export {};

package/dist/component/breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const Breadcrumbs = ({ items, }) => {
+    return (_jsx("nav", { "aria-label": "Breadcrumb", children: _jsx("ol", { className: "\r\n          flex\r\n          flex-wrap\r\n          items-center\r\n          gap-2\r\n          text-sm\r\n        ", children: items.map((item, index) => {
+                const isLast = index === items.length - 1;
+                return (_jsxs("li", { className: "\r\n                flex\r\n                items-center\r\n                gap-2\r\n              ", children: [isLast ? (_jsx("span", { className: "\r\n                    font-semibold\r\n                    text-gray-900\r\n                  ", children: item.label })) : (_jsx("a", { href: item.href, className: "\r\n                    text-gray-600\r\n                    transition-colors\r\n                    hover:text-blue-600\r\n                    hover:underline\r\n                  ", children: item.label })), !isLast && (_jsx("span", { className: "text-gray-400", children: ">" }))] }, item.id));
+            }) }) }));
+};

package/dist/component/breadcrumbs/index.d.ts

@@ -0,0 +1 @@
+export { Breadcrumbs } from './Breadcrumbs';

package/dist/component/breadcrumbs/index.js

@@ -0,0 +1 @@
+export { Breadcrumbs } from './Breadcrumbs';

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

@@ -0,0 +1,8 @@
+export interface ButtonProps {
+    variant?: "primary" | "secondary" | "restore" | "delete" | "disabled";
+    label?: string;
+    isLoading?: boolean;
+    disabled?: boolean;
+    onClick?: () => void;
+}
+export declare const Button: React.FC<ButtonProps>;

package/dist/component/button/Button.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Loader } from "../spinner/Loader";
+export const Button = ({ variant = "primary", label, isLoading = false, disabled = false, onClick, }) => {
+    const colors = {
+        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",
+    };
+    const loader = isLoading ? _jsx(Loader, {}) : null;
+    const isDisabled = disabled || isLoading;
+    return (_jsx("div", { children: _jsxs("button", { className: `${colors[variant]} 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
+       ${isDisabled ? "cursor-not-allowed opacity-50" : "hover:cursor-pointer"}`, disabled: isDisabled, onClick: onClick, children: [loader, label] }) }));
+};

package/dist/component/button/index.d.ts

@@ -0,0 +1 @@
+export { Button } from './Button';

package/dist/component/button/index.js

@@ -0,0 +1,2 @@
+//point of entry 
+export { Button } from './Button';

package/dist/component/card/Card.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+interface CardProps {
+    children?: React.ReactNode;
+}
+export declare const Card: React.FC<CardProps>;
+export {};

package/dist/component/card/Card.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Card = ({ children }) => {
+    return (_jsx("div", { className: "bg-primary w-full max-w-sm rounded-lg shadow-md overflow-hidden", children: children }));
+};

package/dist/component/card/CardContent.d.ts

@@ -0,0 +1,6 @@
+interface CardContentProps {
+    title: string;
+    description: string;
+}
+export declare const CardContent: React.FC<CardContentProps>;
+export {};

package/dist/component/card/CardContent.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const CardContent = ({ title, description, }) => {
+    return (_jsxs("div", { className: "p-10", children: [_jsx("h2", { className: "text-lg font-bold mb-2 text-black", children: title }), _jsx("p", { className: "text-gray text-sm font-normal", children: description })] }));
+};

package/dist/component/card/CardFooter.d.ts

@@ -0,0 +1,5 @@
+interface CardFooterProps {
+    children?: React.ReactNode;
+}
+export declare const CardFooter: React.FC<CardFooterProps>;
+export {};

package/dist/component/card/CardFooter.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const CardFooter = ({ children }) => {
+    return _jsx("div", { className: "flex justify-end gap-4 w-full p-4", children: children });
+};

package/dist/component/card/CardImage.d.ts

@@ -0,0 +1,7 @@
+interface CardImageProps {
+    alt: string;
+    image: string;
+    children?: React.ReactNode;
+}
+export declare const CardImage: React.FC<CardImageProps>;
+export {};

package/dist/component/card/CardImage.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const CardImage = ({ alt, image, children, }) => {
+    return (_jsxs("div", { className: "relative w-full h-48", children: [_jsx("img", { src: image, alt: alt, className: "w-full h-auto object-cover" }), children] }));
+};

package/dist/component/card/index.d.ts

@@ -0,0 +1,4 @@
+export { Card } from "./Card";
+export { CardContent } from "./CardContent";
+export { CardImage } from "./CardImage";
+export { CardFooter } from "./CardFooter";

package/dist/component/card/index.js

@@ -0,0 +1,4 @@
+export { Card } from "./Card";
+export { CardContent } from "./CardContent";
+export { CardImage } from "./CardImage";
+export { CardFooter } from "./CardFooter";

package/dist/component/footer/Cfooter.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from "react";
+interface CfooterProps {
+    children?: ReactNode;
+}
+export declare const Cfooter: ({ children }: CfooterProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/component/footer/Cfooter.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Cfooter = ({ children }) => {
+    return (_jsx("footer", { className: "\r\n        w-full\r\n        bg-gray\r\n        text-white\r\n      ", children: _jsx("div", { className: "\r\n          mx-auto\r\n          max-w-7xl\r\n          grid\r\n          grid-cols-1\r\n          gap-8\r\n          px-6\r\n          py-10\r\n          md:grid-cols-3\r\n        ", children: children }) }));
+};

package/dist/component/footer/FooterBottom.d.ts

@@ -0,0 +1,5 @@
+interface FooterBottomProps {
+    copyright: string;
+}
+export declare const FooterBottom: React.FC<FooterBottomProps>;
+export {};

package/dist/component/footer/FooterBottom.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const FooterBottom = ({ copyright, }) => {
+    return (_jsx("div", { className: "\r\n        bg-gray\r\n        text-light-gray\r\n\r\n        border-t\r\n        border-gray\r\n\r\n        py-4\r\n\r\n        text-center\r\n        text-sm\r\n      ", children: copyright }));
+};

package/dist/component/footer/FooterContact.d.ts

@@ -0,0 +1,11 @@
+interface FooterContactProps {
+    email: string;
+    phone: string;
+    socials: {
+        id: number;
+        label: string;
+        href: string;
+    }[];
+}
+export declare const FooterContact: ({ email, phone, socials, }: FooterContactProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/component/footer/FooterContact.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const FooterContact = ({ email, phone, socials, }) => {
+    return (_jsxs("div", { className: "text-white", children: [_jsx("h3", { className: "\r\n          mb-3\r\n          text-lg\r\n          font-semibold\r\n        ", children: "Contact" }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("p", { children: email }), _jsx("p", { children: phone })] }), _jsx("h4", { className: "\r\n          mt-5\r\n          mb-2\r\n          font-medium\r\n        ", children: "Follow Us" }), _jsx("div", { className: "flex flex-wrap gap-3", children: socials.map((social) => (_jsx("a", { href: social.href, className: "hover:underline", children: social.label }, social.id))) })] }));
+};

package/dist/component/footer/FooterIcon.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from "react";
+interface FooterIconProps {
+    children?: ReactNode;
+    description: string;
+}
+export declare const FooterIcon: ({ children, description, }: FooterIconProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/component/footer/FooterIcon.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const FooterIcon = ({ children, description, }) => {
+    return (_jsxs("div", { className: "flex flex-col gap-4", children: [children, _jsx("p", { className: "\r\n          max-w-sm\r\n          text-sm\r\n          text-white\r\n        ", children: description })] }));
+};

package/dist/component/footer/QuickLink.d.ts

@@ -0,0 +1,11 @@
+interface QuickLinkProps {
+    title: string;
+    links: {
+        id: number;
+        label: string;
+        href: string;
+    }[];
+    onItemClick?: (label: string) => void;
+}
+export declare const QuickLink: ({ title, links, onItemClick, }: QuickLinkProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/component/footer/QuickLink.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const QuickLink = ({ title, links, onItemClick, }) => {
+    return (_jsxs("div", { className: "text-white", children: [_jsx("h3", { className: "\r\n          mb-3\r\n          text-lg\r\n          font-semibold\r\n        ", children: title }), _jsx("div", { className: "flex flex-col gap-2", children: links.map((link) => (_jsx("a", { href: link.href, onClick: () => onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(link.label), className: "hover:underline", children: link.label }, link.id))) })] }));
+};

package/dist/component/footer/index.d.ts

@@ -0,0 +1,5 @@
+export { Cfooter } from './Cfooter';
+export { FooterIcon } from './FooterIcon';
+export { FooterBottom } from './FooterBottom';
+export { FooterContact } from './FooterContact';
+export { QuickLink } from './QuickLink';

package/dist/component/footer/index.js

@@ -0,0 +1,5 @@
+export { Cfooter } from './Cfooter';
+export { FooterIcon } from './FooterIcon';
+export { FooterBottom } from './FooterBottom';
+export { FooterContact } from './FooterContact';
+export { QuickLink } from './QuickLink';

package/dist/component/form/Cform.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+interface CformProps {
+    children?: React.ReactNode;
+}
+export declare const Cform: React.FC<CformProps>;
+export {};

package/dist/component/form/Cform.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Cform = ({ children }) => {
+    return (_jsx("form", { className: "w-full max-w-sm", children: _jsx("div", { className: "flex flex-col gap-1 ", children: children }) }));
+};

package/dist/component/form/index.d.ts

@@ -0,0 +1 @@
+export { Cform } from "./Cform";

package/dist/component/form/index.js

@@ -0,0 +1 @@
+export { Cform } from "./Cform";

package/dist/component/header/Cheader.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+interface CheaderProps {
+    children?: React.ReactNode;
+    style?: string;
+}
+export declare const Cheader: React.FC<CheaderProps>;
+export {};

package/dist/component/header/Cheader.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Cheader = ({ children, style }) => {
+    return (_jsx("header", { className: `w-full bg-white border-b border-light-gray shadow-sm ${style}`, children: _jsx("div", { className: "flex items-center justify-between px-6 py-4", children: children }) }));
+};

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

@@ -0,0 +1,12 @@
+import React from "react";
+interface DrawerProps {
+    navDrawer: {
+        id: number;
+        href: string;
+        label: string;
+    }[];
+    style?: string;
+    onItemClick?: (label: string) => void;
+}
+export declare const Drawer: React.FC<DrawerProps>;
+export {};

package/dist/component/header/Drawer.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+export const Drawer = ({ navDrawer = [], style, onItemClick }) => {
+    const [openDrawer, setOpenDrawer] = useState(false);
+    return (_jsxs(_Fragment, { children: [_jsx("button", { onClick: () => setOpenDrawer(true), className: " flex md:hidden items-center justify-center h-10 w-10 rounded-md hover:bg-gray-100", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "\r\n            h-6\r\n            w-6\r\n            text-gray-700\r\n          ", children: _jsx("path", { fillRule: "evenodd", d: "M3 6.75A.75.75 0 0 1 3.75 6h16.5a.75.75 0 0 1 0 1.5H3.75A.75.75 0 0 1 3 6.75ZM3 12a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75A.75.75 0 0 1 3 12Zm0 5.25a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75a.75.75 0 0 1-.75-.75Z", clipRule: "evenodd" }) }) }), openDrawer && (_jsx("div", { onClick: () => setOpenDrawer(false), className: "fixed inset-0 z-40 bg-black/40 md:hidden" })), _jsxs("aside", { className: `
+          fixed top-0 
+          left-0 z-50 
+          h-screen w-65
+           bg-white 
+           shadow-lg 
+          transition-transform duration-300
+
+          ${openDrawer ? "translate-x-0" : "-translate-x-full"}
+
+          md:hidden
+
+          ${style || ""}
+        `, children: [_jsxs("div", { className: "\r\n            flex\r\n            items-center\r\n            justify-between\r\n\r\n            border-b\r\n            border-light-gray\r\n\r\n            px-5\r\n            py-4\r\n          ", children: [_jsx("h2", { className: "text-lg font-semibold", children: "Menu" }), _jsx("button", { onClick: () => setOpenDrawer(false), className: "\r\n              flex\r\n              items-center\r\n              justify-center\r\n\r\n              h-10\r\n              w-10\r\n\r\n              rounded-md\r\n\r\n              hover:bg-gray-100\r\n            ", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "\r\n                h-6\r\n                w-6\r\n\r\n                text-gray-700\r\n              ", children: _jsx("path", { fillRule: "evenodd", d: "M5.47 5.47a.75.75 0 011.06 0L12 10.94l5.47-5.47a.75.75 0 111.06 1.06L13.06 12l5.47 5.47a.75.75 0 01-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 010-1.06Z", clipRule: "evenodd" }) }) })] }), _jsx("div", { className: "flex flex-col p-4", children: navDrawer.map((item) => (_jsx("a", { href: item.href || "#", onClick: () => {
+                                onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item.label);
+                                setOpenDrawer(false);
+                            }, className: "\r\n                rounded-md\r\n                px-4\r\n                py-3\r\n                hover:bg-gray-100\r\n              ", children: item.label }, item.id))) })] })] }));
+};

package/dist/component/header/Icon.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+interface IconProps {
+    logo?: string;
+    title?: string;
+    style?: string;
+    alt?: string;
+}
+export declare const Icon: React.FC<IconProps>;
+export {};

package/dist/component/header/Icon.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const Icon = ({ logo = "/logo.svg", title = "my Company", style, alt = "", }) => {
+    return (_jsxs("div", { className: `
+        flex
+        items-center
+        gap-2
+        sm:gap-3
+        shrink-0
+        ${style || ""}
+      `, children: [_jsx("img", { src: logo, alt: alt, className: "\r\n          h-8\r\n          w-8\r\n          sm:h-10\r\n          sm:w-10\r\n          object-contain\r\n        " }), _jsx("h1", { className: "\r\n          text-sm\r\n          sm:text-lg\r\n          font-bold\r\n          text-blue\r\n        ", children: title })] }));
+};

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

@@ -0,0 +1,12 @@
+import React from "react";
+interface NavBarProps {
+    navBar: {
+        id: number;
+        href: string;
+        label: string;
+    }[];
+    style?: string;
+    onItemClick?: (label: string) => void;
+}
+export declare const NavBar: React.FC<NavBarProps>;
+export {};

package/dist/component/header/NavBar.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const NavBar = ({ navBar = [], style, onItemClick, }) => {
+    return (_jsx("nav", { className: `
+        hidden
+        md:flex
+        gap-12
+        justify-center
+        items-center
+        absolute
+        left-1/2
+        -translate-x-1/2
+        ${style || ""}
+      `, children: navBar.map((item) => (_jsx("a", { href: item.href || "#", onClick: () => onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item.label), className: "\r\n            text-lg\r\n            font-bold\r\n            text-black\r\n            hover:text-green\r\n            cursor-pointer\r\n          ", children: item.label }, item.id))) }));
+};

package/dist/component/header/SearchBar.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+interface SearchBarProps {
+    placeholder?: string;
+    style?: string;
+    children?: React.ReactNode;
+}
+export declare const SearchBar: React.FC<SearchBarProps>;
+export {};

package/dist/component/header/SearchBar.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Modal } from "../modal/Modal";
+export const SearchBar = ({ placeholder = "Search...", style, children, }) => {
+    const [openSearch, setOpenSearch] = useState(false);
+    return (_jsxs("div", { className: `relative ${style || ""}`, children: [_jsxs("div", { className: "hidden md:block relative", children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, className: "\r\n            absolute\r\n            left-3\r\n            top-1/2\r\n            h-4\r\n            w-4\r\n            -translate-y-1/2\r\n            text-gray-400\r\n          ", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M21 21l-4.35-4.35m1.85-5.15a7 7 0 11-14 0 7 7 0 0114 0z" }) }), _jsx("input", { type: "text", placeholder: placeholder, className: "\r\n            w-27.5\r\n            sm:w-40\r\n            md:w-50\r\n            lg:w-60\r\n            rounded-md\r\n            border\r\n            border-light-gray\r\n            bg-white\r\n            px-3\r\n            py-2\r\n            pl-9\r\n            text-xs\r\n            sm:text-sm\r\n            focus:outline-none\r\n            focus:ring-2\r\n            focus:ring-blue\r\n          " })] }), _jsx("button", { onClick: () => setOpenSearch(true), className: "\r\n          flex\r\n          md:hidden\r\n          items-center\r\n          justify-center\r\n          h-10\r\n          w-10\r\n          rounded-md\r\n          hover:bg-gray-100\r\n        ", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, className: "\r\n            h-6\r\n            w-6\r\n            text-gray-700\r\n          ", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M21 21l-4.35-4.35m1.85-5.15a7 7 0 11-14 0 7 7 0 0114 0z" }) }) }), _jsx(Modal, { isOpen: openSearch, title: "Search", onClose: () => setOpenSearch(false), children: children ? (children) : (_jsxs("div", { className: "relative", children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, className: "\r\n                absolute\r\n                left-3\r\n                top-1/2\r\n                h-4\r\n                w-4\r\n                -translate-y-1/2\r\n                text-gray-400\r\n              ", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M21 21l-4.35-4.35m1.85-5.15a7 7 0 11-14 0 7 7 0 0114 0z" }) }), _jsx("input", { autoFocus: true, type: "text", placeholder: placeholder, className: "\r\n                w-full\r\n                rounded-md\r\n                border\r\n                border-light-gray\r\n                bg-white\r\n                px-3\r\n                py-2\r\n                pl-9\r\n                text-sm\r\n                focus:outline-none\r\n                focus:ring-2\r\n                focus:ring-blue\r\n              " })] })) })] }));
+};

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

@@ -0,0 +1,5 @@
+export { Cheader } from './Cheader';
+export { Icon } from './Icon';
+export { Drawer } from './Drawer';
+export { SearchBar } from './SearchBar';
+export { NavBar } from './NavBar';

package/dist/component/header/index.js

@@ -0,0 +1,5 @@
+export { Cheader } from './Cheader';
+export { Icon } from './Icon';
+export { Drawer } from './Drawer';
+export { SearchBar } from './SearchBar';
+export { NavBar } from './NavBar';

package/dist/component/input/CheckBox.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+interface CheckBoxProps {
+    id: string;
+    label: string;
+    required?: boolean;
+    disabled?: boolean;
+    defaultChecked?: boolean;
+    error?: boolean;
+    helperText?: string;
+}
+export declare const CheckBox: React.FC<CheckBoxProps>;
+export {};

package/dist/component/input/CheckBox.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+export const CheckBox = ({ id, label, required, disabled, defaultChecked, error, helperText, }) => {
+    const [isChecked, setIsChecked] = useState(defaultChecked || false);
+    const handleChange = (e) => {
+        const checked = e.target.checked;
+        setIsChecked(checked);
+    };
+    return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("input", { id: id, type: "checkbox", checked: isChecked, onChange: handleChange, disabled: disabled, className: `
+            w-4 h-4 border rounded-xs
+            bg-neutral-secondary-medium
+            focus:ring-2 focus:ring-brand-soft
+            ${disabled ? "border-light cursor-not-allowed" : "border-default-medium hover:cursor-pointer"}
+          ` }), _jsxs("label", { htmlFor: id, className: `
+            select-none ms-2 text-sm font-medium
+            ${disabled ? "text-fg-disabled text-light-gray" : "text-heading"}
+          `, children: [label, " ", required && _jsx("span", { className: "text-red", children: "*" })] })] }), _jsx("div", { className: error ? "text-red text-sm font-medium" : "text-gray text-sm font-medium", children: helperText })] }));
+};

package/dist/component/input/Select.d.ts

@@ -0,0 +1,17 @@
+interface SelectProps {
+    label: string;
+    options: {
+        key: number;
+        name: string;
+        value: string;
+        image?: string;
+    }[];
+    required?: boolean;
+    disabled?: boolean;
+    helperText?: string;
+    error?: boolean;
+    value?: string;
+    onChange?: (value: string) => void;
+}
+export declare const Select: React.FC<SelectProps>;
+export {};

package/dist/component/input/Select.js

@@ -0,0 +1,12 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+export const Select = ({ label, options, required, disabled, helperText, error, value, onChange, }) => {
+    const handleChange = (event) => {
+        if (onChange) {
+            onChange(event.target.value);
+        }
+    };
+    return (_jsxs("div", { className: "w-full flex flex-col gap-1", children: [_jsxs("label", { className: "text-sm font-medium text-gray", children: [label, " ", required && "*"] }), _jsx("select", { className: `h-10 border-r-8 border-transparent px-4 outline outline-neutral-700 block w-full p-2 bg-neutral-secondary-medium
+         border border-default-medium text-heading text-sm font-normal rounded-base focus:ring-brand focus:border-brand shadow-xs 
+         placeholder:text-body
+         ${disabled ? "cursor-not-allowed" : "hover:cursor-pointer"}`, disabled: disabled, onChange: handleChange, value: value, children: options.map((option) => (_jsx("option", { value: option.name, children: option.value }, option.key))) }), helperText && error && (_jsx("div", { className: "text-red text-sm font-normal", children: helperText }))] }));
+};

package/dist/component/input/TextField.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+interface TextFieldProps {
+    id: string;
+    labelText: string;
+    placeholder: string;
+    error?: boolean;
+    helperText?: string;
+    type: "text" | "email" | "password" | "number";
+}
+export declare const TextField: React.FC<TextFieldProps>;
+export {};

package/dist/component/input/TextField.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const errorColor = "border-red";
+const errorTextColor = "text-red";
+const defaultColor = "border-gray";
+export const TextField = ({ id, labelText, placeholder, type, error, helperText, }) => {
+    return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("label", { htmlFor: id, className: "text-sm font-medium text-gray", children: labelText }), _jsx("input", { id: id, placeholder: placeholder, type: type, className: `block w-full px-3 py-2.5 bg-neutral-secondary-medium border ${error ? errorColor : defaultColor} text-heading text-sm rounded-base shadow-xs placeholder:text-body focus:ring-brand focus:border-brand` }), helperText && (_jsx("p", { className: `${error ? errorTextColor : "text-light-gray"} text-xs`, children: helperText }))] }));
+};

package/dist/component/input/index.d.ts

@@ -0,0 +1,3 @@
+export { TextField } from "./TextField";
+export { CheckBox } from "./CheckBox";
+export { Select } from "./Select";

package/dist/component/input/index.js

@@ -0,0 +1,3 @@
+export { TextField } from "./TextField";
+export { CheckBox } from "./CheckBox";
+export { Select } from "./Select";

package/dist/component/modal/Modal.d.ts

@@ -0,0 +1,8 @@
+interface ModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    title: string;
+    children: React.ReactNode;
+}
+export declare const Modal: React.FC<ModalProps>;
+export {};

package/dist/component/modal/Modal.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export const Modal = ({ isOpen, onClose, title, children }) => {
+    if (!isOpen)
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-40 bg-black/40", onClick: onClose }), _jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4", children: _jsxs("div", { className: "w-full max-w-md bg-white shadow-lg", role: "dialog", "aria-modal": "true", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-gray-200 px-5 py-4", children: [_jsx("h2", { className: "text-lg font-semibold", children: title }), _jsx("button", { onClick: onClose, className: "flex h-10 w-10 items-center justify-center hover:bg-gray-100 rounded-md", "aria-label": "Close modal", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 2, stroke: "currentColor", className: "h-5 w-5", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) }) })] }), _jsx("div", { className: "p-5", children: children })] }) })] }));
+};

package/dist/component/modal/index.d.ts

@@ -0,0 +1 @@
+export { Modal } from './Modal';

package/dist/component/modal/index.js

@@ -0,0 +1 @@
+export { Modal } from './Modal';

package/dist/component/section/Section.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+interface SectionProps {
+    id?: string;
+    title?: string;
+    children?: React.ReactNode;
+    style?: string;
+}
+export declare const Section: React.FC<SectionProps>;
+export {};

package/dist/component/section/Section.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const Section = ({ id, title, children, style, }) => {
+    return (_jsx("section", { id: id, className: `
+        min-h-screen
+        w-full
+        px-6
+        py-6
+        scroll-mt-32
+        md:px-10
+        lg:px-16
+
+        ${style || ""}
+      `, children: _jsxs("div", { className: "mx-auto flex w-full max-w-7xl flex-col gap-10", children: [title && (_jsx("h2", { className: "\r\n              text-3xl\r\n              font-bold\r\n              md:text-4xl\r\n            ", children: title })), children] }) }));
+};

package/dist/component/section/index.d.ts

@@ -0,0 +1 @@
+export { Section } from './Section';

package/dist/component/section/index.js

@@ -0,0 +1 @@
+export { Section } from './Section';

package/dist/component/spinner/Loader.d.ts

@@ -0,0 +1 @@
+export declare const Loader: React.FC;

package/dist/component/spinner/Loader.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Loader = () => {
+    return (_jsx("span", { className: "animate-spin rounded-full h-4 w-4 border-b-2 border-white" }));
+};

package/dist/component/spinner/index.d.ts

@@ -0,0 +1 @@
+export { Loader } from './Loader';

package/dist/component/spinner/index.js

@@ -0,0 +1 @@
+export { Loader } from './Loader';

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

@@ -0,0 +1,6 @@
+import React from "react";
+interface LayoutProps {
+    children: React.ReactNode;
+}
+export declare const LandingLayout: React.FC<LayoutProps>;
+export {};

package/dist/component/stories/LandingLayout.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Cheader } from "../header/Cheader";
+import { NavBar } from "../header/NavBar";
+import { Drawer } from "../header/Drawer";
+import { Icon } from "../header/Icon";
+import { Breadcrumbs } from "../breadcrumbs/Breadcrumbs";
+import { SearchBar } from "../header/SearchBar";
+import { Cfooter } from "../footer/Cfooter";
+import { FooterIcon } from "../footer/FooterIcon";
+import { QuickLink } from "../footer/QuickLink";
+import { FooterContact } from "../footer/FooterContact";
+import { FooterBottom } from "../footer/FooterBottom";
+export const LandingLayout = ({ children, }) => {
+    const [currentPage, setCurrentPage] = React.useState("Home");
+    const navItems = [
+        { 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 (_jsxs("div", { className: "w-full scroll-smooth", children: [_jsx("div", { className: "sticky top-0 z-50 bg-white", children: _jsxs(Cheader, { children: [_jsxs("div", { className: "flex items-center gap-4 lg:gap-10", children: [_jsx(Icon, { logo: "/icon.svg", title: "QTEK" }), _jsx(NavBar, { navBar: navItems, onItemClick: setCurrentPage })] }), _jsxs("div", { className: "flex shrink-0 items-center gap-2 sm:gap-3", children: [_jsx(SearchBar, {}), _jsx(Drawer, { navDrawer: navItems, onItemClick: setCurrentPage })] })] }) }), _jsx("div", { 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: _jsx(Breadcrumbs, { items: [
+                        {
+                            id: 1,
+                            label: currentPage,
+                            href: "#",
+                        },
+                    ] }) }), children, _jsxs(Cfooter, { children: [_jsx(FooterIcon, { description: "Building modern and scalable digital solutions.", children: _jsx("div", { className: "scale-150 origin-left", children: _jsx(Icon, { logo: "/icon.svg", title: "QTEK" }) }) }), _jsx(QuickLink, { title: "Quick Links", links: navItems, onItemClick: setCurrentPage }), _jsx(FooterContact, { 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: "#" },
+                        ] }), _jsx(FooterBottom, { copyright: "\u00A9 2026 QTEK. All rights reserved." })] })] }));
+};