@app-studio/web 0.9.4 → 0.9.6
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/Background/Background/Background.props.d.ts +42 -0
- package/dist/components/Background/Background/Background.style.d.ts +23 -0
- package/dist/components/Background/Background/Background.type.d.ts +42 -0
- package/dist/components/Background/Background/Background.view.d.ts +12 -0
- package/dist/components/Background/Background.d.ts +13 -0
- package/dist/components/Background/examples/aurora.d.ts +2 -0
- package/dist/components/Background/examples/combinedEffects.d.ts +2 -0
- package/dist/components/Background/examples/default.d.ts +2 -0
- package/dist/components/Background/examples/index.d.ts +5 -0
- package/dist/components/Background/examples/meteors.d.ts +2 -0
- package/dist/components/Background/examples/wall.d.ts +2 -0
- package/dist/components/Background/index.d.ts +3 -0
- package/dist/components/Button/Button/Button.props.d.ts +4 -0
- package/dist/components/Button/Button/Button.style.d.ts +4 -0
- package/dist/components/Button/examples/animatedStroke.d.ts +2 -0
- package/dist/components/Button/examples/borderMoving.d.ts +2 -0
- package/dist/components/Button/examples/effectsTest.d.ts +2 -0
- package/dist/components/Button/examples/index.d.ts +2 -0
- package/dist/components/ColorPicker/ColorPicker/ColorPicker.props.d.ts +45 -0
- package/dist/components/ColorPicker/ColorPicker/ColorPicker.state.d.ts +15 -0
- package/dist/components/ColorPicker/ColorPicker/ColorPicker.style.d.ts +34 -0
- package/dist/components/ColorPicker/ColorPicker/ColorPicker.type.d.ts +34 -0
- package/dist/components/ColorPicker/ColorPicker/ColorPicker.view.d.ts +4 -0
- package/dist/components/ColorPicker/ColorPicker.d.ts +3 -0
- package/dist/components/ColorPicker/examples/controlled.d.ts +2 -0
- package/dist/components/ColorPicker/examples/customColors.d.ts +2 -0
- package/dist/components/ColorPicker/examples/default.d.ts +2 -0
- package/dist/components/ColorPicker/examples/formIntegration.d.ts +2 -0
- package/dist/components/ColorPicker/examples/index.d.ts +7 -0
- package/dist/components/ColorPicker/examples/shapes.d.ts +2 -0
- package/dist/components/ColorPicker/examples/sizes.d.ts +2 -0
- package/dist/components/ColorPicker/examples/variants.d.ts +2 -0
- package/dist/components/EmojiPicker/EmojiPicker/EmojiPicker.props.d.ts +48 -0
- package/dist/components/EmojiPicker/EmojiPicker/EmojiPicker.state.d.ts +18 -0
- package/dist/components/EmojiPicker/EmojiPicker/EmojiPicker.style.d.ts +36 -0
- package/dist/components/EmojiPicker/EmojiPicker/EmojiPicker.type.d.ts +28 -0
- package/dist/components/EmojiPicker/EmojiPicker/EmojiPicker.view.d.ts +4 -0
- package/dist/components/EmojiPicker/EmojiPicker.d.ts +3 -0
- package/dist/components/EmojiPicker/examples/controlled.d.ts +2 -0
- package/dist/components/EmojiPicker/examples/customEmojis.d.ts +2 -0
- package/dist/components/EmojiPicker/examples/default.d.ts +2 -0
- package/dist/components/EmojiPicker/examples/formIntegration.d.ts +2 -0
- package/dist/components/EmojiPicker/examples/index.d.ts +7 -0
- package/dist/components/EmojiPicker/examples/shapes.d.ts +2 -0
- package/dist/components/EmojiPicker/examples/sizes.d.ts +2 -0
- package/dist/components/EmojiPicker/examples/variants.d.ts +2 -0
- package/dist/components/Form/ColorInput/ColorInput/ColorInput.props.d.ts +54 -0
- package/dist/components/Form/ColorInput/ColorInput/ColorInput.state.d.ts +20 -0
- package/dist/components/Form/ColorInput/ColorInput/ColorInput.style.d.ts +31 -0
- package/dist/components/Form/ColorInput/ColorInput/ColorInput.type.d.ts +36 -0
- package/dist/components/Form/ColorInput/ColorInput/ColorInput.view.d.ts +4 -0
- package/dist/components/Form/ColorInput/ColorInput.d.ts +3 -0
- package/dist/components/Form/ColorInput/examples/Default.d.ts +2 -0
- package/dist/components/Form/ColorInput/examples/FormIntegration.d.ts +2 -0
- package/dist/components/Form/ColorInput/examples/Sizes.d.ts +2 -0
- package/dist/components/Form/ColorInput/examples/Variants.d.ts +2 -0
- package/dist/components/Form/ColorInput/examples/index.d.ts +4 -0
- package/dist/components/Form/Form.d.ts +1 -0
- package/dist/components/Formik/Formik.ColorInput.d.ts +6 -0
- package/dist/components/Formik/examples/FormikColorInput.d.ts +2 -0
- package/dist/components/Formik/examples/index.d.ts +1 -0
- package/dist/components/Formik/index.d.ts +1 -0
- package/dist/components/Title/Title/Title.style.d.ts +0 -5
- package/dist/components/Title/Title/Title.type.d.ts +1 -1
- package/dist/components/index.d.ts +8 -0
- package/dist/pages/background.page.d.ts +3 -0
- package/dist/pages/colorInput.page.d.ts +3 -0
- package/dist/pages/colorPicker.page.d.ts +3 -0
- package/dist/pages/docs/components/CustomLiveCode.component.d.ts +10 -0
- package/dist/pages/emojiPicker.page.d.ts +3 -0
- package/dist/web.cjs.development.js +4796 -967
- 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 +4792 -968
- package/dist/web.esm.js.map +1 -1
- package/dist/web.umd.development.js +5176 -1347
- 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/package.json +2 -1
- package/dist/pages/docs/components/LiveCode.component.d.ts +0 -3
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { ColorInputProps } from './ColorInput.props';
|
|
3
|
+
export declare const useColorInputState: (props: ColorInputProps) => {
|
|
4
|
+
isOpen: boolean;
|
|
5
|
+
selectedColor: string;
|
|
6
|
+
recentColors: string[];
|
|
7
|
+
customColor: string;
|
|
8
|
+
isFocused: boolean;
|
|
9
|
+
isHovered: boolean;
|
|
10
|
+
handleToggle: () => void;
|
|
11
|
+
handleColorSelect: (color: string) => void;
|
|
12
|
+
handleCustomColorChange: (color: string) => void;
|
|
13
|
+
handleCustomColorSubmit: () => void;
|
|
14
|
+
handleClose: () => void;
|
|
15
|
+
setIsFocused: import("react").Dispatch<import("react").SetStateAction<boolean>>;
|
|
16
|
+
setIsHovered: import("react").Dispatch<import("react").SetStateAction<boolean>>;
|
|
17
|
+
setValue: (newValue: string) => void;
|
|
18
|
+
triggerRef: import("react").RefObject<HTMLDivElement>;
|
|
19
|
+
dropdownRef: import("react").RefObject<HTMLDivElement>;
|
|
20
|
+
};
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { ViewProps } from 'app-studio';
|
|
2
|
+
import { Size, Variant, Shape } from './ColorInput.type';
|
|
3
|
+
/**
|
|
4
|
+
* Default styles for the ColorInput component
|
|
5
|
+
*/
|
|
6
|
+
export declare const DefaultColorInputStyles: {
|
|
7
|
+
container: ViewProps;
|
|
8
|
+
trigger: ViewProps;
|
|
9
|
+
dropdown: ViewProps;
|
|
10
|
+
colorGrid: ViewProps;
|
|
11
|
+
recentColors: ViewProps;
|
|
12
|
+
};
|
|
13
|
+
/**
|
|
14
|
+
* Size variants for ColorInput
|
|
15
|
+
*/
|
|
16
|
+
export declare const Sizes: Record<Size, ViewProps>;
|
|
17
|
+
/**
|
|
18
|
+
* Shape variants for ColorInput
|
|
19
|
+
*/
|
|
20
|
+
export declare const Shapes: Record<Shape, ViewProps>;
|
|
21
|
+
/**
|
|
22
|
+
* Variant styles for ColorInput
|
|
23
|
+
*/
|
|
24
|
+
export declare const Variants: Record<Variant, ViewProps>;
|
|
25
|
+
/**
|
|
26
|
+
* Default color palette for the ColorInput
|
|
27
|
+
*/
|
|
28
|
+
export declare const DefaultColorPalette: {
|
|
29
|
+
name: string;
|
|
30
|
+
value: string;
|
|
31
|
+
}[];
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { ViewProps } from 'app-studio';
|
|
2
|
+
export declare type Variant = 'outline' | 'default' | 'none';
|
|
3
|
+
export declare type Shape = 'default' | 'sharp' | 'rounded' | 'pillShaped';
|
|
4
|
+
export declare type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
5
|
+
export declare type ColorInputStyles = {
|
|
6
|
+
text?: ViewProps;
|
|
7
|
+
label?: ViewProps;
|
|
8
|
+
error?: ViewProps;
|
|
9
|
+
helperText?: ViewProps;
|
|
10
|
+
container?: ViewProps;
|
|
11
|
+
trigger?: ViewProps;
|
|
12
|
+
dropdown?: ViewProps;
|
|
13
|
+
colorGrid?: ViewProps;
|
|
14
|
+
colorSwatch?: ViewProps;
|
|
15
|
+
customInput?: ViewProps;
|
|
16
|
+
recentColors?: ViewProps;
|
|
17
|
+
};
|
|
18
|
+
export declare type ColorFormat = 'hex' | 'rgb' | 'hsl';
|
|
19
|
+
export declare type ColorValue = {
|
|
20
|
+
hex: string;
|
|
21
|
+
rgb: {
|
|
22
|
+
r: number;
|
|
23
|
+
g: number;
|
|
24
|
+
b: number;
|
|
25
|
+
};
|
|
26
|
+
hsl: {
|
|
27
|
+
h: number;
|
|
28
|
+
s: number;
|
|
29
|
+
l: number;
|
|
30
|
+
};
|
|
31
|
+
};
|
|
32
|
+
export declare type PredefinedColor = {
|
|
33
|
+
name: string;
|
|
34
|
+
value: string;
|
|
35
|
+
category?: string;
|
|
36
|
+
};
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ColorInputProps } from '../Form/ColorInput/ColorInput/ColorInput.props';
|
|
3
|
+
/**
|
|
4
|
+
* Color input allows users to select a color from a predefined palette or enter a custom color.
|
|
5
|
+
*/
|
|
6
|
+
export declare const FormikColorInput: React.FC<ColorInputProps>;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export { FormikCheckbox } from './Formik.Checkbox';
|
|
2
|
+
export { FormikColorInput } from './Formik.ColorInput';
|
|
2
3
|
export { FormikDatePicker } from './Formik.DatePicker';
|
|
3
4
|
export { FormikCountryPicker } from './Formik.CountryPicker';
|
|
4
5
|
export { FormikSelect } from './Formik.Select';
|
|
@@ -6,7 +6,7 @@ export declare type HighlightStyle = 'underline' | 'background' | 'gradient' | '
|
|
|
6
6
|
/**
|
|
7
7
|
* Title size options
|
|
8
8
|
*/
|
|
9
|
-
export declare type TitleSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
|
|
9
|
+
export declare type TitleSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
10
10
|
/**
|
|
11
11
|
* Title styles for customization
|
|
12
12
|
*/
|
|
@@ -16,6 +16,7 @@ export * from './Form/Switch/Switch';
|
|
|
16
16
|
export * from './Form/TextArea/TextArea';
|
|
17
17
|
export * from './Form/TextField/TextField';
|
|
18
18
|
export * from './Form/Checkbox/Checkbox';
|
|
19
|
+
export * from './Form/ColorInput/ColorInput';
|
|
19
20
|
export * from './Form/CountryPicker/CountryPicker';
|
|
20
21
|
export * from './Form/DatePicker/DatePicker';
|
|
21
22
|
export * from './Form/Password/Password';
|
|
@@ -39,6 +40,8 @@ export * from './Toggle/Toggle';
|
|
|
39
40
|
export * from './ToggleGroup/ToggleGroup';
|
|
40
41
|
export * from './DragAndDrop/DragAndDrop';
|
|
41
42
|
export * from './DropdownMenu/DropdownMenu';
|
|
43
|
+
export * from './ColorPicker/ColorPicker';
|
|
44
|
+
export * from './EmojiPicker/EmojiPicker';
|
|
42
45
|
export * from './HoverCard/HoverCard';
|
|
43
46
|
export * from './Menubar/Menubar';
|
|
44
47
|
export * from './Pagination/Pagination';
|
|
@@ -51,6 +54,7 @@ export * from './Tooltip/Tooltip';
|
|
|
51
54
|
export * from './Tree/Tree';
|
|
52
55
|
export * from './Flow/Flow';
|
|
53
56
|
export * from './ChatInput/ChatInput';
|
|
57
|
+
export * from './Background/Background';
|
|
54
58
|
export * from './Accordion/Accordion/Accordion.props';
|
|
55
59
|
export * from './Alert/Alert/Alert.props';
|
|
56
60
|
export * from './AspectRatio/AspectRatio/AspectRatio.props';
|
|
@@ -68,6 +72,7 @@ export * from './Form/Switch/Switch/Switch.props';
|
|
|
68
72
|
export * from './Form/TextArea/TextArea/TextArea.props';
|
|
69
73
|
export * from './Form/TextField/TextField/TextField.props';
|
|
70
74
|
export * from './Form/Checkbox/Checkbox/Checkbox.props';
|
|
75
|
+
export * from './Form/ColorInput/ColorInput/ColorInput.props';
|
|
71
76
|
export * from './Form/CountryPicker/CountryPicker/CountryPicker.props';
|
|
72
77
|
export * from './Form/DatePicker/DatePicker/DatePicker.props';
|
|
73
78
|
export * from './Form/Password/Password/Password.props';
|
|
@@ -87,6 +92,8 @@ export * from './ToggleGroup/ToggleGroup/ToggleGroup.props';
|
|
|
87
92
|
export * from './HoverCard/HoverCard/HoverCard.props';
|
|
88
93
|
export * from './NavigationMenu/NavigationMenu/NavigationMenu.props';
|
|
89
94
|
export * from './DropdownMenu/DropdownMenu/DropdownMenu.props';
|
|
95
|
+
export * from './ColorPicker/ColorPicker/ColorPicker.props';
|
|
96
|
+
export * from './EmojiPicker/EmojiPicker/EmojiPicker.props';
|
|
90
97
|
export * from './Menubar/Menubar/Menubar.props';
|
|
91
98
|
export * from './Pagination/Pagination/Pagination.props';
|
|
92
99
|
export * from './Separator/Separator/Separator.props';
|
|
@@ -98,3 +105,4 @@ export * from './Tooltip/Tooltip/Tooltip.props';
|
|
|
98
105
|
export * from './Tree/Tree/Tree.props';
|
|
99
106
|
export * from './Flow/Flow/Flow.props';
|
|
100
107
|
export * from './ChatInput/ChatInput/ChatInput.props';
|
|
108
|
+
export * from './Background/Background/Background.props';
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
interface CustomLiveCodeProps {
|
|
3
|
+
code: string;
|
|
4
|
+
originalCode: string;
|
|
5
|
+
scope: Record<string, any>;
|
|
6
|
+
language?: string;
|
|
7
|
+
mainComponentName?: string | null;
|
|
8
|
+
}
|
|
9
|
+
declare const CustomLiveCode: React.FC<CustomLiveCodeProps>;
|
|
10
|
+
export default CustomLiveCode;
|