ml-ui-lib 1.0.9 → 1.0.10

package/dist/components/Accordion/Accordion.css

@@ -0,0 +1,69 @@
+.accordion {
+  width: 100%;
+  font-family: "Inter", sans-serif;
+  color: #222;
+}
+
+.accordion-group {
+  margin-bottom: 1.5rem;
+}
+
+.accordion-group-title {
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: #444;
+  margin-bottom: 0.5rem;
+}
+
+.accordion-item {
+  border: 1px solid #e5e7eb;
+  border-radius: 10px;
+  margin-bottom: 0.75rem;
+  overflow: hidden;
+  background-color: #fff;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+  transition: all 0.3s ease;
+}
+
+.accordion-header {
+  width: 100%;
+  background: #f9fafb;
+  border: none;
+  padding: 1rem 1.25rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+  text-align: left;
+  font-size: 1rem;
+  font-weight: 500;
+  transition: background 0.2s ease;
+}
+
+.accordion-header:hover {
+  background: #f3f4f6;
+}
+
+.accordion-icon {
+  transition: transform 0.3s ease;
+  font-size: 1rem;
+  color: #6b7280;
+}
+
+.accordion-icon.open {
+  transform: rotate(180deg);
+}
+
+.accordion-content-wrapper {
+  overflow: hidden;
+  max-height: 0;
+  transition: max-height 0.35s ease;
+  background: #fff;
+}
+
+.accordion-content {
+  padding: 1rem 1.25rem;
+  font-size: 0.95rem;
+  color: #555;
+  line-height: 1.6;
+}

package/dist/components/Accordion/Accordion.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import "./Accordion.css";
+export interface AccordionSubItem {
+    title: string;
+    content: string;
+}
+export interface AccordionGroup {
+    title: string;
+    items: AccordionSubItem[];
+}
+export interface AccordionProps {
+    items: AccordionGroup[];
+}
+export declare const Accordion: React.FC<AccordionProps>;

package/dist/components/Accordion/Accordion.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import "./Accordion.css";
+export const Accordion = ({ items }) => {
+    const [openIndexes, setOpenIndexes] = useState([]);
+    const contentRefs = useRef([]);
+    const toggleItem = (index) => {
+        setOpenIndexes((prev) => prev.includes(index) ? prev.filter((i) => i !== index) : [...prev, index]);
+    };
+    useEffect(() => {
+        openIndexes.forEach((index) => {
+            const content = contentRefs.current[index];
+            if (content) {
+                const scrollHeight = content.scrollHeight;
+                content.style.maxHeight = `${scrollHeight}px`;
+            }
+        });
+    }, [openIndexes]);
+    return (_jsx("div", { className: "accordion", children: items.map((group, groupIndex) => (_jsxs("div", { className: "accordion-group", children: [group.title && _jsx("h3", { className: "accordion-group-title", children: group.title }), group.items.map((item, itemIndex) => {
+                    const index = groupIndex * 1000 + itemIndex;
+                    const isOpen = openIndexes.includes(index);
+                    return (_jsxs("div", { className: `accordion-item ${isOpen ? "open" : ""}`, children: [_jsxs("button", { className: "accordion-header", onClick: () => toggleItem(index), children: [_jsx("span", { className: "accordion-title", children: item.title }), _jsx("span", { className: `accordion-icon ${isOpen ? "open" : ""}`, children: "\u25BC" })] }), _jsx("div", { ref: (el) => (contentRefs.current[index] = el), className: "accordion-content-wrapper", style: {
+                                    maxHeight: isOpen
+                                        ? `${contentRefs.current[index]?.scrollHeight}px`
+                                        : "0px",
+                                }, children: _jsx("div", { className: "accordion-content", children: item.content }) })] }, index));
+                })] }, groupIndex))) }));
+};

package/dist/components/Card/Card.css

