@clicoh/orion-library 1.2.0-beta.12 → 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/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 +4 -1
- package/dist/components/01-atoms/Stat/Stat.d.ts.map +1 -1
- package/dist/components/01-atoms/Stat/Stat.jsx +6 -2
- package/dist/components/01-atoms/Stat/Stat.jsx.map +1 -1
- 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/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/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/index.d.ts +2 -0
- package/dist/components/02-molecules/index.d.ts.map +1 -1
- package/dist/components/02-molecules/index.js +2 -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
|
@@ -55,21 +55,23 @@ export function Input({ label, input, helperText, error, iconL, iconR, isMutedWh
|
|
|
55
55
|
: 'text-black dark:text-white')}>
|
|
56
56
|
{showPassword ? (<FiEyeOff size={18} aria-hidden="true"/>) : (<FiEye size={18} aria-hidden="true"/>)}
|
|
57
57
|
</button>) : (iconR);
|
|
58
|
-
return (<div className="w-full max-w-full">
|
|
59
|
-
<div className="relative h-9">
|
|
60
|
-
<input {...input} id={id} type={effectiveType} className={inputClasses} placeholder={placeholder || ' '} aria-invalid={error ? true : input['aria-invalid']} aria-describedby={describedBy}/>
|
|
58
|
+
return (<div data-orion-part="field" className="w-full max-w-full">
|
|
59
|
+
<div data-orion-part="field-box" className="relative h-9">
|
|
60
|
+
<input {...input} data-orion-part="field-control" id={id} type={effectiveType} className={inputClasses} placeholder={placeholder || ' '} aria-invalid={error ? true : input['aria-invalid']} aria-describedby={describedBy}/>
|
|
61
61
|
{hideLabel ? (<label htmlFor={id} className="sr-only">
|
|
62
62
|
{label}
|
|
63
|
-
</label>) : (<label {...labelProps}
|
|
64
|
-
|
|
63
|
+
</label>) : (<label {...labelProps} data-orion-part="field-label">
|
|
64
|
+
{label}
|
|
65
|
+
</label>)}
|
|
66
|
+
<fieldset aria-hidden="true" data-orion-part="field-outline" className={fieldsetClasses}>
|
|
65
67
|
{!hideLabel && <legend className={legendClasses}>{label}</legend>}
|
|
66
68
|
</fieldset>
|
|
67
|
-
{!!iconL && (<span aria-hidden="true" className={clsx('peer-disabled:text-gray-3 dark:peer-disabled:text-gray-2 absolute top-1/2 left-4 flex -translate-y-1/2 items-center', error
|
|
69
|
+
{!!iconL && (<span aria-hidden="true" data-orion-part="field-icon" className={clsx('peer-disabled:text-gray-3 dark:peer-disabled:text-gray-2 absolute top-1/2 left-4 flex -translate-y-1/2 items-center', error
|
|
68
70
|
? 'text-error dark:text-error-dark'
|
|
69
71
|
: 'text-black dark:text-white')}>
|
|
70
72
|
{iconL}
|
|
71
73
|
</span>)}
|
|
72
|
-
{!!rightSlot && (<span className={clsx('peer-disabled:text-gray-3 dark:peer-disabled:text-gray-2 absolute top-2 right-2', error
|
|
74
|
+
{!!rightSlot && (<span data-orion-part="field-icon" className={clsx('peer-disabled:text-gray-3 dark:peer-disabled:text-gray-2 absolute top-2 right-2', error
|
|
73
75
|
? 'text-error dark:text-error-dark'
|
|
74
76
|
: 'text-black dark:text-white')}>
|
|
75
77
|
{rightSlot}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.jsx","sourceRoot":"","sources":["../../../../src/components/01-atoms/Input/Input.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"Input.jsx","sourceRoot":"","sources":["../../../../src/components/01-atoms/Input/Input.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RenderErrorOrHelperText.d.ts","sourceRoot":"","sources":["../../../../../src/components/01-atoms/Input/utils/RenderErrorOrHelperText.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,KAAK,4BAA4B,GAAG;IAClC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,uBAAuB,CAAC,EACtC,EAAE,EACF,KAAK,EACL,UAAU,EACV,QAAQ,EACR,SAAS,GACV,EAAE,4BAA4B,GAAG,SAAS,
|
|
1
|
+
{"version":3,"file":"RenderErrorOrHelperText.d.ts","sourceRoot":"","sources":["../../../../../src/components/01-atoms/Input/utils/RenderErrorOrHelperText.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,KAAK,4BAA4B,GAAG;IAClC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,uBAAuB,CAAC,EACtC,EAAE,EACF,KAAK,EACL,UAAU,EACV,QAAQ,EACR,SAAS,GACV,EAAE,4BAA4B,GAAG,SAAS,CAuB1C"}
|
|
@@ -4,7 +4,7 @@ export function RenderErrorOrHelperText({ id, error, helperText, disabled, class
|
|
|
4
4
|
if (!error && !helperText) {
|
|
5
5
|
return null;
|
|
6
6
|
}
|
|
7
|
-
return (<Paragraph id={id} className={clsx('pt-1.5', error && !disabled
|
|
7
|
+
return (<Paragraph id={id} data-orion-part="field-helper" className={clsx('pt-1.5', error && !disabled
|
|
8
8
|
? 'text-error dark:text-error-dark'
|
|
9
9
|
: disabled
|
|
10
10
|
? 'text-gray-3 dark:text-gray-2'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RenderErrorOrHelperText.jsx","sourceRoot":"","sources":["../../../../../src/components/01-atoms/Input/utils/RenderErrorOrHelperText.tsx"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAU5C,MAAM,UAAU,uBAAuB,CAAC,EACtC,EAAE,EACF,KAAK,EACL,UAAU,EACV,QAAQ,EACR,SAAS,GACoB;IAC7B,IAAI,CAAC,KAAK,IAAI,CAAC,UAAU,EAAE,CAAC;QAC1B,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,CAAC,SAAS,CACR,EAAE,CAAC,CAAC,EAAE,CAAC,CACP,SAAS,CAAC,CAAC,IAAI,CACb,QAAQ,EACR,KAAK,IAAI,CAAC,QAAQ;YAChB,CAAC,CAAC,iCAAiC;YACnC,CAAC,CAAC,QAAQ;gBACR,CAAC,CAAC,8BAA8B;gBAChC,CAAC,CAAC,8BAA8B,EACpC,SAAS,CACV,CAAC,CACF,IAAI,CAAC,QAAQ,CAEb;MAAA,CAAC,KAAK,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,UAAU,CAC1C;IAAA,EAAE,SAAS,CAAC,CACb,CAAC;AACJ,CAAC"}
|
|
1
|
+
{"version":3,"file":"RenderErrorOrHelperText.jsx","sourceRoot":"","sources":["../../../../../src/components/01-atoms/Input/utils/RenderErrorOrHelperText.tsx"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAU5C,MAAM,UAAU,uBAAuB,CAAC,EACtC,EAAE,EACF,KAAK,EACL,UAAU,EACV,QAAQ,EACR,SAAS,GACoB;IAC7B,IAAI,CAAC,KAAK,IAAI,CAAC,UAAU,EAAE,CAAC;QAC1B,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,CAAC,SAAS,CACR,EAAE,CAAC,CAAC,EAAE,CAAC,CACP,eAAe,CAAC,cAAc,CAC9B,SAAS,CAAC,CAAC,IAAI,CACb,QAAQ,EACR,KAAK,IAAI,CAAC,QAAQ;YAChB,CAAC,CAAC,iCAAiC;YACnC,CAAC,CAAC,QAAQ;gBACR,CAAC,CAAC,8BAA8B;gBAChC,CAAC,CAAC,8BAA8B,EACpC,SAAS,CACV,CAAC,CACF,IAAI,CAAC,QAAQ,CAEb;MAAA,CAAC,KAAK,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,UAAU,CAC1C;IAAA,EAAE,SAAS,CAAC,CACb,CAAC;AACJ,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/Select/Select.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,SAAS,EACd,KAAK,oBAAoB,EAI1B,MAAM,OAAO,CAAC;AAOf,KAAK,WAAW,GAAG;IACjB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,GAAG,MAAM,EAAE,MAAM,CAAC,CAAC;IAClD,QAAQ,CAAC,MAAM,CAAC,EAAE,IAAI,CACpB,iBAAiB,CACf,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,iBAAiB,CAClB,EACD,UAAU,CACX,CAAC;IACF,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IACpC,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAC7B,QAAQ,CAAC,UAAU,CAAC,EAAE,SAAS,CAAC;IAChC,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAC;CAC/B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,OAAO,EACP,MAAM,EACN,WAAW,EACX,UAAU,EACV,KAAK,EACL,gBAAgB,EAChB,SAAiB,EACjB,UAAU,EACV,UAAkB,GACnB,EAAE,WAAW,GAAG,SAAS,
|
|
1
|
+
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/Select/Select.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,SAAS,EACd,KAAK,oBAAoB,EAI1B,MAAM,OAAO,CAAC;AAOf,KAAK,WAAW,GAAG;IACjB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,GAAG,MAAM,EAAE,MAAM,CAAC,CAAC;IAClD,QAAQ,CAAC,MAAM,CAAC,EAAE,IAAI,CACpB,iBAAiB,CACf,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,iBAAiB,CAClB,EACD,UAAU,CACX,CAAC;IACF,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IACpC,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAC7B,QAAQ,CAAC,UAAU,CAAC,EAAE,SAAS,CAAC;IAChC,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAC;CAC/B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,OAAO,EACP,MAAM,EACN,WAAW,EACX,UAAU,EACV,KAAK,EACL,gBAAgB,EAChB,SAAiB,EACjB,UAAU,EACV,UAAkB,GACnB,EAAE,WAAW,GAAG,SAAS,CAwJzB"}
|
|
@@ -67,9 +67,9 @@ export function Select({ label, options, select, placeholder, helperText, error,
|
|
|
67
67
|
hideLabel,
|
|
68
68
|
});
|
|
69
69
|
labelProps.htmlFor = id;
|
|
70
|
-
return (<div className="w-full max-w-full">
|
|
71
|
-
<div className="relative h-9">
|
|
72
|
-
<select {...selectProps} ref={selectRef} id={id} tabIndex={customList ? -1 : selectProps.tabIndex} aria-hidden={customList || undefined} className={clsx(selectClasses, customList && 'pointer-events-none')} aria-invalid={error ? true : select?.['aria-invalid']} aria-describedby={describedBy}>
|
|
70
|
+
return (<div data-orion-part="field" className="w-full max-w-full">
|
|
71
|
+
<div data-orion-part="field-box" className="relative h-9">
|
|
72
|
+
<select {...selectProps} data-orion-part="field-control" ref={selectRef} id={id} tabIndex={customList ? -1 : selectProps.tabIndex} aria-hidden={customList || undefined} className={clsx(selectClasses, customList && 'pointer-events-none')} aria-invalid={error ? true : select?.['aria-invalid']} aria-describedby={describedBy}>
|
|
73
73
|
{!!placeholder && (<option value="" disabled hidden className="bg-white text-black dark:bg-black dark:text-white">
|
|
74
74
|
{placeholder}
|
|
75
75
|
</option>)}
|
|
@@ -85,7 +85,7 @@ export function Select({ label, options, select, placeholder, helperText, error,
|
|
|
85
85
|
</label>
|
|
86
86
|
</Show.When>
|
|
87
87
|
<Show.When isTrue={Boolean(labelAddon)}>
|
|
88
|
-
<div className={clsx(labelProps.className, 'flex items-center gap-1')}>
|
|
88
|
+
<div data-orion-part="field-label" className={clsx(labelProps.className, 'flex items-center gap-1')}>
|
|
89
89
|
<label id={labelId} htmlFor={id}>
|
|
90
90
|
{label}
|
|
91
91
|
</label>
|
|
@@ -93,17 +93,17 @@ export function Select({ label, options, select, placeholder, helperText, error,
|
|
|
93
93
|
</div>
|
|
94
94
|
</Show.When>
|
|
95
95
|
<Show.Else>
|
|
96
|
-
<label {...labelProps} id={labelId}>
|
|
96
|
+
<label {...labelProps} id={labelId} data-orion-part="field-label">
|
|
97
97
|
{label}
|
|
98
98
|
</label>
|
|
99
99
|
</Show.Else>
|
|
100
100
|
</Show>
|
|
101
|
-
<FaSortDown aria-hidden="true" className={clsx('peer-disabled:text-gray-3 dark:peer-disabled:text-gray-2 pointer-events-none absolute top-2 right-4', error
|
|
101
|
+
<FaSortDown aria-hidden="true" data-orion-part="field-icon" className={clsx('peer-disabled:text-gray-3 dark:peer-disabled:text-gray-2 pointer-events-none absolute top-2 right-4', error
|
|
102
102
|
? 'text-error dark:text-error-dark'
|
|
103
103
|
: isMuted
|
|
104
104
|
? 'text-gray-2 dark:text-gray-2'
|
|
105
105
|
: 'text-black dark:text-white')}/>
|
|
106
|
-
<fieldset className={fieldsetClasses}>
|
|
106
|
+
<fieldset data-orion-part="field-outline" className={fieldsetClasses}>
|
|
107
107
|
{!hideLabel && (<legend className={legendClasses}>
|
|
108
108
|
{label}
|
|
109
109
|
{labelAddon && (<span aria-hidden="true" className="ml-1 inline-flex">
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.jsx","sourceRoot":"","sources":["../../../../src/components/01-atoms/Select/Select.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"Select.jsx","sourceRoot":"","sources":["../../../../src/components/01-atoms/Select/Select.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,7 +1,28 @@
|
|
|
1
1
|
import { type ReactNode } from 'react';
|
|
2
|
-
type
|
|
2
|
+
export type SpinnerSize = 'sm' | 'md';
|
|
3
|
+
export type SpinnerProps = {
|
|
3
4
|
label?: string;
|
|
5
|
+
size?: SpinnerSize;
|
|
4
6
|
};
|
|
5
|
-
|
|
6
|
-
|
|
7
|
+
/**
|
|
8
|
+
* Indeterminate loading indicator.
|
|
9
|
+
*
|
|
10
|
+
* The root is a `span` so it can sit inside a `button` or a line of text; it
|
|
11
|
+
* still renders as a block of its own size.
|
|
12
|
+
*
|
|
13
|
+
* @component
|
|
14
|
+
* @example
|
|
15
|
+
* <Spinner label="Loading orders" />
|
|
16
|
+
*
|
|
17
|
+
* @example
|
|
18
|
+
* // Inline, next to a short text
|
|
19
|
+
* <Spinner size="sm" label="Saving" />
|
|
20
|
+
*
|
|
21
|
+
* @param {Object} props - The properties of the Spinner component.
|
|
22
|
+
* @param {string} [props.label] - Accessible name announced by the `status` role.
|
|
23
|
+
* @param {'sm' | 'md'} [props.size='md'] - `md` is 32px, for a section that is loading. `sm` is 16px, for a button or a line of text.
|
|
24
|
+
*
|
|
25
|
+
* @returns {ReactNode} The rendered Spinner component.
|
|
26
|
+
*/
|
|
27
|
+
export declare function Spinner({ label, size }: SpinnerProps): ReactNode;
|
|
7
28
|
//# sourceMappingURL=Spinner.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/Spinner/Spinner.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/Spinner/Spinner.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,CAAC;AAEtC,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB,CAAC;AAOF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,OAAO,CAAC,EAAE,KAAK,EAAE,IAAW,EAAE,EAAE,YAAY,GAAG,SAAS,CAkBvE"}
|
|
@@ -1,6 +1,32 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
import clsx from 'clsx';
|
|
2
|
+
const sizeMap = {
|
|
3
|
+
sm: { box: 'size-4', ring: 'size-4 border-2' },
|
|
4
|
+
md: { box: 'size-8', ring: 'size-8 border-4' },
|
|
5
|
+
};
|
|
6
|
+
/**
|
|
7
|
+
* Indeterminate loading indicator.
|
|
8
|
+
*
|
|
9
|
+
* The root is a `span` so it can sit inside a `button` or a line of text; it
|
|
10
|
+
* still renders as a block of its own size.
|
|
11
|
+
*
|
|
12
|
+
* @component
|
|
13
|
+
* @example
|
|
14
|
+
* <Spinner label="Loading orders" />
|
|
15
|
+
*
|
|
16
|
+
* @example
|
|
17
|
+
* // Inline, next to a short text
|
|
18
|
+
* <Spinner size="sm" label="Saving" />
|
|
19
|
+
*
|
|
20
|
+
* @param {Object} props - The properties of the Spinner component.
|
|
21
|
+
* @param {string} [props.label] - Accessible name announced by the `status` role.
|
|
22
|
+
* @param {'sm' | 'md'} [props.size='md'] - `md` is 32px, for a section that is loading. `sm` is 16px, for a button or a line of text.
|
|
23
|
+
*
|
|
24
|
+
* @returns {ReactNode} The rendered Spinner component.
|
|
25
|
+
*/
|
|
26
|
+
export function Spinner({ label, size = 'md' }) {
|
|
27
|
+
const sizing = sizeMap[size];
|
|
28
|
+
return (<span role="status" aria-label={label} className={clsx('block', sizing.box)}>
|
|
29
|
+
<span aria-hidden="true" className={clsx('border-gray-2 border-b-lavender dark:border-gray-2 dark:border-b-lavender-dark inline-block animate-spin rounded-full', sizing.ring)}/>
|
|
30
|
+
</span>);
|
|
5
31
|
}
|
|
6
32
|
//# sourceMappingURL=Spinner.jsx.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Spinner.jsx","sourceRoot":"","sources":["../../../../src/components/01-atoms/Spinner/Spinner.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Spinner.jsx","sourceRoot":"","sources":["../../../../src/components/01-atoms/Spinner/Spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AAUxB,MAAM,OAAO,GAAuD;IAClE,EAAE,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,iBAAiB,EAAE;IAC9C,EAAE,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,iBAAiB,EAAE;CAC/C,CAAC;AAEF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,UAAU,OAAO,CAAC,EAAE,KAAK,EAAE,IAAI,GAAG,IAAI,EAAgB;IAC1D,MAAM,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAE7B,OAAO,CACL,CAAC,IAAI,CACH,IAAI,CAAC,QAAQ,CACb,UAAU,CAAC,CAAC,KAAK,CAAC,CAClB,SAAS,CAAC,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,CAErC;MAAA,CAAC,IAAI,CACH,WAAW,CAAC,MAAM,CAClB,SAAS,CAAC,CAAC,IAAI,CACb,uHAAuH,EACvH,MAAM,CAAC,IAAI,CACZ,CAAC,EAEN;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/Spinner/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/Spinner/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC"}
|
|
@@ -11,6 +11,8 @@ export type StatProps = {
|
|
|
11
11
|
hint?: string;
|
|
12
12
|
/** Dot next to the label that grades the value. `default` shows none. */
|
|
13
13
|
tone?: StatTone;
|
|
14
|
+
/** Decorative icon in the top right corner, hidden from screen readers. */
|
|
15
|
+
icon?: ReactNode;
|
|
14
16
|
/** Holds the space with placeholders while the value loads. */
|
|
15
17
|
isLoading?: boolean;
|
|
16
18
|
} & Omit<HTMLAttributes<HTMLDivElement>, 'children'>;
|
|
@@ -36,9 +38,10 @@ export type StatProps = {
|
|
|
36
38
|
* @param {string} [props.delta] - Change against a previous period, already formatted.
|
|
37
39
|
* @param {string} [props.hint] - Short context shown after the delta.
|
|
38
40
|
* @param {'default' | 'success' | 'warning' | 'error'} [props.tone='default'] - Dot next to the label that grades the value.
|
|
41
|
+
* @param {ReactNode} [props.icon] - Decorative icon in the top right corner.
|
|
39
42
|
* @param {boolean} [props.isLoading=false] - Shows placeholders instead of the value and the context line.
|
|
40
43
|
*
|
|
41
44
|
* @returns {ReactNode} The rendered Stat component.
|
|
42
45
|
*/
|
|
43
|
-
export declare function Stat({ label, value, delta, hint, tone, isLoading, ...restProps }: StatProps): ReactNode;
|
|
46
|
+
export declare function Stat({ label, value, delta, hint, tone, icon, isLoading, ...restProps }: StatProps): ReactNode;
|
|
44
47
|
//# sourceMappingURL=Stat.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Stat.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/Stat/Stat.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvD,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAEnE,MAAM,MAAM,SAAS,GAAG;IACtB,gCAAgC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,qCAAqC;IACrC,KAAK,EAAE,SAAS,CAAC;IACjB,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sDAAsD;IACtD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yEAAyE;IACzE,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,+DAA+D;IAC/D,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,CAAC;AAUrD
|
|
1
|
+
{"version":3,"file":"Stat.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/Stat/Stat.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvD,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAEnE,MAAM,MAAM,SAAS,GAAG;IACtB,gCAAgC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,qCAAqC;IACrC,KAAK,EAAE,SAAS,CAAC;IACjB,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sDAAsD;IACtD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yEAAyE;IACzE,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,2EAA2E;IAC3E,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,+DAA+D;IAC/D,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,CAAC;AAUrD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,IAAI,CAAC,EACnB,KAAK,EACL,KAAK,EACL,KAAK,EACL,IAAI,EACJ,IAAgB,EAChB,IAAI,EACJ,SAAiB,EACjB,GAAG,SAAS,EACb,EAAE,SAAS,GAAG,SAAS,CAkDvB"}
|
|
@@ -30,13 +30,17 @@ const toneMap = {
|
|
|
30
30
|
* @param {string} [props.delta] - Change against a previous period, already formatted.
|
|
31
31
|
* @param {string} [props.hint] - Short context shown after the delta.
|
|
32
32
|
* @param {'default' | 'success' | 'warning' | 'error'} [props.tone='default'] - Dot next to the label that grades the value.
|
|
33
|
+
* @param {ReactNode} [props.icon] - Decorative icon in the top right corner.
|
|
33
34
|
* @param {boolean} [props.isLoading=false] - Shows placeholders instead of the value and the context line.
|
|
34
35
|
*
|
|
35
36
|
* @returns {ReactNode} The rendered Stat component.
|
|
36
37
|
*/
|
|
37
|
-
export function Stat({ label, value, delta, hint, tone = 'default', isLoading = false, ...restProps }) {
|
|
38
|
+
export function Stat({ label, value, delta, hint, tone = 'default', icon, isLoading = false, ...restProps }) {
|
|
38
39
|
const context = [delta, hint].filter(Boolean).join(' · ');
|
|
39
|
-
return (<div {...restProps} aria-busy={isLoading || undefined} className={clsx('border-gray-5 dark:border-gray-1 flex min-w-0 flex-col gap-1 rounded-lg border p-4', restProps.className)}>
|
|
40
|
+
return (<div {...restProps} data-orion-part="stat" aria-busy={isLoading || undefined} className={clsx('border-gray-5 dark:border-gray-1 flex min-w-0 flex-col gap-1 rounded-lg border p-4', !!icon && 'relative pr-14', restProps.className)}>
|
|
41
|
+
{!!icon && (<span aria-hidden="true" data-orion-part="stat-icon" className="absolute top-3.5 right-3.5 flex">
|
|
42
|
+
{icon}
|
|
43
|
+
</span>)}
|
|
40
44
|
<p className="text-gray-1 dark:text-gray-2 flex items-center gap-1.5 text-xs leading-4">
|
|
41
45
|
{tone !== 'default' && (<span aria-hidden="true" className={clsx('size-1.5 shrink-0 rounded-full', toneMap[tone])}/>)}
|
|
42
46
|
{label}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Stat.jsx","sourceRoot":"","sources":["../../../../src/components/01-atoms/Stat/Stat.tsx"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"Stat.jsx","sourceRoot":"","sources":["../../../../src/components/01-atoms/Stat/Stat.tsx"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAqBvC,6EAA6E;AAC7E,qDAAqD;AACrD,MAAM,OAAO,GAAiD;IAC5D,OAAO,EAAE,iCAAiC;IAC1C,OAAO,EAAE,6BAA6B;IACtC,KAAK,EAAE,6BAA6B;CACrC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,UAAU,IAAI,CAAC,EACnB,KAAK,EACL,KAAK,EACL,KAAK,EACL,IAAI,EACJ,IAAI,GAAG,SAAS,EAChB,IAAI,EACJ,SAAS,GAAG,KAAK,EACjB,GAAG,SAAS,EACF;IACV,MAAM,OAAO,GAAG,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAE1D,OAAO,CACL,CAAC,GAAG,CACF,IAAI,SAAS,CAAC,CACd,eAAe,CAAC,MAAM,CACtB,SAAS,CAAC,CAAC,SAAS,IAAI,SAAS,CAAC,CAClC,SAAS,CAAC,CAAC,IAAI,CACb,oFAAoF,EACpF,CAAC,CAAC,IAAI,IAAI,gBAAgB,EAC1B,SAAS,CAAC,SAAS,CACpB,CAAC,CAEF;MAAA,CAAC,CAAC,CAAC,IAAI,IAAI,CACT,CAAC,IAAI,CACH,WAAW,CAAC,MAAM,CAClB,eAAe,CAAC,WAAW,CAC3B,SAAS,CAAC,iCAAiC,CAE3C;UAAA,CAAC,IAAI,CACP;QAAA,EAAE,IAAI,CAAC,CACR,CACD;MAAA,CAAC,CAAC,CAAC,SAAS,CAAC,0EAA0E,CACrF;QAAA,CAAC,IAAI,KAAK,SAAS,IAAI,CACrB,CAAC,IAAI,CACH,WAAW,CAAC,MAAM,CAClB,SAAS,CAAC,CAAC,IAAI,CAAC,gCAAgC,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EACjE,CACH,CACD;QAAA,CAAC,KAAK,CACR;MAAA,EAAE,CAAC,CACH;MAAA,CAAC,IAAI,CACH;QAAA,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,CAC3B;UAAA,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,UAAU,EAC3C;UAAA,CAAC,QAAQ,CAAC,SAAS,CAAC,aAAa,EACnC;QAAA,EAAE,IAAI,CAAC,IAAI,CACX;QAAA,CAAC,IAAI,CAAC,IAAI,CACR;UAAA,CAAC,GAAG,CAAC,SAAS,CAAC,+EAA+E,CAC5F;YAAA,CAAC,KAAK,CACR;UAAA,EAAE,GAAG,CACL;UAAA,CAAC,OAAO,IAAI,CACV,CAAC,CAAC,CAAC,SAAS,CAAC,gDAAgD,CAC3D;cAAA,CAAC,OAAO,CACV;YAAA,EAAE,CAAC,CAAC,CACL,CACH;QAAA,EAAE,IAAI,CAAC,IAAI,CACb;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/Textarea/Textarea.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,SAAS,EACd,KAAK,sBAAsB,EAE5B,MAAM,OAAO,CAAC;AAGf,KAAK,aAAa,GAAG;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,IAAI,CACZ,iBAAiB,CACf,sBAAsB,CAAC,mBAAmB,CAAC,EAC3C,mBAAmB,CACpB,EACD,aAAa,CACd,CAAC;IACF,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,QAAQ,EACR,UAAU,EACV,KAAK,EACL,WAAW,EACX,SAAiB,GAClB,EAAE,aAAa,GAAG,SAAS,
|
|
1
|
+
{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/Textarea/Textarea.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,SAAS,EACd,KAAK,sBAAsB,EAE5B,MAAM,OAAO,CAAC;AAGf,KAAK,aAAa,GAAG;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,IAAI,CACZ,iBAAiB,CACf,sBAAsB,CAAC,mBAAmB,CAAC,EAC3C,mBAAmB,CACpB,EACD,aAAa,CACd,CAAC;IACF,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,QAAQ,EACR,UAAU,EACV,KAAK,EACL,WAAW,EACX,SAAiB,GAClB,EAAE,aAAa,GAAG,SAAS,CAiD3B"}
|
|
@@ -37,13 +37,13 @@ export function Textarea({ label, textarea, helperText, error, placeholder, hide
|
|
|
37
37
|
const textareaClasses = clsx('w-full resize-y rounded-lg border bg-transparent p-3.5 text-sm text-black transition-colors outline-none placeholder:text-gray-2 dark:text-white dark:placeholder:text-gray-2', 'disabled:border-gray-3 disabled:text-gray-3 dark:disabled:border-gray-2 dark:disabled:text-gray-2 disabled:cursor-not-allowed', error
|
|
38
38
|
? 'border-error focus:border-error focus:ring-error dark:border-error-dark dark:focus:border-error-dark dark:focus:ring-error-dark focus:ring-2'
|
|
39
39
|
: 'border-black hover:border-gray-1 focus:border-lavender focus:ring-lavender dark:border-white dark:hover:border-gray-2 focus:ring-2', textarea.className);
|
|
40
|
-
return (<div className="w-full max-w-full">
|
|
40
|
+
return (<div data-orion-part="field" className="w-full max-w-full">
|
|
41
41
|
{hideLabel ? (<label htmlFor={id} className="sr-only">
|
|
42
42
|
{label}
|
|
43
|
-
</label>) : (<label htmlFor={id} className="text-gray-1 mb-1.5 ml-0.5 block text-xs font-semibold">
|
|
43
|
+
</label>) : (<label htmlFor={id} data-orion-part="field-label" className="text-gray-1 mb-1.5 ml-0.5 block text-xs font-semibold">
|
|
44
44
|
{label}
|
|
45
45
|
</label>)}
|
|
46
|
-
<textarea {...textarea} id={id} className={textareaClasses} placeholder={placeholder} aria-invalid={error ? true : textarea['aria-invalid']} aria-describedby={describedBy}/>
|
|
46
|
+
<textarea {...textarea} data-orion-part="field-control" id={id} className={textareaClasses} placeholder={placeholder} aria-invalid={error ? true : textarea['aria-invalid']} aria-describedby={describedBy}/>
|
|
47
47
|
<RenderErrorOrHelperText id={descriptionId} disabled={textarea.disabled} helperText={helperText} error={error}/>
|
|
48
48
|
</div>);
|
|
49
49
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Textarea.jsx","sourceRoot":"","sources":["../../../../src/components/01-atoms/Textarea/Textarea.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAIL,KAAK,GACN,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,uBAAuB,EAAE,MAAM,wCAAwC,CAAC;AAiBjF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,UAAU,QAAQ,CAAC,EACvB,KAAK,EACL,QAAQ,EACR,UAAU,EACV,KAAK,EACL,WAAW,EACX,SAAS,GAAG,KAAK,GACH;IACd,MAAM,WAAW,GAAG,KAAK,EAAE,CAAC;IAC5B,MAAM,EAAE,GAAG,QAAQ,CAAC,EAAE,IAAI,WAAW,CAAC;IACtC,MAAM,aAAa,GAAG,KAAK,IAAI,UAAU,CAAC,CAAC,CAAC,GAAG,EAAE,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC;IAC5E,MAAM,WAAW,GACf,CAAC,QAAQ,CAAC,kBAAkB,CAAC,EAAE,aAAa,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;QACvE,SAAS,CAAC;IAEZ,MAAM,eAAe,GAAG,IAAI,CAC1B,+KAA+K,EAC/K,+HAA+H,EAC/H,KAAK;QACH,CAAC,CAAC,8IAA8I;QAChJ,CAAC,CAAC,oIAAoI,EACxI,QAAQ,CAAC,SAAS,CACnB,CAAC;IAEF,OAAO,CACL,CAAC,GAAG,CAAC,SAAS,CAAC,mBAAmB,
|
|
1
|
+
{"version":3,"file":"Textarea.jsx","sourceRoot":"","sources":["../../../../src/components/01-atoms/Textarea/Textarea.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAIL,KAAK,GACN,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,uBAAuB,EAAE,MAAM,wCAAwC,CAAC;AAiBjF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,UAAU,QAAQ,CAAC,EACvB,KAAK,EACL,QAAQ,EACR,UAAU,EACV,KAAK,EACL,WAAW,EACX,SAAS,GAAG,KAAK,GACH;IACd,MAAM,WAAW,GAAG,KAAK,EAAE,CAAC;IAC5B,MAAM,EAAE,GAAG,QAAQ,CAAC,EAAE,IAAI,WAAW,CAAC;IACtC,MAAM,aAAa,GAAG,KAAK,IAAI,UAAU,CAAC,CAAC,CAAC,GAAG,EAAE,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC;IAC5E,MAAM,WAAW,GACf,CAAC,QAAQ,CAAC,kBAAkB,CAAC,EAAE,aAAa,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;QACvE,SAAS,CAAC;IAEZ,MAAM,eAAe,GAAG,IAAI,CAC1B,+KAA+K,EAC/K,+HAA+H,EAC/H,KAAK;QACH,CAAC,CAAC,8IAA8I;QAChJ,CAAC,CAAC,oIAAoI,EACxI,QAAQ,CAAC,SAAS,CACnB,CAAC;IAEF,OAAO,CACL,CAAC,GAAG,CAAC,eAAe,CAAC,OAAO,CAAC,SAAS,CAAC,mBAAmB,CACxD;MAAA,CAAC,SAAS,CAAC,CAAC,CAAC,CACX,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,SAAS,CACrC;UAAA,CAAC,KAAK,CACR;QAAA,EAAE,KAAK,CAAC,CACT,CAAC,CAAC,CAAC,CACF,CAAC,KAAK,CACJ,OAAO,CAAC,CAAC,EAAE,CAAC,CACZ,eAAe,CAAC,aAAa,CAC7B,SAAS,CAAC,uDAAuD,CAEjE;UAAA,CAAC,KAAK,CACR;QAAA,EAAE,KAAK,CAAC,CACT,CACD;MAAA,CAAC,QAAQ,CACP,IAAI,QAAQ,CAAC,CACb,eAAe,CAAC,eAAe,CAC/B,EAAE,CAAC,CAAC,EAAE,CAAC,CACP,SAAS,CAAC,CAAC,eAAe,CAAC,CAC3B,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,YAAY,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAC,CACtD,gBAAgB,CAAC,CAAC,WAAW,CAAC,EAEhC;MAAA,CAAC,uBAAuB,CACtB,EAAE,CAAC,CAAC,aAAa,CAAC,CAClB,QAAQ,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAC5B,UAAU,CAAC,CAAC,UAAU,CAAC,CACvB,KAAK,CAAC,CAAC,KAAK,CAAC,EAEjB;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionSection.d.ts","sourceRoot":"","sources":["../../../../src/components/02-molecules/Accordion/AccordionSection.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,SAAS,EAMV,MAAM,OAAO,CAAC;AAOf,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;IACpB,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;
|
|
1
|
+
{"version":3,"file":"AccordionSection.d.ts","sourceRoot":"","sources":["../../../../src/components/02-molecules/Accordion/AccordionSection.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,SAAS,EAMV,MAAM,OAAO,CAAC;AAOf,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;IACpB,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AA6BF;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,QAAQ,EACR,EAAE,GACH,EAAE,qBAAqB,GAAG,SAAS,CA0GnC"}
|
|
@@ -21,6 +21,8 @@ const chevronStyleMap = {
|
|
|
21
21
|
pill: '',
|
|
22
22
|
plain: 'size-3 text-gray-1 dark:text-gray-2',
|
|
23
23
|
};
|
|
24
|
+
/** Matches `duration-300` on the content. */
|
|
25
|
+
const OPEN_DURATION_MS = 300;
|
|
24
26
|
/**
|
|
25
27
|
* AccordionSection component for displaying a collapsible section within an Accordion.
|
|
26
28
|
* The header takes the `modifier` of the parent Accordion.
|
|
@@ -45,6 +47,9 @@ export function AccordionSection({ title, children, id, }) {
|
|
|
45
47
|
const contentRef = useRef(null);
|
|
46
48
|
// A section that starts open renders at full height instead of animating in.
|
|
47
49
|
const [maxHeight, setMaxHeight] = useState(isActivated ? 'none' : '0px');
|
|
50
|
+
// Once fully open the content stops clipping, so a popover inside it
|
|
51
|
+
// (DatePicker, Autocomplete) can overflow the section.
|
|
52
|
+
const [isSettled, setIsSettled] = useState(isActivated);
|
|
48
53
|
const generatedId = useId();
|
|
49
54
|
const triggerId = `${generatedId}-trigger`;
|
|
50
55
|
const panelId = `${generatedId}-panel`;
|
|
@@ -52,11 +57,29 @@ export function AccordionSection({ title, children, id, }) {
|
|
|
52
57
|
if (!contentRef.current) {
|
|
53
58
|
return;
|
|
54
59
|
}
|
|
55
|
-
|
|
56
|
-
|
|
60
|
+
if (!isActivated) {
|
|
61
|
+
setIsSettled(false);
|
|
62
|
+
setMaxHeight('0px');
|
|
63
|
+
return;
|
|
64
|
+
}
|
|
65
|
+
if (isSettled) {
|
|
66
|
+
return;
|
|
67
|
+
}
|
|
68
|
+
setMaxHeight(`${contentRef.current.scrollHeight}px`);
|
|
69
|
+
}, [isActivated, isSettled]);
|
|
57
70
|
useEffect(() => {
|
|
58
71
|
updateHeight();
|
|
59
72
|
}, [isActivated, updateHeight]);
|
|
73
|
+
useEffect(() => {
|
|
74
|
+
if (!isActivated || isSettled) {
|
|
75
|
+
return;
|
|
76
|
+
}
|
|
77
|
+
const timer = window.setTimeout(() => {
|
|
78
|
+
setIsSettled(true);
|
|
79
|
+
setMaxHeight('none');
|
|
80
|
+
}, OPEN_DURATION_MS);
|
|
81
|
+
return () => window.clearTimeout(timer);
|
|
82
|
+
}, [isActivated, isSettled]);
|
|
60
83
|
useEffect(() => {
|
|
61
84
|
window.addEventListener('resize', updateHeight);
|
|
62
85
|
return () => window.removeEventListener('resize', updateHeight);
|
|
@@ -75,7 +98,7 @@ export function AccordionSection({ title, children, id, }) {
|
|
|
75
98
|
<span>{title}</span>
|
|
76
99
|
<FaChevronDown aria-hidden className={clsx('transition-transform duration-300 ease-in-out', chevronStyleMap[context.modifier], isActivated && 'rotate-180 transform')}/>
|
|
77
100
|
</button>
|
|
78
|
-
<div ref={contentRef} id={panelId} role="region" aria-labelledby={triggerId} hidden={!isActivated} style={{ maxHeight }} className=
|
|
101
|
+
<div ref={contentRef} id={panelId} role="region" aria-labelledby={triggerId} hidden={!isActivated} style={{ maxHeight }} className={clsx('text-black transition-all duration-300 ease-in-out dark:text-white', isSettled ? 'overflow-visible' : 'overflow-hidden')}>
|
|
79
102
|
<div>{children}</div>
|
|
80
103
|
</div>
|
|
81
104
|
</section>);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionSection.jsx","sourceRoot":"","sources":["../../../../src/components/02-molecules/Accordion/AccordionSection.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAEL,WAAW,EACX,SAAS,EACT,KAAK,EACL,MAAM,EACN,QAAQ,GACT,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAEL,mBAAmB,GACpB,MAAM,oBAAoB,CAAC;AAQ5B,MAAM,eAAe,GAAsC;IACzD,IAAI,EAAE,4CAA4C;IAClD,KAAK,EAAE,iBAAiB;CACzB,CAAC;AAEF,MAAM,oBAAoB,GAGtB;IACF,IAAI,EAAE;QACJ,MAAM,EAAE,2CAA2C;QACnD,QAAQ,EAAE,kCAAkC;KAC7C;IACD,KAAK,EAAE;QACL,MAAM,EAAE,EAAE;QACV,QAAQ,EAAE,EAAE;KACb;CACF,CAAC;AAEF,MAAM,eAAe,GAAsC;IACzD,IAAI,EAAE,EAAE;IACR,KAAK,EAAE,qCAAqC;CAC7C,CAAC;AAEF;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,UAAU,gBAAgB,CAAC,EAC/B,KAAK,EACL,QAAQ,EACR,EAAE,GACoB;IACtB,MAAM,OAAO,GAAG,mBAAmB,EAAE,CAAC;IACtC,MAAM,WAAW,GAAG,OAAO,CAAC,SAAS,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;IACnD,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAChD,6EAA6E;IAC7E,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;IACzE,MAAM,WAAW,GAAG,KAAK,EAAE,CAAC;IAC5B,MAAM,SAAS,GAAG,GAAG,WAAW,UAAU,CAAC;IAC3C,MAAM,OAAO,GAAG,GAAG,WAAW,QAAQ,CAAC;IAEvC,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,EAAE;QACpC,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE,CAAC;YACxB,OAAO;QACT,CAAC;QAED,
|
|
1
|
+
{"version":3,"file":"AccordionSection.jsx","sourceRoot":"","sources":["../../../../src/components/02-molecules/Accordion/AccordionSection.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
import type { HTMLAttributes, ReactNode } from 'react';
|
|
2
|
+
export type CardModifier = 'outline' | 'accent' | 'tinted';
|
|
3
|
+
export type CardPadding = 'md' | 'sm';
|
|
4
|
+
export type CardElement = 'div' | 'section' | 'article' | 'li' | 'aside';
|
|
5
|
+
type CardBaseProps = {
|
|
6
|
+
as?: CardElement;
|
|
7
|
+
modifier?: CardModifier;
|
|
8
|
+
padding?: CardPadding;
|
|
9
|
+
titleLevel?: 'h6' | 'h7';
|
|
10
|
+
/** Content at the right of the title: a badge, a menu, a secondary action. */
|
|
11
|
+
headerEnd?: ReactNode;
|
|
12
|
+
/** Zone at the bottom, separated by a border. */
|
|
13
|
+
footer?: ReactNode;
|
|
14
|
+
children?: ReactNode;
|
|
15
|
+
} & Omit<HTMLAttributes<HTMLElement>, 'title' | 'onClick'>;
|
|
16
|
+
type CardStaticProps = {
|
|
17
|
+
title?: ReactNode;
|
|
18
|
+
href?: never;
|
|
19
|
+
onClick?: never;
|
|
20
|
+
};
|
|
21
|
+
type CardLinkProps = {
|
|
22
|
+
title: ReactNode;
|
|
23
|
+
href: string;
|
|
24
|
+
onClick?: never;
|
|
25
|
+
};
|
|
26
|
+
type CardButtonProps = {
|
|
27
|
+
title: ReactNode;
|
|
28
|
+
onClick: () => void;
|
|
29
|
+
href?: never;
|
|
30
|
+
};
|
|
31
|
+
export type CardProps = CardBaseProps & (CardStaticProps | CardLinkProps | CardButtonProps);
|
|
32
|
+
/**
|
|
33
|
+
* Bordered container that groups content inside a page: a summary, a form
|
|
34
|
+
* section, an item of a list on mobile.
|
|
35
|
+
*
|
|
36
|
+
* With `href` or `onClick` the whole card navigates or acts. The title becomes
|
|
37
|
+
* the link or button and stretches over the card, so its text is the
|
|
38
|
+
* accessible name and a control inside `headerEnd` or `footer` keeps its own
|
|
39
|
+
* click.
|
|
40
|
+
*
|
|
41
|
+
* @component
|
|
42
|
+
* @example
|
|
43
|
+
* <Card title="Shipping address" headerEnd={<Badge>Default</Badge>}>
|
|
44
|
+
* <Paragraph>Av. Siempre Viva 742</Paragraph>
|
|
45
|
+
* </Card>
|
|
46
|
+
*
|
|
47
|
+
* @example
|
|
48
|
+
* // The whole card opens a detail, with its own action in the footer
|
|
49
|
+
* <Card
|
|
50
|
+
* as="li"
|
|
51
|
+
* title="Order 1043"
|
|
52
|
+
* onClick={() => openOrder('1043')}
|
|
53
|
+
* footer={<Button size="sm" modifier="second">Cancel</Button>}
|
|
54
|
+
* >
|
|
55
|
+
* 3 items · Delivered
|
|
56
|
+
* </Card>
|
|
57
|
+
*
|
|
58
|
+
* @param {Object} props - The properties of the Card component.
|
|
59
|
+
* @param {'div' | 'section' | 'article' | 'li' | 'aside'} [props.as='div'] - The HTML element to render.
|
|
60
|
+
* @param {'outline' | 'accent' | 'tinted'} [props.modifier='outline'] - `outline` has a gray border, `accent` a lavender border, `tinted` a light lavender background with a lavender border.
|
|
61
|
+
* @param {'md' | 'sm'} [props.padding='md'] - `md` is 20px; `sm` is 16px, for dense lists and mobile.
|
|
62
|
+
* @param {ReactNode} [props.title] - Card title. Required with `href` or `onClick`: it is the accessible name.
|
|
63
|
+
* @param {'h6' | 'h7'} [props.titleLevel='h7'] - Heading level of the title.
|
|
64
|
+
* @param {ReactNode} [props.headerEnd] - Content at the right of the title.
|
|
65
|
+
* @param {ReactNode} [props.footer] - Zone at the bottom separated by a border. The consumer decides if an action takes the full width.
|
|
66
|
+
* @param {string} [props.href] - The whole card navigates to this URL.
|
|
67
|
+
* @param {() => void} [props.onClick] - The whole card is a button; Enter and Space activate it.
|
|
68
|
+
* @param {ReactNode} [props.children] - Card content.
|
|
69
|
+
*
|
|
70
|
+
* @returns {ReactNode} The rendered Card component.
|
|
71
|
+
*/
|
|
72
|
+
export declare function Card({ as: Element, modifier, padding, title, titleLevel, headerEnd, footer, href, onClick, children, ...restProps }: CardProps): ReactNode;
|
|
73
|
+
export {};
|
|
74
|
+
//# sourceMappingURL=Card.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../src/components/02-molecules/Card/Card.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvD,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAC3D,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,CAAC;AACtC,MAAM,MAAM,WAAW,GAAG,KAAK,GAAG,SAAS,GAAG,SAAS,GAAG,IAAI,GAAG,OAAO,CAAC;AAEzE,KAAK,aAAa,GAAG;IACnB,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,UAAU,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACzB,8EAA8E;IAC9E,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,iDAAiD;IACjD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC,CAAC;AAE3D,KAAK,eAAe,GAAG;IAAE,KAAK,CAAC,EAAE,SAAS,CAAC;IAAC,IAAI,CAAC,EAAE,KAAK,CAAC;IAAC,OAAO,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAC5E,KAAK,aAAa,GAAG;IAAE,KAAK,EAAE,SAAS,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AACzE,KAAK,eAAe,GAAG;IAAE,KAAK,EAAE,SAAS,CAAC;IAAC,OAAO,EAAE,MAAM,IAAI,CAAC;IAAC,IAAI,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAE/E,MAAM,MAAM,SAAS,GAAG,aAAa,GACnC,CAAC,eAAe,GAAG,aAAa,GAAG,eAAe,CAAC,CAAC;AA0BtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,wBAAgB,IAAI,CAAC,EACnB,EAAE,EAAE,OAAe,EACnB,QAAoB,EACpB,OAAc,EACd,KAAK,EACL,UAAiB,EACjB,SAAS,EACT,MAAM,EACN,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,GAAG,SAAS,EACb,EAAE,SAAS,GAAG,SAAS,CA0DvB"}
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
import clsx from 'clsx';
|
|
2
|
+
import Link from 'next/link';
|
|
3
|
+
import { Heading } from '../../01-atoms/Heading';
|
|
4
|
+
const styleMap = {
|
|
5
|
+
outline: 'border-gray-5 dark:border-gray-1 bg-white dark:bg-black',
|
|
6
|
+
accent: 'border-lavender dark:border-lavender-dark bg-white dark:bg-black',
|
|
7
|
+
tinted: 'border-lavender-1 bg-lavender-3 dark:border-lavender-dark-1 dark:bg-lavender-dark-1/40',
|
|
8
|
+
};
|
|
9
|
+
const interactiveMap = {
|
|
10
|
+
outline: 'hover:border-gray-2 dark:hover:border-gray-2',
|
|
11
|
+
accent: 'hover:bg-lavender-3 dark:hover:bg-lavender-dark-1/40',
|
|
12
|
+
tinted: 'hover:border-lavender dark:hover:border-lavender-dark',
|
|
13
|
+
};
|
|
14
|
+
const paddingMap = {
|
|
15
|
+
md: { box: 'p-5', footer: '-mx-5 px-5 pt-4' },
|
|
16
|
+
sm: { box: 'p-4', footer: '-mx-4 px-4 pt-3' },
|
|
17
|
+
};
|
|
18
|
+
const triggerClassName = clsx('cursor-pointer text-left focus-visible:outline-none', 'after:absolute after:-inset-px after:rounded-lg', 'focus-visible:after:outline-lavender dark:focus-visible:after:outline-lavender-dark focus-visible:after:outline-2 focus-visible:after:outline-offset-2');
|
|
19
|
+
/**
|
|
20
|
+
* Bordered container that groups content inside a page: a summary, a form
|
|
21
|
+
* section, an item of a list on mobile.
|
|
22
|
+
*
|
|
23
|
+
* With `href` or `onClick` the whole card navigates or acts. The title becomes
|
|
24
|
+
* the link or button and stretches over the card, so its text is the
|
|
25
|
+
* accessible name and a control inside `headerEnd` or `footer` keeps its own
|
|
26
|
+
* click.
|
|
27
|
+
*
|
|
28
|
+
* @component
|
|
29
|
+
* @example
|
|
30
|
+
* <Card title="Shipping address" headerEnd={<Badge>Default</Badge>}>
|
|
31
|
+
* <Paragraph>Av. Siempre Viva 742</Paragraph>
|
|
32
|
+
* </Card>
|
|
33
|
+
*
|
|
34
|
+
* @example
|
|
35
|
+
* // The whole card opens a detail, with its own action in the footer
|
|
36
|
+
* <Card
|
|
37
|
+
* as="li"
|
|
38
|
+
* title="Order 1043"
|
|
39
|
+
* onClick={() => openOrder('1043')}
|
|
40
|
+
* footer={<Button size="sm" modifier="second">Cancel</Button>}
|
|
41
|
+
* >
|
|
42
|
+
* 3 items · Delivered
|
|
43
|
+
* </Card>
|
|
44
|
+
*
|
|
45
|
+
* @param {Object} props - The properties of the Card component.
|
|
46
|
+
* @param {'div' | 'section' | 'article' | 'li' | 'aside'} [props.as='div'] - The HTML element to render.
|
|
47
|
+
* @param {'outline' | 'accent' | 'tinted'} [props.modifier='outline'] - `outline` has a gray border, `accent` a lavender border, `tinted` a light lavender background with a lavender border.
|
|
48
|
+
* @param {'md' | 'sm'} [props.padding='md'] - `md` is 20px; `sm` is 16px, for dense lists and mobile.
|
|
49
|
+
* @param {ReactNode} [props.title] - Card title. Required with `href` or `onClick`: it is the accessible name.
|
|
50
|
+
* @param {'h6' | 'h7'} [props.titleLevel='h7'] - Heading level of the title.
|
|
51
|
+
* @param {ReactNode} [props.headerEnd] - Content at the right of the title.
|
|
52
|
+
* @param {ReactNode} [props.footer] - Zone at the bottom separated by a border. The consumer decides if an action takes the full width.
|
|
53
|
+
* @param {string} [props.href] - The whole card navigates to this URL.
|
|
54
|
+
* @param {() => void} [props.onClick] - The whole card is a button; Enter and Space activate it.
|
|
55
|
+
* @param {ReactNode} [props.children] - Card content.
|
|
56
|
+
*
|
|
57
|
+
* @returns {ReactNode} The rendered Card component.
|
|
58
|
+
*/
|
|
59
|
+
export function Card({ as: Element = 'div', modifier = 'outline', padding = 'md', title, titleLevel = 'h7', headerEnd, footer, href, onClick, children, ...restProps }) {
|
|
60
|
+
const isInteractive = !!href || !!onClick;
|
|
61
|
+
const sizing = paddingMap[padding];
|
|
62
|
+
return (<Element {...restProps} data-orion-part="card" className={clsx('flex flex-col gap-3 rounded-lg border text-black transition-colors dark:text-white', isInteractive && 'relative', styleMap[modifier], isInteractive && interactiveMap[modifier], sizing.box, restProps.className)}>
|
|
63
|
+
{(!!title || !!headerEnd) && (<div className="flex items-start justify-between gap-3">
|
|
64
|
+
{!!title && (<Heading level={titleLevel} className="min-w-0">
|
|
65
|
+
{!!href && (<Link href={href} className={triggerClassName}>
|
|
66
|
+
{title}
|
|
67
|
+
</Link>)}
|
|
68
|
+
{!!onClick && (<button type="button" onClick={onClick} className={triggerClassName}>
|
|
69
|
+
{title}
|
|
70
|
+
</button>)}
|
|
71
|
+
{!isInteractive && title}
|
|
72
|
+
</Heading>)}
|
|
73
|
+
{!!headerEnd && (<div className="relative z-10 flex shrink-0 items-center gap-2">
|
|
74
|
+
{headerEnd}
|
|
75
|
+
</div>)}
|
|
76
|
+
</div>)}
|
|
77
|
+
{children}
|
|
78
|
+
{!!footer && (<div className={clsx('border-gray-5 dark:border-gray-1 relative z-10 mt-1 border-t', sizing.footer)}>
|
|
79
|
+
{footer}
|
|
80
|
+
</div>)}
|
|
81
|
+
</Element>);
|
|
82
|
+
}
|
|
83
|
+
//# sourceMappingURL=Card.jsx.map
|