uiplex 1.3.0 → 1.4.0

package/README.md

@@ -323,6 +323,26 @@ import { Link } from 'uiplex';
 </Link>
 ```
 
+### Breadcrumb
+
+Breadcrumb navigation component for showing the current page location.
+
+```tsx
+import { Breadcrumb } from 'uiplex';
+
+<Breadcrumb
+  items={[
+    { label: "Home", href: "/" },
+    { label: "Products", href: "/products" },
+    { label: "Electronics", href: "/products/electronics" },
+    { label: "Laptops" }
+  ]}
+  separator="/"
+/>
+```
+
+**Key Props:** `items` (BreadcrumbItem[]), `separator` (string | React.ReactNode)
+
 ### Layout Components
 
 **Box** - Versatile container component
@@ -349,7 +369,7 @@ import { Link } from 'uiplex';
 
 **Text** - Typography component
 ```tsx
-<Text size="lg" weight="bold" color="primary">Heading</Text>
+<Text size="lg" weight="bold" variant="primary">Heading</Text>
 ```
 
 ## Hooks

package/dist/Breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import "./Breadcrumb.css";
+export interface BreadcrumbItem {
+    label: string;
+    href?: string;
+    onClick?: () => void;
+}
+export interface BreadcrumbProps extends Omit<React.HTMLAttributes<HTMLElement>, "style"> {
+    items: BreadcrumbItem[];
+    separator?: string | React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const Breadcrumb: React.FC<BreadcrumbProps>;
+//# sourceMappingURL=Breadcrumb.d.ts.map

package/dist/Breadcrumb/Breadcrumb.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb.d.ts","sourceRoot":"","sources":["../../src/Breadcrumb/Breadcrumb.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,kBAAkB,CAAC;AAE1B,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IACxD,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA2DhD,CAAC"}

package/dist/Breadcrumb/index.d.ts

@@ -0,0 +1,3 @@
+export { Breadcrumb } from "./Breadcrumb";
+export type { BreadcrumbProps, BreadcrumbItem } from "./Breadcrumb";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Breadcrumb/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC"}

package/dist/Text/Text.d.ts

@@ -2,14 +2,15 @@ import React from "react";
 import "./Text.css";
 export type TextSize = "sm" | "md" | "lg" | "xl";
 export type TextWeight = "regular" | "medium" | "semibold" | "bold";
-export type TextColor = "primary" | "secondary" | "muted" | "danger" | "success" | "warning";
+export type TextVariant = "primary" | "secondary" | "muted" | "danger" | "success" | "warning";
 export type TextAlign = "left" | "center" | "right";
 export interface TextProps extends Omit<React.HTMLAttributes<HTMLElement>, "style"> {
     as?: keyof JSX.IntrinsicElements;
     size?: TextSize;
     weight?: TextWeight;
-    color?: TextColor;
+    variant?: TextVariant;
     align?: TextAlign;
+    color?: string;
     children: React.ReactNode;
     style?: React.CSSProperties;
 }

package/dist/Text/Text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../src/Text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,YAAY,CAAC;AAEpB,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACjD,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;AACpE,MAAM,MAAM,SAAS,GACjB,SAAS,GACT,WAAW,GACX,OAAO,GACP,QAAQ,GACR,SAAS,GACT,SAAS,CAAC;AACd,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEpD,MAAM,WAAW,SACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IACxD,EAAE,CAAC,EAAE,MAAM,GAAG,CAAC,iBAAiB,CAAC;IACjC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CA6BpC,CAAC"}
+{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../src/Text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,YAAY,CAAC;AAEpB,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACjD,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;AACpE,MAAM,MAAM,WAAW,GACnB,SAAS,GACT,WAAW,GACX,OAAO,GACP,QAAQ,GACR,SAAS,GACT,SAAS,CAAC;AACd,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEpD,MAAM,WAAW,SACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IACxD,EAAE,CAAC,EAAE,MAAM,GAAG,CAAC,iBAAiB,CAAC;IACjC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAmCpC,CAAC"}

package/dist/Text/index.d.ts

@@ -1,3 +1,3 @@
 export { Text } from "./Text";
-export type { TextProps, TextSize, TextWeight, TextColor, TextAlign } from "./Text";
+export type { TextProps, TextSize, TextWeight, TextVariant, TextAlign } from "./Text";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Text/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Text/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC"}

package/dist/index.cjs

@@ -123,19 +123,23 @@ const CheckboxGroup = ({ name, value = [], options, disabled = false, size = "md
     return (jsxRuntime.jsx("div", { className: groupClasses, children: options.map((option, index) => (jsxRuntime.jsx(Checkbox, { name: name, value: option.value, checked: value.includes(option.value), disabled: disabled || option.disabled, label: option.label, description: option.description, size: size, colorScheme: colorScheme, onChange: handleChange }, `${name}-${option.value}-${index}`))) }));
 };
 
-const Text = ({ as = "p", size = "md", weight = "regular", color = "primary", align = "left", className = "", children, style, ...props }) => {
+const Text = ({ as = "p", size = "md", weight = "regular", variant = "primary", align = "left", color, className = "", children, style, ...props }) => {
     const Component = as;
     const classes = [
         "ui-text",
         `ui-text--${size}`,
         `ui-text--${weight}`,
-        `ui-text--${color}`,
+        `ui-text--${variant}`,
         `ui-text--align-${align}`,
         className,
     ]
         .filter(Boolean)
         .join(" ");
-    return (jsxRuntime.jsx(Component, { className: classes, style: style, ...props, children: children }));
+    const mergedStyle = {
+        ...(color && { color }),
+        ...style,
+    };
+    return (jsxRuntime.jsx(Component, { className: classes, style: mergedStyle, ...props, children: children }));
 };
 
 const ModalOverlay = ({ onClick, className = "", }) => {
@@ -1347,6 +1351,19 @@ const AccordionPanel = ({ children, index = 0, className = "", style, }) => {
     return (jsxRuntime.jsx("div", { id: `accordion-panel-${index}`, role: "region", "aria-labelledby": `accordion-button-${index}`, hidden: !isOpen, className: panelClasses, style: style, children: jsxRuntime.jsx("div", { className: "ui-accordion-panel__content", children: children }) }));
 };
 
+const Breadcrumb = ({ items, separator = "/", className = "", style, ...props }) => {
+    if (!items || items.length === 0) {
+        return null;
+    }
+    const isLastItem = (index) => index === items.length - 1;
+    return (jsxRuntime.jsx("nav", { className: `ui-breadcrumb ${className}`.trim(), style: style, "aria-label": "Breadcrumb", ...props, children: jsxRuntime.jsx("ol", { className: "ui-breadcrumb__list", children: items.map((item, index) => (jsxRuntime.jsxs("li", { className: "ui-breadcrumb__item", children: [item.href || item.onClick ? (jsxRuntime.jsx("a", { href: item.href, onClick: (e) => {
+                            if (item.onClick) {
+                                e.preventDefault();
+                                item.onClick();
+                            }
+                        }, className: `ui-breadcrumb__link ${isLastItem(index) ? "ui-breadcrumb__link--current" : ""}`.trim(), "aria-current": isLastItem(index) ? "page" : undefined, children: item.label })) : (jsxRuntime.jsx("span", { className: `ui-breadcrumb__text ${isLastItem(index) ? "ui-breadcrumb__text--current" : ""}`.trim(), "aria-current": isLastItem(index) ? "page" : undefined, children: item.label })), !isLastItem(index) && (jsxRuntime.jsx("span", { className: "ui-breadcrumb__separator", "aria-hidden": "true", children: separator }))] }, index))) }) }));
+};
+
 const useDisclosure = (defaultIsOpen = false) => {
     const [isOpen, setIsOpen] = React.useState(defaultIsOpen);
     const onOpen = React.useCallback(() => {
@@ -1563,6 +1580,7 @@ exports.AccordionButton = AccordionButton;
 exports.AccordionItem = AccordionItem;
 exports.AccordionPanel = AccordionPanel;
 exports.Box = Box;
+exports.Breadcrumb = Breadcrumb;
 exports.Button = Button;
 exports.Checkbox = Checkbox;
 exports.CheckboxGroup = CheckboxGroup;

package/dist/index.css

@@ -3611,6 +3611,74 @@
 }
 
 
+.ui-breadcrumb {
+  display: flex;
+  align-items: center;
+}
+
+.ui-breadcrumb__list {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  gap: 0.5rem;
+}
+
+.ui-breadcrumb__item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.ui-breadcrumb__link {
+  color: var(--text-secondary, #6b7280);
+  text-decoration: none;
+  transition: color 0.2s ease-in-out;
+  cursor: pointer;
+}
+
+.ui-breadcrumb__link:hover {
+  color: var(--text-primary, #111827);
+  text-decoration: underline;
+}
+
+.ui-breadcrumb__link:focus {
+  outline: 2px solid var(--accent-primary, #bb00ed);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+.ui-breadcrumb__link--current {
+  color: var(--text-primary, #111827);
+  font-weight: 500;
+  cursor: default;
+  pointer-events: none;
+}
+
+.ui-breadcrumb__link--current:hover {
+  text-decoration: none;
+  color: var(--text-primary, #111827);
+}
+
+.ui-breadcrumb__text {
+  color: var(--text-secondary, #6b7280);
+}
+
+.ui-breadcrumb__text--current {
+  color: var(--text-primary, #111827);
+  font-weight: 500;
+}
+
+.ui-breadcrumb__separator {
+  color: var(--text-muted, #9ca3af);
+  user-select: none;
+  display: flex;
+  align-items: center;
+  font-size: 0.875rem;
+}
+
 /* Uiplex Theme Variables */
 
 :root {

package/dist/index.d.ts

@@ -19,6 +19,7 @@ import './Toast/Toast.css';
 import './Popover/Popover.css';
 import './Tabs/Tabs.css';
 import './Accordion/Accordion.css';
+import './Breadcrumb/Breadcrumb.css';
 import './Theme/theme.css';
 export { Button } from './Button';
 export type { ButtonProps } from './Button';
@@ -29,7 +30,7 @@ export type { RadioProps, RadioGroupProps } from './Radio';
 export { Checkbox, CheckboxGroup } from './Checkbox';
 export type { CheckboxProps, CheckboxGroupProps } from './Checkbox';
 export { Text } from './Text';
-export type { TextProps, TextSize, TextWeight, TextColor, TextAlign } from './Text';
+export type { TextProps, TextSize, TextWeight, TextVariant, TextAlign } from './Text';
 export { Modal, ModalOverlay, ModalContent, ModalHeader, ModalBody, ModalFooter, ModalCloseButton, } from './Modal';
 export type { ModalProps, ModalOverlayProps, ModalContentProps, ModalHeaderProps, ModalBodyProps, ModalFooterProps, ModalCloseButtonProps, } from './Modal';
 export { Box } from './Box';
@@ -62,6 +63,8 @@ export { Tabs, TabList, Tab, TabPanels, TabPanel } from './Tabs';
 export type { TabsProps, TabListProps, TabProps, TabPanelsProps, TabPanelProps } from './Tabs';
 export { Accordion, AccordionItem, AccordionButton, AccordionPanel } from './Accordion';
 export type { AccordionProps, AccordionItemProps, AccordionButtonProps, AccordionPanelProps } from './Accordion';
+export { Breadcrumb } from './Breadcrumb';
+export type { BreadcrumbProps, BreadcrumbItem } from './Breadcrumb';
 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

@@ -122,19 +122,23 @@ const CheckboxGroup = ({ name, value = [], options, disabled = false, size = "md
     return (jsx("div", { className: groupClasses, children: options.map((option, index) => (jsx(Checkbox, { name: name, value: option.value, checked: value.includes(option.value), disabled: disabled || option.disabled, label: option.label, description: option.description, size: size, colorScheme: colorScheme, onChange: handleChange }, `${name}-${option.value}-${index}`))) }));
 };
 
-const Text = ({ as = "p", size = "md", weight = "regular", color = "primary", align = "left", className = "", children, style, ...props }) => {
+const Text = ({ as = "p", size = "md", weight = "regular", variant = "primary", align = "left", color, className = "", children, style, ...props }) => {
     const Component = as;
     const classes = [
         "ui-text",
         `ui-text--${size}`,
         `ui-text--${weight}`,
-        `ui-text--${color}`,
+        `ui-text--${variant}`,
         `ui-text--align-${align}`,
         className,
     ]
         .filter(Boolean)
         .join(" ");
-    return (jsx(Component, { className: classes, style: style, ...props, children: children }));
+    const mergedStyle = {
+        ...(color && { color }),
+        ...style,
+    };
+    return (jsx(Component, { className: classes, style: mergedStyle, ...props, children: children }));
 };
 
 const ModalOverlay = ({ onClick, className = "", }) => {
@@ -1346,6 +1350,19 @@ const AccordionPanel = ({ children, index = 0, className = "", style, }) => {
     return (jsx("div", { id: `accordion-panel-${index}`, role: "region", "aria-labelledby": `accordion-button-${index}`, hidden: !isOpen, className: panelClasses, style: style, children: jsx("div", { className: "ui-accordion-panel__content", children: children }) }));
 };
 
+const Breadcrumb = ({ items, separator = "/", className = "", style, ...props }) => {
+    if (!items || items.length === 0) {
+        return null;
+    }
+    const isLastItem = (index) => index === items.length - 1;
+    return (jsx("nav", { className: `ui-breadcrumb ${className}`.trim(), style: style, "aria-label": "Breadcrumb", ...props, children: jsx("ol", { className: "ui-breadcrumb__list", children: items.map((item, index) => (jsxs("li", { className: "ui-breadcrumb__item", children: [item.href || item.onClick ? (jsx("a", { href: item.href, onClick: (e) => {
+                            if (item.onClick) {
+                                e.preventDefault();
+                                item.onClick();
+                            }
+                        }, className: `ui-breadcrumb__link ${isLastItem(index) ? "ui-breadcrumb__link--current" : ""}`.trim(), "aria-current": isLastItem(index) ? "page" : undefined, children: item.label })) : (jsx("span", { className: `ui-breadcrumb__text ${isLastItem(index) ? "ui-breadcrumb__text--current" : ""}`.trim(), "aria-current": isLastItem(index) ? "page" : undefined, children: item.label })), !isLastItem(index) && (jsx("span", { className: "ui-breadcrumb__separator", "aria-hidden": "true", children: separator }))] }, index))) }) }));
+};
+
 const useDisclosure = (defaultIsOpen = false) => {
     const [isOpen, setIsOpen] = useState(defaultIsOpen);
     const onOpen = useCallback(() => {
@@ -1557,4 +1574,4 @@ const ThemeScript = ({ storageKey = "uiplex-theme", defaultTheme = "system" }) =
         } }));
 };
 
-export { Accordion, AccordionButton, AccordionItem, AccordionPanel, Box, Button, Checkbox, CheckboxGroup, 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 };
+export { Accordion, AccordionButton, AccordionItem, AccordionPanel, Box, Breadcrumb, Button, Checkbox, CheckboxGroup, 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.3.0",
+  "version": "1.4.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",