@arctura/atomics 0.0.1
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/dist/hooks.cjs +1 -0
- package/dist/hooks.js +2 -0
- package/dist/index.cjs +1 -0
- package/dist/index.js +1980 -0
- package/dist/lib/hooks.d.ts +5 -0
- package/dist/lib/hooks.d.ts.map +1 -0
- package/dist/lib/index.d.ts +6 -0
- package/dist/lib/index.d.ts.map +1 -0
- package/dist/lib/useBreakpoints.d.ts +48 -0
- package/dist/lib/useBreakpoints.d.ts.map +1 -0
- package/dist/lib/useControlled.d.ts +38 -0
- package/dist/lib/useControlled.d.ts.map +1 -0
- package/dist/src/badge/Badge.d.ts +116 -0
- package/dist/src/badge/Badge.d.ts.map +1 -0
- package/dist/src/badge/index.d.ts +3 -0
- package/dist/src/badge/index.d.ts.map +1 -0
- package/dist/src/buttons/Button.d.ts +126 -0
- package/dist/src/buttons/Button.d.ts.map +1 -0
- package/dist/src/buttons/Fab.d.ts +114 -0
- package/dist/src/buttons/Fab.d.ts.map +1 -0
- package/dist/src/buttons/IconButton.d.ts +105 -0
- package/dist/src/buttons/IconButton.d.ts.map +1 -0
- package/dist/src/buttons/index.d.ts +9 -0
- package/dist/src/buttons/index.d.ts.map +1 -0
- package/dist/src/card/Card.d.ts +35 -0
- package/dist/src/card/Card.d.ts.map +1 -0
- package/dist/src/card/Footer.d.ts +67 -0
- package/dist/src/card/Footer.d.ts.map +1 -0
- package/dist/src/card/Header.d.ts +56 -0
- package/dist/src/card/Header.d.ts.map +1 -0
- package/dist/src/card/Media.d.ts +65 -0
- package/dist/src/card/Media.d.ts.map +1 -0
- package/dist/src/card/index.d.ts +11 -0
- package/dist/src/card/index.d.ts.map +1 -0
- package/dist/src/carousel/Carousel.d.ts +124 -0
- package/dist/src/carousel/Carousel.d.ts.map +1 -0
- package/dist/src/carousel/Hero.d.ts +156 -0
- package/dist/src/carousel/Hero.d.ts.map +1 -0
- package/dist/src/carousel/index.d.ts +4 -0
- package/dist/src/carousel/index.d.ts.map +1 -0
- package/dist/src/drawer/Drawer.d.ts +40 -0
- package/dist/src/drawer/Drawer.d.ts.map +1 -0
- package/dist/src/drawer/index.d.ts +5 -0
- package/dist/src/drawer/index.d.ts.map +1 -0
- package/dist/src/form/Form.d.ts +168 -0
- package/dist/src/form/Form.d.ts.map +1 -0
- package/dist/src/form/TextArea.d.ts +266 -0
- package/dist/src/form/TextArea.d.ts.map +1 -0
- package/dist/src/form/TextInput.d.ts +200 -0
- package/dist/src/form/TextInput.d.ts.map +1 -0
- package/dist/src/form/index.d.ts +7 -0
- package/dist/src/form/index.d.ts.map +1 -0
- package/dist/src/index.d.ts +21 -0
- package/dist/src/index.d.ts.map +1 -0
- package/dist/src/list/List.d.ts +122 -0
- package/dist/src/list/List.d.ts.map +1 -0
- package/dist/src/list/ListItem.d.ts +157 -0
- package/dist/src/list/ListItem.d.ts.map +1 -0
- package/dist/src/list/index.d.ts +6 -0
- package/dist/src/list/index.d.ts.map +1 -0
- package/dist/src/progress-stepper/Connector.d.ts +48 -0
- package/dist/src/progress-stepper/Connector.d.ts.map +1 -0
- package/dist/src/progress-stepper/Node.d.ts +75 -0
- package/dist/src/progress-stepper/Node.d.ts.map +1 -0
- package/dist/src/progress-stepper/ProgressStepper.d.ts +108 -0
- package/dist/src/progress-stepper/ProgressStepper.d.ts.map +1 -0
- package/dist/src/progress-stepper/Step.d.ts +93 -0
- package/dist/src/progress-stepper/Step.d.ts.map +1 -0
- package/dist/src/progress-stepper/index.d.ts +10 -0
- package/dist/src/progress-stepper/index.d.ts.map +1 -0
- package/dist/src/select/Select.d.ts +98 -0
- package/dist/src/select/Select.d.ts.map +1 -0
- package/dist/src/select/index.d.ts +5 -0
- package/dist/src/select/index.d.ts.map +1 -0
- package/dist/src/typography/Link.d.ts +86 -0
- package/dist/src/typography/Link.d.ts.map +1 -0
- package/dist/src/typography/Typography.d.ts +148 -0
- package/dist/src/typography/Typography.d.ts.map +1 -0
- package/dist/src/typography/index.d.ts +7 -0
- package/dist/src/typography/index.d.ts.map +1 -0
- package/dist/src/utils/capitalize.d.ts +3 -0
- package/dist/src/utils/capitalize.d.ts.map +1 -0
- package/dist/src/utils/index.d.ts +2 -0
- package/dist/src/utils/index.d.ts.map +1 -0
- package/dist/useBreakpoints-CXOalIdM.js +37 -0
- package/dist/useBreakpoints-nd-Blu7O.cjs +1 -0
- package/package.json +67 -0
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { Badge } from './badge';
|
|
2
|
+
import { Button, Fab, IconButton } from './buttons';
|
|
3
|
+
import type { ButtonAdornment, ButtonClasses, ButtonVariant, IconButtonClasses, IconButtonVariant, FabClasses } from './buttons';
|
|
4
|
+
import { Card, Header as CardHeader, Media as CardMedia, Footer as CardFooter } from './card';
|
|
5
|
+
import type { FooterAction } from './card';
|
|
6
|
+
import { Carousel, Hero } from './carousel';
|
|
7
|
+
import { Drawer } from './drawer';
|
|
8
|
+
import type { DrawerClasses } from './drawer';
|
|
9
|
+
import { Form, TextArea, TextInput } from './form';
|
|
10
|
+
import type { FormValue } from './form';
|
|
11
|
+
import { List, ListItem } from './list';
|
|
12
|
+
import type { Item } from './list';
|
|
13
|
+
import { Connector, ProgressStepper, Step } from './progress-stepper';
|
|
14
|
+
import type { ConnectorClasses, ProgressStepperClasses, StepClasses, StepType } from './progress-stepper';
|
|
15
|
+
import { Select } from './select';
|
|
16
|
+
import type { SelectClasses } from './select';
|
|
17
|
+
import { Link, Typography } from './typography';
|
|
18
|
+
import type { HeadingVariant, LinkClasses, ParagraphVariant, TypographyColor, TypographyVariant } from './typography';
|
|
19
|
+
export { Badge, Button, Card, CardHeader, CardMedia, CardFooter, Connector, Drawer, Fab, Form, Hero, Carousel, IconButton, List, ListItem, Link, ProgressStepper, Select, Step, TextArea, TextInput, Typography, };
|
|
20
|
+
export type { ButtonAdornment, ButtonClasses, ButtonVariant, ConnectorClasses, IconButtonClasses, IconButtonVariant, FabClasses, DrawerClasses, LinkClasses, Item, FormValue, HeadingVariant, ParagraphVariant, TypographyColor, TypographyVariant, ProgressStepperClasses, SelectClasses, StepClasses, StepType, FooterAction, };
|
|
21
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AACpD,OAAO,KAAK,EACV,eAAe,EACf,aAAa,EACb,aAAa,EACb,iBAAiB,EACjB,iBAAiB,EACjB,UAAU,EACX,MAAM,WAAW,CAAC;AACnB,OAAO,EAAE,IAAI,EAAE,MAAM,IAAI,UAAU,EAAE,KAAK,IAAI,SAAS,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,QAAQ,CAAC;AAC9F,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAC9C,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACnD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AACnC,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AACtE,OAAO,KAAK,EACV,gBAAgB,EAChB,sBAAsB,EACtB,WAAW,EACX,QAAQ,EACT,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAC9C,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAChD,OAAO,KAAK,EACV,cAAc,EACd,WAAW,EACX,gBAAgB,EAChB,eAAe,EACf,iBAAiB,EAClB,MAAM,cAAc,CAAC;AAEtB,OAAO,EACL,KAAK,EACL,MAAM,EACN,IAAI,EACJ,UAAU,EACV,SAAS,EACT,UAAU,EACV,SAAS,EACT,MAAM,EACN,GAAG,EACH,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,UAAU,EACV,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,eAAe,EACf,MAAM,EACN,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,UAAU,GACX,CAAC;AAEF,YAAY,EACV,eAAe,EACf,aAAa,EACb,aAAa,EACb,gBAAgB,EAChB,iBAAiB,EACjB,iBAAiB,EACjB,UAAU,EACV,aAAa,EACb,WAAW,EACX,IAAI,EACJ,SAAS,EACT,cAAc,EACd,gBAAgB,EAChB,eAAe,EACf,iBAAiB,EACjB,sBAAsB,EACtB,aAAa,EACb,WAAW,EACX,QAAQ,EACR,YAAY,GACb,CAAC"}
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
import type { JSX, HTMLAttributes, OlHTMLAttributes, ReactNode, Ref } from 'react';
|
|
2
|
+
/** Supported colors for list adornments. */
|
|
3
|
+
type ListAdornmentColor = 'accent' | 'black' | 'danger' | 'error' | 'info' | 'inverse' | 'primary' | 'secondary' | 'success' | 'subtle' | 'warning' | 'white';
|
|
4
|
+
/** Status variants that can be forwarded to list items. */
|
|
5
|
+
type ListStatus = 'error' | 'info' | 'success' | 'warning';
|
|
6
|
+
/** Background variants for the list container. */
|
|
7
|
+
type ListBackground = 'primary' | 'secondary' | 'subtle' | 'inverse';
|
|
8
|
+
/** Text and surface colors supported by the list container. */
|
|
9
|
+
type ListColor = 'accent' | 'black' | 'inverse' | 'primary' | 'secondary' | 'subtle' | 'white';
|
|
10
|
+
/** Internal list item shape used to track selection state. */
|
|
11
|
+
interface ListItem {
|
|
12
|
+
/** Stable identifier assigned while walking the nested children tree. */
|
|
13
|
+
key?: string;
|
|
14
|
+
/** Human-readable label for the item. */
|
|
15
|
+
label?: string;
|
|
16
|
+
/** Whether the item is currently selected. */
|
|
17
|
+
selected?: boolean;
|
|
18
|
+
/** Backing value associated with the item. */
|
|
19
|
+
value?: string | number;
|
|
20
|
+
}
|
|
21
|
+
/** Public item payload emitted to consumers. */
|
|
22
|
+
type Item = Omit<ListItem, 'selected'>;
|
|
23
|
+
/** Shared props supported by all list render targets. */
|
|
24
|
+
interface BaseProps {
|
|
25
|
+
/** Render target to use for the outer list wrapper. */
|
|
26
|
+
as?: 'ul' | 'ol' | 'div';
|
|
27
|
+
/** Color token used for item adornments. */
|
|
28
|
+
adornmentColor?: ListAdornmentColor;
|
|
29
|
+
/** Background token for the list container. */
|
|
30
|
+
background?: ListBackground;
|
|
31
|
+
/** Nested content used to discover and render list items. */
|
|
32
|
+
children?: ReactNode;
|
|
33
|
+
/** Additional class names merged onto the wrapper. */
|
|
34
|
+
className?: string;
|
|
35
|
+
/** Color token applied to text and item accents. */
|
|
36
|
+
color?: ListColor;
|
|
37
|
+
/** Compact spacing mode for dense layouts. */
|
|
38
|
+
compact?: boolean;
|
|
39
|
+
/** Whether to render dividers between items. */
|
|
40
|
+
divider?: boolean;
|
|
41
|
+
/** Whether the list and its items are disabled. */
|
|
42
|
+
disabled?: boolean;
|
|
43
|
+
/** Whether the wrapper should expand to the full available width. */
|
|
44
|
+
fullWidth?: boolean;
|
|
45
|
+
/** Element type to render for nested list items. */
|
|
46
|
+
itemsAs?: 'a' | 'div' | 'li';
|
|
47
|
+
/** Callback fired when the selected item set changes. */
|
|
48
|
+
onChange?: (selectedItems: Item[]) => void;
|
|
49
|
+
/** Whether list items can be selected. */
|
|
50
|
+
selectable?: boolean;
|
|
51
|
+
/** Size token controlling the wrapper width. */
|
|
52
|
+
size?: 'sm' | 'md' | 'lg';
|
|
53
|
+
/** Status token forwarded to child items. */
|
|
54
|
+
status?: ListStatus;
|
|
55
|
+
/** Controlled value used to seed or manage selected items. */
|
|
56
|
+
value?: ListItem[];
|
|
57
|
+
}
|
|
58
|
+
/** Props for rendering the list as a div. */
|
|
59
|
+
interface DivProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
|
|
60
|
+
/** Optional ref forwarded to the div wrapper. */
|
|
61
|
+
ref?: Ref<HTMLDivElement>;
|
|
62
|
+
/** Accessible role for the div wrapper. */
|
|
63
|
+
role?: JSX.IntrinsicElements['div']['role'];
|
|
64
|
+
}
|
|
65
|
+
/** Props for rendering the list as an ordered list. */
|
|
66
|
+
interface OlProps extends Omit<OlHTMLAttributes<HTMLOListElement>, 'onChange'> {
|
|
67
|
+
/** Optional ref forwarded to the ordered list wrapper. */
|
|
68
|
+
ref?: Ref<HTMLOListElement>;
|
|
69
|
+
/** Accessible role for the ordered list wrapper. */
|
|
70
|
+
role?: JSX.IntrinsicElements['ol']['role'];
|
|
71
|
+
}
|
|
72
|
+
/** Props for rendering the list as an unordered list. */
|
|
73
|
+
interface UlProps extends Omit<HTMLAttributes<HTMLUListElement>, 'onChange'> {
|
|
74
|
+
/** Optional ref forwarded to the unordered list wrapper. */
|
|
75
|
+
ref?: Ref<HTMLUListElement>;
|
|
76
|
+
/** Accessible role for the unordered list wrapper. */
|
|
77
|
+
role?: JSX.IntrinsicElements['ul']['role'];
|
|
78
|
+
}
|
|
79
|
+
/**
|
|
80
|
+
* Renders a selectable list container that can behave like a `ul`, `ol`, or
|
|
81
|
+
* `div` while discovering nested `ListItem` children and wiring selection
|
|
82
|
+
* state for them.
|
|
83
|
+
*
|
|
84
|
+
* The component supports controlled and uncontrolled selection, optional
|
|
85
|
+
* divider display, responsive width tokens, and item-level presentation
|
|
86
|
+
* variants such as adornment color, background, status, and disabled state.
|
|
87
|
+
* It is intended to wrap `ListItem` children and propagate the interaction
|
|
88
|
+
* props needed for consistent list behavior across the design system.
|
|
89
|
+
*
|
|
90
|
+
* @example
|
|
91
|
+
* ```tsx
|
|
92
|
+
* import { List } from '@/src';
|
|
93
|
+
* import { ListItem } from '@/src';
|
|
94
|
+
*
|
|
95
|
+
* export function Example() {
|
|
96
|
+
* return (
|
|
97
|
+
* <List
|
|
98
|
+
* as="ul"
|
|
99
|
+
* selectable
|
|
100
|
+
* fullWidth
|
|
101
|
+
* size="md"
|
|
102
|
+
* onChange={(selectedItems) => {
|
|
103
|
+
* console.log('Selected items:', selectedItems);
|
|
104
|
+
* }}
|
|
105
|
+
* >
|
|
106
|
+
* <ListItem label="Overview" value="overview" selected />
|
|
107
|
+
* <ListItem label="Projects" value="projects" />
|
|
108
|
+
* <ListItem label="Contact" value="contact" />
|
|
109
|
+
* </List>
|
|
110
|
+
* );
|
|
111
|
+
* }
|
|
112
|
+
* ```
|
|
113
|
+
*/
|
|
114
|
+
declare function List(props: DivProps & BaseProps): JSX.Element;
|
|
115
|
+
declare function List(props: OlProps & BaseProps): JSX.Element;
|
|
116
|
+
declare function List(props: UlProps & BaseProps): JSX.Element;
|
|
117
|
+
declare namespace List {
|
|
118
|
+
var displayName: string;
|
|
119
|
+
}
|
|
120
|
+
export { List };
|
|
121
|
+
export type { Item };
|
|
122
|
+
//# sourceMappingURL=List.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../src/list/List.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,157 @@
|
|
|
1
|
+
import type { AnchorHTMLAttributes, HTMLAttributes, JSX, KeyboardEvent, LiHTMLAttributes, MouseEvent, Ref } from 'react';
|
|
2
|
+
import type { IconDefinition } from '@fortawesome/free-solid-svg-icons';
|
|
3
|
+
import type { TypographyColor } from '@/src/typography';
|
|
4
|
+
/** Either an icon definition or an image source used for the leading adornment. */
|
|
5
|
+
type ListItemAdornment = IconDefinition | {
|
|
6
|
+
src: string;
|
|
7
|
+
alt?: string;
|
|
8
|
+
};
|
|
9
|
+
/** Color tokens available for the list item adornment. */
|
|
10
|
+
type ListItemAdornmentColor = 'accent' | 'black' | 'danger' | 'error' | 'info' | 'inverse' | 'primary' | 'secondary' | 'success' | 'subtle' | 'warning' | 'white';
|
|
11
|
+
/** Status tokens that influence the item accent color. */
|
|
12
|
+
type ListItemStatus = 'success' | 'warning' | 'error' | 'info';
|
|
13
|
+
/** Optional class name hooks for the item sub-elements. */
|
|
14
|
+
interface ListItemClasses {
|
|
15
|
+
/** Class names applied to the adornment element. */
|
|
16
|
+
adornment?: string;
|
|
17
|
+
/** Class names applied to the interactive root element. */
|
|
18
|
+
button?: string;
|
|
19
|
+
/** Class names applied to the text content wrapper. */
|
|
20
|
+
children?: string;
|
|
21
|
+
/** Class names applied to the inner container row. */
|
|
22
|
+
container?: string;
|
|
23
|
+
/** Class names applied to the outer root element. */
|
|
24
|
+
root?: string;
|
|
25
|
+
/** Class names applied to the label text. */
|
|
26
|
+
label?: string;
|
|
27
|
+
/** Class names applied to the title text. */
|
|
28
|
+
title?: string;
|
|
29
|
+
}
|
|
30
|
+
/** Shared props that control the visual and behavioral state of a list item. */
|
|
31
|
+
interface BaseProps {
|
|
32
|
+
/** Element type to render for the wrapper. */
|
|
33
|
+
as?: 'a' | 'div' | 'li';
|
|
34
|
+
/** Optional leading adornment. */
|
|
35
|
+
adornment?: ListItemAdornment;
|
|
36
|
+
/** Color token used for the adornment. */
|
|
37
|
+
adornmentColor?: ListItemAdornmentColor;
|
|
38
|
+
/** Custom class names for item sub-elements. */
|
|
39
|
+
classes?: ListItemClasses;
|
|
40
|
+
/** Text color used by the title and label typography. */
|
|
41
|
+
color?: TypographyColor;
|
|
42
|
+
/** Whether the item should start selected when uncontrolled. */
|
|
43
|
+
defaultSelected?: boolean;
|
|
44
|
+
/** Whether the item is disabled. */
|
|
45
|
+
disabled?: boolean;
|
|
46
|
+
/** Whether to render a separator below the item. */
|
|
47
|
+
divider?: boolean;
|
|
48
|
+
/** Whether this item is the first rendered item. */
|
|
49
|
+
firstIndex?: boolean;
|
|
50
|
+
/** Destination URL used when rendering as a link. */
|
|
51
|
+
href?: string;
|
|
52
|
+
/** Primary text shown for the item. */
|
|
53
|
+
label?: string;
|
|
54
|
+
/** Whether this item is the last rendered item. */
|
|
55
|
+
lastIndex?: boolean;
|
|
56
|
+
/** Whether the item can be selected. */
|
|
57
|
+
selectable?: boolean;
|
|
58
|
+
/** Status token that overrides or reinforces the adornment color. */
|
|
59
|
+
status?: ListItemStatus;
|
|
60
|
+
/** Keyboard focus order when the item is selectable. */
|
|
61
|
+
tabIndex?: number;
|
|
62
|
+
/** Optional secondary heading shown above the label. */
|
|
63
|
+
title?: string;
|
|
64
|
+
/** Controlled selected state. */
|
|
65
|
+
selected?: boolean;
|
|
66
|
+
/** Value associated with this item for selection tracking. */
|
|
67
|
+
value?: string | number;
|
|
68
|
+
}
|
|
69
|
+
/** Props used when the item renders as an anchor. */
|
|
70
|
+
interface AnchorProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
|
|
71
|
+
/** Destination URL for the anchor. */
|
|
72
|
+
href?: string;
|
|
73
|
+
/** Click handler for the anchor variant. */
|
|
74
|
+
onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
|
|
75
|
+
/** Keyboard handler for the anchor variant. */
|
|
76
|
+
onKeyDown?: (event: KeyboardEvent<HTMLAnchorElement>) => void;
|
|
77
|
+
/** Optional ref forwarded to the anchor element. */
|
|
78
|
+
ref?: Ref<HTMLAnchorElement>;
|
|
79
|
+
/** Accessible role for the anchor element. */
|
|
80
|
+
role?: JSX.IntrinsicElements['a']['role'];
|
|
81
|
+
/** Optional target for the anchor element. */
|
|
82
|
+
target?: string;
|
|
83
|
+
}
|
|
84
|
+
/** Props used when the item renders as a div. */
|
|
85
|
+
interface DivProps extends HTMLAttributes<HTMLDivElement> {
|
|
86
|
+
/** Disallowed in the div variant. */
|
|
87
|
+
href?: never;
|
|
88
|
+
/** Click handler for the div variant. */
|
|
89
|
+
onClick?: (event: MouseEvent<HTMLDivElement>) => void;
|
|
90
|
+
/** Keyboard handler for the div variant. */
|
|
91
|
+
onKeyDown?: (event: KeyboardEvent<HTMLDivElement>) => void;
|
|
92
|
+
/** Optional ref forwarded to the div element. */
|
|
93
|
+
ref?: Ref<HTMLDivElement>;
|
|
94
|
+
/** Accessible role for the div element. */
|
|
95
|
+
role?: JSX.IntrinsicElements['div']['role'];
|
|
96
|
+
/** Disallowed in the div variant. */
|
|
97
|
+
target?: never;
|
|
98
|
+
}
|
|
99
|
+
/** Props used when the item renders as a list item. */
|
|
100
|
+
interface LiProps extends LiHTMLAttributes<HTMLLIElement> {
|
|
101
|
+
/** Disallowed in the li variant. */
|
|
102
|
+
href?: never;
|
|
103
|
+
/** Click handler for the li variant. */
|
|
104
|
+
onClick?: (event: MouseEvent<HTMLLIElement>) => void;
|
|
105
|
+
/** Keyboard handler for the li variant. */
|
|
106
|
+
onKeyDown?: (event: KeyboardEvent<HTMLLIElement>) => void;
|
|
107
|
+
/** Optional ref forwarded to the li element. */
|
|
108
|
+
ref?: Ref<HTMLLIElement>;
|
|
109
|
+
/** Accessible role for the li element. */
|
|
110
|
+
role?: JSX.IntrinsicElements['li']['role'];
|
|
111
|
+
/** Disallowed in the li variant. */
|
|
112
|
+
target?: never;
|
|
113
|
+
}
|
|
114
|
+
/**
|
|
115
|
+
* Renders a list item that can behave as a link, div, or native `li` while
|
|
116
|
+
* supporting selection state, optional adornments, and design-system text
|
|
117
|
+
* styling.
|
|
118
|
+
*
|
|
119
|
+
* The component is typically rendered inside `List`, which can wire up
|
|
120
|
+
* selection and divider behavior automatically. `ListItem` itself handles the
|
|
121
|
+
* visual structure, including optional title/label text, adornment rendering,
|
|
122
|
+
* and the styling for selected or disabled states.
|
|
123
|
+
*
|
|
124
|
+
* @example
|
|
125
|
+
* ```tsx
|
|
126
|
+
* import { ListItem } from '@/src/list/ListItem';
|
|
127
|
+
*
|
|
128
|
+
* export function Example() {
|
|
129
|
+
* return (
|
|
130
|
+
* <ul>
|
|
131
|
+
* <ListItem
|
|
132
|
+
* as="li"
|
|
133
|
+
* title="Projects"
|
|
134
|
+
* label="See the latest work"
|
|
135
|
+
* value="projects"
|
|
136
|
+
* selected
|
|
137
|
+
* />
|
|
138
|
+
* <ListItem
|
|
139
|
+
* as="a"
|
|
140
|
+
* href="/contact"
|
|
141
|
+
* title="Contact"
|
|
142
|
+
* label="Start a conversation"
|
|
143
|
+
* adornment={{ src: '/images/avatar.png', alt: 'Profile avatar' }}
|
|
144
|
+
* />
|
|
145
|
+
* </ul>
|
|
146
|
+
* );
|
|
147
|
+
* }
|
|
148
|
+
* ```
|
|
149
|
+
*/
|
|
150
|
+
declare function ListItem(props: AnchorProps & BaseProps): JSX.Element;
|
|
151
|
+
declare function ListItem(props: DivProps & BaseProps): JSX.Element;
|
|
152
|
+
declare function ListItem(props: LiProps & BaseProps): JSX.Element;
|
|
153
|
+
declare namespace ListItem {
|
|
154
|
+
var displayName: string;
|
|
155
|
+
}
|
|
156
|
+
export { ListItem };
|
|
157
|
+
//# sourceMappingURL=ListItem.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../src/list/ListItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,oBAAoB,EACpB,cAAc,EACd,GAAG,EACH,aAAa,EACb,gBAAgB,EAChB,UAAU,EACV,GAAG,EACJ,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAKxE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAGxD,mFAAmF;AACnF,KAAK,iBAAiB,GAAG,cAAc,GAAG;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAExE,0DAA0D;AAC1D,KAAK,sBAAsB,GACvB,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,OAAO,GACP,MAAM,GACN,SAAS,GACT,SAAS,GACT,WAAW,GACX,SAAS,GACT,QAAQ,GACR,SAAS,GACT,OAAO,CAAC;AAEZ,0DAA0D;AAC1D,KAAK,cAAc,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAE/D,2DAA2D;AAC3D,UAAU,eAAe;IACvB,oDAAoD;IACpD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2DAA2D;IAC3D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qDAAqD;IACrD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,gFAAgF;AAChF,UAAU,SAAS;IACjB,8CAA8C;IAC9C,EAAE,CAAC,EAAE,GAAG,GAAG,KAAK,GAAG,IAAI,CAAC;IACxB,kCAAkC;IAClC,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,0CAA0C;IAC1C,cAAc,CAAC,EAAE,sBAAsB,CAAC;IACxC,gDAAgD;IAChD,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,yDAAyD;IACzD,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,gEAAgE;IAChE,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oDAAoD;IACpD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oDAAoD;IACpD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qDAAqD;IACrD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uCAAuC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,wCAAwC;IACxC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qEAAqE;IACrE,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,wDAAwD;IACxD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED,qDAAqD;AACrD,UAAU,WAAY,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IACnE,sCAAsC;IACtC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4CAA4C;IAC5C,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACzD,+CAA+C;IAC/C,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC9D,oDAAoD;IACpD,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAC7B,8CAA8C;IAC9C,IAAI,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC;IAC1C,8CAA8C;IAC9C,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,iDAAiD;AACjD,UAAU,QAAS,SAAQ,cAAc,CAAC,cAAc,CAAC;IACvD,qCAAqC;IACrC,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,yCAAyC;IACzC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IACtD,4CAA4C;IAC5C,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAC3D,iDAAiD;IACjD,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,2CAA2C;IAC3C,IAAI,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC;IAC5C,qCAAqC;IACrC,MAAM,CAAC,EAAE,KAAK,CAAC;CAChB;AAED,uDAAuD;AACvD,UAAU,OAAQ,SAAQ,gBAAgB,CAAC,aAAa,CAAC;IACvD,oCAAoC;IACpC,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,wCAAwC;IACxC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,aAAa,CAAC,KAAK,IAAI,CAAC;IACrD,2CAA2C;IAC3C,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,aAAa,CAAC,KAAK,IAAI,CAAC;IAC1D,gDAAgD;IAChD,GAAG,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC,CAAC;IACzB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC;IAC3C,oCAAoC;IACpC,MAAM,CAAC,EAAE,KAAK,CAAC;CAChB;AAgCD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,iBAAS,QAAQ,CAAC,KAAK,EAAE,WAAW,GAAG,SAAS,GAAG,GAAG,CAAC,OAAO,CAAC;AAC/D,iBAAS,QAAQ,CAAC,KAAK,EAAE,QAAQ,GAAG,SAAS,GAAG,GAAG,CAAC,OAAO,CAAC;AAC5D,iBAAS,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,SAAS,GAAG,GAAG,CAAC,OAAO,CAAC;kBAAlD,QAAQ;;;AAqLjB,OAAO,EAAE,QAAQ,EAAE,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/list/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAEnC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;AAC1B,YAAY,EAAE,IAAI,EAAE,CAAC"}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import type { FC, HTMLAttributes, Ref } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Class name overrides for the connector container and line.
|
|
4
|
+
*/
|
|
5
|
+
interface ConnectorClasses {
|
|
6
|
+
/** Classes applied to the outer connector wrapper. */
|
|
7
|
+
container?: string;
|
|
8
|
+
/** Classes applied to the inner connector line. */
|
|
9
|
+
content?: string;
|
|
10
|
+
}
|
|
11
|
+
/**
|
|
12
|
+
* Props accepted by the `Connector` component.
|
|
13
|
+
*/
|
|
14
|
+
interface ConnectorProps extends Omit<HTMLAttributes<HTMLDivElement>, 'className'> {
|
|
15
|
+
/** Whether the connector is currently active (uses active styling). */
|
|
16
|
+
active?: boolean;
|
|
17
|
+
/** Optional class overrides for the connector wrapper and line. */
|
|
18
|
+
classes?: ConnectorClasses;
|
|
19
|
+
/** Whether the preceding step has been completed. */
|
|
20
|
+
completed?: boolean;
|
|
21
|
+
/** If true, the connector will not be rendered for the last step. */
|
|
22
|
+
lastIndex?: boolean;
|
|
23
|
+
/** Orientation of the connector: horizontal or vertical. */
|
|
24
|
+
orientation?: 'horizontal' | 'vertical';
|
|
25
|
+
/** Ref forwarded to the connector container element. */
|
|
26
|
+
ref?: Ref<HTMLDivElement>;
|
|
27
|
+
}
|
|
28
|
+
/**
|
|
29
|
+
* Visual divider between steps.
|
|
30
|
+
*
|
|
31
|
+
* Renders a horizontal or vertical line whose appearance reflects whether
|
|
32
|
+
* the step is active, completed, or pending.
|
|
33
|
+
*
|
|
34
|
+
* @param {ConnectorProps} props - Configuration for rendering the connector.
|
|
35
|
+
* @returns {JSX.Element | null} The connector element or `null` for the last step.
|
|
36
|
+
* @example
|
|
37
|
+
* ```tsx
|
|
38
|
+
* import { Connector } from '@/src';
|
|
39
|
+
*
|
|
40
|
+
* const MyConnector = () => (
|
|
41
|
+
* <Connector active={true} completed={false} orientation="horizontal" />
|
|
42
|
+
* );
|
|
43
|
+
* ```
|
|
44
|
+
*/
|
|
45
|
+
declare const Connector: FC<ConnectorProps>;
|
|
46
|
+
export { Connector };
|
|
47
|
+
export type { ConnectorClasses };
|
|
48
|
+
//# sourceMappingURL=Connector.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Connector.d.ts","sourceRoot":"","sources":["../../../src/progress-stepper/Connector.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAIrD;;GAEG;AACH,UAAU,gBAAgB;IACxB,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mDAAmD;IACnD,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,UAAU,cAAe,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,WAAW,CAAC;IAChF,uEAAuE;IACvE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,mEAAmE;IACnE,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,qDAAqD;IACrD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qEAAqE;IACrE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,wDAAwD;IACxD,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,QAAA,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CA+BjC,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC;AACrB,YAAY,EAAE,gBAAgB,EAAE,CAAC"}
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
|
|
2
|
+
import type { IconDefinition } from '@fortawesome/free-solid-svg-icons';
|
|
3
|
+
/**
|
|
4
|
+
* @typedef NodeAdornment
|
|
5
|
+
* @description An adornment for the node: either a FontAwesome `IconDefinition` or an image descriptor.
|
|
6
|
+
*/
|
|
7
|
+
type NodeAdornment = IconDefinition | NodeImage;
|
|
8
|
+
interface NodeClasses {
|
|
9
|
+
/** Classes applied to the adornment icon or image. */
|
|
10
|
+
adornment?: string;
|
|
11
|
+
/** Classes applied to the root node container. */
|
|
12
|
+
container?: string;
|
|
13
|
+
}
|
|
14
|
+
/**
|
|
15
|
+
* @typedef NodeColor
|
|
16
|
+
* @description Allowed color variants applied to the node border and hover states.
|
|
17
|
+
* - `primary`, `secondary`, `accent`, `error`, `info`, `success`, `warning`
|
|
18
|
+
*/
|
|
19
|
+
type NodeColor = 'primary' | 'secondary' | 'accent' | 'error' | 'info' | 'success' | 'warning';
|
|
20
|
+
/**
|
|
21
|
+
* @typedef NodeImage
|
|
22
|
+
* @description Shape for an image adornment used inside a node.
|
|
23
|
+
* @property {string} [alt] - Optional alt text for the image.
|
|
24
|
+
* @property {string} src - Image source URL.
|
|
25
|
+
*/
|
|
26
|
+
type NodeImage = {
|
|
27
|
+
alt?: string;
|
|
28
|
+
src: string;
|
|
29
|
+
};
|
|
30
|
+
/**
|
|
31
|
+
* Props accepted by the `Node` component.
|
|
32
|
+
*/
|
|
33
|
+
interface NodeProps extends Omit<HTMLAttributes<HTMLDivElement>, 'className'> {
|
|
34
|
+
/** Child nodes rendered inside the node (e.g., text or icon). */
|
|
35
|
+
children?: ReactNode;
|
|
36
|
+
/** Optional class overrides for the node container and adornments. */
|
|
37
|
+
classes?: NodeClasses;
|
|
38
|
+
/** Color variant applied to the node border and hover state. */
|
|
39
|
+
color?: NodeColor;
|
|
40
|
+
/** Optional adornment rendered after the children (e.g., icon or image). */
|
|
41
|
+
endAdornment?: NodeAdornment;
|
|
42
|
+
/** Ref forwarded to the root container element. */
|
|
43
|
+
ref?: Ref<HTMLDivElement>;
|
|
44
|
+
/** Size modifier for the node: `sm` | `md` | `lg`. */
|
|
45
|
+
size?: 'sm' | 'md' | 'lg';
|
|
46
|
+
/** Optional adornment rendered before the children (e.g., icon or image). */
|
|
47
|
+
startAdornment?: NodeAdornment;
|
|
48
|
+
/** Visual variant: `circular` (default) or `extended`. */
|
|
49
|
+
variant?: 'circular' | 'extended';
|
|
50
|
+
}
|
|
51
|
+
/**
|
|
52
|
+
* @component Node
|
|
53
|
+
* @description
|
|
54
|
+
* Presentational stepper node with optional start and end adornments.
|
|
55
|
+
* The node can render as circular or extended and supports multiple
|
|
56
|
+
* color and size variants for different progress states.
|
|
57
|
+
*
|
|
58
|
+
* @param {NodeProps} props - Props for configuring the node element.
|
|
59
|
+
* @returns {JSX.Element} The rendered node element.
|
|
60
|
+
* @example
|
|
61
|
+
* ```tsx
|
|
62
|
+
* import { Node } from '@/src';
|
|
63
|
+
* import { faCheck } from '@fortawesome/free-solid-svg-icons';
|
|
64
|
+
*
|
|
65
|
+
* const MyNode = () => (
|
|
66
|
+
* <Node color="primary" size="md" variant="circular" endAdornment={faCheck}>
|
|
67
|
+
* 1
|
|
68
|
+
* </Node>
|
|
69
|
+
* );
|
|
70
|
+
* ```
|
|
71
|
+
*/
|
|
72
|
+
declare const Node: FC<NodeProps>;
|
|
73
|
+
export { Node };
|
|
74
|
+
export type { NodeClasses };
|
|
75
|
+
//# sourceMappingURL=Node.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Node.d.ts","sourceRoot":"","sources":["../../../src/progress-stepper/Node.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAChE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAKxE;;;GAGG;AACH,KAAK,aAAa,GAAG,cAAc,GAAG,SAAS,CAAC;AAEhD,UAAU,WAAW;IACnB,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,KAAK,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAC;AAE/F;;;;;GAKG;AACH,KAAK,SAAS,GAAG;IAAE,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAAC;AAE/C;;GAEG;AACH,UAAU,SAAU,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,WAAW,CAAC;IAC3E,iEAAiE;IACjE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,sEAAsE;IACtE,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,gEAAgE;IAChE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,4EAA4E;IAC5E,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,mDAAmD;IACnD,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,sDAAsD;IACtD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,6EAA6E;IAC7E,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,0DAA0D;IAC1D,OAAO,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;CACnC;AA4BD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,QAAA,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CA2DvB,CAAC;AAIF,OAAO,EAAE,IAAI,EAAE,CAAC;AAChB,YAAY,EAAE,WAAW,EAAE,CAAC"}
|
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
import type { FC, HTMLAttributes, MouseEvent, ReactNode, Ref } from 'react';
|
|
2
|
+
import type { StepClasses } from '@/src/progress-stepper/Step';
|
|
3
|
+
import type { ConnectorClasses } from '@/src/progress-stepper/Connector';
|
|
4
|
+
import type { ButtonClasses } from '@/src/buttons';
|
|
5
|
+
/**
|
|
6
|
+
* @interface StepType
|
|
7
|
+
* @description Represents the minimal shape of a step managed by the stepper.
|
|
8
|
+
*/
|
|
9
|
+
interface StepType {
|
|
10
|
+
/** Unique key identifying the step. */
|
|
11
|
+
key?: string;
|
|
12
|
+
/** Whether the step is currently active (shows expanded content). */
|
|
13
|
+
active?: boolean;
|
|
14
|
+
/** Whether the step is marked as completed. */
|
|
15
|
+
completed?: boolean;
|
|
16
|
+
/** Optional label for the step, used for accessibility and display purposes. */
|
|
17
|
+
label?: string;
|
|
18
|
+
}
|
|
19
|
+
/**
|
|
20
|
+
* Class name overrides for the `ProgressStepper` component parts.
|
|
21
|
+
*/
|
|
22
|
+
interface ProgressStepperClasses {
|
|
23
|
+
/** Classes applied to the action buttons. */
|
|
24
|
+
button?: ButtonClasses;
|
|
25
|
+
/** Classes applied to the button wrapper inside the controls footer. */
|
|
26
|
+
buttonsContainer?: string;
|
|
27
|
+
/** Classes applied to the step connectors. */
|
|
28
|
+
connector?: ConnectorClasses;
|
|
29
|
+
/** Classes applied to the footer controls container. */
|
|
30
|
+
controls?: string;
|
|
31
|
+
/** Classes applied to the active step label. */
|
|
32
|
+
label?: string;
|
|
33
|
+
/** Classes applied to the outer wrapper around the stepper and controls. */
|
|
34
|
+
outer?: string;
|
|
35
|
+
/** Classes applied to the root step list container. */
|
|
36
|
+
root?: string;
|
|
37
|
+
/** Classes applied to each rendered step. */
|
|
38
|
+
step?: StepClasses;
|
|
39
|
+
}
|
|
40
|
+
/**
|
|
41
|
+
* @interface ProgressStepperProps
|
|
42
|
+
* @extends HTMLAttributes<HTMLDivElement>
|
|
43
|
+
* @description
|
|
44
|
+
* Props for the ProgressStepper component, extending standard HTML div attributes.
|
|
45
|
+
* Includes properties for active step index, custom connectors, click handling, layout orientation, and linear mode.
|
|
46
|
+
*/
|
|
47
|
+
interface ProgressStepperProps extends Omit<HTMLAttributes<HTMLDivElement>, 'className'> {
|
|
48
|
+
/** Controlled value representing the currently active step object. */
|
|
49
|
+
activeStep?: StepType;
|
|
50
|
+
/** One or more `<Step />` nodes to render inside the stepper. */
|
|
51
|
+
children?: ReactNode;
|
|
52
|
+
/** Optional class overrides for the stepper layout, controls, and steps. */
|
|
53
|
+
classes?: ProgressStepperClasses;
|
|
54
|
+
/** Whether all steps have been completed. */
|
|
55
|
+
completed?: boolean;
|
|
56
|
+
/** Index of the initially active step when uncontrolled (default: `0`). */
|
|
57
|
+
defaultStep?: number;
|
|
58
|
+
/** Forces horizontal layout even on small screens. */
|
|
59
|
+
forceHorizontal?: boolean;
|
|
60
|
+
/** When `true`, hides the default step controls in non linear Progress Steppers. */
|
|
61
|
+
hideControls?: boolean;
|
|
62
|
+
/** When `true`, step activation follows linear behaviour; when `false`, steps are clickable. */
|
|
63
|
+
linear?: boolean;
|
|
64
|
+
/** Callback invoked when the completion state changes; receives the new completed value. */
|
|
65
|
+
onComplete?: (completed: boolean) => void;
|
|
66
|
+
/** Callback invoked once on mount with the initial active `StepType`. */
|
|
67
|
+
onInit?: (step: StepType) => void;
|
|
68
|
+
/** Fired when a step is clicked; receives the click event and the resulting `StepType`. */
|
|
69
|
+
onStepClick?: (event: MouseEvent<HTMLButtonElement>, step: StepType) => void;
|
|
70
|
+
/** Layout orientation for the stepper (default: `'horizontal'`). */
|
|
71
|
+
orientation?: 'horizontal' | 'vertical';
|
|
72
|
+
/** Ref forwarded to the root container element. */
|
|
73
|
+
ref?: Ref<HTMLDivElement>;
|
|
74
|
+
}
|
|
75
|
+
/**
|
|
76
|
+
* @component ProgressStepper
|
|
77
|
+
* @description
|
|
78
|
+
* ProgressStepper component renders a sequence of steps with optional connectors.
|
|
79
|
+
* It manages active step state and allows for custom connectors and click handling on steps. The layout can be oriented horizontally or vertically.
|
|
80
|
+
*
|
|
81
|
+
* @param {ProgressStepperProps} props - The properties for the ProgressStepper component.
|
|
82
|
+
* @returns {JSX.Element} The rendered stepper component.
|
|
83
|
+
* @example
|
|
84
|
+
* ```tsx
|
|
85
|
+
* import { useState } from 'react';
|
|
86
|
+
* import { ProgressStepper, Step } from '@/src';
|
|
87
|
+
* import type { StepType } from '@/src';
|
|
88
|
+
*
|
|
89
|
+
* const MyStepper = () => {
|
|
90
|
+
* const [activeStep, setActiveStep] = useState<StepType>({});
|
|
91
|
+
* return (
|
|
92
|
+
* <ProgressStepper
|
|
93
|
+
* activeStep={activeStep}
|
|
94
|
+
* onStepClick={(event, step) => {
|
|
95
|
+
* console.log('Step clicked:', step);
|
|
96
|
+
* setActiveStep(step);
|
|
97
|
+
* }}>
|
|
98
|
+
* <Step label="Step 1" />
|
|
99
|
+
* <Step label="Step 2" />
|
|
100
|
+
* <Step label="Step 3" />
|
|
101
|
+
* </ProgressStepper>
|
|
102
|
+
* );
|
|
103
|
+
* };
|
|
104
|
+
*/
|
|
105
|
+
declare const ProgressStepper: FC<ProgressStepperProps>;
|
|
106
|
+
export { ProgressStepper };
|
|
107
|
+
export type { ProgressStepperClasses, StepType };
|
|
108
|
+
//# sourceMappingURL=ProgressStepper.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ProgressStepper.d.ts","sourceRoot":"","sources":["../../../src/progress-stepper/ProgressStepper.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAEV,EAAE,EACF,cAAc,EACd,UAAU,EAEV,SAAS,EACT,GAAG,EACJ,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAE/D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AAEzE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAMnD;;;GAGG;AACH,UAAU,QAAQ;IAChB,uCAAuC;IACvC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,qEAAqE;IACrE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gFAAgF;IAChF,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA8BD;;GAEG;AACH,UAAU,sBAAsB;IAC9B,6CAA6C;IAC7C,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,wEAAwE;IACxE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,8CAA8C;IAC9C,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,wDAAwD;IACxD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4EAA4E;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uDAAuD;IACvD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AAED;;;;;;GAMG;AACH,UAAU,oBAAqB,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,WAAW,CAAC;IACtF,sEAAsE;IACtE,UAAU,CAAC,EAAE,QAAQ,CAAC;IACtB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,4EAA4E;IAC5E,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC,6CAA6C;IAC7C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2EAA2E;IAC3E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sDAAsD;IACtD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,oFAAoF;IACpF,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gGAAgG;IAChG,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,4FAA4F;IAC5F,UAAU,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1C,yEAAyE;IACzE,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IAClC,2FAA2F;IAC3F,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,EAAE,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC7E,oEAAoE;IACpE,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,mDAAmD;IACnD,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAyCD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,QAAA,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CAwT7C,CAAC;AAIF,OAAO,EAAE,eAAe,EAAE,CAAC;AAC3B,YAAY,EAAE,sBAAsB,EAAE,QAAQ,EAAE,CAAC"}
|