@clicoh/orion-library 1.2.0-beta.20 → 1.2.0-beta.21
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/assets/avatares/caja-chispa.png +0 -0
- package/assets/avatares/caja.png +0 -0
- package/assets/avatares/cohete.png +0 -0
- package/assets/avatares/dino.png +0 -0
- package/assets/avatares/pulpo-lentes.png +0 -0
- package/assets/avatares/pulpo-verde.png +0 -0
- package/assets/avatares/pulpo.png +0 -0
- package/assets/cifras/alerta.png +0 -0
- package/assets/cifras/duda.png +0 -0
- package/assets/cifras/error.png +0 -0
- package/assets/cifras/monedas.png +0 -0
- package/assets/cifras/reloj.png +0 -0
- package/assets/cifras/visto.png +0 -0
- package/assets/css/expresivo.css +111 -10
- package/dist/components/03-organisms/DataTable/DataTable.d.ts.map +1 -1
- package/dist/components/03-organisms/DataTable/DataTable.jsx +1 -1
- package/dist/components/03-organisms/DataTable/DataTable.jsx.map +1 -1
- package/expresivo/ExpChip/ExpChip.d.ts +15 -5
- package/expresivo/ExpChip/ExpChip.d.ts.map +1 -1
- package/expresivo/ExpChip/ExpChip.jsx +25 -4
- package/expresivo/ExpChip/ExpChip.jsx.map +1 -1
- package/expresivo/ExpJourneyTrack/ExpJourneyTrack.d.ts +4 -0
- package/expresivo/ExpJourneyTrack/ExpJourneyTrack.d.ts.map +1 -1
- package/expresivo/ExpJourneyTrack/ExpJourneyTrack.jsx +6 -2
- package/expresivo/ExpJourneyTrack/ExpJourneyTrack.jsx.map +1 -1
- package/expresivo/ExpLadder/ExpLadder.d.ts +42 -0
- package/expresivo/ExpLadder/ExpLadder.d.ts.map +1 -0
- package/expresivo/ExpLadder/ExpLadder.jsx +82 -0
- package/expresivo/ExpLadder/ExpLadder.jsx.map +1 -0
- package/expresivo/ExpLadder/index.d.ts +3 -0
- package/expresivo/ExpLadder/index.d.ts.map +1 -0
- package/expresivo/ExpLadder/index.js +2 -0
- package/expresivo/ExpLadder/index.js.map +1 -0
- package/expresivo/ExpPageHero/ExpPageHero.d.ts +3 -3
- package/expresivo/ExpPageHero/ExpPageHero.jsx +4 -4
- package/expresivo/ExpPageHero/ExpPageHero.jsx.map +1 -1
- package/expresivo/ExpPillButton/ExpPillButton.d.ts +4 -1
- package/expresivo/ExpPillButton/ExpPillButton.d.ts.map +1 -1
- package/expresivo/ExpPillButton/ExpPillButton.jsx +6 -4
- package/expresivo/ExpPillButton/ExpPillButton.jsx.map +1 -1
- package/expresivo/ExpRepoAvatar/ExpRepoAvatar.d.ts +28 -0
- package/expresivo/ExpRepoAvatar/ExpRepoAvatar.d.ts.map +1 -0
- package/expresivo/ExpRepoAvatar/ExpRepoAvatar.jsx +32 -0
- package/expresivo/ExpRepoAvatar/ExpRepoAvatar.jsx.map +1 -0
- package/expresivo/ExpRepoAvatar/catalog.d.ts +6 -0
- package/expresivo/ExpRepoAvatar/catalog.d.ts.map +1 -0
- package/expresivo/ExpRepoAvatar/catalog.js +18 -0
- package/expresivo/ExpRepoAvatar/catalog.js.map +1 -0
- package/expresivo/ExpRepoAvatar/index.d.ts +4 -0
- package/expresivo/ExpRepoAvatar/index.d.ts.map +1 -0
- package/expresivo/ExpRepoAvatar/index.js +2 -0
- package/expresivo/ExpRepoAvatar/index.js.map +1 -0
- package/expresivo/ExpSearchField/ExpSearchField.d.ts +49 -0
- package/expresivo/ExpSearchField/ExpSearchField.d.ts.map +1 -0
- package/expresivo/ExpSearchField/ExpSearchField.jsx +81 -0
- package/expresivo/ExpSearchField/ExpSearchField.jsx.map +1 -0
- package/expresivo/ExpSearchField/index.d.ts +3 -0
- package/expresivo/ExpSearchField/index.d.ts.map +1 -0
- package/expresivo/ExpSearchField/index.js +2 -0
- package/expresivo/ExpSearchField/index.js.map +1 -0
- package/expresivo/ExpStatIcon/ExpStatIcon.d.ts +25 -0
- package/expresivo/ExpStatIcon/ExpStatIcon.d.ts.map +1 -0
- package/expresivo/ExpStatIcon/ExpStatIcon.jsx +29 -0
- package/expresivo/ExpStatIcon/ExpStatIcon.jsx.map +1 -0
- package/expresivo/ExpStatIcon/catalog.d.ts +6 -0
- package/expresivo/ExpStatIcon/catalog.d.ts.map +1 -0
- package/expresivo/ExpStatIcon/catalog.js +16 -0
- package/expresivo/ExpStatIcon/catalog.js.map +1 -0
- package/expresivo/ExpStatIcon/index.d.ts +4 -0
- package/expresivo/ExpStatIcon/index.d.ts.map +1 -0
- package/expresivo/ExpStatIcon/index.js +2 -0
- package/expresivo/ExpStatIcon/index.js.map +1 -0
- package/expresivo/index.d.ts +4 -0
- package/expresivo/index.d.ts.map +1 -1
- package/expresivo/index.js +4 -0
- package/expresivo/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -35,8 +35,8 @@ export type ExpPageHeroProps = {
|
|
|
35
35
|
* On wide screens it draws a band with a dotted lavender background. With
|
|
36
36
|
* `collapse`, a corner button tucks it down to the title, and the mascot hangs
|
|
37
37
|
* from a thread instead; the consumer keeps the state. On small screens it is
|
|
38
|
-
* a plain title row without eyebrow, mascot or bubble, and
|
|
39
|
-
* effect.
|
|
38
|
+
* a plain title row without eyebrow, description, mascot or bubble, and
|
|
39
|
+
* `collapse` has no effect. Children still show there.
|
|
40
40
|
*
|
|
41
41
|
* Outside an `ExpScope` it renders the core title row of `DashboardTemplate`:
|
|
42
42
|
* title, adornment, description, children and actions.
|
|
@@ -69,7 +69,7 @@ export type ExpPageHeroProps = {
|
|
|
69
69
|
* @param {ReactNode} [props.eyebrow] - Short uppercase line above the title, only on wide screens.
|
|
70
70
|
* @param {'h3' | 'h4' | 'h5'} [props.headingLevel='h3'] - Heading level of the title.
|
|
71
71
|
* @param {ReactNode} [props.titleAdornment] - Content next to the title, such as a `Badge`.
|
|
72
|
-
* @param {ReactNode} [props.description] - Text under the title; hidden while collapsed.
|
|
72
|
+
* @param {ReactNode} [props.description] - Text under the title, only on wide screens; hidden while collapsed.
|
|
73
73
|
* @param {ReactNode} [props.children] - Content under the description, such as stat chips; hidden while collapsed.
|
|
74
74
|
* @param {ReactNode} [props.actions] - Content on the right, such as buttons; it moves under the title on small screens.
|
|
75
75
|
* @param {ExpMascotName} [props.mascot] - Mascot on the right, 104px; 56px and hanging while collapsed.
|
|
@@ -14,8 +14,8 @@ import { useExpScopeOptions } from '../ExpScope/ExpScope';
|
|
|
14
14
|
* On wide screens it draws a band with a dotted lavender background. With
|
|
15
15
|
* `collapse`, a corner button tucks it down to the title, and the mascot hangs
|
|
16
16
|
* from a thread instead; the consumer keeps the state. On small screens it is
|
|
17
|
-
* a plain title row without eyebrow, mascot or bubble, and
|
|
18
|
-
* effect.
|
|
17
|
+
* a plain title row without eyebrow, description, mascot or bubble, and
|
|
18
|
+
* `collapse` has no effect. Children still show there.
|
|
19
19
|
*
|
|
20
20
|
* Outside an `ExpScope` it renders the core title row of `DashboardTemplate`:
|
|
21
21
|
* title, adornment, description, children and actions.
|
|
@@ -48,7 +48,7 @@ import { useExpScopeOptions } from '../ExpScope/ExpScope';
|
|
|
48
48
|
* @param {ReactNode} [props.eyebrow] - Short uppercase line above the title, only on wide screens.
|
|
49
49
|
* @param {'h3' | 'h4' | 'h5'} [props.headingLevel='h3'] - Heading level of the title.
|
|
50
50
|
* @param {ReactNode} [props.titleAdornment] - Content next to the title, such as a `Badge`.
|
|
51
|
-
* @param {ReactNode} [props.description] - Text under the title; hidden while collapsed.
|
|
51
|
+
* @param {ReactNode} [props.description] - Text under the title, only on wide screens; hidden while collapsed.
|
|
52
52
|
* @param {ReactNode} [props.children] - Content under the description, such as stat chips; hidden while collapsed.
|
|
53
53
|
* @param {ReactNode} [props.actions] - Content on the right, such as buttons; it moves under the title on small screens.
|
|
54
54
|
* @param {ExpMascotName} [props.mascot] - Mascot on the right, 104px; 56px and hanging while collapsed.
|
|
@@ -88,7 +88,7 @@ export function ExpPageHero({ title, eyebrow, headingLevel = 'h3', titleAdornmen
|
|
|
88
88
|
{eyebrow}
|
|
89
89
|
</p>)}
|
|
90
90
|
{titleRow}
|
|
91
|
-
{!!description && (<div className={clsx('text-gray-1 dark:text-gray-2 max-w-[680px] text-sm leading-[22px] text-pretty', collapsed && 'lg:
|
|
91
|
+
{!!description && (<div className={clsx('text-gray-1 dark:text-gray-2 hidden max-w-[680px] text-sm leading-[22px] text-pretty', !collapsed && 'lg:block')}>
|
|
92
92
|
{description}
|
|
93
93
|
</div>)}
|
|
94
94
|
{!!children && (<div className={clsx('mt-2 w-full', collapsed && 'lg:hidden')}>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExpPageHero.jsx","sourceRoot":"","sources":["../../src/expresivo/ExpPageHero/ExpPageHero.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAuC,KAAK,EAAE,MAAM,OAAO,CAAC;AACnE,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,wCAAwC,CAAC;AAC3E,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAEnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAiC1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,MAAM,UAAU,WAAW,CAAC,EAC1B,KAAK,EACL,OAAO,EACP,YAAY,GAAG,IAAI,EACnB,cAAc,EACd,WAAW,EACX,QAAQ,EACR,OAAO,EACP,MAAM,EACN,MAAM,EACN,QAAQ,EACR,GAAG,SAAS,EACK;IACjB,MAAM,OAAO,GAAG,kBAAkB,EAAE,CAAC;IACrC,MAAM,WAAW,GAAG,KAAK,EAAE,CAAC;IAC5B,MAAM,EAAE,GAAG,SAAS,CAAC,EAAE,IAAI,WAAW,CAAC;IACvC,MAAM,SAAS,GAAG,CAAC,CAAC,QAAQ,EAAE,SAAS,CAAC;IACxC,MAAM,QAAQ,GAAG,CAAC,CAAC,MAAM,IAAI,CAAC,CAAC,MAAM,CAAC;IAEtC,MAAM,QAAQ,GAAG,CACf,CAAC,GAAG,CAAC,SAAS,CAAC,qDAAqD,CAClE;MAAA,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,OAAO,CAC9C;MAAA,CAAC,cAAc,CACjB;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;IAEF,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,OAAO,CACL,CAAC,GAAG,CACF,IAAI,SAAS,CAAC,CACd,SAAS,CAAC,CAAC,IAAI,CACb,gEAAgE,EAChE,SAAS,CAAC,SAAS,CACpB,CAAC,CAEF;QAAA,CAAC,GAAG,CAAC,SAAS,CAAC,6BAA6B,CAC1C;UAAA,CAAC,QAAQ,CACT;UAAA,CAAC,CAAC,CAAC,WAAW,IAAI,CAChB,CAAC,GAAG,CAAC,SAAS,CAAC,sCAAsC,CACnD;cAAA,CAAC,WAAW,CACd;YAAA,EAAE,GAAG,CAAC,CACP,CACD;UAAA,CAAC,QAAQ,CACX;QAAA,EAAE,GAAG,CACL;QAAA,CAAC,OAAO,CACV;MAAA,EAAE,GAAG,CAAC,CACP,CAAC;IACJ,CAAC;IAED,OAAO,CACL,CAAC,GAAG,CACF,IAAI,SAAS,CAAC,CACd,EAAE,CAAC,CAAC,EAAE,CAAC,CACP,UAAU,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,CACjD,SAAS,CAAC,CAAC,IAAI,CACb,2GAA2G,EAC3G,SAAS;YACP,CAAC,CAAC,4CAA4C;YAC9C,CAAC,CAAC,iBAAiB,EACrB,CAAC,SAAS,IAAI,CAAC,CAAC,QAAQ,IAAI,CAAC,QAAQ,IAAI,UAAU,EACnD,SAAS,CAAC,SAAS,CACpB,CAAC,CAEF;MAAA,CAAC,GAAG,CAAC,SAAS,CAAC,6DAA6D,CAC1E;QAAA,CAAC,CAAC,CAAC,OAAO,IAAI,CACZ,CAAC,CAAC,CACA,SAAS,CAAC,CAAC,IAAI,CACb,0GAA0G,EAC1G,CAAC,SAAS,IAAI,UAAU,CACzB,CAAC,CAEF;YAAA,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,EAAE,EAAE,IAAI,CACjC;YAAA,CAAC,OAAO,CACV;UAAA,EAAE,CAAC,CAAC,CACL,CACD;QAAA,CAAC,QAAQ,CACT;QAAA,CAAC,CAAC,CAAC,WAAW,IAAI,CAChB,CAAC,GAAG,CACF,SAAS,CAAC,CAAC,IAAI,CACb
|
|
1
|
+
{"version":3,"file":"ExpPageHero.jsx","sourceRoot":"","sources":["../../src/expresivo/ExpPageHero/ExpPageHero.tsx"],"names":[],"mappings":"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"}
|
|
@@ -10,6 +10,8 @@ export type ExpPillButtonProps = {
|
|
|
10
10
|
busyLabel?: string;
|
|
11
11
|
/** Takes the full width of its container. */
|
|
12
12
|
block?: boolean;
|
|
13
|
+
/** Fills the height of its container and does not lift, for a button inside a field. */
|
|
14
|
+
flush?: boolean;
|
|
13
15
|
} & ButtonHTMLAttributes<HTMLButtonElement>;
|
|
14
16
|
/**
|
|
15
17
|
* Light pill-shaped call to action, the same 44px height as the core
|
|
@@ -35,10 +37,11 @@ export type ExpPillButtonProps = {
|
|
|
35
37
|
* @param {boolean} [props.busy=false] - Blocks the button and animates its glyph.
|
|
36
38
|
* @param {string} [props.busyLabel] - Label shown while `busy`.
|
|
37
39
|
* @param {boolean} [props.block=false] - Takes the full width of its container.
|
|
40
|
+
* @param {boolean} [props.flush=false] - Fills the height of its container and does not lift, for a button inside a field.
|
|
38
41
|
* @param {ReactNode} props.children - Label of the action.
|
|
39
42
|
* @param {ButtonHTMLAttributes<HTMLButtonElement>} restProps - Additional properties for the button element.
|
|
40
43
|
*
|
|
41
44
|
* @returns {ReactNode} The rendered pill, or a core `Button` outside an `ExpScope`.
|
|
42
45
|
*/
|
|
43
|
-
export declare function ExpPillButton({ tone, icon, busy, busyLabel, block, disabled, children, ...restProps }: ExpPillButtonProps): ReactNode;
|
|
46
|
+
export declare function ExpPillButton({ tone, icon, busy, busyLabel, block, flush, disabled, children, ...restProps }: ExpPillButtonProps): ReactNode;
|
|
44
47
|
//# sourceMappingURL=ExpPillButton.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExpPillButton.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpPillButton/ExpPillButton.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAW7D,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,MAAM,CAAC;AAEjD,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;AAEnE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,sEAAsE;IACtE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"ExpPillButton.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpPillButton/ExpPillButton.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAW7D,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,MAAM,CAAC;AAEjD,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;AAEnE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,sEAAsE;IACtE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,wFAAwF;IACxF,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAiC5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,aAAa,CAAC,EAC5B,IAAc,EACd,IAAa,EACb,IAAY,EACZ,SAAS,EACT,KAAa,EACb,KAAa,EACb,QAAgB,EAChB,QAAQ,EACR,GAAG,SAAS,EACb,EAAE,kBAAkB,GAAG,SAAS,CAiEhC"}
|
|
@@ -10,14 +10,15 @@ const fallbackIconMap = {
|
|
|
10
10
|
enter: <FiLogIn />,
|
|
11
11
|
none: undefined,
|
|
12
12
|
};
|
|
13
|
+
const liftClass = 'hover:-translate-y-px active:translate-y-0 active:scale-[.98]';
|
|
13
14
|
const toneMap = {
|
|
14
15
|
brand: {
|
|
15
|
-
idle: clsx('bg-lavender dark:bg-lavender-dark text-white shadow-[0_3px_10px_rgba(106,93,249,0.22)]', 'hover:from-lavender hover:to-violet hover:bg-linear-135 hover:shadow-[0_8px_20px_rgba(200,84,228,0.28)]'
|
|
16
|
+
idle: clsx('bg-lavender dark:bg-lavender-dark text-white shadow-[0_3px_10px_rgba(106,93,249,0.22)]', 'hover:from-lavender hover:to-violet hover:bg-linear-135 hover:shadow-[0_8px_20px_rgba(200,84,228,0.28)]'),
|
|
16
17
|
busy: 'bg-lavender dark:bg-lavender-dark cursor-progress text-white shadow-[0_3px_10px_rgba(106,93,249,0.22)]',
|
|
17
18
|
disabled: 'bg-gray-5 text-gray-2 dark:bg-gray-dark-1 cursor-not-allowed',
|
|
18
19
|
},
|
|
19
20
|
soft: {
|
|
20
|
-
idle: clsx('bg-lavender-2 text-lavender dark:bg-lavender-dark-1 dark:text-lavender-dark', 'hover:bg-lavender-1
|
|
21
|
+
idle: clsx('bg-lavender-2 text-lavender dark:bg-lavender-dark-1 dark:text-lavender-dark', 'hover:bg-lavender-1'),
|
|
21
22
|
busy: 'bg-lavender-2 text-lavender dark:bg-lavender-dark-1 dark:text-lavender-dark cursor-progress',
|
|
22
23
|
disabled: 'bg-gray-5 text-gray-2 dark:bg-gray-dark-1 cursor-not-allowed',
|
|
23
24
|
},
|
|
@@ -46,12 +47,13 @@ const toneMap = {
|
|
|
46
47
|
* @param {boolean} [props.busy=false] - Blocks the button and animates its glyph.
|
|
47
48
|
* @param {string} [props.busyLabel] - Label shown while `busy`.
|
|
48
49
|
* @param {boolean} [props.block=false] - Takes the full width of its container.
|
|
50
|
+
* @param {boolean} [props.flush=false] - Fills the height of its container and does not lift, for a button inside a field.
|
|
49
51
|
* @param {ReactNode} props.children - Label of the action.
|
|
50
52
|
* @param {ButtonHTMLAttributes<HTMLButtonElement>} restProps - Additional properties for the button element.
|
|
51
53
|
*
|
|
52
54
|
* @returns {ReactNode} The rendered pill, or a core `Button` outside an `ExpScope`.
|
|
53
55
|
*/
|
|
54
|
-
export function ExpPillButton({ tone = 'brand', icon = 'lens', busy = false, busyLabel, block = false, disabled = false, children, ...restProps }) {
|
|
56
|
+
export function ExpPillButton({ tone = 'brand', icon = 'lens', busy = false, busyLabel, block = false, flush = false, disabled = false, children, ...restProps }) {
|
|
55
57
|
const inScope = useExpScope();
|
|
56
58
|
const label = busy && busyLabel ? busyLabel : children;
|
|
57
59
|
if (!inScope) {
|
|
@@ -61,7 +63,7 @@ export function ExpPillButton({ tone = 'brand', icon = 'lens', busy = false, bus
|
|
|
61
63
|
}
|
|
62
64
|
const state = disabled ? 'disabled' : busy ? 'busy' : 'idle';
|
|
63
65
|
const hasDisc = tone === 'brand' && (icon === 'lens' || icon === 'sync');
|
|
64
|
-
return (<button {...restProps} disabled={disabled || busy} aria-busy={busy || undefined} className={clsx('
|
|
66
|
+
return (<button {...restProps} disabled={disabled || busy} aria-busy={busy || undefined} className={clsx('items-center gap-2.5 rounded-full text-sm leading-5 font-semibold whitespace-nowrap', 'transition-[background-color,box-shadow,translate,scale] duration-200 motion-reduce:translate-none motion-reduce:scale-none motion-reduce:transition-none', flush ? 'h-full' : 'h-11', !flush && state === 'idle' && liftClass, block ? 'flex w-full justify-center' : 'inline-flex', icon === 'none' && 'px-6', icon !== 'none' && (hasDisc ? 'pr-[22px] pl-1.5' : 'pr-[18px] pl-3'), toneMap[tone][state], restProps.className)}>
|
|
65
67
|
{tone === 'brand' && icon === 'lens' && (<span aria-hidden="true" className={clsx('flex size-8 shrink-0 items-center justify-center rounded-full', disabled ? 'bg-gray-6' : 'bg-white')}>
|
|
66
68
|
<LensGlyph size={22} busy={busy} disabled={disabled}/>
|
|
67
69
|
</span>)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExpPillButton.jsx","sourceRoot":"","sources":["../../src/expresivo/ExpPillButton/ExpPillButton.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAChE,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EACL,UAAU,EACV,SAAS,EACT,cAAc,EACd,SAAS,GACV,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"ExpPillButton.jsx","sourceRoot":"","sources":["../../src/expresivo/ExpPillButton/ExpPillButton.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import type { HTMLAttributes, ReactNode } from 'react';
|
|
2
|
+
import { type ExpRepoAvatarName } from './catalog';
|
|
3
|
+
export type ExpRepoAvatarProps = {
|
|
4
|
+
name: ExpRepoAvatarName;
|
|
5
|
+
/** Width and height on screen, in pixels. */
|
|
6
|
+
size?: number;
|
|
7
|
+
} & Omit<HTMLAttributes<HTMLSpanElement>, 'children'>;
|
|
8
|
+
/**
|
|
9
|
+
* Little creature that stands for a repository next to its name. Decorative:
|
|
10
|
+
* always `aria-hidden`, so the repo name next to it carries the meaning.
|
|
11
|
+
*
|
|
12
|
+
* Outside an `ExpScope`, or with `mascots="hidden"`, it renders nothing.
|
|
13
|
+
*
|
|
14
|
+
* @component
|
|
15
|
+
* @example
|
|
16
|
+
* <span className="flex items-center gap-2">
|
|
17
|
+
* <ExpRepoAvatar name="pulpo-lentes" size={36} />
|
|
18
|
+
* core-logistics
|
|
19
|
+
* </span>
|
|
20
|
+
*
|
|
21
|
+
* @param {ExpRepoAvatarProps} props - The properties of the ExpRepoAvatar component.
|
|
22
|
+
* @param {ExpRepoAvatarName} props.name - Avatar from the catalog.
|
|
23
|
+
* @param {number} [props.size=32] - Width and height on screen, in pixels.
|
|
24
|
+
*
|
|
25
|
+
* @returns {ReactNode} The avatar, or nothing outside an `ExpScope`.
|
|
26
|
+
*/
|
|
27
|
+
export declare function ExpRepoAvatar({ name, size, ...restProps }: ExpRepoAvatarProps): ReactNode;
|
|
28
|
+
//# sourceMappingURL=ExpRepoAvatar.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ExpRepoAvatar.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpRepoAvatar/ExpRepoAvatar.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,EAAE,KAAK,iBAAiB,EAAqB,MAAM,WAAW,CAAC;AAEtE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,EAAE,iBAAiB,CAAC;IACxB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,GAAG,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC,CAAC;AAEtD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,IAAS,EACT,GAAG,SAAS,EACb,EAAE,kBAAkB,GAAG,SAAS,CAqBhC"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import clsx from 'clsx';
|
|
3
|
+
import { useExpScopeOptions } from '../ExpScope/ExpScope';
|
|
4
|
+
import { repoAvatarCatalog } from './catalog';
|
|
5
|
+
/**
|
|
6
|
+
* Little creature that stands for a repository next to its name. Decorative:
|
|
7
|
+
* always `aria-hidden`, so the repo name next to it carries the meaning.
|
|
8
|
+
*
|
|
9
|
+
* Outside an `ExpScope`, or with `mascots="hidden"`, it renders nothing.
|
|
10
|
+
*
|
|
11
|
+
* @component
|
|
12
|
+
* @example
|
|
13
|
+
* <span className="flex items-center gap-2">
|
|
14
|
+
* <ExpRepoAvatar name="pulpo-lentes" size={36} />
|
|
15
|
+
* core-logistics
|
|
16
|
+
* </span>
|
|
17
|
+
*
|
|
18
|
+
* @param {ExpRepoAvatarProps} props - The properties of the ExpRepoAvatar component.
|
|
19
|
+
* @param {ExpRepoAvatarName} props.name - Avatar from the catalog.
|
|
20
|
+
* @param {number} [props.size=32] - Width and height on screen, in pixels.
|
|
21
|
+
*
|
|
22
|
+
* @returns {ReactNode} The avatar, or nothing outside an `ExpScope`.
|
|
23
|
+
*/
|
|
24
|
+
export function ExpRepoAvatar({ name, size = 32, ...restProps }) {
|
|
25
|
+
const options = useExpScopeOptions();
|
|
26
|
+
if (!options || options.mascots === 'hidden')
|
|
27
|
+
return null;
|
|
28
|
+
return (<span {...restProps} aria-hidden="true" className={clsx('inline-flex shrink-0', restProps.className)}>
|
|
29
|
+
<img src={repoAvatarCatalog[name].src} alt="" width={size} height={size} draggable={false} className="block object-contain"/>
|
|
30
|
+
</span>);
|
|
31
|
+
}
|
|
32
|
+
//# sourceMappingURL=ExpRepoAvatar.jsx.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ExpRepoAvatar.jsx","sourceRoot":"","sources":["../../src/expresivo/ExpRepoAvatar/ExpRepoAvatar.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAA0B,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAQtE;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,UAAU,aAAa,CAAC,EAC5B,IAAI,EACJ,IAAI,GAAG,EAAE,EACT,GAAG,SAAS,EACO;IACnB,MAAM,OAAO,GAAG,kBAAkB,EAAE,CAAC;IAErC,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,OAAO,KAAK,QAAQ;QAAE,OAAO,IAAI,CAAC;IAE1D,OAAO,CACL,CAAC,IAAI,CACH,IAAI,SAAS,CAAC,CACd,WAAW,CAAC,MAAM,CAClB,SAAS,CAAC,CAAC,IAAI,CAAC,sBAAsB,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC,CAE7D;MAAA,CAAC,GAAG,CACF,GAAG,CAAC,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CACjC,GAAG,CAAC,EAAE,CACN,KAAK,CAAC,CAAC,IAAI,CAAC,CACZ,MAAM,CAAC,CAAC,IAAI,CAAC,CACb,SAAS,CAAC,CAAC,KAAK,CAAC,CACjB,SAAS,CAAC,sBAAsB,EAEpC;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import type { StaticImageData } from 'next/image';
|
|
2
|
+
/** Repo avatars, named after the drawing like their files. Which repo gets which one is the consumer's call. */
|
|
3
|
+
export type ExpRepoAvatarName = 'pulpo' | 'pulpo-lentes' | 'pulpo-verde' | 'cohete' | 'dino' | 'caja' | 'caja-chispa';
|
|
4
|
+
/** PNGs about 60px wide: sharp up to 30px on high-density screens. */
|
|
5
|
+
export declare const repoAvatarCatalog: Record<ExpRepoAvatarName, StaticImageData>;
|
|
6
|
+
//# sourceMappingURL=catalog.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"catalog.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpRepoAvatar/catalog.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AASlD,gHAAgH;AAChH,MAAM,MAAM,iBAAiB,GACzB,OAAO,GACP,cAAc,GACd,aAAa,GACb,QAAQ,GACR,MAAM,GACN,MAAM,GACN,aAAa,CAAC;AAElB,sEAAsE;AACtE,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,iBAAiB,EAAE,eAAe,CAQxE,CAAC"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import cajaChispa from '@clicoh/orion-library/assets/avatares/caja-chispa.png';
|
|
2
|
+
import caja from '@clicoh/orion-library/assets/avatares/caja.png';
|
|
3
|
+
import cohete from '@clicoh/orion-library/assets/avatares/cohete.png';
|
|
4
|
+
import dino from '@clicoh/orion-library/assets/avatares/dino.png';
|
|
5
|
+
import pulpoLentes from '@clicoh/orion-library/assets/avatares/pulpo-lentes.png';
|
|
6
|
+
import pulpoVerde from '@clicoh/orion-library/assets/avatares/pulpo-verde.png';
|
|
7
|
+
import pulpo from '@clicoh/orion-library/assets/avatares/pulpo.png';
|
|
8
|
+
/** PNGs about 60px wide: sharp up to 30px on high-density screens. */
|
|
9
|
+
export const repoAvatarCatalog = {
|
|
10
|
+
pulpo,
|
|
11
|
+
'pulpo-lentes': pulpoLentes,
|
|
12
|
+
'pulpo-verde': pulpoVerde,
|
|
13
|
+
cohete,
|
|
14
|
+
dino,
|
|
15
|
+
caja,
|
|
16
|
+
'caja-chispa': cajaChispa,
|
|
17
|
+
};
|
|
18
|
+
//# sourceMappingURL=catalog.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"catalog.js","sourceRoot":"","sources":["../../src/expresivo/ExpRepoAvatar/catalog.ts"],"names":[],"mappings":"AACA,OAAO,UAAU,MAAM,uDAAuD,CAAC;AAC/E,OAAO,IAAI,MAAM,gDAAgD,CAAC;AAClE,OAAO,MAAM,MAAM,kDAAkD,CAAC;AACtE,OAAO,IAAI,MAAM,gDAAgD,CAAC;AAClE,OAAO,WAAW,MAAM,wDAAwD,CAAC;AACjF,OAAO,UAAU,MAAM,uDAAuD,CAAC;AAC/E,OAAO,KAAK,MAAM,iDAAiD,CAAC;AAYpE,sEAAsE;AACtE,MAAM,CAAC,MAAM,iBAAiB,GAA+C;IAC3E,KAAK;IACL,cAAc,EAAE,WAAW;IAC3B,aAAa,EAAE,UAAU;IACzB,MAAM;IACN,IAAI;IACJ,IAAI;IACJ,aAAa,EAAE,UAAU;CAC1B,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpRepoAvatar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,YAAY,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/expresivo/ExpRepoAvatar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC"}
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import { type InputHTMLAttributes, type ReactNode } from 'react';
|
|
2
|
+
export type ExpSearchFieldAction = {
|
|
3
|
+
label: string;
|
|
4
|
+
onClick: () => void;
|
|
5
|
+
/** Blocks the action and animates its lens while the search runs. */
|
|
6
|
+
busy?: boolean;
|
|
7
|
+
/** Label shown while `busy`. */
|
|
8
|
+
busyLabel?: string;
|
|
9
|
+
disabled?: boolean;
|
|
10
|
+
};
|
|
11
|
+
export type ExpSearchFieldProps = {
|
|
12
|
+
/** Accessible name of the field. Not shown: a heading next to it names it. */
|
|
13
|
+
label: string;
|
|
14
|
+
input: Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'placeholder'>;
|
|
15
|
+
placeholder?: string;
|
|
16
|
+
helperText?: string;
|
|
17
|
+
error?: string;
|
|
18
|
+
/** The action inside the field, on the right. Enter runs it too. */
|
|
19
|
+
action: ExpSearchFieldAction;
|
|
20
|
+
};
|
|
21
|
+
/**
|
|
22
|
+
* Search field drawn as a white pill with a soft relief, a lens on the left
|
|
23
|
+
* and its action inside, on the right. On hover it lifts with a lavender
|
|
24
|
+
* halo; on focus the ring turns lavender. Enter runs the action.
|
|
25
|
+
*
|
|
26
|
+
* Outside an `ExpScope` it falls back to the core `Input`, with a search
|
|
27
|
+
* icon, and a `Button` `second` next to it.
|
|
28
|
+
*
|
|
29
|
+
* @component
|
|
30
|
+
* @example
|
|
31
|
+
* <ExpSearchField
|
|
32
|
+
* label="Ticket number"
|
|
33
|
+
* placeholder="Search in Flow"
|
|
34
|
+
* input={{ value, onChange: (event) => setValue(event.target.value) }}
|
|
35
|
+
* action={{ label: 'Search', onClick: search, busy: isSearching }}
|
|
36
|
+
* />
|
|
37
|
+
*
|
|
38
|
+
* @param {ExpSearchFieldProps} props - The properties of the ExpSearchField component.
|
|
39
|
+
* @param {string} props.label - Accessible name of the field.
|
|
40
|
+
* @param {Object} props.input - Properties of the input element, except `type` and `placeholder`.
|
|
41
|
+
* @param {string} [props.placeholder] - Placeholder shown inside the field.
|
|
42
|
+
* @param {string} [props.helperText] - Text under the field.
|
|
43
|
+
* @param {string} [props.error] - Error under the field; marks the field invalid.
|
|
44
|
+
* @param {ExpSearchFieldAction} props.action - The action inside the field: `label`, `onClick`, `busy`, `busyLabel`, `disabled`.
|
|
45
|
+
*
|
|
46
|
+
* @returns {ReactNode} The search field, or a core `Input` and `Button` outside an `ExpScope`.
|
|
47
|
+
*/
|
|
48
|
+
export declare function ExpSearchField({ label, input, placeholder, helperText, error, action, }: ExpSearchFieldProps): ReactNode;
|
|
49
|
+
//# sourceMappingURL=ExpSearchField.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ExpSearchField.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpSearchField/ExpSearchField.tsx"],"names":[],"mappings":"AAIA,OAAO,EACL,KAAK,mBAAmB,EAExB,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAKf,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,qEAAqE;IACrE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,8EAA8E;IAC9E,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,aAAa,CAAC,CAAC;IAC3E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oEAAoE;IACpE,MAAM,EAAE,oBAAoB,CAAC;CAC9B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,KAAK,EACL,WAAW,EACX,UAAU,EACV,KAAK,EACL,MAAM,GACP,EAAE,mBAAmB,GAAG,SAAS,CA0GjC"}
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { Input, Paragraph } from '@clicoh/orion-library';
|
|
3
|
+
import clsx from 'clsx';
|
|
4
|
+
import { useId, } from 'react';
|
|
5
|
+
import { FiSearch } from 'react-icons/fi';
|
|
6
|
+
import { useExpScope } from '../ExpScope/ExpScope';
|
|
7
|
+
import { ExpPillButton } from '../ExpPillButton/ExpPillButton';
|
|
8
|
+
/**
|
|
9
|
+
* Search field drawn as a white pill with a soft relief, a lens on the left
|
|
10
|
+
* and its action inside, on the right. On hover it lifts with a lavender
|
|
11
|
+
* halo; on focus the ring turns lavender. Enter runs the action.
|
|
12
|
+
*
|
|
13
|
+
* Outside an `ExpScope` it falls back to the core `Input`, with a search
|
|
14
|
+
* icon, and a `Button` `second` next to it.
|
|
15
|
+
*
|
|
16
|
+
* @component
|
|
17
|
+
* @example
|
|
18
|
+
* <ExpSearchField
|
|
19
|
+
* label="Ticket number"
|
|
20
|
+
* placeholder="Search in Flow"
|
|
21
|
+
* input={{ value, onChange: (event) => setValue(event.target.value) }}
|
|
22
|
+
* action={{ label: 'Search', onClick: search, busy: isSearching }}
|
|
23
|
+
* />
|
|
24
|
+
*
|
|
25
|
+
* @param {ExpSearchFieldProps} props - The properties of the ExpSearchField component.
|
|
26
|
+
* @param {string} props.label - Accessible name of the field.
|
|
27
|
+
* @param {Object} props.input - Properties of the input element, except `type` and `placeholder`.
|
|
28
|
+
* @param {string} [props.placeholder] - Placeholder shown inside the field.
|
|
29
|
+
* @param {string} [props.helperText] - Text under the field.
|
|
30
|
+
* @param {string} [props.error] - Error under the field; marks the field invalid.
|
|
31
|
+
* @param {ExpSearchFieldAction} props.action - The action inside the field: `label`, `onClick`, `busy`, `busyLabel`, `disabled`.
|
|
32
|
+
*
|
|
33
|
+
* @returns {ReactNode} The search field, or a core `Input` and `Button` outside an `ExpScope`.
|
|
34
|
+
*/
|
|
35
|
+
export function ExpSearchField({ label, input, placeholder, helperText, error, action, }) {
|
|
36
|
+
const inScope = useExpScope();
|
|
37
|
+
const generatedId = useId();
|
|
38
|
+
const id = input.id ?? generatedId;
|
|
39
|
+
const descriptionId = error || helperText ? `${id}-description` : undefined;
|
|
40
|
+
const actionOff = !!action.disabled || !!action.busy;
|
|
41
|
+
const handleKeyDown = (event) => {
|
|
42
|
+
input.onKeyDown?.(event);
|
|
43
|
+
if (event.defaultPrevented || event.key !== 'Enter')
|
|
44
|
+
return;
|
|
45
|
+
event.preventDefault();
|
|
46
|
+
if (!actionOff)
|
|
47
|
+
action.onClick();
|
|
48
|
+
};
|
|
49
|
+
const button = (<ExpPillButton type="button" tone="soft" flush={inScope} busy={action.busy} busyLabel={action.busyLabel} disabled={action.disabled} onClick={action.onClick}>
|
|
50
|
+
{action.label}
|
|
51
|
+
</ExpPillButton>);
|
|
52
|
+
if (!inScope) {
|
|
53
|
+
return (<div className="flex items-start gap-3">
|
|
54
|
+
<div className="min-w-0 flex-1">
|
|
55
|
+
<Input label={label} hideLabel placeholder={placeholder} helperText={helperText} error={error} iconL={<FiSearch />} input={{ ...input, id, type: 'text', onKeyDown: handleKeyDown }}/>
|
|
56
|
+
</div>
|
|
57
|
+
{button}
|
|
58
|
+
</div>);
|
|
59
|
+
}
|
|
60
|
+
return (<div className="w-full max-w-[520px]">
|
|
61
|
+
<div data-state={input.disabled ? 'disabled' : 'idle'} data-invalid={error ? '' : undefined} className="exp-search flex h-11 overflow-hidden rounded-full">
|
|
62
|
+
<label className="flex min-w-0 flex-1 cursor-text items-center gap-3 pl-5">
|
|
63
|
+
<span className="sr-only">{label}</span>
|
|
64
|
+
<svg aria-hidden="true" width={22} height={22} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.4} strokeLinecap="round" className="exp-search-lens shrink-0">
|
|
65
|
+
<circle cx={10.5} cy={10.5} r={6.5}/>
|
|
66
|
+
<path d="M15.5 15.5 21 21"/>
|
|
67
|
+
</svg>
|
|
68
|
+
<input {...input} id={id} type="text" placeholder={placeholder} aria-invalid={error ? true : input['aria-invalid']} aria-describedby={[input['aria-describedby'], descriptionId]
|
|
69
|
+
.filter(Boolean)
|
|
70
|
+
.join(' ') || undefined} onKeyDown={handleKeyDown} className={clsx('exp-search-input placeholder:text-gray-2 min-w-0 flex-1 bg-transparent text-base leading-6 outline-0 disabled:cursor-not-allowed', input.className)}/>
|
|
71
|
+
</label>
|
|
72
|
+
<span className="flex shrink-0">{button}</span>
|
|
73
|
+
</div>
|
|
74
|
+
{!!descriptionId && (<Paragraph id={descriptionId} size="body-2" className={clsx('pt-1.5 pl-5', error
|
|
75
|
+
? 'text-error dark:text-error-dark'
|
|
76
|
+
: 'text-gray-1 dark:text-gray-2')}>
|
|
77
|
+
{error ?? helperText}
|
|
78
|
+
</Paragraph>)}
|
|
79
|
+
</div>);
|
|
80
|
+
}
|
|
81
|
+
//# sourceMappingURL=ExpSearchField.jsx.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ExpSearchField.jsx","sourceRoot":"","sources":["../../src/expresivo/ExpSearchField/ExpSearchField.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpSearchField/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EACV,oBAAoB,EACpB,mBAAmB,GACpB,MAAM,kBAAkB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/expresivo/ExpSearchField/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import type { HTMLAttributes, ReactNode } from 'react';
|
|
2
|
+
import { type ExpStatIconName } from './catalog';
|
|
3
|
+
export type ExpStatIconProps = {
|
|
4
|
+
name: ExpStatIconName;
|
|
5
|
+
/** Width and height on screen, in pixels. */
|
|
6
|
+
size?: number;
|
|
7
|
+
} & Omit<HTMLAttributes<HTMLSpanElement>, 'children'>;
|
|
8
|
+
/**
|
|
9
|
+
* Colored line icon for the `icon` slot of the core `Stat`. Decorative:
|
|
10
|
+
* always `aria-hidden`, so the label of the stat carries the meaning.
|
|
11
|
+
*
|
|
12
|
+
* Outside an `ExpScope` it renders nothing, and the `Stat` goes without icon.
|
|
13
|
+
*
|
|
14
|
+
* @component
|
|
15
|
+
* @example
|
|
16
|
+
* <Stat label="Failures" value="1" tone="error" icon={<ExpStatIcon name="error" />} />
|
|
17
|
+
*
|
|
18
|
+
* @param {ExpStatIconProps} props - The properties of the ExpStatIcon component.
|
|
19
|
+
* @param {ExpStatIconName} props.name - Icon from the catalog.
|
|
20
|
+
* @param {number} [props.size=28] - Width and height on screen, in pixels.
|
|
21
|
+
*
|
|
22
|
+
* @returns {ReactNode} The icon, or nothing outside an `ExpScope`.
|
|
23
|
+
*/
|
|
24
|
+
export declare function ExpStatIcon({ name, size, ...restProps }: ExpStatIconProps): ReactNode;
|
|
25
|
+
//# sourceMappingURL=ExpStatIcon.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ExpStatIcon.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpStatIcon/ExpStatIcon.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,EAAE,KAAK,eAAe,EAAmB,MAAM,WAAW,CAAC;AAElE,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE,eAAe,CAAC;IACtB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,GAAG,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC,CAAC;AAEtD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,IAAS,EACT,GAAG,SAAS,EACb,EAAE,gBAAgB,GAAG,SAAS,CAqB9B"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import clsx from 'clsx';
|
|
3
|
+
import { useExpScope } from '../ExpScope/ExpScope';
|
|
4
|
+
import { statIconCatalog } from './catalog';
|
|
5
|
+
/**
|
|
6
|
+
* Colored line icon for the `icon` slot of the core `Stat`. Decorative:
|
|
7
|
+
* always `aria-hidden`, so the label of the stat carries the meaning.
|
|
8
|
+
*
|
|
9
|
+
* Outside an `ExpScope` it renders nothing, and the `Stat` goes without icon.
|
|
10
|
+
*
|
|
11
|
+
* @component
|
|
12
|
+
* @example
|
|
13
|
+
* <Stat label="Failures" value="1" tone="error" icon={<ExpStatIcon name="error" />} />
|
|
14
|
+
*
|
|
15
|
+
* @param {ExpStatIconProps} props - The properties of the ExpStatIcon component.
|
|
16
|
+
* @param {ExpStatIconName} props.name - Icon from the catalog.
|
|
17
|
+
* @param {number} [props.size=28] - Width and height on screen, in pixels.
|
|
18
|
+
*
|
|
19
|
+
* @returns {ReactNode} The icon, or nothing outside an `ExpScope`.
|
|
20
|
+
*/
|
|
21
|
+
export function ExpStatIcon({ name, size = 28, ...restProps }) {
|
|
22
|
+
const inScope = useExpScope();
|
|
23
|
+
if (!inScope)
|
|
24
|
+
return null;
|
|
25
|
+
return (<span {...restProps} aria-hidden="true" className={clsx('inline-flex shrink-0', restProps.className)}>
|
|
26
|
+
<img src={statIconCatalog[name].src} alt="" width={size} height={size} draggable={false} className="block object-contain"/>
|
|
27
|
+
</span>);
|
|
28
|
+
}
|
|
29
|
+
//# sourceMappingURL=ExpStatIcon.jsx.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ExpStatIcon.jsx","sourceRoot":"","sources":["../../src/expresivo/ExpStatIcon/ExpStatIcon.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAwB,eAAe,EAAE,MAAM,WAAW,CAAC;AAQlE;;;;;;;;;;;;;;;GAeG;AACH,MAAM,UAAU,WAAW,CAAC,EAC1B,IAAI,EACJ,IAAI,GAAG,EAAE,EACT,GAAG,SAAS,EACK;IACjB,MAAM,OAAO,GAAG,WAAW,EAAE,CAAC;IAE9B,IAAI,CAAC,OAAO;QAAE,OAAO,IAAI,CAAC;IAE1B,OAAO,CACL,CAAC,IAAI,CACH,IAAI,SAAS,CAAC,CACd,WAAW,CAAC,MAAM,CAClB,SAAS,CAAC,CAAC,IAAI,CAAC,sBAAsB,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC,CAE7D;MAAA,CAAC,GAAG,CACF,GAAG,CAAC,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAC/B,GAAG,CAAC,EAAE,CACN,KAAK,CAAC,CAAC,IAAI,CAAC,CACZ,MAAM,CAAC,CAAC,IAAI,CAAC,CACb,SAAS,CAAC,CAAC,KAAK,CAAC,CACjB,SAAS,CAAC,sBAAsB,EAEpC;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import type { StaticImageData } from 'next/image';
|
|
2
|
+
/** Stat icons, named after the drawing like their files. Which figure gets which one is the consumer's call. */
|
|
3
|
+
export type ExpStatIconName = 'duda' | 'visto' | 'alerta' | 'error' | 'reloj' | 'monedas';
|
|
4
|
+
/** PNGs 39px wide: sharp up to about 20px on high-density screens, and soft but legible at 28px. */
|
|
5
|
+
export declare const statIconCatalog: Record<ExpStatIconName, StaticImageData>;
|
|
6
|
+
//# sourceMappingURL=catalog.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"catalog.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpStatIcon/catalog.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAQlD,gHAAgH;AAChH,MAAM,MAAM,eAAe,GACvB,MAAM,GACN,OAAO,GACP,QAAQ,GACR,OAAO,GACP,OAAO,GACP,SAAS,CAAC;AAEd,oGAAoG;AACpG,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,eAAe,EAAE,eAAe,CAOpE,CAAC"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import alerta from '@clicoh/orion-library/assets/cifras/alerta.png';
|
|
2
|
+
import duda from '@clicoh/orion-library/assets/cifras/duda.png';
|
|
3
|
+
import error from '@clicoh/orion-library/assets/cifras/error.png';
|
|
4
|
+
import monedas from '@clicoh/orion-library/assets/cifras/monedas.png';
|
|
5
|
+
import reloj from '@clicoh/orion-library/assets/cifras/reloj.png';
|
|
6
|
+
import visto from '@clicoh/orion-library/assets/cifras/visto.png';
|
|
7
|
+
/** PNGs 39px wide: sharp up to about 20px on high-density screens, and soft but legible at 28px. */
|
|
8
|
+
export const statIconCatalog = {
|
|
9
|
+
duda,
|
|
10
|
+
visto,
|
|
11
|
+
alerta,
|
|
12
|
+
error,
|
|
13
|
+
reloj,
|
|
14
|
+
monedas,
|
|
15
|
+
};
|
|
16
|
+
//# sourceMappingURL=catalog.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"catalog.js","sourceRoot":"","sources":["../../src/expresivo/ExpStatIcon/catalog.ts"],"names":[],"mappings":"AACA,OAAO,MAAM,MAAM,gDAAgD,CAAC;AACpE,OAAO,IAAI,MAAM,8CAA8C,CAAC;AAChE,OAAO,KAAK,MAAM,+CAA+C,CAAC;AAClE,OAAO,OAAO,MAAM,iDAAiD,CAAC;AACtE,OAAO,KAAK,MAAM,+CAA+C,CAAC;AAClE,OAAO,KAAK,MAAM,+CAA+C,CAAC;AAWlE,oGAAoG;AACpG,MAAM,CAAC,MAAM,eAAe,GAA6C;IACvE,IAAI;IACJ,KAAK;IACL,MAAM;IACN,KAAK;IACL,KAAK;IACL,OAAO;CACR,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpStatIcon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtD,YAAY,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/expresivo/ExpStatIcon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}
|
package/expresivo/index.d.ts
CHANGED
|
@@ -15,4 +15,8 @@ export * from './ExpCollapseToggle';
|
|
|
15
15
|
export * from './ExpPageHero';
|
|
16
16
|
export * from './ExpStepBadge';
|
|
17
17
|
export * from './ExpChip';
|
|
18
|
+
export * from './ExpSearchField';
|
|
19
|
+
export * from './ExpLadder';
|
|
20
|
+
export * from './ExpRepoAvatar';
|
|
21
|
+
export * from './ExpStatIcon';
|
|
18
22
|
//# sourceMappingURL=index.d.ts.map
|
package/expresivo/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/expresivo/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/expresivo/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC"}
|
package/expresivo/index.js
CHANGED
|
@@ -15,4 +15,8 @@ export * from './ExpCollapseToggle';
|
|
|
15
15
|
export * from './ExpPageHero';
|
|
16
16
|
export * from './ExpStepBadge';
|
|
17
17
|
export * from './ExpChip';
|
|
18
|
+
export * from './ExpSearchField';
|
|
19
|
+
export * from './ExpLadder';
|
|
20
|
+
export * from './ExpRepoAvatar';
|
|
21
|
+
export * from './ExpStatIcon';
|
|
18
22
|
//# sourceMappingURL=index.js.map
|
package/expresivo/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/expresivo/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/expresivo/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC"}
|