mainbase-ui 1.2.4 → 1.2.5-b

package/README.md

@@ -1,279 +1,35 @@
 # Mainbase UI
 
-Mainbase UI is a React component library built with React and TypeScript.
+A React component library built with React and TypeScript.
 
-The library provides reusable interface components, a customizable theme system,
-CSS variables, and typed component APIs for building web applications.
+Mainbase UI provides reusable interface components, a customizable theme system, CSS variables, and fully typed component APIs for building modern web applications.
 
-## Requirements
-
-- React 18 or higher
-- React DOM 18 or higher
-- TypeScript 5 or higher (recommended)
-
-## Installation
-
-Install the package using npm:
-
-```bash
-npm install mainbase-ui
-
-or using pnpm:
-
-pnpm add mainbase-ui
-
-or using yarn:
-
-yarn add mainbase-ui
-Basic Usage
-
-Import the global styles:
-
-import "mainbase-ui/styles.css";
-
-Import required components:
-
-import {
-  MainbaseProvider,
-  Button,
-} from "mainbase-ui";
-
-Example:
-
-export default function App() {
-  return (
-    <MainbaseProvider>
-      <Button>
-        Click me
-      </Button>
-    </MainbaseProvider>
-  );
-}
-MainbaseProvider
-
-MainbaseProvider is the root configuration component.
-
-It provides:
-
-theme configuration;
-component default values;
-design tokens;
-CSS variables.
-
-Example:
-
-<MainbaseProvider
-  theme={{
-    colors: {
-      primary: "#ff8a1f",
-      primaryHover: "#f47c0f",
-      primaryActive: "#dd6d06",
-    },
-
-    radii: {
-      sm: 4,
-      md: 4,
-      lg: 4,
-      xl: 4,
-      full: 999,
-    },
-  }}
->
-  <App />
-</MainbaseProvider>
-Theme Configuration
-
-The theme system allows changing global interface values.
-
-Supported theme sections:
-
-colors;
-typography;
-radii;
-spacing;
-shadows;
-transitions;
-z-index;
-component defaults.
-
-Example:
+## Features
 
-<MainbaseProvider
-  theme={{
-    typography: {
-      fontFamily:
-        "Manrope, sans-serif",
-    },
+- React 18+ support
+- TypeScript-first API
+- Customizable theme system
+- Design tokens
+- Reusable UI components
+- CSS variables support
+- Accessibility support
+- Tree-shakable component exports
 
-    colors: {
-      primary: "#2563eb",
-    },
-  }}
->
-  <App />
-</MainbaseProvider>
-Colors
+---
 
-Available color tokens:
-
-colors: {
-  primary,
-  primaryHover,
-  primaryActive,
-
-  text,
-  textSecondary,
-  textMuted,
-
-  background,
-  backgroundSecondary,
-
-  border,
-  borderHover,
-
-  success,
-  warning,
-  danger,
-  info
-}
-Border Radius
-
-Global component radius can be configured:
-
-<MainbaseProvider
-  theme={{
-    radii: {
-      sm: 4,
-      md: 4,
-      lg: 4,
-      xl: 4,
-      full: 999,
-    },
-  }}
->
-
-These values are used by components automatically.
-
-Typography
-
-Example:
-
-<MainbaseProvider
-  theme={{
-    typography: {
-      fontFamily:
-        "Manrope, sans-serif",
-    },
-  }}
->
-Components
-
-Mainbase UI includes the following components.
-
-Layout
-Stack
-Group
-Card
-Divider
-Typography
-Text
-Title
-Buttons
-Button
-IconButton
-Inputs
-Input
-Textarea
-PasswordInput
-PinInput
-Select
-FileInput
-DatePicker
-Selection
-Checkbox
-Radio
-Switch
-Feedback
-Alert
-Badge
-Spinner
-Progress
-Skeleton
-Toast
-Navigation
-Tabs
-Accordion
-Pagination
-Overlay
-Modal
-Drawer
-Menu
-Popover
-Tooltip
-User Components
-Avatar
-AvatarGroup
-Component Defaults
-
-Default component settings can be configured through the theme.
-
-Example:
-
-<MainbaseProvider
-  theme={{
-    components: {
-      Button: {
-        size: "lg",
-        variant: "primary",
-      },
-
-      Card: {
-        radius: "md",
-      },
-    },
-  }}
->
-TypeScript Support
-
-Mainbase UI provides TypeScript definitions for all public components.
-
-Example:
-
-import type {
-  ButtonProps,
-  DatePickerProps,
-} from "mainbase-ui";
-CSS Variables
-
-Mainbase UI exposes CSS variables that can be customized.
-
-Example:
-
-:root {
-  --mb-primary: #ff8a1f;
-  --mb-radius: 8px;
-}
-Accessibility
-
-Components are designed with accessibility support:
+## Requirements
 
-keyboard navigation;
-ARIA attributes;
-focus states;
-disabled states.
-Browser Support
+- React `18` or higher
+- React DOM `18` or higher
+- TypeScript `5` or higher (recommended)
 
-Mainbase UI supports modern browsers:
+---
 
-Chrome
-Edge
-Firefox
-Safari
-License
+# Installation
 
-Mainbase UI is distributed under the MIT License.
+Install Mainbase UI using your preferred package manager.
 
-You are free to use, modify, and distribute this software
-according to the terms of the license.
+## npm
 
-See the LICENSE file for full license text.
+```bash
+npm install mainbase-ui

