@botpress/webchat 0.5.1 → 1.0.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/dist/App.d.ts +10 -0
- package/dist/Utils/colors.d.ts +18 -0
- package/dist/Utils/eventEmitter.d.ts +12 -0
- package/dist/Utils/index.d.ts +2 -0
- package/dist/client/MessagingClient.d.ts +27 -0
- package/dist/client/adapters/Audio.d.ts +19 -0
- package/dist/client/adapters/Card.d.ts +188 -0
- package/dist/client/adapters/Carousel.d.ts +147 -0
- package/dist/client/adapters/Choice.d.ts +45 -0
- package/dist/client/adapters/Dropdown.d.ts +46 -0
- package/dist/client/adapters/File.d.ts +19 -0
- package/dist/client/adapters/Image.d.ts +19 -0
- package/dist/client/adapters/Location.d.ts +27 -0
- package/dist/client/adapters/Message.d.ts +433 -0
- package/dist/client/adapters/Text.d.ts +20 -0
- package/dist/client/adapters/Utils.d.ts +5 -0
- package/dist/client/adapters/Video.d.ts +19 -0
- package/dist/client/adapters/Voice.d.ts +15 -0
- package/dist/client/adapters/index.d.ts +12 -0
- package/dist/client/index.d.ts +2 -0
- package/dist/components/Avatar.d.ts +6 -0
- package/dist/components/Block.d.ts +4 -0
- package/dist/components/Composer.d.ts +12 -14
- package/dist/components/Container.d.ts +2 -12
- package/dist/components/Header.d.ts +36 -26
- package/dist/components/LoadingIndicator.d.ts +2 -0
- package/dist/components/Message.d.ts +7 -0
- package/dist/components/MessageList.d.ts +2 -0
- package/dist/components/Modal.d.ts +17 -0
- package/dist/components/RestartConversation.d.ts +5 -0
- package/dist/components/Webchat.d.ts +6 -0
- package/dist/components/dev-tools/DevTools.d.ts +1 -0
- package/dist/components/dev-tools/configuration.d.ts +2 -0
- package/dist/components/dev-tools/helpers.d.ts +5 -0
- package/dist/components/index.d.ts +12 -0
- package/dist/components/renderers/Audio.d.ts +3 -0
- package/dist/components/renderers/Bubble.d.ts +5 -0
- package/dist/components/renderers/Button.d.ts +4 -0
- package/dist/components/renderers/Carousel.d.ts +3 -0
- package/dist/components/renderers/Column.d.ts +5 -0
- package/dist/components/renderers/Dropdown.d.ts +5 -0
- package/dist/components/renderers/File.d.ts +3 -0
- package/dist/components/renderers/Image.d.ts +3 -0
- package/dist/components/renderers/Location.d.ts +3 -0
- package/dist/components/renderers/Row.d.ts +5 -0
- package/dist/components/renderers/Text.d.ts +4 -0
- package/dist/components/renderers/Video.d.ts +3 -0
- package/dist/components/renderers/index.d.ts +2 -0
- package/dist/contexts/ComposerContext.d.ts +8 -0
- package/dist/contexts/MessageContext.d.ts +8 -0
- package/dist/contexts/ModalContext.d.ts +14 -0
- package/dist/contexts/WebchatContext.d.ts +56 -0
- package/dist/contexts/index.d.ts +4 -0
- package/dist/hooks/index.d.ts +3 -0
- package/dist/hooks/useImageSize.d.ts +2 -0
- package/dist/hooks/useRefresh.d.ts +10 -0
- package/dist/hooks/useWebchatStore.d.ts +30 -0
- package/dist/index.d.ts +3 -17
- package/dist/index.js +43569 -48
- package/dist/index.umd.cjs +702 -0
- package/dist/main.d.ts +11 -13
- package/dist/providers/ModalProvider.d.ts +8 -0
- package/dist/providers/WebchatProvider.d.ts +13 -0
- package/dist/providers/index.d.ts +2 -0
- package/dist/schemas/index.d.ts +1 -0
- package/dist/schemas/theme.d.ts +3371 -0
- package/dist/services/clipboard.d.ts +1 -0
- package/dist/services/images.d.ts +2 -0
- package/dist/services/index.d.ts +3 -0
- package/dist/services/toast.d.ts +17 -0
- package/dist/themes/dawn.d.ts +2 -0
- package/dist/themes/duskTheme.d.ts +2 -0
- package/dist/themes/eggplant.d.ts +2 -0
- package/dist/themes/galaxy.d.ts +2 -0
- package/dist/themes/index.d.ts +6 -0
- package/dist/themes/midnight.d.ts +2 -0
- package/dist/themes/prism.d.ts +2 -0
- package/dist/twind.config.d.ts +9 -0
- package/dist/types/block-type.d.ts +93 -0
- package/dist/types/image.d.ts +11 -0
- package/dist/types/index.d.ts +2 -0
- package/dist/vite.svg +1 -0
- package/index.html +18 -0
- package/package.json +60 -49
- package/public/vite.svg +1 -0
- package/src/App.tsx +41 -0
- package/src/Utils/colors.ts +45 -0
- package/src/Utils/eventEmitter.ts +31 -0
- package/src/Utils/index.ts +2 -0
- package/src/assets/check-circle-bold.svg +5 -0
- package/src/assets/chevron-up.svg +3 -0
- package/src/assets/file-05.svg +6 -0
- package/src/assets/globe-02.svg +6 -0
- package/src/assets/help-circle.svg +3 -0
- package/src/assets/info-circle.svg +3 -0
- package/src/assets/lock-01.svg +4 -0
- package/src/assets/mail-01.svg +6 -0
- package/src/assets/minus-circle.svg +3 -0
- package/src/assets/phone.svg +6 -0
- package/src/assets/send-03.svg +4 -0
- package/src/assets/share-04.svg +5 -0
- package/src/assets/slash-circle-01.svg +3 -0
- package/src/assets/x-circle-bold.svg +5 -0
- package/src/assets/x-close.svg +3 -0
- package/src/assets/x.svg +3 -0
- package/src/client/MessagingClient.ts +87 -0
- package/src/client/adapters/Audio.ts +10 -0
- package/src/client/adapters/Card.ts +104 -0
- package/src/client/adapters/Carousel.ts +11 -0
- package/src/client/adapters/Choice.ts +48 -0
- package/src/client/adapters/Dropdown.ts +39 -0
- package/src/client/adapters/File.ts +10 -0
- package/src/client/adapters/Image.ts +10 -0
- package/src/client/adapters/Location.ts +18 -0
- package/src/client/adapters/Message.ts +26 -0
- package/src/client/adapters/Text.ts +11 -0
- package/src/client/adapters/Utils.ts +11 -0
- package/src/client/adapters/Video.ts +10 -0
- package/src/client/adapters/Voice.ts +9 -0
- package/src/client/adapters/index.ts +12 -0
- package/src/client/index.ts +2 -0
- package/src/components/Avatar.tsx +22 -0
- package/src/components/Block.tsx +17 -0
- package/src/components/Composer.tsx +115 -0
- package/src/components/Container.tsx +17 -0
- package/src/components/Header.tsx +141 -0
- package/src/components/LoadingIndicator.tsx +15 -0
- package/src/components/Message.tsx +52 -0
- package/src/components/MessageList.tsx +75 -0
- package/src/components/Modal.tsx +49 -0
- package/src/components/RestartConversation.tsx +52 -0
- package/src/components/Webchat.tsx +68 -0
- package/src/components/dev-tools/DevTools.tsx +496 -0
- package/src/components/dev-tools/configuration.tsx +27 -0
- package/src/components/dev-tools/helpers.ts +21 -0
- package/src/components/index.ts +12 -0
- package/src/components/renderers/Audio.tsx +11 -0
- package/src/components/renderers/Bubble.tsx +12 -0
- package/src/components/renderers/Button.tsx +59 -0
- package/src/components/renderers/Carousel.tsx +51 -0
- package/src/components/renderers/Column.tsx +22 -0
- package/src/components/renderers/Dropdown.tsx +170 -0
- package/src/components/renderers/File.tsx +13 -0
- package/src/components/renderers/Image.tsx +63 -0
- package/src/components/renderers/Location.tsx +16 -0
- package/src/components/renderers/Row.tsx +22 -0
- package/src/components/renderers/Text.tsx +32 -0
- package/src/components/renderers/Video.tsx +11 -0
- package/src/components/renderers/index.ts +28 -0
- package/src/contexts/ComposerContext.ts +16 -0
- package/src/contexts/MessageContext.ts +16 -0
- package/src/contexts/ModalContext.ts +19 -0
- package/src/contexts/WebchatContext.ts +61 -0
- package/src/contexts/index.ts +4 -0
- package/src/hooks/index.ts +3 -0
- package/src/hooks/useImageSize.ts +30 -0
- package/src/hooks/useRefresh.ts +33 -0
- package/src/hooks/useWebchatStore.ts +45 -0
- package/src/index.css +18 -0
- package/src/index.ts +3 -0
- package/src/main.tsx +33 -0
- package/src/providers/ModalProvider.tsx +35 -0
- package/src/providers/WebchatProvider.tsx +107 -0
- package/src/providers/index.ts +2 -0
- package/src/schemas/index.ts +1 -0
- package/src/schemas/theme.ts +188 -0
- package/src/services/clipboard.ts +8 -0
- package/src/services/images.ts +39 -0
- package/src/services/index.ts +3 -0
- package/src/services/toast.tsx +71 -0
- package/src/themes/dawn.ts +277 -0
- package/src/themes/duskTheme.ts +349 -0
- package/src/themes/eggplant.ts +353 -0
- package/src/themes/galaxy.ts +323 -0
- package/src/themes/index.ts +6 -0
- package/src/themes/midnight.ts +276 -0
- package/src/themes/prism.ts +349 -0
- package/src/twind.config.ts +31 -0
- package/src/types/block-type.ts +150 -0
- package/src/types/image.ts +10 -0
- package/src/types/index.ts +2 -0
- package/src/vite-env.d.ts +1 -0
- package/tailwind.config.js +0 -0
- package/tsconfig.json +30 -0
- package/tsconfig.node.json +10 -0
- package/vite.config.ts +31 -0
- package/README.md +0 -41
- package/assets/fonts/roboto/roboto.woff2 +0 -0
- package/assets/fonts/roboto/roboto500.woff2 +0 -0
- package/assets/fonts/roboto.css +0 -128
- package/assets/notification.mp3 +0 -0
- package/dist/components/Composer.js +0 -118
- package/dist/components/Container.js +0 -62
- package/dist/components/ConversationList.d.ts +0 -10
- package/dist/components/ConversationList.js +0 -41
- package/dist/components/Footer.d.ts +0 -3
- package/dist/components/Footer.js +0 -21
- package/dist/components/Header.js +0 -181
- package/dist/components/VoiceRecorder.d.ts +0 -10
- package/dist/components/VoiceRecorder.js +0 -137
- package/dist/components/common/Avatar/index.d.ts +0 -9
- package/dist/components/common/Avatar/index.js +0 -13
- package/dist/components/common/BotInfo/index.d.ts +0 -10
- package/dist/components/common/BotInfo/index.js +0 -107
- package/dist/components/common/BotInfo/style.scss +0 -88
- package/dist/components/common/ConfirmDialog/index.d.ts +0 -11
- package/dist/components/common/ConfirmDialog/index.js +0 -78
- package/dist/components/common/ConfirmDialog/style.module.scss +0 -48
- package/dist/components/common/Dialog/index.d.ts +0 -17
- package/dist/components/common/Dialog/index.js +0 -57
- package/dist/components/common/Dialog/style.module.scss +0 -29
- package/dist/components/common/ToolTip/index.d.ts +0 -10
- package/dist/components/common/ToolTip/index.js +0 -163
- package/dist/components/common/ToolTip/style.module.scss +0 -108
- package/dist/components/common/ToolTip/utils.d.ts +0 -15
- package/dist/components/common/ToolTip/utils.js +0 -78
- package/dist/components/common/variables.scss +0 -38
- package/dist/components/messages/InlineFeedback.d.ts +0 -11
- package/dist/components/messages/InlineFeedback.js +0 -56
- package/dist/components/messages/Message.d.ts +0 -11
- package/dist/components/messages/Message.js +0 -106
- package/dist/components/messages/MessageGroup.d.ts +0 -23
- package/dist/components/messages/MessageGroup.js +0 -63
- package/dist/components/messages/MessageList.d.ts +0 -10
- package/dist/components/messages/MessageList.js +0 -148
- package/dist/core/api.d.ts +0 -23
- package/dist/core/api.js +0 -117
- package/dist/core/constants.d.ts +0 -14
- package/dist/core/constants.js +0 -29
- package/dist/core/socket.d.ts +0 -14
- package/dist/core/socket.js +0 -57
- package/dist/declaration.d.ts +0 -2
- package/dist/declaration.js +0 -1
- package/dist/fonts/roboto.d.ts +0 -4
- package/dist/fonts/roboto.js +0 -9
- package/dist/globals.d.ts +0 -7
- package/dist/globals.js +0 -2
- package/dist/icons/Add.d.ts +0 -6
- package/dist/icons/Add.js +0 -10
- package/dist/icons/Cancel.d.ts +0 -5
- package/dist/icons/Cancel.js +0 -10
- package/dist/icons/Chat.d.ts +0 -6
- package/dist/icons/Chat.js +0 -9
- package/dist/icons/Close.d.ts +0 -3
- package/dist/icons/Close.js +0 -10
- package/dist/icons/Delete.d.ts +0 -3
- package/dist/icons/Delete.js +0 -11
- package/dist/icons/Download.d.ts +0 -3
- package/dist/icons/Download.js +0 -10
- package/dist/icons/Email.d.ts +0 -3
- package/dist/icons/Email.js +0 -8
- package/dist/icons/Information.d.ts +0 -3
- package/dist/icons/Information.js +0 -12
- package/dist/icons/List.d.ts +0 -3
- package/dist/icons/List.js +0 -15
- package/dist/icons/Microphone.d.ts +0 -5
- package/dist/icons/Microphone.js +0 -12
- package/dist/icons/Phone.d.ts +0 -3
- package/dist/icons/Phone.js +0 -8
- package/dist/icons/Reload.d.ts +0 -3
- package/dist/icons/Reload.js +0 -10
- package/dist/icons/ThumbsDown.d.ts +0 -3
- package/dist/icons/ThumbsDown.js +0 -11
- package/dist/icons/ThumbsUp.d.ts +0 -3
- package/dist/icons/ThumbsUp.js +0 -11
- package/dist/icons/Website.d.ts +0 -3
- package/dist/icons/Website.js +0 -8
- package/dist/main.js +0 -336
- package/dist/store/composer.d.ts +0 -17
- package/dist/store/composer.js +0 -98
- package/dist/store/index.d.ts +0 -89
- package/dist/store/index.js +0 -604
- package/dist/store/view.d.ts +0 -61
- package/dist/store/view.js +0 -365
- package/dist/translations/ar.json +0 -30
- package/dist/translations/de.json +0 -32
- package/dist/translations/en.json +0 -40
- package/dist/translations/es.json +0 -19
- package/dist/translations/fr.json +0 -40
- package/dist/translations/index.d.ts +0 -9
- package/dist/translations/index.js +0 -95
- package/dist/translations/it.json +0 -38
- package/dist/translations/pt.json +0 -19
- package/dist/translations/ru.json +0 -24
- package/dist/translations/uk.json +0 -24
- package/dist/typings.d.ts +0 -410
- package/dist/typings.js +0 -2
- package/dist/utils/analytics.d.ts +0 -5
- package/dist/utils/analytics.js +0 -37
- package/dist/utils/index.d.ts +0 -3
- package/dist/utils/index.js +0 -27
- package/dist/utils/storage.d.ts +0 -16
- package/dist/utils/storage.js +0 -129
- package/dist/utils/webchatEvents.d.ts +0 -2
- package/dist/utils/webchatEvents.js +0 -14
|
@@ -0,0 +1,276 @@
|
|
|
1
|
+
import { clsx } from 'clsx'
|
|
2
|
+
import { Theme } from '../schemas'
|
|
3
|
+
import { buildColorPalette, selectGrayFromColor } from '../Utils'
|
|
4
|
+
|
|
5
|
+
export function buildMidnightTheme(color: string): Theme {
|
|
6
|
+
const { primary, primaryHover, onPrimary, primaryContainer, onPrimaryContainer } = buildColorPalette(color, 'dark')
|
|
7
|
+
|
|
8
|
+
const gray = selectGrayFromColor(color, ['slate', 'gray'])
|
|
9
|
+
|
|
10
|
+
const textBoldColor = `${gray}-100` as const
|
|
11
|
+
const textSemiBoldColor = `${gray}-200` as const
|
|
12
|
+
const textMediumColor = `${gray}-300` as const
|
|
13
|
+
const textLightColor = `${gray}-400` as const
|
|
14
|
+
const textExtraLightColor = `${gray}-500` as const
|
|
15
|
+
const textPlaceholderColor = `${gray}-500` as const
|
|
16
|
+
const focusColor = `${gray}-500` as const
|
|
17
|
+
const borderColor = `${gray}-600` as const
|
|
18
|
+
const bgLightColor = `${gray}-700` as const
|
|
19
|
+
const bgColor = `${gray}-800` as const
|
|
20
|
+
|
|
21
|
+
return {
|
|
22
|
+
container: {
|
|
23
|
+
className: `w-full bg-${bgColor} text-${textBoldColor} h-full border border-${borderColor} rounded-lg flex flex-col @container relative overflow-hidden [color-scheme:dark]`,
|
|
24
|
+
},
|
|
25
|
+
modal: {
|
|
26
|
+
container: {
|
|
27
|
+
className: `absolute inset-0 z-30 flex p-2 pointer-events-none`,
|
|
28
|
+
},
|
|
29
|
+
overlay: {
|
|
30
|
+
className: `absolute inset-0 z-30 bg-black/30 backdrop-blur-[1px]`,
|
|
31
|
+
},
|
|
32
|
+
dialog: {
|
|
33
|
+
container: {
|
|
34
|
+
className: `mx-auto mt-auto rounded-md bg-${bgColor} p-6 shadow w-full @md:(w-auto mb-auto) pointer-events-auto`,
|
|
35
|
+
},
|
|
36
|
+
title: {
|
|
37
|
+
container: {
|
|
38
|
+
className: `flex items-center justify-between mb-2`,
|
|
39
|
+
},
|
|
40
|
+
text: {
|
|
41
|
+
className: `text-base`,
|
|
42
|
+
},
|
|
43
|
+
closeIcon: {
|
|
44
|
+
className: `h-5 cursor-pointer text-(${textExtraLightColor} hover:${textMediumColor})`,
|
|
45
|
+
},
|
|
46
|
+
},
|
|
47
|
+
content: {
|
|
48
|
+
className: `text-sm text-${textLightColor} flex flex-col`,
|
|
49
|
+
},
|
|
50
|
+
},
|
|
51
|
+
},
|
|
52
|
+
notification: {
|
|
53
|
+
container: {
|
|
54
|
+
className: `group/toast grid w-full grid-cols-[auto_1fr_auto] items-center gap-x-2 rounded-md border border-${borderColor} bg-${bgColor} p-4 shadow-md`,
|
|
55
|
+
},
|
|
56
|
+
title: {
|
|
57
|
+
className: `col-start-2 text-sm font-medium text-${textBoldColor}`,
|
|
58
|
+
},
|
|
59
|
+
description: {
|
|
60
|
+
className: `col-start-2 mt-1 text-sm text-${textExtraLightColor}`,
|
|
61
|
+
},
|
|
62
|
+
icon: {
|
|
63
|
+
className: `aspect-square h-5 group-data-[type=error]/toast:text-red-500 group-data-[type=success]/toast:text-green-500`,
|
|
64
|
+
},
|
|
65
|
+
closeIcon: {
|
|
66
|
+
className: `col-start-3 row-start-1 aspect-square h-5 hover:cursor-pointer`,
|
|
67
|
+
},
|
|
68
|
+
},
|
|
69
|
+
header: {
|
|
70
|
+
container: {
|
|
71
|
+
className: `rounded-t-md p-1 mb-auto group/header flex flex-col shadow border-b border-${borderColor}`,
|
|
72
|
+
},
|
|
73
|
+
content: {
|
|
74
|
+
container: {
|
|
75
|
+
className: `grid grow cursor-pointer grid-cols-[auto_1fr_auto] items-center gap-x-2 rounded-md p-1 text-left transition-colors hover:bg-${bgLightColor} `,
|
|
76
|
+
},
|
|
77
|
+
title: { className: `text-base font-medium` },
|
|
78
|
+
description: {
|
|
79
|
+
className: `text-sm group-data-[state=closed]/header:hidden col-start-2`,
|
|
80
|
+
},
|
|
81
|
+
avatar: {
|
|
82
|
+
container: {
|
|
83
|
+
className: `row-span-1 group-data-[state=open]/header:row-span-2 mr-2 p-px pl-2 rounded-full overflow-hidden group-data-[state=open]/header:m-2`,
|
|
84
|
+
},
|
|
85
|
+
image: {
|
|
86
|
+
className: `aspect-square h-8 rounded-full group-data-[state=open]/header:h-12`,
|
|
87
|
+
},
|
|
88
|
+
fallback: {
|
|
89
|
+
className: `bg-${borderColor} flex h-full w-full items-center justify-center rounded-full`,
|
|
90
|
+
},
|
|
91
|
+
},
|
|
92
|
+
actions: {
|
|
93
|
+
container: {
|
|
94
|
+
className: `col-start-3 row-span-1 group-data-[state=open]/header:row-span-2 !row-start-1 flex`,
|
|
95
|
+
},
|
|
96
|
+
icons: {
|
|
97
|
+
className: `h-9 w-9 cursor-pointer rounded-md p-2 text-[${primary}] transition-colors hover:bg-${borderColor}`,
|
|
98
|
+
},
|
|
99
|
+
},
|
|
100
|
+
},
|
|
101
|
+
expandedContent: {
|
|
102
|
+
container: {
|
|
103
|
+
className: `flex justify-center @md:justify-start @md:ml-[5.5rem] gap-4 text-sm items-center group-data-[state=open]/header:py-4`,
|
|
104
|
+
},
|
|
105
|
+
descriptionItems: {
|
|
106
|
+
container: {
|
|
107
|
+
className: `flex data-[email]:col-span-2 cursor-pointer`,
|
|
108
|
+
},
|
|
109
|
+
icon: {
|
|
110
|
+
className: `mr-3 h-5 w-5 text-[${primary}]`,
|
|
111
|
+
},
|
|
112
|
+
text: {
|
|
113
|
+
className: `hidden`,
|
|
114
|
+
},
|
|
115
|
+
link: {
|
|
116
|
+
className: `hidden`,
|
|
117
|
+
},
|
|
118
|
+
},
|
|
119
|
+
},
|
|
120
|
+
},
|
|
121
|
+
composer: {
|
|
122
|
+
container: {
|
|
123
|
+
className: `group/composer-container shadow bg-${bgLightColor} border border-(${bgLightColor} focus-within:${focusColor}) m-2 rounded-md transition-colors flex items-center `,
|
|
124
|
+
},
|
|
125
|
+
input: {
|
|
126
|
+
className: `flex-grow outline-none px-2 m-0.5 rounded-md placeholder-${textPlaceholderColor} bg-inherit text-sm resize-none h-[3em]`,
|
|
127
|
+
},
|
|
128
|
+
button: {
|
|
129
|
+
container: {
|
|
130
|
+
className: `group-data-[disabled=true]/composer-container:hidden h-11 p-2 rounded-full transition-colors text-([${primary}] hover:[${primaryHover}]) disabled:hidden flex items-center justify-center`,
|
|
131
|
+
},
|
|
132
|
+
icon: {
|
|
133
|
+
className: `h-full w-full`,
|
|
134
|
+
},
|
|
135
|
+
},
|
|
136
|
+
},
|
|
137
|
+
messageList: {
|
|
138
|
+
className: `flex flex-col gap-2 p-4 overflow-y-auto overflow-x-hidden scroll-smooth`,
|
|
139
|
+
},
|
|
140
|
+
message: {
|
|
141
|
+
container: {
|
|
142
|
+
className: clsx(
|
|
143
|
+
`flex group gap-2 text-sm text-${textMediumColor}`,
|
|
144
|
+
`data-[direction=incoming]:justify-start data-[direction=outgoing]:justify-end data-[loaded=false]:hidden`
|
|
145
|
+
),
|
|
146
|
+
},
|
|
147
|
+
avatar: {
|
|
148
|
+
container: {
|
|
149
|
+
className: `relative h-6 w-6 shrink-0 overflow-hidden rounded-full hidden self-end group-data-[direction=incoming]:flex`,
|
|
150
|
+
},
|
|
151
|
+
image: {
|
|
152
|
+
className: `aspect-square h-full w-full`,
|
|
153
|
+
},
|
|
154
|
+
fallback: {
|
|
155
|
+
className: `bg-${borderColor} flex h-full w-full items-center justify-center rounded-full`,
|
|
156
|
+
},
|
|
157
|
+
},
|
|
158
|
+
blocks: {
|
|
159
|
+
text: {
|
|
160
|
+
heading1: {
|
|
161
|
+
className: `text-xl font-medium text-${textBoldColor} group-data-[direction=outgoing]:text-[${onPrimaryContainer}]`,
|
|
162
|
+
},
|
|
163
|
+
heading2: {
|
|
164
|
+
className: `text-lg text-${textBoldColor} group-data-[direction=outgoing]:text-[${onPrimaryContainer}]`,
|
|
165
|
+
},
|
|
166
|
+
heading3: {
|
|
167
|
+
className: `text-base`,
|
|
168
|
+
},
|
|
169
|
+
unorderedList: {
|
|
170
|
+
className: `list-disc list-inside marker:text-${textExtraLightColor} group-data-[direction=outgoing]:marker:text-[${onPrimaryContainer}]`,
|
|
171
|
+
},
|
|
172
|
+
orderedList: {
|
|
173
|
+
className: `list-decimal list-inside marker:text-${textLightColor} group-data-[direction=outgoing]:marker:text-[${onPrimaryContainer}]`,
|
|
174
|
+
},
|
|
175
|
+
},
|
|
176
|
+
button: {
|
|
177
|
+
className: `bg-([${primary}] hover:[${primaryHover}]) rounded-2xl p-1 text-sm px-3 text-[${onPrimary}] data-[activated]:hidden data-[group-activated]:hidden`,
|
|
178
|
+
},
|
|
179
|
+
image: {
|
|
180
|
+
image: {
|
|
181
|
+
className: clsx(
|
|
182
|
+
`border border-${borderColor} rounded-2xl object-cover w-[95%]`,
|
|
183
|
+
`data-[orientation=landscape]:aspect-[4/3]`,
|
|
184
|
+
`data-[orientation=portrait]:aspect-[3/4]`,
|
|
185
|
+
`data-[orientation=square]:aspect-square`,
|
|
186
|
+
`@xs:w-56`,
|
|
187
|
+
`data-[loaded=false]:hidden`
|
|
188
|
+
),
|
|
189
|
+
},
|
|
190
|
+
placeholder: {
|
|
191
|
+
className: clsx(
|
|
192
|
+
`border border-${borderColor} rounded-2xl bg-${bgLightColor} animate-pulse`,
|
|
193
|
+
`data-[orientation=landscape]:aspect-[4/3]`,
|
|
194
|
+
`data-[orientation=portrait]:aspect-[3/4]`,
|
|
195
|
+
`data-[orientation=square]:aspect-square`,
|
|
196
|
+
`@xs:w-56`
|
|
197
|
+
),
|
|
198
|
+
},
|
|
199
|
+
},
|
|
200
|
+
video: {
|
|
201
|
+
className: `border border-${borderColor} rounded-2xl`,
|
|
202
|
+
},
|
|
203
|
+
location: {
|
|
204
|
+
container: {
|
|
205
|
+
className: `flex gap-2 group items-center p-1`,
|
|
206
|
+
},
|
|
207
|
+
title: {
|
|
208
|
+
className: `text-sm text-[${primaryHover}] font-medium group-hover:underline`,
|
|
209
|
+
},
|
|
210
|
+
icon: {
|
|
211
|
+
className: `h-5 w-5 text-[${primary}]`,
|
|
212
|
+
},
|
|
213
|
+
},
|
|
214
|
+
row: {
|
|
215
|
+
className: clsx(
|
|
216
|
+
`flex gap-2 flex-wrap`,
|
|
217
|
+
`data-[horizontal=center]:justify-center`,
|
|
218
|
+
`data-[horizontal=right]:justify-end`,
|
|
219
|
+
`data-[horizontal=stretch]:justify-between`,
|
|
220
|
+
`data-[vertical=center]:items-center`,
|
|
221
|
+
`data-[vertical=bottom]:items-end`
|
|
222
|
+
),
|
|
223
|
+
},
|
|
224
|
+
column: {
|
|
225
|
+
className: clsx(
|
|
226
|
+
`flex flex-col gap-2 w-fit group/container`,
|
|
227
|
+
`data-[horizontal=center]:items-center`,
|
|
228
|
+
`data-[horizontal=right]:items-end`,
|
|
229
|
+
`data-[vertical=center]:justify-center`,
|
|
230
|
+
`data-[vertical=bottom]:justify-end`,
|
|
231
|
+
`data-[vertical=stretch]:justify-between`
|
|
232
|
+
),
|
|
233
|
+
},
|
|
234
|
+
bubble: {
|
|
235
|
+
className: clsx(
|
|
236
|
+
'rounded-2xl p-2 max-w-[85%] font-medium',
|
|
237
|
+
`group-data-[direction=incoming]:(rounded-bl-sm bg-${bgLightColor} border-${borderColor} text-${textSemiBoldColor})`,
|
|
238
|
+
`group-data-[direction=outgoing]:(rounded-br-sm text-[${onPrimaryContainer}]) bg-[${primaryContainer}]`
|
|
239
|
+
),
|
|
240
|
+
},
|
|
241
|
+
carousel: {
|
|
242
|
+
container: {
|
|
243
|
+
className: `group relative overflow-hidden`,
|
|
244
|
+
},
|
|
245
|
+
slidesContainer: {
|
|
246
|
+
className: `grid auto-cols-[90%] grid-flow-col gap-x-2 object-cover px-2 @md:auto-cols-max [&>*]:max-w-[26rem]`,
|
|
247
|
+
},
|
|
248
|
+
backButton: {
|
|
249
|
+
className: clsx(
|
|
250
|
+
`absolute left-1 top-1/2 h-7 -translate-y-1/2 rounded-full bg-${textMediumColor} bg-opacity-20 p-0.5 text-${borderColor} shadow transition-all`,
|
|
251
|
+
`hover:(scale-110 cursor-pointer) group-hover:(bg-opacity-80 text-${bgLightColor}) data-[disabled]:hidden`
|
|
252
|
+
),
|
|
253
|
+
},
|
|
254
|
+
nextButton: {
|
|
255
|
+
className: clsx(
|
|
256
|
+
`absolute right-1 top-1/2 h-7 -translate-y-1/2 rounded-full bg-${textMediumColor} bg-opacity-20 p-0.5 text-${borderColor} shadow transition-all`,
|
|
257
|
+
`hover:(scale-110 cursor-pointer) group-hover:(bg-opacity-80 text-${bgLightColor}) data-[disabled]:hidden`
|
|
258
|
+
),
|
|
259
|
+
},
|
|
260
|
+
},
|
|
261
|
+
},
|
|
262
|
+
},
|
|
263
|
+
loadingIndicator: {
|
|
264
|
+
container: {
|
|
265
|
+
className: clsx(
|
|
266
|
+
`flex items-end gap-1.5 bg-${bgLightColor} rounded-lg p-2`,
|
|
267
|
+
`before:(animate-jump h-1.5 w-1.5 rounded-full bg-${textMediumColor})`,
|
|
268
|
+
`after:(animate-jump h-1.5 w-1.5 rounded-full bg-${textMediumColor} [animation-delay:0.2s])`
|
|
269
|
+
),
|
|
270
|
+
},
|
|
271
|
+
loader: {
|
|
272
|
+
className: clsx(`animate-jump h-1.5 w-1.5 rounded-full bg-${textMediumColor} [animation-delay:0.1s]`),
|
|
273
|
+
},
|
|
274
|
+
},
|
|
275
|
+
}
|
|
276
|
+
}
|
|
@@ -0,0 +1,349 @@
|
|
|
1
|
+
import { clsx } from 'clsx'
|
|
2
|
+
import { Theme } from '../schemas'
|
|
3
|
+
|
|
4
|
+
export const prismTheme: Theme = {
|
|
5
|
+
container: {
|
|
6
|
+
className:
|
|
7
|
+
'w-full h-full border border-gray-200 rounded-lg flex flex-col @container relative overflow-hidden font-rubik',
|
|
8
|
+
},
|
|
9
|
+
modal: {
|
|
10
|
+
container: {
|
|
11
|
+
className: 'absolute inset-0 z-30 flex p-2 pointer-events-none',
|
|
12
|
+
},
|
|
13
|
+
overlay: {
|
|
14
|
+
className: 'absolute inset-0 z-30 bg-black/30 backdrop-blur-[1px]',
|
|
15
|
+
},
|
|
16
|
+
dialog: {
|
|
17
|
+
container: {
|
|
18
|
+
className:
|
|
19
|
+
'mx-auto mt-auto rounded-md bg-white p-6 text-gray-900 shadow w-full @md:w-auto @md:mb-auto pointer-events-auto',
|
|
20
|
+
},
|
|
21
|
+
title: {
|
|
22
|
+
container: {
|
|
23
|
+
className: 'flex items-center justify-between mb-2',
|
|
24
|
+
},
|
|
25
|
+
text: {
|
|
26
|
+
className: 'text-base text-gray-900',
|
|
27
|
+
},
|
|
28
|
+
closeIcon: {
|
|
29
|
+
className: 'h-5 cursor-pointer text-gray-500 hover:text-gray-700',
|
|
30
|
+
},
|
|
31
|
+
},
|
|
32
|
+
content: {
|
|
33
|
+
className: 'text-sm text-gray-600 flex flex-col',
|
|
34
|
+
},
|
|
35
|
+
},
|
|
36
|
+
},
|
|
37
|
+
notification: {
|
|
38
|
+
container: {
|
|
39
|
+
className:
|
|
40
|
+
'group/toast grid w-full grid-cols-[auto_1fr_auto] items-center gap-x-2 rounded-md border border-gray-200 bg-white p-4 shadow-md',
|
|
41
|
+
},
|
|
42
|
+
title: {
|
|
43
|
+
className: 'col-start-2 text-sm font-medium text-gray-900',
|
|
44
|
+
},
|
|
45
|
+
description: {
|
|
46
|
+
className: 'col-start-2 mt-1 text-sm text-gray-500',
|
|
47
|
+
},
|
|
48
|
+
icon: {
|
|
49
|
+
className:
|
|
50
|
+
'aspect-square h-5 group-data-[type=error]/toast:text-red-500 group-data-[type=success]/toast:text-green-500',
|
|
51
|
+
},
|
|
52
|
+
closeIcon: {
|
|
53
|
+
className: 'col-start-3 row-start-1 aspect-square h-5 hover:cursor-pointer',
|
|
54
|
+
},
|
|
55
|
+
},
|
|
56
|
+
header: {
|
|
57
|
+
container: {
|
|
58
|
+
className: 'rounded-t-md p-1 mb-auto group/header flex flex-col shadow',
|
|
59
|
+
},
|
|
60
|
+
content: {
|
|
61
|
+
container: {
|
|
62
|
+
className: clsx(
|
|
63
|
+
'grid grow cursor-pointer grid-cols-[auto_1fr_auto] items-center gap-x-2 rounded-md p-1 px-3 text-left transition-colors hover:bg-gray-100 ',
|
|
64
|
+
'group-data-[state=open]/header:(grid-cols-1 justify-items-center)'
|
|
65
|
+
),
|
|
66
|
+
},
|
|
67
|
+
title: { className: 'text-base text-gray-600 py-0.5 font-medium' },
|
|
68
|
+
description: {
|
|
69
|
+
className: clsx(
|
|
70
|
+
'text-sm text-gray-500 font-light py-0.5',
|
|
71
|
+
'group-data-[state=closed]/header:(truncate col-start-2)',
|
|
72
|
+
'group-data-[state=open]/header:text-center'
|
|
73
|
+
),
|
|
74
|
+
},
|
|
75
|
+
avatar: {
|
|
76
|
+
container: {
|
|
77
|
+
className: clsx(
|
|
78
|
+
'mr-2 p-px rounded-full overflow-hidden',
|
|
79
|
+
'group-data-[state=closed]/header:row-span-2',
|
|
80
|
+
'group-data-[state=open]/header:(mt-6 mb-2)'
|
|
81
|
+
),
|
|
82
|
+
},
|
|
83
|
+
image: {
|
|
84
|
+
className: 'aspect-square h-8 rounded-full group-data-[state=open]/header:h-16',
|
|
85
|
+
},
|
|
86
|
+
fallback: {
|
|
87
|
+
className: 'bg-gray-200 flex h-full w-full items-center justify-center rounded-full',
|
|
88
|
+
},
|
|
89
|
+
},
|
|
90
|
+
actions: {
|
|
91
|
+
container: {
|
|
92
|
+
className: clsx(
|
|
93
|
+
'flex',
|
|
94
|
+
'group-data-[state=open]/header:hidden',
|
|
95
|
+
'group-data-[state=closed]/header:(col-start-3 row-span-2 !row-start-1)'
|
|
96
|
+
),
|
|
97
|
+
},
|
|
98
|
+
icons: {
|
|
99
|
+
className: 'h-9 w-9 cursor-pointer rounded-md p-2 text-gray-400 transition-colors hover:bg-gray-200 ',
|
|
100
|
+
},
|
|
101
|
+
},
|
|
102
|
+
},
|
|
103
|
+
expandedContent: {
|
|
104
|
+
container: {
|
|
105
|
+
className:
|
|
106
|
+
'grid grid-cols-[repeat(6,auto)] justify-items-center text-sm items-center gap-(4 y-6) px-2 group-data-[state=open]/header:py-2 mx-auto',
|
|
107
|
+
},
|
|
108
|
+
descriptionItems: {
|
|
109
|
+
container: {
|
|
110
|
+
className: clsx(
|
|
111
|
+
'flex items-center gap-1 group/description-item text-xs text-gray-500 col-span-2 hover:cursor-pointer',
|
|
112
|
+
'data-[terms]:col-span-3',
|
|
113
|
+
'data-[privacy]:col-span-3'
|
|
114
|
+
),
|
|
115
|
+
},
|
|
116
|
+
icon: {
|
|
117
|
+
className: clsx(
|
|
118
|
+
'h-12 p-3 text-white rounded-full',
|
|
119
|
+
'group-data-[phone]/description-item:bg-green-600/90',
|
|
120
|
+
'group-data-[email]/description-item:bg-red-600/90',
|
|
121
|
+
'group-data-[website]/description-item:bg-blue-600/90',
|
|
122
|
+
'group-data-[privacy]/description-item:(h-5 p-0 text-gray-400)',
|
|
123
|
+
'group-data-[terms]/description-item:(h-5 text-gray-400 p-0)'
|
|
124
|
+
),
|
|
125
|
+
},
|
|
126
|
+
text: {
|
|
127
|
+
className: clsx(
|
|
128
|
+
'truncate pt-1',
|
|
129
|
+
'group-data-[email]/description-item:hidden',
|
|
130
|
+
'group-data-[phone]/description-item:hidden',
|
|
131
|
+
'group-data-[website]/description-item:hidden'
|
|
132
|
+
),
|
|
133
|
+
},
|
|
134
|
+
link: {
|
|
135
|
+
className: clsx(
|
|
136
|
+
'truncate group-hover/description-item:underline pt-1',
|
|
137
|
+
'group-data-[email]/description-item:hidden',
|
|
138
|
+
'group-data-[phone]/description-item:hidden',
|
|
139
|
+
'group-data-[website]/description-item:hidden'
|
|
140
|
+
),
|
|
141
|
+
},
|
|
142
|
+
},
|
|
143
|
+
},
|
|
144
|
+
newConversationIcon: {
|
|
145
|
+
className:
|
|
146
|
+
'h-9 w-9 text-zinc-500 p-2 cursor-pointer ml-auto hover:text-zinc-700 transition-colors row-span-2 row-start-1 col-start-6',
|
|
147
|
+
},
|
|
148
|
+
},
|
|
149
|
+
composer: {
|
|
150
|
+
container: {
|
|
151
|
+
className:
|
|
152
|
+
'group/composer-container shadow border border-gray-100 m-2 rounded-full transition-colors flex gap-2 items-center focus-within:border-zinc-300',
|
|
153
|
+
},
|
|
154
|
+
input: {
|
|
155
|
+
className: 'flex-grow outline-none px-2 m-3 rounded-md placeholder-gray-400 text-sm resize-none h-[1.5em]',
|
|
156
|
+
},
|
|
157
|
+
button: {
|
|
158
|
+
container: {
|
|
159
|
+
className:
|
|
160
|
+
'group-data-[disabled=true]/composer-container:hidden h-11 p-2 rounded-full transition-colors text-blue-500 hover:text-blue-600 disabled:hidden flex items-center justify-center',
|
|
161
|
+
},
|
|
162
|
+
icon: {
|
|
163
|
+
className: 'h-full w-full',
|
|
164
|
+
},
|
|
165
|
+
},
|
|
166
|
+
},
|
|
167
|
+
messageList: {
|
|
168
|
+
className: 'flex flex-col gap-2 p-4 overflow-y-auto overflow-x-hidden scroll-smooth',
|
|
169
|
+
},
|
|
170
|
+
message: {
|
|
171
|
+
container: {
|
|
172
|
+
className: clsx(
|
|
173
|
+
'flex group gap-2 text-sm text-gray-700',
|
|
174
|
+
'data-[direction=incoming]:justify-start data-[direction=outgoing]:justify-end data-[loaded=false]:hidden'
|
|
175
|
+
),
|
|
176
|
+
},
|
|
177
|
+
avatar: {
|
|
178
|
+
container: {
|
|
179
|
+
className:
|
|
180
|
+
'relative h-7 w-7 shrink-0 overflow-hidden rounded-full hidden self-end group-data-[direction=incoming]:flex',
|
|
181
|
+
},
|
|
182
|
+
image: {
|
|
183
|
+
className: 'aspect-square h-full w-full',
|
|
184
|
+
},
|
|
185
|
+
fallback: {
|
|
186
|
+
className: 'bg-gray-200 flex h-full w-full items-center justify-center rounded-full',
|
|
187
|
+
},
|
|
188
|
+
},
|
|
189
|
+
blocks: {
|
|
190
|
+
text: {
|
|
191
|
+
text: {
|
|
192
|
+
className: '',
|
|
193
|
+
},
|
|
194
|
+
heading1: {
|
|
195
|
+
className: 'text-xl font-medium text-gray-900 group-data-[direction=outgoing]:text-blue-800',
|
|
196
|
+
},
|
|
197
|
+
heading2: {
|
|
198
|
+
className: 'text-lg text-gray-900 group-data-[direction=outgoing]:text-blue-800',
|
|
199
|
+
},
|
|
200
|
+
heading3: {
|
|
201
|
+
className: 'text-base',
|
|
202
|
+
},
|
|
203
|
+
unorderedList: {
|
|
204
|
+
className: 'list-disc list-inside marker:text-gray-500 group-data-[direction=outgoing]:marker:text-blue-800',
|
|
205
|
+
},
|
|
206
|
+
orderedList: {
|
|
207
|
+
className:
|
|
208
|
+
'list-decimal list-inside marker:text-gray-600 group-data-[direction=outgoing]:marker:text-blue-800',
|
|
209
|
+
},
|
|
210
|
+
},
|
|
211
|
+
button: {
|
|
212
|
+
className:
|
|
213
|
+
'bg-blue-500 rounded-md p-2 text-sm px-3 text-white data-[activated]:hidden data-[group-activated]:hidden',
|
|
214
|
+
},
|
|
215
|
+
image: {
|
|
216
|
+
image: {
|
|
217
|
+
className: clsx(
|
|
218
|
+
'border border-gray-200 rounded-2xl object-cover w-[95%]',
|
|
219
|
+
'data-[orientation=landscape]:aspect-[4/3]',
|
|
220
|
+
'data-[orientation=portrait]:aspect-[3/4]',
|
|
221
|
+
'data-[orientation=square]:aspect-square',
|
|
222
|
+
'@xs:w-56',
|
|
223
|
+
'data-[loaded=false]:hidden'
|
|
224
|
+
),
|
|
225
|
+
},
|
|
226
|
+
placeholder: {
|
|
227
|
+
className: clsx(
|
|
228
|
+
'border border-gray-200 rounded-2xl bg-red-300 animate-pulse',
|
|
229
|
+
'data-[orientation=landscape]:aspect-[4/3]',
|
|
230
|
+
'data-[orientation=portrait]:aspect-[3/4]',
|
|
231
|
+
'data-[orientation=square]:aspect-square',
|
|
232
|
+
'@xs:w-56'
|
|
233
|
+
),
|
|
234
|
+
},
|
|
235
|
+
},
|
|
236
|
+
video: {
|
|
237
|
+
className: 'border border-gray-200 rounded-2xl',
|
|
238
|
+
},
|
|
239
|
+
location: {
|
|
240
|
+
container: {
|
|
241
|
+
className: 'flex gap-2 group items-center p-1 bg-gray-100 py-2 px-4 rounded-3xl',
|
|
242
|
+
},
|
|
243
|
+
title: {
|
|
244
|
+
className: 'text-gray-700 group-hover:underline mt-1',
|
|
245
|
+
},
|
|
246
|
+
icon: {
|
|
247
|
+
className: 'h-5 w-5 text-red-600',
|
|
248
|
+
},
|
|
249
|
+
},
|
|
250
|
+
file: {
|
|
251
|
+
container: {
|
|
252
|
+
className: 'flex gap-2 group items-center p-1 bg-green-50 py-2 px-4 rounded-3xl truncate',
|
|
253
|
+
},
|
|
254
|
+
title: {
|
|
255
|
+
className: 'text-green-800 group-hover:(underline text-green-900) mt-1 truncate',
|
|
256
|
+
},
|
|
257
|
+
icon: {
|
|
258
|
+
className: 'h-5 w-5 text-green-700 group-hover:text-green-800 flex-none',
|
|
259
|
+
},
|
|
260
|
+
},
|
|
261
|
+
row: {
|
|
262
|
+
className: clsx(
|
|
263
|
+
'flex gap-2 flex-wrap',
|
|
264
|
+
'data-[horizontal=center]:justify-center',
|
|
265
|
+
'data-[horizontal=right]:justify-end',
|
|
266
|
+
'data-[horizontal=stretch]:justify-between',
|
|
267
|
+
'data-[vertical=center]:items-center',
|
|
268
|
+
'data-[vertical=bottom]:items-end'
|
|
269
|
+
),
|
|
270
|
+
},
|
|
271
|
+
column: {
|
|
272
|
+
className: clsx(
|
|
273
|
+
'flex flex-col gap-2 w-fit group/container',
|
|
274
|
+
'data-[horizontal=center]:items-center',
|
|
275
|
+
'data-[horizontal=right]:items-end',
|
|
276
|
+
'data-[vertical=center]:justify-center',
|
|
277
|
+
'data-[vertical=bottom]:justify-end',
|
|
278
|
+
'data-[vertical=stretch]:justify-between'
|
|
279
|
+
),
|
|
280
|
+
},
|
|
281
|
+
bubble: {
|
|
282
|
+
className: clsx(
|
|
283
|
+
'rounded-3xl p-2 px-4 max-w-[85%]',
|
|
284
|
+
'group-data-[direction=outgoing]:(bg-blue-100 text-blue-800 rounded-br-md)',
|
|
285
|
+
'group-data-[direction=incoming]:(rounded-bl-md bg-gray-100 border-gray-200 text-gray-800)'
|
|
286
|
+
),
|
|
287
|
+
},
|
|
288
|
+
carousel: {
|
|
289
|
+
container: {
|
|
290
|
+
className: 'group relative overflow-hidden',
|
|
291
|
+
},
|
|
292
|
+
slidesContainer: {
|
|
293
|
+
className:
|
|
294
|
+
'grid auto-cols-[90%] grid-flow-col gap-x-2 object-cover px-2 @md:auto-cols-max [&>*]:max-w-[26rem]',
|
|
295
|
+
},
|
|
296
|
+
backButton: {
|
|
297
|
+
className: clsx(
|
|
298
|
+
'absolute left-1 top-1/2 h-7 -translate-y-1/2 rounded-full bg-gray-700 bg-opacity-20 p-0.5 text-gray-200 shadow transition-all',
|
|
299
|
+
'hover:(scale-110 cursor-pointer) group-hover:(bg-opacity-80 text-gray-100) data-[disabled]:hidden'
|
|
300
|
+
),
|
|
301
|
+
},
|
|
302
|
+
nextButton: {
|
|
303
|
+
className: clsx(
|
|
304
|
+
'absolute right-1 top-1/2 h-7 -translate-y-1/2 rounded-full bg-gray-700 bg-opacity-20 p-0.5 text-gray-200 shadow transition-all',
|
|
305
|
+
'hover:(scale-110 cursor-pointer) group-hover:(bg-opacity-80 text-gray-100) data-[disabled]:hidden'
|
|
306
|
+
),
|
|
307
|
+
},
|
|
308
|
+
},
|
|
309
|
+
dropdown: {
|
|
310
|
+
button: {
|
|
311
|
+
container: {
|
|
312
|
+
className: clsx(
|
|
313
|
+
'flex max-w-[80%] cursor-pointer items-center justify-between rounded-md border border-gray-200 bg-white p-2 hover:border-gray-300 ',
|
|
314
|
+
'truncate data-[disabled]:cursor-not-allowed data-[disabled]:bg-gray-50 data-[disabled]:hover:border-gray-200'
|
|
315
|
+
),
|
|
316
|
+
},
|
|
317
|
+
text: {
|
|
318
|
+
className: 'truncate',
|
|
319
|
+
},
|
|
320
|
+
icon: {
|
|
321
|
+
className: 'ml-2 inline-block h-4 w-4',
|
|
322
|
+
},
|
|
323
|
+
},
|
|
324
|
+
content: {
|
|
325
|
+
container: {
|
|
326
|
+
className:
|
|
327
|
+
'min-w-[100px] overflow-y-auto rounded-md border border-gray-200 bg-white text-sm text-gray-700 outline-none',
|
|
328
|
+
},
|
|
329
|
+
item: {
|
|
330
|
+
className:
|
|
331
|
+
'cursor-pointer p-2 outline-none transition-colors data-[active]:bg-gray-50 data-[active]:text-gray-900',
|
|
332
|
+
},
|
|
333
|
+
},
|
|
334
|
+
},
|
|
335
|
+
},
|
|
336
|
+
},
|
|
337
|
+
loadingIndicator: {
|
|
338
|
+
container: {
|
|
339
|
+
className: clsx(
|
|
340
|
+
'flex items-end gap-1.5 border border-gray-200 bg-gray-100 rounded-lg p-2',
|
|
341
|
+
'before:(animate-jump h-1.5 w-1.5 rounded-full bg-gray-600)',
|
|
342
|
+
'after:(animate-jump h-1.5 w-1.5 rounded-full bg-gray-600 [animation-delay:0.2s])'
|
|
343
|
+
),
|
|
344
|
+
},
|
|
345
|
+
loader: {
|
|
346
|
+
className: clsx('animate-jump h-1.5 w-1.5 rounded-full bg-gray-600 [animation-delay:0.1s]'),
|
|
347
|
+
},
|
|
348
|
+
},
|
|
349
|
+
}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { defineConfig } from '@twind/core'
|
|
2
|
+
import presetAutoprefix from '@twind/preset-autoprefix'
|
|
3
|
+
import presetTailwind from '@twind/preset-tailwind'
|
|
4
|
+
import presetContainerQueries from '@twind/preset-container-queries'
|
|
5
|
+
|
|
6
|
+
export const config = defineConfig({
|
|
7
|
+
presets: [presetAutoprefix(), presetTailwind(), presetContainerQueries()],
|
|
8
|
+
theme: {
|
|
9
|
+
fontFamily: {
|
|
10
|
+
sans: ['Inter', 'sans-serif'],
|
|
11
|
+
rubik: ['Rubik', 'sans-serif'],
|
|
12
|
+
plex: ['IBM Plex Sans', 'sans-serif'],
|
|
13
|
+
mono: ['Fira Code', 'monospace'],
|
|
14
|
+
},
|
|
15
|
+
extend: {
|
|
16
|
+
keyframes: {
|
|
17
|
+
jump: {
|
|
18
|
+
'0%, 40%': {
|
|
19
|
+
transform: 'translateY(0%) scale(1)',
|
|
20
|
+
},
|
|
21
|
+
'20%': {
|
|
22
|
+
transform: 'translateY(-100%) scale(1.11)',
|
|
23
|
+
},
|
|
24
|
+
},
|
|
25
|
+
},
|
|
26
|
+
animation: {
|
|
27
|
+
jump: 'jump 1.5s ease-in infinite',
|
|
28
|
+
},
|
|
29
|
+
},
|
|
30
|
+
},
|
|
31
|
+
})
|