@app-studio/web 0.9.32 → 0.9.34
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/components/Accordion/Accordion/Accordion.style.d.ts +8 -0
- package/dist/components/Calendar/Calendar/Calendar.props.d.ts +57 -53
- package/dist/components/Calendar/Calendar/Calendar.style.d.ts +103 -0
- package/dist/components/Calendar/Calendar/Calendar.utils.d.ts +89 -8
- package/dist/components/Calendar/Calendar/Calendar.view.d.ts +2 -19
- package/dist/components/Calendar/Calendar.d.ts +1 -3
- package/dist/components/CalendarWeek/CalendarWeek/CalendarWeek.props.d.ts +51 -0
- package/dist/components/CalendarWeek/CalendarWeek/CalendarWeek.style.d.ts +90 -0
- package/dist/components/CalendarWeek/CalendarWeek/CalendarWeek.utils.d.ts +51 -0
- package/dist/components/CalendarWeek/CalendarWeek/CalendarWeek.view.d.ts +3 -0
- package/dist/components/CalendarWeek/CalendarWeek.d.ts +1 -0
- package/dist/components/Chart/Chart/BarChart.d.ts +1 -1
- package/dist/components/Chart/Chart/Chart.state.d.ts +3 -3
- package/dist/components/Chart/Chart/ChartTooltip.d.ts +14 -0
- package/dist/components/Chart/Chart/LineChart.d.ts +1 -1
- package/dist/components/Chart/Chart/PieChart.d.ts +1 -1
- package/dist/components/ChatInput/ChatInput/ChatInput.style.d.ts +31 -0
- package/dist/components/Form/Checkbox/Checkbox/Checkbox.style.d.ts +20 -4
- package/dist/components/Form/Select/Select/Select.style.d.ts +4 -0
- package/dist/components/Form/Switch/Switch/Switch.style.d.ts +25 -5
- package/dist/components/Input/Input.style.d.ts +16 -0
- package/dist/components/KanbanBoard/KanbanBoard/KanbanBoard.props.d.ts +1 -0
- package/dist/components/KanbanBoard/KanbanBoard/KanbanBoard.state.d.ts +3 -2
- package/dist/components/Link/Link/Link.style.d.ts +5 -0
- package/dist/components/Modal/Modal/Modal.style.d.ts +9 -0
- package/dist/components/NavigationMenu/NavigationMenu/NavigationMenu.state.d.ts +1 -0
- package/dist/components/NavigationMenu/NavigationMenu/NavigationMenu.type.d.ts +1 -0
- package/dist/components/Separator/Separator/Separator.style.d.ts +7 -0
- package/dist/components/Slider/Slider/Slider.style.d.ts +12 -0
- package/dist/components/Table/Table/Table.style.d.ts +1 -0
- package/dist/components/Text/Text/Text.props.d.ts +4 -0
- package/dist/components/Text/Text/Text.style.d.ts +1 -0
- package/dist/components/Toast/Toast/Toast.style.d.ts +5 -0
- package/dist/components/index.d.ts +3 -0
- package/dist/web.cjs.development.js +2873 -1033
- package/dist/web.cjs.development.js.map +1 -1
- package/dist/web.cjs.production.min.js +1 -1
- package/dist/web.cjs.production.min.js.map +1 -1
- package/dist/web.esm.js +2876 -1037
- package/dist/web.esm.js.map +1 -1
- package/dist/web.umd.development.js +2873 -1031
- package/dist/web.umd.development.js.map +1 -1
- package/dist/web.umd.production.min.js +1 -1
- package/dist/web.umd.production.min.js.map +1 -1
- package/docs/components.md +285 -0
- package/package.json +1 -1
|
@@ -10,6 +10,11 @@ export declare const DefaultChatInputStyles: {
|
|
|
10
10
|
borderRadius: string;
|
|
11
11
|
backgroundColor: string;
|
|
12
12
|
transition: string;
|
|
13
|
+
media: {
|
|
14
|
+
mobile: {
|
|
15
|
+
borderRadius: string;
|
|
16
|
+
};
|
|
17
|
+
};
|
|
13
18
|
};
|
|
14
19
|
content: {
|
|
15
20
|
width: string;
|
|
@@ -19,6 +24,12 @@ export declare const DefaultChatInputStyles: {
|
|
|
19
24
|
borderWidth: string;
|
|
20
25
|
borderStyle: string;
|
|
21
26
|
borderColor: string;
|
|
27
|
+
media: {
|
|
28
|
+
mobile: {
|
|
29
|
+
padding: string;
|
|
30
|
+
borderRadius: string;
|
|
31
|
+
};
|
|
32
|
+
};
|
|
22
33
|
};
|
|
23
34
|
textarea: {
|
|
24
35
|
width: string;
|
|
@@ -33,6 +44,13 @@ export declare const DefaultChatInputStyles: {
|
|
|
33
44
|
outline: string;
|
|
34
45
|
resize: string;
|
|
35
46
|
overflow: string;
|
|
47
|
+
media: {
|
|
48
|
+
mobile: {
|
|
49
|
+
padding: string;
|
|
50
|
+
fontSize: string;
|
|
51
|
+
minHeight: string;
|
|
52
|
+
};
|
|
53
|
+
};
|
|
36
54
|
};
|
|
37
55
|
attachments: {
|
|
38
56
|
display: string;
|
|
@@ -73,6 +91,13 @@ export declare const DefaultChatInputStyles: {
|
|
|
73
91
|
backgroundColor: string;
|
|
74
92
|
color: string;
|
|
75
93
|
transition: string;
|
|
94
|
+
media: {
|
|
95
|
+
mobile: {
|
|
96
|
+
height: string;
|
|
97
|
+
minWidth: string;
|
|
98
|
+
padding: string;
|
|
99
|
+
};
|
|
100
|
+
};
|
|
76
101
|
};
|
|
77
102
|
fileButton: {
|
|
78
103
|
height: string;
|
|
@@ -81,6 +106,12 @@ export declare const DefaultChatInputStyles: {
|
|
|
81
106
|
backgroundColor: string;
|
|
82
107
|
color: string;
|
|
83
108
|
transition: string;
|
|
109
|
+
media: {
|
|
110
|
+
mobile: {
|
|
111
|
+
height: string;
|
|
112
|
+
padding: string;
|
|
113
|
+
};
|
|
114
|
+
};
|
|
84
115
|
};
|
|
85
116
|
modelSelector: {
|
|
86
117
|
height: string;
|
|
@@ -30,15 +30,28 @@ export declare const VariantStyles: Record<Variant, ViewProps>;
|
|
|
30
30
|
export declare const StateStyles: {
|
|
31
31
|
hover: {
|
|
32
32
|
selected: {
|
|
33
|
-
|
|
34
|
-
borderColor: string;
|
|
33
|
+
opacity: number;
|
|
35
34
|
};
|
|
36
35
|
unselected: {
|
|
37
36
|
borderColor: string;
|
|
37
|
+
backgroundColor: string;
|
|
38
38
|
};
|
|
39
39
|
indeterminate: {
|
|
40
|
-
|
|
41
|
-
|
|
40
|
+
opacity: number;
|
|
41
|
+
};
|
|
42
|
+
};
|
|
43
|
+
focus: {
|
|
44
|
+
selected: {
|
|
45
|
+
outline: string;
|
|
46
|
+
boxShadow: string;
|
|
47
|
+
};
|
|
48
|
+
unselected: {
|
|
49
|
+
outline: string;
|
|
50
|
+
boxShadow: string;
|
|
51
|
+
};
|
|
52
|
+
indeterminate: {
|
|
53
|
+
outline: string;
|
|
54
|
+
boxShadow: string;
|
|
42
55
|
};
|
|
43
56
|
};
|
|
44
57
|
disabled: {
|
|
@@ -46,15 +59,18 @@ export declare const StateStyles: {
|
|
|
46
59
|
backgroundColor: string;
|
|
47
60
|
borderColor: string;
|
|
48
61
|
opacity: number;
|
|
62
|
+
cursor: string;
|
|
49
63
|
};
|
|
50
64
|
unselected: {
|
|
51
65
|
borderColor: string;
|
|
52
66
|
opacity: number;
|
|
67
|
+
cursor: string;
|
|
53
68
|
};
|
|
54
69
|
indeterminate: {
|
|
55
70
|
backgroundColor: string;
|
|
56
71
|
borderColor: string;
|
|
57
72
|
opacity: number;
|
|
73
|
+
cursor: string;
|
|
58
74
|
};
|
|
59
75
|
};
|
|
60
76
|
error: {
|
|
@@ -24,3 +24,7 @@ export declare const IconSizes: Record<Size, number>;
|
|
|
24
24
|
* Dropdown styles for the Select component
|
|
25
25
|
*/
|
|
26
26
|
export declare const dropdownStyles: ViewProps;
|
|
27
|
+
/**
|
|
28
|
+
* Option item styles for the Select component
|
|
29
|
+
*/
|
|
30
|
+
export declare const optionStyles: ViewProps;
|
|
@@ -37,13 +37,33 @@ export declare const ColorSchemes: {
|
|
|
37
37
|
};
|
|
38
38
|
states: {
|
|
39
39
|
hover: {
|
|
40
|
-
active:
|
|
41
|
-
|
|
40
|
+
active: {
|
|
41
|
+
opacity: number;
|
|
42
|
+
};
|
|
43
|
+
inactive: {
|
|
44
|
+
backgroundColor: string;
|
|
45
|
+
};
|
|
42
46
|
};
|
|
43
47
|
focus: {
|
|
44
|
-
active:
|
|
45
|
-
|
|
46
|
-
|
|
48
|
+
active: {
|
|
49
|
+
outline: string;
|
|
50
|
+
boxShadow: string;
|
|
51
|
+
};
|
|
52
|
+
inactive: {
|
|
53
|
+
outline: string;
|
|
54
|
+
boxShadow: string;
|
|
55
|
+
};
|
|
47
56
|
};
|
|
48
57
|
};
|
|
49
58
|
};
|
|
59
|
+
/**
|
|
60
|
+
* Transition styles for the Switch component
|
|
61
|
+
*/
|
|
62
|
+
export declare const TransitionStyles: {
|
|
63
|
+
slider: {
|
|
64
|
+
transition: string;
|
|
65
|
+
};
|
|
66
|
+
knob: {
|
|
67
|
+
transition: string;
|
|
68
|
+
};
|
|
69
|
+
};
|
|
@@ -30,6 +30,14 @@ export declare const PadddingWithLabel: {
|
|
|
30
30
|
paddingBottom: string;
|
|
31
31
|
paddingLeft: string;
|
|
32
32
|
paddingRight: string;
|
|
33
|
+
media: {
|
|
34
|
+
mobile: {
|
|
35
|
+
paddingTop: string;
|
|
36
|
+
paddingBottom: string;
|
|
37
|
+
paddingLeft: string;
|
|
38
|
+
paddingRight: string;
|
|
39
|
+
};
|
|
40
|
+
};
|
|
33
41
|
};
|
|
34
42
|
/**
|
|
35
43
|
* Padding for input without label following the 4px grid system
|
|
@@ -39,4 +47,12 @@ export declare const PaddingWithoutLabel: {
|
|
|
39
47
|
paddingBottom: string;
|
|
40
48
|
paddingLeft: string;
|
|
41
49
|
paddingRight: string;
|
|
50
|
+
media: {
|
|
51
|
+
mobile: {
|
|
52
|
+
paddingTop: string;
|
|
53
|
+
paddingBottom: string;
|
|
54
|
+
paddingLeft: string;
|
|
55
|
+
paddingRight: string;
|
|
56
|
+
};
|
|
57
|
+
};
|
|
42
58
|
};
|
|
@@ -37,6 +37,7 @@ export interface KanbanBoardProps {
|
|
|
37
37
|
export interface KanbanBoardViewProps extends KanbanBoardProps {
|
|
38
38
|
columns: KanbanBoardColumn[];
|
|
39
39
|
draggedCardId: string | null;
|
|
40
|
+
hoveredColumnId: string | null;
|
|
40
41
|
onCardDragStart: (columnId: string, cardId: string, event: React.DragEvent<HTMLDivElement>) => void;
|
|
41
42
|
onCardDragEnd: () => void;
|
|
42
43
|
onCardDrop: (columnId: string, cardId: string | null, event: React.DragEvent<HTMLDivElement>) => void;
|
|
@@ -3,10 +3,11 @@ import { KanbanBoardProps } from './KanbanBoard.props';
|
|
|
3
3
|
export declare const useKanbanBoardState: ({ columns: initialColumns, onChange, }: KanbanBoardProps) => {
|
|
4
4
|
columns: import("./KanbanBoard.props").KanbanBoardColumn[];
|
|
5
5
|
draggedCardId: string | null;
|
|
6
|
+
hoveredColumnId: string | null;
|
|
6
7
|
onCardDragStart: (columnId: string, cardId: string, event: React.DragEvent<HTMLDivElement>) => void;
|
|
7
8
|
onCardDragEnd: () => void;
|
|
8
|
-
onColumnDragOver: (
|
|
9
|
-
onCardDragOver: (
|
|
9
|
+
onColumnDragOver: (columnId: string, event: React.DragEvent<HTMLDivElement>) => void;
|
|
10
|
+
onCardDragOver: (columnId: string, cardId: string | null, event: React.DragEvent<HTMLDivElement>) => void;
|
|
10
11
|
onColumnDrop: (columnId: string, event: React.DragEvent<HTMLDivElement>) => void;
|
|
11
12
|
onCardDrop: (columnId: string, cardId: string | null, event: React.DragEvent<HTMLDivElement>) => void;
|
|
12
13
|
};
|
|
@@ -26,6 +26,7 @@ export declare const OverlayAlignments: Record<string, ViewProps>;
|
|
|
26
26
|
export declare const HeaderIconSizes: Record<Size, number>;
|
|
27
27
|
/**
|
|
28
28
|
* Animation configurations for the Modal component
|
|
29
|
+
* Subtle and smooth, matching shadcn/ui patterns
|
|
29
30
|
*/
|
|
30
31
|
export declare const ModalAnimations: {
|
|
31
32
|
enter: {
|
|
@@ -39,6 +40,14 @@ export declare const ModalAnimations: {
|
|
|
39
40
|
transition: string;
|
|
40
41
|
};
|
|
41
42
|
};
|
|
43
|
+
/**
|
|
44
|
+
* Overlay styles for the Modal component
|
|
45
|
+
*/
|
|
46
|
+
export declare const OverlayStyles: ViewProps;
|
|
47
|
+
/**
|
|
48
|
+
* Container base styles for the Modal component
|
|
49
|
+
*/
|
|
50
|
+
export declare const ContainerBaseStyles: ViewProps;
|
|
42
51
|
/**
|
|
43
52
|
* Typography configurations for the Modal component
|
|
44
53
|
*/
|
|
@@ -5,4 +5,5 @@ export declare const useNavigationMenuState: (defaultActiveItemId?: string | nul
|
|
|
5
5
|
expandedItemIds: string[];
|
|
6
6
|
toggleExpandedItem: (itemId: string) => void;
|
|
7
7
|
isItemExpanded: (itemId: string) => boolean;
|
|
8
|
+
triggerRefs: import("react").MutableRefObject<Record<string, HTMLDivElement>>;
|
|
8
9
|
};
|
|
@@ -25,15 +25,22 @@ export declare const SeparatorVariants: Record<Variant, string>;
|
|
|
25
25
|
export declare const SeparatorThicknesses: Record<Thickness, string>;
|
|
26
26
|
/**
|
|
27
27
|
* Default styles for the Separator component
|
|
28
|
+
* Matching shadcn/ui patterns with subtle colors
|
|
28
29
|
*/
|
|
29
30
|
export declare const DefaultSeparatorStyles: {
|
|
30
31
|
container: {
|
|
31
32
|
transition: string;
|
|
32
33
|
};
|
|
34
|
+
line: {
|
|
35
|
+
backgroundColor: string;
|
|
36
|
+
transition: string;
|
|
37
|
+
};
|
|
33
38
|
label: {
|
|
34
39
|
fontSize: string;
|
|
40
|
+
fontWeight: string;
|
|
35
41
|
color: string;
|
|
36
42
|
paddingHorizontal: string;
|
|
43
|
+
backgroundColor: string;
|
|
37
44
|
transition: string;
|
|
38
45
|
};
|
|
39
46
|
};
|
|
@@ -5,6 +5,18 @@ export declare const ThumbSizes: Record<Size, ViewProps>;
|
|
|
5
5
|
export declare const SliderShapes: Record<Shape, number | string>;
|
|
6
6
|
export declare const getSlider: (themeMode: string) => Record<Variant, ViewProps>;
|
|
7
7
|
export declare const SliderVariants: Record<Variant, ViewProps>;
|
|
8
|
+
/**
|
|
9
|
+
* Thumb styles matching shadcn/ui patterns
|
|
10
|
+
*/
|
|
11
|
+
export declare const ThumbStyles: ViewProps;
|
|
12
|
+
/**
|
|
13
|
+
* Track styles matching shadcn/ui patterns
|
|
14
|
+
*/
|
|
15
|
+
export declare const TrackStyles: ViewProps;
|
|
16
|
+
/**
|
|
17
|
+
* Range (filled portion) styles
|
|
18
|
+
*/
|
|
19
|
+
export declare const RangeStyles: ViewProps;
|
|
8
20
|
export declare const EnhancedSliderSizes: Record<Size, {
|
|
9
21
|
trackCrossAxisSize: number;
|
|
10
22
|
thumbSize: number;
|
|
@@ -4,6 +4,10 @@ import { Headings, Size, TextWeights } from './Text.type';
|
|
|
4
4
|
export interface TextProps extends Omit<TextAppProps, 'children' | 'style' | 'pointerEvents'> {
|
|
5
5
|
children?: React.ReactNode;
|
|
6
6
|
backgroundColor?: string;
|
|
7
|
+
/**
|
|
8
|
+
* Background color used to automatically compute a readable text color
|
|
9
|
+
*/
|
|
10
|
+
bgColor?: string;
|
|
7
11
|
heading?: Headings;
|
|
8
12
|
isItalic?: boolean;
|
|
9
13
|
isStriked?: boolean;
|
|
@@ -10,6 +10,7 @@ import { Headings, Size, TextWeights } from './Text.type';
|
|
|
10
10
|
import { ViewProps } from 'app-studio';
|
|
11
11
|
/**
|
|
12
12
|
* Heading sizes following typography guidelines
|
|
13
|
+
* Matching shadcn/ui typography patterns
|
|
13
14
|
*/
|
|
14
15
|
export declare const HeadingSizes: Record<Headings, ViewProps>;
|
|
15
16
|
/**
|
|
@@ -17,6 +17,7 @@ import { ToastPosition, ThemesType } from './Toast.type';
|
|
|
17
17
|
export declare const Themes: ThemesType;
|
|
18
18
|
/**
|
|
19
19
|
* Animation configurations for the Toast component
|
|
20
|
+
* Subtle and smooth, matching shadcn/ui patterns
|
|
20
21
|
*/
|
|
21
22
|
export declare const ToastAnimations: {
|
|
22
23
|
enter: {
|
|
@@ -30,6 +31,10 @@ export declare const ToastAnimations: {
|
|
|
30
31
|
transition: string;
|
|
31
32
|
};
|
|
32
33
|
};
|
|
34
|
+
/**
|
|
35
|
+
* Base container styles for the Toast component
|
|
36
|
+
*/
|
|
37
|
+
export declare const BaseContainerStyles: ViewProps;
|
|
33
38
|
/**
|
|
34
39
|
* Position configurations for the Toast component
|
|
35
40
|
* Following the 4px grid system
|
|
@@ -11,6 +11,8 @@ export * from './Carousel/Carousel';
|
|
|
11
11
|
export * from './Chart/Chart';
|
|
12
12
|
export * from './KanbanBoard/KanbanBoard';
|
|
13
13
|
export * from './Calendar/Calendar';
|
|
14
|
+
export * from './CalendarWeek/CalendarWeek';
|
|
15
|
+
export * from './Calendar/Calendar';
|
|
14
16
|
export * from './CookieConsent/CookieConsent';
|
|
15
17
|
export * from './ContextMenu/ContextMenu';
|
|
16
18
|
export * from './File/File';
|
|
@@ -80,6 +82,7 @@ export * from './KanbanBoard/KanbanBoard/KanbanBoard.props';
|
|
|
80
82
|
export * from './Carousel/Carousel/Carousel.props';
|
|
81
83
|
export * from './Chart/Chart/Chart.props';
|
|
82
84
|
export * from './Calendar/Calendar/Calendar.props';
|
|
85
|
+
export * from './CalendarWeek/CalendarWeek/CalendarWeek.props';
|
|
83
86
|
export * from './CookieConsent/CookieConsent/CookieConsent.props';
|
|
84
87
|
export * from './ContextMenu/ContextMenu/ContextMenu.props';
|
|
85
88
|
export * from './Form/Select/Select/Select.props';
|