package/dist/index.cjs

@@ -33,8 +33,10 @@ __export(index_exports, {
   Drawer: () => Drawer,
   FileInput: () => FileInput,
   Group: () => Group,
+  Highlight: () => Highlight,
   Icon: () => Icon,
   IconButton: () => IconButton,
+  Image: () => Image,
   Input: () => Input,
   MainbasePortalContext: () => MainbasePortalContext,
   MainbaseProvider: () => MainbaseProvider,
@@ -235,6 +237,10 @@ var defaultMainbaseTheme = {
       size: "md",
       firstDayOfWeek: 1,
       clearable: true
+    },
+    Image: {
+      radius: "md",
+      fit: "cover"
     }
   }
 };
@@ -431,6 +437,10 @@ function mergeTheme(parentTheme, override) {
       DatePicker: {
         ...parentTheme.components.DatePicker,
         ...override.components?.DatePicker
+      },
+      Image: {
+        ...parentTheme.components.Image,
+        ...override.components?.Image
       }
     }
   };
@@ -629,6 +639,11 @@ function Badge({
 // src/components/Button/Button.tsx
 var import_react6 = require("react");
 
+// src/utils/cx.ts
+function cx(...classes) {
+  return classes.filter((value) => Boolean(value)).join(" ");
+}
+
 // src/components/Spinner/Spinner.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
 function Spinner({
@@ -674,42 +689,52 @@ var Button = (0, import_react6.forwardRef)(function Button2({
   type = "button",
   ...props
 }, ref) {
-  const defaults = useComponentDefaults("Button");
+  const defaults = useComponentDefaults(
+    "Button"
+  );
   const resolvedVariant = variant ?? defaults.variant ?? "primary";
   const resolvedSize = size ?? defaults.size ?? "md";
-  const classes = [
-    "mb-button",
-    `mb-button--${resolvedVariant}`,
-    `mb-button--${resolvedSize}`,
-    className
-  ].filter(Boolean).join(" ");
-  const iconSize = {
-    sm: 16,
-    md: 18,
-    lg: 20
-  }[resolvedSize];
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "button",
     {
       ref,
       type,
-      className: classes,
+      className: cx(
+        "mb-button",
+        `mb-button--${resolvedVariant}`,
+        `mb-button--${resolvedSize}`,
+        loading ? "mb-button--loading" : void 0,
+        className
+      ),
       disabled: disabled || loading,
-      "aria-busy": loading || void 0,
       ...props,
       children: [
         loading ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           Spinner,
           {
-            size: 14,
-            thickness: 2,
-            color: "currentColor",
-            trackColor: "transparent",
-            "aria-hidden": "true"
+            size: 16
           }
-        ) : leftSection != null ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { size: iconSize, children: leftSection }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "mb-button__content", children }),
-        !loading && rightSection != null ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { size: iconSize, children: rightSection }) : null
+        ) : leftSection && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "span",
+          {
+            className: "mb-button__icon",
+            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { size: 18, children: leftSection })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "span",
+          {
+            className: "mb-button__label",
+            children
+          }
+        ),
+        rightSection && !loading ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "span",
+          {
+            className: "mb-button__icon",
+            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { size: 18, children: rightSection })
+          }
+        ) : null
       ]
     }
   );
@@ -931,11 +956,6 @@ function useLockScroll(locked = true) {
   }, [locked]);
 }
 
-// src/utils/cx.ts
-function cx(...classes) {
-  return classes.filter((value) => Boolean(value)).join(" ");
-}
-
 // src/components/Portal/Portal.tsx
 var import_react11 = require("react");
 var import_react_dom = require("react-dom");
@@ -6167,8 +6187,79 @@ function DatePicker({
   );
 }
 
-// src/components/Card/Card.tsx
+// src/components/Image/Image.tsx
+var import_react31 = require("react");
 var import_jsx_runtime33 = require("react/jsx-runtime");
