@grupor5/raya 0.2.21 → 0.2.23

package/dist/organisms/sidebar/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var React3 = require('react');
+var React4 = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var classVarianceAuthority = require('class-variance-authority');
@@ -27,7 +27,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React3__namespace = /*#__PURE__*/_interopNamespace(React3);
+var React4__namespace = /*#__PURE__*/_interopNamespace(React4);
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -89,7 +89,7 @@ var typographyVariants = classVarianceAuthority.cva("font-primary", {
     variant: "body-md"
   }
 });
-var Typography = React3__namespace.forwardRef(
+var Typography = React4__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, variant, as: Component = "p" } = _b, props = __objRest(_b, ["className", "variant", "as"]);
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -205,7 +205,7 @@ var LoadingSpinner = ({
     )
   ] }) });
 };
-var Button = React3.forwardRef((_a, ref) => {
+var Button = React4.forwardRef((_a, ref) => {
   var _b = _a, {
     variant = defaultButtonConfig.variant,
     size = defaultButtonConfig.size,
@@ -242,7 +242,7 @@ var Button = React3.forwardRef((_a, ref) => {
     "onClick"
   ]);
   const isIconOnly = variant === "icon" || !!(!children && (icon || iconLeft || iconRight));
-  const buttonClasses = React3.useMemo(() => {
+  const buttonClasses = React4.useMemo(() => {
     const sizeClasses = getButtonSizeClasses(size, isIconOnly);
     const variantClasses = getButtonVariantClasses(variant, color);
     return cn(
@@ -252,7 +252,7 @@ var Button = React3.forwardRef((_a, ref) => {
       className
     );
   }, [variant, size, color, isIconOnly, className]);
-  const buttonContent = React3.useMemo(() => {
+  const buttonContent = React4.useMemo(() => {
     if (loading) {
       return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: buttonLoadingClasses.container, children: [
         /* @__PURE__ */ jsxRuntime.jsx(LoadingSpinner, { size }),
@@ -261,8 +261,8 @@ var Button = React3.forwardRef((_a, ref) => {
     }
     const iconSizeClass = getButtonIconSize(size);
     const renderIcon = (iconNode) => {
-      if (React3__namespace.default.isValidElement(iconNode)) {
-        return React3__namespace.default.cloneElement(iconNode, {
+      if (React4__namespace.default.isValidElement(iconNode)) {
+        return React4__namespace.default.cloneElement(iconNode, {
           className: cn(iconSizeClass, iconNode.props.className),
           "aria-hidden": true
         });
@@ -278,7 +278,7 @@ var Button = React3.forwardRef((_a, ref) => {
       iconRight && renderIcon(iconRight)
     ] });
   }, [loading, loadingText, isIconOnly, icon, iconLeft, iconRight, children, size]);
-  const accessibilityProps = React3.useMemo(() => {
+  const accessibilityProps = React4.useMemo(() => {
     const props2 = {};
     if (isIconOnly && !ariaLabel) {
       console.warn("Icon-only buttons should have an aria-label for accessibility");
@@ -361,11 +361,61 @@ var Button = React3.forwardRef((_a, ref) => {
   );
 });
 Button.displayName = "Button";
+
+// src/atoms/logo/logo.png
+var logo_default = "../../logo-N622EUTF.png";
+var Logo = React4.forwardRef((_a, ref) => {
+  var _b = _a, {
+    size = 120,
+    variant = "default",
+    wordmarkOnly = false,
+    className,
+    alt = "Manta Seguros Logo",
+    src
+  } = _b, props = __objRest(_b, [
+    "size",
+    "variant",
+    "wordmarkOnly",
+    "className",
+    "alt",
+    "src"
+  ]);
+  const getVariantFilter = () => {
+    switch (variant) {
+      case "white":
+        return "brightness(0) invert(1)";
+      // Convert to white
+      case "dark":
+        return "brightness(0) saturate(100%)";
+      // Convert to black
+      default:
+        return "none";
+    }
+  };
+  const logoStyles = __spreadValues({
+    width: typeof size === "number" ? `${size}px` : size,
+    height: "auto",
+    filter: getVariantFilter(),
+    maxWidth: "100%"
+  }, props.style);
+  const logoSrc = src || logo_default;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "img",
+    __spreadValues({
+      ref,
+      src: logoSrc,
+      alt,
+      className: cn("logo", className),
+      style: logoStyles
+    }, props)
+  );
+});
+Logo.displayName = "Logo";
 var MainNavigationItemComponent = ({ item, isActive, hasActiveSubItem, onNavigate, collapsed = false, currentPath }) => {
   var _a;
-  const [isExpanded, setIsExpanded] = React3__namespace.default.useState(hasActiveSubItem);
+  const [isExpanded, setIsExpanded] = React4__namespace.default.useState(hasActiveSubItem);
   const hasSubItems = item.subItems && item.subItems.length > 0;
-  React3__namespace.default.useEffect(() => {
+  React4__namespace.default.useEffect(() => {
     if (hasActiveSubItem) {
       setIsExpanded(true);
     }
@@ -471,7 +521,7 @@ var FooterMenuItemComponent = ({ item, isActive, onNavigate, collapsed = false }
     }
   );
 };
-var Sidebar = React3__namespace.default.forwardRef(
+var Sidebar = React4__namespace.default.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       brand,
@@ -514,12 +564,19 @@ var Sidebar = React3__namespace.default.forwardRef(
       }, props), {
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(
-            "p-4 border-b border-gray-100 overflow-hidden",
+            "p-4 overflow-hidden",
             collapsed && "px-2"
           ), children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 min-w-0", children: [
-              brand.logo && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0", children: brand.logo }),
-              !collapsed && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1 overflow-hidden", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 mx-auto", children: brand.logo ? brand.logo : /* @__PURE__ */ jsxRuntime.jsx(
+                Logo,
+                {
+                  size: collapsed ? 32 : 180,
+                  variant: "default",
+                  className: "transition-all duration-300"
+                }
+              ) }),
+              !collapsed && brand.logo && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1 overflow-hidden", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "subheading-md", className: "text-gray-900 font-bold truncate block", children: brand.name }),
                 brand.tagline && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body-xs", className: "text-gray-500 truncate block", children: brand.tagline })
               ] })
@@ -558,7 +615,7 @@ var Sidebar = React3__namespace.default.forwardRef(
             item.id
           )) }),
           showFooterMenu && footerMenu.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
-            "p-4 border-t border-gray-100 space-y-2 overflow-hidden",
+            "p-4 space-y-2 overflow-hidden",
             collapsed && "px-2"
           ), children: footerMenu.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
             FooterMenuItemComponent,

package/dist/organisms/sidebar/index.mjs

@@ -1,5 +1,5 @@
-import * as React3 from 'react';
-import React3__default, { forwardRef, useMemo } from 'react';
+import * as React4 from 'react';
+import React4__default, { forwardRef, useMemo } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
@@ -68,7 +68,7 @@ var typographyVariants = cva("font-primary", {
     variant: "body-md"
   }
 });
-var Typography = React3.forwardRef(
+var Typography = React4.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, variant, as: Component = "p" } = _b, props = __objRest(_b, ["className", "variant", "as"]);
     return /* @__PURE__ */ jsx(
@@ -240,8 +240,8 @@ var Button = forwardRef((_a, ref) => {
     }
     const iconSizeClass = getButtonIconSize(size);
     const renderIcon = (iconNode) => {
-      if (React3__default.isValidElement(iconNode)) {
-        return React3__default.cloneElement(iconNode, {
+      if (React4__default.isValidElement(iconNode)) {
+        return React4__default.cloneElement(iconNode, {
           className: cn(iconSizeClass, iconNode.props.className),
           "aria-hidden": true
         });
@@ -340,11 +340,61 @@ var Button = forwardRef((_a, ref) => {
   );
 });
 Button.displayName = "Button";
+
+// src/atoms/logo/logo.png
+var logo_default = "../../logo-N622EUTF.png";
+var Logo = forwardRef((_a, ref) => {
+  var _b = _a, {
+    size = 120,
+    variant = "default",
+    wordmarkOnly = false,
+    className,
+    alt = "Manta Seguros Logo",
+    src
+  } = _b, props = __objRest(_b, [
+    "size",
+    "variant",
+    "wordmarkOnly",
+    "className",
+    "alt",
+    "src"
+  ]);
+  const getVariantFilter = () => {
+    switch (variant) {
+      case "white":
+        return "brightness(0) invert(1)";
+      // Convert to white
+      case "dark":
+        return "brightness(0) saturate(100%)";
+      // Convert to black
+      default:
+        return "none";
+    }
+  };
+  const logoStyles = __spreadValues({
+    width: typeof size === "number" ? `${size}px` : size,
+    height: "auto",
+    filter: getVariantFilter(),
+    maxWidth: "100%"
+  }, props.style);
+  const logoSrc = src || logo_default;
+  return /* @__PURE__ */ jsx(
+    "img",
+    __spreadValues({
+      ref,
+      src: logoSrc,
+      alt,
+      className: cn("logo", className),
+      style: logoStyles
+    }, props)
+  );
+});
+Logo.displayName = "Logo";
 var MainNavigationItemComponent = ({ item, isActive, hasActiveSubItem, onNavigate, collapsed = false, currentPath }) => {
   var _a;
-  const [isExpanded, setIsExpanded] = React3__default.useState(hasActiveSubItem);
+  const [isExpanded, setIsExpanded] = React4__default.useState(hasActiveSubItem);
   const hasSubItems = item.subItems && item.subItems.length > 0;
-  React3__default.useEffect(() => {
+  React4__default.useEffect(() => {
     if (hasActiveSubItem) {
       setIsExpanded(true);
     }
@@ -450,7 +500,7 @@ var FooterMenuItemComponent = ({ item, isActive, onNavigate, collapsed = false }
     }
   );
 };
-var Sidebar = React3__default.forwardRef(
+var Sidebar = React4__default.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       brand,
@@ -493,12 +543,19 @@ var Sidebar = React3__default.forwardRef(
       }, props), {
         children: [
           /* @__PURE__ */ jsxs("div", { className: cn(
-            "p-4 border-b border-gray-100 overflow-hidden",
+            "p-4 overflow-hidden",
             collapsed && "px-2"
           ), children: [
             /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 min-w-0", children: [
-              brand.logo && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: brand.logo }),
-              !collapsed && /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 overflow-hidden", children: [
+              /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 mx-auto", children: brand.logo ? brand.logo : /* @__PURE__ */ jsx(
+                Logo,
+                {
+                  size: collapsed ? 32 : 180,
+                  variant: "default",
+                  className: "transition-all duration-300"
+                }
+              ) }),
+              !collapsed && brand.logo && /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 overflow-hidden", children: [
                 /* @__PURE__ */ jsx(Typography, { variant: "subheading-md", className: "text-gray-900 font-bold truncate block", children: brand.name }),
                 brand.tagline && /* @__PURE__ */ jsx(Typography, { variant: "body-xs", className: "text-gray-500 truncate block", children: brand.tagline })
               ] })
@@ -537,7 +594,7 @@ var Sidebar = React3__default.forwardRef(
             item.id
           )) }),
           showFooterMenu && footerMenu.length > 0 && /* @__PURE__ */ jsx("div", { className: cn(
-            "p-4 border-t border-gray-100 space-y-2 overflow-hidden",
+            "p-4 space-y-2 overflow-hidden",
             collapsed && "px-2"
           ), children: footerMenu.map((item) => /* @__PURE__ */ jsx(
             FooterMenuItemComponent,