@@ -0,0 +1,89 @@
+.card {
+  background: #ffffff;
+  border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  padding: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  max-width: 100%;
+  box-sizing: border-box;
+  transition: box-shadow 0.25s ease, transform 0.25s ease;
+}
+
+/* Hoverable behavior only if enabled */
+.card.hoverable:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
+  cursor: pointer;
+}
+
+/* Grid container */
+.card-grid {
+  display: grid;
+  gap: 1.5rem;
+  align-items: start;
+  width: 100%;
+  box-sizing: border-box;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  word-break: break-word;
+}
+
+/* Each section */
+.card-section {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  min-width: 0;
+}
+
+/* Text elements should wrap */
+.card-section p,
+.card-section span,
+.card-section li,
+.card-section h1,
+.card-section h2,
+.card-section h3,
+.card-section h4,
+.card-section h5,
+.card-section h6 {
+  margin: 0;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  white-space: normal;
+}
+
+/* Image / cover section */
+.card-image-section {
+  padding: 0; /* remove text padding */
+  overflow: hidden;
+  border-radius: 12px;
+}
+
+.card-image-section img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+  border-radius: 12px;
+}
+
+/* Responsive stacking */
+@media (max-width: 992px) {
+  .card {
+    margin-bottom: 10px;
+  }
+  /* .card-grid {
+    grid-template-columns: 1fr !important;
+  } */
+
+  /* .card-section {
+    padding-bottom: 1rem;
+    border-bottom: 1px solid #eee;
+  } */
+
+  /* .card-section:last-child {
+    border-bottom: none;
+  } */
+}

