@clicoh/orion-library 1.2.0-beta.11 → 1.2.0-beta.13
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/css/expresivo.css +895 -0
- package/assets/mascotas/svg/bugi-mascota-01-alerta.svg +39 -0
- package/assets/mascotas/svg/bugi-mascota-02-investigando.svg +36 -0
- package/assets/mascotas/svg/bugi-mascota-05-sorprendido.svg +38 -0
- package/assets/mascotas/svg/oculus-mascota-01-feliz.svg +52 -0
- package/assets/mascotas/svg/oculus-mascota-02-investigando.svg +51 -0
- package/assets/mascotas/svg/oculus-mascota-03-dudando.svg +51 -0
- package/assets/mascotas/svg/oculus-mascota-04-analizando-documento.svg +53 -0
- package/assets/mascotas/svg/oculus-mascota-06-celebrando.svg +54 -0
- package/assets/mascotas/svg/oculus-mascota-07-buscando-rapido.svg +57 -0
- package/assets/mascotas/svg/oculus-mascota-08-satisfecho.svg +55 -0
- package/assets/mascotas/webp/fixi-mascota-01-feliz-sm.webp +0 -0
- package/assets/mascotas/webp/fixi-mascota-02-investigando-sm.webp +0 -0
- package/assets/mascotas/webp/fixi-mascota-03-dudando-sm.webp +0 -0
- package/assets/mascotas/webp/fixi-mascota-04-reparando-sm.webp +0 -0
- package/assets/mascotas/webp/fixi-mascota-05-sorprendido-sm.webp +0 -0
- package/assets/mascotas/webp/fixi-mascota-06-celebrando-sm.webp +0 -0
- package/assets/mascotas/webp/fixi-mascota-07-corriendo-sm.webp +0 -0
- package/dist/components/01-atoms/Button/Button.d.ts +18 -1
- package/dist/components/01-atoms/Button/Button.d.ts.map +1 -1
- package/dist/components/01-atoms/Button/Button.jsx +25 -5
- package/dist/components/01-atoms/Button/Button.jsx.map +1 -1
- package/dist/components/01-atoms/CodeBlock/CodeBlock.d.ts +56 -0
- package/dist/components/01-atoms/CodeBlock/CodeBlock.d.ts.map +1 -0
- package/dist/components/01-atoms/CodeBlock/CodeBlock.jsx +97 -0
- package/dist/components/01-atoms/CodeBlock/CodeBlock.jsx.map +1 -0
- package/dist/components/01-atoms/CodeBlock/index.d.ts +2 -0
- package/dist/components/01-atoms/CodeBlock/index.d.ts.map +1 -0
- package/dist/components/01-atoms/CodeBlock/index.js +2 -0
- package/dist/components/01-atoms/CodeBlock/index.js.map +1 -0
- package/dist/components/01-atoms/Heading/Heading.jsx +1 -1
- package/dist/components/01-atoms/Heading/Heading.jsx.map +1 -1
- package/dist/components/01-atoms/Input/Input.d.ts.map +1 -1
- package/dist/components/01-atoms/Input/Input.jsx +9 -7
- package/dist/components/01-atoms/Input/Input.jsx.map +1 -1
- package/dist/components/01-atoms/Input/utils/RenderErrorOrHelperText.d.ts.map +1 -1
- package/dist/components/01-atoms/Input/utils/RenderErrorOrHelperText.jsx +1 -1
- package/dist/components/01-atoms/Input/utils/RenderErrorOrHelperText.jsx.map +1 -1
- package/dist/components/01-atoms/Select/Select.d.ts.map +1 -1
- package/dist/components/01-atoms/Select/Select.jsx +7 -7
- package/dist/components/01-atoms/Select/Select.jsx.map +1 -1
- package/dist/components/01-atoms/Spinner/Spinner.d.ts +24 -3
- package/dist/components/01-atoms/Spinner/Spinner.d.ts.map +1 -1
- package/dist/components/01-atoms/Spinner/Spinner.jsx +30 -4
- package/dist/components/01-atoms/Spinner/Spinner.jsx.map +1 -1
- package/dist/components/01-atoms/Spinner/index.d.ts +1 -0
- package/dist/components/01-atoms/Spinner/index.d.ts.map +1 -1
- package/dist/components/01-atoms/Stat/Stat.d.ts +47 -0
- package/dist/components/01-atoms/Stat/Stat.d.ts.map +1 -0
- package/dist/components/01-atoms/Stat/Stat.jsx +64 -0
- package/dist/components/01-atoms/Stat/Stat.jsx.map +1 -0
- package/dist/components/01-atoms/Stat/index.d.ts +2 -0
- package/dist/components/01-atoms/Stat/index.d.ts.map +1 -0
- package/dist/components/01-atoms/Stat/index.js +2 -0
- package/dist/components/01-atoms/Stat/index.js.map +1 -0
- package/dist/components/01-atoms/Textarea/Textarea.d.ts.map +1 -1
- package/dist/components/01-atoms/Textarea/Textarea.jsx +3 -3
- package/dist/components/01-atoms/Textarea/Textarea.jsx.map +1 -1
- package/dist/components/01-atoms/index.d.ts +2 -0
- package/dist/components/01-atoms/index.d.ts.map +1 -1
- package/dist/components/01-atoms/index.js +2 -0
- package/dist/components/01-atoms/index.js.map +1 -1
- package/dist/components/02-molecules/Accordion/AccordionSection.d.ts.map +1 -1
- package/dist/components/02-molecules/Accordion/AccordionSection.jsx +26 -3
- package/dist/components/02-molecules/Accordion/AccordionSection.jsx.map +1 -1
- package/dist/components/02-molecules/Card/Card.d.ts +74 -0
- package/dist/components/02-molecules/Card/Card.d.ts.map +1 -0
- package/dist/components/02-molecules/Card/Card.jsx +83 -0
- package/dist/components/02-molecules/Card/Card.jsx.map +1 -0
- package/dist/components/02-molecules/Card/index.d.ts +2 -0
- package/dist/components/02-molecules/Card/index.d.ts.map +1 -0
- package/dist/components/02-molecules/Card/index.js +2 -0
- package/dist/components/02-molecules/Card/index.js.map +1 -0
- package/dist/components/02-molecules/DatePicker/DatePicker.d.ts +37 -2
- package/dist/components/02-molecules/DatePicker/DatePicker.d.ts.map +1 -1
- package/dist/components/02-molecules/DatePicker/DatePicker.jsx +187 -32
- package/dist/components/02-molecules/DatePicker/DatePicker.jsx.map +1 -1
- package/dist/components/02-molecules/EmptyState/EmptyState.d.ts +52 -0
- package/dist/components/02-molecules/EmptyState/EmptyState.d.ts.map +1 -0
- package/dist/components/02-molecules/EmptyState/EmptyState.jsx +66 -0
- package/dist/components/02-molecules/EmptyState/EmptyState.jsx.map +1 -0
- package/dist/components/02-molecules/EmptyState/index.d.ts +2 -0
- package/dist/components/02-molecules/EmptyState/index.d.ts.map +1 -0
- package/dist/components/02-molecules/EmptyState/index.js +2 -0
- package/dist/components/02-molecules/EmptyState/index.js.map +1 -0
- package/dist/components/02-molecules/Filter/Filter.d.ts +7 -1
- package/dist/components/02-molecules/Filter/Filter.d.ts.map +1 -1
- package/dist/components/02-molecules/Filter/Filter.jsx +10 -7
- package/dist/components/02-molecules/Filter/Filter.jsx.map +1 -1
- package/dist/components/02-molecules/InlineMessage/InlineMessage.d.ts +15 -1
- package/dist/components/02-molecules/InlineMessage/InlineMessage.d.ts.map +1 -1
- package/dist/components/02-molecules/InlineMessage/InlineMessage.jsx +18 -3
- package/dist/components/02-molecules/InlineMessage/InlineMessage.jsx.map +1 -1
- package/dist/components/02-molecules/Menu/MenuItem.d.ts.map +1 -1
- package/dist/components/02-molecules/Menu/MenuItem.jsx +2 -2
- package/dist/components/02-molecules/Menu/MenuItem.jsx.map +1 -1
- package/dist/components/02-molecules/Menu/MenuList.d.ts.map +1 -1
- package/dist/components/02-molecules/Menu/MenuList.jsx +1 -1
- package/dist/components/02-molecules/Menu/MenuList.jsx.map +1 -1
- package/dist/components/02-molecules/Stepper/Stepper.d.ts +70 -0
- package/dist/components/02-molecules/Stepper/Stepper.d.ts.map +1 -0
- package/dist/components/02-molecules/Stepper/Stepper.jsx +204 -0
- package/dist/components/02-molecules/Stepper/Stepper.jsx.map +1 -0
- package/dist/components/02-molecules/Stepper/index.d.ts +2 -0
- package/dist/components/02-molecules/Stepper/index.d.ts.map +1 -0
- package/dist/components/02-molecules/Stepper/index.js +2 -0
- package/dist/components/02-molecules/Stepper/index.js.map +1 -0
- package/dist/components/02-molecules/Table/Table.d.ts +3 -1
- package/dist/components/02-molecules/Table/Table.d.ts.map +1 -1
- package/dist/components/02-molecules/Table/Table.jsx +6 -5
- package/dist/components/02-molecules/Table/Table.jsx.map +1 -1
- package/dist/components/02-molecules/Timeline/Timeline.d.ts +47 -0
- package/dist/components/02-molecules/Timeline/Timeline.d.ts.map +1 -0
- package/dist/components/02-molecules/Timeline/Timeline.jsx +65 -0
- package/dist/components/02-molecules/Timeline/Timeline.jsx.map +1 -0
- package/dist/components/02-molecules/Timeline/index.d.ts +2 -0
- package/dist/components/02-molecules/Timeline/index.d.ts.map +1 -0
- package/dist/components/02-molecules/Timeline/index.js +2 -0
- package/dist/components/02-molecules/Timeline/index.js.map +1 -0
- package/dist/components/02-molecules/index.d.ts +4 -0
- package/dist/components/02-molecules/index.d.ts.map +1 -1
- package/dist/components/02-molecules/index.js +4 -0
- package/dist/components/02-molecules/index.js.map +1 -1
- package/dist/components/03-organisms/DataTable/DataTable.d.ts +1 -1
- package/dist/components/03-organisms/DataTable/DataTable.d.ts.map +1 -1
- package/dist/components/03-organisms/DataTable/DataTable.jsx.map +1 -1
- package/dist/components/03-organisms/Header/Header.d.ts +3 -1
- package/dist/components/03-organisms/Header/Header.d.ts.map +1 -1
- package/dist/components/03-organisms/Header/Header.jsx +4 -5
- package/dist/components/03-organisms/Header/Header.jsx.map +1 -1
- package/dist/components/04-templates/DashboardTemplate/DashboardTemplate.d.ts +24 -4
- package/dist/components/04-templates/DashboardTemplate/DashboardTemplate.d.ts.map +1 -1
- package/dist/components/04-templates/DashboardTemplate/DashboardTemplate.jsx +31 -8
- package/dist/components/04-templates/DashboardTemplate/DashboardTemplate.jsx.map +1 -1
- package/dist/components/04-templates/DashboardTemplate/HeadingWithTitle.d.ts +6 -2
- package/dist/components/04-templates/DashboardTemplate/HeadingWithTitle.d.ts.map +1 -1
- package/dist/components/04-templates/DashboardTemplate/HeadingWithTitle.jsx +7 -3
- package/dist/components/04-templates/DashboardTemplate/HeadingWithTitle.jsx.map +1 -1
- package/dist/components/04-templates/LoginTemplate/LoginTemplate.d.ts +2 -0
- package/dist/components/04-templates/LoginTemplate/LoginTemplate.d.ts.map +1 -1
- package/dist/components/04-templates/LoginTemplate/LoginTemplate.jsx +2 -1
- package/dist/components/04-templates/LoginTemplate/LoginTemplate.jsx.map +1 -1
- package/expresivo/ExpBubble/ExpBubble.d.ts +51 -0
- package/expresivo/ExpBubble/ExpBubble.d.ts.map +1 -0
- package/expresivo/ExpBubble/ExpBubble.jsx +74 -0
- package/expresivo/ExpBubble/ExpBubble.jsx.map +1 -0
- package/expresivo/ExpBubble/index.d.ts +3 -0
- package/expresivo/ExpBubble/index.d.ts.map +1 -0
- package/expresivo/ExpBubble/index.js +2 -0
- package/expresivo/ExpBubble/index.js.map +1 -0
- package/expresivo/ExpCollapseToggle/ExpCollapseToggle.d.ts +37 -0
- package/expresivo/ExpCollapseToggle/ExpCollapseToggle.d.ts.map +1 -0
- package/expresivo/ExpCollapseToggle/ExpCollapseToggle.jsx +43 -0
- package/expresivo/ExpCollapseToggle/ExpCollapseToggle.jsx.map +1 -0
- package/expresivo/ExpCollapseToggle/index.d.ts +3 -0
- package/expresivo/ExpCollapseToggle/index.d.ts.map +1 -0
- package/expresivo/ExpCollapseToggle/index.js +2 -0
- package/expresivo/ExpCollapseToggle/index.js.map +1 -0
- package/expresivo/ExpGrowBar/ExpGrowBar.d.ts +26 -0
- package/expresivo/ExpGrowBar/ExpGrowBar.d.ts.map +1 -0
- package/expresivo/ExpGrowBar/ExpGrowBar.jsx +39 -0
- package/expresivo/ExpGrowBar/ExpGrowBar.jsx.map +1 -0
- package/expresivo/ExpGrowBar/index.d.ts +3 -0
- package/expresivo/ExpGrowBar/index.d.ts.map +1 -0
- package/expresivo/ExpGrowBar/index.js +2 -0
- package/expresivo/ExpGrowBar/index.js.map +1 -0
- package/expresivo/ExpJourneyTrack/ExpJourneyTrack.d.ts +65 -0
- package/expresivo/ExpJourneyTrack/ExpJourneyTrack.d.ts.map +1 -0
- package/expresivo/ExpJourneyTrack/ExpJourneyTrack.jsx +156 -0
- package/expresivo/ExpJourneyTrack/ExpJourneyTrack.jsx.map +1 -0
- package/expresivo/ExpJourneyTrack/index.d.ts +3 -0
- package/expresivo/ExpJourneyTrack/index.d.ts.map +1 -0
- package/expresivo/ExpJourneyTrack/index.js +2 -0
- package/expresivo/ExpJourneyTrack/index.js.map +1 -0
- package/expresivo/ExpKeyButton/ExpKeyButton.d.ts +49 -0
- package/expresivo/ExpKeyButton/ExpKeyButton.d.ts.map +1 -0
- package/expresivo/ExpKeyButton/ExpKeyButton.jsx +60 -0
- package/expresivo/ExpKeyButton/ExpKeyButton.jsx.map +1 -0
- package/expresivo/ExpKeyButton/index.d.ts +3 -0
- package/expresivo/ExpKeyButton/index.d.ts.map +1 -0
- package/expresivo/ExpKeyButton/index.js +2 -0
- package/expresivo/ExpKeyButton/index.js.map +1 -0
- package/expresivo/ExpLensIcon/ExpLensIcon.d.ts +29 -0
- package/expresivo/ExpLensIcon/ExpLensIcon.d.ts.map +1 -0
- package/expresivo/ExpLensIcon/ExpLensIcon.jsx +29 -0
- package/expresivo/ExpLensIcon/ExpLensIcon.jsx.map +1 -0
- package/expresivo/ExpLensIcon/index.d.ts +3 -0
- package/expresivo/ExpLensIcon/index.d.ts.map +1 -0
- package/expresivo/ExpLensIcon/index.js +2 -0
- package/expresivo/ExpLensIcon/index.js.map +1 -0
- package/expresivo/ExpMascot/ExpMascot.d.ts +38 -0
- package/expresivo/ExpMascot/ExpMascot.d.ts.map +1 -0
- package/expresivo/ExpMascot/ExpMascot.jsx +41 -0
- package/expresivo/ExpMascot/ExpMascot.jsx.map +1 -0
- package/expresivo/ExpMascot/catalog.d.ts +12 -0
- package/expresivo/ExpMascot/catalog.d.ts.map +1 -0
- package/expresivo/ExpMascot/catalog.js +41 -0
- package/expresivo/ExpMascot/catalog.js.map +1 -0
- package/expresivo/ExpMascot/index.d.ts +4 -0
- package/expresivo/ExpMascot/index.d.ts.map +1 -0
- package/expresivo/ExpMascot/index.js +2 -0
- package/expresivo/ExpMascot/index.js.map +1 -0
- package/expresivo/ExpMedalBadge/ExpMedalBadge.d.ts +29 -0
- package/expresivo/ExpMedalBadge/ExpMedalBadge.d.ts.map +1 -0
- package/expresivo/ExpMedalBadge/ExpMedalBadge.jsx +87 -0
- package/expresivo/ExpMedalBadge/ExpMedalBadge.jsx.map +1 -0
- package/expresivo/ExpMedalBadge/index.d.ts +3 -0
- package/expresivo/ExpMedalBadge/index.d.ts.map +1 -0
- package/expresivo/ExpMedalBadge/index.js +2 -0
- package/expresivo/ExpMedalBadge/index.js.map +1 -0
- package/expresivo/ExpPillButton/ExpPillButton.d.ts +44 -0
- package/expresivo/ExpPillButton/ExpPillButton.d.ts.map +1 -0
- package/expresivo/ExpPillButton/ExpPillButton.jsx +75 -0
- package/expresivo/ExpPillButton/ExpPillButton.jsx.map +1 -0
- package/expresivo/ExpPillButton/index.d.ts +3 -0
- package/expresivo/ExpPillButton/index.d.ts.map +1 -0
- package/expresivo/ExpPillButton/index.js +2 -0
- package/expresivo/ExpPillButton/index.js.map +1 -0
- package/expresivo/ExpScope/ExpScope.d.ts +63 -0
- package/expresivo/ExpScope/ExpScope.d.ts.map +1 -0
- package/expresivo/ExpScope/ExpScope.jsx +67 -0
- package/expresivo/ExpScope/ExpScope.jsx.map +1 -0
- package/expresivo/ExpScope/index.d.ts +3 -0
- package/expresivo/ExpScope/index.d.ts.map +1 -0
- package/expresivo/ExpScope/index.js +2 -0
- package/expresivo/ExpScope/index.js.map +1 -0
- package/expresivo/ExpScoreRing/ExpScoreRing.d.ts +35 -0
- package/expresivo/ExpScoreRing/ExpScoreRing.d.ts.map +1 -0
- package/expresivo/ExpScoreRing/ExpScoreRing.jsx +67 -0
- package/expresivo/ExpScoreRing/ExpScoreRing.jsx.map +1 -0
- package/expresivo/ExpScoreRing/index.d.ts +3 -0
- package/expresivo/ExpScoreRing/index.d.ts.map +1 -0
- package/expresivo/ExpScoreRing/index.js +2 -0
- package/expresivo/ExpScoreRing/index.js.map +1 -0
- package/expresivo/index.d.ts +12 -0
- package/expresivo/index.d.ts.map +1 -0
- package/expresivo/index.js +12 -0
- package/expresivo/index.js.map +1 -0
- package/expresivo/shared/glyphs.d.ts +20 -0
- package/expresivo/shared/glyphs.d.ts.map +1 -0
- package/expresivo/shared/glyphs.jsx +60 -0
- package/expresivo/shared/glyphs.jsx.map +1 -0
- package/package.json +3 -2
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpJourneyTrack/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EACV,eAAe,EACf,qBAAqB,EACrB,oBAAoB,GACrB,MAAM,mBAAmB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/expresivo/ExpJourneyTrack/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC"}
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import type { ButtonHTMLAttributes, ReactNode } from 'react';
|
|
2
|
+
export type ExpKeyButtonTone = 'brand' | 'white' | 'black';
|
|
3
|
+
export type ExpKeyButtonSize = 'lg' | 'sm';
|
|
4
|
+
export type ExpKeyButtonIcon = 'lens' | 'sync' | 'none';
|
|
5
|
+
export type ExpKeyButtonProps = {
|
|
6
|
+
tone?: ExpKeyButtonTone;
|
|
7
|
+
size?: ExpKeyButtonSize;
|
|
8
|
+
icon?: ExpKeyButtonIcon;
|
|
9
|
+
/** Shows an arrow after the label that steps forward on hover. */
|
|
10
|
+
arrow?: boolean;
|
|
11
|
+
/** Sinks the key and blocks it while the action runs. */
|
|
12
|
+
busy?: boolean;
|
|
13
|
+
/** Label shown while `busy`. Defaults to `children`. */
|
|
14
|
+
busyLabel?: string;
|
|
15
|
+
/** Takes the full width of its container. */
|
|
16
|
+
block?: boolean;
|
|
17
|
+
} & ButtonHTMLAttributes<HTMLButtonElement>;
|
|
18
|
+
/**
|
|
19
|
+
* Call to action shaped like a physical key: a gradient face over a darker
|
|
20
|
+
* edge that gives it depth. It lifts on hover, sinks when pressed and stays
|
|
21
|
+
* sunk while `busy`, with a shine crossing its face. Use one per screen, for
|
|
22
|
+
* the main action.
|
|
23
|
+
*
|
|
24
|
+
* Outside an `ExpScope` it falls back to the core `Button`: `white` maps to
|
|
25
|
+
* `second`, the other tones to `principal`, and `sm` to the `field` size.
|
|
26
|
+
*
|
|
27
|
+
* @component
|
|
28
|
+
* @example
|
|
29
|
+
* <ExpKeyButton onClick={start}>Start</ExpKeyButton>
|
|
30
|
+
*
|
|
31
|
+
* @example
|
|
32
|
+
* // Compact, in a row of form controls, without icon or arrow
|
|
33
|
+
* <ExpKeyButton size="sm" tone="white" icon="none" arrow={false}>Clear</ExpKeyButton>
|
|
34
|
+
*
|
|
35
|
+
* @param {Object} props - The properties of the ExpKeyButton component.
|
|
36
|
+
* @param {'brand' | 'white' | 'black'} [props.tone='brand'] - Color of the key face.
|
|
37
|
+
* @param {'lg' | 'sm'} [props.size='lg'] - `lg` is 52px tall; `sm` is 36px, the height of `Input`, `Select` and `DatePicker`.
|
|
38
|
+
* @param {'lens' | 'sync' | 'none'} [props.icon='lens'] - Glyph before the label.
|
|
39
|
+
* @param {boolean} [props.arrow=true] - Shows an arrow after the label.
|
|
40
|
+
* @param {boolean} [props.busy=false] - Sinks the key and blocks it while the action runs.
|
|
41
|
+
* @param {string} [props.busyLabel] - Label shown while `busy`.
|
|
42
|
+
* @param {boolean} [props.block=false] - Takes the full width of its container.
|
|
43
|
+
* @param {ReactNode} props.children - Label of the action.
|
|
44
|
+
* @param {ButtonHTMLAttributes<HTMLButtonElement>} restProps - Additional properties for the button element.
|
|
45
|
+
*
|
|
46
|
+
* @returns {ReactNode} The rendered key, or a core `Button` outside an `ExpScope`.
|
|
47
|
+
*/
|
|
48
|
+
export declare function ExpKeyButton({ tone, size, icon, arrow, busy, busyLabel, block, disabled, children, ...restProps }: ExpKeyButtonProps): ReactNode;
|
|
49
|
+
//# sourceMappingURL=ExpKeyButton.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ExpKeyButton.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpKeyButton/ExpKeyButton.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAM7D,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;AAE3D,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3C,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;AAExD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,kEAAkE;IAClE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,yDAAyD;IACzD,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;AAY5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,YAAY,CAAC,EAC3B,IAAc,EACd,IAAW,EACX,IAAa,EACb,KAAY,EACZ,IAAY,EACZ,SAAS,EACT,KAAa,EACb,QAAgB,EAChB,QAAQ,EACR,GAAG,SAAS,EACb,EAAE,iBAAiB,GAAG,SAAS,CAmD/B"}
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import clsx from 'clsx';
|
|
3
|
+
import { FiArrowRight, FiRefreshCw, FiSearch } from 'react-icons/fi';
|
|
4
|
+
import { Button } from '@clicoh/orion-library';
|
|
5
|
+
import { useExpScope } from '../ExpScope/ExpScope';
|
|
6
|
+
import { ArrowGlyph, LensGlyph, SyncBadgeGlyph } from '../shared/glyphs';
|
|
7
|
+
const fallbackIconMap = {
|
|
8
|
+
lens: <FiSearch />,
|
|
9
|
+
sync: <FiRefreshCw />,
|
|
10
|
+
none: undefined,
|
|
11
|
+
};
|
|
12
|
+
const glyphSizeMap = { lg: 32, sm: 24 };
|
|
13
|
+
const arrowSizeMap = { lg: 20, sm: 16 };
|
|
14
|
+
/**
|
|
15
|
+
* Call to action shaped like a physical key: a gradient face over a darker
|
|
16
|
+
* edge that gives it depth. It lifts on hover, sinks when pressed and stays
|
|
17
|
+
* sunk while `busy`, with a shine crossing its face. Use one per screen, for
|
|
18
|
+
* the main action.
|
|
19
|
+
*
|
|
20
|
+
* Outside an `ExpScope` it falls back to the core `Button`: `white` maps to
|
|
21
|
+
* `second`, the other tones to `principal`, and `sm` to the `field` size.
|
|
22
|
+
*
|
|
23
|
+
* @component
|
|
24
|
+
* @example
|
|
25
|
+
* <ExpKeyButton onClick={start}>Start</ExpKeyButton>
|
|
26
|
+
*
|
|
27
|
+
* @example
|
|
28
|
+
* // Compact, in a row of form controls, without icon or arrow
|
|
29
|
+
* <ExpKeyButton size="sm" tone="white" icon="none" arrow={false}>Clear</ExpKeyButton>
|
|
30
|
+
*
|
|
31
|
+
* @param {Object} props - The properties of the ExpKeyButton component.
|
|
32
|
+
* @param {'brand' | 'white' | 'black'} [props.tone='brand'] - Color of the key face.
|
|
33
|
+
* @param {'lg' | 'sm'} [props.size='lg'] - `lg` is 52px tall; `sm` is 36px, the height of `Input`, `Select` and `DatePicker`.
|
|
34
|
+
* @param {'lens' | 'sync' | 'none'} [props.icon='lens'] - Glyph before the label.
|
|
35
|
+
* @param {boolean} [props.arrow=true] - Shows an arrow after the label.
|
|
36
|
+
* @param {boolean} [props.busy=false] - Sinks the key and blocks it while the action runs.
|
|
37
|
+
* @param {string} [props.busyLabel] - Label shown while `busy`.
|
|
38
|
+
* @param {boolean} [props.block=false] - Takes the full width of its container.
|
|
39
|
+
* @param {ReactNode} props.children - Label of the action.
|
|
40
|
+
* @param {ButtonHTMLAttributes<HTMLButtonElement>} restProps - Additional properties for the button element.
|
|
41
|
+
*
|
|
42
|
+
* @returns {ReactNode} The rendered key, or a core `Button` outside an `ExpScope`.
|
|
43
|
+
*/
|
|
44
|
+
export function ExpKeyButton({ tone = 'brand', size = 'lg', icon = 'lens', arrow = true, busy = false, busyLabel, block = false, disabled = false, children, ...restProps }) {
|
|
45
|
+
const inScope = useExpScope();
|
|
46
|
+
const label = busy && busyLabel ? busyLabel : children;
|
|
47
|
+
if (!inScope) {
|
|
48
|
+
return (<Button {...restProps} modifier={tone === 'white' ? 'second' : 'principal'} size={size === 'lg' ? 'md' : 'field'} iconL={fallbackIconMap[icon]} iconR={arrow ? <FiArrowRight /> : undefined} disabled={disabled || busy} aria-busy={busy || undefined} className={clsx(block && 'w-full', restProps.className)}>
|
|
49
|
+
{label}
|
|
50
|
+
</Button>);
|
|
51
|
+
}
|
|
52
|
+
return (<button {...restProps} disabled={disabled || busy} aria-busy={busy || undefined} data-tone={tone} data-size={size} data-icon={icon} data-state={disabled ? 'disabled' : busy ? 'busy' : 'idle'} className={clsx('exp-key', block && 'exp-key--block', restProps.className)}>
|
|
53
|
+
{busy && <span aria-hidden="true" className="exp-key-shine"/>}
|
|
54
|
+
{icon === 'lens' && (<LensGlyph size={glyphSizeMap[size]} busy={busy} disabled={disabled}/>)}
|
|
55
|
+
{icon === 'sync' && (<SyncBadgeGlyph size={glyphSizeMap[size]} busy={busy} disabled={disabled}/>)}
|
|
56
|
+
<span className="exp-key-label">{label}</span>
|
|
57
|
+
{arrow && <ArrowGlyph size={arrowSizeMap[size]}/>}
|
|
58
|
+
</button>);
|
|
59
|
+
}
|
|
60
|
+
//# sourceMappingURL=ExpKeyButton.jsx.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ExpKeyButton.jsx","sourceRoot":"","sources":["../../src/expresivo/ExpKeyButton/ExpKeyButton.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpKeyButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EACV,gBAAgB,EAChB,iBAAiB,EACjB,gBAAgB,EAChB,gBAAgB,GACjB,MAAM,gBAAgB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/expresivo/ExpKeyButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
export type ExpLensIconProps = {
|
|
3
|
+
/** Width and height in pixels. */
|
|
4
|
+
size?: number;
|
|
5
|
+
/** Scans from side to side while the action runs. */
|
|
6
|
+
busy?: boolean;
|
|
7
|
+
/** Grays out, to match a disabled button. */
|
|
8
|
+
disabled?: boolean;
|
|
9
|
+
};
|
|
10
|
+
/**
|
|
11
|
+
* Magnifier with an eye inside, for the `iconL` of a core `Button` that
|
|
12
|
+
* searches or investigates. It blinks at rest, looks towards the label while
|
|
13
|
+
* the button is hovered, and scans while `busy`. It is decorative.
|
|
14
|
+
*
|
|
15
|
+
* Outside an `ExpScope` it falls back to the plain search icon.
|
|
16
|
+
*
|
|
17
|
+
* @component
|
|
18
|
+
* @example
|
|
19
|
+
* <Button iconL={<ExpLensIcon busy={isSearching} />}>Search</Button>
|
|
20
|
+
*
|
|
21
|
+
* @param {Object} props - The properties of the ExpLensIcon component.
|
|
22
|
+
* @param {number} [props.size=20] - Width and height in pixels.
|
|
23
|
+
* @param {boolean} [props.busy=false] - Scans from side to side while the action runs.
|
|
24
|
+
* @param {boolean} [props.disabled=false] - Grays out, to match a disabled button.
|
|
25
|
+
*
|
|
26
|
+
* @returns {ReactNode} The lens, or `FiSearch` outside an `ExpScope`.
|
|
27
|
+
*/
|
|
28
|
+
export declare function ExpLensIcon({ size, busy, disabled, }: ExpLensIconProps): ReactNode;
|
|
29
|
+
//# sourceMappingURL=ExpLensIcon.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ExpLensIcon.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpLensIcon/ExpLensIcon.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,kCAAkC;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qDAAqD;IACrD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,IAAS,EACT,IAAY,EACZ,QAAgB,GACjB,EAAE,gBAAgB,GAAG,SAAS,CAM9B"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { FiSearch } from 'react-icons/fi';
|
|
3
|
+
import { useExpScope } from '../ExpScope/ExpScope';
|
|
4
|
+
import { LensGlyph } from '../shared/glyphs';
|
|
5
|
+
/**
|
|
6
|
+
* Magnifier with an eye inside, for the `iconL` of a core `Button` that
|
|
7
|
+
* searches or investigates. It blinks at rest, looks towards the label while
|
|
8
|
+
* the button is hovered, and scans while `busy`. It is decorative.
|
|
9
|
+
*
|
|
10
|
+
* Outside an `ExpScope` it falls back to the plain search icon.
|
|
11
|
+
*
|
|
12
|
+
* @component
|
|
13
|
+
* @example
|
|
14
|
+
* <Button iconL={<ExpLensIcon busy={isSearching} />}>Search</Button>
|
|
15
|
+
*
|
|
16
|
+
* @param {Object} props - The properties of the ExpLensIcon component.
|
|
17
|
+
* @param {number} [props.size=20] - Width and height in pixels.
|
|
18
|
+
* @param {boolean} [props.busy=false] - Scans from side to side while the action runs.
|
|
19
|
+
* @param {boolean} [props.disabled=false] - Grays out, to match a disabled button.
|
|
20
|
+
*
|
|
21
|
+
* @returns {ReactNode} The lens, or `FiSearch` outside an `ExpScope`.
|
|
22
|
+
*/
|
|
23
|
+
export function ExpLensIcon({ size = 20, busy = false, disabled = false, }) {
|
|
24
|
+
const inScope = useExpScope();
|
|
25
|
+
if (!inScope)
|
|
26
|
+
return <FiSearch aria-hidden="true"/>;
|
|
27
|
+
return <LensGlyph size={size} busy={busy} disabled={disabled}/>;
|
|
28
|
+
}
|
|
29
|
+
//# sourceMappingURL=ExpLensIcon.jsx.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ExpLensIcon.jsx","sourceRoot":"","sources":["../../src/expresivo/ExpLensIcon/ExpLensIcon.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAGb,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAW7C;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,UAAU,WAAW,CAAC,EAC1B,IAAI,GAAG,EAAE,EACT,IAAI,GAAG,KAAK,EACZ,QAAQ,GAAG,KAAK,GACC;IACjB,MAAM,OAAO,GAAG,WAAW,EAAE,CAAC;IAE9B,IAAI,CAAC,OAAO;QAAE,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAC,MAAM,EAAG,CAAC;IAErD,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,EAAG,CAAC;AACnE,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpLensIcon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/expresivo/ExpLensIcon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import type { HTMLAttributes, ReactNode } from 'react';
|
|
2
|
+
import { type ExpMascotName } from './catalog';
|
|
3
|
+
export type ExpMascotMotion = 'still' | 'float' | 'hang';
|
|
4
|
+
export type ExpMascotProps = {
|
|
5
|
+
name: ExpMascotName;
|
|
6
|
+
/** Width and height on screen, in pixels. */
|
|
7
|
+
size?: number;
|
|
8
|
+
motion?: ExpMascotMotion;
|
|
9
|
+
} & Omit<HTMLAttributes<HTMLSpanElement>, 'children'>;
|
|
10
|
+
/**
|
|
11
|
+
* One of the official clicOH mascots, drawn from its file as is: never
|
|
12
|
+
* redrawn, recolored or cropped.
|
|
13
|
+
*
|
|
14
|
+
* Mascots are decorative and hidden from screen readers, so the text next to
|
|
15
|
+
* them must carry the message. Use one per state (empty, loading, error, no
|
|
16
|
+
* permission, success), above the title and the copy, and never on screens
|
|
17
|
+
* full of data. Suggested sizes: 96–128px for desktop empty states, 80px on
|
|
18
|
+
* small screens, 48–64px inside a message or a toast.
|
|
19
|
+
*
|
|
20
|
+
* Renders nothing outside an `ExpScope`, or when the scope hides mascots.
|
|
21
|
+
*
|
|
22
|
+
* @component
|
|
23
|
+
* @example
|
|
24
|
+
* <ExpMascot name="oculus-01-feliz" size={112} />
|
|
25
|
+
*
|
|
26
|
+
* @example
|
|
27
|
+
* // Hanging from a thread, swinging gently
|
|
28
|
+
* <ExpMascot name="fixi-06-celebrando" size={56} motion="hang" />
|
|
29
|
+
*
|
|
30
|
+
* @param {Object} props - The properties of the ExpMascot component.
|
|
31
|
+
* @param {ExpMascotName} props.name - Mascot and pose, as in `oculus-01-feliz`.
|
|
32
|
+
* @param {number} [props.size=112] - Width and height on screen, in pixels.
|
|
33
|
+
* @param {'still' | 'float' | 'hang'} [props.motion='still'] - `float` bobs up and down; `hang` hangs it from a thread and swings it. Both stop with reduced motion.
|
|
34
|
+
*
|
|
35
|
+
* @returns {ReactNode} The mascot, or `null` outside an `ExpScope`.
|
|
36
|
+
*/
|
|
37
|
+
export declare function ExpMascot({ name, size, motion, ...restProps }: ExpMascotProps): ReactNode;
|
|
38
|
+
//# sourceMappingURL=ExpMascot.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ExpMascot.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpMascot/ExpMascot.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,EAAE,KAAK,aAAa,EAAiB,MAAM,WAAW,CAAC;AAE9D,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,CAAC;AAEzD,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,aAAa,CAAC;IACpB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,eAAe,CAAC;CAC1B,GAAG,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC,CAAC;AAEtD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,IAAU,EACV,MAAgB,EAChB,GAAG,SAAS,EACb,EAAE,cAAc,GAAG,SAAS,CA6B5B"}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import clsx from 'clsx';
|
|
3
|
+
import { useExpScopeOptions } from '../ExpScope/ExpScope';
|
|
4
|
+
import { mascotCatalog } from './catalog';
|
|
5
|
+
/**
|
|
6
|
+
* One of the official clicOH mascots, drawn from its file as is: never
|
|
7
|
+
* redrawn, recolored or cropped.
|
|
8
|
+
*
|
|
9
|
+
* Mascots are decorative and hidden from screen readers, so the text next to
|
|
10
|
+
* them must carry the message. Use one per state (empty, loading, error, no
|
|
11
|
+
* permission, success), above the title and the copy, and never on screens
|
|
12
|
+
* full of data. Suggested sizes: 96–128px for desktop empty states, 80px on
|
|
13
|
+
* small screens, 48–64px inside a message or a toast.
|
|
14
|
+
*
|
|
15
|
+
* Renders nothing outside an `ExpScope`, or when the scope hides mascots.
|
|
16
|
+
*
|
|
17
|
+
* @component
|
|
18
|
+
* @example
|
|
19
|
+
* <ExpMascot name="oculus-01-feliz" size={112} />
|
|
20
|
+
*
|
|
21
|
+
* @example
|
|
22
|
+
* // Hanging from a thread, swinging gently
|
|
23
|
+
* <ExpMascot name="fixi-06-celebrando" size={56} motion="hang" />
|
|
24
|
+
*
|
|
25
|
+
* @param {Object} props - The properties of the ExpMascot component.
|
|
26
|
+
* @param {ExpMascotName} props.name - Mascot and pose, as in `oculus-01-feliz`.
|
|
27
|
+
* @param {number} [props.size=112] - Width and height on screen, in pixels.
|
|
28
|
+
* @param {'still' | 'float' | 'hang'} [props.motion='still'] - `float` bobs up and down; `hang` hangs it from a thread and swings it. Both stop with reduced motion.
|
|
29
|
+
*
|
|
30
|
+
* @returns {ReactNode} The mascot, or `null` outside an `ExpScope`.
|
|
31
|
+
*/
|
|
32
|
+
export function ExpMascot({ name, size = 112, motion = 'still', ...restProps }) {
|
|
33
|
+
const options = useExpScopeOptions();
|
|
34
|
+
if (!options || options.mascots === 'hidden')
|
|
35
|
+
return null;
|
|
36
|
+
return (<span {...restProps} aria-hidden="true" className={clsx('inline-flex shrink-0 flex-col items-center', motion === 'float' && 'exp-float', motion === 'hang' && 'exp-hang', restProps.className)}>
|
|
37
|
+
{motion === 'hang' && (<span className="bg-lavender-1 dark:bg-lavender-dark-1 h-3.5 w-[1.5px]"/>)}
|
|
38
|
+
<img src={mascotCatalog[name].src} alt="" width={size} height={size} draggable={false} className="block object-contain"/>
|
|
39
|
+
</span>);
|
|
40
|
+
}
|
|
41
|
+
//# sourceMappingURL=ExpMascot.jsx.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ExpMascot.jsx","sourceRoot":"","sources":["../../src/expresivo/ExpMascot/ExpMascot.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAsB,aAAa,EAAE,MAAM,WAAW,CAAC;AAW9D;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,UAAU,SAAS,CAAC,EACxB,IAAI,EACJ,IAAI,GAAG,GAAG,EACV,MAAM,GAAG,OAAO,EAChB,GAAG,SAAS,EACG;IACf,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,CACb,4CAA4C,EAC5C,MAAM,KAAK,OAAO,IAAI,WAAW,EACjC,MAAM,KAAK,MAAM,IAAI,UAAU,EAC/B,SAAS,CAAC,SAAS,CACpB,CAAC,CAEF;MAAA,CAAC,MAAM,KAAK,MAAM,IAAI,CACpB,CAAC,IAAI,CAAC,SAAS,CAAC,uDAAuD,EAAG,CAC3E,CACD;MAAA,CAAC,GAAG,CACF,GAAG,CAAC,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAC7B,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,12 @@
|
|
|
1
|
+
import type { StaticImageData } from 'next/image';
|
|
2
|
+
/**
|
|
3
|
+
* Official clicOH mascots, named `<mascot>-<NN>-<pose>` like their files.
|
|
4
|
+
* `oculus` is the agent, `bugi` the problem and `fixi` the fix.
|
|
5
|
+
*/
|
|
6
|
+
export type ExpMascotName = 'oculus-01-feliz' | 'oculus-02-investigando' | 'oculus-03-dudando' | 'oculus-04-analizando-documento' | 'oculus-06-celebrando' | 'oculus-07-buscando-rapido' | 'oculus-08-satisfecho' | 'bugi-01-alerta' | 'bugi-02-investigando' | 'bugi-05-sorprendido' | 'fixi-01-feliz' | 'fixi-02-investigando' | 'fixi-03-dudando' | 'fixi-04-reparando' | 'fixi-05-sorprendido' | 'fixi-06-celebrando' | 'fixi-07-corriendo';
|
|
7
|
+
/**
|
|
8
|
+
* Oculus and Bugi are vectors. Fixi is a 256px WebP, sharp up to 128px on
|
|
9
|
+
* high-density screens.
|
|
10
|
+
*/
|
|
11
|
+
export declare const mascotCatalog: Record<ExpMascotName, StaticImageData>;
|
|
12
|
+
//# sourceMappingURL=catalog.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"catalog.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpMascot/catalog.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAmBlD;;;GAGG;AACH,MAAM,MAAM,aAAa,GACrB,iBAAiB,GACjB,wBAAwB,GACxB,mBAAmB,GACnB,gCAAgC,GAChC,sBAAsB,GACtB,2BAA2B,GAC3B,sBAAsB,GACtB,gBAAgB,GAChB,sBAAsB,GACtB,qBAAqB,GACrB,eAAe,GACf,sBAAsB,GACtB,iBAAiB,GACjB,mBAAmB,GACnB,qBAAqB,GACrB,oBAAoB,GACpB,mBAAmB,CAAC;AAExB;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,aAAa,EAAE,eAAe,CAkBhE,CAAC"}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import bugi01 from '@clicoh/orion-library/assets/mascotas/svg/bugi-mascota-01-alerta.svg';
|
|
2
|
+
import bugi02 from '@clicoh/orion-library/assets/mascotas/svg/bugi-mascota-02-investigando.svg';
|
|
3
|
+
import bugi05 from '@clicoh/orion-library/assets/mascotas/svg/bugi-mascota-05-sorprendido.svg';
|
|
4
|
+
import oculus01 from '@clicoh/orion-library/assets/mascotas/svg/oculus-mascota-01-feliz.svg';
|
|
5
|
+
import oculus02 from '@clicoh/orion-library/assets/mascotas/svg/oculus-mascota-02-investigando.svg';
|
|
6
|
+
import oculus03 from '@clicoh/orion-library/assets/mascotas/svg/oculus-mascota-03-dudando.svg';
|
|
7
|
+
import oculus04 from '@clicoh/orion-library/assets/mascotas/svg/oculus-mascota-04-analizando-documento.svg';
|
|
8
|
+
import oculus06 from '@clicoh/orion-library/assets/mascotas/svg/oculus-mascota-06-celebrando.svg';
|
|
9
|
+
import oculus07 from '@clicoh/orion-library/assets/mascotas/svg/oculus-mascota-07-buscando-rapido.svg';
|
|
10
|
+
import oculus08 from '@clicoh/orion-library/assets/mascotas/svg/oculus-mascota-08-satisfecho.svg';
|
|
11
|
+
import fixi01 from '@clicoh/orion-library/assets/mascotas/webp/fixi-mascota-01-feliz-sm.webp';
|
|
12
|
+
import fixi02 from '@clicoh/orion-library/assets/mascotas/webp/fixi-mascota-02-investigando-sm.webp';
|
|
13
|
+
import fixi03 from '@clicoh/orion-library/assets/mascotas/webp/fixi-mascota-03-dudando-sm.webp';
|
|
14
|
+
import fixi04 from '@clicoh/orion-library/assets/mascotas/webp/fixi-mascota-04-reparando-sm.webp';
|
|
15
|
+
import fixi05 from '@clicoh/orion-library/assets/mascotas/webp/fixi-mascota-05-sorprendido-sm.webp';
|
|
16
|
+
import fixi06 from '@clicoh/orion-library/assets/mascotas/webp/fixi-mascota-06-celebrando-sm.webp';
|
|
17
|
+
import fixi07 from '@clicoh/orion-library/assets/mascotas/webp/fixi-mascota-07-corriendo-sm.webp';
|
|
18
|
+
/**
|
|
19
|
+
* Oculus and Bugi are vectors. Fixi is a 256px WebP, sharp up to 128px on
|
|
20
|
+
* high-density screens.
|
|
21
|
+
*/
|
|
22
|
+
export const mascotCatalog = {
|
|
23
|
+
'oculus-01-feliz': oculus01,
|
|
24
|
+
'oculus-02-investigando': oculus02,
|
|
25
|
+
'oculus-03-dudando': oculus03,
|
|
26
|
+
'oculus-04-analizando-documento': oculus04,
|
|
27
|
+
'oculus-06-celebrando': oculus06,
|
|
28
|
+
'oculus-07-buscando-rapido': oculus07,
|
|
29
|
+
'oculus-08-satisfecho': oculus08,
|
|
30
|
+
'bugi-01-alerta': bugi01,
|
|
31
|
+
'bugi-02-investigando': bugi02,
|
|
32
|
+
'bugi-05-sorprendido': bugi05,
|
|
33
|
+
'fixi-01-feliz': fixi01,
|
|
34
|
+
'fixi-02-investigando': fixi02,
|
|
35
|
+
'fixi-03-dudando': fixi03,
|
|
36
|
+
'fixi-04-reparando': fixi04,
|
|
37
|
+
'fixi-05-sorprendido': fixi05,
|
|
38
|
+
'fixi-06-celebrando': fixi06,
|
|
39
|
+
'fixi-07-corriendo': fixi07,
|
|
40
|
+
};
|
|
41
|
+
//# sourceMappingURL=catalog.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"catalog.js","sourceRoot":"","sources":["../../src/expresivo/ExpMascot/catalog.ts"],"names":[],"mappings":"AACA,OAAO,MAAM,MAAM,sEAAsE,CAAC;AAC1F,OAAO,MAAM,MAAM,4EAA4E,CAAC;AAChG,OAAO,MAAM,MAAM,2EAA2E,CAAC;AAC/F,OAAO,QAAQ,MAAM,uEAAuE,CAAC;AAC7F,OAAO,QAAQ,MAAM,8EAA8E,CAAC;AACpG,OAAO,QAAQ,MAAM,yEAAyE,CAAC;AAC/F,OAAO,QAAQ,MAAM,sFAAsF,CAAC;AAC5G,OAAO,QAAQ,MAAM,4EAA4E,CAAC;AAClG,OAAO,QAAQ,MAAM,iFAAiF,CAAC;AACvG,OAAO,QAAQ,MAAM,4EAA4E,CAAC;AAClG,OAAO,MAAM,MAAM,0EAA0E,CAAC;AAC9F,OAAO,MAAM,MAAM,iFAAiF,CAAC;AACrG,OAAO,MAAM,MAAM,4EAA4E,CAAC;AAChG,OAAO,MAAM,MAAM,8EAA8E,CAAC;AAClG,OAAO,MAAM,MAAM,gFAAgF,CAAC;AACpG,OAAO,MAAM,MAAM,+EAA+E,CAAC;AACnG,OAAO,MAAM,MAAM,8EAA8E,CAAC;AAyBlG;;;GAGG;AACH,MAAM,CAAC,MAAM,aAAa,GAA2C;IACnE,iBAAiB,EAAE,QAAQ;IAC3B,wBAAwB,EAAE,QAAQ;IAClC,mBAAmB,EAAE,QAAQ;IAC7B,gCAAgC,EAAE,QAAQ;IAC1C,sBAAsB,EAAE,QAAQ;IAChC,2BAA2B,EAAE,QAAQ;IACrC,sBAAsB,EAAE,QAAQ;IAChC,gBAAgB,EAAE,MAAM;IACxB,sBAAsB,EAAE,MAAM;IAC9B,qBAAqB,EAAE,MAAM;IAC7B,eAAe,EAAE,MAAM;IACvB,sBAAsB,EAAE,MAAM;IAC9B,iBAAiB,EAAE,MAAM;IACzB,mBAAmB,EAAE,MAAM;IAC3B,qBAAqB,EAAE,MAAM;IAC7B,oBAAoB,EAAE,MAAM;IAC5B,mBAAmB,EAAE,MAAM;CAC5B,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpMascot/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AACnE,YAAY,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/expresivo/ExpMascot/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import type { HTMLAttributes, ReactNode } from 'react';
|
|
2
|
+
export type ExpMedalBadgeModifier = 'success' | 'warning' | 'error' | 'info' | 'progress' | 'disabled';
|
|
3
|
+
export type ExpMedalBadgeProps = {
|
|
4
|
+
modifier: ExpMedalBadgeModifier;
|
|
5
|
+
/** One character or a tiny icon inside the medal. */
|
|
6
|
+
glyph?: ReactNode;
|
|
7
|
+
children: ReactNode;
|
|
8
|
+
} & Omit<HTMLAttributes<HTMLSpanElement>, 'children'>;
|
|
9
|
+
/**
|
|
10
|
+
* Status badge drawn as an octagonal medal with a ribbon, pinned to a tinted
|
|
11
|
+
* pill. Same status modifiers as the core `Badge`; the label carries the
|
|
12
|
+
* message and the medal only decorates it.
|
|
13
|
+
*
|
|
14
|
+
* Outside an `ExpScope` it falls back to the core `Badge` with the same
|
|
15
|
+
* `modifier`.
|
|
16
|
+
*
|
|
17
|
+
* @component
|
|
18
|
+
* @example
|
|
19
|
+
* <ExpMedalBadge modifier="success" glyph="✓">Passed</ExpMedalBadge>
|
|
20
|
+
*
|
|
21
|
+
* @param {Object} props - The properties of the ExpMedalBadge component.
|
|
22
|
+
* @param {'success' | 'warning' | 'error' | 'info' | 'progress' | 'disabled'} props.modifier - Status color.
|
|
23
|
+
* @param {ReactNode} [props.glyph='•'] - One character or a tiny icon inside the medal.
|
|
24
|
+
* @param {ReactNode} props.children - Label of the status.
|
|
25
|
+
*
|
|
26
|
+
* @returns {ReactNode} The medal badge, or a core `Badge` outside an `ExpScope`.
|
|
27
|
+
*/
|
|
28
|
+
export declare function ExpMedalBadge({ modifier, glyph, children, ...restProps }: ExpMedalBadgeProps): ReactNode;
|
|
29
|
+
//# sourceMappingURL=ExpMedalBadge.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ExpMedalBadge.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpMedalBadge/ExpMedalBadge.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvD,MAAM,MAAM,qBAAqB,GAC7B,SAAS,GACT,SAAS,GACT,OAAO,GACP,MAAM,GACN,UAAU,GACV,UAAU,CAAC;AAEf,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,qBAAqB,CAAC;IAChC,qDAAqD;IACrD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC,CAAC;AAgDtD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,KAAW,EACX,QAAQ,EACR,GAAG,SAAS,EACb,EAAE,kBAAkB,GAAG,SAAS,CAkDhC"}
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import clsx from 'clsx';
|
|
3
|
+
import { Badge } from '@clicoh/orion-library';
|
|
4
|
+
import { useExpScope } from '../ExpScope/ExpScope';
|
|
5
|
+
// The ribbon and the pill label use the strong shade: the base `warning`
|
|
6
|
+
// and `success` hues sit below 4.5:1 on their tint.
|
|
7
|
+
const colorMap = {
|
|
8
|
+
success: {
|
|
9
|
+
ring: 'bg-success',
|
|
10
|
+
ribbon: 'bg-success-strong',
|
|
11
|
+
pill: 'border-success bg-success-1 text-success-strong dark:bg-success/16 dark:text-success',
|
|
12
|
+
},
|
|
13
|
+
warning: {
|
|
14
|
+
ring: 'bg-amber',
|
|
15
|
+
ribbon: 'bg-amber-strong',
|
|
16
|
+
pill: 'border-amber bg-warning-1 text-amber-strong dark:bg-warning/16 dark:text-amber',
|
|
17
|
+
},
|
|
18
|
+
error: {
|
|
19
|
+
ring: 'bg-error',
|
|
20
|
+
ribbon: 'bg-error-strong',
|
|
21
|
+
pill: 'border-error bg-error-1 text-error-strong dark:bg-error/16 dark:text-error',
|
|
22
|
+
},
|
|
23
|
+
info: {
|
|
24
|
+
ring: 'bg-info',
|
|
25
|
+
ribbon: 'bg-info-dark-3 dark:bg-info',
|
|
26
|
+
pill: 'border-info bg-info-1 text-info-dark-3 dark:bg-info/16 dark:text-info',
|
|
27
|
+
},
|
|
28
|
+
progress: {
|
|
29
|
+
ring: 'bg-lavender',
|
|
30
|
+
ribbon: 'bg-lavender',
|
|
31
|
+
pill: 'border-lavender bg-lavender-2 text-lavender dark:bg-lavender/18 dark:text-lavender',
|
|
32
|
+
},
|
|
33
|
+
disabled: {
|
|
34
|
+
ring: 'bg-gray-1',
|
|
35
|
+
ribbon: 'bg-gray-1',
|
|
36
|
+
pill: 'border-gray-1 bg-gray-6 text-gray-1 dark:bg-gray-2/16 dark:text-gray-2',
|
|
37
|
+
},
|
|
38
|
+
};
|
|
39
|
+
const glyphColorMap = {
|
|
40
|
+
success: 'text-success',
|
|
41
|
+
warning: 'text-amber',
|
|
42
|
+
error: 'text-error',
|
|
43
|
+
info: 'text-info',
|
|
44
|
+
progress: 'text-lavender',
|
|
45
|
+
disabled: 'text-gray-1 dark:text-gray-2',
|
|
46
|
+
};
|
|
47
|
+
/**
|
|
48
|
+
* Status badge drawn as an octagonal medal with a ribbon, pinned to a tinted
|
|
49
|
+
* pill. Same status modifiers as the core `Badge`; the label carries the
|
|
50
|
+
* message and the medal only decorates it.
|
|
51
|
+
*
|
|
52
|
+
* Outside an `ExpScope` it falls back to the core `Badge` with the same
|
|
53
|
+
* `modifier`.
|
|
54
|
+
*
|
|
55
|
+
* @component
|
|
56
|
+
* @example
|
|
57
|
+
* <ExpMedalBadge modifier="success" glyph="✓">Passed</ExpMedalBadge>
|
|
58
|
+
*
|
|
59
|
+
* @param {Object} props - The properties of the ExpMedalBadge component.
|
|
60
|
+
* @param {'success' | 'warning' | 'error' | 'info' | 'progress' | 'disabled'} props.modifier - Status color.
|
|
61
|
+
* @param {ReactNode} [props.glyph='•'] - One character or a tiny icon inside the medal.
|
|
62
|
+
* @param {ReactNode} props.children - Label of the status.
|
|
63
|
+
*
|
|
64
|
+
* @returns {ReactNode} The medal badge, or a core `Badge` outside an `ExpScope`.
|
|
65
|
+
*/
|
|
66
|
+
export function ExpMedalBadge({ modifier, glyph = '•', children, ...restProps }) {
|
|
67
|
+
const inScope = useExpScope();
|
|
68
|
+
if (!inScope) {
|
|
69
|
+
return (<Badge {...restProps} modifier={modifier}>
|
|
70
|
+
{children}
|
|
71
|
+
</Badge>);
|
|
72
|
+
}
|
|
73
|
+
const colors = colorMap[modifier];
|
|
74
|
+
return (<span {...restProps} className={clsx('relative inline-flex h-[22px] items-center pl-2.5 whitespace-nowrap', restProps.className)}>
|
|
75
|
+
<span className={clsx('inline-flex h-[18px] items-center rounded-full border pr-2 pl-3.5 text-[11px] leading-4 font-semibold', colors.pill)}>
|
|
76
|
+
{children}
|
|
77
|
+
</span>
|
|
78
|
+
<span aria-hidden="true" className="absolute top-px left-0 size-5">
|
|
79
|
+
<span className={clsx('exp-medal-ribbon absolute top-3 left-[5px] h-[11px] w-2.5', colors.ribbon)}/>
|
|
80
|
+
<span className={clsx('exp-medal-octagon absolute inset-0', colors.ring)}/>
|
|
81
|
+
<span className={clsx('exp-medal-octagon absolute inset-0.5 flex items-center justify-center bg-white text-[10px] leading-none font-extrabold dark:bg-black', glyphColorMap[modifier])}>
|
|
82
|
+
{glyph}
|
|
83
|
+
</span>
|
|
84
|
+
</span>
|
|
85
|
+
</span>);
|
|
86
|
+
}
|
|
87
|
+
//# sourceMappingURL=ExpMedalBadge.jsx.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ExpMedalBadge.jsx","sourceRoot":"","sources":["../../src/expresivo/ExpMedalBadge/ExpMedalBadge.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAmBnD,yEAAyE;AACzE,oDAAoD;AACpD,MAAM,QAAQ,GAA+C;IAC3D,OAAO,EAAE;QACP,IAAI,EAAE,YAAY;QAClB,MAAM,EAAE,mBAAmB;QAC3B,IAAI,EAAE,sFAAsF;KAC7F;IACD,OAAO,EAAE;QACP,IAAI,EAAE,UAAU;QAChB,MAAM,EAAE,iBAAiB;QACzB,IAAI,EAAE,gFAAgF;KACvF;IACD,KAAK,EAAE;QACL,IAAI,EAAE,UAAU;QAChB,MAAM,EAAE,iBAAiB;QACzB,IAAI,EAAE,4EAA4E;KACnF;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,SAAS;QACf,MAAM,EAAE,6BAA6B;QACrC,IAAI,EAAE,uEAAuE;KAC9E;IACD,QAAQ,EAAE;QACR,IAAI,EAAE,aAAa;QACnB,MAAM,EAAE,aAAa;QACrB,IAAI,EAAE,oFAAoF;KAC3F;IACD,QAAQ,EAAE;QACR,IAAI,EAAE,WAAW;QACjB,MAAM,EAAE,WAAW;QACnB,IAAI,EAAE,wEAAwE;KAC/E;CACF,CAAC;AAEF,MAAM,aAAa,GAA0C;IAC3D,OAAO,EAAE,cAAc;IACvB,OAAO,EAAE,YAAY;IACrB,KAAK,EAAE,YAAY;IACnB,IAAI,EAAE,WAAW;IACjB,QAAQ,EAAE,eAAe;IACzB,QAAQ,EAAE,8BAA8B;CACzC,CAAC;AAEF;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,UAAU,aAAa,CAAC,EAC5B,QAAQ,EACR,KAAK,GAAG,GAAG,EACX,QAAQ,EACR,GAAG,SAAS,EACO;IACnB,MAAM,OAAO,GAAG,WAAW,EAAE,CAAC;IAE9B,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,OAAO,CACL,CAAC,KAAK,CAAC,IAAI,SAAS,CAAC,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACvC;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,KAAK,CAAC,CACT,CAAC;IACJ,CAAC;IAED,MAAM,MAAM,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAElC,OAAO,CACL,CAAC,IAAI,CACH,IAAI,SAAS,CAAC,CACd,SAAS,CAAC,CAAC,IAAI,CACb,qEAAqE,EACrE,SAAS,CAAC,SAAS,CACpB,CAAC,CAEF;MAAA,CAAC,IAAI,CACH,SAAS,CAAC,CAAC,IAAI,CACb,uGAAuG,EACvG,MAAM,CAAC,IAAI,CACZ,CAAC,CAEF;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,IAAI,CACN;MAAA,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,SAAS,CAAC,+BAA+B,CAChE;QAAA,CAAC,IAAI,CACH,SAAS,CAAC,CAAC,IAAI,CACb,2DAA2D,EAC3D,MAAM,CAAC,MAAM,CACd,CAAC,EAEJ;QAAA,CAAC,IAAI,CACH,SAAS,CAAC,CAAC,IAAI,CAAC,oCAAoC,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC,EAErE;QAAA,CAAC,IAAI,CACH,SAAS,CAAC,CAAC,IAAI,CACb,sIAAsI,EACtI,aAAa,CAAC,QAAQ,CAAC,CACxB,CAAC,CAEF;UAAA,CAAC,KAAK,CACR;QAAA,EAAE,IAAI,CACR;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpMedalBadge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EACV,qBAAqB,EACrB,kBAAkB,GACnB,MAAM,iBAAiB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/expresivo/ExpMedalBadge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC"}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import type { ButtonHTMLAttributes, ReactNode } from 'react';
|
|
2
|
+
export type ExpPillButtonTone = 'brand' | 'soft';
|
|
3
|
+
export type ExpPillButtonIcon = 'lens' | 'sync' | 'enter' | 'none';
|
|
4
|
+
export type ExpPillButtonProps = {
|
|
5
|
+
tone?: ExpPillButtonTone;
|
|
6
|
+
icon?: ExpPillButtonIcon;
|
|
7
|
+
/** Blocks the button and animates its glyph while the action runs. */
|
|
8
|
+
busy?: boolean;
|
|
9
|
+
/** Label shown while `busy`. Defaults to `children`. */
|
|
10
|
+
busyLabel?: string;
|
|
11
|
+
/** Takes the full width of its container. */
|
|
12
|
+
block?: boolean;
|
|
13
|
+
} & ButtonHTMLAttributes<HTMLButtonElement>;
|
|
14
|
+
/**
|
|
15
|
+
* Light pill-shaped call to action, the same 44px height as the core
|
|
16
|
+
* `Button`. `brand` is a filled lavender pill that turns into the clicOH
|
|
17
|
+
* gradient on hover, with its glyph in a white disc; `soft` is a tinted pill
|
|
18
|
+
* for secondary actions, such as a button inside a field.
|
|
19
|
+
*
|
|
20
|
+
* Outside an `ExpScope` it falls back to the core `Button`: `brand` maps to
|
|
21
|
+
* `principal` and `soft` to `second`.
|
|
22
|
+
*
|
|
23
|
+
* @component
|
|
24
|
+
* @example
|
|
25
|
+
* <ExpPillButton onClick={search}>Search</ExpPillButton>
|
|
26
|
+
*
|
|
27
|
+
* @example
|
|
28
|
+
* <ExpPillButton tone="soft" icon="sync" busy={isSyncing} busyLabel="Syncing…">
|
|
29
|
+
* Sync
|
|
30
|
+
* </ExpPillButton>
|
|
31
|
+
*
|
|
32
|
+
* @param {Object} props - The properties of the ExpPillButton component.
|
|
33
|
+
* @param {'brand' | 'soft'} [props.tone='brand'] - Filled lavender or tinted.
|
|
34
|
+
* @param {'lens' | 'sync' | 'enter' | 'none'} [props.icon='lens'] - Glyph before the label.
|
|
35
|
+
* @param {boolean} [props.busy=false] - Blocks the button and animates its glyph.
|
|
36
|
+
* @param {string} [props.busyLabel] - Label shown while `busy`.
|
|
37
|
+
* @param {boolean} [props.block=false] - Takes the full width of its container.
|
|
38
|
+
* @param {ReactNode} props.children - Label of the action.
|
|
39
|
+
* @param {ButtonHTMLAttributes<HTMLButtonElement>} restProps - Additional properties for the button element.
|
|
40
|
+
*
|
|
41
|
+
* @returns {ReactNode} The rendered pill, or a core `Button` outside an `ExpScope`.
|
|
42
|
+
*/
|
|
43
|
+
export declare function ExpPillButton({ tone, icon, busy, busyLabel, block, disabled, children, ...restProps }: ExpPillButtonProps): ReactNode;
|
|
44
|
+
//# sourceMappingURL=ExpPillButton.d.ts.map
|
|
@@ -0,0 +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;AA+B5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,aAAa,CAAC,EAC5B,IAAc,EACd,IAAa,EACb,IAAY,EACZ,SAAS,EACT,KAAa,EACb,QAAgB,EAChB,QAAQ,EACR,GAAG,SAAS,EACb,EAAE,kBAAkB,GAAG,SAAS,CA+DhC"}
|