@cerberus-design/react 0.11.0 → 0.11.1-next-3c9efd5
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/build/legacy/_tsup-dts-rollup.d.cts +1 -2
- package/build/legacy/components/Admonition.cjs +1 -1
- package/build/legacy/components/Admonition.cjs.map +1 -1
- package/build/legacy/components/Legend.cjs +2 -2
- package/build/legacy/components/Legend.cjs.map +1 -1
- package/build/legacy/index.cjs +3 -3
- package/build/legacy/index.cjs.map +1 -1
- package/build/modern/_tsup-dts-rollup.d.ts +1 -2
- package/build/modern/{chunk-6TTN2JMY.js → chunk-ILQW5VZT.js} +3 -5
- package/build/modern/chunk-ILQW5VZT.js.map +1 -0
- package/build/modern/{chunk-ZW3FFE37.js → chunk-KF6V5JLW.js} +2 -2
- package/build/modern/chunk-KF6V5JLW.js.map +1 -0
- package/build/modern/components/Admonition.js +1 -1
- package/build/modern/components/Legend.js +1 -1
- package/build/modern/index.js +2 -2
- package/package.json +3 -3
- package/src/components/Admonition.tsx +1 -1
- package/src/components/Legend.tsx +2 -5
- package/build/modern/chunk-6TTN2JMY.js.map +0 -1
- package/build/modern/chunk-ZW3FFE37.js.map +0 -1
|
@@ -77,7 +77,6 @@ import { KeyboardSensor } from '@dnd-kit/core';
|
|
|
77
77
|
import { KeyboardSensorOptions } from '@dnd-kit/core';
|
|
78
78
|
import { KeyboardSensorProps } from '@dnd-kit/core';
|
|
79
79
|
import { LabelVariantProps } from '@cerberus/styled-system/recipes';
|
|
80
|
-
import { LabelVariantProps as LabelVariantProps_2 } from '@cerberus-design/styled-system/recipes';
|
|
81
80
|
import { MeasuringConfiguration } from '@dnd-kit/core';
|
|
82
81
|
import { MeasuringFrequency } from '@dnd-kit/core';
|
|
83
82
|
import { MeasuringStrategy } from '@dnd-kit/core';
|
|
@@ -1185,7 +1184,7 @@ export { Legend as Legend_alias_1 }
|
|
|
1185
1184
|
* This module contains the Fieldset component.
|
|
1186
1185
|
* @module Fieldset
|
|
1187
1186
|
*/
|
|
1188
|
-
declare type LegendProps = HTMLAttributes<HTMLLegendElement> &
|
|
1187
|
+
declare type LegendProps = HTMLAttributes<HTMLLegendElement> & LabelVariantProps;
|
|
1189
1188
|
export { LegendProps }
|
|
1190
1189
|
export { LegendProps as LegendProps_alias_1 }
|
|
1191
1190
|
|
|
@@ -7,10 +7,8 @@ import {
|
|
|
7
7
|
|
|
8
8
|
// src/components/Legend.tsx
|
|
9
9
|
import { css, cx } from "@cerberus/styled-system/css";
|
|
10
|
-
import {
|
|
11
|
-
|
|
12
|
-
} from "@cerberus-design/styled-system/recipes";
|
|
13
|
-
import { hstack } from "@cerberus-design/styled-system/patterns";
|
|
10
|
+
import { label } from "@cerberus/styled-system/recipes";
|
|
11
|
+
import { hstack } from "@cerberus/styled-system/patterns";
|
|
14
12
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
15
13
|
function Legend(props) {
|
|
16
14
|
const { size, ...nativeProps } = props;
|
|
@@ -51,4 +49,4 @@ function Legend(props) {
|
|
|
51
49
|
export {
|
|
52
50
|
Legend
|
|
53
51
|
};
|
|
54
|
-
//# sourceMappingURL=chunk-
|
|
52
|
+
//# sourceMappingURL=chunk-ILQW5VZT.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/Legend.tsx"],"sourcesContent":["'use client'\n\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { type HTMLAttributes } from 'react'\nimport { useFieldContext } from '../context/field'\nimport { Show } from './Show'\nimport { label, type LabelVariantProps } from '@cerberus/styled-system/recipes'\nimport { hstack } from '@cerberus/styled-system/patterns'\n\n/**\n * This module contains the Fieldset component.\n * @module Fieldset\n */\n\nexport type LegendProps = HTMLAttributes<HTMLLegendElement> & LabelVariantProps\n\n/**\n * A component to provide a global label for a group of related elements in a form (for accessibility).\n * @memberof Fieldset\n * @see https://cerberus.digitalu.com/react/fieldset\n * @description [A11y Form Checklist](https://www.a11yproject.com/checklist/#forms)\n * @description [MDN Web Docs: Legend](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/legend)\n * @example\n * ```tsx\n * import { Fieldset, Legend, Field, Radio, Label } from '@cerberus/react'\n * import { Hstack } from '@cerberus/styled-system/jsx'\n *\n * function SomeForm() {\n * return (\n * <form>\n * <Fieldset>\n * <Legend>Do you like cats?</Legend>\n * <Hstack>\n * <Field>\n * <Radio id=\"yes\" name=\"cats\" value=\"yes\" />\n * <Label htmlFor=\"yes\">Yes</Label>\n * </Field>\n * </Hstack>\n * <Hstack>\n * <Field>\n * <Radio id=\"no\" name=\"cats\" value=\"no\" />\n * <Label htmlFor=\"no\">No</Label>\n * </Field>\n * </Hstack>\n * </Fieldset>\n * </form>\n * )\n * }\n * ```\n */\nexport function Legend(props: LegendProps) {\n const { size, ...nativeProps } = props\n const { invalid, ...formState } = useFieldContext()\n\n return (\n <legend\n {...nativeProps}\n {...formState}\n {...(invalid && { 'aria-invalid': true })}\n className={cx(\n nativeProps.className,\n hstack({\n justify: 'space-between',\n w: 'full',\n }),\n label({\n size,\n }),\n )}\n >\n {nativeProps.children}\n <Show when={formState.required}>\n <span\n className={css({\n color: 'page.text.100',\n fontSize: 'inherit',\n })}\n >\n (required)\n </span>\n </Show>\n </legend>\n )\n}\n"],"mappings":";;;;;;;;AAEA,SAAS,KAAK,UAAU;AAIxB,SAAS,aAAqC;AAC9C,SAAS,cAAc;AAgDnB,SAiBI,KAjBJ;AALG,SAAS,OAAO,OAAoB;AACzC,QAAM,EAAE,MAAM,GAAG,YAAY,IAAI;AACjC,QAAM,EAAE,SAAS,GAAG,UAAU,IAAI,gBAAgB;AAElD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAI,WAAW,EAAE,gBAAgB,KAAK;AAAA,MACvC,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,OAAO;AAAA,UACL,SAAS;AAAA,UACT,GAAG;AAAA,QACL,CAAC;AAAA,QACD,MAAM;AAAA,UACJ;AAAA,QACF,CAAC;AAAA,MACH;AAAA,MAEC;AAAA,oBAAY;AAAA,QACb,oBAAC,QAAK,MAAM,UAAU,UACpB;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,IAAI;AAAA,cACb,OAAO;AAAA,cACP,UAAU;AAAA,YACZ,CAAC;AAAA,YACF;AAAA;AAAA,QAED,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}
|
|
@@ -12,7 +12,7 @@ import {
|
|
|
12
12
|
import {
|
|
13
13
|
admonition
|
|
14
14
|
} from "@cerberus/styled-system/recipes";
|
|
15
|
-
import { cx } from "@cerberus
|
|
15
|
+
import { cx } from "@cerberus/styled-system/css";
|
|
16
16
|
import { hstack } from "@cerberus/styled-system/patterns";
|
|
17
17
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
18
18
|
function Admonition(props) {
|
|
@@ -135,4 +135,4 @@ export {
|
|
|
135
135
|
AdmonitionHeading,
|
|
136
136
|
AdmonitionDescription
|
|
137
137
|
};
|
|
138
|
-
//# sourceMappingURL=chunk-
|
|
138
|
+
//# sourceMappingURL=chunk-KF6V5JLW.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/Admonition.tsx"],"sourcesContent":["import {\n admonition,\n type AdmonitionVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport { cx } from '@cerberus/styled-system/css'\nimport { hstack } from '@cerberus/styled-system/patterns'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport type { HTMLAttributes, ReactNode } from 'react'\nimport { Avatar } from './Avatar'\nimport { Show } from './Show'\n\n/**\n * This module provides a set of components for creating admonitions.\n * @module Admonition\n */\n\nexport type AdmonitionProps = HTMLAttributes<HTMLDivElement> &\n AdmonitionVariantProps & {\n /**\n * One off replacement for the icon.\n */\n icon?: ReactNode\n }\n\n/**\n * The `Admonition` component is used to create an admonition.\n * @example\n * ```tsx\n * <Admonition palette=\"page\">\n * <AdmonitionHeading palette=\"page\">Page</AdmonitionHeading>\n * <AdmonitionDescription palette=\"page\">\n * This is a page admonition.\n * </AdmonitionDescription>\n * </Admonition>\n * ```\n * @see https://cerberus.digitalu.design/react/admonition\n */\nexport function Admonition(props: AdmonitionProps) {\n const { children, palette = 'page', usage, icon, ...nativeProps } = props\n return (\n <aside\n {...nativeProps}\n className={cx(\n nativeProps.className,\n hstack({\n gap: 'md',\n w: 'full',\n }),\n admonition({ palette, usage }).root,\n )}\n >\n <Show when={Boolean(icon)} fallback={<MatchAvatar palette={palette} />}>\n {icon}\n </Show>\n <div>{children}</div>\n </aside>\n )\n}\n\nexport type AdmonitionHeadingProps = HTMLAttributes<HTMLParagraphElement> &\n AdmonitionVariantProps\n\n/**\n * The `AdmonitionHeading` component is used to create a heading within an\n * admonition.\n * @example\n * ```tsx\n * <Admonition palette=\"page\">\n * <AdmonitionHeading palette=\"page\">Page</AdmonitionHeading>\n * <AdmonitionDescription palette=\"page\">\n * This is a page admonition.\n * </AdmonitionDescription>\n * </Admonition>\n * ```\n * @see https://cerberus.digitalu.design/react/admonition\n */\nexport function AdmonitionHeading(props: AdmonitionHeadingProps) {\n const { palette, usage, ...nativeProps } = props\n return (\n <p\n {...nativeProps}\n className={cx(\n nativeProps.className,\n admonition({ palette, usage }).heading,\n )}\n />\n )\n}\n\nexport type AdmonitionDescriptionProps = HTMLAttributes<HTMLParagraphElement> &\n AdmonitionVariantProps\n\n/**\n * The `AdmonitionDescription` component is used to create a description within\n * an admonition.\n * @example\n * ```tsx\n * <Admonition palette=\"page\">\n * <AdmonitionHeading palette=\"page\">Page</AdmonitionHeading>\n * <AdmonitionDescription palette=\"page\">\n * This is a page admonition.\n * </AdmonitionDescription>\n * </Admonition>\n * ```\n * @see https://cerberus.digitalu.design/react/admonition\n */\nexport function AdmonitionDescription(props: AdmonitionDescriptionProps) {\n const { palette, usage, ...nativeProps } = props\n return (\n <p\n {...nativeProps}\n className={cx(\n nativeProps.className,\n admonition({ palette, usage }).description,\n )}\n />\n )\n}\n\n// Private components\n\ntype MatchAvatarProps = AdmonitionVariantProps\n\nfunction MatchAvatar(props: MatchAvatarProps) {\n const {\n infoNotification: InfoIcon,\n successNotification: SuccessIcon,\n warningNotification: WarningIcon,\n dangerNotification: DangerIcon,\n } = $cerberusIcons\n switch (props.palette) {\n case 'page':\n return (\n <Avatar\n gradient=\"charon-light\"\n ariaLabel=\"\"\n icon={<InfoIcon />}\n size=\"sm\"\n src=\"\"\n />\n )\n case 'info':\n return (\n <Avatar\n gradient=\"amphiaraus-dark\"\n ariaLabel=\"\"\n icon={<InfoIcon />}\n size=\"sm\"\n src=\"\"\n />\n )\n case 'success':\n return (\n <Avatar\n gradient=\"thanatos-dark\"\n ariaLabel=\"\"\n icon={<SuccessIcon />}\n size=\"sm\"\n src=\"\"\n />\n )\n case 'warning':\n return (\n <Avatar\n gradient=\"asphodel-light\"\n ariaLabel=\"\"\n icon={<WarningIcon />}\n size=\"sm\"\n src=\"\"\n />\n )\n case 'danger':\n return (\n <Avatar\n gradient=\"hades-light\"\n ariaLabel=\"\"\n icon={<DangerIcon />}\n size=\"sm\"\n src=\"\"\n />\n )\n\n default:\n throw new Error('Unsupported admonition palette')\n }\n}\n"],"mappings":";;;;;;;;;;;AAAA;AAAA,EACE;AAAA,OAEK;AACP,SAAS,UAAU;AACnB,SAAS,cAAc;AAmCnB,SAWuC,KAXvC;AAHG,SAAS,WAAW,OAAwB;AACjD,QAAM,EAAE,UAAU,UAAU,QAAQ,OAAO,MAAM,GAAG,YAAY,IAAI;AACpE,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,OAAO;AAAA,UACL,KAAK;AAAA,UACL,GAAG;AAAA,QACL,CAAC;AAAA,QACD,WAAW,EAAE,SAAS,MAAM,CAAC,EAAE;AAAA,MACjC;AAAA,MAEA;AAAA,4BAAC,QAAK,MAAM,QAAQ,IAAI,GAAG,UAAU,oBAAC,eAAY,SAAkB,GACjE,gBACH;AAAA,QACA,oBAAC,SAAK,UAAS;AAAA;AAAA;AAAA,EACjB;AAEJ;AAmBO,SAAS,kBAAkB,OAA+B;AAC/D,QAAM,EAAE,SAAS,OAAO,GAAG,YAAY,IAAI;AAC3C,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,WAAW,EAAE,SAAS,MAAM,CAAC,EAAE;AAAA,MACjC;AAAA;AAAA,EACF;AAEJ;AAmBO,SAAS,sBAAsB,OAAmC;AACvE,QAAM,EAAE,SAAS,OAAO,GAAG,YAAY,IAAI;AAC3C,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,WAAW,EAAE,SAAS,MAAM,CAAC,EAAE;AAAA,MACjC;AAAA;AAAA,EACF;AAEJ;AAMA,SAAS,YAAY,OAAyB;AAC5C,QAAM;AAAA,IACJ,kBAAkB;AAAA,IAClB,qBAAqB;AAAA,IACrB,qBAAqB;AAAA,IACrB,oBAAoB;AAAA,EACtB,IAAI;AACJ,UAAQ,MAAM,SAAS;AAAA,IACrB,KAAK;AACH,aACE;AAAA,QAAC;AAAA;AAAA,UACC,UAAS;AAAA,UACT,WAAU;AAAA,UACV,MAAM,oBAAC,YAAS;AAAA,UAChB,MAAK;AAAA,UACL,KAAI;AAAA;AAAA,MACN;AAAA,IAEJ,KAAK;AACH,aACE;AAAA,QAAC;AAAA;AAAA,UACC,UAAS;AAAA,UACT,WAAU;AAAA,UACV,MAAM,oBAAC,YAAS;AAAA,UAChB,MAAK;AAAA,UACL,KAAI;AAAA;AAAA,MACN;AAAA,IAEJ,KAAK;AACH,aACE;AAAA,QAAC;AAAA;AAAA,UACC,UAAS;AAAA,UACT,WAAU;AAAA,UACV,MAAM,oBAAC,eAAY;AAAA,UACnB,MAAK;AAAA,UACL,KAAI;AAAA;AAAA,MACN;AAAA,IAEJ,KAAK;AACH,aACE;AAAA,QAAC;AAAA;AAAA,UACC,UAAS;AAAA,UACT,WAAU;AAAA,UACV,MAAM,oBAAC,eAAY;AAAA,UACnB,MAAK;AAAA,UACL,KAAI;AAAA;AAAA,MACN;AAAA,IAEJ,KAAK;AACH,aACE;AAAA,QAAC;AAAA;AAAA,UACC,UAAS;AAAA,UACT,WAAU;AAAA,UACV,MAAM,oBAAC,cAAW;AAAA,UAClB,MAAK;AAAA,UACL,KAAI;AAAA;AAAA,MACN;AAAA,IAGJ;AACE,YAAM,IAAI,MAAM,gCAAgC;AAAA,EACpD;AACF;","names":[]}
|
package/build/modern/index.js
CHANGED
|
@@ -89,7 +89,7 @@ import {
|
|
|
89
89
|
} from "./chunk-NMF2HYWO.js";
|
|
90
90
|
import {
|
|
91
91
|
Legend
|
|
92
|
-
} from "./chunk-
|
|
92
|
+
} from "./chunk-ILQW5VZT.js";
|
|
93
93
|
import {
|
|
94
94
|
Modal
|
|
95
95
|
} from "./chunk-BE4EOU2P.js";
|
|
@@ -149,7 +149,7 @@ import {
|
|
|
149
149
|
Admonition,
|
|
150
150
|
AdmonitionDescription,
|
|
151
151
|
AdmonitionHeading
|
|
152
|
-
} from "./chunk-
|
|
152
|
+
} from "./chunk-KF6V5JLW.js";
|
|
153
153
|
import {
|
|
154
154
|
Avatar
|
|
155
155
|
} from "./chunk-ZX6DBC2Z.js";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cerberus-design/react",
|
|
3
|
-
"version": "0.11.
|
|
3
|
+
"version": "0.11.1-next-3c9efd5",
|
|
4
4
|
"description": "The Cerberus Design React component library.",
|
|
5
5
|
"browserslist": "> 0.25%, not dead",
|
|
6
6
|
"sideEffects": false,
|
|
@@ -25,8 +25,8 @@
|
|
|
25
25
|
"react": "^18",
|
|
26
26
|
"react-dom": "^18",
|
|
27
27
|
"tsup": "^8.1.0",
|
|
28
|
-
"@cerberus-design/
|
|
29
|
-
"@cerberus-design/
|
|
28
|
+
"@cerberus-design/styled-system": "0.11.1-next-3c9efd5",
|
|
29
|
+
"@cerberus-design/configs": "0.0.0"
|
|
30
30
|
},
|
|
31
31
|
"publishConfig": {
|
|
32
32
|
"access": "public"
|
|
@@ -2,7 +2,7 @@ import {
|
|
|
2
2
|
admonition,
|
|
3
3
|
type AdmonitionVariantProps,
|
|
4
4
|
} from '@cerberus/styled-system/recipes'
|
|
5
|
-
import { cx } from '@cerberus
|
|
5
|
+
import { cx } from '@cerberus/styled-system/css'
|
|
6
6
|
import { hstack } from '@cerberus/styled-system/patterns'
|
|
7
7
|
import { $cerberusIcons } from '../config/defineIcons'
|
|
8
8
|
import type { HTMLAttributes, ReactNode } from 'react'
|
|
@@ -4,11 +4,8 @@ import { css, cx } from '@cerberus/styled-system/css'
|
|
|
4
4
|
import { type HTMLAttributes } from 'react'
|
|
5
5
|
import { useFieldContext } from '../context/field'
|
|
6
6
|
import { Show } from './Show'
|
|
7
|
-
import {
|
|
8
|
-
|
|
9
|
-
type LabelVariantProps,
|
|
10
|
-
} from '@cerberus-design/styled-system/recipes'
|
|
11
|
-
import { hstack } from '@cerberus-design/styled-system/patterns'
|
|
7
|
+
import { label, type LabelVariantProps } from '@cerberus/styled-system/recipes'
|
|
8
|
+
import { hstack } from '@cerberus/styled-system/patterns'
|
|
12
9
|
|
|
13
10
|
/**
|
|
14
11
|
* This module contains the Fieldset component.
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/Legend.tsx"],"sourcesContent":["'use client'\n\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { type HTMLAttributes } from 'react'\nimport { useFieldContext } from '../context/field'\nimport { Show } from './Show'\nimport {\n label,\n type LabelVariantProps,\n} from '@cerberus-design/styled-system/recipes'\nimport { hstack } from '@cerberus-design/styled-system/patterns'\n\n/**\n * This module contains the Fieldset component.\n * @module Fieldset\n */\n\nexport type LegendProps = HTMLAttributes<HTMLLegendElement> & LabelVariantProps\n\n/**\n * A component to provide a global label for a group of related elements in a form (for accessibility).\n * @memberof Fieldset\n * @see https://cerberus.digitalu.com/react/fieldset\n * @description [A11y Form Checklist](https://www.a11yproject.com/checklist/#forms)\n * @description [MDN Web Docs: Legend](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/legend)\n * @example\n * ```tsx\n * import { Fieldset, Legend, Field, Radio, Label } from '@cerberus/react'\n * import { Hstack } from '@cerberus/styled-system/jsx'\n *\n * function SomeForm() {\n * return (\n * <form>\n * <Fieldset>\n * <Legend>Do you like cats?</Legend>\n * <Hstack>\n * <Field>\n * <Radio id=\"yes\" name=\"cats\" value=\"yes\" />\n * <Label htmlFor=\"yes\">Yes</Label>\n * </Field>\n * </Hstack>\n * <Hstack>\n * <Field>\n * <Radio id=\"no\" name=\"cats\" value=\"no\" />\n * <Label htmlFor=\"no\">No</Label>\n * </Field>\n * </Hstack>\n * </Fieldset>\n * </form>\n * )\n * }\n * ```\n */\nexport function Legend(props: LegendProps) {\n const { size, ...nativeProps } = props\n const { invalid, ...formState } = useFieldContext()\n\n return (\n <legend\n {...nativeProps}\n {...formState}\n {...(invalid && { 'aria-invalid': true })}\n className={cx(\n nativeProps.className,\n hstack({\n justify: 'space-between',\n w: 'full',\n }),\n label({\n size,\n }),\n )}\n >\n {nativeProps.children}\n <Show when={formState.required}>\n <span\n className={css({\n color: 'page.text.100',\n fontSize: 'inherit',\n })}\n >\n (required)\n </span>\n </Show>\n </legend>\n )\n}\n"],"mappings":";;;;;;;;AAEA,SAAS,KAAK,UAAU;AAIxB;AAAA,EACE;AAAA,OAEK;AACP,SAAS,cAAc;AAgDnB,SAiBI,KAjBJ;AALG,SAAS,OAAO,OAAoB;AACzC,QAAM,EAAE,MAAM,GAAG,YAAY,IAAI;AACjC,QAAM,EAAE,SAAS,GAAG,UAAU,IAAI,gBAAgB;AAElD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAI,WAAW,EAAE,gBAAgB,KAAK;AAAA,MACvC,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,OAAO;AAAA,UACL,SAAS;AAAA,UACT,GAAG;AAAA,QACL,CAAC;AAAA,QACD,MAAM;AAAA,UACJ;AAAA,QACF,CAAC;AAAA,MACH;AAAA,MAEC;AAAA,oBAAY;AAAA,QACb,oBAAC,QAAK,MAAM,UAAU,UACpB;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,IAAI;AAAA,cACb,OAAO;AAAA,cACP,UAAU;AAAA,YACZ,CAAC;AAAA,YACF;AAAA;AAAA,QAED,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/Admonition.tsx"],"sourcesContent":["import {\n admonition,\n type AdmonitionVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport { cx } from '@cerberus-design/styled-system/css'\nimport { hstack } from '@cerberus/styled-system/patterns'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport type { HTMLAttributes, ReactNode } from 'react'\nimport { Avatar } from './Avatar'\nimport { Show } from './Show'\n\n/**\n * This module provides a set of components for creating admonitions.\n * @module Admonition\n */\n\nexport type AdmonitionProps = HTMLAttributes<HTMLDivElement> &\n AdmonitionVariantProps & {\n /**\n * One off replacement for the icon.\n */\n icon?: ReactNode\n }\n\n/**\n * The `Admonition` component is used to create an admonition.\n * @example\n * ```tsx\n * <Admonition palette=\"page\">\n * <AdmonitionHeading palette=\"page\">Page</AdmonitionHeading>\n * <AdmonitionDescription palette=\"page\">\n * This is a page admonition.\n * </AdmonitionDescription>\n * </Admonition>\n * ```\n * @see https://cerberus.digitalu.design/react/admonition\n */\nexport function Admonition(props: AdmonitionProps) {\n const { children, palette = 'page', usage, icon, ...nativeProps } = props\n return (\n <aside\n {...nativeProps}\n className={cx(\n nativeProps.className,\n hstack({\n gap: 'md',\n w: 'full',\n }),\n admonition({ palette, usage }).root,\n )}\n >\n <Show when={Boolean(icon)} fallback={<MatchAvatar palette={palette} />}>\n {icon}\n </Show>\n <div>{children}</div>\n </aside>\n )\n}\n\nexport type AdmonitionHeadingProps = HTMLAttributes<HTMLParagraphElement> &\n AdmonitionVariantProps\n\n/**\n * The `AdmonitionHeading` component is used to create a heading within an\n * admonition.\n * @example\n * ```tsx\n * <Admonition palette=\"page\">\n * <AdmonitionHeading palette=\"page\">Page</AdmonitionHeading>\n * <AdmonitionDescription palette=\"page\">\n * This is a page admonition.\n * </AdmonitionDescription>\n * </Admonition>\n * ```\n * @see https://cerberus.digitalu.design/react/admonition\n */\nexport function AdmonitionHeading(props: AdmonitionHeadingProps) {\n const { palette, usage, ...nativeProps } = props\n return (\n <p\n {...nativeProps}\n className={cx(\n nativeProps.className,\n admonition({ palette, usage }).heading,\n )}\n />\n )\n}\n\nexport type AdmonitionDescriptionProps = HTMLAttributes<HTMLParagraphElement> &\n AdmonitionVariantProps\n\n/**\n * The `AdmonitionDescription` component is used to create a description within\n * an admonition.\n * @example\n * ```tsx\n * <Admonition palette=\"page\">\n * <AdmonitionHeading palette=\"page\">Page</AdmonitionHeading>\n * <AdmonitionDescription palette=\"page\">\n * This is a page admonition.\n * </AdmonitionDescription>\n * </Admonition>\n * ```\n * @see https://cerberus.digitalu.design/react/admonition\n */\nexport function AdmonitionDescription(props: AdmonitionDescriptionProps) {\n const { palette, usage, ...nativeProps } = props\n return (\n <p\n {...nativeProps}\n className={cx(\n nativeProps.className,\n admonition({ palette, usage }).description,\n )}\n />\n )\n}\n\n// Private components\n\ntype MatchAvatarProps = AdmonitionVariantProps\n\nfunction MatchAvatar(props: MatchAvatarProps) {\n const {\n infoNotification: InfoIcon,\n successNotification: SuccessIcon,\n warningNotification: WarningIcon,\n dangerNotification: DangerIcon,\n } = $cerberusIcons\n switch (props.palette) {\n case 'page':\n return (\n <Avatar\n gradient=\"charon-light\"\n ariaLabel=\"\"\n icon={<InfoIcon />}\n size=\"sm\"\n src=\"\"\n />\n )\n case 'info':\n return (\n <Avatar\n gradient=\"amphiaraus-dark\"\n ariaLabel=\"\"\n icon={<InfoIcon />}\n size=\"sm\"\n src=\"\"\n />\n )\n case 'success':\n return (\n <Avatar\n gradient=\"thanatos-dark\"\n ariaLabel=\"\"\n icon={<SuccessIcon />}\n size=\"sm\"\n src=\"\"\n />\n )\n case 'warning':\n return (\n <Avatar\n gradient=\"asphodel-light\"\n ariaLabel=\"\"\n icon={<WarningIcon />}\n size=\"sm\"\n src=\"\"\n />\n )\n case 'danger':\n return (\n <Avatar\n gradient=\"hades-light\"\n ariaLabel=\"\"\n icon={<DangerIcon />}\n size=\"sm\"\n src=\"\"\n />\n )\n\n default:\n throw new Error('Unsupported admonition palette')\n }\n}\n"],"mappings":";;;;;;;;;;;AAAA;AAAA,EACE;AAAA,OAEK;AACP,SAAS,UAAU;AACnB,SAAS,cAAc;AAmCnB,SAWuC,KAXvC;AAHG,SAAS,WAAW,OAAwB;AACjD,QAAM,EAAE,UAAU,UAAU,QAAQ,OAAO,MAAM,GAAG,YAAY,IAAI;AACpE,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,OAAO;AAAA,UACL,KAAK;AAAA,UACL,GAAG;AAAA,QACL,CAAC;AAAA,QACD,WAAW,EAAE,SAAS,MAAM,CAAC,EAAE;AAAA,MACjC;AAAA,MAEA;AAAA,4BAAC,QAAK,MAAM,QAAQ,IAAI,GAAG,UAAU,oBAAC,eAAY,SAAkB,GACjE,gBACH;AAAA,QACA,oBAAC,SAAK,UAAS;AAAA;AAAA;AAAA,EACjB;AAEJ;AAmBO,SAAS,kBAAkB,OAA+B;AAC/D,QAAM,EAAE,SAAS,OAAO,GAAG,YAAY,IAAI;AAC3C,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,WAAW,EAAE,SAAS,MAAM,CAAC,EAAE;AAAA,MACjC;AAAA;AAAA,EACF;AAEJ;AAmBO,SAAS,sBAAsB,OAAmC;AACvE,QAAM,EAAE,SAAS,OAAO,GAAG,YAAY,IAAI;AAC3C,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,WAAW,EAAE,SAAS,MAAM,CAAC,EAAE;AAAA,MACjC;AAAA;AAAA,EACF;AAEJ;AAMA,SAAS,YAAY,OAAyB;AAC5C,QAAM;AAAA,IACJ,kBAAkB;AAAA,IAClB,qBAAqB;AAAA,IACrB,qBAAqB;AAAA,IACrB,oBAAoB;AAAA,EACtB,IAAI;AACJ,UAAQ,MAAM,SAAS;AAAA,IACrB,KAAK;AACH,aACE;AAAA,QAAC;AAAA;AAAA,UACC,UAAS;AAAA,UACT,WAAU;AAAA,UACV,MAAM,oBAAC,YAAS;AAAA,UAChB,MAAK;AAAA,UACL,KAAI;AAAA;AAAA,MACN;AAAA,IAEJ,KAAK;AACH,aACE;AAAA,QAAC;AAAA;AAAA,UACC,UAAS;AAAA,UACT,WAAU;AAAA,UACV,MAAM,oBAAC,YAAS;AAAA,UAChB,MAAK;AAAA,UACL,KAAI;AAAA;AAAA,MACN;AAAA,IAEJ,KAAK;AACH,aACE;AAAA,QAAC;AAAA;AAAA,UACC,UAAS;AAAA,UACT,WAAU;AAAA,UACV,MAAM,oBAAC,eAAY;AAAA,UACnB,MAAK;AAAA,UACL,KAAI;AAAA;AAAA,MACN;AAAA,IAEJ,KAAK;AACH,aACE;AAAA,QAAC;AAAA;AAAA,UACC,UAAS;AAAA,UACT,WAAU;AAAA,UACV,MAAM,oBAAC,eAAY;AAAA,UACnB,MAAK;AAAA,UACL,KAAI;AAAA;AAAA,MACN;AAAA,IAEJ,KAAK;AACH,aACE;AAAA,QAAC;AAAA;AAAA,UACC,UAAS;AAAA,UACT,WAAU;AAAA,UACV,MAAM,oBAAC,cAAW;AAAA,UAClB,MAAK;AAAA,UACL,KAAI;AAAA;AAAA,MACN;AAAA,IAGJ;AACE,YAAM,IAAI,MAAM,gCAAgC;AAAA,EACpD;AACF;","names":[]}
|