aloha-ui-library 0.2.8 → 0.2.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/FriendListItem/FriendListItem.d.ts +5 -4
- package/dist/index.css +1 -1
- package/dist/index.esm.css +1 -1
- package/dist/index.esm.js +20 -16
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +20 -16
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import './FriendListItem.css';
|
|
3
|
+
import { type AvatarAttributes } from '../Avatar';
|
|
3
4
|
import { type ColorName } from '../../colors';
|
|
4
5
|
export type FriendItemVariant = 'user' | 'group';
|
|
5
6
|
export interface FriendAvatar {
|
|
6
|
-
|
|
7
|
-
fallback?: string;
|
|
7
|
+
emoji?: AvatarAttributes;
|
|
8
8
|
}
|
|
9
9
|
export interface FriendListItemProps extends React.HTMLAttributes<HTMLButtonElement> {
|
|
10
10
|
/**
|
|
@@ -14,8 +14,7 @@ export interface FriendListItemProps extends React.HTMLAttributes<HTMLButtonElem
|
|
|
14
14
|
variant?: FriendItemVariant;
|
|
15
15
|
/** Nombre del usuario o del grupo */
|
|
16
16
|
name?: string;
|
|
17
|
-
|
|
18
|
-
avatarFallback?: string;
|
|
17
|
+
emoji?: AvatarAttributes;
|
|
19
18
|
/** Array de avatares para el stack (variant='group') */
|
|
20
19
|
avatars?: FriendAvatar[];
|
|
21
20
|
bgColor?: ColorName;
|
|
@@ -23,6 +22,8 @@ export interface FriendListItemProps extends React.HTMLAttributes<HTMLButtonElem
|
|
|
23
22
|
chevronColor?: ColorName;
|
|
24
23
|
/** Color del borde/ring de cada avatar en el stack */
|
|
25
24
|
avatarRingColor?: ColorName;
|
|
25
|
+
showChevron?: boolean;
|
|
26
|
+
isSelected?: boolean;
|
|
26
27
|
}
|
|
27
28
|
declare const FriendListItem: React.ForwardRefExoticComponent<FriendListItemProps & React.RefAttributes<HTMLButtonElement>>;
|
|
28
29
|
export { FriendListItem };
|
package/dist/index.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
.avatar-container{border-radius:20px;height:120px;margin:0 auto;overflow:hidden;position:relative;width:120px}.avatar-layer{height:100%;left:0;-o-object-fit:cover;object-fit:cover;position:absolute;top:0;width:100%}.avatar-preview .avatar-container{height:300px;position:relative;width:300px}.menu-icon .avatar-container{border-radius:50%;height:50px;margin:0;width:50px}@media (max-width:768px){.avatar-container{height:100px;width:100px}.avatar-preview .avatar-container{height:250px;width:250px}.menu-icon .avatar-container{height:40px;width:40px}}@media (max-width:480px){.avatar-preview .avatar-container{height:200px;width:200px}}.text-divider{align-items:center;display:flex;gap:10px;width:100%}.text-divider h1,.text-divider h2,.text-divider h3,.text-divider h4,.text-divider p,.text-divider small{line-height:1;margin:0}.text-divider__avatar-stack{align-items:center;display:flex;flex-direction:row-reverse;flex-shrink:0}.text-divider__stack-avatar{border-radius:50%;margin-left:-6px;outline:2px solid var(--td-ring,#fff);outline-offset:0}.text-divider__avatar-stack>:last-child{margin-left:0}.text-divider__line{flex:1}.text-divider__right{flex-shrink:0}.chat-message{background-color:var(--chat-bg);border-radius:18px;display:inline-flex;flex-direction:column;font-family:var(--font-nunito);gap:6px;max-width:72%;padding:12px 16px;position:relative;word-break:break-word}.chat-message--received{align-self:flex-start;border-bottom-left-radius:4px}.chat-message--received:after{background:var(--chat-bg);border-radius:0 0 60% 0;bottom:-14px;content:"";height:16px;left:0;position:absolute;width:22px}.chat-message--sent{align-self:flex-end;border-bottom-right-radius:4px}.chat-message--sent:after{background:var(--chat-bg);border-radius:0 0 0 60%;bottom:-14px;content:"";height:16px;position:absolute;right:0;width:22px}.chat-message__header{align-items:center;color:var(--chat-hdr);display:flex;font-size:.8125rem;gap:6px;line-height:1;white-space:nowrap}.chat-message__avatar{flex-shrink:0;height:22px!important;width:22px!important}.chat-message__name{font-weight:700}.chat-message__separator,.chat-message__time{font-weight:400;opacity:.6}.chat-message__body{color:var(--chat-msg);font-size:.9375rem;font-weight:700;line-height:1.5;margin:0}.chat-thread{gap:14px;padding:16px}.chat-thread,.question-card{display:flex;flex-direction:column;width:100%}.question-card{background-color:var(--qc-bg);border-radius:16px;box-sizing:border-box;font-family:var(--font-nunito);gap:10px;padding:12px 14px}.question-card__label{align-items:center;background-color:var(--qc-label-bg);border-radius:.5rem;display:inline-flex;gap:6px;padding:4px 10px 4px 4px;width:-moz-fit-content;width:fit-content}.question-card__label-text{color:var(--qc-label-txt);font-size:.8125rem;font-weight:700;line-height:1}.question-card__respondents{display:flex;flex-direction:column;gap:6px;list-style:none;margin:0;padding:0}.question-card__respondent{align-items:center;display:flex;gap:8px}.question-card__respondent-text{color:var(--qc-resp-txt);font-size:.875rem;font-weight:600}.question-card__revealed{display:flex;flex-direction:column;gap:10px}.question-card__question-text{background-color:var(--qc-btn-bg);border-radius:.4rem;color:var(--qc-q-txt);font-size:.9375rem;font-weight:600;line-height:1.4;margin:0;padding:.3rem}.question-card__answers{display:flex;flex-direction:column;gap:8px;list-style:none;margin:0;padding:0}.question-card__answer-row{align-items:center;display:flex;gap:8px}.question-card__answer-name{color:var(--qc-resp-txt);font-size:.8125rem;font-weight:700;min-width:32px}.question-card__answer-chip{align-items:center;background-color:var(--qc-ans-bg);border-radius:.4rem;color:var(--qc-ans-txt);display:inline-flex;font-size:.8125rem;font-weight:700;padding:3px 12px}.question-card__btn{background-color:var(--qc-btn-bg);border:none;border-radius:10px;color:var(--qc-btn-txt);cursor:pointer;display:block;font-family:var(--font-nunito);font-size:.9375rem;font-weight:700;padding:10px 0;text-align:center;transition:opacity .15s ease,transform .1s ease;width:100%}.question-card__btn:hover{opacity:.88}.question-card__btn:active{opacity:.75;transform:scale(.98)}.friend-list-item{align-items:center;background-color:var(--fi-bg);border:
|
|
1
|
+
.avatar-container{border-radius:20px;height:120px;margin:0 auto;overflow:hidden;position:relative;width:120px}.avatar-layer{height:100%;left:0;-o-object-fit:cover;object-fit:cover;position:absolute;top:0;width:100%}.avatar-preview .avatar-container{height:300px;position:relative;width:300px}.menu-icon .avatar-container{border-radius:50%;height:50px;margin:0;width:50px}@media (max-width:768px){.avatar-container{height:100px;width:100px}.avatar-preview .avatar-container{height:250px;width:250px}.menu-icon .avatar-container{height:40px;width:40px}}@media (max-width:480px){.avatar-preview .avatar-container{height:200px;width:200px}}.text-divider{align-items:center;display:flex;gap:10px;width:100%}.text-divider h1,.text-divider h2,.text-divider h3,.text-divider h4,.text-divider p,.text-divider small{line-height:1;margin:0}.text-divider__avatar-stack{align-items:center;display:flex;flex-direction:row-reverse;flex-shrink:0}.text-divider__stack-avatar{border-radius:50%;margin-left:-6px;outline:2px solid var(--td-ring,#fff);outline-offset:0}.text-divider__avatar-stack>:last-child{margin-left:0}.text-divider__line{flex:1}.text-divider__right{flex-shrink:0}.chat-message{background-color:var(--chat-bg);border-radius:18px;display:inline-flex;flex-direction:column;font-family:var(--font-nunito);gap:6px;max-width:72%;padding:12px 16px;position:relative;word-break:break-word}.chat-message--received{align-self:flex-start;border-bottom-left-radius:4px}.chat-message--received:after{background:var(--chat-bg);border-radius:0 0 60% 0;bottom:-14px;content:"";height:16px;left:0;position:absolute;width:22px}.chat-message--sent{align-self:flex-end;border-bottom-right-radius:4px}.chat-message--sent:after{background:var(--chat-bg);border-radius:0 0 0 60%;bottom:-14px;content:"";height:16px;position:absolute;right:0;width:22px}.chat-message__header{align-items:center;color:var(--chat-hdr);display:flex;font-size:.8125rem;gap:6px;line-height:1;white-space:nowrap}.chat-message__avatar{flex-shrink:0;height:22px!important;width:22px!important}.chat-message__name{font-weight:700}.chat-message__separator,.chat-message__time{font-weight:400;opacity:.6}.chat-message__body{color:var(--chat-msg);font-size:.9375rem;font-weight:700;line-height:1.5;margin:0}.chat-thread{gap:14px;padding:16px}.chat-thread,.question-card{display:flex;flex-direction:column;width:100%}.question-card{background-color:var(--qc-bg);border-radius:16px;box-sizing:border-box;font-family:var(--font-nunito);gap:10px;padding:12px 14px}.question-card__label{align-items:center;background-color:var(--qc-label-bg);border-radius:.5rem;display:inline-flex;gap:6px;padding:4px 10px 4px 4px;width:-moz-fit-content;width:fit-content}.question-card__label-text{color:var(--qc-label-txt);font-size:.8125rem;font-weight:700;line-height:1}.question-card__respondents{display:flex;flex-direction:column;gap:6px;list-style:none;margin:0;padding:0}.question-card__respondent{align-items:center;display:flex;gap:8px}.question-card__respondent-text{color:var(--qc-resp-txt);font-size:.875rem;font-weight:600}.question-card__revealed{display:flex;flex-direction:column;gap:10px}.question-card__question-text{background-color:var(--qc-btn-bg);border-radius:.4rem;color:var(--qc-q-txt);font-size:.9375rem;font-weight:600;line-height:1.4;margin:0;padding:.3rem}.question-card__answers{display:flex;flex-direction:column;gap:8px;list-style:none;margin:0;padding:0}.question-card__answer-row{align-items:center;display:flex;gap:8px}.question-card__answer-name{color:var(--qc-resp-txt);font-size:.8125rem;font-weight:700;min-width:32px}.question-card__answer-chip{align-items:center;background-color:var(--qc-ans-bg);border-radius:.4rem;color:var(--qc-ans-txt);display:inline-flex;font-size:.8125rem;font-weight:700;padding:3px 12px}.question-card__btn{background-color:var(--qc-btn-bg);border:none;border-radius:10px;color:var(--qc-btn-txt);cursor:pointer;display:block;font-family:var(--font-nunito);font-size:.9375rem;font-weight:700;padding:10px 0;text-align:center;transition:opacity .15s ease,transform .1s ease;width:100%}.question-card__btn:hover{opacity:.88}.question-card__btn:active{opacity:.75;transform:scale(.98)}.friend-list-item{align-items:center;background-color:var(--fi-bg);border:2px solid transparent;border-radius:14px;box-sizing:border-box;cursor:pointer;display:flex;font-family:var(--font-nunito);justify-content:space-between;padding:8px 12px;text-align:left;transition:opacity .15s ease,transform .1s ease;width:100%}.friend-list-item:hover{opacity:.88}.friend-list-item:active{opacity:.75;transform:scale(.98)}.friend-list-item--selected{border-color:var(--fi-selected-border)}.friend-list-item__left{align-items:center;display:flex;flex:1;gap:12px;min-width:0}.friend-list-item__avatar{margin:0!important}.friend-list-item__name{color:var(--fi-name);font-size:.9375rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.friend-list-item__avatar-stack{align-items:center;display:flex;flex-direction:row-reverse}.friend-list-item__avatar-stack>:last-child{margin-left:0!important}.friend-list-item__count-wrap{align-items:baseline;display:flex;gap:5px;margin-left:2px}.friend-list-item__count{color:var(--fi-count);font-size:1rem;font-weight:800;line-height:1}.friend-list-item__count-label{color:var(--fi-count-label);font-size:.8125rem;font-weight:600}.friend-list-item__chevron{color:var(--fi-chevron);flex-shrink:0;margin-left:8px}@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;500;700&family=Nunito+Sans:wght@300;500;700;900&display=swap");*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }
|
|
2
2
|
|
|
3
3
|
/*
|
|
4
4
|
! tailwindcss v3.4.18 | MIT License | https://tailwindcss.com
|
package/dist/index.esm.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
.avatar-container{border-radius:20px;height:120px;margin:0 auto;overflow:hidden;position:relative;width:120px}.avatar-layer{height:100%;left:0;-o-object-fit:cover;object-fit:cover;position:absolute;top:0;width:100%}.avatar-preview .avatar-container{height:300px;position:relative;width:300px}.menu-icon .avatar-container{border-radius:50%;height:50px;margin:0;width:50px}@media (max-width:768px){.avatar-container{height:100px;width:100px}.avatar-preview .avatar-container{height:250px;width:250px}.menu-icon .avatar-container{height:40px;width:40px}}@media (max-width:480px){.avatar-preview .avatar-container{height:200px;width:200px}}.text-divider{align-items:center;display:flex;gap:10px;width:100%}.text-divider h1,.text-divider h2,.text-divider h3,.text-divider h4,.text-divider p,.text-divider small{line-height:1;margin:0}.text-divider__avatar-stack{align-items:center;display:flex;flex-direction:row-reverse;flex-shrink:0}.text-divider__stack-avatar{border-radius:50%;margin-left:-6px;outline:2px solid var(--td-ring,#fff);outline-offset:0}.text-divider__avatar-stack>:last-child{margin-left:0}.text-divider__line{flex:1}.text-divider__right{flex-shrink:0}.chat-message{background-color:var(--chat-bg);border-radius:18px;display:inline-flex;flex-direction:column;font-family:var(--font-nunito);gap:6px;max-width:72%;padding:12px 16px;position:relative;word-break:break-word}.chat-message--received{align-self:flex-start;border-bottom-left-radius:4px}.chat-message--received:after{background:var(--chat-bg);border-radius:0 0 60% 0;bottom:-14px;content:"";height:16px;left:0;position:absolute;width:22px}.chat-message--sent{align-self:flex-end;border-bottom-right-radius:4px}.chat-message--sent:after{background:var(--chat-bg);border-radius:0 0 0 60%;bottom:-14px;content:"";height:16px;position:absolute;right:0;width:22px}.chat-message__header{align-items:center;color:var(--chat-hdr);display:flex;font-size:.8125rem;gap:6px;line-height:1;white-space:nowrap}.chat-message__avatar{flex-shrink:0;height:22px!important;width:22px!important}.chat-message__name{font-weight:700}.chat-message__separator,.chat-message__time{font-weight:400;opacity:.6}.chat-message__body{color:var(--chat-msg);font-size:.9375rem;font-weight:700;line-height:1.5;margin:0}.chat-thread{gap:14px;padding:16px}.chat-thread,.question-card{display:flex;flex-direction:column;width:100%}.question-card{background-color:var(--qc-bg);border-radius:16px;box-sizing:border-box;font-family:var(--font-nunito);gap:10px;padding:12px 14px}.question-card__label{align-items:center;background-color:var(--qc-label-bg);border-radius:.5rem;display:inline-flex;gap:6px;padding:4px 10px 4px 4px;width:-moz-fit-content;width:fit-content}.question-card__label-text{color:var(--qc-label-txt);font-size:.8125rem;font-weight:700;line-height:1}.question-card__respondents{display:flex;flex-direction:column;gap:6px;list-style:none;margin:0;padding:0}.question-card__respondent{align-items:center;display:flex;gap:8px}.question-card__respondent-text{color:var(--qc-resp-txt);font-size:.875rem;font-weight:600}.question-card__revealed{display:flex;flex-direction:column;gap:10px}.question-card__question-text{background-color:var(--qc-btn-bg);border-radius:.4rem;color:var(--qc-q-txt);font-size:.9375rem;font-weight:600;line-height:1.4;margin:0;padding:.3rem}.question-card__answers{display:flex;flex-direction:column;gap:8px;list-style:none;margin:0;padding:0}.question-card__answer-row{align-items:center;display:flex;gap:8px}.question-card__answer-name{color:var(--qc-resp-txt);font-size:.8125rem;font-weight:700;min-width:32px}.question-card__answer-chip{align-items:center;background-color:var(--qc-ans-bg);border-radius:.4rem;color:var(--qc-ans-txt);display:inline-flex;font-size:.8125rem;font-weight:700;padding:3px 12px}.question-card__btn{background-color:var(--qc-btn-bg);border:none;border-radius:10px;color:var(--qc-btn-txt);cursor:pointer;display:block;font-family:var(--font-nunito);font-size:.9375rem;font-weight:700;padding:10px 0;text-align:center;transition:opacity .15s ease,transform .1s ease;width:100%}.question-card__btn:hover{opacity:.88}.question-card__btn:active{opacity:.75;transform:scale(.98)}.friend-list-item{align-items:center;background-color:var(--fi-bg);border:
|
|
1
|
+
.avatar-container{border-radius:20px;height:120px;margin:0 auto;overflow:hidden;position:relative;width:120px}.avatar-layer{height:100%;left:0;-o-object-fit:cover;object-fit:cover;position:absolute;top:0;width:100%}.avatar-preview .avatar-container{height:300px;position:relative;width:300px}.menu-icon .avatar-container{border-radius:50%;height:50px;margin:0;width:50px}@media (max-width:768px){.avatar-container{height:100px;width:100px}.avatar-preview .avatar-container{height:250px;width:250px}.menu-icon .avatar-container{height:40px;width:40px}}@media (max-width:480px){.avatar-preview .avatar-container{height:200px;width:200px}}.text-divider{align-items:center;display:flex;gap:10px;width:100%}.text-divider h1,.text-divider h2,.text-divider h3,.text-divider h4,.text-divider p,.text-divider small{line-height:1;margin:0}.text-divider__avatar-stack{align-items:center;display:flex;flex-direction:row-reverse;flex-shrink:0}.text-divider__stack-avatar{border-radius:50%;margin-left:-6px;outline:2px solid var(--td-ring,#fff);outline-offset:0}.text-divider__avatar-stack>:last-child{margin-left:0}.text-divider__line{flex:1}.text-divider__right{flex-shrink:0}.chat-message{background-color:var(--chat-bg);border-radius:18px;display:inline-flex;flex-direction:column;font-family:var(--font-nunito);gap:6px;max-width:72%;padding:12px 16px;position:relative;word-break:break-word}.chat-message--received{align-self:flex-start;border-bottom-left-radius:4px}.chat-message--received:after{background:var(--chat-bg);border-radius:0 0 60% 0;bottom:-14px;content:"";height:16px;left:0;position:absolute;width:22px}.chat-message--sent{align-self:flex-end;border-bottom-right-radius:4px}.chat-message--sent:after{background:var(--chat-bg);border-radius:0 0 0 60%;bottom:-14px;content:"";height:16px;position:absolute;right:0;width:22px}.chat-message__header{align-items:center;color:var(--chat-hdr);display:flex;font-size:.8125rem;gap:6px;line-height:1;white-space:nowrap}.chat-message__avatar{flex-shrink:0;height:22px!important;width:22px!important}.chat-message__name{font-weight:700}.chat-message__separator,.chat-message__time{font-weight:400;opacity:.6}.chat-message__body{color:var(--chat-msg);font-size:.9375rem;font-weight:700;line-height:1.5;margin:0}.chat-thread{gap:14px;padding:16px}.chat-thread,.question-card{display:flex;flex-direction:column;width:100%}.question-card{background-color:var(--qc-bg);border-radius:16px;box-sizing:border-box;font-family:var(--font-nunito);gap:10px;padding:12px 14px}.question-card__label{align-items:center;background-color:var(--qc-label-bg);border-radius:.5rem;display:inline-flex;gap:6px;padding:4px 10px 4px 4px;width:-moz-fit-content;width:fit-content}.question-card__label-text{color:var(--qc-label-txt);font-size:.8125rem;font-weight:700;line-height:1}.question-card__respondents{display:flex;flex-direction:column;gap:6px;list-style:none;margin:0;padding:0}.question-card__respondent{align-items:center;display:flex;gap:8px}.question-card__respondent-text{color:var(--qc-resp-txt);font-size:.875rem;font-weight:600}.question-card__revealed{display:flex;flex-direction:column;gap:10px}.question-card__question-text{background-color:var(--qc-btn-bg);border-radius:.4rem;color:var(--qc-q-txt);font-size:.9375rem;font-weight:600;line-height:1.4;margin:0;padding:.3rem}.question-card__answers{display:flex;flex-direction:column;gap:8px;list-style:none;margin:0;padding:0}.question-card__answer-row{align-items:center;display:flex;gap:8px}.question-card__answer-name{color:var(--qc-resp-txt);font-size:.8125rem;font-weight:700;min-width:32px}.question-card__answer-chip{align-items:center;background-color:var(--qc-ans-bg);border-radius:.4rem;color:var(--qc-ans-txt);display:inline-flex;font-size:.8125rem;font-weight:700;padding:3px 12px}.question-card__btn{background-color:var(--qc-btn-bg);border:none;border-radius:10px;color:var(--qc-btn-txt);cursor:pointer;display:block;font-family:var(--font-nunito);font-size:.9375rem;font-weight:700;padding:10px 0;text-align:center;transition:opacity .15s ease,transform .1s ease;width:100%}.question-card__btn:hover{opacity:.88}.question-card__btn:active{opacity:.75;transform:scale(.98)}.friend-list-item{align-items:center;background-color:var(--fi-bg);border:2px solid transparent;border-radius:14px;box-sizing:border-box;cursor:pointer;display:flex;font-family:var(--font-nunito);justify-content:space-between;padding:8px 12px;text-align:left;transition:opacity .15s ease,transform .1s ease;width:100%}.friend-list-item:hover{opacity:.88}.friend-list-item:active{opacity:.75;transform:scale(.98)}.friend-list-item--selected{border-color:var(--fi-selected-border)}.friend-list-item__left{align-items:center;display:flex;flex:1;gap:12px;min-width:0}.friend-list-item__avatar{margin:0!important}.friend-list-item__name{color:var(--fi-name);font-size:.9375rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.friend-list-item__avatar-stack{align-items:center;display:flex;flex-direction:row-reverse}.friend-list-item__avatar-stack>:last-child{margin-left:0!important}.friend-list-item__count-wrap{align-items:baseline;display:flex;gap:5px;margin-left:2px}.friend-list-item__count{color:var(--fi-count);font-size:1rem;font-weight:800;line-height:1}.friend-list-item__count-label{color:var(--fi-count-label);font-size:.8125rem;font-weight:600}.friend-list-item__chevron{color:var(--fi-chevron);flex-shrink:0;margin-left:8px}@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;500;700&family=Nunito+Sans:wght@300;500;700;900&display=swap");*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }
|
|
2
2
|
|
|
3
3
|
/*
|
|
4
4
|
! tailwindcss v3.4.18 | MIT License | https://tailwindcss.com
|
package/dist/index.esm.js
CHANGED
|
@@ -3430,7 +3430,7 @@ var getAvatarPartImage = function getAvatarPartImage(id, type) {
|
|
|
3430
3430
|
return (part === null || part === void 0 ? void 0 : part.image) || null;
|
|
3431
3431
|
};
|
|
3432
3432
|
|
|
3433
|
-
var _excluded$o = ["className", "emoji", "size"];
|
|
3433
|
+
var _excluded$o = ["className", "emoji", "size", "style"];
|
|
3434
3434
|
var DEFAULT_AVATAR = {
|
|
3435
3435
|
skinId: 1,
|
|
3436
3436
|
eyebrowId: 1,
|
|
@@ -3444,6 +3444,7 @@ var Avatar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
3444
3444
|
emoji = _ref.emoji,
|
|
3445
3445
|
_ref$size = _ref.size,
|
|
3446
3446
|
size = _ref$size === void 0 ? 100 : _ref$size,
|
|
3447
|
+
style = _ref.style,
|
|
3447
3448
|
props = _objectWithoutProperties(_ref, _excluded$o);
|
|
3448
3449
|
var currentEmoji = emoji || DEFAULT_AVATAR;
|
|
3449
3450
|
var currentSkin = getAvatarPartImage(currentEmoji.skinId, 'skin');
|
|
@@ -3455,10 +3456,10 @@ var Avatar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
3455
3456
|
return jsxs("div", _objectSpread2(_objectSpread2({
|
|
3456
3457
|
ref: ref,
|
|
3457
3458
|
className: cn('avatar-container', className),
|
|
3458
|
-
style: {
|
|
3459
|
+
style: _objectSpread2({
|
|
3459
3460
|
width: "".concat(size, "px"),
|
|
3460
3461
|
height: "".concat(size, "px")
|
|
3461
|
-
}
|
|
3462
|
+
}, style)
|
|
3462
3463
|
}, props), {}, {
|
|
3463
3464
|
children: [currentSkin && jsx("img", {
|
|
3464
3465
|
src: currentSkin,
|
|
@@ -4855,16 +4856,19 @@ var QuestionCard = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
4855
4856
|
});
|
|
4856
4857
|
QuestionCard.displayName = 'QuestionCard';
|
|
4857
4858
|
|
|
4858
|
-
var _excluded$6 = ["variant", "name", "
|
|
4859
|
+
var _excluded$6 = ["variant", "name", "emoji", "avatars", "showChevron", "isSelected", "bgColor", "nameColor", "chevronColor", "avatarRingColor", "className", "style", "onClick"];
|
|
4859
4860
|
// ── Componente ────────────────────────────────────────────────────
|
|
4860
4861
|
var FriendListItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
4861
4862
|
var _ref$variant = _ref.variant,
|
|
4862
4863
|
variant = _ref$variant === void 0 ? 'user' : _ref$variant,
|
|
4863
4864
|
name = _ref.name,
|
|
4864
|
-
|
|
4865
|
-
avatarFallback = _ref.avatarFallback,
|
|
4865
|
+
emoji = _ref.emoji,
|
|
4866
4866
|
_ref$avatars = _ref.avatars,
|
|
4867
4867
|
avatars = _ref$avatars === void 0 ? [] : _ref$avatars,
|
|
4868
|
+
_ref$showChevron = _ref.showChevron,
|
|
4869
|
+
showChevron = _ref$showChevron === void 0 ? true : _ref$showChevron,
|
|
4870
|
+
_ref$isSelected = _ref.isSelected,
|
|
4871
|
+
isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
|
|
4868
4872
|
bgColor = _ref.bgColor,
|
|
4869
4873
|
nameColor = _ref.nameColor,
|
|
4870
4874
|
chevronColor = _ref.chevronColor,
|
|
@@ -4877,17 +4881,19 @@ var FriendListItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
4877
4881
|
bg: colors[bgColor !== null && bgColor !== void 0 ? bgColor : 'marmol'],
|
|
4878
4882
|
name: colors[nameColor !== null && nameColor !== void 0 ? nameColor : 'olivo'],
|
|
4879
4883
|
chevron: colors[chevronColor !== null && chevronColor !== void 0 ? chevronColor : 'olivo'],
|
|
4880
|
-
ring: colors[avatarRingColor !== null && avatarRingColor !== void 0 ? avatarRingColor : 'hueso']
|
|
4884
|
+
ring: colors[avatarRingColor !== null && avatarRingColor !== void 0 ? avatarRingColor : 'hueso'],
|
|
4885
|
+
selectedBorder: colors['piedra']
|
|
4881
4886
|
};
|
|
4882
4887
|
return jsxs("button", _objectSpread2(_objectSpread2({
|
|
4883
4888
|
ref: ref,
|
|
4884
4889
|
type: "button",
|
|
4885
|
-
className: cn('friend-list-item', "friend-list-item--".concat(variant), className),
|
|
4890
|
+
className: cn('friend-list-item', "friend-list-item--".concat(variant), isSelected && 'friend-list-item--selected', className),
|
|
4886
4891
|
style: _objectSpread2({
|
|
4887
4892
|
'--fi-bg': resolved.bg,
|
|
4888
4893
|
'--fi-name': resolved.name,
|
|
4889
4894
|
'--fi-chevron': resolved.chevron,
|
|
4890
|
-
'--fi-ring': resolved.ring
|
|
4895
|
+
'--fi-ring': resolved.ring,
|
|
4896
|
+
'--fi-selected-border': resolved.selectedBorder
|
|
4891
4897
|
}, style),
|
|
4892
4898
|
onClick: onClick
|
|
4893
4899
|
}, props), {}, {
|
|
@@ -4895,9 +4901,8 @@ var FriendListItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
4895
4901
|
className: "friend-list-item__left",
|
|
4896
4902
|
children: variant === 'user' ? jsxs(Fragment, {
|
|
4897
4903
|
children: [jsx(Avatar, {
|
|
4898
|
-
|
|
4899
|
-
|
|
4900
|
-
size: "md",
|
|
4904
|
+
emoji: emoji,
|
|
4905
|
+
size: 40,
|
|
4901
4906
|
className: "friend-list-item__avatar"
|
|
4902
4907
|
}), jsx("span", {
|
|
4903
4908
|
className: "friend-list-item__name",
|
|
@@ -4908,9 +4913,8 @@ var FriendListItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
4908
4913
|
className: "friend-list-item__avatar-stack",
|
|
4909
4914
|
children: avatars.slice(0, 4).map(function (av, i) {
|
|
4910
4915
|
return jsx(Avatar, {
|
|
4911
|
-
|
|
4912
|
-
|
|
4913
|
-
size: "md",
|
|
4916
|
+
emoji: av.emoji,
|
|
4917
|
+
size: 40,
|
|
4914
4918
|
className: "friend-list-item__stack-avatar",
|
|
4915
4919
|
style: {
|
|
4916
4920
|
zIndex: avatars.length - i
|
|
@@ -4922,7 +4926,7 @@ var FriendListItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
4922
4926
|
children: name
|
|
4923
4927
|
})]
|
|
4924
4928
|
})
|
|
4925
|
-
}), jsx("svg", {
|
|
4929
|
+
}), showChevron && jsx("svg", {
|
|
4926
4930
|
className: "friend-list-item__chevron",
|
|
4927
4931
|
width: "18",
|
|
4928
4932
|
height: "18",
|