@wordpress/ui 0.8.0 → 0.9.1-next.v.202603102151.0
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/CHANGELOG.md +19 -0
- package/build/card/content.cjs +54 -0
- package/build/card/content.cjs.map +7 -0
- package/build/card/full-bleed.cjs +57 -0
- package/build/card/full-bleed.cjs.map +7 -0
- package/build/card/header.cjs +54 -0
- package/build/card/header.cjs.map +7 -0
- package/build/card/index.cjs +43 -0
- package/build/card/index.cjs.map +7 -0
- package/build/card/root.cjs +73 -0
- package/build/card/root.cjs.map +7 -0
- package/build/card/title.cjs +55 -0
- package/build/card/title.cjs.map +7 -0
- package/build/card/types.cjs +19 -0
- package/build/card/types.cjs.map +7 -0
- package/build/collapsible-card/content.cjs +56 -0
- package/build/collapsible-card/content.cjs.map +7 -0
- package/build/collapsible-card/header.cjs +104 -0
- package/build/collapsible-card/header.cjs.map +7 -0
- package/build/collapsible-card/index.cjs +37 -0
- package/build/collapsible-card/index.cjs.map +7 -0
- package/build/collapsible-card/root.cjs +56 -0
- package/build/collapsible-card/root.cjs.map +7 -0
- package/build/collapsible-card/types.cjs +19 -0
- package/build/collapsible-card/types.cjs.map +7 -0
- package/build/form/primitives/field/label.cjs +6 -1
- package/build/form/primitives/field/label.cjs.map +2 -2
- package/build/form/primitives/field/types.cjs.map +1 -1
- package/build/form/primitives/fieldset/legend.cjs +5 -1
- package/build/form/primitives/fieldset/legend.cjs.map +2 -2
- package/build/form/primitives/fieldset/types.cjs.map +1 -1
- package/build/index.cjs +10 -0
- package/build/index.cjs.map +2 -2
- package/build/link/index.cjs +31 -0
- package/build/link/index.cjs.map +7 -0
- package/build/link/link.cjs +125 -0
- package/build/link/link.cjs.map +7 -0
- package/build/link/types.cjs +19 -0
- package/build/link/types.cjs.map +7 -0
- package/build/notice/action-button.cjs +3 -3
- package/build/notice/action-button.cjs.map +2 -2
- package/build/notice/action-link.cjs +17 -18
- package/build/notice/action-link.cjs.map +2 -2
- package/build/notice/actions.cjs +3 -3
- package/build/notice/actions.cjs.map +2 -2
- package/build/notice/close-icon.cjs +3 -3
- package/build/notice/close-icon.cjs.map +2 -2
- package/build/notice/description.cjs +26 -15
- package/build/notice/description.cjs.map +3 -3
- package/build/notice/root.cjs +3 -3
- package/build/notice/root.cjs.map +2 -2
- package/build/notice/title.cjs +26 -12
- package/build/notice/title.cjs.map +3 -3
- package/build/notice/types.cjs.map +1 -1
- package/build/text/index.cjs +31 -0
- package/build/text/index.cjs.map +7 -0
- package/build/text/text.cjs +65 -0
- package/build/text/text.cjs.map +7 -0
- package/build/text/types.cjs +19 -0
- package/build/text/types.cjs.map +7 -0
- package/build/tooltip/popup.cjs +1 -1
- package/build/tooltip/popup.cjs.map +1 -1
- package/build/visually-hidden/visually-hidden.cjs +3 -3
- package/build/visually-hidden/visually-hidden.cjs.map +2 -2
- package/build-module/card/content.mjs +29 -0
- package/build-module/card/content.mjs.map +7 -0
- package/build-module/card/full-bleed.mjs +32 -0
- package/build-module/card/full-bleed.mjs.map +7 -0
- package/build-module/card/header.mjs +29 -0
- package/build-module/card/header.mjs.map +7 -0
- package/build-module/card/index.mjs +14 -0
- package/build-module/card/index.mjs.map +7 -0
- package/build-module/card/root.mjs +38 -0
- package/build-module/card/root.mjs.map +7 -0
- package/build-module/card/title.mjs +30 -0
- package/build-module/card/title.mjs.map +7 -0
- package/build-module/card/types.mjs +1 -0
- package/build-module/card/types.mjs.map +7 -0
- package/build-module/collapsible-card/content.mjs +21 -0
- package/build-module/collapsible-card/content.mjs.map +7 -0
- package/build-module/collapsible-card/header.mjs +69 -0
- package/build-module/collapsible-card/header.mjs.map +7 -0
- package/build-module/collapsible-card/index.mjs +10 -0
- package/build-module/collapsible-card/index.mjs.map +7 -0
- package/build-module/collapsible-card/root.mjs +21 -0
- package/build-module/collapsible-card/root.mjs.map +7 -0
- package/build-module/collapsible-card/types.mjs +1 -0
- package/build-module/collapsible-card/types.mjs.map +7 -0
- package/build-module/form/primitives/field/label.mjs +6 -1
- package/build-module/form/primitives/field/label.mjs.map +2 -2
- package/build-module/form/primitives/fieldset/legend.mjs +5 -1
- package/build-module/form/primitives/fieldset/legend.mjs.map +2 -2
- package/build-module/index.mjs +6 -0
- package/build-module/index.mjs.map +2 -2
- package/build-module/link/index.mjs +6 -0
- package/build-module/link/index.mjs.map +7 -0
- package/build-module/link/link.mjs +90 -0
- package/build-module/link/link.mjs.map +7 -0
- package/build-module/link/types.mjs +1 -0
- package/build-module/link/types.mjs.map +7 -0
- package/build-module/notice/action-button.mjs +3 -3
- package/build-module/notice/action-button.mjs.map +2 -2
- package/build-module/notice/action-link.mjs +17 -18
- package/build-module/notice/action-link.mjs.map +2 -2
- package/build-module/notice/actions.mjs +3 -3
- package/build-module/notice/actions.mjs.map +2 -2
- package/build-module/notice/close-icon.mjs +3 -3
- package/build-module/notice/close-icon.mjs.map +2 -2
- package/build-module/notice/description.mjs +16 -15
- package/build-module/notice/description.mjs.map +2 -2
- package/build-module/notice/root.mjs +3 -3
- package/build-module/notice/root.mjs.map +2 -2
- package/build-module/notice/title.mjs +16 -12
- package/build-module/notice/title.mjs.map +2 -2
- package/build-module/text/index.mjs +6 -0
- package/build-module/text/index.mjs.map +7 -0
- package/build-module/text/text.mjs +30 -0
- package/build-module/text/text.mjs.map +7 -0
- package/build-module/text/types.mjs +1 -0
- package/build-module/text/types.mjs.map +7 -0
- package/build-module/tooltip/popup.mjs +1 -1
- package/build-module/tooltip/popup.mjs.map +1 -1
- package/build-module/visually-hidden/visually-hidden.mjs +3 -3
- package/build-module/visually-hidden/visually-hidden.mjs.map +2 -2
- package/build-types/card/content.d.ts +6 -0
- package/build-types/card/content.d.ts.map +1 -0
- package/build-types/card/full-bleed.d.ts +9 -0
- package/build-types/card/full-bleed.d.ts.map +1 -0
- package/build-types/card/header.d.ts +7 -0
- package/build-types/card/header.d.ts.map +1 -0
- package/build-types/card/index.d.ts +7 -0
- package/build-types/card/index.d.ts.map +1 -0
- package/build-types/card/root.d.ts +23 -0
- package/build-types/card/root.d.ts.map +1 -0
- package/build-types/card/stories/index.story.d.ts +22 -0
- package/build-types/card/stories/index.story.d.ts.map +1 -0
- package/build-types/card/test/index.test.d.ts +2 -0
- package/build-types/card/test/index.test.d.ts.map +1 -0
- package/build-types/card/title.d.ts +7 -0
- package/build-types/card/title.d.ts.map +1 -0
- package/build-types/card/types.d.ts +34 -0
- package/build-types/card/types.d.ts.map +1 -0
- package/build-types/collapsible-card/content.d.ts +7 -0
- package/build-types/collapsible-card/content.d.ts.map +1 -0
- package/build-types/collapsible-card/header.d.ts +12 -0
- package/build-types/collapsible-card/header.d.ts.map +1 -0
- package/build-types/collapsible-card/index.d.ts +5 -0
- package/build-types/collapsible-card/index.d.ts.map +1 -0
- package/build-types/collapsible-card/root.d.ts +24 -0
- package/build-types/collapsible-card/root.d.ts.map +1 -0
- package/build-types/collapsible-card/stories/index.story.d.ts +23 -0
- package/build-types/collapsible-card/stories/index.story.d.ts.map +1 -0
- package/build-types/collapsible-card/test/index.test.d.ts +2 -0
- package/build-types/collapsible-card/test/index.test.d.ts.map +1 -0
- package/build-types/collapsible-card/types.d.ts +42 -0
- package/build-types/collapsible-card/types.d.ts.map +1 -0
- package/build-types/form/primitives/field/label.d.ts +1 -0
- package/build-types/form/primitives/field/label.d.ts.map +1 -1
- package/build-types/form/primitives/field/stories/index.story.d.ts +5 -0
- package/build-types/form/primitives/field/stories/index.story.d.ts.map +1 -1
- package/build-types/form/primitives/field/types.d.ts +7 -0
- package/build-types/form/primitives/field/types.d.ts.map +1 -1
- package/build-types/form/primitives/fieldset/legend.d.ts +1 -0
- package/build-types/form/primitives/fieldset/legend.d.ts.map +1 -1
- package/build-types/form/primitives/fieldset/stories/index.story.d.ts +5 -0
- package/build-types/form/primitives/fieldset/stories/index.story.d.ts.map +1 -1
- package/build-types/form/primitives/fieldset/types.d.ts +7 -0
- package/build-types/form/primitives/fieldset/types.d.ts.map +1 -1
- package/build-types/index.d.ts +4 -0
- package/build-types/index.d.ts.map +1 -1
- package/build-types/link/index.d.ts +2 -0
- package/build-types/link/index.d.ts.map +1 -0
- package/build-types/link/link.d.ts +7 -0
- package/build-types/link/link.d.ts.map +1 -0
- package/build-types/link/stories/index.story.d.ts +18 -0
- package/build-types/link/stories/index.story.d.ts.map +1 -0
- package/build-types/link/test/index.test.d.ts +2 -0
- package/build-types/link/test/index.test.d.ts.map +1 -0
- package/build-types/link/types.d.ts +33 -0
- package/build-types/link/types.d.ts.map +1 -0
- package/build-types/notice/action-link.d.ts +0 -2
- package/build-types/notice/action-link.d.ts.map +1 -1
- package/build-types/notice/description.d.ts +1 -1
- package/build-types/notice/description.d.ts.map +1 -1
- package/build-types/notice/title.d.ts.map +1 -1
- package/build-types/notice/types.d.ts +3 -2
- package/build-types/notice/types.d.ts.map +1 -1
- package/build-types/text/index.d.ts +2 -0
- package/build-types/text/index.d.ts.map +1 -0
- package/build-types/text/stories/index.story.d.ts +9 -0
- package/build-types/text/stories/index.story.d.ts.map +1 -0
- package/build-types/text/test/index.test.d.ts +2 -0
- package/build-types/text/test/index.test.d.ts.map +1 -0
- package/build-types/text/text.d.ts +7 -0
- package/build-types/text/text.d.ts.map +1 -0
- package/build-types/text/types.d.ts +15 -0
- package/build-types/text/types.d.ts.map +1 -0
- package/package.json +11 -11
- package/src/card/content.tsx +20 -0
- package/src/card/full-bleed.tsx +26 -0
- package/src/card/header.tsx +21 -0
- package/src/card/index.ts +7 -0
- package/src/card/root.tsx +42 -0
- package/src/card/stories/index.story.tsx +128 -0
- package/src/card/style.module.css +47 -0
- package/src/card/test/index.test.tsx +96 -0
- package/src/card/title.tsx +22 -0
- package/src/card/types.ts +38 -0
- package/src/collapsible-card/content.tsx +20 -0
- package/src/collapsible-card/header.tsx +71 -0
- package/src/collapsible-card/index.ts +5 -0
- package/src/collapsible-card/root.tsx +37 -0
- package/src/collapsible-card/stories/index.story.tsx +156 -0
- package/src/collapsible-card/style.module.css +37 -0
- package/src/collapsible-card/test/index.test.tsx +207 -0
- package/src/collapsible-card/types.ts +44 -0
- package/src/form/primitives/field/label.tsx +9 -1
- package/src/form/primitives/field/stories/index.story.tsx +17 -0
- package/src/form/primitives/field/test/index.test.tsx +13 -0
- package/src/form/primitives/field/types.ts +7 -0
- package/src/form/primitives/fieldset/legend.tsx +8 -1
- package/src/form/primitives/fieldset/stories/index.story.tsx +20 -0
- package/src/form/primitives/fieldset/test/index.test.tsx +14 -0
- package/src/form/primitives/fieldset/types.ts +7 -0
- package/src/index.ts +4 -0
- package/src/link/index.ts +1 -0
- package/src/link/link.tsx +73 -0
- package/src/link/stories/index.story.tsx +92 -0
- package/src/link/style.module.css +68 -0
- package/src/link/test/index.test.tsx +93 -0
- package/src/link/types.ts +36 -0
- package/src/notice/action-link.tsx +12 -18
- package/src/notice/description.tsx +12 -14
- package/src/notice/style.module.css +9 -22
- package/src/notice/test/index.test.tsx +2 -2
- package/src/notice/title.tsx +11 -10
- package/src/notice/types.ts +3 -2
- package/src/text/index.ts +1 -0
- package/src/text/stories/index.story.tsx +68 -0
- package/src/text/style.module.css +67 -0
- package/src/text/test/index.test.tsx +46 -0
- package/src/text/text.tsx +25 -0
- package/src/text/types.ts +25 -0
- package/src/tooltip/popup.tsx +1 -1
- package/src/visually-hidden/style.module.css +1 -0
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { ContentProps } from './types';
|
|
2
|
+
/**
|
|
3
|
+
* The collapsible content area of the card. Hidden when collapsed,
|
|
4
|
+
* visible when expanded.
|
|
5
|
+
*/
|
|
6
|
+
export declare const Content: import("react").ForwardRefExoticComponent<ContentProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
7
|
+
//# sourceMappingURL=content.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"content.d.ts","sourceRoot":"","sources":["../../src/collapsible-card/content.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C;;;GAGG;AACH,eAAO,MAAM,OAAO,yGAUnB,CAAC"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import type { HeaderProps } from './types';
|
|
2
|
+
/**
|
|
3
|
+
* The header of a collapsible card. Always visible, and acts as the
|
|
4
|
+
* toggle trigger — clicking anywhere on it expands or collapses the
|
|
5
|
+
* card's content.
|
|
6
|
+
*
|
|
7
|
+
* Avoid placing interactive elements (buttons, links, inputs) inside the
|
|
8
|
+
* header, since the entire area is clickable and their events will bubble
|
|
9
|
+
* to trigger the collapse toggle.
|
|
10
|
+
*/
|
|
11
|
+
export declare const Header: import("react").ForwardRefExoticComponent<HeaderProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
12
|
+
//# sourceMappingURL=header.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../src/collapsible-card/header.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C;;;;;;;;GAQG;AACH,eAAO,MAAM,MAAM,wGAkDlB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/collapsible-card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import type { RootProps } from './types';
|
|
2
|
+
/**
|
|
3
|
+
* A card that can be expanded and collapsed. When collapsed, only the
|
|
4
|
+
* header is visible.
|
|
5
|
+
*
|
|
6
|
+
* ```jsx
|
|
7
|
+
* import { CollapsibleCard, Card } from '@wordpress/ui';
|
|
8
|
+
*
|
|
9
|
+
* function MyComponent() {
|
|
10
|
+
* return (
|
|
11
|
+
* <CollapsibleCard.Root defaultOpen>
|
|
12
|
+
* <CollapsibleCard.Header>
|
|
13
|
+
* <Card.Title>Heading</Card.Title>
|
|
14
|
+
* </CollapsibleCard.Header>
|
|
15
|
+
* <CollapsibleCard.Content>
|
|
16
|
+
* <p>Collapsible content here.</p>
|
|
17
|
+
* </CollapsibleCard.Content>
|
|
18
|
+
* </CollapsibleCard.Root>
|
|
19
|
+
* );
|
|
20
|
+
* }
|
|
21
|
+
* ```
|
|
22
|
+
*/
|
|
23
|
+
export declare const Root: import("react").ForwardRefExoticComponent<RootProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
24
|
+
//# sourceMappingURL=root.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"root.d.ts","sourceRoot":"","sources":["../../src/collapsible-card/root.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,IAAI,sGAUhB,CAAC"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import * as CollapsibleCard from '../index';
|
|
3
|
+
declare const meta: Meta<typeof CollapsibleCard.Root>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof CollapsibleCard.Root>;
|
|
6
|
+
/**
|
|
7
|
+
* A collapsible card that is open by default.
|
|
8
|
+
*/
|
|
9
|
+
export declare const Default: Story;
|
|
10
|
+
/**
|
|
11
|
+
* A collapsible card that starts collapsed.
|
|
12
|
+
*/
|
|
13
|
+
export declare const InitiallyOpened: Story;
|
|
14
|
+
/**
|
|
15
|
+
* A disabled collapsible card cannot be toggled by the user.
|
|
16
|
+
*/
|
|
17
|
+
export declare const Disabled: Story;
|
|
18
|
+
/**
|
|
19
|
+
* Visual comparison: a `CollapsibleCard` (open) next to a regular `Card`
|
|
20
|
+
* to verify identical spacing and layout.
|
|
21
|
+
*/
|
|
22
|
+
export declare const ComparedToCard: Story;
|
|
23
|
+
//# sourceMappingURL=index.story.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/collapsible-card/stories/index.story.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,KAAK,eAAe,MAAM,UAAU,CAAC;AAwB5C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,eAAe,CAAC,IAAI,CAO5C,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAE,OAAO,eAAe,CAAC,IAAI,CAAE,CAAC;AAErD;;GAEG;AACH,eAAO,MAAM,OAAO,EAAE,KAqBrB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,KAkB7B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,KAetB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,KA4C5B,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.test.d.ts","sourceRoot":"","sources":["../../../src/collapsible-card/test/index.test.tsx"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
import type { ComponentProps } from '../utils/types';
|
|
3
|
+
export interface RootProps extends ComponentProps<'div'> {
|
|
4
|
+
/**
|
|
5
|
+
* The content to be rendered inside the collapsible card.
|
|
6
|
+
* Should include `CollapsibleCard.Header` and `CollapsibleCard.Content`.
|
|
7
|
+
*/
|
|
8
|
+
children?: ReactNode;
|
|
9
|
+
/**
|
|
10
|
+
* Whether the collapsible panel is currently open (controlled).
|
|
11
|
+
*
|
|
12
|
+
* To render an uncontrolled collapsible card, use `defaultOpen` instead.
|
|
13
|
+
*/
|
|
14
|
+
open?: boolean;
|
|
15
|
+
/**
|
|
16
|
+
* Whether the collapsible panel is initially open (uncontrolled).
|
|
17
|
+
* @default false
|
|
18
|
+
*/
|
|
19
|
+
defaultOpen?: boolean;
|
|
20
|
+
/**
|
|
21
|
+
* Event handler called when the panel is opened or closed.
|
|
22
|
+
*/
|
|
23
|
+
onOpenChange?: (open: boolean) => void;
|
|
24
|
+
/**
|
|
25
|
+
* Whether the component should ignore user interaction.
|
|
26
|
+
* @default false
|
|
27
|
+
*/
|
|
28
|
+
disabled?: boolean;
|
|
29
|
+
}
|
|
30
|
+
export interface HeaderProps extends ComponentProps<'div'> {
|
|
31
|
+
/**
|
|
32
|
+
* The content to be rendered inside the header.
|
|
33
|
+
*/
|
|
34
|
+
children?: ReactNode;
|
|
35
|
+
}
|
|
36
|
+
export interface ContentProps extends ComponentProps<'div'> {
|
|
37
|
+
/**
|
|
38
|
+
* The content to be rendered inside the collapsible content area.
|
|
39
|
+
*/
|
|
40
|
+
children?: ReactNode;
|
|
41
|
+
}
|
|
42
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/collapsible-card/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAErD,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAE,KAAK,CAAE;IACzD;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAE,IAAI,EAAE,OAAO,KAAM,IAAI,CAAC;IACzC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAE,KAAK,CAAE;IAC3D;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAE,KAAK,CAAE;IAC5D;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB"}
|
|
@@ -6,6 +6,7 @@ export declare const Label: import("react").ForwardRefExoticComponent<Omit<Omit<
|
|
|
6
6
|
}) => React.ReactElement<unknown>) | React.ReactElement<Record<string, unknown>>;
|
|
7
7
|
} & {
|
|
8
8
|
children?: _Field.Label.Props["children"];
|
|
9
|
+
hideFromVision?: boolean;
|
|
9
10
|
variant?: "default" | "plain";
|
|
10
11
|
} & import("react").RefAttributes<HTMLLabelElement>>;
|
|
11
12
|
//# sourceMappingURL=label.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"label.d.ts","sourceRoot":"","sources":["../../../../src/form/primitives/field/label.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,IAAI,MAAM,EAAE,MAAM,sBAAsB,CAAC;
|
|
1
|
+
{"version":3,"file":"label.d.ts","sourceRoot":"","sources":["../../../../src/form/primitives/field/label.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,IAAI,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAMvD,eAAO,MAAM,KAAK;;;;;;;;;oDAqBjB,CAAC"}
|
|
@@ -24,6 +24,11 @@ export declare const UsingHtmlFor: StoryObj<typeof Field.Root>;
|
|
|
24
24
|
* label with the control.
|
|
25
25
|
*/
|
|
26
26
|
export declare const UsingAriaLabelledby: StoryObj<typeof Field.Root>;
|
|
27
|
+
/**
|
|
28
|
+
* When `hideFromVision` is set on `Field.Label`, the label is visually
|
|
29
|
+
* hidden but remains accessible to screen readers.
|
|
30
|
+
*/
|
|
31
|
+
export declare const HiddenLabel: StoryObj<typeof Field.Root>;
|
|
27
32
|
/**
|
|
28
33
|
* To add rich content (such as links) to the description, use `Field.Details`.
|
|
29
34
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../../../src/form/primitives/field/stories/index.story.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,KAAK,CAAC,IAAI,CAUlC,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB;;;;GAIG;AACH,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,KAAK,CAAC,IAAI,CAchD,CAAC;AAQF;;;;;;;GAOG;AACH,eAAO,MAAM,YAAY,EAAE,QAAQ,CAAE,OAAO,KAAK,CAAC,IAAI,CAoBrD,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,EAAE,QAAQ,CAAE,OAAO,KAAK,CAAC,IAAI,CAoB5D,CAAC;AAEF;;;;;;;;;GASG;AACH,eAAO,MAAM,WAAW,EAAE,QAAQ,CAAE,OAAO,KAAK,CAAC,IAAI,CAkBpD,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../../../src/form/primitives/field/stories/index.story.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,KAAK,CAAC,IAAI,CAUlC,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB;;;;GAIG;AACH,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,KAAK,CAAC,IAAI,CAchD,CAAC;AAQF;;;;;;;GAOG;AACH,eAAO,MAAM,YAAY,EAAE,QAAQ,CAAE,OAAO,KAAK,CAAC,IAAI,CAoBrD,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,EAAE,QAAQ,CAAE,OAAO,KAAK,CAAC,IAAI,CAoB5D,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,QAAQ,CAAE,OAAO,KAAK,CAAC,IAAI,CAWpD,CAAC;AAEF;;;;;;;;;GASG;AACH,eAAO,MAAM,WAAW,EAAE,QAAQ,CAAE,OAAO,KAAK,CAAC,IAAI,CAkBpD,CAAC"}
|
|
@@ -20,6 +20,13 @@ export type FieldLabelProps = ComponentProps<typeof Field.Label> & {
|
|
|
20
20
|
* elements such as links or buttons.
|
|
21
21
|
*/
|
|
22
22
|
children?: Field.Label.Props['children'];
|
|
23
|
+
/**
|
|
24
|
+
* Whether to visually hide the label while keeping it accessible
|
|
25
|
+
* to screen readers.
|
|
26
|
+
*
|
|
27
|
+
* @default false
|
|
28
|
+
*/
|
|
29
|
+
hideFromVision?: boolean;
|
|
23
30
|
/**
|
|
24
31
|
* The visual variant of the label.
|
|
25
32
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/form/primitives/field/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAE3D,MAAM,MAAM,cAAc,GAAG,IAAI,CAChC,cAAc,CAAE,OAAO,KAAK,CAAC,IAAI,CAAE,EACjC,UAAU,GAEV,OAAO,GACP,SAAS,GACT,SAAS,GACT,UAAU,GACV,wBAAwB,GACxB,gBAAgB,CAClB,GAAG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAE,UAAU,CAAE,CAAC;IAC1C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAE,UAAU,CAAE,CAAC;CAC1C,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,cAAc,CAAE,OAAO,KAAK,CAAC,IAAI,CAAE,GAAG;IAClE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,cAAc,CAAE,OAAO,KAAK,CAAC,KAAK,CAAE,GAAG;IACpE;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAE,UAAU,CAAE,CAAC;IAC3C;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,IAAI,CACnC,cAAc,CAAE,OAAO,KAAK,CAAC,OAAO,CAAE,EACtC,cAAc,CACd,GAAG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK,CAAE,UAAU,CAAE,CAAC;IAC7C;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK,CAAE,cAAc,CAAE,CAAC;CACrD,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,cAAc,CACjD,OAAO,KAAK,CAAC,WAAW,CACxB,GAAG;IACH;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAE,KAAK,CAAE,GAAG;IACzD;;;;;;;;;;OAUG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC"}
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/form/primitives/field/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAE3D,MAAM,MAAM,cAAc,GAAG,IAAI,CAChC,cAAc,CAAE,OAAO,KAAK,CAAC,IAAI,CAAE,EACjC,UAAU,GAEV,OAAO,GACP,SAAS,GACT,SAAS,GACT,UAAU,GACV,wBAAwB,GACxB,gBAAgB,CAClB,GAAG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAE,UAAU,CAAE,CAAC;IAC1C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAE,UAAU,CAAE,CAAC;CAC1C,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,cAAc,CAAE,OAAO,KAAK,CAAC,IAAI,CAAE,GAAG;IAClE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,cAAc,CAAE,OAAO,KAAK,CAAC,KAAK,CAAE,GAAG;IACpE;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAE,UAAU,CAAE,CAAC;IAC3C;;;;;OAKG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,IAAI,CACnC,cAAc,CAAE,OAAO,KAAK,CAAC,OAAO,CAAE,EACtC,cAAc,CACd,GAAG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK,CAAE,UAAU,CAAE,CAAC;IAC7C;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK,CAAE,cAAc,CAAE,CAAC;CACrD,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,cAAc,CACjD,OAAO,KAAK,CAAC,WAAW,CACxB,GAAG;IACH;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAE,KAAK,CAAE,GAAG;IACzD;;;;;;;;;;OAUG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC"}
|
|
@@ -5,5 +5,6 @@ export declare const FieldsetLegend: import("react").ForwardRefExoticComponent<O
|
|
|
5
5
|
}) => React.ReactElement<unknown>) | React.ReactElement<Record<string, unknown>>;
|
|
6
6
|
} & {
|
|
7
7
|
children?: React.ReactNode;
|
|
8
|
+
hideFromVision?: boolean;
|
|
8
9
|
} & import("react").RefAttributes<HTMLDivElement>>;
|
|
9
10
|
//# sourceMappingURL=legend.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"legend.d.ts","sourceRoot":"","sources":["../../../../src/form/primitives/fieldset/legend.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"legend.d.ts","sourceRoot":"","sources":["../../../../src/form/primitives/fieldset/legend.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,cAAc;;;;;;;;kDAgB1B,CAAC"}
|
|
@@ -4,6 +4,11 @@ declare const meta: Meta<typeof Fieldset.Root>;
|
|
|
4
4
|
export default meta;
|
|
5
5
|
type Story = StoryObj<typeof Fieldset.Root>;
|
|
6
6
|
export declare const Default: Story;
|
|
7
|
+
/**
|
|
8
|
+
* When `hideFromVision` is set on `Fieldset.Legend`, the legend is visually
|
|
9
|
+
* hidden but remains accessible to screen readers.
|
|
10
|
+
*/
|
|
11
|
+
export declare const HiddenLegend: Story;
|
|
7
12
|
/**
|
|
8
13
|
* To add rich content (such as links) to the description, use `Fieldset.Details`.
|
|
9
14
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../../../src/form/primitives/fieldset/stories/index.story.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,QAAQ,CAAC,IAAI,CAQrC,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAE,OAAO,QAAQ,CAAC,IAAI,CAAE,CAAC;AAE9C,eAAO,MAAM,OAAO,EAAE,KAiBrB,CAAC;AAEF;;;;;;;;;GASG;AACH,eAAO,MAAM,WAAW,EAAE,KAqBzB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../../../src/form/primitives/fieldset/stories/index.story.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,QAAQ,CAAC,IAAI,CAQrC,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAE,OAAO,QAAQ,CAAC,IAAI,CAAE,CAAC;AAE9C,eAAO,MAAM,OAAO,EAAE,KAiBrB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,YAAY,EAAE,KAc1B,CAAC;AAEF;;;;;;;;;GASG;AACH,eAAO,MAAM,WAAW,EAAE,KAqBzB,CAAC"}
|
|
@@ -5,6 +5,13 @@ export type FieldsetRootProps = ComponentProps<typeof _Fieldset.Root> & {
|
|
|
5
5
|
};
|
|
6
6
|
export type FieldsetLegendProps = ComponentProps<typeof _Fieldset.Legend> & {
|
|
7
7
|
children?: React.ReactNode;
|
|
8
|
+
/**
|
|
9
|
+
* Whether to visually hide the legend while keeping it accessible
|
|
10
|
+
* to screen readers.
|
|
11
|
+
*
|
|
12
|
+
* @default false
|
|
13
|
+
*/
|
|
14
|
+
hideFromVision?: boolean;
|
|
8
15
|
};
|
|
9
16
|
export type FieldsetDescriptionProps = ComponentProps<'p'> & {
|
|
10
17
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/form/primitives/fieldset/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC5D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAE3D,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAE,OAAO,SAAS,CAAC,IAAI,CAAE,GAAG;IACzE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAE,OAAO,SAAS,CAAC,MAAM,CAAE,GAAG;IAC7E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/form/primitives/fieldset/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC5D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAE3D,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAE,OAAO,SAAS,CAAC,IAAI,CAAE,GAAG;IACzE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAE,OAAO,SAAS,CAAC,MAAM,CAAE,GAAG;IAC7E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;;;OAKG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG,cAAc,CAAE,GAAG,CAAE,GAAG;IAC9D;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAE,KAAK,CAAE,GAAG;IAC5D;;;;;;;;;;OAUG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC"}
|
package/build-types/index.d.ts
CHANGED
|
@@ -1,12 +1,16 @@
|
|
|
1
1
|
export * from './badge';
|
|
2
2
|
export * from './button';
|
|
3
|
+
export * as Card from './card';
|
|
4
|
+
export * as CollapsibleCard from './collapsible-card';
|
|
3
5
|
export * as Dialog from './dialog';
|
|
4
6
|
export * from './form/primitives';
|
|
5
7
|
export * from './icon';
|
|
6
8
|
export * from './icon-button';
|
|
9
|
+
export * from './link';
|
|
7
10
|
export * as Notice from './notice';
|
|
8
11
|
export * from './stack';
|
|
9
12
|
export * as Tabs from './tabs';
|
|
13
|
+
export * from './text';
|
|
10
14
|
export * as Tooltip from './tooltip';
|
|
11
15
|
export * from './visually-hidden';
|
|
12
16
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,OAAO,KAAK,MAAM,MAAM,UAAU,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,OAAO,KAAK,MAAM,MAAM,UAAU,CAAC;AACnC,cAAc,SAAS,CAAC;AACxB,OAAO,KAAK,IAAI,MAAM,QAAQ,CAAC;AAC/B,OAAO,KAAK,OAAO,MAAM,WAAW,CAAC;AACrC,cAAc,mBAAmB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,OAAO,KAAK,IAAI,MAAM,QAAQ,CAAC;AAC/B,OAAO,KAAK,eAAe,MAAM,oBAAoB,CAAC;AACtD,OAAO,KAAK,MAAM,MAAM,UAAU,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC;AACvB,OAAO,KAAK,MAAM,MAAM,UAAU,CAAC;AACnC,cAAc,SAAS,CAAC;AACxB,OAAO,KAAK,IAAI,MAAM,QAAQ,CAAC;AAC/B,cAAc,QAAQ,CAAC;AACvB,OAAO,KAAK,OAAO,MAAM,WAAW,CAAC;AACrC,cAAc,mBAAmB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/link/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { type LinkProps } from './types';
|
|
2
|
+
/**
|
|
3
|
+
* A styled anchor element with support for semantic color tones and an
|
|
4
|
+
* unstyled escape hatch.
|
|
5
|
+
*/
|
|
6
|
+
export declare const Link: import("react").ForwardRefExoticComponent<LinkProps & import("react").RefAttributes<HTMLAnchorElement>>;
|
|
7
|
+
//# sourceMappingURL=link.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"link.d.ts","sourceRoot":"","sources":["../../src/link/link.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAKzC;;;GAGG;AACH,eAAO,MAAM,IAAI,yGA2Dd,CAAC"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import { Link } from '../index';
|
|
3
|
+
declare const meta: Meta<typeof Link>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof Link>;
|
|
6
|
+
export declare const Default: Story;
|
|
7
|
+
/**
|
|
8
|
+
* Note: `tone` has no effect on `unstyled` variant
|
|
9
|
+
*/
|
|
10
|
+
export declare const AllTonesAndVariants: Story;
|
|
11
|
+
export declare const Inline: Story;
|
|
12
|
+
/**
|
|
13
|
+
* When composing `Text` and `Link` via the `render` prop, the order matters:
|
|
14
|
+
* - `<Text render={ <Link /> } />` renders an `<a>` element (Link's default tag wins).
|
|
15
|
+
* - `<Link render={ <Text /> } />` renders a `<span>` element (Text's default tag wins).
|
|
16
|
+
*/
|
|
17
|
+
export declare const Standalone: Story;
|
|
18
|
+
//# sourceMappingURL=index.story.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/link/stories/index.story.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAIhC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,IAAI,CAG5B,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAE,OAAO,IAAI,CAAE,CAAC;AAErC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,mBAAmB,EAAE,KA4BjC,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAYpB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,UAAU,EAAE,KAmBxB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.test.d.ts","sourceRoot":"","sources":["../../../src/link/test/index.test.tsx"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { type ReactNode } from 'react';
|
|
2
|
+
import { type ComponentProps } from '../utils/types';
|
|
3
|
+
export interface LinkProps extends Omit<ComponentProps<'a'>, 'target'> {
|
|
4
|
+
/**
|
|
5
|
+
* The visual treatment of the link.
|
|
6
|
+
*
|
|
7
|
+
* - `default`: Applies tone-based color and underline styles.
|
|
8
|
+
* - `unstyled`: Strips all visual styles so consumers can bring their own.
|
|
9
|
+
*
|
|
10
|
+
* @default "default"
|
|
11
|
+
*/
|
|
12
|
+
variant?: 'default' | 'unstyled';
|
|
13
|
+
/**
|
|
14
|
+
* The tone of the link. Tone describes a semantic color intent.
|
|
15
|
+
* Only applies when `variant` is `default`.
|
|
16
|
+
*
|
|
17
|
+
* @default "brand"
|
|
18
|
+
*/
|
|
19
|
+
tone?: 'brand' | 'neutral';
|
|
20
|
+
/**
|
|
21
|
+
* Whether to open the link in a new browser tab.
|
|
22
|
+
* When true, sets `target="_blank"`, appends a visual arrow indicator,
|
|
23
|
+
* and prevents navigation for internal anchors (`#`-prefixed hrefs).
|
|
24
|
+
*
|
|
25
|
+
* @default false
|
|
26
|
+
*/
|
|
27
|
+
openInNewTab?: boolean;
|
|
28
|
+
/**
|
|
29
|
+
* The content to be rendered inside the component.
|
|
30
|
+
*/
|
|
31
|
+
children?: ReactNode;
|
|
32
|
+
}
|
|
33
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/link/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAErD,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAE,cAAc,CAAE,GAAG,CAAE,EAAE,QAAQ,CAAE;IACzE;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IAEjC;;;;;OAKG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAE3B;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB"}
|
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
import type { ActionLinkProps } from './types';
|
|
2
2
|
/**
|
|
3
3
|
* An action link for use within Notice.Actions.
|
|
4
|
-
*
|
|
5
|
-
* TODO: This should use a shared Link component.
|
|
6
4
|
*/
|
|
7
5
|
export declare const ActionLink: import("react").ForwardRefExoticComponent<ActionLinkProps & import("react").RefAttributes<HTMLAnchorElement>>;
|
|
8
6
|
//# sourceMappingURL=action-link.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"action-link.d.ts","sourceRoot":"","sources":["../../src/notice/action-link.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAG/C
|
|
1
|
+
{"version":3,"file":"action-link.d.ts","sourceRoot":"","sources":["../../src/notice/action-link.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAG/C;;GAEG;AACH,eAAO,MAAM,UAAU,+GAYtB,CAAC"}
|
|
@@ -2,5 +2,5 @@ import type { DescriptionProps } from './types';
|
|
|
2
2
|
/**
|
|
3
3
|
* The description text for a notice.
|
|
4
4
|
*/
|
|
5
|
-
export declare const Description: import("react").ForwardRefExoticComponent<DescriptionProps & import("react").RefAttributes<
|
|
5
|
+
export declare const Description: import("react").ForwardRefExoticComponent<DescriptionProps & import("react").RefAttributes<HTMLSpanElement>>;
|
|
6
6
|
//# sourceMappingURL=description.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"description.d.ts","sourceRoot":"","sources":["../../src/notice/description.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"description.d.ts","sourceRoot":"","sources":["../../src/notice/description.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAIhD;;GAEG;AACH,eAAO,MAAM,WAAW,8GAWvB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"title.d.ts","sourceRoot":"","sources":["../../src/notice/title.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"title.d.ts","sourceRoot":"","sources":["../../src/notice/title.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAI1C;;GAEG;AACH,eAAO,MAAM,KAAK,wGAWjB,CAAC"}
|
|
@@ -3,6 +3,7 @@ import type { ComponentProps } from '../utils/types';
|
|
|
3
3
|
import type { IconProps } from '../icon/types';
|
|
4
4
|
import type { ButtonProps } from '../button/types';
|
|
5
5
|
import type { IconButtonProps } from '../icon-button/types';
|
|
6
|
+
import type { LinkProps } from '../link/types';
|
|
6
7
|
export type NoticeIntent = 'warning' | 'success' | 'error' | 'info' | 'neutral';
|
|
7
8
|
export interface RootProps extends Omit<ComponentProps<'div'>, 'title'> {
|
|
8
9
|
/**
|
|
@@ -39,7 +40,7 @@ export interface TitleProps extends ComponentProps<'span'> {
|
|
|
39
40
|
*/
|
|
40
41
|
children?: ReactNode;
|
|
41
42
|
}
|
|
42
|
-
export interface DescriptionProps extends ComponentProps<'
|
|
43
|
+
export interface DescriptionProps extends ComponentProps<'span'> {
|
|
43
44
|
/**
|
|
44
45
|
* The description text of the notice.
|
|
45
46
|
*/
|
|
@@ -68,7 +69,7 @@ export interface ActionButtonProps extends Omit<ButtonProps, 'size' | 'tone'> {
|
|
|
68
69
|
*/
|
|
69
70
|
children?: ReactNode;
|
|
70
71
|
}
|
|
71
|
-
export interface ActionLinkProps extends
|
|
72
|
+
export interface ActionLinkProps extends Omit<LinkProps, 'variant' | 'tone'> {
|
|
72
73
|
/**
|
|
73
74
|
* The content to be rendered inside the component.
|
|
74
75
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/notice/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/notice/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAC5D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE/C,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;AAEhF,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAE,cAAc,CAAE,KAAK,CAAE,EAAE,OAAO,CAAE;IAC1E;;;;;OAKG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IAEtB;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,CAAE,MAAM,CAAE,GAAG,IAAI,CAAC;IAElC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,aAAa,CAAC,EAAE,SAAS,CAAC;IAE1B;;;OAGG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,WAAW,CAAC;CACpC;AAED,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAE,MAAM,CAAE;IAC3D;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CAAE,MAAM,CAAE;IACjE;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAE,KAAK,CAAE;IAC5D;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,cAChB,SAAQ,IAAI,CACX,eAAe,EACb,SAAS,GACT,qBAAqB,GACrB,SAAS,GACT,MAAM,GACN,MAAM,GACN,OAAO,GACP,MAAM,CACR;IACD;;;OAGG;IACH,KAAK,CAAC,EAAE,eAAe,CAAE,OAAO,CAAE,CAAC;IAEnC;;OAEG;IACH,IAAI,CAAC,EAAE,eAAe,CAAE,MAAM,CAAE,CAAC;CACjC;AAED,MAAM,WAAW,iBAChB,SAAQ,IAAI,CAAE,WAAW,EAAE,MAAM,GAAG,MAAM,CAAE;IAC5C;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAE,SAAS,EAAE,SAAS,GAAG,MAAM,CAAE;IAC7E;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/text/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import { Text } from '../index';
|
|
3
|
+
declare const meta: Meta<typeof Text>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof Text>;
|
|
6
|
+
export declare const Default: Story;
|
|
7
|
+
export declare const AllVariants: Story;
|
|
8
|
+
export declare const WithRenderProp: Story;
|
|
9
|
+
//# sourceMappingURL=index.story.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/text/stories/index.story.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAGhC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,IAAI,CAG5B,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAE,OAAO,IAAI,CAAE,CAAC;AAErC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KA6BzB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAe5B,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.test.d.ts","sourceRoot":"","sources":["../../../src/text/test/index.test.tsx"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { type TextProps } from './types';
|
|
2
|
+
/**
|
|
3
|
+
* A text component for rendering content with predefined typographic variants.
|
|
4
|
+
* Built on design tokens for consistent typography across the UI.
|
|
5
|
+
*/
|
|
6
|
+
export declare const Text: import("react").ForwardRefExoticComponent<TextProps & import("react").RefAttributes<HTMLSpanElement>>;
|
|
7
|
+
//# sourceMappingURL=text.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../src/text/text.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAGzC;;;GAGG;AACH,eAAO,MAAM,IAAI,uGAcd,CAAC"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { type ComponentProps } from '../utils/types';
|
|
2
|
+
export interface TextProps extends ComponentProps<'span'> {
|
|
3
|
+
/**
|
|
4
|
+
* The typographic variant to apply, controlling font family, size,
|
|
5
|
+
* line height, and weight.
|
|
6
|
+
*
|
|
7
|
+
* @default "body-md"
|
|
8
|
+
*/
|
|
9
|
+
variant?: 'heading-2xl' | 'heading-xl' | 'heading-lg' | 'heading-md' | 'heading-sm' | 'body-xl' | 'body-lg' | 'body-md' | 'body-sm';
|
|
10
|
+
/**
|
|
11
|
+
* The content to be rendered inside the component.
|
|
12
|
+
*/
|
|
13
|
+
children?: React.ReactNode;
|
|
14
|
+
}
|
|
15
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/text/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAErD,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAE,MAAM,CAAE;IAC1D;;;;;OAKG;IACH,OAAO,CAAC,EACL,aAAa,GACb,YAAY,GACZ,YAAY,GACZ,YAAY,GACZ,YAAY,GACZ,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,CAAC;IAEb;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wordpress/ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.9.1-next.v.202603102151.0+59e17f9ec",
|
|
4
4
|
"description": "Themeable React UI components for the WordPress Design System.",
|
|
5
5
|
"author": "The WordPress Contributors",
|
|
6
6
|
"license": "GPL-2.0-or-later",
|
|
@@ -44,15 +44,15 @@
|
|
|
44
44
|
"sideEffects": false,
|
|
45
45
|
"dependencies": {
|
|
46
46
|
"@base-ui/react": "^1.2.0",
|
|
47
|
-
"@wordpress/a11y": "^4.41.0",
|
|
48
|
-
"@wordpress/compose": "^7.41.0",
|
|
49
|
-
"@wordpress/element": "^6.41.0",
|
|
50
|
-
"@wordpress/i18n": "^6.14.0",
|
|
51
|
-
"@wordpress/icons": "^
|
|
52
|
-
"@wordpress/keycodes": "^4.41.0",
|
|
53
|
-
"@wordpress/primitives": "^4.41.0",
|
|
54
|
-
"@wordpress/private-apis": "^1.41.0",
|
|
55
|
-
"@wordpress/theme": "^0.8.0",
|
|
47
|
+
"@wordpress/a11y": "^4.41.1-next.v.202603102151.0+59e17f9ec",
|
|
48
|
+
"@wordpress/compose": "^7.41.1-next.v.202603102151.0+59e17f9ec",
|
|
49
|
+
"@wordpress/element": "^6.41.1-next.v.202603102151.0+59e17f9ec",
|
|
50
|
+
"@wordpress/i18n": "^6.14.1-next.v.202603102151.0+59e17f9ec",
|
|
51
|
+
"@wordpress/icons": "^12.0.1-next.v.202603102151.0+59e17f9ec",
|
|
52
|
+
"@wordpress/keycodes": "^4.41.1-next.v.202603102151.0+59e17f9ec",
|
|
53
|
+
"@wordpress/primitives": "^4.41.1-next.v.202603102151.0+59e17f9ec",
|
|
54
|
+
"@wordpress/private-apis": "^1.41.1-next.v.202603102151.0+59e17f9ec",
|
|
55
|
+
"@wordpress/theme": "^0.8.1-next.v.202603102151.0+59e17f9ec",
|
|
56
56
|
"clsx": "^2.1.1"
|
|
57
57
|
},
|
|
58
58
|
"devDependencies": {
|
|
@@ -70,5 +70,5 @@
|
|
|
70
70
|
"publishConfig": {
|
|
71
71
|
"access": "public"
|
|
72
72
|
},
|
|
73
|
-
"gitHead": "
|
|
73
|
+
"gitHead": "86db21e727d89e8f0dbba9300d2f97fd22b08693"
|
|
74
74
|
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { mergeProps, useRender } from '@base-ui/react';
|
|
2
|
+
import { forwardRef } from '@wordpress/element';
|
|
3
|
+
import styles from './style.module.css';
|
|
4
|
+
import type { ContentProps } from './types';
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* The main content area of the card.
|
|
8
|
+
*/
|
|
9
|
+
export const Content = forwardRef< HTMLDivElement, ContentProps >(
|
|
10
|
+
function CardContent( { render, ...props }, ref ) {
|
|
11
|
+
const element = useRender( {
|
|
12
|
+
defaultTagName: 'div',
|
|
13
|
+
render,
|
|
14
|
+
ref,
|
|
15
|
+
props: mergeProps< 'div' >( { className: styles.content }, props ),
|
|
16
|
+
} );
|
|
17
|
+
|
|
18
|
+
return element;
|
|
19
|
+
}
|
|
20
|
+
);
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { mergeProps, useRender } from '@base-ui/react';
|
|
2
|
+
import { forwardRef } from '@wordpress/element';
|
|
3
|
+
import styles from './style.module.css';
|
|
4
|
+
import type { FullBleedProps } from './types';
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* A container that breaks out of the card's padding to span edge-to-edge.
|
|
8
|
+
* Useful for full-width images, dividers, or embedded content.
|
|
9
|
+
*
|
|
10
|
+
* Must be used as a direct child of `Card.Content` or `Card.Header`.
|
|
11
|
+
*/
|
|
12
|
+
export const FullBleed = forwardRef< HTMLDivElement, FullBleedProps >(
|
|
13
|
+
function CardFullBleed( { render, ...props }, ref ) {
|
|
14
|
+
const element = useRender( {
|
|
15
|
+
defaultTagName: 'div',
|
|
16
|
+
render,
|
|
17
|
+
ref,
|
|
18
|
+
props: mergeProps< 'div' >(
|
|
19
|
+
{ className: styles.fullbleed },
|
|
20
|
+
props
|
|
21
|
+
),
|
|
22
|
+
} );
|
|
23
|
+
|
|
24
|
+
return element;
|
|
25
|
+
}
|
|
26
|
+
);
|