uiplex 1.0.2 → 1.1.0

package/dist/Tabs/Tabs.d.ts

@@ -0,0 +1,44 @@
+import React from "react";
+import "./Tabs.css";
+export interface TabsProps {
+    children: React.ReactNode;
+    defaultIndex?: number;
+    index?: number;
+    onChange?: (index: number) => void;
+    variant?: "line" | "enclosed" | "soft-rounded";
+    size?: "sm" | "md" | "lg";
+    colorScheme?: "blue" | "green" | "red" | "yellow" | "purple" | "gray";
+    orientation?: "horizontal" | "vertical";
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const Tabs: React.FC<TabsProps>;
+export interface TabListProps {
+    children: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const TabList: React.FC<TabListProps>;
+export interface TabProps {
+    children: React.ReactNode;
+    index?: number;
+    disabled?: boolean;
+    icon?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const Tab: React.FC<TabProps>;
+export interface TabPanelsProps {
+    children: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const TabPanels: React.FC<TabPanelsProps>;
+export interface TabPanelProps {
+    children: React.ReactNode;
+    index?: number;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const TabPanel: React.FC<TabPanelProps>;
+//# sourceMappingURL=Tabs.d.ts.map

package/dist/Tabs/Tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../src/Tabs/Tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmE,MAAM,OAAO,CAAC;AACxF,OAAO,YAAY,CAAC;AAuBpB,MAAM,WAAW,SAAS;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,cAAc,CAAC;IAC/C,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAC;IACtE,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAmDpC,CAAC;AAGF,MAAM,WAAW,YAAY;IAC3B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAoB1C,CAAC;AAGF,MAAM,WAAW,QAAQ;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,eAAO,MAAM,GAAG,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,CA6FlC,CAAC;AAGF,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAU9C,CAAC;AAGF,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA6B5C,CAAC"}

package/dist/Tabs/index.d.ts

@@ -0,0 +1,3 @@
+export { Tabs, TabList, Tab, TabPanels, TabPanel, } from "./Tabs";
+export type { TabsProps, TabListProps, TabProps, TabPanelsProps, TabPanelProps, } from "./Tabs";
+//# sourceMappingURL=index.d.ts.map

package/dist/Tabs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACJ,OAAO,EACP,GAAG,EACH,SAAS,EACT,QAAQ,GACT,MAAM,QAAQ,CAAC;AAEhB,YAAY,EACV,SAAS,EACT,YAAY,EACZ,QAAQ,EACR,cAAc,EACd,aAAa,GACd,MAAM,QAAQ,CAAC"}

package/dist/index.cjs

@@ -1067,6 +1067,126 @@ const ToastContainerGlobal = () => {
     return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: positionsWithToasts.map((position) => (jsxRuntime.jsx(ToastContainer, { toasts: toastsByPosition[position], position: position, onClose: handleClose }, position))) }));
 };
 
+const TabContext = React.createContext(undefined);
+const useTabContext = () => {
+    const context = React.useContext(TabContext);
+    if (!context) {
+        throw new Error("Tab components must be used within a Tabs component");
+    }
+    return context;
+};
+const Tabs = ({ children, defaultIndex = 0, index: controlledIndex, onChange, variant = "line", size = "md", colorScheme = "blue", orientation = "horizontal", className = "", style, }) => {
+    const [uncontrolledIndex, setUncontrolledIndex] = React.useState(defaultIndex);
+    const isControlled = controlledIndex !== undefined;
+    const activeIndex = isControlled ? controlledIndex : uncontrolledIndex;
+    const setActiveIndex = React.useCallback((newIndex) => {
+        if (!isControlled) {
+            setUncontrolledIndex(newIndex);
+        }
+        onChange?.(newIndex);
+    }, [isControlled, onChange]);
+    const contextValue = {
+        activeIndex,
+        setActiveIndex,
+        variant,
+        size,
+        colorScheme,
+        orientation,
+    };
+    const tabsClasses = [
+        "ui-tabs",
+        `ui-tabs--${orientation}`,
+        `ui-tabs--${variant}`,
+        className,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    return (jsxRuntime.jsx(TabContext.Provider, { value: contextValue, children: jsxRuntime.jsx("div", { className: tabsClasses, style: style, role: "tablist", children: children }) }));
+};
+const TabList = ({ children, className = "", style, }) => {
+    const { orientation } = useTabContext();
+    const tabListClasses = [
+        "ui-tab-list",
+        `ui-tab-list--${orientation}`,
+        className,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    return (jsxRuntime.jsx("div", { className: tabListClasses, style: style, role: "tablist", children: children }));
+};
+const Tab = ({ children, index = 0, disabled = false, icon, className = "", style, }) => {
+    const { activeIndex, setActiveIndex, variant, size, colorScheme } = useTabContext();
+    const tabRef = React.useRef(null);
+    const isActive = activeIndex === index;
+    const handleClick = () => {
+        if (!disabled) {
+            setActiveIndex(index);
+        }
+    };
+    const handleKeyDown = (e) => {
+        if (disabled)
+            return;
+        const tabs = Array.from(document.querySelectorAll(`.ui-tab-list [role="tab"]:not([aria-disabled="true"])`));
+        const currentTabIndex = tabs.findIndex((tab) => tab === tabRef.current);
+        let nextIndex = currentTabIndex;
+        switch (e.key) {
+            case "ArrowRight":
+            case "ArrowDown":
+                e.preventDefault();
+                nextIndex = (currentTabIndex + 1) % tabs.length;
+                break;
+            case "ArrowLeft":
+            case "ArrowUp":
+                e.preventDefault();
+                nextIndex = currentTabIndex - 1 < 0 ? tabs.length - 1 : currentTabIndex - 1;
+                break;
+            case "Home":
+                e.preventDefault();
+                nextIndex = 0;
+                break;
+            case "End":
+                e.preventDefault();
+                nextIndex = tabs.length - 1;
+                break;
+            default:
+                return;
+        }
+        const nextTab = tabs[nextIndex];
+        if (nextTab) {
+            const tabIndex = parseInt(nextTab.getAttribute("data-tab-index") || "0", 10);
+            setActiveIndex(tabIndex);
+            nextTab.focus();
+        }
+    };
+    const tabClasses = [
+        "ui-tab",
+        `ui-tab--${variant}`,
+        `ui-tab--${size}`,
+        `ui-tab--${colorScheme}`,
+        isActive && "ui-tab--active",
+        disabled && "ui-tab--disabled",
+        className,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    return (jsxRuntime.jsxs("button", { ref: tabRef, role: "tab", "aria-selected": isActive, "aria-disabled": disabled, "aria-controls": `tabpanel-${index}`, id: `tab-${index}`, "data-tab-index": index, tabIndex: isActive ? 0 : -1, className: tabClasses, onClick: handleClick, onKeyDown: handleKeyDown, disabled: disabled, style: style, children: [icon && jsxRuntime.jsx("span", { className: "ui-tab__icon", children: icon }), jsxRuntime.jsx("span", { className: "ui-tab__label", children: children })] }));
+};
+const TabPanels = ({ children, className = "", style, }) => {
+    return (jsxRuntime.jsx("div", { className: `ui-tab-panels ${className}`, style: style, children: children }));
+};
+const TabPanel = ({ children, index = 0, className = "", style, }) => {
+    const { activeIndex } = useTabContext();
+    const isActive = activeIndex === index;
+    const tabPanelClasses = [
+        "ui-tab-panel",
+        isActive && "ui-tab-panel--active",
+        className,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    return (jsxRuntime.jsx("div", { role: "tabpanel", id: `tabpanel-${index}`, "aria-labelledby": `tab-${index}`, hidden: !isActive, className: tabPanelClasses, style: style, children: children }));
+};
+
 const useDisclosure = (defaultIsOpen = false) => {
     const [isOpen, setIsOpen] = React.useState(defaultIsOpen);
     const onOpen = React.useCallback(() => {
@@ -1307,6 +1427,11 @@ exports.PopoverHeader = PopoverHeader;
 exports.Radio = Radio;
 exports.RadioGroup = RadioGroup;
 exports.Select = Select;
+exports.Tab = Tab;
+exports.TabList = TabList;
+exports.TabPanel = TabPanel;
+exports.TabPanels = TabPanels;
+exports.Tabs = Tabs;
 exports.Text = Text;
 exports.Textarea = Textarea;
 exports.ThemeProvider = ThemeProvider;

package/dist/index.css

@@ -2693,6 +2693,396 @@
 }
 
 
+/* Tabs Container */
+.ui-tabs {
+  width: 100%;
+  font-family: inherit;
+}
+
+.ui-tabs--horizontal {
+  display: flex;
+  flex-direction: column;
+}
+
+.ui-tabs--vertical {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+}
+
+/* Tab List */
+.ui-tab-list {
+  display: flex;
+  gap: 0.5rem;
+  border-bottom: 1px solid var(--border-primary, #d1d5db);
+  margin-bottom: 1rem;
+}
+
+.ui-tabs--vertical .ui-tab-list {
+  flex-direction: column;
+  border-bottom: none;
+  border-right: 1px solid var(--border-primary, #d1d5db);
+  margin-bottom: 0;
+  margin-right: 1rem;
+  min-width: 150px;
+}
+
+.ui-tabs--enclosed .ui-tab-list {
+  border: 1px solid var(--border-primary, #d1d5db);
+  border-radius: 0.375rem;
+  padding: 0.25rem;
+  background-color: var(--bg-secondary, #f3f4f6);
+  border-bottom: 1px solid var(--border-primary, #d1d5db);
+}
+
+.ui-tabs--soft-rounded .ui-tab-list {
+  border-bottom: none;
+  gap: 0.25rem;
+}
+
+/* Tab Button */
+.ui-tab {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  font-weight: 500;
+  font-size: 0.875rem;
+  color: var(--text-secondary, #6b7280);
+  background-color: transparent;
+  border: none;
+  border-bottom: 2px solid transparent;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  outline: none;
+  position: relative;
+  white-space: nowrap;
+  font-family: inherit;
+}
+
+.ui-tab:hover:not(:disabled) {
+  color: var(--text-primary, #111827);
+  background-color: var(--bg-secondary, #f9fafb);
+}
+
+.ui-tab:focus-visible {
+  outline: 2px solid var(--accent-primary, #bb00ed);
+  outline-offset: 2px;
+  border-radius: 0.25rem;
+}
+
+.ui-tab--active {
+  color: var(--text-primary, #111827);
+  border-bottom-color: var(--accent-primary, #bb00ed);
+}
+
+.ui-tabs--enclosed .ui-tab {
+  border: none;
+  border-radius: 0.25rem;
+  border-bottom: none;
+}
+
+.ui-tabs--enclosed .ui-tab--active {
+  background-color: var(--bg-primary, #ffffff);
+  color: var(--text-primary, #111827);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.ui-tabs--soft-rounded .ui-tab {
+  border: none;
+  border-radius: 0.5rem;
+  border-bottom: none;
+}
+
+.ui-tabs--soft-rounded .ui-tab--active {
+  background-color: var(--bg-secondary, #f3f4f6);
+  color: var(--text-primary, #111827);
+}
+
+.ui-tabs--vertical .ui-tab {
+  justify-content: flex-start;
+  border-bottom: none;
+  border-right: 2px solid transparent;
+  border-radius: 0;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+
+.ui-tabs--vertical .ui-tab--active {
+  border-right-color: var(--accent-primary, #bb00ed);
+  border-bottom-color: transparent;
+}
+
+.ui-tab--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* Color Schemes */
+.ui-tab--blue.ui-tab--active {
+  border-bottom-color: #3b82f6;
+  color: #3b82f6;
+}
+
+.ui-tabs--enclosed .ui-tab--blue.ui-tab--active {
+  background-color: #dbeafe;
+  color: #1e40af;
+}
+
+.ui-tabs--soft-rounded .ui-tab--blue.ui-tab--active {
+  background-color: #dbeafe;
+  color: #1e40af;
+}
+
+.ui-tabs--vertical .ui-tab--blue.ui-tab--active {
+  border-right-color: #3b82f6;
+  color: #3b82f6;
+}
+
+.ui-tab--green.ui-tab--active {
+  border-bottom-color: #10b981;
+  color: #10b981;
+}
+
+.ui-tabs--enclosed .ui-tab--green.ui-tab--active {
+  background-color: #d1fae5;
+  color: #065f46;
+}
+
+.ui-tabs--soft-rounded .ui-tab--green.ui-tab--active {
+  background-color: #d1fae5;
+  color: #065f46;
+}
+
+.ui-tabs--vertical .ui-tab--green.ui-tab--active {
+  border-right-color: #10b981;
+  color: #10b981;
+}
+
+.ui-tab--red.ui-tab--active {
+  border-bottom-color: #ef4444;
+  color: #ef4444;
+}
+
+.ui-tabs--enclosed .ui-tab--red.ui-tab--active {
+  background-color: #fee2e2;
+  color: #991b1b;
+}
+
+.ui-tabs--soft-rounded .ui-tab--red.ui-tab--active {
+  background-color: #fee2e2;
+  color: #991b1b;
+}
+
+.ui-tabs--vertical .ui-tab--red.ui-tab--active {
+  border-right-color: #ef4444;
+  color: #ef4444;
+}
+
+.ui-tab--yellow.ui-tab--active {
+  border-bottom-color: #f59e0b;
+  color: #f59e0b;
+}
+
+.ui-tabs--enclosed .ui-tab--yellow.ui-tab--active {
+  background-color: #fef3c7;
+  color: #92400e;
+}
+
+.ui-tabs--soft-rounded .ui-tab--yellow.ui-tab--active {
+  background-color: #fef3c7;
+  color: #92400e;
+}
+
+.ui-tabs--vertical .ui-tab--yellow.ui-tab--active {
+  border-right-color: #f59e0b;
+  color: #f59e0b;
+}
+
+.ui-tab--purple.ui-tab--active {
+  border-bottom-color: #8b5cf6;
+  color: #8b5cf6;
+}
+
+.ui-tabs--enclosed .ui-tab--purple.ui-tab--active {
+  background-color: #ede9fe;
+  color: #5b21b6;
+}
+
+.ui-tabs--soft-rounded .ui-tab--purple.ui-tab--active {
+  background-color: #ede9fe;
+  color: #5b21b6;
+}
+
+.ui-tabs--vertical .ui-tab--purple.ui-tab--active {
+  border-right-color: #8b5cf6;
+  color: #8b5cf6;
+}
+
+.ui-tab--gray.ui-tab--active {
+  border-bottom-color: #6b7280;
+  color: #6b7280;
+}
+
+.ui-tabs--enclosed .ui-tab--gray.ui-tab--active {
+  background-color: #f3f4f6;
+  color: #374151;
+}
+
+.ui-tabs--soft-rounded .ui-tab--gray.ui-tab--active {
+  background-color: #f3f4f6;
+  color: #374151;
+}
+
+.ui-tabs--vertical .ui-tab--gray.ui-tab--active {
+  border-right-color: #6b7280;
+  color: #6b7280;
+}
+
+/* Tab Icon */
+.ui-tab__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1rem;
+}
+
+.ui-tab__label {
+  display: flex;
+  align-items: center;
+}
+
+/* Sizes */
+.ui-tab--sm {
+  padding: 0.375rem 0.75rem;
+  font-size: 0.75rem;
+  min-height: 2rem;
+}
+
+.ui-tab--md {
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  min-height: 2.5rem;
+}
+
+.ui-tab--lg {
+  padding: 0.75rem 1.5rem;
+  font-size: 1rem;
+  min-height: 3rem;
+}
+
+/* Tab Panels */
+.ui-tab-panels {
+  width: 100%;
+}
+
+/* Tab Panel */
+.ui-tab-panel {
+  display: none;
+  padding: 1rem 0;
+  animation: fadeIn 0.2s ease-in-out;
+}
+
+.ui-tab-panel--active {
+  display: block;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Dark mode support */
+[data-theme="dark"] .ui-tab-list {
+  border-color: var(--border-primary, #374151);
+}
+
+[data-theme="dark"] .ui-tabs--enclosed .ui-tab-list {
+  background-color: var(--bg-secondary, #1f2937);
+  border-color: var(--border-primary, #374151);
+}
+
+[data-theme="dark"] .ui-tabs--enclosed .ui-tab--active {
+  background-color: var(--bg-primary, #111827);
+}
+
+[data-theme="dark"] .ui-tabs--soft-rounded .ui-tab--active {
+  background-color: var(--bg-secondary, #1f2937);
+}
+
+[data-theme="dark"] .ui-tab:hover:not(:disabled) {
+  background-color: var(--bg-secondary, #1f2937);
+}
+
+[data-theme="dark"] .ui-tabs--enclosed .ui-tab--blue.ui-tab--active {
+  background-color: #1e3a8a;
+  color: #93c5fd;
+}
+
+[data-theme="dark"] .ui-tabs--soft-rounded .ui-tab--blue.ui-tab--active {
+  background-color: #1e3a8a;
+  color: #93c5fd;
+}
+
+[data-theme="dark"] .ui-tabs--enclosed .ui-tab--green.ui-tab--active {
+  background-color: #064e3b;
+  color: #6ee7b7;
+}
+
+[data-theme="dark"] .ui-tabs--soft-rounded .ui-tab--green.ui-tab--active {
+  background-color: #064e3b;
+  color: #6ee7b7;
+}
+
+[data-theme="dark"] .ui-tabs--enclosed .ui-tab--red.ui-tab--active {
+  background-color: #7f1d1d;
+  color: #fca5a5;
+}
+
+[data-theme="dark"] .ui-tabs--soft-rounded .ui-tab--red.ui-tab--active {
+  background-color: #7f1d1d;
+  color: #fca5a5;
+}
+
+[data-theme="dark"] .ui-tabs--enclosed .ui-tab--yellow.ui-tab--active {
+  background-color: #78350f;
+  color: #fde68a;
+}
+
+[data-theme="dark"] .ui-tabs--soft-rounded .ui-tab--yellow.ui-tab--active {
+  background-color: #78350f;
+  color: #fde68a;
+}
+
+[data-theme="dark"] .ui-tabs--enclosed .ui-tab--purple.ui-tab--active {
+  background-color: #4c1d95;
+  color: #c4b5fd;
+}
+
+[data-theme="dark"] .ui-tabs--soft-rounded .ui-tab--purple.ui-tab--active {
+  background-color: #4c1d95;
+  color: #c4b5fd;
+}
+
+[data-theme="dark"] .ui-tabs--enclosed .ui-tab--gray.ui-tab--active {
+  background-color: var(--bg-secondary, #1f2937);
+  color: var(--text-primary, #f9fafb);
+}
+
+[data-theme="dark"] .ui-tabs--soft-rounded .ui-tab--gray.ui-tab--active {
+  background-color: var(--bg-secondary, #1f2937);
+  color: var(--text-primary, #f9fafb);
+}
+
+
 /* Uiplex Theme Variables */
 
 :root {

package/dist/index.d.ts

@@ -16,6 +16,7 @@ import './CircularProgress/CircularProgress.css';
 import './Tooltip/Tooltip.css';
 import './Toast/Toast.css';
 import './Popover/Popover.css';
+import './Tabs/Tabs.css';
 import './Theme/theme.css';
 export { Button } from './Button';
 export type { ButtonProps } from './Button';
@@ -53,6 +54,8 @@ export { Popover, PopoverContent, PopoverHeader, PopoverBody, PopoverFooter, Pop
 export type { PopoverProps, PopoverPlacement, PopoverContentProps, PopoverHeaderProps, PopoverBodyProps, PopoverFooterProps, PopoverCloseButtonProps, } from './Popover';
 export { Toast, ToastComponent, ToastContainer, ToastContainerGlobal } from './Toast';
 export type { ToastProps, ToastVariant, ToastPosition, ToastContainerProps, ToastOptions } from './Toast';
+export { Tabs, TabList, Tab, TabPanels, TabPanel } from './Tabs';
+export type { TabsProps, TabListProps, TabProps, TabPanelsProps, TabPanelProps } from './Tabs';
 export { useDisclosure } from './hooks';
 export type { UseDisclosureReturn } from './hooks';
 export { useOutsideClick } from './hooks';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -1066,6 +1066,126 @@ const ToastContainerGlobal = () => {
     return (jsx(Fragment, { children: positionsWithToasts.map((position) => (jsx(ToastContainer, { toasts: toastsByPosition[position], position: position, onClose: handleClose }, position))) }));
 };
 
+const TabContext = createContext(undefined);
+const useTabContext = () => {
+    const context = useContext(TabContext);
+    if (!context) {
+        throw new Error("Tab components must be used within a Tabs component");
+    }
+    return context;
+};
+const Tabs = ({ children, defaultIndex = 0, index: controlledIndex, onChange, variant = "line", size = "md", colorScheme = "blue", orientation = "horizontal", className = "", style, }) => {
+    const [uncontrolledIndex, setUncontrolledIndex] = useState(defaultIndex);
+    const isControlled = controlledIndex !== undefined;
+    const activeIndex = isControlled ? controlledIndex : uncontrolledIndex;
+    const setActiveIndex = useCallback((newIndex) => {
+        if (!isControlled) {
+            setUncontrolledIndex(newIndex);
+        }
+        onChange?.(newIndex);
+    }, [isControlled, onChange]);
+    const contextValue = {
+        activeIndex,
+        setActiveIndex,
+        variant,
+        size,
+        colorScheme,
+        orientation,
+    };
+    const tabsClasses = [
+        "ui-tabs",
+        `ui-tabs--${orientation}`,
+        `ui-tabs--${variant}`,
+        className,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    return (jsx(TabContext.Provider, { value: contextValue, children: jsx("div", { className: tabsClasses, style: style, role: "tablist", children: children }) }));
+};
+const TabList = ({ children, className = "", style, }) => {
+    const { orientation } = useTabContext();
+    const tabListClasses = [
+        "ui-tab-list",
+        `ui-tab-list--${orientation}`,
+        className,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    return (jsx("div", { className: tabListClasses, style: style, role: "tablist", children: children }));
+};
+const Tab = ({ children, index = 0, disabled = false, icon, className = "", style, }) => {
+    const { activeIndex, setActiveIndex, variant, size, colorScheme } = useTabContext();
+    const tabRef = useRef(null);
+    const isActive = activeIndex === index;
+    const handleClick = () => {
+        if (!disabled) {
+            setActiveIndex(index);
+        }
+    };
+    const handleKeyDown = (e) => {
+        if (disabled)
+            return;
+        const tabs = Array.from(document.querySelectorAll(`.ui-tab-list [role="tab"]:not([aria-disabled="true"])`));
+        const currentTabIndex = tabs.findIndex((tab) => tab === tabRef.current);
+        let nextIndex = currentTabIndex;
+        switch (e.key) {
+            case "ArrowRight":
+            case "ArrowDown":
+                e.preventDefault();
+                nextIndex = (currentTabIndex + 1) % tabs.length;
+                break;
+            case "ArrowLeft":
+            case "ArrowUp":
+                e.preventDefault();
+                nextIndex = currentTabIndex - 1 < 0 ? tabs.length - 1 : currentTabIndex - 1;
+                break;
+            case "Home":
+                e.preventDefault();
+                nextIndex = 0;
+                break;
+            case "End":
+                e.preventDefault();
+                nextIndex = tabs.length - 1;
+                break;
+            default:
+                return;
+        }
+        const nextTab = tabs[nextIndex];
+        if (nextTab) {
+            const tabIndex = parseInt(nextTab.getAttribute("data-tab-index") || "0", 10);
+            setActiveIndex(tabIndex);
+            nextTab.focus();
+        }
+    };
+    const tabClasses = [
+        "ui-tab",
+        `ui-tab--${variant}`,
+        `ui-tab--${size}`,
+        `ui-tab--${colorScheme}`,
+        isActive && "ui-tab--active",
+        disabled && "ui-tab--disabled",
+        className,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    return (jsxs("button", { ref: tabRef, role: "tab", "aria-selected": isActive, "aria-disabled": disabled, "aria-controls": `tabpanel-${index}`, id: `tab-${index}`, "data-tab-index": index, tabIndex: isActive ? 0 : -1, className: tabClasses, onClick: handleClick, onKeyDown: handleKeyDown, disabled: disabled, style: style, children: [icon && jsx("span", { className: "ui-tab__icon", children: icon }), jsx("span", { className: "ui-tab__label", children: children })] }));
+};
+const TabPanels = ({ children, className = "", style, }) => {
+    return (jsx("div", { className: `ui-tab-panels ${className}`, style: style, children: children }));
+};
+const TabPanel = ({ children, index = 0, className = "", style, }) => {
+    const { activeIndex } = useTabContext();
+    const isActive = activeIndex === index;
+    const tabPanelClasses = [
+        "ui-tab-panel",
+        isActive && "ui-tab-panel--active",
+        className,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    return (jsx("div", { role: "tabpanel", id: `tabpanel-${index}`, "aria-labelledby": `tab-${index}`, hidden: !isActive, className: tabPanelClasses, style: style, children: children }));
+};
+
 const useDisclosure = (defaultIsOpen = false) => {
     const [isOpen, setIsOpen] = useState(defaultIsOpen);
     const onOpen = useCallback(() => {
@@ -1277,4 +1397,4 @@ const ThemeScript = ({ storageKey = "uiplex-theme", defaultTheme = "system" }) =
         } }));
 };
 
-export { Box, Button, CircularProgress, CircularProgressLabel, Flex, FormControl, FormErrorMessage, FormLabel, Grid, IconButton, Input, Link, Loader, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, Popover, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, Radio, RadioGroup, Select, Text, Textarea, ThemeProvider, ThemeScript, ThemeToggle, ToastStatic as Toast, Toast as ToastComponent, ToastContainer, ToastContainerGlobal, Tooltip, useDisclosure, useOutsideClick, useTheme };
+export { Box, Button, CircularProgress, CircularProgressLabel, Flex, FormControl, FormErrorMessage, FormLabel, Grid, IconButton, Input, Link, Loader, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, Popover, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, Radio, RadioGroup, Select, Tab, TabList, TabPanel, TabPanels, Tabs, Text, Textarea, ThemeProvider, ThemeScript, ThemeToggle, ToastStatic as Toast, Toast as ToastComponent, ToastContainer, ToastContainerGlobal, Tooltip, useDisclosure, useOutsideClick, useTheme };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uiplex",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "A modern React component library with TypeScript support, featuring Button, Loader, Radio components and a comprehensive theme system",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",