package/dist/components/Card/Card.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import "./Card.css";
+export interface CardProps {
+    children: React.ReactNode[] | React.ReactNode;
+    columns?: number;
+    columnWidths?: string[];
+    width?: string;
+    hoverable?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const Card: React.FC<CardProps>;
+export default Card;

package/dist/components/Card/Card.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import "./Card.css";
+export const Card = ({ children, columns = 1, columnWidths, width = "100%", hoverable = false, className = "", style, }) => {
+    const gridTemplateColumns = columnWidths && columnWidths.length
+        ? columnWidths.map((w) => `minmax(0, ${w})`).join(" ")
+        : `repeat(${columns}, minmax(0, 1fr))`;
+    return (_jsx("div", { className: `card ${hoverable ? "hoverable" : ""} ${className}`, style: { width, ...style }, children: _jsx("div", { className: "card-grid", style: { gridTemplateColumns }, children: React.Children.map(children, (child, i) => (_jsx("div", { className: `card-section ${React.isValidElement(child) &&
+                    child.props?.className?.includes("card-image")
+                    ? "card-image-section"
+                    : ""}`, children: child }, i))) }) }));
+};
+export default Card;

package/dist/components/ExpandablePanel/ExpandablePanel.css

@@ -0,0 +1,111 @@
+.expandable-panel-container {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.expandable-card-row {
+  display: grid;
+  gap: 16px;
+}
+
+.expandable-card {
+  flex: 1;
+  background: #fff;
+  border: 1px solid #e5e7eb;
+  border-radius: 12px;
+  padding: 16px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.expandable-card.active {
+  border-color: #ff4d4f;
+  box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.1);
+}
+
+/* --- Sliding subpanel --- */
+.subpanel-wrapper {
+  width: 100%;
+  overflow: hidden;
+  max-height: 0;
+  opacity: 0;
+  transform: translateY(-10px);
+  transition:
+    max-height 0.4s ease,
+    opacity 0.3s ease,
+    transform 0.3s ease;
+  margin-top: 0;
+}
+
+.subpanel-wrapper.open {
+  opacity: 1;
+  transform: translateY(0);
+  margin-top: 12px;
+}
+
+.subpanel-content {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  background: #f9fafb;
+  border-radius: 10px;
+  border: 1px solid #ddd;
+  padding: 16px;
+}
+
+.sub-card {
+  flex: 1 1 calc(33.333% - 10px);
+  border-radius: 8px;
+  /* background: white;
+  border: 1px solid #eee;
+  padding: 12px; */
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+/* --- Responsive behavior --- */
+@media (min-width: 993px) {
+  .expandable-card-wrapper {
+    display: flex;
+  }
+
+  .expandable-card-row {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .sub-card {
+    flex: 1 1 calc(33.333% - 10px);
+  }
+}
+
+@media (max-width: 992px) {
+  .expandable-card-row {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .sub-card {
+    flex: 1 1 calc(50% - 10px);
+  }
+}
+
+@media (max-width: 576px) {
+  .expandable-card-wrapper {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .expandable-card-row {
+    grid-template-columns: 1fr;
+    gap: 8px;
+  }
+
+  .sub-card {
+    flex: 1 1 100%;
+  }
+}

package/dist/components/ExpandablePanel/ExpandablePanel.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import "./ExpandablePanel.css";
+export interface ExpandablePanelItem {
+    id: string | number;
+    title: string;
+    content: React.ReactNode;
+    subPanel?: React.ReactNode | React.ReactNode[];
+}
+export interface ExpandablePanelProps {
+    items: ExpandablePanelItem[];
+    columns?: number;
+}
+export declare const ExpandablePanel: React.FC<ExpandablePanelProps>;
+export default ExpandablePanel;

package/dist/components/ExpandablePanel/ExpandablePanel.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from "react";
+import "./ExpandablePanel.css";
+export const ExpandablePanel = ({ items, columns = 3, }) => {
+    const [expandedId, setExpandedId] = useState(null);
+    const [columnCount, setColumnCount] = useState(columns);
+    const handleClick = (id) => {
+        setExpandedId(expandedId === id ? null : id);
+    };
+    // Responsive columns
+    useEffect(() => {
+        const handleResize = () => {
+            const width = window.innerWidth;
+            if (width >= 993)
+                setColumnCount(3);
+            else if (width >= 577)
+                setColumnCount(2);
+            else
+                setColumnCount(1);
+        };
+        handleResize();
+        window.addEventListener("resize", handleResize);
+        return () => window.removeEventListener("resize", handleResize);
+    }, []);
+    // Split into rows
+    const rows = [];
+    for (let i = 0; i < items.length; i += columnCount) {
+        rows.push(items.slice(i, i + columnCount));
+    }
+    return (_jsx("div", { className: "expandable-panel-container", children: rows.map((row, rowIndex) => {
+            const expandedItem = row.find((item) => item.id === expandedId);
+            return (_jsxs("div", { className: "expandable-row", children: [_jsx("div", { className: "expandable-card-row", style: { gridTemplateColumns: `repeat(${columnCount}, 1fr)` }, children: row.map((item) => (_jsxs("div", { className: "expandable-card-wrapper", children: [_jsxs("div", { className: `expandable-card ${expandedId === item.id ? "active" : ""}`, onClick: () => handleClick(item.id), children: [_jsx("h4", { children: item.title }), _jsx("div", { className: "card-content", children: item.content })] }), columnCount === 1 && (_jsx(ExpandableSubPanel, { isOpen: expandedId === item.id, content: item.subPanel, mode: "mobile" }))] }, item.id))) }), columnCount > 1 && (_jsx(ExpandableSubPanel, { isOpen: !!expandedItem, content: expandedItem?.subPanel, mode: "desktop" }))] }, rowIndex));
+        }) }));
+};
+const ExpandableSubPanel = ({ isOpen, content, mode, }) => {
+    const ref = useRef(null);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (isOpen) {
+            el.style.maxHeight = el.scrollHeight + "px";
+        }
+        else {
+            el.style.maxHeight = "0px";
+        }
+    }, [isOpen, content]);
+    if (!content)
+        return null;
+    return (_jsx("div", { ref: ref, className: `subpanel-wrapper ${isOpen ? "open" : ""} ${mode}`, children: _jsx("div", { className: "subpanel-content", children: Array.isArray(content)
+                ? content.map((sub, i) => (_jsx("div", { className: "sub-card", children: sub }, i)))
+                : content }) }));
+};
+export default ExpandablePanel;

package/dist/components/Navbar/Navbar.css

@@ -0,0 +1,140 @@
+.navbar {
+    background: #fff;
+    border-bottom: 1px solid #eee;
+    width: 100%;
+    z-index: 100;
+    top: 0;
+}
+
+.navbar-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.navbar-logo img {
+    max-height: 50px;
+}
+
+.navbar-links {
+    display: flex;
+    gap: 1.5rem;
+    transition: all 0.3s ease;
+    margin-left: 35px;
+}
+
+.navbar-links a {
+    text-decoration: none;
+    color: #333;
+    font-weight: 400;
+    font-size: 1rem;
+    transition: color 0.2s;
+}
+
+.navbar-links a:hover {
+    color: #ff0000;
+}
+
+/* Burger Icon */
+.burger {
+    display: none;
+    flex-direction: column;
+    justify-content: space-between;
+    width: 20px;
+    height: 18px;
+    border: none;
+    background: none;
+    cursor: pointer;
+    padding: 0;
+}
+
+.burger span {
+    display: block;
+    height: 2px;
+    width: 100%;
+    background: #333;
+    border-radius: 2px;
+    transition: all 0.3s ease;
+}
+
+.burger.active span:nth-child(1) {
+    transform: translateY(8px) rotate(45deg);
+}
+
+.burger.active span:nth-child(2) {
+    opacity: 0;
+}
+
+.burger.active span:nth-child(3) {
+    transform: translateY(-8px) rotate(-45deg);
+}
+
+@media (min-width: 993px) {
+    .navbar-container {
+        padding: 1rem 5rem;
+    }
+
+}
+
+/* Responsive Menu */
+@media (max-width: 992px) {
+    .burger {
+        display: flex;
+    }
+
+    .navbar-container {
+        padding: 1rem 1.5rem;
+    }
+
+    .navbar-links {
+        position: absolute;
+        top: 70px;
+        right: 0;
+        background: #fff;
+        flex-direction: column;
+        align-items: flex-start;
+        width: 100%;
+        max-height: 0;
+        overflow: hidden;
+        opacity: 0;
+        transition: all 0.3s ease;
+        padding: 0 2rem;
+    }
+
+    .navbar-links.open {
+        max-height: 460px;
+        opacity: 1;
+        padding: 1rem 2rem;
+        border-bottom: 1px solid #eee;
+    }
+
+    .navbar-links a {
+        padding: 0.75rem 0;
+        width: 100%;
+    }
+
+    .navbar-logo img {
+        height: 35px;
+    }
+}
+
+/* Login Button */
+.login-btn {
+    color: #333;
+    border: none;
+    /* padding: 0.5rem 1.25rem; */
+    border-radius: 6px;
+    cursor: pointer;
+    transition: background 0.3s ease;
+}
+
+.login-btn:hover {
+    color: #d00000;
+}
+
+.navbar-user {
+    color: #333;
+    font-weight: 500;
+}

package/dist/components/Navbar/Navbar.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import './Navbar.css';
+export interface NavbarItem {
+    name: string;
+    link: string;
+    target?: '_blank' | '_self';
+}
+export interface NavbarProps {
+    items: NavbarItem[];
+    logoSrc?: string;
+    logoAlt?: string;
+    logoWidth?: number | string;
+    logoHeight?: number | string;
+    className?: string;
+    login?: boolean;
+    logedinData?: Record<string, any> | null;
+    loginContent?: React.ReactNode;
+}
+export declare const Navbar: React.FC<NavbarProps>;
+export default Navbar;

package/dist/components/Navbar/Navbar.js

@@ -0,0 +1,51 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import './Navbar.css';
+import { Modal } from '../Modal/Modal';
+import { SlidingPanelBottom } from '../SlidingPanelBottom/SlidingPanelBottom';
+export const Navbar = ({ items, logoSrc = '/images/ml-logo.svg', logoAlt = 'M Lhuillier Logo', logoWidth = 220, logoHeight = 40, className = '', login = false, logedinData = null, loginContent, }) => {
+    const [menuOpen, setMenuOpen] = useState(false);
+    const [showLogin, setShowLogin] = useState(false);
+    const [isMobile, setIsMobile] = useState(false);
+    useEffect(() => {
+        const handleResize = () => setIsMobile(window.innerWidth <= 590);
+        handleResize();
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, []);
+    const toggleMenu = () => setMenuOpen((prev) => !prev);
+    const toggleLogin = () => setShowLogin((prev) => !prev);
+    return (_jsxs(_Fragment, { children: [_jsx("nav", { className: `navbar ${className}`, children: _jsxs("div", { className: "navbar-container", children: [_jsxs("div", { style: { display: 'flex', gap: '10px', alignItems: 'center' }, children: [_jsxs("button", { className: `burger ${menuOpen ? 'active' : ''}`, onClick: toggleMenu, "aria-label": "Toggle menu", children: [_jsx("span", {}), _jsx("span", {}), _jsx("span", {})] }), _jsx("div", { className: "navbar-logo", children: _jsx("a", { href: "/", className: "navbar-brand", children: _jsx("img", { src: logoSrc, alt: logoAlt, width: logoWidth, height: logoHeight, style: { cursor: 'pointer', display: 'block' } }) }) }), _jsx("div", { className: `navbar-links ${menuOpen ? 'open' : ''}`, children: items.map((item) => (_jsx("a", { href: item.link, target: item.target || '_self', rel: item.target === '_blank' ? 'noopener noreferrer' : undefined, className: "navbar-link", onClick: () => setMenuOpen(false), children: item.name.includes('-')
+                                            ? item.name
+                                                .split('-')
+                                                .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+                                                .join(' & ')
+                                            : item.name }, item.name))) })] }), login &&
+                            (logedinData ? (_jsxs("div", { className: "navbar-user", children: ["Hello, ", logedinData.name || 'User'] })) : (_jsx("span", { className: "login-btn", onClick: toggleLogin, children: "Login" })))] }) }), login && !logedinData && (_jsx(_Fragment, { children: !isMobile ? (_jsx(Modal, { open: showLogin, onClose: () => setShowLogin(false), title: "", children: _jsx("div", { className: "navbar-modal-content", children: loginContent || _jsx("p", { children: "Login form goes here" }) }) })) : (_jsx("div", { className: "navbar-login-panel", children: _jsxs(SlidingPanelBottom, { isOpen: showLogin, height: "70%", onClose: () => setShowLogin(false), children: [_jsx("div", { className: "navbar-panel-header" }), _jsx("div", { className: "navbar-panel-content", children: loginContent || _jsx("p", { children: "Login form goes here" }) })] }) })) })), _jsx("style", { children: `
+                .navbar-login-panel .spb-backdrop {
+                    background: rgba(255, 0, 0, 1) !important; /* darker overlay */
+                    backdrop-filter: blur(3px);
+                }
+
+                .navbar-login-panel .spb-header {
+                    padding: 0x !important;
+                    border-bottom: none !important;
+                }
+
+                .navbar-login-panel .spb-backdrop::before {
+                    content: "";
+                    position: absolute;
+                    top: 70px; /* distance from the top, adjust as needed */
+                    left: 50%;
+                    transform: translateX(-50%);
+                    width: 280px; /* optional, adjust image size */
+                    height: 80px; /* optional */
+                    background: url(https://mlhuillier.com/img/revamp/ml-logo-2.svg) center/contain no-repeat;
+                    opacity: 1;
+                    pointer-events: none;
+                    z-index: 1;
+                }
+            ` })] }));
+};
+export default Navbar;

package/dist/components/SlidingPanelBottom/SlidingPanelBottom.css

@@ -0,0 +1,171 @@
+/* ✅ Existing code kept as-is */
+
+/* Root wrapper covers entire viewport */
+.spb-root {
+    position: fixed;
+    inset: 0;
+    z-index: 10000;
+    pointer-events: none;
+}
+
+/* Backdrop */
+.spb-backdrop {
+    position: absolute;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.45);
+    opacity: 0;
+    transition: opacity 320ms ease;
+    pointer-events: auto;
+    backdrop-filter: blur(4px);
+}
+
+/* Panel container that slides up from bottom */
+.spb-panel {
+    position: absolute;
+    left: 50%;
+    bottom: 0;
+    transform: translate(-50%, 100%);
+    transition: transform 320ms cubic-bezier(.22, .9, .32, 1);
+    background: #ffffff;
+    border-top-left-radius: 16px;
+    border-top-right-radius: 16px;
+    box-shadow: 0 -20px 40px rgba(2, 6, 23, 0.35);
+    max-height: 95vh;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    pointer-events: auto;
+    width: 90%;
+}
+
+/* Handle (optional) */
+.spb-handle {
+    width: 40px;
+    height: 4px;
+    background: #e5e7eb;
+    border-radius: 999px;
+    margin: 8px auto 0;
+    opacity: 0;
+    /* ✅ Hidden by default for desktop */
+    transition: opacity 0.2s ease;
+}
+
+/* Header */
+.spb-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 16px;
+    border-bottom: 1px solid #f1f1f1;
+    min-height: 48px;
+}
+
+.spb-title {
+    margin: 0;
+    font-size: 1.05rem;
+    font-weight: 600;
+    color: #111827;
+}
+
+.spb-close-btn {
+    background: none;
+    border: none;
+    font-size: 20px;
+    line-height: 1;
+    cursor: pointer;
+    padding: 6px;
+    border-radius: 6px;
+    color: #111827;
+}
+
+.spb-close-btn:hover {
+    background: rgba(0, 0, 0, 0.03);
+}
+
+/* Body */
+.spb-body {
+    padding: 16px;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    flex: 1 1 auto;
+}
+
+/* Open/close states */
+.spb-root.spb-open {
+    pointer-events: auto;
+}
+
+.spb-root.spb-open .spb-backdrop {
+    opacity: 1;
+}
+
+.spb-root.spb-open .spb-panel {
+    transform: translate(-50%, 0);
+}
+
+.spb-root.spb-close {
+    pointer-events: none;
+}
+
+.spb-root.spb-close .spb-backdrop {
+    opacity: 0;
+}
+
+.spb-root.spb-close .spb-panel {
+    transform: translate(-50%, 100%);
+}
+
+@media (min-width: 993px) {
+    .spb-panel {
+        width: 90%;
+    }
+}
+
+/* ✅ Responsive: Large screens (≤992px) */
+@media (max-width: 992px) {
+    .spb-panel {
+        width: 90%;
+        max-width: 960px;
+        height: 85vh;
+        border-radius: 16px 16px 0 0;
+        left: 50%;
+        bottom: 0;
+        transform: translate(-50%, 100%);
+        transition: transform 360ms cubic-bezier(.22, .9, .32, 1);
+    }
+
+    .spb-root.spb-open .spb-panel {
+        transform: translate(-50%, 0);
+    }
+
+    .spb-body {
+        flex: 1;
+        overflow-y: auto;
+    }
+}
+
+@media (max-width: 590px) {
+    .spb-panel {
+        width: 100% !important;
+    }
+
+    .spb-handle {
+        opacity: 1;
+        cursor: grab;
+        touch-action: pan-y;
+    }
+
+    .spb-header {
+        cursor: grab;
+        touch-action: pan-y;
+    }
+
+    .spb-header:active,
+    .spb-handle:active {
+        cursor: grabbing;
+    }
+
+    .spb-close-btn {
+        display: none;
+    }
+}

package/dist/components/SlidingPanelBottom/SlidingPanelBottom.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import "./SlidingPanelBottom.css";
+export interface SlidingPanelBottomProps {
+    isOpen: boolean;
+    onClose: () => void;
+    children: React.ReactNode;
+    height?: string;
+    width?: string;
+    title?: string;
+    closeOnOverlayClick?: boolean;
+}
+export declare const SlidingPanelBottom: React.FC<SlidingPanelBottomProps>;
+export default SlidingPanelBottom;

package/dist/components/SlidingPanelBottom/SlidingPanelBottom.js

@@ -0,0 +1,90 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import "./SlidingPanelBottom.css";
+export const SlidingPanelBottom = ({ isOpen, onClose, children, height = "80%", width = "100%", title, closeOnOverlayClick = true, }) => {
+    const [visible, setVisible] = useState(false);
+    const [animateOpen, setAnimateOpen] = useState(false);
+    const panelRef = useRef(null);
+    const headerRef = useRef(null);
+    const handleRef = useRef(null);
+    useEffect(() => {
+        if (isOpen) {
+            setVisible(true);
+            document.body.style.overflow = "hidden";
+            const id = setTimeout(() => setAnimateOpen(true), 20);
+            return () => clearTimeout(id);
+        }
+        else {
+            document.body.style.overflow = "";
+            setAnimateOpen(false);
+            const id = setTimeout(() => setVisible(false), 320);
+            return () => clearTimeout(id);
+        }
+    }, [isOpen]);
+    useEffect(() => {
+        const onKey = (e) => {
+            if (e.key === "Escape" && isOpen)
+                onClose();
+        };
+        document.addEventListener("keydown", onKey);
+        return () => document.removeEventListener("keydown", onKey);
+    }, [isOpen, onClose]);
+    // ✅ Drag gesture on both handle + header
+    useEffect(() => {
+        const panel = panelRef.current;
+        const handle = handleRef.current;
+        const header = headerRef.current;
+        if (!panel)
+            return;
+        const dragAreaElements = [handle, header].filter(Boolean);
+        let startY = 0;
+        let currentY = 0;
+        let isDragging = false;
+        const onTouchStart = (e) => {
+            startY = e.touches[0].clientY;
+            isDragging = true;
+            panel.style.transition = "none";
+        };
+        const onTouchMove = (e) => {
+            if (!isDragging)
+                return;
+            currentY = e.touches[0].clientY;
+            const diff = currentY - startY;
+            if (diff > 0) {
+                panel.style.transform = `translate(-50%, ${diff}px)`;
+            }
+        };
+        const onTouchEnd = () => {
+            if (!isDragging)
+                return;
+            isDragging = false;
+            const diff = currentY - startY;
+            if (diff > 100) {
+                panel.style.transition = "transform 0.3s ease";
+                panel.style.transform = `translate(-50%, 100%)`;
+                setTimeout(() => onClose(), 250);
+            }
+            else {
+                panel.style.transition = "transform 0.3s ease";
+                panel.style.transform = `translate(-50%, 0)`;
+            }
+        };
+        dragAreaElements.forEach((el) => {
+            el.addEventListener("touchstart", onTouchStart);
+            el.addEventListener("touchmove", onTouchMove);
+            el.addEventListener("touchend", onTouchEnd);
+        });
+        return () => {
+            dragAreaElements.forEach((el) => {
+                el.removeEventListener("touchstart", onTouchStart);
+                el.removeEventListener("touchmove", onTouchMove);
+                el.removeEventListener("touchend", onTouchEnd);
+            });
+        };
+    }, [onClose]);
+    if (!visible && !isOpen)
+        return null;
+    return (_jsxs("div", { className: `spb-root ${animateOpen ? "spb-open" : "spb-close"}`, "aria-hidden": !isOpen, children: [_jsx("div", { className: "spb-backdrop", onClick: () => closeOnOverlayClick && onClose() }), _jsxs("div", { ref: panelRef, className: "spb-panel", style: { height, width }, role: "dialog", "aria-modal": "true", onClick: (e) => e.stopPropagation(), children: [_jsx("div", { ref: handleRef, className: "spb-handle" }), _jsxs("div", { ref: headerRef, className: "spb-header", children: [title ? _jsx("h3", { className: "spb-title", children: title }) : _jsx("div", {}), _jsx("button", { className: "spb-close-btn", onClick: onClose, children: "\u00D7" })] }), _jsx("div", { className: "spb-body", children: children })] })] }));
+};
+export default SlidingPanelBottom;

package/dist/components/Table/Table.css

@@ -0,0 +1,82 @@
+.table-wrapper {
+  overflow-x: auto;
+  width: 100%;
+}
+
+/* Base table styles */
+.custom-table {
+  width: 100%;
+  border-collapse: collapse;
+  border-radius: 8px;
+  font-family: inherit;
+  font-size: 14px;
+  color: #111827;
+  transition: background 0.2s ease;
+}
+
+/* Lines option */
+.custom-table.with-lines th,
+.custom-table.with-lines td {
+  border: 1px solid #e5e7eb;
+}
+
+.custom-table.no-lines th,
+.custom-table.no-lines td {
+  border: none;
+}
+
+/* Header */
+.custom-table thead tr {
+  background-color: var(--head-color);
+  color: var(--head-text-color);
+}
+
+.custom-table th {
+  padding: 12px 16px;
+  text-align: left;
+  font-weight: 600;
+  font-size: 14px;
+  white-space: nowrap;
+}
+
+/* Body rows */
+.custom-table tbody tr {
+  background-color: var(--alternate-row-color);
+  transition: background 0.2s ease;
+}
+
+.custom-table tbody tr:nth-child(odd) {
+  background-color: #ffffff;
+}
+
+.custom-table tbody tr:hover {
+  background-color: var(--hover-color);
+}
+
+/* Cells */
+.custom-table td {
+  padding: 12px 16px;
+  vertical-align: middle;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Actions column */
+.actions-header {
+  text-align: right;
+}
+
+.actions-cell {
+  text-align: right;
+  white-space: nowrap;
+}
+
+/* Responsive tweaks */
+@media (max-width: 768px) {
+  .custom-table th,
+  .custom-table td {
+    padding: 10px 12px;
+    font-size: 13px;
+  }
+}

package/dist/components/Table/Table.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import "./Table.css";
+export interface TableProps {
+    columns: string[];
+    data: Record<string, any>[];
+    renderActions?: (row: Record<string, any>, rowIndex: number) => React.ReactNode;
+    hoverColor?: string;
+    headColor?: string;
+    headTextColor?: string;
+    alternateRowColor?: string;
+    lines?: boolean;
+    style?: React.CSSProperties;
+}
+export declare const Table: React.FC<TableProps>;

package/dist/components/Table/Table.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./Table.css";
+export const Table = ({ columns, data, renderActions, hoverColor = "#f9fafb", headColor = "#f3f4f6", headTextColor = "#000000", alternateRowColor = "#ffffff", lines = true, style, }) => {
+    return (_jsx("div", { className: "table-wrapper", style: style, children: _jsxs("table", { className: `custom-table ${lines ? "with-lines" : "no-lines"}`, style: {
+                "--hover-color": hoverColor,
+                "--head-color": headColor,
+                "--head-text-color": headTextColor,
+                "--alternate-row-color": alternateRowColor,
+            }, children: [_jsx("thead", { children: _jsxs("tr", { children: [columns.map((col, i) => (_jsx("th", { children: col }, i))), renderActions && _jsx("th", { className: "actions-header", children: "Actions" })] }) }), _jsx("tbody", { children: data.map((row, rowIndex) => (_jsxs("tr", { children: [columns.map((col, i) => (_jsx("td", { children: row[col] }, i))), renderActions && (_jsx("td", { className: "actions-cell", children: renderActions(row, rowIndex) }))] }, rowIndex))) })] }) }));
+};

package/dist/index.d.ts

@@ -13,3 +13,15 @@ export { DatePicker2 } from "./components/DatePicker2/DatePicker2";
 export type { DatePicker2Props, DateValue } from "./components/DatePicker2/DatePicker2";
 export { DatePicker } from "./components/DatePicker/DatePicker";
 export type { DatePickerProps, DatePickerValue } from "./components/DatePicker/DatePicker";
+export { SlidingPanelBottom } from "./components/SlidingPanelBottom/SlidingPanelBottom";
+export type { SlidingPanelBottomProps } from "./components/SlidingPanelBottom/SlidingPanelBottom";
+export { Card } from "./components/Card/Card";
+export type { CardProps } from "./components/Card/Card";
+export { Table } from "./components/Table/Table";
+export type { TableProps } from "./components/Table/Table";
+export { ExpandablePanel } from "./components/ExpandablePanel/ExpandablePanel";
+export type { ExpandablePanelProps, ExpandablePanelItem } from "./components/ExpandablePanel/ExpandablePanel";
+export { Accordion } from "./components/Accordion/Accordion";
+export type { AccordionProps } from "./components/Accordion/Accordion";
+export { Navbar } from "./components/Navbar/Navbar";
+export type { NavbarProps, NavbarItem } from "./components/Navbar/Navbar";

package/dist/index.js

@@ -6,3 +6,9 @@ export { PhoneInput } from "./components/PhoneInput/PhoneInput";
 export { Dropdown } from "./components/Dropdown/Dropdown";
 export { DatePicker2 } from "./components/DatePicker2/DatePicker2";
 export { DatePicker } from "./components/DatePicker/DatePicker";
+export { SlidingPanelBottom } from "./components/SlidingPanelBottom/SlidingPanelBottom";
+export { Card } from "./components/Card/Card";
+export { Table } from "./components/Table/Table";
+export { ExpandablePanel } from "./components/ExpandablePanel/ExpandablePanel";
+export { Accordion } from "./components/Accordion/Accordion";
+export { Navbar } from "./components/Navbar/Navbar";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ml-ui-lib",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",