+var Image = (0, import_react31.forwardRef)(function Image2({
+  radius,
+  fit,
+  fallback,
+  className = "",
+  src,
+  onError,
+  ...props
+}, ref) {
+  const defaults = useComponentDefaults(
+    "Image"
+  );
+  const [
+    currentSrc,
+    setCurrentSrc
+  ] = (0, import_react31.useState)(
+    src
+  );
+  const resolvedRadius = radius ?? defaults.radius ?? "md";
+  const resolvedFit = fit ?? defaults.fit ?? "cover";
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    "img",
+    {
+      ref,
+      src: currentSrc,
+      className: cx(
+        "mb-image",
+        `mb-image--${resolvedRadius}`,
+        `mb-image--${resolvedFit}`,
+        className
+      ),
+      onError: (event) => {
+        if (fallback && currentSrc !== fallback) {
+          setCurrentSrc(
+            fallback
+          );
+        }
+        onError?.(
+          event
+        );
+      },
+      ...props
+    }
+  );
+});
+
+// src/components/Highlight/Highlight.tsx
+var import_jsx_runtime34 = require("react/jsx-runtime");
+function Highlight({
+  children,
+  color = "primary",
+  className = "",
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    "span",
+    {
+      className: cx(
+        "mb-highlight",
+        `mb-highlight--${color}`,
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+
+// src/components/Card/Card.tsx
+var import_jsx_runtime35 = require("react/jsx-runtime");
 function Card({
   padding,
   radius,
@@ -6190,24 +6281,24 @@ function Card({
     `mb-card--shadow-${resolvedShadow}`,
     className
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
     "div",
     {
       className: classes,
       ...props,
       children: [
-        header != null ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "mb-card__header", children: header }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "mb-card__content", children }),
-        footer != null ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "mb-card__footer", children: footer }) : null
+        header != null ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "mb-card__header", children: header }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "mb-card__content", children }),
+        footer != null ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "mb-card__footer", children: footer }) : null
       ]
     }
   );
 }
 
 // src/components/IconButton/IconButton.tsx
-var import_react31 = require("react");
-var import_jsx_runtime34 = require("react/jsx-runtime");
-var IconButton = (0, import_react31.forwardRef)(function IconButton2({
+var import_react32 = require("react");
+var import_jsx_runtime36 = require("react/jsx-runtime");
+var IconButton = (0, import_react32.forwardRef)(function IconButton2({
   icon,
   label,
   variant,
@@ -6232,7 +6323,7 @@ var IconButton = (0, import_react31.forwardRef)(function IconButton2({
     md: 18,
     lg: 20
   }[resolvedSize];
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     "button",
     {
       ref,
@@ -6242,7 +6333,7 @@ var IconButton = (0, import_react31.forwardRef)(function IconButton2({
       "aria-label": label,
       "aria-busy": loading || void 0,
       ...props,
-      children: loading ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      children: loading ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
         Spinner,
         {
           size: 14,
@@ -6251,13 +6342,13 @@ var IconButton = (0, import_react31.forwardRef)(function IconButton2({
           trackColor: "transparent",
           "aria-hidden": "true"
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon, { size: iconSize, children: icon })
+      ) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Icon, { size: iconSize, children: icon })
     }
   );
 });
 
 // src/components/Input/Input.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 function Input({
   leftSection,
   rightSection,
@@ -6274,9 +6365,9 @@ function Input({
     disabled && "mb-input--disabled",
     className
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: classes, children: [
-    leftSection ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "mb-input__section mb-input__section--left", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Icon, { size: 18, children: leftSection }) }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: classes, children: [
+    leftSection ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "mb-input__section mb-input__section--left", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Icon, { size: 18, children: leftSection }) }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       "input",
       {
         className: "mb-input__control",
@@ -6285,17 +6376,17 @@ function Input({
         ...props
       }
     ),
-    rightSection ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "mb-input__section mb-input__section--right", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Icon, { size: 18, children: rightSection }) }) : null
+    rightSection ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "mb-input__section mb-input__section--right", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Icon, { size: 18, children: rightSection }) }) : null
   ] });
 }
 
 // src/components/Textarea/Textarea.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 function Textarea({
   className = "",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     "textarea",
     {
       className: `mb-textarea ${className}`,
@@ -6305,7 +6396,7 @@ function Textarea({
 }
 
 // src/components/Text/Text.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 function Text({
   as: Component = "p",
   size,
@@ -6334,22 +6425,22 @@ function Text({
     md: 16,
     lg: 18
   }[resolvedSize];
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
     Component,
     {
       className: classes,
       ...props,
       children: [
-        leftSection != null ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Icon, { size: iconSize, children: leftSection }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "mb-text__content", children }),
-        rightSection != null ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Icon, { size: iconSize, children: rightSection }) : null
+        leftSection != null ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Icon, { size: iconSize, children: leftSection }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "mb-text__content", children }),
+        rightSection != null ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Icon, { size: iconSize, children: rightSection }) : null
       ]
     }
   );
 }
 
 // src/components/Title/Title.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 function Title({
   order,
   size,
@@ -6387,15 +6478,15 @@ function Title({
     `mb-title--${color}`,
     className
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
     Component,
     {
       className: classes,
       ...props,
       children: [
-        leftSection != null ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Icon, { size: iconSize, children: leftSection }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "mb-title__content", children }),
-        rightSection != null ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Icon, { size: iconSize, children: rightSection }) : null
+        leftSection != null ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Icon, { size: iconSize, children: leftSection }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "mb-title__content", children }),
+        rightSection != null ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Icon, { size: iconSize, children: rightSection }) : null
       ]
     }
   );
@@ -6415,8 +6506,10 @@ function Title({
   Drawer,
   FileInput,
   Group,
+  Highlight,
   Icon,
   IconButton,
+  Image,
   Input,
   MainbasePortalContext,
   MainbaseProvider,