aloha-ui-library 0.2.6 → 0.2.7

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React, { useState, useEffect, useRef } from 'react';
-import { AlertCircle, EyeOff, Eye, Search, Bell, X, RefreshCw, Info, CheckCircle, Loader2 } from 'lucide-react';
+import { AlertCircle, EyeOff, Eye, ChevronDown, 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$q = ["className", "variant", "size", "loading", "disabled", "color", "textColor", "borderColor", "icon", "children", "style", "borderWidth"];
+var _excluded$r = ["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$q);
+    props = _objectWithoutProperties(_ref, _excluded$r);
   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$p = ["className", "children", "font", "weight", "color", "style"],
+var _excluded$q = ["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$p);
+    props = _objectWithoutProperties(_ref, _excluded$q);
   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$o = ["className", "size", "borderRadius", "showBorder", "backgroundColor", "borderColor", "shadow", "padding", "margin", "style"],
+var _excluded$p = ["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$o);
+    props = _objectWithoutProperties(_ref, _excluded$p);
   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,49 +3264,232 @@ var CardFooter = /*#__PURE__*/React.forwardRef(function (_ref6, ref) {
 });
 CardFooter.displayName = 'CardFooter';
 
-var _excluded$n = ["className", "src", "alt", "fallback", "size"];
+/**
+ * Avatar Parts Catalog
+ * Contains all available avatar customization layers
+ */
+var AVATAR_PARTS = [
+// ========== SKIN ==========
+{
+  id: 1,
+  type: 'skin',
+  color: '#62391b',
+  image: 'https://ik.imagekit.io/svccjb2ny/emojiEdit/base/Base1.png'
+}, {
+  id: 2,
+  type: 'skin',
+  color: '#fbdfca',
+  image: 'https://ik.imagekit.io/svccjb2ny/emojiEdit/base/Base2.png'
+}, {
+  id: 3,
+  type: 'skin',
+  color: '#fae1ab',
+  image: 'https://ik.imagekit.io/svccjb2ny/emojiEdit/base/Base3.png'
+}, {
+  id: 4,
+  type: 'skin',
+  color: '#ab8b64',
+  image: 'https://ik.imagekit.io/svccjb2ny/emojiEdit/base/Base4.png'
+}, {
+  id: 5,
+  type: 'skin',
+  color: '#e7bc91',
+  image: 'https://ik.imagekit.io/svccjb2ny/emojiEdit/base/Base5.png'
+}, {
+  id: 6,
+  type: 'skin',
+  color: '#b16b49',
+  image: 'https://ik.imagekit.io/svccjb2ny/emojiEdit/base/Base6.png'
+},
+// ========== EYES ==========
+{
+  id: 1,
+  type: 'eyes',
+  color: '#383517',
+  image: 'https://ik.imagekit.io/svccjb2ny/emojiEdit/eyes/Eyes1.png'
+}, {
+  id: 2,
+  type: 'eyes',
+  color: '#65421e',
+  image: 'https://ik.imagekit.io/svccjb2ny/emojiEdit/eyes/Eyes2.png'
+}, {
+  id: 3,
+  type: 'eyes',
+  color: '#aa783e',
+  image: 'https://ik.imagekit.io/svccjb2ny/emojiEdit/eyes/Eyes3.png'
+}, {
+  id: 4,
+  type: 'eyes',
+  color: '#889e94',
+  image: 'https://ik.imagekit.io/svccjb2ny/emojiEdit/eyes/Eyes4.png'
+}, {
+  id: 5,
+  type: 'eyes',
+  color: '#b8a582',
+  image: 'https://ik.imagekit.io/svccjb2ny/emojiEdit/eyes/Eyes5.png'
+}, {
+  id: 6,
+  type: 'eyes',
+  color: '#79bbcb',
+  image: 'https://ik.imagekit.io/svccjb2ny/emojiEdit/eyes/Eyes6.png'
+}, {
+  id: 7,
+  type: 'eyes',
+  color: '#8e9452',
+  image: 'https://ik.imagekit.io/svccjb2ny/emojiEdit/eyes/Eyes7.png'
+},
+// ========== EYEBROWS ==========
+{
+  id: 1,
+  type: 'eyebrow',
+  image: 'https://ik.imagekit.io/svccjb2ny/emojiEdit/eyebrow/Eyebrow1.png'
+}, {
+  id: 2,
+  type: 'eyebrow',
+  image: 'https://ik.imagekit.io/svccjb2ny/emojiEdit/eyebrow/Eyebrow2.png'
+}, {
+  id: 3,
+  type: 'eyebrow',
+  image: 'https://ik.imagekit.io/svccjb2ny/emojiEdit/eyebrow/Eyebrow3.png'
+}, {
+  id: 4,
+  type: 'eyebrow',
+  image: 'https://ik.imagekit.io/svccjb2ny/emojiEdit/eyebrow/Eyebrow4.png'
+}, {
+  id: 5,
+  type: 'eyebrow',
+  image: 'https://ik.imagekit.io/svccjb2ny/emojiEdit/eyebrow/Eyebrow5.png'
+},
+// ========== FACIAL HAIR ==========
+{
+  id: 1,
+  type: 'facialHair',
+  image: 'https://ik.imagekit.io/svccjb2ny/emojiEdit/facialHair/FacialHair1.png'
+},
+// ========== HAIR ==========
+{
+  id: 1,
+  type: 'hair',
+  image: 'https://ik.imagekit.io/svccjb2ny/emojiEdit/hair/Hair1.png'
+}, {
+  id: 2,
+  type: 'hair',
+  image: 'https://ik.imagekit.io/svccjb2ny/emojiEdit/hair/Hair2.png'
+}, {
+  id: 3,
+  type: 'hair',
+  image: 'https://ik.imagekit.io/svccjb2ny/emojiEdit/hair/Hair3.png'
+},
+// ========== MOUTH ==========
+{
+  id: 1,
+  type: 'mouth',
+  image: 'https://ik.imagekit.io/svccjb2ny/emojiEdit/mouth/Mouth1.png'
+}, {
+  id: 2,
+  type: 'mouth',
+  image: 'https://ik.imagekit.io/svccjb2ny/emojiEdit/mouth/Mouth2.png'
+}, {
+  id: 3,
+  type: 'mouth',
+  image: 'https://ik.imagekit.io/svccjb2ny/emojiEdit/mouth/Mouth3.png'
+}, {
+  id: 4,
+  type: 'mouth',
+  image: 'https://ik.imagekit.io/svccjb2ny/emojiEdit/mouth/Mouth4.png'
+}, {
+  id: 5,
+  type: 'mouth',
+  image: 'https://ik.imagekit.io/svccjb2ny/emojiEdit/mouth/Mouth5.png'
+}, {
+  id: 6,
+  type: 'mouth',
+  image: 'https://ik.imagekit.io/svccjb2ny/emojiEdit/mouth/Mouth6.png'
+}, {
+  id: 7,
+  type: 'mouth',
+  image: 'https://ik.imagekit.io/svccjb2ny/emojiEdit/mouth/Mouth7.png'
+}, {
+  id: 8,
+  type: 'mouth',
+  image: 'https://ik.imagekit.io/svccjb2ny/emojiEdit/mouth/Mouth8.png'
+}];
+/**
+ * Get avatar part by ID and type
+ */
+var getAvatarPart = function getAvatarPart(id, type) {
+  return AVATAR_PARTS.find(function (part) {
+    return part.id === id && part.type === type;
+  });
+};
+/**
+ * Get image URL for a part ID and type
+ */
+var getAvatarPartImage = function getAvatarPartImage(id, type) {
+  var part = getAvatarPart(id, type);
+  return (part === null || part === void 0 ? void 0 : part.image) || null;
+};
+
+var _excluded$o = ["className", "emoji", "size"];
+var DEFAULT_AVATAR = {
+  skinId: 1,
+  eyebrowId: 1,
+  eyesId: 1,
+  facialHairId: 1,
+  hairId: 1,
+  mouthId: 1
+};
 var Avatar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _alt$charAt;
   var className = _ref.className,
-    src = _ref.src,
-    alt = _ref.alt,
-    fallback = _ref.fallback,
+    emoji = _ref.emoji,
     _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'md' : _ref$size,
-    props = _objectWithoutProperties(_ref, _excluded$n);
-  var _React$useState = React.useState(false),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    imageFailed = _React$useState2[0],
-    setImageFailed = _React$useState2[1];
-  var sizeClasses = {
-    sm: 'h-8 w-8 text-xs',
-    md: 'h-10 w-10 text-sm',
-    lg: 'h-12 w-12 text-base',
-    xl: 'h-16 w-16 text-lg'
-  };
-  return jsx("div", _objectSpread2(_objectSpread2({
+    size = _ref$size === void 0 ? 100 : _ref$size,
+    props = _objectWithoutProperties(_ref, _excluded$o);
+  var currentEmoji = emoji || DEFAULT_AVATAR;
+  var currentSkin = getAvatarPartImage(currentEmoji.skinId, 'skin');
+  var currentEyes = getAvatarPartImage(currentEmoji.eyesId, 'eyes');
+  var currentMouth = getAvatarPartImage(currentEmoji.mouthId, 'mouth');
+  var currentEyebrow = getAvatarPartImage(currentEmoji.eyebrowId, 'eyebrow');
+  var currentHair = getAvatarPartImage(currentEmoji.hairId, 'hair');
+  var currentFacialHair = getAvatarPartImage(currentEmoji.facialHairId, 'facialHair');
+  return jsxs("div", _objectSpread2(_objectSpread2({
     ref: ref,
-    className: cn('relative flex shrink-0 overflow-hidden rounded-full', sizeClasses[size], className)
+    className: cn('avatar-container', className),
+    style: {
+      width: "".concat(size, "px"),
+      height: "".concat(size, "px")
+    }
   }, props), {}, {
-    children: src && !imageFailed ? jsx("img", {
-      src: src,
-      alt: alt || 'Avatar',
-      className: "aspect-square h-full w-full object-cover",
-      onError: function onError() {
-        return setImageFailed(true);
-      }
-    }) : jsx("div", {
-      className: "flex h-full w-full items-center justify-center bg-muted",
-      children: jsx("span", {
-        className: "font-medium text-muted-foreground",
-        children: fallback || (alt === null || alt === void 0 || (_alt$charAt = alt.charAt(0)) === null || _alt$charAt === void 0 ? void 0 : _alt$charAt.toUpperCase()) || '?'
-      })
-    })
+    children: [currentSkin && jsx("img", {
+      src: currentSkin,
+      alt: "Base",
+      className: "avatar-layer"
+    }), currentEyes && jsx("img", {
+      src: currentEyes,
+      alt: "Eyes",
+      className: "avatar-layer"
+    }), currentEyebrow && jsx("img", {
+      src: currentEyebrow,
+      alt: "Eyebrows",
+      className: "avatar-layer"
+    }), currentMouth && jsx("img", {
+      src: currentMouth,
+      alt: "Mouth",
+      className: "avatar-layer"
+    }), currentHair && jsx("img", {
+      src: currentHair,
+      alt: "Hair",
+      className: "avatar-layer"
+    }), currentFacialHair && jsx("img", {
+      src: currentFacialHair,
+      alt: "Facial Hair",
+      className: "avatar-layer"
+    })]
   }));
 });
 Avatar.displayName = 'Avatar';
 
-var _excluded$m = ["className", "variant"];
+var _excluded$n = ["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 +3506,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$m);
+    props = _objectWithoutProperties(_ref, _excluded$n);
   return jsx("div", _objectSpread2({
     className: cn(badgeVariants({
       variant: variant
@@ -3331,11 +3514,11 @@ function Badge(_ref) {
   }, props));
 }
 
-var _excluded$l = ["className", "error"];
+var _excluded$m = ["className", "error"];
 var FormError = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     error = _ref.error,
-    props = _objectWithoutProperties(_ref, _excluded$l);
+    props = _objectWithoutProperties(_ref, _excluded$m);
   if (!error) return null;
   return jsxs("div", _objectSpread2(_objectSpread2({
     ref: ref,
@@ -3357,7 +3540,7 @@ var FormError = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 FormError.displayName = 'FormError';
 
-var _excluded$k = ["className", "type", "label", "helperText", "required", "id", "error"];
+var _excluded$l = ["className", "type", "label", "helperText", "required", "id", "error"];
 var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     type = _ref.type,
@@ -3366,7 +3549,7 @@ var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     required = _ref.required,
     id = _ref.id,
     error = _ref.error,
-    props = _objectWithoutProperties(_ref, _excluded$k);
+    props = _objectWithoutProperties(_ref, _excluded$l);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     showPassword = _useState2[0],
@@ -3429,6 +3612,69 @@ var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 Input.displayName = 'Input';
 
+var _excluded$k = ["className", "label", "helperText", "required", "id", "error", "options", "placeholder", "children"];
+var Select = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    label = _ref.label,
+    helperText = _ref.helperText,
+    required = _ref.required,
+    id = _ref.id,
+    error = _ref.error,
+    options = _ref.options,
+    placeholder = _ref.placeholder,
+    children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded$k);
+  var selectId = id || "select-".concat(Math.random().toString(36).substr(2, 9));
+  return jsxs("div", {
+    className: "w-full",
+    children: [(label || helperText) && jsxs("div", {
+      className: "mb-2",
+      children: [label && jsxs(P, {
+        className: "text-sm font-medium m-0 [&:not(:first-child)]:mt-0 inline",
+        children: [label, required && jsx("span", {
+          style: {
+            color: colors.coral
+          },
+          children: " *"
+        })]
+      }), helperText && jsx(P, {
+        className: "text-xs text-gray-500 m-0 mt-1 [&:not(:first-child)]:mt-1",
+        children: helperText
+      })]
+    }), jsxs("div", {
+      className: "relative",
+      children: [jsxs("select", _objectSpread2(_objectSpread2({
+        id: selectId,
+        className: cn('flex h-10 w-full rounded-lg border-2 px-3 py-2 text-sm transition-all appearance-none pr-9', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2', 'disabled:cursor-not-allowed disabled:opacity-50', className),
+        style: {
+          borderColor: error ? colors.coral : colors.piedra,
+          backgroundColor: colors.koala
+        },
+        ref: ref,
+        required: required
+      }, props), {}, {
+        children: [placeholder && jsx("option", {
+          value: "",
+          disabled: true,
+          children: placeholder
+        }), options ? options.map(function (opt) {
+          return jsx("option", {
+            value: opt.value,
+            disabled: opt.disabled,
+            children: opt.label
+          }, opt.value);
+        }) : children]
+      })), jsx(ChevronDown, {
+        size: 18,
+        className: "pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-gray-500"
+      })]
+    }), error && typeof error === 'string' && jsx(FormError, {
+      error: error
+    })]
+  });
+});
+Select.displayName = 'Select';
+
 var _excluded$j = ["className", "label", "id"];
 var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
@@ -5524,5 +5770,5 @@ var ColorPalette = function ColorPalette(_ref2) {
   });
 };
 
-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 };
+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, Select, Small, Streak, Subtitle, Switch, TextDivider, Toast, badgeVariants, buttonVariants, cn, colorEntries, colors, cssVars, getColor, getCssVar, themeVars };
 //# sourceMappingURL=index.esm.js.map