aloha-ui-library 0.2.3 → 0.2.4

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React, { useRef, useState, useEffect } from 'react';
-import { Search, Bell, X, AlertCircle, RefreshCw, Loader2 } from 'lucide-react';
+import React, { useState, useEffect, useRef } from 'react';
+import { AlertCircle, EyeOff, Eye, Search, Bell, X, RefreshCw, Info, CheckCircle, Loader2 } from 'lucide-react';
 import { Link as Link$1 } from 'react-router-dom';
 
 function _arrayLikeToArray(r, a) {
@@ -2762,7 +2762,7 @@ var themeVars = {
   primary: 'var(--theme-primary)'
 };
 
-var _excluded$o = ["className", "variant", "size", "loading", "disabled", "color", "textColor", "borderColor", "icon", "children", "style", "borderWidth"];
+var _excluded$q = ["className", "variant", "size", "loading", "disabled", "color", "textColor", "borderColor", "icon", "children", "style", "borderWidth"];
 var buttonVariants = cva('inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50', {
   variants: {
     variant: {
@@ -2799,7 +2799,7 @@ var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     style = _ref.style,
     _ref$borderWidth = _ref.borderWidth,
     borderWidth = _ref$borderWidth === void 0 ? 1 : _ref$borderWidth,
-    props = _objectWithoutProperties(_ref, _excluded$o);
+    props = _objectWithoutProperties(_ref, _excluded$q);
   var customStyle = {};
   // Aplicar color de fondo si se especifica
   if (color) {
@@ -2858,7 +2858,7 @@ var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 Button.displayName = 'Button';
 
-var _excluded$n = ["className", "children", "font", "weight", "color", "style"],
+var _excluded$p = ["className", "children", "font", "weight", "color", "style"],
   _excluded2$3 = ["className", "children", "font", "weight", "color", "style"],
   _excluded3$2 = ["className", "children", "font", "weight", "color", "style"],
   _excluded4$1 = ["className", "children", "font", "weight", "color", "style"],
@@ -2897,7 +2897,7 @@ var H1 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     weight = _ref.weight,
     color = _ref.color,
     style = _ref.style,
-    props = _objectWithoutProperties(_ref, _excluded$n);
+    props = _objectWithoutProperties(_ref, _excluded$p);
   return jsx("h1", _objectSpread2(_objectSpread2({
     ref: ref,
     className: cn('scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl', fontFamilyClasses[font], weight && fontWeightClasses[weight], className),
@@ -3052,7 +3052,7 @@ var Muted = /*#__PURE__*/React.forwardRef(function (_ref9, ref) {
 });
 Muted.displayName = 'Muted';
 
-var _excluded$m = ["className", "size", "borderRadius", "showBorder", "backgroundColor", "borderColor", "shadow", "padding", "margin", "style"],
+var _excluded$o = ["className", "size", "borderRadius", "showBorder", "backgroundColor", "borderColor", "shadow", "padding", "margin", "style"],
   _excluded2$2 = ["className", "padding", "margin", "style"],
   _excluded3$1 = ["className", "font", "weight", "descriptionColor", "small", "children"],
   _excluded4 = ["color"],
@@ -3151,7 +3151,7 @@ var Card = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     padding = _ref.padding,
     margin = _ref.margin,
     style = _ref.style,
-    props = _objectWithoutProperties(_ref, _excluded$m);
+    props = _objectWithoutProperties(_ref, _excluded$o);
   return jsx("div", _objectSpread2({
     ref: ref,
     className: cn('text-card-foreground', sizeClasses$2[size], borderRadiusClasses[borderRadius], showBorder ? 'border' : '', showBorder ? getBorderColor(borderColor) : '', getBackgroundColor(backgroundColor), shadow ? 'shadow-sm' : '', className),
@@ -3264,7 +3264,7 @@ var CardFooter = /*#__PURE__*/React.forwardRef(function (_ref6, ref) {
 });
 CardFooter.displayName = 'CardFooter';
 
-var _excluded$l = ["className", "src", "alt", "fallback", "size"];
+var _excluded$n = ["className", "src", "alt", "fallback", "size"];
 var Avatar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _alt$charAt;
   var className = _ref.className,
@@ -3273,7 +3273,7 @@ var Avatar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     fallback = _ref.fallback,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'md' : _ref$size,
-    props = _objectWithoutProperties(_ref, _excluded$l);
+    props = _objectWithoutProperties(_ref, _excluded$n);
   var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     imageFailed = _React$useState2[0],
@@ -3306,7 +3306,7 @@ var Avatar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 Avatar.displayName = 'Avatar';
 
-var _excluded$k = ["className", "variant"];
+var _excluded$m = ["className", "variant"];
 var badgeVariants = cva('inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2', {
   variants: {
     variant: {
@@ -3323,7 +3323,7 @@ var badgeVariants = cva('inline-flex items-center rounded-full border px-2.5 py-
 function Badge(_ref) {
   var className = _ref.className,
     variant = _ref.variant,
-    props = _objectWithoutProperties(_ref, _excluded$k);
+    props = _objectWithoutProperties(_ref, _excluded$m);
   return jsx("div", _objectSpread2({
     className: cn(badgeVariants({
       variant: variant
@@ -3331,7 +3331,33 @@ function Badge(_ref) {
   }, props));
 }
 
-var _excluded$j = ["className", "type", "label", "helperText", "required", "id"];
+var _excluded$l = ["className", "error"];
+var FormError = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    error = _ref.error,
+    props = _objectWithoutProperties(_ref, _excluded$l);
+  if (!error) return null;
+  return jsxs("div", _objectSpread2(_objectSpread2({
+    ref: ref,
+    className: cn('flex items-center gap-1.5 mt-1.5', className)
+  }, props), {}, {
+    children: [jsx(AlertCircle, {
+      className: "w-4 h-4",
+      style: {
+        color: colors.coral
+      }
+    }), jsx(P, {
+      className: "text-sm m-0 font-medium",
+      style: {
+        color: colors.coral
+      },
+      children: error
+    })]
+  }));
+});
+FormError.displayName = 'FormError';
+
+var _excluded$k = ["className", "type", "label", "helperText", "required", "id", "error"];
 var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     type = _ref.type,
@@ -3339,7 +3365,18 @@ var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     helperText = _ref.helperText,
     required = _ref.required,
     id = _ref.id,
-    props = _objectWithoutProperties(_ref, _excluded$j);
+    error = _ref.error,
+    props = _objectWithoutProperties(_ref, _excluded$k);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    showPassword = _useState2[0],
+    setShowPassword = _useState2[1];
+  var isPassword = type === 'password';
+  var inputType = isPassword ? showPassword ? 'text' : 'password' : type;
+  // Determine if type was explicitly set to text by parent but it's meant to be a password
+  // Wait, the parent might already be doing `type={showPassword ? 'text' : 'password'}`
+  // If we handle it internally, we check if `type === 'password'`. If the parent does that, our internal toggle wouldn't work when parent overrides.
+  // However, since we now handle it internally, parents won't need to control the toggle.
   var inputId = id || "input-".concat(Math.random().toString(36).substr(2, 9));
   return jsxs("div", {
     className: "w-full",
@@ -3357,27 +3394,47 @@ var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         className: "text-xs text-gray-500 m-0 mt-1 [&:not(:first-child)]:mt-1",
         children: helperText
       })]
-    }), jsx("input", _objectSpread2({
-      type: type,
-      id: inputId,
-      className: cn('flex h-10 w-full rounded-lg border-2 px-3 py-2 text-sm transition-all', 'placeholder:text-gray-500', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2', 'disabled:cursor-not-allowed disabled:opacity-50', className),
-      style: {
-        borderColor: colors.piedra,
-        backgroundColor: colors.koala
-      },
-      ref: ref,
-      required: required
-    }, props))]
+    }), jsxs("div", {
+      className: "relative",
+      children: [jsx("input", _objectSpread2({
+        type: inputType,
+        id: inputId,
+        className: cn('flex h-10 w-full rounded-lg border-2 px-3 py-2 text-sm transition-all', 'placeholder:text-gray-500', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2', 'disabled:cursor-not-allowed disabled:opacity-50', isPassword ? 'pr-10' : '',
+        // make room for the eye icon
+        error ? 'border-coral/50' : '',
+        // simple error indication on border
+        className),
+        style: {
+          borderColor: error ? colors.coral : colors.piedra,
+          backgroundColor: colors.koala
+        },
+        ref: ref,
+        required: required
+      }, props)), isPassword && jsx("button", {
+        type: "button",
+        className: "absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700 focus:outline-none",
+        onClick: function onClick() {
+          return setShowPassword(!showPassword);
+        },
+        children: showPassword ? jsx(EyeOff, {
+          size: 18
+        }) : jsx(Eye, {
+          size: 18
+        })
+      })]
+    }), error && typeof error === 'string' && jsx(FormError, {
+      error: error
+    })]
   });
 });
 Input.displayName = 'Input';
 
-var _excluded$i = ["className", "label", "id"];
+var _excluded$j = ["className", "label", "id"];
 var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     label = _ref.label,
     id = _ref.id,
-    props = _objectWithoutProperties(_ref, _excluded$i);
+    props = _objectWithoutProperties(_ref, _excluded$j);
   var checkboxId = id || "checkbox-".concat(Math.random().toString(36).substr(2, 9));
   var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -3437,7 +3494,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 Checkbox.displayName = 'Checkbox';
 
-var _excluded$h = ["className", "label", "font", "weight", "labelColor", "id"];
+var _excluded$i = ["className", "label", "font", "weight", "labelColor", "id"];
 var Switch = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     label = _ref.label,
@@ -3445,7 +3502,7 @@ var Switch = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     weight = _ref.weight,
     labelColor = _ref.labelColor,
     id = _ref.id,
-    props = _objectWithoutProperties(_ref, _excluded$h);
+    props = _objectWithoutProperties(_ref, _excluded$i);
   var switchId = id || "switch-".concat(Math.random().toString(36).substr(2, 9));
   return jsxs("div", {
     className: "flex items-center space-x-3",
@@ -3471,11 +3528,11 @@ var Switch = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 Switch.displayName = 'Switch';
 
-var _excluded$g = ["className", "onSearch"];
+var _excluded$h = ["className", "onSearch"];
 var SearchInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onSearch = _ref.onSearch,
-    props = _objectWithoutProperties(_ref, _excluded$g);
+    props = _objectWithoutProperties(_ref, _excluded$h);
   var handleKeyDown = function handleKeyDown(e) {
     if (e.key === 'Enter' && onSearch) {
       onSearch(e.currentTarget.value);
@@ -3495,7 +3552,7 @@ var SearchInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 SearchInput.displayName = 'SearchInput';
 
-var _excluded$f = ["type", "title", "message", "timestamp", "avatar", "read", "onClose", "onClick", "className"];
+var _excluded$g = ["type", "title", "message", "timestamp", "avatar", "read", "onClose", "onClick", "className"];
 var Notification = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var type = _ref.type,
     title = _ref.title,
@@ -3507,7 +3564,7 @@ var Notification = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onClose = _ref.onClose,
     onClick = _ref.onClick,
     className = _ref.className,
-    props = _objectWithoutProperties(_ref, _excluded$f);
+    props = _objectWithoutProperties(_ref, _excluded$g);
   var typeColors = {
     like: 'text-red-500',
     comment: 'text-blue-500',
@@ -3558,7 +3615,7 @@ var Notification = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 Notification.displayName = 'Notification';
 
-var _excluded$e = ["className", "text", "component", "font", "weight", "textColor", "lineColor", "lineThickness", "avatars", "avatarRingColor", "rightSlot"];
+var _excluded$f = ["className", "text", "component", "font", "weight", "textColor", "lineColor", "lineThickness", "avatars", "avatarRingColor", "rightSlot"];
 // ── Color de la línea (herencia del original) ─────────────────────
 var getLineColorClass = function getLineColorClass(color) {
   if (!color || color === 'default') return 'bg-gray-300';
@@ -3597,7 +3654,7 @@ var TextDivider = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     avatars = _ref.avatars,
     avatarRingColor = _ref.avatarRingColor,
     rightSlot = _ref.rightSlot,
-    props = _objectWithoutProperties(_ref, _excluded$e);
+    props = _objectWithoutProperties(_ref, _excluded$f);
   var renderText = function renderText() {
     var commonProps = {
       font: font,
@@ -3671,7 +3728,7 @@ var TextDivider = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 TextDivider.displayName = 'TextDivider';
 
-var _excluded$d = ["className", "children", "color", "hoverColor", "underline", "external"],
+var _excluded$e = ["className", "children", "color", "hoverColor", "underline", "external"],
   _excluded2$1 = ["to"],
   _excluded3 = ["href", "target", "rel"];
 var getColorClass = function getColorClass(color) {
@@ -3735,7 +3792,7 @@ var Link = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     underline = _ref$underline === void 0 ? 'hover' : _ref$underline,
     _ref$external = _ref.external,
     external = _ref$external === void 0 ? false : _ref$external,
-    props = _objectWithoutProperties(_ref, _excluded$d);
+    props = _objectWithoutProperties(_ref, _excluded$e);
   var linkClasses = cn('inline-flex items-center font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', getColorClass(color), hoverColor ? '' : getHoverColorClass(color), getUnderlineClass(underline), className);
   // Si tiene la prop "to", usar React Router Link
   if ('to' in props && props.to) {
@@ -3776,7 +3833,7 @@ var Link = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 Link.displayName = 'Link';
 
-var _excluded$c = ["src", "alt", "width", "height", "objectFit", "loading", "fallbackSrc", "onError", "className"];
+var _excluded$d = ["src", "alt", "width", "height", "objectFit", "loading", "fallbackSrc", "onError", "className"];
 var Image = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var src = _ref.src,
     alt = _ref.alt,
@@ -3789,7 +3846,7 @@ var Image = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     fallbackSrc = _ref.fallbackSrc,
     onError = _ref.onError,
     className = _ref.className,
-    props = _objectWithoutProperties(_ref, _excluded$c);
+    props = _objectWithoutProperties(_ref, _excluded$d);
   var _React$useState = React.useState(src),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     imgSrc = _React$useState2[0],
@@ -4028,6 +4085,80 @@ var Error = function Error(_ref) {
   });
 };
 
+var _excluded$c = ["message", "type", "onClose", "duration", "className", "position"];
+var Toast = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var message = _ref.message,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'error' : _ref$type,
+    onClose = _ref.onClose,
+    _ref$duration = _ref.duration,
+    duration = _ref$duration === void 0 ? 3000 : _ref$duration,
+    className = _ref.className,
+    _ref$position = _ref.position,
+    position = _ref$position === void 0 ? 'bottom-center' : _ref$position,
+    props = _objectWithoutProperties(_ref, _excluded$c);
+  useEffect(function () {
+    if (duration > 0) {
+      var timer = setTimeout(onClose, duration);
+      return function () {
+        return clearTimeout(timer);
+      };
+    }
+  }, [duration, onClose]);
+  var typeConfig = {
+    error: {
+      icon: jsx(AlertCircle, {
+        className: "w-5 h-5 text-white"
+      }),
+      bgColor: colors.coral
+    },
+    success: {
+      icon: jsx(CheckCircle, {
+        className: "w-5 h-5 text-white"
+      }),
+      bgColor: colors.lima
+    },
+    info: {
+      icon: jsx(Info, {
+        className: "w-5 h-5 text-white"
+      }),
+      bgColor: colors.electrico
+    }
+  };
+  var config = typeConfig[type];
+  var positionClasses = {
+    'top-left': 'top-4 left-4',
+    'top-center': 'top-4 left-1/2 -translate-x-1/2',
+    'top-right': 'top-4 right-4',
+    'bottom-left': 'bottom-4 left-4',
+    'bottom-center': 'bottom-4 left-1/2 -translate-x-1/2',
+    'bottom-right': 'bottom-4 right-4'
+  };
+  return jsxs("div", _objectSpread2(_objectSpread2({
+    ref: ref,
+    className: cn('fixed z-50 flex items-center gap-3 px-4 py-3 rounded-lg shadow-lg min-w-[300px] animate-in fade-in slide-in-from-bottom-5', positionClasses[position], className),
+    style: {
+      backgroundColor: config.bgColor
+    },
+    role: "alert"
+  }, props), {}, {
+    children: [jsx("div", {
+      className: "flex-shrink-0",
+      children: config.icon
+    }), jsx(P, {
+      className: "text-white m-0 font-medium flex-1 text-sm",
+      children: message
+    }), jsx("button", {
+      onClick: onClose,
+      className: "flex-shrink-0 text-white opacity-70 hover:opacity-100 transition-opacity focus:outline-none",
+      children: jsx(X, {
+        className: "w-4 h-4"
+      })
+    })]
+  }));
+});
+Toast.displayName = 'Toast';
+
 var Loading = function Loading(_ref) {
   var message = _ref.message,
     className = _ref.className,
@@ -5393,5 +5524,5 @@ var ColorPalette = function ColorPalette(_ref2) {
   });
 };
 
-export { Avatar, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChatMessage, Checkbox, ColorPalette, ColorSwatch, Emoji, Error, ErrorFullScreen, FriendListItem, FullPage, Grid, GridItem, H1, H2, H3, H4, Icon, Image, Input, Lead, Link, Loading, LoadingFullScreen, Logo, Muted, Navbar, Notification, P, Pattern, PatternFill, PatternGroup, Popup, QuestionCard, SearchInput, Small, Streak, Subtitle, Switch, TextDivider, badgeVariants, buttonVariants, cn, colorEntries, colors, cssVars, getColor, getCssVar, themeVars };
+export { Avatar, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChatMessage, Checkbox, ColorPalette, ColorSwatch, Emoji, Error, ErrorFullScreen, FormError, FriendListItem, FullPage, Grid, GridItem, H1, H2, H3, H4, Icon, Image, Input, Lead, Link, Loading, LoadingFullScreen, Logo, Muted, Navbar, Notification, P, Pattern, PatternFill, PatternGroup, Popup, QuestionCard, SearchInput, Small, Streak, Subtitle, Switch, TextDivider, Toast, badgeVariants, buttonVariants, cn, colorEntries, colors, cssVars, getColor, getCssVar, themeVars };
 //# sourceMappingURL=index.esm.js.map