@clicoh/orion-library 1.2.0-beta.22 → 1.2.0-beta.23
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/avatares/caja-ruedas.svg +1 -0
- package/assets/avatares/cohete-azul.svg +1 -0
- package/assets/avatares/criatura-tres-ojos.svg +1 -0
- package/assets/avatares/cubo-brazos.svg +1 -0
- package/assets/avatares/cubo-morado.svg +1 -0
- package/assets/avatares/dino-placas-amarillas.svg +1 -0
- package/assets/avatares/dino-placas-azules.svg +1 -0
- package/assets/avatares/edificio-cupulas.svg +1 -0
- package/assets/avatares/globo-anillo.svg +1 -0
- package/assets/avatares/pulpo-morado.svg +1 -0
- package/assets/avatares/robot-lente.svg +1 -0
- package/assets/avatares/ventana-codigo.svg +1 -0
- package/assets/css/expresivo.css +37 -0
- package/dist/components/01-atoms/CodeBlock/CodeBlock.d.ts +11 -3
- package/dist/components/01-atoms/CodeBlock/CodeBlock.d.ts.map +1 -1
- package/dist/components/01-atoms/CodeBlock/CodeBlock.jsx +13 -5
- package/dist/components/01-atoms/CodeBlock/CodeBlock.jsx.map +1 -1
- package/dist/components/01-atoms/OtpInput/OtpInput.d.ts +1 -1
- package/dist/components/01-atoms/OtpInput/OtpInput.jsx +3 -2
- package/dist/components/01-atoms/OtpInput/OtpInput.jsx.map +1 -1
- package/dist/components/02-molecules/ActionMenu/ActionMenu.d.ts +39 -0
- package/dist/components/02-molecules/ActionMenu/ActionMenu.d.ts.map +1 -0
- package/dist/components/02-molecules/ActionMenu/ActionMenu.jsx +36 -0
- package/dist/components/02-molecules/ActionMenu/ActionMenu.jsx.map +1 -0
- package/dist/components/02-molecules/ActionMenu/index.d.ts +2 -0
- package/dist/components/02-molecules/ActionMenu/index.d.ts.map +1 -0
- package/dist/components/02-molecules/ActionMenu/index.js +2 -0
- package/dist/components/02-molecules/ActionMenu/index.js.map +1 -0
- package/dist/components/02-molecules/Tab/TabList.d.ts.map +1 -1
- package/dist/components/02-molecules/Tab/TabList.jsx +10 -6
- package/dist/components/02-molecules/Tab/TabList.jsx.map +1 -1
- package/dist/components/02-molecules/index.d.ts +1 -0
- package/dist/components/02-molecules/index.d.ts.map +1 -1
- package/dist/components/02-molecules/index.js +1 -0
- package/dist/components/02-molecules/index.js.map +1 -1
- package/dist/components/03-organisms/BarChart/BarChart.d.ts +52 -0
- package/dist/components/03-organisms/BarChart/BarChart.d.ts.map +1 -0
- package/dist/components/03-organisms/BarChart/BarChart.jsx +116 -0
- package/dist/components/03-organisms/BarChart/BarChart.jsx.map +1 -0
- package/dist/components/03-organisms/BarChart/index.d.ts +2 -0
- package/dist/components/03-organisms/BarChart/index.d.ts.map +1 -0
- package/dist/components/03-organisms/BarChart/index.js +2 -0
- package/dist/components/03-organisms/BarChart/index.js.map +1 -0
- package/dist/components/03-organisms/DataTable/DataTable.d.ts +5 -2
- package/dist/components/03-organisms/DataTable/DataTable.d.ts.map +1 -1
- package/dist/components/03-organisms/DataTable/DataTable.jsx +10 -7
- package/dist/components/03-organisms/DataTable/DataTable.jsx.map +1 -1
- package/dist/components/03-organisms/index.d.ts +1 -0
- package/dist/components/03-organisms/index.d.ts.map +1 -1
- package/dist/components/03-organisms/index.js +1 -0
- package/dist/components/03-organisms/index.js.map +1 -1
- package/dist/components/04-templates/LoginTemplate/LoginForm.d.ts +6 -1
- package/dist/components/04-templates/LoginTemplate/LoginForm.d.ts.map +1 -1
- package/dist/components/04-templates/LoginTemplate/LoginForm.jsx +29 -7
- package/dist/components/04-templates/LoginTemplate/LoginForm.jsx.map +1 -1
- package/dist/components/04-templates/LoginTemplate/SetupMfa/StepThree.d.ts.map +1 -1
- package/dist/components/04-templates/LoginTemplate/SetupMfa/StepThree.jsx +8 -4
- package/dist/components/04-templates/LoginTemplate/SetupMfa/StepThree.jsx.map +1 -1
- package/dist/components/04-templates/LoginTemplate/SetupMfa/StepTwo.d.ts.map +1 -1
- package/dist/components/04-templates/LoginTemplate/SetupMfa/StepTwo.jsx +10 -3
- package/dist/components/04-templates/LoginTemplate/SetupMfa/StepTwo.jsx.map +1 -1
- package/dist/components/04-templates/LoginTemplate/index.d.ts +1 -1
- package/dist/components/04-templates/LoginTemplate/index.d.ts.map +1 -1
- package/dist/components/04-templates/LoginTemplate/submitOnEnter.d.ts +9 -0
- package/dist/components/04-templates/LoginTemplate/submitOnEnter.d.ts.map +1 -0
- package/dist/components/04-templates/LoginTemplate/submitOnEnter.js +15 -0
- package/dist/components/04-templates/LoginTemplate/submitOnEnter.js.map +1 -0
- package/expresivo/ExpAccentNote/ExpAccentNote.d.ts +25 -0
- package/expresivo/ExpAccentNote/ExpAccentNote.d.ts.map +1 -0
- package/expresivo/ExpAccentNote/ExpAccentNote.jsx +47 -0
- package/expresivo/ExpAccentNote/ExpAccentNote.jsx.map +1 -0
- package/expresivo/ExpAccentNote/index.d.ts +2 -0
- package/expresivo/ExpAccentNote/index.d.ts.map +1 -0
- package/expresivo/ExpAccentNote/index.js +2 -0
- package/expresivo/ExpAccentNote/index.js.map +1 -0
- package/expresivo/ExpCodeHostIcon/ExpCodeHostIcon.d.ts +29 -0
- package/expresivo/ExpCodeHostIcon/ExpCodeHostIcon.d.ts.map +1 -0
- package/expresivo/ExpCodeHostIcon/ExpCodeHostIcon.jsx +44 -0
- package/expresivo/ExpCodeHostIcon/ExpCodeHostIcon.jsx.map +1 -0
- package/expresivo/ExpCodeHostIcon/index.d.ts +2 -0
- package/expresivo/ExpCodeHostIcon/index.d.ts.map +1 -0
- package/expresivo/ExpCodeHostIcon/index.js +2 -0
- package/expresivo/ExpCodeHostIcon/index.js.map +1 -0
- package/expresivo/ExpFigureBand/ExpFigureBand.d.ts +61 -0
- package/expresivo/ExpFigureBand/ExpFigureBand.d.ts.map +1 -0
- package/expresivo/ExpFigureBand/ExpFigureBand.jsx +102 -0
- package/expresivo/ExpFigureBand/ExpFigureBand.jsx.map +1 -0
- package/expresivo/ExpFigureBand/index.d.ts +2 -0
- package/expresivo/ExpFigureBand/index.d.ts.map +1 -0
- package/expresivo/ExpFigureBand/index.js +2 -0
- package/expresivo/ExpFigureBand/index.js.map +1 -0
- package/expresivo/ExpGrowBar/ExpGrowBar.d.ts +13 -2
- package/expresivo/ExpGrowBar/ExpGrowBar.d.ts.map +1 -1
- package/expresivo/ExpGrowBar/ExpGrowBar.jsx +16 -4
- package/expresivo/ExpGrowBar/ExpGrowBar.jsx.map +1 -1
- package/expresivo/ExpRepoAvatar/ExpRepoAvatar.d.ts +3 -0
- package/expresivo/ExpRepoAvatar/ExpRepoAvatar.d.ts.map +1 -1
- package/expresivo/ExpRepoAvatar/ExpRepoAvatar.jsx +3 -0
- package/expresivo/ExpRepoAvatar/ExpRepoAvatar.jsx.map +1 -1
- package/expresivo/ExpRepoAvatar/catalog.d.ts +6 -2
- package/expresivo/ExpRepoAvatar/catalog.d.ts.map +1 -1
- package/expresivo/ExpRepoAvatar/catalog.js +29 -1
- package/expresivo/ExpRepoAvatar/catalog.js.map +1 -1
- package/expresivo/ExpSplitCard/ExpSplitCard.d.ts +38 -0
- package/expresivo/ExpSplitCard/ExpSplitCard.d.ts.map +1 -0
- package/expresivo/ExpSplitCard/ExpSplitCard.jsx +48 -0
- package/expresivo/ExpSplitCard/ExpSplitCard.jsx.map +1 -0
- package/expresivo/ExpSplitCard/index.d.ts +2 -0
- package/expresivo/ExpSplitCard/index.d.ts.map +1 -0
- package/expresivo/ExpSplitCard/index.js +2 -0
- package/expresivo/ExpSplitCard/index.js.map +1 -0
- package/expresivo/ExpStatusTag/ExpStatusTag.d.ts +26 -0
- package/expresivo/ExpStatusTag/ExpStatusTag.d.ts.map +1 -0
- package/expresivo/ExpStatusTag/ExpStatusTag.jsx +44 -0
- package/expresivo/ExpStatusTag/ExpStatusTag.jsx.map +1 -0
- package/expresivo/ExpStatusTag/index.d.ts +2 -0
- package/expresivo/ExpStatusTag/index.d.ts.map +1 -0
- package/expresivo/ExpStatusTag/index.js +2 -0
- package/expresivo/ExpStatusTag/index.js.map +1 -0
- package/expresivo/index.d.ts +5 -0
- package/expresivo/index.d.ts.map +1 -1
- package/expresivo/index.js +5 -0
- package/expresivo/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none"><ellipse cx="8.6" cy="26.5" rx="3.2" ry="2.6" transform="rotate(-15 8.6 26.5)" fill="#FDB653" stroke="#222329" stroke-width="2.4" stroke-linejoin="round"/><ellipse cx="39.4" cy="26.5" rx="3.2" ry="2.6" transform="rotate(15 39.4 26.5)" fill="#FDB653" stroke="#222329" stroke-width="2.4" stroke-linejoin="round"/><rect x="9.5" y="11" width="29" height="25" rx="4" fill="#FDB653"/><rect x="10.7" y="30" width="26.6" height="4.8" rx="2.8" fill="#F09B3B"/><rect x="9.5" y="11" width="29" height="25" rx="4" fill="none" stroke="#222329" stroke-width="2.4" stroke-linejoin="round"/><rect x="20.5" y="11" width="7" height="6.5" rx="0.8" fill="#E9822A" stroke="#222329" stroke-width="1.6" stroke-linejoin="round"/><circle cx="16" cy="38" r="4.6" fill="#3A3F6B" stroke="#222329" stroke-width="2.4" stroke-linejoin="round"/><circle cx="16" cy="38" r="1.6" fill="#AEB8EC"/><circle cx="32" cy="38" r="4.6" fill="#3A3F6B" stroke="#222329" stroke-width="2.4" stroke-linejoin="round"/><circle cx="32" cy="38" r="1.6" fill="#AEB8EC"/><ellipse cx="18.5" cy="23.5" rx="2" ry="2.5" fill="#222329"/><circle cx="19.1" cy="22.62" r="0.7" fill="#FFFFFF"/><ellipse cx="29.5" cy="23.5" rx="2" ry="2.5" fill="#222329"/><circle cx="30.1" cy="22.62" r="0.7" fill="#FFFFFF"/><ellipse cx="14.8" cy="27.6" rx="1.8" ry="1.1" fill="#FF8A70"/><ellipse cx="33.2" cy="27.6" rx="1.8" ry="1.1" fill="#FF8A70"/><path d="M21.6 27.2Q24 29.6 26.4 27.2" stroke="#222329" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none"><path d="M19.5 39.5C19.5 44 22 46.5 24 46.5S28.5 44 28.5 39.5Z" fill="#F7922E" stroke="#222329" stroke-width="1.8" stroke-linejoin="round"/><path d="M22 40C22 42.8 23 44.2 24 44.2S26 42.8 26 40Z" fill="#FCCB3C"/><path d="M17.5 28L11 35.5C10 36.8 10.5 39 12.5 39H18Z" fill="#2F63C9" stroke="#222329" stroke-width="2.4" stroke-linejoin="round"/><path d="M30.5 28L37 35.5C38 36.8 37.5 39 35.5 39H30Z" fill="#2F63C9" stroke="#222329" stroke-width="2.4" stroke-linejoin="round"/><path d="M24 4.5C30.5 9 33 17 32.2 27L31.3 40H16.7L15.8 27C15 17 17.5 9 24 4.5Z" fill="#8EC3FA"/><path d="M28.4 10.5C30.6 14.5 31.4 20 30.9 27L30.1 38.8H27.6C28.8 30 29.4 19 28.4 10.5Z" fill="#6AA4EE"/><path d="M16.4 33.6H31.6" stroke="#222329" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><path d="M24 4.5C30.5 9 33 17 32.2 27L31.3 40H16.7L15.8 27C15 17 17.5 9 24 4.5Z" fill="none" stroke="#222329" stroke-width="2.4" stroke-linejoin="round"/><path d="M24 4.5C26.6 6.3 28.5 8.6 29.8 11.3H18.2C19.5 8.6 21.4 6.3 24 4.5Z" fill="#F7922E" stroke="#222329" stroke-width="2.4" stroke-linejoin="round"/><circle cx="24" cy="20.5" r="4.6" fill="#EAF4FF" stroke="#222329" stroke-width="2" stroke-linejoin="round"/><circle cx="24" cy="20.5" r="2.7" fill="#2F63C9"/><circle cx="22.8" cy="19.3" r="1" fill="#FFFFFF"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none"><ellipse cx="15" cy="39.5" rx="3.4" ry="2.6" fill="#5C9C6A" stroke="#222329" stroke-width="1.8" stroke-linejoin="round"/><ellipse cx="33" cy="39.5" rx="3.4" ry="2.6" fill="#5C9C6A" stroke="#222329" stroke-width="1.8" stroke-linejoin="round"/><ellipse cx="24" cy="40.5" rx="3.4" ry="2.6" fill="#5C9C6A" stroke="#222329" stroke-width="1.8" stroke-linejoin="round"/><path d="M8 33C6.5 27.5 10.5 22.5 16 22.5C16.5 15 19.5 9.5 24 9.5S31.5 15 32 22.5C37.5 22.5 41.5 27.5 40 33C39 38 32.5 40 24 40S9 38 8 33Z" fill="#7FBF83" stroke="#222329" stroke-width="2.4" stroke-linejoin="round"/><ellipse cx="20.3" cy="13.2" rx="1.7" ry="1" transform="rotate(-35 20.3 13.2)" fill="#AEDDA8"/><circle cx="17" cy="33.5" r="1.1" fill="#5C9C6A"/><circle cx="31" cy="34" r="1.3" fill="#5C9C6A"/><circle cx="10.8" cy="25.5" r="3.8" fill="#FFFFFF" stroke="#222329" stroke-width="1.8" stroke-linejoin="round"/><circle cx="11.4" cy="26" r="1.9" fill="#222329"/><circle cx="10.64" cy="25.16" r="0.65" fill="#FFFFFF"/><circle cx="37.2" cy="25.5" r="3.8" fill="#FFFFFF" stroke="#222329" stroke-width="1.8" stroke-linejoin="round"/><circle cx="36.6" cy="26" r="1.9" fill="#222329"/><circle cx="35.84" cy="25.16" r="0.65" fill="#FFFFFF"/><circle cx="24" cy="17.5" r="4.4" fill="#FFFFFF" stroke="#222329" stroke-width="1.8" stroke-linejoin="round"/><circle cx="24" cy="18.3" r="2.2" fill="#222329"/><circle cx="23.12" cy="17.33" r="0.75" fill="#FFFFFF"/><path d="M20.5 30.5Q24 33.5 27.5 30.5" stroke="#222329" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none"><ellipse cx="8.6" cy="29.5" rx="4.2" ry="3.2" transform="rotate(15 8.6 29.5)" fill="#3B3F58" stroke="#222329" stroke-width="2.4" stroke-linejoin="round"/><ellipse cx="39.4" cy="29.5" rx="4.2" ry="3.2" transform="rotate(-15 39.4 29.5)" fill="#3B3F58" stroke="#222329" stroke-width="2.4" stroke-linejoin="round"/><ellipse cx="18.5" cy="41" rx="4.2" ry="2.8" fill="#3B3F58" stroke="#222329" stroke-width="2.4" stroke-linejoin="round"/><ellipse cx="29.5" cy="41" rx="4.2" ry="2.8" fill="#3B3F58" stroke="#222329" stroke-width="2.4" stroke-linejoin="round"/><rect x="11" y="8.5" width="26" height="31" rx="6" fill="#FDB82A"/><rect x="12.2" y="9.7" width="23.6" height="6" rx="4.8" fill="#FED465"/><rect x="11" y="8.5" width="26" height="31" rx="6" fill="none" stroke="#222329" stroke-width="2.4" stroke-linejoin="round"/><circle cx="19.5" cy="22.5" r="3.2" fill="#FFFFFF" stroke="#222329" stroke-width="1.4" stroke-linejoin="round"/><circle cx="20.2" cy="23.1" r="1.6" fill="#222329"/><circle cx="19.56" cy="22.4" r="0.54" fill="#FFFFFF"/><circle cx="28.5" cy="22.5" r="3.2" fill="#FFFFFF" stroke="#222329" stroke-width="1.4" stroke-linejoin="round"/><circle cx="27.8" cy="23.1" r="1.6" fill="#222329"/><circle cx="27.16" cy="22.4" r="0.54" fill="#FFFFFF"/><path d="M20.5 29C21.5 32.5 26.5 32.5 27.5 29Z" fill="#8A3324" stroke="#222329" stroke-width="1.4" stroke-linejoin="round"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none"><polygon points="24 5.5 41 14.5 24 23.5 7 14.5" fill="#EADCFF" stroke="#222329" stroke-width="2.4" stroke-linejoin="round"/><polygon points="7 14.5 24 23.5 24 43.5 7 34.5" fill="#B57BEA" stroke="#222329" stroke-width="2.4" stroke-linejoin="round"/><polygon points="24 23.5 41 14.5 41 34.5 24 43.5" fill="#8F5AD6" stroke="#222329" stroke-width="2.4" stroke-linejoin="round"/><ellipse cx="24" cy="14.5" rx="4.4" ry="2.4" fill="#8E55F0" stroke="#222329" stroke-width="1.4" stroke-linejoin="round"/><path d="M32.5 25L33.6 27.9L36.5 29L33.6 30.1L32.5 33L31.4 30.1L28.5 29L31.4 27.9Z" fill="#FFFFFF"/><circle cx="15.5" cy="29" r="2" fill="#D9B8FA"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none"><circle cx="11.5" cy="27.5" r="2.6" fill="#F2C94C" stroke="#222329" stroke-width="1.6" stroke-linejoin="round"/><circle cx="16" cy="20" r="2.8" fill="#F2C94C" stroke="#222329" stroke-width="1.6" stroke-linejoin="round"/><circle cx="22.5" cy="13.2" r="3" fill="#F2C94C" stroke="#222329" stroke-width="1.6" stroke-linejoin="round"/><circle cx="29.2" cy="15" r="2.8" fill="#F2C94C" stroke="#222329" stroke-width="1.6" stroke-linejoin="round"/><circle cx="33.8" cy="20.4" r="2.5" fill="#F2C94C" stroke="#222329" stroke-width="1.6" stroke-linejoin="round"/><ellipse cx="12" cy="39.8" rx="3.4" ry="2.4" fill="#5FA56A" stroke="#222329" stroke-width="2.4" stroke-linejoin="round"/><ellipse cx="28" cy="39.8" rx="3.4" ry="2.4" fill="#5FA56A" stroke="#222329" stroke-width="2.4" stroke-linejoin="round"/><path d="M4 39.5C8 34 12 24 19 16.5C21.5 13.8 25.5 13.5 28 16C31.5 19.5 34 24 35.5 26.8C38 25.3 42.5 25.8 44 29.5C45.5 33.5 42.5 37.5 38.5 37.5C37 37.5 36 38 35.5 39.5Z" fill="#86CC86"/><path d="M8.5 38.3C15 35.6 28 35.6 34.5 38.3Z" fill="#B8E2A2"/><circle cx="20" cy="30" r="1.8" fill="#F2C94C"/><circle cx="25.5" cy="23" r="1.3" fill="#F2C94C"/><circle cx="14.5" cy="34" r="1.2" fill="#F2C94C"/><circle cx="28.5" cy="31" r="1.1" fill="#F2C94C"/><path d="M4 39.5C8 34 12 24 19 16.5C21.5 13.8 25.5 13.5 28 16C31.5 19.5 34 24 35.5 26.8C38 25.3 42.5 25.8 44 29.5C45.5 33.5 42.5 37.5 38.5 37.5C37 37.5 36 38 35.5 39.5Z" fill="none" stroke="#222329" stroke-width="2.4" stroke-linejoin="round"/><ellipse cx="39.5" cy="30.5" rx="1.6" ry="1.6" fill="#222329"/><circle cx="39.98" cy="29.94" r="0.56" fill="#FFFFFF"/><path d="M40.4 34.4Q42.2 34.9 43.3 33.5" stroke="#222329" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none"><circle cx="20.5" cy="19" r="2.8" fill="#4E8FE6" stroke="#222329" stroke-width="1.6" stroke-linejoin="round"/><circle cx="25.5" cy="15.2" r="2.8" fill="#4E8FE6" stroke="#222329" stroke-width="1.6" stroke-linejoin="round"/><circle cx="31.5" cy="14.6" r="2.8" fill="#4E8FE6" stroke="#222329" stroke-width="1.6" stroke-linejoin="round"/><circle cx="37" cy="18" r="2.6" fill="#4E8FE6" stroke="#222329" stroke-width="1.6" stroke-linejoin="round"/><ellipse cx="14.5" cy="38.5" rx="3.6" ry="2.6" fill="#62A964" stroke="#222329" stroke-width="2.4" stroke-linejoin="round"/><ellipse cx="30.5" cy="38.5" rx="3.6" ry="2.6" fill="#62A964" stroke="#222329" stroke-width="2.4" stroke-linejoin="round"/><path d="M6.5 32C6 26.5 9.5 22.5 14 22.5C16 22.5 17.5 23.5 18.5 24.5C20.5 18.5 25 15 30 15C37 15 41 21.5 41 29C41 33 43 36.5 45 39C40.5 40 36.5 39.5 34 38.5H10.5C8 38.5 6.8 35.5 6.5 32Z" fill="#8CCB7A"/><path d="M11 37.3C17 34 29 34 36 37.3Z" fill="#C3E08F"/><circle cx="29" cy="22" r="1.5" fill="#62A964"/><circle cx="34.5" cy="25.5" r="1.1" fill="#62A964"/><circle cx="25" cy="25" r="1.1" fill="#62A964"/><path d="M6.5 32C6 26.5 9.5 22.5 14 22.5C16 22.5 17.5 23.5 18.5 24.5C20.5 18.5 25 15 30 15C37 15 41 21.5 41 29C41 33 43 36.5 45 39C40.5 40 36.5 39.5 34 38.5H10.5C8 38.5 6.8 35.5 6.5 32Z" fill="none" stroke="#222329" stroke-width="2.4" stroke-linejoin="round"/><ellipse cx="12" cy="28.5" rx="1.7" ry="1.7" fill="#222329"/><circle cx="12.51" cy="27.91" r="0.59" fill="#FFFFFF"/><path d="M8.6 33Q10.6 34.3 12.6 33.4" stroke="#222329" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none"><path d="M24 8.6V5.2" stroke="#222329" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/><circle cx="24" cy="4.6" r="1.5" fill="#FBC33D" stroke="#222329" stroke-width="1.4" stroke-linejoin="round"/><rect x="9" y="18" width="9" height="24" rx="1" fill="#6FCF9E"/><rect x="15" y="19" width="2" height="22" rx="0.6" fill="#52B585"/><rect x="9" y="18" width="9" height="24" rx="1" fill="none" stroke="#222329" stroke-width="2.4" stroke-linejoin="round"/><rect x="30" y="18" width="9" height="24" rx="1" fill="#6FCF9E"/><rect x="36" y="19" width="2" height="22" rx="0.6" fill="#52B585"/><rect x="30" y="18" width="9" height="24" rx="1" fill="none" stroke="#222329" stroke-width="2.4" stroke-linejoin="round"/><rect x="18.5" y="14" width="11" height="28" rx="1" fill="#6FCF9E"/><rect x="26.5" y="15" width="2" height="26" rx="0.6" fill="#52B585"/><rect x="18.5" y="14" width="11" height="28" rx="1" fill="none" stroke="#222329" stroke-width="2.4" stroke-linejoin="round"/><path d="M9 18A4.5 4.5 0 0 1 18 18Z" fill="#5AA0E8" stroke="#222329" stroke-width="2.4" stroke-linejoin="round"/><path d="M30 18A4.5 4.5 0 0 1 39 18Z" fill="#5AA0E8" stroke="#222329" stroke-width="2.4" stroke-linejoin="round"/><path d="M18.5 14A5.5 5.5 0 0 1 29.5 14Z" fill="#5AA0E8" stroke="#222329" stroke-width="2.4" stroke-linejoin="round"/><ellipse cx="22" cy="11" rx="1.6" ry="0.9" transform="rotate(-20 22 11)" fill="#B5D6FF"/><path d="M11.8 29V24.7A1.7 1.7 0 0 1 15.2 24.7V29Z" fill="#2E5E6E"/><rect x="11.8" y="33" width="3.4" height="3.4" rx="0.6" fill="#2E5E6E"/><path d="M32.8 29V24.7A1.7 1.7 0 0 1 36.2 24.7V29Z" fill="#2E5E6E"/><rect x="32.8" y="33" width="3.4" height="3.4" rx="0.6" fill="#2E5E6E"/><circle cx="24" cy="21" r="2.2" fill="#5AA0E8" stroke="#222329" stroke-width="1.4" stroke-linejoin="round"/><path d="M21 42V32.5A3 3 0 0 1 27 32.5V42Z" fill="#2E5E6E" stroke="#222329" stroke-width="1.6" stroke-linejoin="round"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none"><circle cx="23" cy="25" r="16.8" fill="#EE6A3C" stroke="#222329" stroke-width="2.4" stroke-linejoin="round"/><path d="M10.5 18A14 14 0 0 1 17 12" stroke="#FF9E70" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="23" cy="25" r="11.2" fill="#3F86E8" stroke="#222329" stroke-width="2.2" stroke-linejoin="round"/><path d="M16.5 19.5C18.5 17 22 16.5 23.5 18C25 19.5 23.5 21.5 21.5 22C19.5 22.5 20 25 18 25.5C16 26 15.2 22.5 16.5 19.5Z" fill="#FCCB3C"/><path d="M25 27C27 25.5 30 26 30.5 28.5C31 31 29 33.5 26.5 33.5C24.5 33.5 23.5 31.5 24.5 30C25 29 24 28 25 27Z" fill="#FCCB3C"/><ellipse cx="29" cy="19.5" rx="1.8" ry="1.2" fill="#FCCB3C"/><circle cx="38.5" cy="9.5" r="3" fill="#EE6A3C" stroke="#222329" stroke-width="1.8" stroke-linejoin="round"/><circle cx="37.45" cy="8.45" r="0.9" fill="#FF9E70"/><circle cx="39.6" cy="39.6" r="2.4" fill="#EE6A3C" stroke="#222329" stroke-width="1.8" stroke-linejoin="round"/><circle cx="38.76" cy="38.76" r="0.72" fill="#FF9E70"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none"><ellipse cx="24" cy="33" rx="11" ry="5" fill="#8E55F0" stroke="#222329" stroke-width="2.4" stroke-linejoin="round"/><path d="M16 29C14 34 9 35 8 39C7.5 42 11.5 42.5 11.8 39.5" stroke="#222329" stroke-width="7" stroke-linecap="round"/><path d="M22.2 30C21.4 35 16 38.5 17.5 41.5C19 43.5 22.5 42 21 39.5" stroke="#222329" stroke-width="7" stroke-linecap="round"/><path d="M25.8 30C26.6 35 32 38.5 30.5 41.5C29 43.5 25.5 42 27 39.5" stroke="#222329" stroke-width="7" stroke-linecap="round"/><path d="M32 29C34 34 39 35 40 39C40.5 42 36.5 42.5 36.2 39.5" stroke="#222329" stroke-width="7" stroke-linecap="round"/><path d="M16 29C14 34 9 35 8 39C7.5 42 11.5 42.5 11.8 39.5" stroke="#8E55F0" stroke-width="4.2" stroke-linecap="round"/><path d="M22.2 30C21.4 35 16 38.5 17.5 41.5C19 43.5 22.5 42 21 39.5" stroke="#8E55F0" stroke-width="4.2" stroke-linecap="round"/><path d="M25.8 30C26.6 35 32 38.5 30.5 41.5C29 43.5 25.5 42 27 39.5" stroke="#8E55F0" stroke-width="4.2" stroke-linecap="round"/><path d="M32 29C34 34 39 35 40 39C40.5 42 36.5 42.5 36.2 39.5" stroke="#8E55F0" stroke-width="4.2" stroke-linecap="round"/><path d="M10 25C10 13.5 16.5 6 24 6S38 13.5 38 25C38 31 32 33.5 24 33.5S10 31 10 25Z" fill="#8E55F0" stroke="#222329" stroke-width="2.4" stroke-linejoin="round"/><ellipse cx="16.5" cy="13.5" rx="3" ry="1.8" transform="rotate(-35 16.5 13.5)" fill="#BD98FF"/><ellipse cx="18" cy="21.5" rx="3.8" ry="3.4" fill="#FFFFFF" stroke="#222329" stroke-width="1.6" stroke-linejoin="round"/><circle cx="19" cy="22.4" r="1.9" fill="#222329"/><polygon points="13 15 23.5 15 23.5 20.4 13 17.6" fill="#8E55F0"/><path d="M13.7 17.8L22.8 20.4" stroke="#222329" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><ellipse cx="30" cy="21.5" rx="3.8" ry="3.4" fill="#FFFFFF" stroke="#222329" stroke-width="1.6" stroke-linejoin="round"/><circle cx="29" cy="22.4" r="1.9" fill="#222329"/><polygon points="35 15 24.5 15 24.5 20.4 35 17.6" fill="#8E55F0"/><path d="M34.3 17.8L25.2 20.4" stroke="#222329" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M21.8 27.6Q24 28.8 26.2 27.6" stroke="#222329" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none"><ellipse cx="12.5" cy="33" rx="4.2" ry="7" transform="rotate(18 12.5 33)" fill="#3E7FE0" stroke="#222329" stroke-width="2.4" stroke-linejoin="round"/><ellipse cx="35.5" cy="33" rx="4.2" ry="7" transform="rotate(-18 35.5 33)" fill="#3E7FE0" stroke="#222329" stroke-width="2.4" stroke-linejoin="round"/><ellipse cx="19" cy="41.5" rx="3.6" ry="2.8" fill="#FBC33D" stroke="#222329" stroke-width="2.4" stroke-linejoin="round"/><ellipse cx="29" cy="41.5" rx="3.6" ry="2.8" fill="#FBC33D" stroke="#222329" stroke-width="2.4" stroke-linejoin="round"/><rect x="13" y="14" width="22" height="27" rx="6" fill="#A9D8FB"/><rect x="29.6" y="20" width="4.2" height="19.8" rx="2.6" fill="#82BCEF"/><rect x="13" y="14" width="22" height="27" rx="6" fill="none" stroke="#222329" stroke-width="2.4" stroke-linejoin="round"/><path d="M13 21V17C13 11.5 16.5 8.5 21 8.2L31.5 7C34 6.8 35.6 8.6 35.3 11L35 21Z" fill="#FBC33D" stroke="#222329" stroke-width="2.4" stroke-linejoin="round"/><ellipse cx="19.5" cy="12.4" rx="2.6" ry="1.3" transform="rotate(-8 19.5 12.4)" fill="#FFE59A"/><circle cx="24" cy="29.5" r="6.4" fill="#EAF4FF" stroke="#222329" stroke-width="2.2" stroke-linejoin="round"/><circle cx="24" cy="29.5" r="3.6" fill="#2B3F66"/><circle cx="22.6" cy="28.1" r="1.2" fill="#FFFFFF"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none"><rect x="8" y="10" width="32" height="28" rx="5" fill="#F2F2F2" stroke="#616265" stroke-width="2.4" stroke-linejoin="round"/><path d="M8 16.5H40" stroke="#616265" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><circle cx="12" cy="13.3" r="1" fill="#A5A5A7"/><circle cx="15.2" cy="13.3" r="1" fill="#A5A5A7"/><circle cx="18.4" cy="13.3" r="1" fill="#A5A5A7"/><path d="M19.5 22.5L15 27.2L19.5 32" stroke="#616265" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/><path d="M28.5 22.5L33 27.2L28.5 32" stroke="#616265" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/><path d="M25.6 21.5L22.4 33" stroke="#616265" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
package/assets/css/expresivo.css
CHANGED
|
@@ -698,6 +698,13 @@
|
|
|
698
698
|
color: var(--exp-field-ink);
|
|
699
699
|
}
|
|
700
700
|
|
|
701
|
+
:root:has(.exp-scope)
|
|
702
|
+
:is(input, textarea)[data-orion-part='field-control']:read-only:not(
|
|
703
|
+
:disabled
|
|
704
|
+
) {
|
|
705
|
+
color: var(--exp-field-label);
|
|
706
|
+
}
|
|
707
|
+
|
|
701
708
|
:root:has(.exp-scope) [data-orion-part='field-control']::placeholder {
|
|
702
709
|
color: var(--color-gray-2);
|
|
703
710
|
}
|
|
@@ -870,6 +877,27 @@
|
|
|
870
877
|
var(--exp-card-bg);
|
|
871
878
|
}
|
|
872
879
|
|
|
880
|
+
/* ExpSplitCard reads as an `accent` card split into columns. */
|
|
881
|
+
:root:has(.exp-scope) [data-orion-part='exp-split-card'] {
|
|
882
|
+
border-color: var(--exp-card-edge);
|
|
883
|
+
background:
|
|
884
|
+
var(--exp-card-band) top / 100% 4px no-repeat,
|
|
885
|
+
var(--exp-card-bg);
|
|
886
|
+
box-shadow: var(--exp-card-drop);
|
|
887
|
+
}
|
|
888
|
+
|
|
889
|
+
/* `data-exp-band="cool"` on an element switches the band of the cards and
|
|
890
|
+
framed tables inside it: blue to orange instead of orange to violet. */
|
|
891
|
+
:root:has(.exp-scope) [data-exp-band='cool'] {
|
|
892
|
+
--exp-card-band: linear-gradient(
|
|
893
|
+
90deg,
|
|
894
|
+
var(--color-info) 0%,
|
|
895
|
+
var(--color-lavender) 45%,
|
|
896
|
+
#b07fd0 72%,
|
|
897
|
+
#f7882f 100%
|
|
898
|
+
);
|
|
899
|
+
}
|
|
900
|
+
|
|
873
901
|
/* Skin: framed tables (DataTable card) ---------------------------------- */
|
|
874
902
|
|
|
875
903
|
/* A framed table reads as one card: the brand band along the top, like
|
|
@@ -885,6 +913,15 @@
|
|
|
885
913
|
box-shadow: var(--exp-card-drop);
|
|
886
914
|
}
|
|
887
915
|
|
|
916
|
+
/* Skin: tab bar (TabList second) ----------------------------------------- */
|
|
917
|
+
|
|
918
|
+
/* In dark mode the core `second` bar is gray-1, lighter than the cards
|
|
919
|
+
around it; in the layer it takes the dark surface of a card. */
|
|
920
|
+
:root.dark:has(.exp-scope) [data-orion-part='tab-bar'][data-modifier='second'] {
|
|
921
|
+
background: var(--exp-card-bg);
|
|
922
|
+
box-shadow: inset 0 0 0 1px var(--exp-field-line);
|
|
923
|
+
}
|
|
924
|
+
|
|
888
925
|
/* Skin: table rows as cards (ExpScope tables="cards") ------------------- */
|
|
889
926
|
|
|
890
927
|
:root:has(.exp-scope[data-exp-tables='cards'])
|
|
@@ -14,13 +14,20 @@ export type CodeBlockProps = {
|
|
|
14
14
|
startLine?: number;
|
|
15
15
|
/** Lines to emphasize, as inclusive ranges in the same numbering. */
|
|
16
16
|
highlight?: CodeBlockRange[];
|
|
17
|
+
/** Long lines continue on the next row instead of scrolling sideways. */
|
|
18
|
+
wrap?: boolean;
|
|
17
19
|
/** Called when the browser refuses to write to the clipboard. */
|
|
18
20
|
onCopyError?: (error: unknown) => void;
|
|
19
21
|
} & Omit<HTMLAttributes<HTMLDivElement>, 'children'>;
|
|
20
22
|
/**
|
|
21
23
|
* Read-only block of source code with a copy button. Shows an excerpt
|
|
22
|
-
* exactly as written: monospace, no wrapping, horizontal
|
|
23
|
-
* is longer than the block.
|
|
24
|
+
* exactly as written: monospace and, by default, no wrapping, with horizontal
|
|
25
|
+
* scroll when a line is longer than the block.
|
|
26
|
+
*
|
|
27
|
+
* With `wrap`, a line longer than the block continues on the next row, under
|
|
28
|
+
* the code and not under the line numbers. Use it where scrolling sideways is
|
|
29
|
+
* awkward, such as narrow screens or a command to read whole. Copying always
|
|
30
|
+
* takes the original text.
|
|
24
31
|
*
|
|
25
32
|
* Setting `startLine` numbers the lines, so an excerpt from the middle of a
|
|
26
33
|
* file keeps its real line numbers; `highlight` then marks ranges in that
|
|
@@ -48,9 +55,10 @@ export type CodeBlockProps = {
|
|
|
48
55
|
* @param {string} [props.language] - Label shown in the header.
|
|
49
56
|
* @param {number} [props.startLine] - Number of the first line; enables line numbers.
|
|
50
57
|
* @param {CodeBlockRange[]} [props.highlight=[]] - Inclusive line ranges to emphasize.
|
|
58
|
+
* @param {boolean} [props.wrap=false] - Long lines continue on the next row instead of scrolling.
|
|
51
59
|
* @param {(error: unknown) => void} [props.onCopyError] - Called when the clipboard write fails.
|
|
52
60
|
*
|
|
53
61
|
* @returns {ReactNode} The rendered CodeBlock component.
|
|
54
62
|
*/
|
|
55
|
-
export declare function CodeBlock({ code, copyLabel, copiedLabel, language, startLine, highlight, onCopyError, ...restProps }: CodeBlockProps): ReactNode;
|
|
63
|
+
export declare function CodeBlock({ code, copyLabel, copiedLabel, language, startLine, highlight, wrap, onCopyError, ...restProps }: CodeBlockProps): ReactNode;
|
|
56
64
|
//# sourceMappingURL=CodeBlock.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CodeBlock.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/CodeBlock/CodeBlock.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,SAAS,EAIf,MAAM,OAAO,CAAC;AAKf,iEAAiE;AACjE,MAAM,MAAM,cAAc,GAAG,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,CAAC,CAAC;AAExD,MAAM,MAAM,cAAc,GAAG;IAC3B,yCAAyC;IACzC,IAAI,EAAE,MAAM,CAAC;IACb,sDAAsD;IACtD,SAAS,EAAE,MAAM,CAAC;IAClB,yEAAyE;IACzE,WAAW,EAAE,MAAM,CAAC;IACpB,gFAAgF;IAChF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4EAA4E;IAC5E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qEAAqE;IACrE,SAAS,CAAC,EAAE,cAAc,EAAE,CAAC;IAC7B,iEAAiE;IACjE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,CAAC;AAQrD
|
|
1
|
+
{"version":3,"file":"CodeBlock.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/CodeBlock/CodeBlock.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,SAAS,EAIf,MAAM,OAAO,CAAC;AAKf,iEAAiE;AACjE,MAAM,MAAM,cAAc,GAAG,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,CAAC,CAAC;AAExD,MAAM,MAAM,cAAc,GAAG;IAC3B,yCAAyC;IACzC,IAAI,EAAE,MAAM,CAAC;IACb,sDAAsD;IACtD,SAAS,EAAE,MAAM,CAAC;IAClB,yEAAyE;IACzE,WAAW,EAAE,MAAM,CAAC;IACpB,gFAAgF;IAChF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4EAA4E;IAC5E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qEAAqE;IACrE,SAAS,CAAC,EAAE,cAAc,EAAE,CAAC;IAC7B,yEAAyE;IACzE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,iEAAiE;IACjE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,CAAC;AAQrD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,SAAS,EACT,WAAW,EACX,QAAQ,EACR,SAAS,EACT,SAAc,EACd,IAAY,EACZ,WAAW,EACX,GAAG,SAAS,EACb,EAAE,cAAc,GAAG,SAAS,CAmG5B"}
|
|
@@ -10,8 +10,13 @@ function isHighlighted(line, ranges) {
|
|
|
10
10
|
}
|
|
11
11
|
/**
|
|
12
12
|
* Read-only block of source code with a copy button. Shows an excerpt
|
|
13
|
-
* exactly as written: monospace, no wrapping, horizontal
|
|
14
|
-
* is longer than the block.
|
|
13
|
+
* exactly as written: monospace and, by default, no wrapping, with horizontal
|
|
14
|
+
* scroll when a line is longer than the block.
|
|
15
|
+
*
|
|
16
|
+
* With `wrap`, a line longer than the block continues on the next row, under
|
|
17
|
+
* the code and not under the line numbers. Use it where scrolling sideways is
|
|
18
|
+
* awkward, such as narrow screens or a command to read whole. Copying always
|
|
19
|
+
* takes the original text.
|
|
15
20
|
*
|
|
16
21
|
* Setting `startLine` numbers the lines, so an excerpt from the middle of a
|
|
17
22
|
* file keeps its real line numbers; `highlight` then marks ranges in that
|
|
@@ -39,11 +44,12 @@ function isHighlighted(line, ranges) {
|
|
|
39
44
|
* @param {string} [props.language] - Label shown in the header.
|
|
40
45
|
* @param {number} [props.startLine] - Number of the first line; enables line numbers.
|
|
41
46
|
* @param {CodeBlockRange[]} [props.highlight=[]] - Inclusive line ranges to emphasize.
|
|
47
|
+
* @param {boolean} [props.wrap=false] - Long lines continue on the next row instead of scrolling.
|
|
42
48
|
* @param {(error: unknown) => void} [props.onCopyError] - Called when the clipboard write fails.
|
|
43
49
|
*
|
|
44
50
|
* @returns {ReactNode} The rendered CodeBlock component.
|
|
45
51
|
*/
|
|
46
|
-
export function CodeBlock({ code, copyLabel, copiedLabel, language, startLine, highlight = [], onCopyError, ...restProps }) {
|
|
52
|
+
export function CodeBlock({ code, copyLabel, copiedLabel, language, startLine, highlight = [], wrap = false, onCopyError, ...restProps }) {
|
|
47
53
|
const [isCopied, setIsCopied] = useState(false);
|
|
48
54
|
const resetTimer = useRef(undefined);
|
|
49
55
|
useEffect(() => () => clearTimeout(resetTimer.current), []);
|
|
@@ -74,7 +80,7 @@ export function CodeBlock({ code, copyLabel, copiedLabel, language, startLine, h
|
|
|
74
80
|
</span>
|
|
75
81
|
</div>
|
|
76
82
|
<pre tabIndex={0} className="focus-visible:ring-lavender dark:focus-visible:ring-lavender-dark m-0 overflow-x-auto py-2 font-mono text-xs leading-5 text-black focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-inset dark:text-white">
|
|
77
|
-
<code className=
|
|
83
|
+
<code className={clsx('block', !wrap && 'min-w-max')}>
|
|
78
84
|
<Each of={lines} render={(line, index) => {
|
|
79
85
|
const number = firstLine + index;
|
|
80
86
|
const isMarked = isHighlighted(number, highlight);
|
|
@@ -84,7 +90,9 @@ export function CodeBlock({ code, copyLabel, copiedLabel, language, startLine, h
|
|
|
84
90
|
: 'text-gray-1 dark:text-gray-2')}>
|
|
85
91
|
{number}
|
|
86
92
|
</span>)}
|
|
87
|
-
<span className={clsx('pr-3
|
|
93
|
+
<span className={clsx('pr-3', wrap
|
|
94
|
+
? 'min-w-0 flex-1 wrap-anywhere whitespace-pre-wrap'
|
|
95
|
+
: 'whitespace-pre', !isNumbered && 'pl-3')}>
|
|
88
96
|
{line || ' '}
|
|
89
97
|
</span>
|
|
90
98
|
{'\n'}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CodeBlock.jsx","sourceRoot":"","sources":["../../../../src/components/01-atoms/CodeBlock/CodeBlock.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAGL,SAAS,EACT,MAAM,EACN,QAAQ,GACT,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"CodeBlock.jsx","sourceRoot":"","sources":["../../../../src/components/01-atoms/CodeBlock/CodeBlock.tsx"],"names":[],"mappings":"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"}
|
|
@@ -28,7 +28,7 @@ type OtpInputProps = {
|
|
|
28
28
|
* @param {boolean} [props.disabled=false] - Whether the input fields are disabled.
|
|
29
29
|
* @param {string} [props.labelStyle] - Additional CSS classes for the label.
|
|
30
30
|
* @param {string} [props.error] - Error message to be displayed below the input fields.
|
|
31
|
-
* @param {(otp: string) => void} props.handleSubmit - Callback function called
|
|
31
|
+
* @param {(otp: string) => void} props.handleSubmit - Callback function called as soon as the OTP is complete (all boxes filled), in the same change.
|
|
32
32
|
* @param {(digit: number) => string} [props.getDigitAriaLabel] - Generates an accessible label for each one-based digit position.
|
|
33
33
|
* @param {React.HTMLAttributes<HTMLDivElement>} [props.restProps] - Additional HTML attributes for the container div.
|
|
34
34
|
* @required props.label, props.handleSubmit
|
|
@@ -23,7 +23,7 @@ import { Paragraph } from '../Paragraph';
|
|
|
23
23
|
* @param {boolean} [props.disabled=false] - Whether the input fields are disabled.
|
|
24
24
|
* @param {string} [props.labelStyle] - Additional CSS classes for the label.
|
|
25
25
|
* @param {string} [props.error] - Error message to be displayed below the input fields.
|
|
26
|
-
* @param {(otp: string) => void} props.handleSubmit - Callback function called
|
|
26
|
+
* @param {(otp: string) => void} props.handleSubmit - Callback function called as soon as the OTP is complete (all boxes filled), in the same change.
|
|
27
27
|
* @param {(digit: number) => string} [props.getDigitAriaLabel] - Generates an accessible label for each one-based digit position.
|
|
28
28
|
* @param {React.HTMLAttributes<HTMLDivElement>} [props.restProps] - Additional HTML attributes for the container div.
|
|
29
29
|
* @required props.label, props.handleSubmit
|
|
@@ -36,7 +36,8 @@ export function OtpInput({ length = 4, disabled = false, label, labelStyle, erro
|
|
|
36
36
|
const accessibilityId = useId();
|
|
37
37
|
const labelId = `${accessibilityId}-label`;
|
|
38
38
|
const errorId = `${accessibilityId}-error`;
|
|
39
|
-
|
|
39
|
+
// Right away: a form that reads the code on Enter must already have it.
|
|
40
|
+
const onSubmit = (newCode) => handleSubmit(newCode.join(''));
|
|
40
41
|
const handleInputChange = (index, value) => {
|
|
41
42
|
if (value && !/^\d$/.test(value))
|
|
42
43
|
return;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OtpInput.jsx","sourceRoot":"","sources":["../../../../src/components/01-atoms/OtpInput/OtpInput.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAKL,KAAK,EACL,MAAM,EACN,QAAQ,GACT,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAYzC;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,MAAM,UAAU,QAAQ,CAAC,EACvB,MAAM,GAAG,CAAC,EACV,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,UAAU,EACV,KAAK,EACL,YAAY,EACZ,iBAAiB,EACjB,GAAG,SAAS,EACE;IACd,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,QAAQ,CAAW,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IAC3E,MAAM,SAAS,GAAG,MAAM,CAAqB,EAAE,CAAC,CAAC;IACjD,MAAM,eAAe,GAAG,KAAK,EAAE,CAAC;IAChC,MAAM,OAAO,GAAG,GAAG,eAAe,QAAQ,CAAC;IAC3C,MAAM,OAAO,GAAG,GAAG,eAAe,QAAQ,CAAC;IAE3C,MAAM,QAAQ,GAAG,CAAC,OAAiB,EAAE,EAAE,
|
|
1
|
+
{"version":3,"file":"OtpInput.jsx","sourceRoot":"","sources":["../../../../src/components/01-atoms/OtpInput/OtpInput.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import type { ComponentProps, ReactNode } from 'react';
|
|
2
|
+
import { IconButton } from '../../01-atoms/IconButton';
|
|
3
|
+
import { type DropdownProps } from '../Dropdown/Dropdown';
|
|
4
|
+
export type ActionMenuProps = {
|
|
5
|
+
/** Accessible name of the button and text of its tooltip. */
|
|
6
|
+
label: string;
|
|
7
|
+
/** The actions of the menu, as in `Dropdown`. */
|
|
8
|
+
actions: DropdownProps['actions'];
|
|
9
|
+
tooltipPlacement?: ComponentProps<typeof IconButton>['tooltipPlacement'];
|
|
10
|
+
} & Omit<DropdownProps, 'children' | 'actions'>;
|
|
11
|
+
/**
|
|
12
|
+
* Button with three vertical dots that opens a menu of actions. For the
|
|
13
|
+
* secondary actions of a table row or a card, where a button for each one
|
|
14
|
+
* does not fit. The menu is a `Dropdown`: it opens below the button when the
|
|
15
|
+
* right side has no room, and it is driven with the keyboard.
|
|
16
|
+
*
|
|
17
|
+
* `label` names what the menu acts on (`Options for core-logistics`): with
|
|
18
|
+
* several menus on a page, the dots alone do not say which row they belong to.
|
|
19
|
+
*
|
|
20
|
+
* @component
|
|
21
|
+
* @example
|
|
22
|
+
* <ActionMenu
|
|
23
|
+
* label="Options for core-logistics"
|
|
24
|
+
* actions={[
|
|
25
|
+
* { text: 'View cases', action: openCases },
|
|
26
|
+
* { text: 'Sync', action: sync, disabled: isSyncing },
|
|
27
|
+
* ]}
|
|
28
|
+
* />
|
|
29
|
+
*
|
|
30
|
+
* @param {ActionMenuProps} props - The properties of the ActionMenu component.
|
|
31
|
+
* @param {string} props.label - Accessible name of the button and text of its tooltip.
|
|
32
|
+
* @param {DropdownProps['actions']} props.actions - The actions of the menu.
|
|
33
|
+
* @param {UseFloatingOptions['placement']} [props.tooltipPlacement='top'] - Placement of the tooltip.
|
|
34
|
+
* @param {string} [props.className] - Classes for the open menu, as in `Dropdown`.
|
|
35
|
+
*
|
|
36
|
+
* @returns {ReactNode} The rendered ActionMenu component.
|
|
37
|
+
*/
|
|
38
|
+
export declare function ActionMenu({ label, actions, tooltipPlacement, ...restProps }: ActionMenuProps): ReactNode;
|
|
39
|
+
//# sourceMappingURL=ActionMenu.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ActionMenu.d.ts","sourceRoot":"","sources":["../../../../src/components/02-molecules/ActionMenu/ActionMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAEpE,MAAM,MAAM,eAAe,GAAG;IAC5B,6DAA6D;IAC7D,KAAK,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,OAAO,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IAClC,gBAAgB,CAAC,EAAE,cAAc,CAAC,OAAO,UAAU,CAAC,CAAC,kBAAkB,CAAC,CAAC;CAC1E,GAAG,IAAI,CAAC,aAAa,EAAE,UAAU,GAAG,SAAS,CAAC,CAAC;AAEhD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,OAAO,EACP,gBAAgB,EAChB,GAAG,SAAS,EACb,EAAE,eAAe,GAAG,SAAS,CAU7B"}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { IoEllipsisVertical } from 'react-icons/io5';
|
|
2
|
+
import { IconButton } from '../../01-atoms/IconButton';
|
|
3
|
+
import { Dropdown } from '../Dropdown/Dropdown';
|
|
4
|
+
/**
|
|
5
|
+
* Button with three vertical dots that opens a menu of actions. For the
|
|
6
|
+
* secondary actions of a table row or a card, where a button for each one
|
|
7
|
+
* does not fit. The menu is a `Dropdown`: it opens below the button when the
|
|
8
|
+
* right side has no room, and it is driven with the keyboard.
|
|
9
|
+
*
|
|
10
|
+
* `label` names what the menu acts on (`Options for core-logistics`): with
|
|
11
|
+
* several menus on a page, the dots alone do not say which row they belong to.
|
|
12
|
+
*
|
|
13
|
+
* @component
|
|
14
|
+
* @example
|
|
15
|
+
* <ActionMenu
|
|
16
|
+
* label="Options for core-logistics"
|
|
17
|
+
* actions={[
|
|
18
|
+
* { text: 'View cases', action: openCases },
|
|
19
|
+
* { text: 'Sync', action: sync, disabled: isSyncing },
|
|
20
|
+
* ]}
|
|
21
|
+
* />
|
|
22
|
+
*
|
|
23
|
+
* @param {ActionMenuProps} props - The properties of the ActionMenu component.
|
|
24
|
+
* @param {string} props.label - Accessible name of the button and text of its tooltip.
|
|
25
|
+
* @param {DropdownProps['actions']} props.actions - The actions of the menu.
|
|
26
|
+
* @param {UseFloatingOptions['placement']} [props.tooltipPlacement='top'] - Placement of the tooltip.
|
|
27
|
+
* @param {string} [props.className] - Classes for the open menu, as in `Dropdown`.
|
|
28
|
+
*
|
|
29
|
+
* @returns {ReactNode} The rendered ActionMenu component.
|
|
30
|
+
*/
|
|
31
|
+
export function ActionMenu({ label, actions, tooltipPlacement, ...restProps }) {
|
|
32
|
+
return (<Dropdown {...restProps} actions={actions}>
|
|
33
|
+
<IconButton icon={<IoEllipsisVertical />} label={label} tooltipPlacement={tooltipPlacement}/>
|
|
34
|
+
</Dropdown>);
|
|
35
|
+
}
|
|
36
|
+
//# sourceMappingURL=ActionMenu.jsx.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ActionMenu.jsx","sourceRoot":"","sources":["../../../../src/components/02-molecules/ActionMenu/ActionMenu.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAsB,MAAM,sBAAsB,CAAC;AAUpE;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,UAAU,UAAU,CAAC,EACzB,KAAK,EACL,OAAO,EACP,gBAAgB,EAChB,GAAG,SAAS,EACI;IAChB,OAAO,CACL,CAAC,QAAQ,CAAC,IAAI,SAAS,CAAC,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CACxC;MAAA,CAAC,UAAU,CACT,IAAI,CAAC,CAAC,CAAC,kBAAkB,CAAC,AAAD,EAAG,CAAC,CAC7B,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,gBAAgB,CAAC,CAAC,gBAAgB,CAAC,EAEvC;IAAA,EAAE,QAAQ,CAAC,CACZ,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/02-molecules/ActionMenu/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/02-molecules/ActionMenu/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabList.d.ts","sourceRoot":"","sources":["../../../../src/components/02-molecules/Tab/TabList.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,cAAc,EAEnB,SAAS,EAGV,MAAM,OAAO,CAAC;AAIf,OAAO,EAAW,YAAY,EAAE,MAAM,WAAW,CAAC;AAElD,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,QAAQ,CAAC;
|
|
1
|
+
{"version":3,"file":"TabList.d.ts","sourceRoot":"","sources":["../../../../src/components/02-molecules/Tab/TabList.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,cAAc,EAEnB,SAAS,EAGV,MAAM,OAAO,CAAC;AAIf,OAAO,EAAW,YAAY,EAAE,MAAM,WAAW,CAAC;AAElD,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,QAAQ,CAAC;AAOhD,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,EAAE,KAAK,CAAC,YAAY,GAAG;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC9C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,SAAS,CAAC,EAAE,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,WAAW,CAAC,CAAC;IAC9D,YAAY,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;IAC9C,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAenC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,wBAAgB,OAAO,CAAC,EACtB,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,OAAO,EACP,QAAoB,EACpB,cAAkB,EAClB,SAAiB,EACjB,GAAG,SAAS,EACb,EAAE,YAAY,GAAG,SAAS,CAkI1B"}
|
|
@@ -98,6 +98,10 @@ export function TabList({ list, callback, listProps, contentProps, actions, modi
|
|
|
98
98
|
activeTab,
|
|
99
99
|
generatedId,
|
|
100
100
|
};
|
|
101
|
+
const barProps = {
|
|
102
|
+
'data-orion-part': 'tab-bar',
|
|
103
|
+
'data-modifier': modifier,
|
|
104
|
+
};
|
|
101
105
|
/**
|
|
102
106
|
* `rowClassName` es donde vive la linea inferior. Con `actions` la lleva la
|
|
103
107
|
* fila y no la lista, para que cruce el ancho completo y las acciones queden
|
|
@@ -111,28 +115,28 @@ export function TabList({ list, callback, listProps, contentProps, actions, modi
|
|
|
111
115
|
* de accion apoya su borde inferior justo sobre ella y queda pegado a lo que
|
|
112
116
|
* sigue. Va en la fila y no en cada parte para no desarmar la linea de base.
|
|
113
117
|
*/
|
|
114
|
-
const renderTabs = (rowClassName, listClassName) => actions ? (<div className={clsx('flex items-end justify-between gap-8 pb-1.5', rowClassName)}>
|
|
118
|
+
const renderTabs = (rowClassName, listClassName, rowProps) => actions ? (<div {...rowProps} className={clsx('flex items-end justify-between gap-8 pb-1.5', rowClassName)}>
|
|
115
119
|
<RenderList className={listClassName} itemClassName="pb-3" {...listArgs}/>
|
|
116
120
|
<div className="flex shrink-0 items-center gap-5">{actions}</div>
|
|
117
|
-
</div>) : (<RenderList className={clsx(rowClassName, listClassName)} {...listArgs}/>);
|
|
121
|
+
</div>) : (<RenderList className={clsx(rowClassName, listClassName)} barProps={rowProps} {...listArgs}/>);
|
|
118
122
|
const Element = Object.keys(restProps).length ? 'div' : Fragment;
|
|
119
123
|
return (<Element {...restProps}>
|
|
120
124
|
<Show>
|
|
121
125
|
<Show.When isTrue={container}>
|
|
122
|
-
<div className={clsx('border-b', styleMap[modifier], listProps?.className)}>
|
|
126
|
+
<div {...barProps} className={clsx('border-b', styleMap[modifier], listProps?.className)}>
|
|
123
127
|
<Container>{renderTabs('', 'gap-4')}</Container>
|
|
124
128
|
</div>
|
|
125
129
|
<Container>{panel}</Container>
|
|
126
130
|
</Show.When>
|
|
127
131
|
<Show.Else>
|
|
128
|
-
{renderTabs(clsx('border-b', styleMap[modifier]), clsx('gap-4', listProps?.className))}
|
|
132
|
+
{renderTabs(clsx('border-b', styleMap[modifier]), clsx('gap-4', listProps?.className), barProps)}
|
|
129
133
|
{panel}
|
|
130
134
|
</Show.Else>
|
|
131
135
|
</Show>
|
|
132
136
|
</Element>);
|
|
133
137
|
}
|
|
134
|
-
const RenderList = ({ className, itemClassName, list, handleItem, handleKeyDown, activeTab, generatedId, }) => {
|
|
135
|
-
return (<List role="tablist" aria-orientation="horizontal" orientation="horizontal" className={className}>
|
|
138
|
+
const RenderList = ({ className, itemClassName, barProps, list, handleItem, handleKeyDown, activeTab, generatedId, }) => {
|
|
139
|
+
return (<List {...barProps} role="tablist" aria-orientation="horizontal" orientation="horizontal" className={className}>
|
|
136
140
|
<Each of={list} render={({ title, icon, count }, index) => {
|
|
137
141
|
return (<li key={title} role="presentation">
|
|
138
142
|
<TabItem id={`${generatedId}-tab-${index}`} aria-controls={`${generatedId}-panel-${index}`} aria-selected={index === activeTab} tabIndex={index === activeTab ? 0 : -1} className={itemClassName} icon={icon} count={count} onClick={() => handleItem(index)} onKeyDown={(event) => handleKeyDown(event, index)} isActive={index === activeTab}>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabList.jsx","sourceRoot":"","sources":["../../../../src/components/02-molecules/Tab/TabList.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EACL,QAAQ,EAIR,KAAK,EACL,QAAQ,GACT,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,OAAO,EAAgB,MAAM,WAAW,CAAC;
|
|
1
|
+
{"version":3,"file":"TabList.jsx","sourceRoot":"","sources":["../../../../src/components/02-molecules/Tab/TabList.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/02-molecules/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/02-molecules/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/02-molecules/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/02-molecules/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC"}
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import { HTMLAttributes, ReactNode } from 'react';
|
|
2
|
+
/** One series of bars: one value per label, in the same order. */
|
|
3
|
+
export type BarChartSeries = {
|
|
4
|
+
name: string;
|
|
5
|
+
data: number[];
|
|
6
|
+
};
|
|
7
|
+
/** Horizontal dashed line across the plot, such as a goal or a limit. */
|
|
8
|
+
export type BarChartReference = {
|
|
9
|
+
value: number;
|
|
10
|
+
label: string;
|
|
11
|
+
};
|
|
12
|
+
type BarChartProps = {
|
|
13
|
+
labels: string[];
|
|
14
|
+
series: BarChartSeries[];
|
|
15
|
+
ariaLabel: string;
|
|
16
|
+
formatValue?: (value: number) => string;
|
|
17
|
+
reference?: BarChartReference;
|
|
18
|
+
height?: number;
|
|
19
|
+
} & Omit<HTMLAttributes<HTMLElement>, 'children'>;
|
|
20
|
+
/**
|
|
21
|
+
* BarChart component for comparing a few values side by side, as vertical bars.
|
|
22
|
+
*
|
|
23
|
+
* Each label gets one bar per series, with its value on top. A `reference`
|
|
24
|
+
* draws a dashed line, such as a goal, over the bars; its label goes in the
|
|
25
|
+
* legend under the plot, so no bar covers it. The bars are hidden from screen
|
|
26
|
+
* readers, which read a table with the same values instead.
|
|
27
|
+
*
|
|
28
|
+
* @component
|
|
29
|
+
* @example
|
|
30
|
+
* // Mean cost per route, with the goal as a reference line
|
|
31
|
+
* <BarChart
|
|
32
|
+
* labels={['lookup', 'similar', 'model']}
|
|
33
|
+
* series={[{ name: 'USD per case', data: [0.03, 0.09, 0.24] }]}
|
|
34
|
+
* formatValue={(value) => value.toFixed(2)}
|
|
35
|
+
* reference={{ value: 0.25, label: 'goal 0.25' }}
|
|
36
|
+
* ariaLabel="Mean cost per route"
|
|
37
|
+
* />
|
|
38
|
+
*
|
|
39
|
+
* @param {Object} props - The properties of the BarChart component.
|
|
40
|
+
* @param {string[]} props.labels - One label per group of bars, under the plot.
|
|
41
|
+
* @param {BarChartSeries[]} props.series - The values. With more than one series the bars are grouped and a legend shows up.
|
|
42
|
+
* @param {string} props.ariaLabel - What the chart shows: the caption of the table that screen readers read.
|
|
43
|
+
* @param {Function} [props.formatValue] - Turns each value into the text over its bar and in the table. Defaults to `String`.
|
|
44
|
+
* @param {BarChartReference} [props.reference] - A dashed line at that value; its label goes in the legend.
|
|
45
|
+
* @param {number} [props.height=200] - Height of the plot in pixels, without the labels.
|
|
46
|
+
* @param {Object} [props.restProps] - Additional properties to be passed to the `figure`.
|
|
47
|
+
*
|
|
48
|
+
* @returns {ReactNode} The rendered BarChart component.
|
|
49
|
+
*/
|
|
50
|
+
export declare function BarChart({ labels, series, ariaLabel, formatValue, reference, height, ...restProps }: BarChartProps): ReactNode;
|
|
51
|
+
export {};
|
|
52
|
+
//# sourceMappingURL=BarChart.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BarChart.d.ts","sourceRoot":"","sources":["../../../../src/components/03-organisms/BarChart/BarChart.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGlD,kEAAkE;AAClE,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,EAAE,CAAC;CAChB,CAAC;AAEF,yEAAyE;AACzE,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,KAAK,aAAa,GAAG;IACnB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,MAAM,EAAE,cAAc,EAAE,CAAC;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC,CAAC;AAelD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,QAAQ,CAAC,EACvB,MAAM,EACN,MAAM,EACN,SAAS,EACT,WAAoB,EACpB,SAAS,EACT,MAAY,EACZ,GAAG,SAAS,EACb,EAAE,aAAa,GAAG,SAAS,CA4J3B"}
|