@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,38 @@
|
|
|
1
|
+
import type { HTMLAttributes, ReactNode } from 'react';
|
|
2
|
+
/** One column of the card: its accessible name and what goes in it. */
|
|
3
|
+
export type ExpSplitCardColumn = {
|
|
4
|
+
label: string;
|
|
5
|
+
content: ReactNode;
|
|
6
|
+
};
|
|
7
|
+
export type ExpSplitCardProps = {
|
|
8
|
+
/** The columns, in order. The first one is a little wider. */
|
|
9
|
+
columns: ExpSplitCardColumn[];
|
|
10
|
+
} & Omit<HTMLAttributes<HTMLDivElement>, 'children'>;
|
|
11
|
+
/**
|
|
12
|
+
* One card split into columns by thin dividers, with the brand band along the
|
|
13
|
+
* top. For a few summaries that read together, such as a score, a budget and
|
|
14
|
+
* the goals, in place of a row of separate cards.
|
|
15
|
+
*
|
|
16
|
+
* Each column is a `section` named by its `label`. From `lg` the columns sit
|
|
17
|
+
* side by side and the first one is a little wider; below, they stack with a
|
|
18
|
+
* divider between them.
|
|
19
|
+
*
|
|
20
|
+
* Outside an `ExpScope` it falls back to a row of core `Card`s, one per column.
|
|
21
|
+
*
|
|
22
|
+
* @component
|
|
23
|
+
* @example
|
|
24
|
+
* <ExpSplitCard
|
|
25
|
+
* columns={[
|
|
26
|
+
* { label: 'Score', content: <ScoreSummary /> },
|
|
27
|
+
* { label: 'Budget', content: <BudgetSummary /> },
|
|
28
|
+
* { label: 'Goals', content: <GoalList /> },
|
|
29
|
+
* ]}
|
|
30
|
+
* />
|
|
31
|
+
*
|
|
32
|
+
* @param {Object} props - The properties of the ExpSplitCard component.
|
|
33
|
+
* @param {ExpSplitCardColumn[]} props.columns - The columns, each with its `label` and `content`.
|
|
34
|
+
*
|
|
35
|
+
* @returns {ReactNode} The card, or a row of core `Card`s outside an `ExpScope`.
|
|
36
|
+
*/
|
|
37
|
+
export declare function ExpSplitCard({ columns, ...restProps }: ExpSplitCardProps): ReactNode;
|
|
38
|
+
//# sourceMappingURL=ExpSplitCard.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ExpSplitCard.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpSplitCard/ExpSplitCard.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvD,uEAAuE;AACvE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,SAAS,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,8DAA8D;IAC9D,OAAO,EAAE,kBAAkB,EAAE,CAAC;CAC/B,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,CAAC;AAErD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,GAAG,SAAS,EACb,EAAE,iBAAiB,GAAG,SAAS,CAyD/B"}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { Card, Each } from '@clicoh/orion-library';
|
|
3
|
+
import clsx from 'clsx';
|
|
4
|
+
import { useExpScope } from '../ExpScope/ExpScope';
|
|
5
|
+
/**
|
|
6
|
+
* One card split into columns by thin dividers, with the brand band along the
|
|
7
|
+
* top. For a few summaries that read together, such as a score, a budget and
|
|
8
|
+
* the goals, in place of a row of separate cards.
|
|
9
|
+
*
|
|
10
|
+
* Each column is a `section` named by its `label`. From `lg` the columns sit
|
|
11
|
+
* side by side and the first one is a little wider; below, they stack with a
|
|
12
|
+
* divider between them.
|
|
13
|
+
*
|
|
14
|
+
* Outside an `ExpScope` it falls back to a row of core `Card`s, one per column.
|
|
15
|
+
*
|
|
16
|
+
* @component
|
|
17
|
+
* @example
|
|
18
|
+
* <ExpSplitCard
|
|
19
|
+
* columns={[
|
|
20
|
+
* { label: 'Score', content: <ScoreSummary /> },
|
|
21
|
+
* { label: 'Budget', content: <BudgetSummary /> },
|
|
22
|
+
* { label: 'Goals', content: <GoalList /> },
|
|
23
|
+
* ]}
|
|
24
|
+
* />
|
|
25
|
+
*
|
|
26
|
+
* @param {Object} props - The properties of the ExpSplitCard component.
|
|
27
|
+
* @param {ExpSplitCardColumn[]} props.columns - The columns, each with its `label` and `content`.
|
|
28
|
+
*
|
|
29
|
+
* @returns {ReactNode} The card, or a row of core `Card`s outside an `ExpScope`.
|
|
30
|
+
*/
|
|
31
|
+
export function ExpSplitCard({ columns, ...restProps }) {
|
|
32
|
+
const inScope = useExpScope();
|
|
33
|
+
if (!inScope) {
|
|
34
|
+
return (<div {...restProps} className={clsx('grid grid-cols-1 gap-4 lg:auto-cols-fr lg:grid-flow-col', restProps.className)}>
|
|
35
|
+
<Each of={columns} render={(column) => (<Card key={column.label} as="section" aria-label={column.label} className="min-w-0">
|
|
36
|
+
{column.content}
|
|
37
|
+
</Card>)}/>
|
|
38
|
+
</div>);
|
|
39
|
+
}
|
|
40
|
+
return (<div {...restProps} data-orion-part="exp-split-card" className={clsx('flex flex-col overflow-hidden rounded-2xl border pt-1 text-black lg:flex-row dark:text-white', restProps.className)}>
|
|
41
|
+
<Each of={columns} render={(column, index) => (<section key={column.label} aria-label={column.label} className={clsx('border-gray-5 dark:border-gray-1 flex min-w-0 flex-col justify-center gap-3 px-6 py-6 lg:px-8 lg:py-7', index === 0
|
|
42
|
+
? 'lg:flex-[1.15]'
|
|
43
|
+
: 'border-t lg:flex-1 lg:border-t-0 lg:border-l')}>
|
|
44
|
+
{column.content}
|
|
45
|
+
</section>)}/>
|
|
46
|
+
</div>);
|
|
47
|
+
}
|
|
48
|
+
//# sourceMappingURL=ExpSplitCard.jsx.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ExpSplitCard.jsx","sourceRoot":"","sources":["../../src/expresivo/ExpSplitCard/ExpSplitCard.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAanD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,UAAU,YAAY,CAAC,EAC3B,OAAO,EACP,GAAG,SAAS,EACM;IAClB,MAAM,OAAO,GAAG,WAAW,EAAE,CAAC;IAE9B,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,OAAO,CACL,CAAC,GAAG,CACF,IAAI,SAAS,CAAC,CACd,SAAS,CAAC,CAAC,IAAI,CACb,yDAAyD,EACzD,SAAS,CAAC,SAAS,CACpB,CAAC,CAEF;QAAA,CAAC,IAAI,CACH,EAAE,CAAC,CAAC,OAAO,CAAC,CACZ,MAAM,CAAC,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAClB,CAAC,IAAI,CACH,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAClB,EAAE,CAAC,SAAS,CACZ,UAAU,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CACzB,SAAS,CAAC,SAAS,CAEnB;cAAA,CAAC,MAAM,CAAC,OAAO,CACjB;YAAA,EAAE,IAAI,CAAC,CACR,CAAC,EAEN;MAAA,EAAE,GAAG,CAAC,CACP,CAAC;IACJ,CAAC;IAED,OAAO,CACL,CAAC,GAAG,CACF,IAAI,SAAS,CAAC,CACd,eAAe,CAAC,gBAAgB,CAChC,SAAS,CAAC,CAAC,IAAI,CACb,8FAA8F,EAC9F,SAAS,CAAC,SAAS,CACpB,CAAC,CAEF;MAAA,CAAC,IAAI,CACH,EAAE,CAAC,CAAC,OAAO,CAAC,CACZ,MAAM,CAAC,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CACzB,CAAC,OAAO,CACN,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAClB,UAAU,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CACzB,SAAS,CAAC,CAAC,IAAI,CACb,uGAAuG,EACvG,KAAK,KAAK,CAAC;gBACT,CAAC,CAAC,gBAAgB;gBAClB,CAAC,CAAC,8CAA8C,CACnD,CAAC,CAEF;YAAA,CAAC,MAAM,CAAC,OAAO,CACjB;UAAA,EAAE,OAAO,CAAC,CACX,CAAC,EAEN;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpSplitCard/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/expresivo/ExpSplitCard/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC"}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import type { HTMLAttributes, ReactNode } from 'react';
|
|
2
|
+
export type ExpStatusTagModifier = 'success' | 'warning' | 'error' | 'info' | 'progress' | 'disabled';
|
|
3
|
+
export type ExpStatusTagProps = {
|
|
4
|
+
modifier: ExpStatusTagModifier;
|
|
5
|
+
children: ReactNode;
|
|
6
|
+
} & Omit<HTMLAttributes<HTMLSpanElement>, 'children'>;
|
|
7
|
+
/**
|
|
8
|
+
* Status as a flat tinted tag with a thick bar on its left edge, for a status
|
|
9
|
+
* column in a table where a row of outlined badges reads too busy. Same status
|
|
10
|
+
* modifiers as the core `Badge`; the label carries the message.
|
|
11
|
+
*
|
|
12
|
+
* Outside an `ExpScope` it falls back to the core `Badge` with the same
|
|
13
|
+
* `modifier`.
|
|
14
|
+
*
|
|
15
|
+
* @component
|
|
16
|
+
* @example
|
|
17
|
+
* <ExpStatusTag modifier="success">Synced</ExpStatusTag>
|
|
18
|
+
*
|
|
19
|
+
* @param {ExpStatusTagProps} props - The properties of the ExpStatusTag component.
|
|
20
|
+
* @param {'success' | 'warning' | 'error' | 'info' | 'progress' | 'disabled'} props.modifier - Status color.
|
|
21
|
+
* @param {ReactNode} props.children - Label of the status.
|
|
22
|
+
*
|
|
23
|
+
* @returns {ReactNode} The tag, or a core `Badge` outside an `ExpScope`.
|
|
24
|
+
*/
|
|
25
|
+
export declare function ExpStatusTag({ modifier, children, ...restProps }: ExpStatusTagProps): ReactNode;
|
|
26
|
+
//# sourceMappingURL=ExpStatusTag.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ExpStatusTag.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpStatusTag/ExpStatusTag.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvD,MAAM,MAAM,oBAAoB,GAC5B,SAAS,GACT,SAAS,GACT,OAAO,GACP,MAAM,GACN,UAAU,GACV,UAAU,CAAC;AAEf,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,EAAE,oBAAoB,CAAC;IAC/B,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC,CAAC;AAkBtD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,QAAQ,EACR,GAAG,SAAS,EACb,EAAE,iBAAiB,GAAG,SAAS,CAuB/B"}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { Badge } from '@clicoh/orion-library';
|
|
3
|
+
import clsx from 'clsx';
|
|
4
|
+
import { useExpScope } from '../ExpScope/ExpScope';
|
|
5
|
+
// The label takes the strong shade: the base `warning` and `success` hues sit
|
|
6
|
+
// below 4.5:1 on their tint.
|
|
7
|
+
const colorMap = {
|
|
8
|
+
success: 'border-success bg-success-1 text-success-strong dark:bg-success/16 dark:text-success',
|
|
9
|
+
warning: 'border-amber bg-warning-1 text-amber-strong dark:bg-warning/16 dark:text-amber',
|
|
10
|
+
error: 'border-error bg-error-1 text-error-strong dark:bg-error/16 dark:text-error',
|
|
11
|
+
info: 'border-info bg-info-1 text-info-dark-3 dark:bg-info/16 dark:text-info',
|
|
12
|
+
progress: 'border-lavender bg-lavender-2 text-lavender dark:bg-lavender/18 dark:text-lavender',
|
|
13
|
+
disabled: 'border-gray-1 bg-gray-6 text-gray-1 dark:border-gray-2 dark:bg-gray-2/16 dark:text-gray-2',
|
|
14
|
+
};
|
|
15
|
+
/**
|
|
16
|
+
* Status as a flat tinted tag with a thick bar on its left edge, for a status
|
|
17
|
+
* column in a table where a row of outlined badges reads too busy. Same status
|
|
18
|
+
* modifiers as the core `Badge`; the label carries the message.
|
|
19
|
+
*
|
|
20
|
+
* Outside an `ExpScope` it falls back to the core `Badge` with the same
|
|
21
|
+
* `modifier`.
|
|
22
|
+
*
|
|
23
|
+
* @component
|
|
24
|
+
* @example
|
|
25
|
+
* <ExpStatusTag modifier="success">Synced</ExpStatusTag>
|
|
26
|
+
*
|
|
27
|
+
* @param {ExpStatusTagProps} props - The properties of the ExpStatusTag component.
|
|
28
|
+
* @param {'success' | 'warning' | 'error' | 'info' | 'progress' | 'disabled'} props.modifier - Status color.
|
|
29
|
+
* @param {ReactNode} props.children - Label of the status.
|
|
30
|
+
*
|
|
31
|
+
* @returns {ReactNode} The tag, or a core `Badge` outside an `ExpScope`.
|
|
32
|
+
*/
|
|
33
|
+
export function ExpStatusTag({ modifier, children, ...restProps }) {
|
|
34
|
+
const inScope = useExpScope();
|
|
35
|
+
if (!inScope) {
|
|
36
|
+
return (<Badge {...restProps} modifier={modifier}>
|
|
37
|
+
{children}
|
|
38
|
+
</Badge>);
|
|
39
|
+
}
|
|
40
|
+
return (<span {...restProps} className={clsx('inline-flex items-center rounded-[3px_8px_8px_3px] border-l-3 px-2.5 py-1 text-xs leading-4 font-semibold whitespace-nowrap', colorMap[modifier], restProps.className)}>
|
|
41
|
+
{children}
|
|
42
|
+
</span>);
|
|
43
|
+
}
|
|
44
|
+
//# sourceMappingURL=ExpStatusTag.jsx.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ExpStatusTag.jsx","sourceRoot":"","sources":["../../src/expresivo/ExpStatusTag/ExpStatusTag.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAenD,8EAA8E;AAC9E,6BAA6B;AAC7B,MAAM,QAAQ,GAAyC;IACrD,OAAO,EACL,sFAAsF;IACxF,OAAO,EACL,gFAAgF;IAClF,KAAK,EACH,4EAA4E;IAC9E,IAAI,EAAE,uEAAuE;IAC7E,QAAQ,EACN,oFAAoF;IACtF,QAAQ,EACN,2FAA2F;CAC9F,CAAC;AAEF;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,UAAU,YAAY,CAAC,EAC3B,QAAQ,EACR,QAAQ,EACR,GAAG,SAAS,EACM;IAClB,MAAM,OAAO,GAAG,WAAW,EAAE,CAAC;IAE9B,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,OAAO,CACL,CAAC,KAAK,CAAC,IAAI,SAAS,CAAC,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACvC;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,KAAK,CAAC,CACT,CAAC;IACJ,CAAC;IAED,OAAO,CACL,CAAC,IAAI,CACH,IAAI,SAAS,CAAC,CACd,SAAS,CAAC,CAAC,IAAI,CACb,6HAA6H,EAC7H,QAAQ,CAAC,QAAQ,CAAC,EAClB,SAAS,CAAC,SAAS,CACpB,CAAC,CAEF;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpStatusTag/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/expresivo/ExpStatusTag/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC"}
|
package/expresivo/index.d.ts
CHANGED
|
@@ -19,4 +19,9 @@ export * from './ExpSearchField';
|
|
|
19
19
|
export * from './ExpLadder';
|
|
20
20
|
export * from './ExpRepoAvatar';
|
|
21
21
|
export * from './ExpStatIcon';
|
|
22
|
+
export * from './ExpFigureBand';
|
|
23
|
+
export * from './ExpSplitCard';
|
|
24
|
+
export * from './ExpStatusTag';
|
|
25
|
+
export * from './ExpCodeHostIcon';
|
|
26
|
+
export * from './ExpAccentNote';
|
|
22
27
|
//# sourceMappingURL=index.d.ts.map
|
package/expresivo/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/expresivo/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/expresivo/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC"}
|
package/expresivo/index.js
CHANGED
|
@@ -19,4 +19,9 @@ export * from './ExpSearchField';
|
|
|
19
19
|
export * from './ExpLadder';
|
|
20
20
|
export * from './ExpRepoAvatar';
|
|
21
21
|
export * from './ExpStatIcon';
|
|
22
|
+
export * from './ExpFigureBand';
|
|
23
|
+
export * from './ExpSplitCard';
|
|
24
|
+
export * from './ExpStatusTag';
|
|
25
|
+
export * from './ExpCodeHostIcon';
|
|
26
|
+
export * from './ExpAccentNote';
|
|
22
27
|
//# sourceMappingURL=index.js.map
|
package/expresivo/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/expresivo/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/expresivo/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC"}
|