@solibo/solibo-ui 1.0.3 → 1.0.4
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/assets/index27.css +1 -1
- package/dist/assets/index31.css +1 -1
- package/dist/components/avatar/index.cjs +1 -1
- package/dist/components/avatar/index.cjs.map +1 -1
- package/dist/components/avatar/index.js +64 -44
- package/dist/components/avatar/index.js.map +1 -1
- package/dist/components/button/index.cjs +1 -1
- package/dist/components/button/index.js +10 -10
- package/dist/components/editor/index.cjs +25 -25
- package/dist/components/editor/index.cjs.map +1 -1
- package/dist/components/editor/index.js +2606 -2588
- package/dist/components/editor/index.js.map +1 -1
- package/dist/index.d.ts +17 -15
- package/dist/tokens.json +1 -1
- package/package.json +1 -1
package/dist/assets/index27.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._avatar_lcj2e_1{--avatar-size: var(--scale-40);align-items:center;display:inline-flex;gap:var(--scale-8);margin:0 var(--scale-4)}._small_lcj2e_10{--avatar-size: var(--scale-40)}._medium_lcj2e_14{--avatar-size: var(--scale-56)}._large_lcj2e_18{--avatar-size: var(--scale-96)}._media_lcj2e_22{align-items:center;background-color:var(--colors-semantic-interactive-disabled);border-radius:var(--shape-border-radius-radius-md);display:inline-flex;flex:0 0 var(--avatar-size);justify-content:center;overflow:hidden;height:var(--avatar-size);width:var(--avatar-size)}._media_lcj2e_22>figure{align-items:center;display:flex;height:100%;justify-content:center;width:100%}._media_lcj2e_22>figure>img{height:100%}._details_lcj2e_46{display:flex;flex-direction:column;min-width:0}._details_lcj2e_46>strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}._medium_lcj2e_14 ._details_lcj2e_46{gap:var(--shape-spacing-xs)}._large_lcj2e_18 ._details_lcj2e_46{gap:var(--shape-spacing-sm)}._secondary_lcj2e_66{align-items:center;display:flex;gap:var(--scale-8);justify-content:space-between;min-width:0}._text_lcj2e_74{color:var(--colors-semantic-content-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}._role_lcj2e_81,._role-name_lcj2e_82{text-transform:capitalize}._role_lcj2e_81{background-color:var(--colors-semantic-interactive-disabled);border-radius:var(--scale-32);color:var(--colors-semantic-content-secondary);display:block;overflow:hidden;padding:var(--shape-spacing-2xs) var(--shape-spacing-xs);text-overflow:ellipsis;white-space:nowrap;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}._large_lcj2e_18 ._details_lcj2e_46>strong{font-size:var(--typography-font-sizes-h3)}._large_lcj2e_18 ._text_lcj2e_74{font-size:var(--typography-font-sizes-label-lg)}._initials_lcj2e_106{font-weight:var(--font-font-weight-semibold)}._small_lcj2e_10 ._initials_lcj2e_106{font-size:var(--typography-font-sizes-label-sm)}._medium_lcj2e_14 ._initials_lcj2e_106{font-size:var(--typography-font-sizes-label-lg)}._large_lcj2e_18 ._initials_lcj2e_106{font-size:var(--typography-font-sizes-h3)}._link_lcj2e_122{text-decoration:none}._link_lcj2e_122>._avatar_lcj2e_1{background-color:transparent}._color-1_lcj2e_130 ._media_lcj2e_22,._color-solibo_lcj2e_131 ._media_lcj2e_22,._color-1_lcj2e_130 ._role_lcj2e_81,._color-solibo_lcj2e_131 ._role_lcj2e_81{background-color:var(--colors-semantic-roles-bg-solibo, #202b1b);color:var(--colors-semantic-roles-content-solibo, #f8fac0)}._color-2_lcj2e_138 ._media_lcj2e_22,._color-board_lcj2e_139 ._media_lcj2e_22,._color-2_lcj2e_138 ._role_lcj2e_81,._color-board_lcj2e_139 ._role_lcj2e_81{background-color:var(--colors-semantic-roles-bg-board, #f8fac0);color:var(--colors-semantic-roles-content-board, #202b1b)}._color-3_lcj2e_146 ._media_lcj2e_22,._color-owner_lcj2e_147 ._media_lcj2e_22,._color-3_lcj2e_146 ._role_lcj2e_81,._color-owner_lcj2e_147 ._role_lcj2e_81{background-color:var(--colors-semantic-roles-bg-owner, #abc5ff);color:var(--colors-semantic-roles-content-owner, #0b1938)}._color-4_lcj2e_154 ._media_lcj2e_22,._color-renter_lcj2e_155 ._media_lcj2e_22,._color-4_lcj2e_154 ._role_lcj2e_81,._color-renter_lcj2e_155 ._role_lcj2e_81{background-color:var(--colors-semantic-roles-bg-renter, #e8f1ff);color:var(--colors-semantic-roles-content-renter, #0b1938)}._color-5_lcj2e_162 ._media_lcj2e_22,._color-external_lcj2e_163 ._media_lcj2e_22,._color-5_lcj2e_162 ._role_lcj2e_81,._color-external_lcj2e_163 ._role_lcj2e_81{background-color:var(--colors-semantic-roles-bg-external, #d9e0d7);color:var(--colors-semantic-roles-content-external, #151b13)}
|
package/dist/assets/index31.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._button_15j52_1{align-items:center;background-color:var(--colors-semantic-bg-page);border-radius:var(--shape-border-radius-radius-md);border:none;box-shadow:var(--shape-box-shadow-xs-position-x) var(--shape-box-shadow-xs-position-y) var(--shape-box-shadow-xs-blur) var(--shape-box-shadow-xs-spread) var(--shape-box-shadow-xs-color);color:var(--colors-semantic-content-secondary);cursor:pointer;display:inline-flex;font-size:var(--typography-font-sizes-body-md);font-weight:var(--font-font-weight-semibold);padding:calc(var(--utils-tokens-unit) - var(--scale-2));transition:all var(--utils-tokens-transition-duration) var(--utils-tokens-transition-timing-function)}._button_15j52_1 [data-component=badge]{margin-left:var(--shape-spacing-xs)}._button_15j52_1:disabled{cursor:not-allowed;opacity:var(--utils-tokens-opacity-minimal)}._danger_15j52_28{background-color:var(--colors-semantic-interactive-destructive-bg);color:var(--colors-semantic-bg-surface)}._danger_15j52_28:not([disabled]):hover{background-color:var(--colors-semantic-interactive-destructive-hover)}._tertiary_15j52_37{background-color:transparent;border-radius:var(--shape-border-radius-radius-md);border:none;box-shadow:none}._primary_15j52_44{background-color:var(--colors-semantic-primary-primary);color:var(--colors-semantic-bg-surface)}._primary_15j52_44:not([disabled]):hover{background-color:var(--colors-semantic-primary-primary-active)!important}._secondary_15j52_53{background-color:var(--colors-semantic-interactive-secondary-bg)}._secondary_15j52_53:not([disabled]):hover{background-color:var(--colors-semantic-interactive-secondary-hover)}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index27.css');const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index27.css');const e=require("react/jsx-runtime"),g=require("../../classix-5H4IWnMA.cjs"),p=require("../figure/index.cjs"),u=require("../icon/index.cjs"),h=require("../link/index.cjs"),v="_avatar_lcj2e_1",N="_small_lcj2e_10",b="_medium_lcj2e_14",y="_large_lcj2e_18",f="_media_lcj2e_22",k="_details_lcj2e_46",q="_secondary_lcj2e_66",A="_text_lcj2e_74",I="_role_lcj2e_81",L="_initials_lcj2e_106",S="_link_lcj2e_122",l={avatar:v,small:N,medium:b,large:y,media:f,details:k,secondary:q,text:A,role:I,"role-name":"_role-name_lcj2e_82",initials:L,link:S,"color-1":"_color-1_lcj2e_130","color-solibo":"_color-solibo_lcj2e_131","color-2":"_color-2_lcj2e_138","color-board":"_color-board_lcj2e_139","color-3":"_color-3_lcj2e_146","color-owner":"_color-owner_lcj2e_147","color-4":"_color-4_lcj2e_154","color-renter":"_color-renter_lcj2e_155","color-5":"_color-5_lcj2e_162","color-external":"_color-external_lcj2e_163"},$={large:l.large,medium:l.medium,small:l.small},x={large:"large",medium:"medium",small:"medium"},w=i=>{const a=i.trim().split(/\s+/).filter(Boolean),n=Array.from(a[0]??"")[0]??"",t=a.length>1?Array.from(a[a.length-1])[0]:"";return`${n}${t}`.toLocaleUpperCase()},F=({accessibleLabel:i,color:a,icon:n,imageUrl:t,link:_,name:o,role:s,size:c="small",text:r})=>{const m=i||o||"User Avatar",d=o?w(o):"",j=e.jsxs("div",{className:g.t(l.avatar,$[c],a&&l[`color-${a}`]),"data-color":a,"data-size":c,children:[e.jsx("span",{className:l.media,children:e.jsx(p.Figure,{accessibleLabel:m,children:n?e.jsx(u.Icon,{name:n,size:x[c]}):t?e.jsx("img",{src:t,alt:m}):d?e.jsx("span",{"aria-hidden":"true",className:l.initials,children:d}):e.jsx(u.Icon,{name:"user",size:x[c]})})}),(o||s||r)&&e.jsxs("span",{className:l.details,children:[o&&e.jsx("strong",{children:o}),c==="small"&&(r||s)&&e.jsxs("span",{className:l.text,children:[r,r&&s&&" | ",s&&e.jsx("span",{className:l["role-name"],children:s})]}),c==="medium"&&e.jsxs("span",{className:l.secondary,children:[r&&e.jsx("span",{className:l.text,children:r}),s&&e.jsx("span",{className:l.role,children:s})]}),c==="large"&&s&&e.jsx("span",{className:l.role,children:s}),c==="large"&&r&&e.jsx("span",{className:l.text,children:r})]})]});return _?e.jsx(h.Link,{className:l.link,to:_,"data-component":"avatar",children:j}):j};exports.Avatar=F;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../src/components/avatar/index.tsx"],"sourcesContent":["import cx from 'classix';\n\nimport { Figure } from '@/components/figure';\nimport { Icon } from '@/components/icon';\nimport { Link } from '@/components/link';\n\nimport styles from './styles.module.css';\n\nexport type AvatarColor =\n | 'solibo'\n | 'board'\n | 'owner'\n | 'renter'\n | 'external'\n | '1'\n | '2'\n | '3'\n | '4'\n | '5';\n\nexport type AvatarSize = 'small' | 'medium' | 'large';\n\nexport type AvatarProps = {\n accessibleLabel?: string;\n color?: AvatarColor;\n imageUrl?: string;\n link?: string;\n name?: string;\n role?: string;\n size?: AvatarSize;\n};\n\nconst sizes: Record<AvatarSize, string> = {\n large: styles.large,\n medium: styles.medium,\n small: styles.small,\n};\n\nconst getInitials = (name: string) => {\n const nameParts = name.trim().split(/\\s+/).filter(Boolean);\n const firstInitial = Array.from(nameParts[0] ?? '')[0] ?? '';\n const lastInitial = nameParts.length > 1 ? Array.from(nameParts[nameParts.length - 1])[0] : '';\n\n return `${firstInitial}${lastInitial}`.toLocaleUpperCase();\n};\n\nexport const Avatar = ({\n accessibleLabel,\n color,\n imageUrl,\n link,\n name,\n role,\n size = 'small',\n}: AvatarProps) => {\n const avatarLabel = accessibleLabel || name || 'User Avatar';\n const initials = name ? getInitials(name) : '';\n\n const avatarFigure = (\n <div\n className={cx(styles.avatar, sizes[size], color && styles[`color-${color}`])}\n data-color={color}\n data-size={size}\n >\n <span className={styles.media}>\n <Figure accessibleLabel={avatarLabel}>\n {imageUrl ? (\n <img\n src={imageUrl}\n alt={avatarLabel}\n />\n ) : initials ? (\n <span\n aria-hidden='true'\n className={styles.initials}\n >\n {initials}\n </span>\n ) : (\n <Icon
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../src/components/avatar/index.tsx"],"sourcesContent":["import cx from 'classix';\n\nimport { Figure } from '@/components/figure';\nimport { Icon, type IconProps } from '@/components/icon';\nimport { Link } from '@/components/link';\n\nimport styles from './styles.module.css';\n\nexport type AvatarColor =\n | 'solibo'\n | 'board'\n | 'owner'\n | 'renter'\n | 'external'\n | '1'\n | '2'\n | '3'\n | '4'\n | '5';\n\nexport type AvatarSize = 'small' | 'medium' | 'large';\n\nexport type AvatarProps = {\n accessibleLabel?: string;\n color?: AvatarColor;\n icon?: IconProps['name'];\n imageUrl?: string;\n link?: string;\n name?: string;\n role?: string;\n size?: AvatarSize;\n text?: string;\n};\n\nconst sizes: Record<AvatarSize, string> = {\n large: styles.large,\n medium: styles.medium,\n small: styles.small,\n};\n\nconst iconSizes: Record<AvatarSize, NonNullable<IconProps['size']>> = {\n large: 'large',\n medium: 'medium',\n small: 'medium',\n};\n\nconst getInitials = (name: string) => {\n const nameParts = name.trim().split(/\\s+/).filter(Boolean);\n const firstInitial = Array.from(nameParts[0] ?? '')[0] ?? '';\n const lastInitial = nameParts.length > 1 ? Array.from(nameParts[nameParts.length - 1])[0] : '';\n\n return `${firstInitial}${lastInitial}`.toLocaleUpperCase();\n};\n\nexport const Avatar = ({\n accessibleLabel,\n color,\n icon,\n imageUrl,\n link,\n name,\n role,\n size = 'small',\n text,\n}: AvatarProps) => {\n const avatarLabel = accessibleLabel || name || 'User Avatar';\n const initials = name ? getInitials(name) : '';\n\n const avatarFigure = (\n <div\n className={cx(styles.avatar, sizes[size], color && styles[`color-${color}`])}\n data-color={color}\n data-size={size}\n >\n <span className={styles.media}>\n <Figure accessibleLabel={avatarLabel}>\n {icon ? (\n <Icon\n name={icon}\n size={iconSizes[size]}\n />\n ) : imageUrl ? (\n <img\n src={imageUrl}\n alt={avatarLabel}\n />\n ) : initials ? (\n <span\n aria-hidden='true'\n className={styles.initials}\n >\n {initials}\n </span>\n ) : (\n <Icon\n name='user'\n size={iconSizes[size]}\n />\n )}\n </Figure>\n </span>\n {(name || role || text) && (\n <span className={styles.details}>\n {name && <strong>{name}</strong>}\n {size === 'small' && (text || role) && (\n <span className={styles.text}>\n {text}\n {text && role && ' | '}\n {role && <span className={styles['role-name']}>{role}</span>}\n </span>\n )}\n {size === 'medium' && (\n <span className={styles.secondary}>\n {text && <span className={styles.text}>{text}</span>}\n {role && <span className={styles.role}>{role}</span>}\n </span>\n )}\n {size === 'large' && role && <span className={styles.role}>{role}</span>}\n {size === 'large' && text && <span className={styles.text}>{text}</span>}\n </span>\n )}\n </div>\n );\n\n return link ? (\n <Link\n className={styles.link}\n to={link}\n >\n {avatarFigure}\n </Link>\n ) : (\n avatarFigure\n );\n};\n"],"names":["sizes","large","styles","medium","small","iconSizes","getInitials","name","nameParts","trim","split","filter","Boolean","firstInitial","Array","from","lastInitial","length","toLocaleUpperCase","Avatar","accessibleLabel","color","icon","imageUrl","link","role","size","text","avatarLabel","initials","avatarFigure","cx","avatar","jsx","media","Figure","Icon","details","jsxs","secondary","Link"],"mappings":"+8BAkCMA,EAAoC,CACxCC,MAAOC,EAAOD,MACdE,OAAQD,EAAOC,OACfC,MAAOF,EAAOE,KAChB,EAEMC,EAAgE,CACpEJ,MAAO,QACPE,OAAQ,SACRC,MAAO,QACT,EAEME,EAAeC,GAAiB,CACpC,MAAMC,EAAYD,EAAKE,KAAAA,EAAOC,MAAM,KAAK,EAAEC,OAAOC,OAAO,EACnDC,EAAeC,MAAMC,KAAKP,EAAU,CAAC,GAAK,EAAE,EAAE,CAAC,GAAK,GACpDQ,EAAcR,EAAUS,OAAS,EAAIH,MAAMC,KAAKP,EAAUA,EAAUS,OAAS,CAAC,CAAC,EAAE,CAAC,EAAI,GAE5F,MAAO,GAAGJ,CAAY,GAAGG,CAAW,GAAGE,kBAAAA,CACzC,EAEaC,EAASA,CAAC,CACrBC,gBAAAA,EACAC,MAAAA,EACAC,KAAAA,EACAC,SAAAA,EACAC,KAAAA,EACAjB,KAAAA,EACAkB,KAAAA,EACAC,KAAAA,EAAO,QACPC,KAAAA,CACW,IAAM,CACjB,MAAMC,EAAcR,GAAmBb,GAAQ,cACzCsB,EAAWtB,EAAOD,EAAYC,CAAI,EAAI,GAEtCuB,SACH,MAAA,CACC,UAAWC,EAAAA,EAAG7B,EAAO8B,OAAQhC,EAAM0B,CAAI,EAAGL,GAASnB,EAAO,SAASmB,CAAK,EAAE,CAAC,EAC3E,aAAYA,EACZ,YAAWK,EAEX,SAAA,CAAAO,EAAAA,IAAC,OAAA,CAAK,UAAW/B,EAAOgC,MACtB,eAACC,EAAAA,OAAA,CAAO,gBAAiBP,EACtBN,SAAAA,EACCW,EAAAA,IAACG,QACC,KAAMd,EACN,KAAMjB,EAAUqB,CAAI,EAAE,EAEtBH,QACD,MAAA,CACC,IAAKA,EACL,IAAKK,EAAY,EAEjBC,EACFI,EAAAA,IAAC,QACC,cAAY,OACZ,UAAW/B,EAAO2B,SAEjBA,WACH,EAEAI,EAAAA,IAACG,EAAAA,MACC,KAAK,OACL,KAAM/B,EAAUqB,CAAI,EAAE,CAAA,CAG5B,CAAA,CACF,GACEnB,GAAQkB,GAAQE,WACf,OAAA,CAAK,UAAWzB,EAAOmC,QACrB9B,SAAAA,CAAAA,GAAQ0B,EAAAA,IAAC,UAAQ1B,SAAAA,CAAAA,CAAK,EACtBmB,IAAS,UAAYC,GAAQF,WAC3B,OAAA,CAAK,UAAWvB,EAAOyB,KACrBA,SAAAA,CAAAA,EACAA,GAAQF,GAAQ,MAChBA,GAAQQ,EAAAA,IAAC,OAAA,CAAK,UAAW/B,EAAO,WAAW,EAAIuB,SAAAA,CAAAA,CAAK,CAAA,EACvD,EAEDC,IAAS,UACRY,EAAAA,KAAC,OAAA,CAAK,UAAWpC,EAAOqC,UACrBZ,SAAAA,CAAAA,GAAQM,EAAAA,IAAC,OAAA,CAAK,UAAW/B,EAAOyB,KAAOA,SAAAA,EAAK,EAC5CF,GAAQQ,EAAAA,IAAC,OAAA,CAAK,UAAW/B,EAAOuB,KAAOA,SAAAA,CAAAA,CAAK,CAAA,EAC/C,EAEDC,IAAS,SAAWD,GAAQQ,EAAAA,IAAC,QAAK,UAAW/B,EAAOuB,KAAOA,SAAAA,CAAAA,CAAK,EAChEC,IAAS,SAAWC,GAAQM,EAAAA,IAAC,QAAK,UAAW/B,EAAOyB,KAAOA,SAAAA,CAAAA,CAAK,CAAA,CAAA,CACnE,CAAA,EAEJ,EAGF,OAAOH,EACLS,EAAAA,IAACO,EAAAA,KAAA,CACC,UAAWtC,EAAOsB,KAClB,GAAIA,EAAK,iBAAA,SAERM,SAAAA,CAAAA,CACH,EAEAA,CAEJ"}
|
|
@@ -1,53 +1,73 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { t as
|
|
3
|
-
import { Figure as
|
|
1
|
+
import { jsx as a, jsxs as i } from "react/jsx-runtime";
|
|
2
|
+
import { t as u } from "../../classix-DG18itHa.js";
|
|
3
|
+
import { Figure as N } from "../figure/index.js";
|
|
4
4
|
import { Icon as h } from "../icon/index.js";
|
|
5
|
-
import { Link as
|
|
6
|
-
import '../../assets/index27.css';const
|
|
7
|
-
avatar:
|
|
8
|
-
small:
|
|
9
|
-
medium:
|
|
10
|
-
large:
|
|
11
|
-
media:
|
|
12
|
-
details:
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
"
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
"color-
|
|
20
|
-
"color-
|
|
21
|
-
"color-
|
|
22
|
-
"color-
|
|
23
|
-
"color-
|
|
24
|
-
"color-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
},
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
5
|
+
import { Link as v } from "../link/index.js";
|
|
6
|
+
import '../../assets/index27.css';const f = "_avatar_lcj2e_1", b = "_small_lcj2e_10", y = "_medium_lcj2e_14", k = "_large_lcj2e_18", x = "_media_lcj2e_22", A = "_details_lcj2e_46", I = "_secondary_lcj2e_66", L = "_text_lcj2e_74", $ = "_role_lcj2e_81", w = "_initials_lcj2e_106", F = "_link_lcj2e_122", l = {
|
|
7
|
+
avatar: f,
|
|
8
|
+
small: b,
|
|
9
|
+
medium: y,
|
|
10
|
+
large: k,
|
|
11
|
+
media: x,
|
|
12
|
+
details: A,
|
|
13
|
+
secondary: I,
|
|
14
|
+
text: L,
|
|
15
|
+
role: $,
|
|
16
|
+
"role-name": "_role-name_lcj2e_82",
|
|
17
|
+
initials: w,
|
|
18
|
+
link: F,
|
|
19
|
+
"color-1": "_color-1_lcj2e_130",
|
|
20
|
+
"color-solibo": "_color-solibo_lcj2e_131",
|
|
21
|
+
"color-2": "_color-2_lcj2e_138",
|
|
22
|
+
"color-board": "_color-board_lcj2e_139",
|
|
23
|
+
"color-3": "_color-3_lcj2e_146",
|
|
24
|
+
"color-owner": "_color-owner_lcj2e_147",
|
|
25
|
+
"color-4": "_color-4_lcj2e_154",
|
|
26
|
+
"color-renter": "_color-renter_lcj2e_155",
|
|
27
|
+
"color-5": "_color-5_lcj2e_162",
|
|
28
|
+
"color-external": "_color-external_lcj2e_163"
|
|
29
|
+
}, B = {
|
|
30
|
+
large: l.large,
|
|
31
|
+
medium: l.medium,
|
|
32
|
+
small: l.small
|
|
33
|
+
}, g = {
|
|
34
|
+
large: "large",
|
|
35
|
+
medium: "medium",
|
|
36
|
+
small: "medium"
|
|
37
|
+
}, C = (_) => {
|
|
38
|
+
const c = _.trim().split(/\s+/).filter(Boolean), n = Array.from(c[0] ?? "")[0] ?? "", t = c.length > 1 ? Array.from(c[c.length - 1])[0] : "";
|
|
39
|
+
return `${n}${t}`.toLocaleUpperCase();
|
|
40
|
+
}, E = ({
|
|
41
|
+
accessibleLabel: _,
|
|
42
|
+
color: c,
|
|
43
|
+
icon: n,
|
|
44
|
+
imageUrl: t,
|
|
45
|
+
link: m,
|
|
46
|
+
name: s,
|
|
38
47
|
role: e,
|
|
39
|
-
size:
|
|
48
|
+
size: r = "small",
|
|
49
|
+
text: o
|
|
40
50
|
}) => {
|
|
41
|
-
const
|
|
42
|
-
/* @__PURE__ */
|
|
43
|
-
(
|
|
44
|
-
|
|
45
|
-
e && /* @__PURE__ */
|
|
51
|
+
const d = _ || s || "User Avatar", j = s ? C(s) : "", p = /* @__PURE__ */ i("div", { className: u(l.avatar, B[r], c && l[`color-${c}`]), "data-color": c, "data-size": r, children: [
|
|
52
|
+
/* @__PURE__ */ a("span", { className: l.media, children: /* @__PURE__ */ a(N, { accessibleLabel: d, children: n ? /* @__PURE__ */ a(h, { name: n, size: g[r] }) : t ? /* @__PURE__ */ a("img", { src: t, alt: d }) : j ? /* @__PURE__ */ a("span", { "aria-hidden": "true", className: l.initials, children: j }) : /* @__PURE__ */ a(h, { name: "user", size: g[r] }) }) }),
|
|
53
|
+
(s || e || o) && /* @__PURE__ */ i("span", { className: l.details, children: [
|
|
54
|
+
s && /* @__PURE__ */ a("strong", { children: s }),
|
|
55
|
+
r === "small" && (o || e) && /* @__PURE__ */ i("span", { className: l.text, children: [
|
|
56
|
+
o,
|
|
57
|
+
o && e && " | ",
|
|
58
|
+
e && /* @__PURE__ */ a("span", { className: l["role-name"], children: e })
|
|
59
|
+
] }),
|
|
60
|
+
r === "medium" && /* @__PURE__ */ i("span", { className: l.secondary, children: [
|
|
61
|
+
o && /* @__PURE__ */ a("span", { className: l.text, children: o }),
|
|
62
|
+
e && /* @__PURE__ */ a("span", { className: l.role, children: e })
|
|
63
|
+
] }),
|
|
64
|
+
r === "large" && e && /* @__PURE__ */ a("span", { className: l.role, children: e }),
|
|
65
|
+
r === "large" && o && /* @__PURE__ */ a("span", { className: l.text, children: o })
|
|
46
66
|
] })
|
|
47
67
|
] });
|
|
48
|
-
return
|
|
68
|
+
return m ? /* @__PURE__ */ a(v, { className: l.link, to: m, "data-component": "avatar", children: p }) : p;
|
|
49
69
|
};
|
|
50
70
|
export {
|
|
51
|
-
|
|
71
|
+
E as Avatar
|
|
52
72
|
};
|
|
53
73
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/avatar/index.tsx"],"sourcesContent":["import cx from 'classix';\n\nimport { Figure } from '@/components/figure';\nimport { Icon } from '@/components/icon';\nimport { Link } from '@/components/link';\n\nimport styles from './styles.module.css';\n\nexport type AvatarColor =\n | 'solibo'\n | 'board'\n | 'owner'\n | 'renter'\n | 'external'\n | '1'\n | '2'\n | '3'\n | '4'\n | '5';\n\nexport type AvatarSize = 'small' | 'medium' | 'large';\n\nexport type AvatarProps = {\n accessibleLabel?: string;\n color?: AvatarColor;\n imageUrl?: string;\n link?: string;\n name?: string;\n role?: string;\n size?: AvatarSize;\n};\n\nconst sizes: Record<AvatarSize, string> = {\n large: styles.large,\n medium: styles.medium,\n small: styles.small,\n};\n\nconst getInitials = (name: string) => {\n const nameParts = name.trim().split(/\\s+/).filter(Boolean);\n const firstInitial = Array.from(nameParts[0] ?? '')[0] ?? '';\n const lastInitial = nameParts.length > 1 ? Array.from(nameParts[nameParts.length - 1])[0] : '';\n\n return `${firstInitial}${lastInitial}`.toLocaleUpperCase();\n};\n\nexport const Avatar = ({\n accessibleLabel,\n color,\n imageUrl,\n link,\n name,\n role,\n size = 'small',\n}: AvatarProps) => {\n const avatarLabel = accessibleLabel || name || 'User Avatar';\n const initials = name ? getInitials(name) : '';\n\n const avatarFigure = (\n <div\n className={cx(styles.avatar, sizes[size], color && styles[`color-${color}`])}\n data-color={color}\n data-size={size}\n >\n <span className={styles.media}>\n <Figure accessibleLabel={avatarLabel}>\n {imageUrl ? (\n <img\n src={imageUrl}\n alt={avatarLabel}\n />\n ) : initials ? (\n <span\n aria-hidden='true'\n className={styles.initials}\n >\n {initials}\n </span>\n ) : (\n <Icon
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/avatar/index.tsx"],"sourcesContent":["import cx from 'classix';\n\nimport { Figure } from '@/components/figure';\nimport { Icon, type IconProps } from '@/components/icon';\nimport { Link } from '@/components/link';\n\nimport styles from './styles.module.css';\n\nexport type AvatarColor =\n | 'solibo'\n | 'board'\n | 'owner'\n | 'renter'\n | 'external'\n | '1'\n | '2'\n | '3'\n | '4'\n | '5';\n\nexport type AvatarSize = 'small' | 'medium' | 'large';\n\nexport type AvatarProps = {\n accessibleLabel?: string;\n color?: AvatarColor;\n icon?: IconProps['name'];\n imageUrl?: string;\n link?: string;\n name?: string;\n role?: string;\n size?: AvatarSize;\n text?: string;\n};\n\nconst sizes: Record<AvatarSize, string> = {\n large: styles.large,\n medium: styles.medium,\n small: styles.small,\n};\n\nconst iconSizes: Record<AvatarSize, NonNullable<IconProps['size']>> = {\n large: 'large',\n medium: 'medium',\n small: 'medium',\n};\n\nconst getInitials = (name: string) => {\n const nameParts = name.trim().split(/\\s+/).filter(Boolean);\n const firstInitial = Array.from(nameParts[0] ?? '')[0] ?? '';\n const lastInitial = nameParts.length > 1 ? Array.from(nameParts[nameParts.length - 1])[0] : '';\n\n return `${firstInitial}${lastInitial}`.toLocaleUpperCase();\n};\n\nexport const Avatar = ({\n accessibleLabel,\n color,\n icon,\n imageUrl,\n link,\n name,\n role,\n size = 'small',\n text,\n}: AvatarProps) => {\n const avatarLabel = accessibleLabel || name || 'User Avatar';\n const initials = name ? getInitials(name) : '';\n\n const avatarFigure = (\n <div\n className={cx(styles.avatar, sizes[size], color && styles[`color-${color}`])}\n data-color={color}\n data-size={size}\n >\n <span className={styles.media}>\n <Figure accessibleLabel={avatarLabel}>\n {icon ? (\n <Icon\n name={icon}\n size={iconSizes[size]}\n />\n ) : imageUrl ? (\n <img\n src={imageUrl}\n alt={avatarLabel}\n />\n ) : initials ? (\n <span\n aria-hidden='true'\n className={styles.initials}\n >\n {initials}\n </span>\n ) : (\n <Icon\n name='user'\n size={iconSizes[size]}\n />\n )}\n </Figure>\n </span>\n {(name || role || text) && (\n <span className={styles.details}>\n {name && <strong>{name}</strong>}\n {size === 'small' && (text || role) && (\n <span className={styles.text}>\n {text}\n {text && role && ' | '}\n {role && <span className={styles['role-name']}>{role}</span>}\n </span>\n )}\n {size === 'medium' && (\n <span className={styles.secondary}>\n {text && <span className={styles.text}>{text}</span>}\n {role && <span className={styles.role}>{role}</span>}\n </span>\n )}\n {size === 'large' && role && <span className={styles.role}>{role}</span>}\n {size === 'large' && text && <span className={styles.text}>{text}</span>}\n </span>\n )}\n </div>\n );\n\n return link ? (\n <Link\n className={styles.link}\n to={link}\n >\n {avatarFigure}\n </Link>\n ) : (\n avatarFigure\n );\n};\n"],"names":["sizes","large","styles","medium","small","iconSizes","getInitials","name","nameParts","trim","split","filter","Boolean","firstInitial","Array","from","lastInitial","length","toLocaleUpperCase","Avatar","accessibleLabel","color","icon","imageUrl","link","role","size","text","avatarLabel","initials","avatarFigure","cx","avatar","jsx","media","Figure","Icon","details","jsxs","secondary","Link"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index31.css');const n=require("react/jsx-runtime"),y=require("../../classix-5H4IWnMA.cjs"),_=require("../badge/index.cjs"),g=require("../icon/index.cjs"),l="
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index31.css');const n=require("react/jsx-runtime"),y=require("../../classix-5H4IWnMA.cjs"),_=require("../badge/index.cjs"),g=require("../icon/index.cjs"),l="_button_15j52_1",m="_danger_15j52_28",p="_tertiary_15j52_37",b="_primary_15j52_44",j="_secondary_15j52_53",t={button:l,danger:m,tertiary:p,primary:b,secondary:j},x={danger:t.danger,primary:t.primary,secondary:t.secondary,tertiary:t.tertiary};function h({badge:o,children:r,className:a,disabled:s=!1,icon:e,onClick:i,ref:c,variant:d="secondary",...u}){return n.jsxs("button",{className:y.t(t.button,x[d],a),disabled:s,onClick:i,ref:c,type:"button",...u,"data-component":"button",children:[e&&n.jsx(g.Icon,{fill:!0,gap:r?"right":void 0,name:e,size:"small"}),r,n.jsx(_.Badge,{variant:"highlight",children:o})]})}exports.Button=h;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import { jsxs as d, jsx as a } from "react/jsx-runtime";
|
|
2
2
|
import { t as _ } from "../../classix-DG18itHa.js";
|
|
3
3
|
import { Badge as p } from "../badge/index.js";
|
|
4
|
-
import { Icon as
|
|
5
|
-
import '../../assets/index31.css';const
|
|
6
|
-
button:
|
|
7
|
-
danger:
|
|
8
|
-
tertiary:
|
|
9
|
-
primary:
|
|
10
|
-
secondary:
|
|
11
|
-
},
|
|
4
|
+
import { Icon as u } from "../icon/index.js";
|
|
5
|
+
import '../../assets/index31.css';const g = "_button_15j52_1", l = "_danger_15j52_28", b = "_tertiary_15j52_37", f = "_primary_15j52_44", j = "_secondary_15j52_53", t = {
|
|
6
|
+
button: g,
|
|
7
|
+
danger: l,
|
|
8
|
+
tertiary: b,
|
|
9
|
+
primary: f,
|
|
10
|
+
secondary: j
|
|
11
|
+
}, h = {
|
|
12
12
|
danger: t.danger,
|
|
13
13
|
primary: t.primary,
|
|
14
14
|
secondary: t.secondary,
|
|
@@ -25,8 +25,8 @@ function I({
|
|
|
25
25
|
variant: c = "secondary",
|
|
26
26
|
...m
|
|
27
27
|
}) {
|
|
28
|
-
return /* @__PURE__ */ d("button", { className: _(t.button,
|
|
29
|
-
n && /* @__PURE__ */ a(
|
|
28
|
+
return /* @__PURE__ */ d("button", { className: _(t.button, h[c], e), disabled: s, onClick: i, ref: y, type: "button", ...m, "data-component": "button", children: [
|
|
29
|
+
n && /* @__PURE__ */ a(u, { fill: !0, gap: r ? "right" : void 0, name: n, size: "small" }),
|
|
30
30
|
r,
|
|
31
31
|
/* @__PURE__ */ a(p, { variant: "highlight", children: o })
|
|
32
32
|
] });
|