@clubmed/trident-ui 2.0.0-alpha.30 → 2.0.0-alpha.31
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/README.md +17 -4
- package/package.json +1 -1
- package/ui/ChatButton.d.ts +1 -2
- package/ui/ChatButton.js.map +1 -1
package/README.md
CHANGED
|
@@ -33,29 +33,42 @@ React UI components is a library of reusable components for building web applica
|
|
|
33
33
|
|
|
34
34
|
```sh
|
|
35
35
|
npm install --save @clubmed/trident-icons @clubmed/trident-ui react react-dom
|
|
36
|
-
npm install --save-dev tailwindcss
|
|
36
|
+
npm install --save-dev tailwindcss @tailwindcss/vite
|
|
37
37
|
```
|
|
38
38
|
|
|
39
39
|
```sh
|
|
40
40
|
yarn add @clubmed/trident-icons @clubmed/trident-ui react react-dom
|
|
41
|
-
yarn add -D tailwindcss
|
|
41
|
+
yarn add -D tailwindcss @tailwindcss/vite
|
|
42
42
|
```
|
|
43
43
|
|
|
44
44
|
```sh
|
|
45
45
|
pnpm add @clubmed/trident-icons @clubmed/trident-ui react react-dom
|
|
46
|
-
pnpm add -D tailwindcss
|
|
46
|
+
pnpm add -D tailwindcss @tailwindcss/vite
|
|
47
47
|
```
|
|
48
48
|
|
|
49
49
|
> If you use vite, you can install `@tailwindcss/vite` instead of using postcss. See [Tailwind vite documentation](https://tailwindcss.com/docs/installation/using-vite)
|
|
50
50
|
|
|
51
51
|
## Configuration
|
|
52
52
|
|
|
53
|
-
|
|
53
|
+
Add `@tailwindcss/vite` to your `vite.config.ts` plugins:
|
|
54
|
+
|
|
55
|
+
```ts
|
|
56
|
+
import tailwindcss from '@tailwindcss/vite';
|
|
57
|
+
|
|
58
|
+
export default defineConfig({
|
|
59
|
+
plugins: [react(), tailwindcss()],
|
|
60
|
+
});
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
Then, add the styles to your `index.css` file:
|
|
54
64
|
|
|
55
65
|
```css
|
|
56
66
|
@import '@clubmed/trident-ui/style.css';
|
|
67
|
+
@source '../node_modules/@clubmed/trident-ui/ui/**/*.js'; /* Important, this line is required to make Tailwind CSS work with Trident UI components */
|
|
57
68
|
```
|
|
58
69
|
|
|
70
|
+
> `@source` must be relative to the file where you import it, and must point to the `ui` directory of the library. This is required to make Tailwind CSS work with Trident UI components, as it needs to scan the source files to generate the correct styles.
|
|
71
|
+
|
|
59
72
|
## Tailwind Merge configuration
|
|
60
73
|
|
|
61
74
|
The design tokens shipped with Trident UI use custom `text-*` utilities (`text-b5`, `text-h2`, etc.) that behave like font-size helpers. When consumers rely on [`tailwind-merge`](https://github.com/dcastil/tailwind-merge) to compose classes, these tokens must be registered as typography utilities; otherwise `tailwind-merge` may wrongly treat them as text-color classes and drop valid styles (for example `twMerge('text-b5', 'text-white')` would remove `text-white`).
|
package/package.json
CHANGED
package/ui/ChatButton.d.ts
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { ButtonHTMLAttributes } from 'react';
|
|
2
|
-
type ChatButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
2
|
+
export type ChatButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
3
3
|
offset?: boolean;
|
|
4
4
|
unfoldOn?: 'hover' | 'active';
|
|
5
5
|
};
|
|
6
6
|
export declare function ChatButton({ children, className, type, 'aria-label': ariaLabel, tabIndex, offset, unfoldOn, ...rest }: ChatButtonProps): import("react/jsx-runtime").JSX.Element;
|
|
7
|
-
export {};
|
package/ui/ChatButton.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChatButton.js","sources":["../../lib/ui/ChatButton.tsx"],"sourcesContent":["import { Icon } from '@clubmed/trident-icons';\nimport type { ButtonHTMLAttributes } from 'react';\nimport { twMerge } from './helpers/twMerge';\n\nconst DEFAULT_TEASER_COPY = 'Hello, Ask me a question';\nconst FALLBACK_ARIA_LABEL = 'Chat with your assistant';\n\
|
|
1
|
+
{"version":3,"file":"ChatButton.js","sources":["../../lib/ui/ChatButton.tsx"],"sourcesContent":["import { Icon } from '@clubmed/trident-icons';\nimport type { ButtonHTMLAttributes } from 'react';\nimport { twMerge } from './helpers/twMerge';\n\nconst DEFAULT_TEASER_COPY = 'Hello, Ask me a question';\nconst FALLBACK_ARIA_LABEL = 'Chat with your assistant';\n\nexport type ChatButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {\n offset?: boolean;\n unfoldOn?: 'hover' | 'active';\n};\n\nexport function ChatButton({\n children = DEFAULT_TEASER_COPY,\n className,\n type = 'button',\n 'aria-label': ariaLabel,\n tabIndex,\n offset,\n unfoldOn = 'hover',\n ...rest\n}: ChatButtonProps) {\n const label =\n ariaLabel ??\n (typeof children === 'string' && children.trim().length > 0\n ? children.trim()\n : FALLBACK_ARIA_LABEL);\n\n return (\n <button\n type={type}\n aria-label={label}\n tabIndex={tabIndex ?? 0}\n {...rest}\n className={twMerge(\n 'chat-button grid grid-cols-[24px_0fr] transition-[grid-template-columns] justify-center items-center overflow-hidden cursor-pointer transition-all rounded-pill px-8 md:px-16 outline-none group/Chatbutton focus-visible:ring-8 focus-visible:ring-lavender/20 pointer-events-auto h-48 min-h-48 md:min-w-80 md:h-80',\n offset && 'md:translate-x-[40px] focus-visible:translate-x-0',\n unfoldOn === 'hover' &&\n 'group/hoverChatbutton hover:grid-cols-[24px_1fr] hover:translate-x-0',\n unfoldOn === 'active' &&\n 'group/activeChatbutton active:grid-cols-[24px_1fr] active:translate-x-0',\n 'focus-visible:grid-cols-[24px_1fr]',\n className,\n )}\n >\n <Icon\n name=\"Sparkles\"\n className={twMerge(\n 'chat-button-icon w-24 transition-all',\n offset &&\n 'relative md:start-[calc(-16px)] group-focus-visible/Chatbutton:start-0 group-hover/hoverChatbutton:start-0 group-active/activeChatbutton:start-0',\n )}\n />\n <div className=\"grid grid-cols-[0fr] overflow-hidden opacity-0 transition-opacity group-hover/hoverChatbutton:opacity-100 group-focus-visible/Chatbutton:opacity-100 group-active/activeChatbutton:opacity-100 duration-500\">\n <span\n aria-hidden=\"true\"\n className=\"chat-button-text items-center ps-20 flex gap-10 whitespace-nowrap font-semibold text-b3 text-black\"\n >\n {children}\n <Icon name=\"ArrowTailRight\" width=\"24px\" />\n </span>\n </div>\n </button>\n );\n}\n"],"names":["DEFAULT_TEASER_COPY","FALLBACK_ARIA_LABEL","ChatButton","children","className","type","ariaLabel","tabIndex","offset","unfoldOn","rest","label","jsxs","twMerge","jsx","Icon"],"mappings":";;;AAIA,MAAMA,IAAsB,4BACtBC,IAAsB;AAOrB,SAASC,EAAW;AAAA,EACzB,UAAAC,IAAWH;AAAA,EACX,WAAAI;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,cAAcC;AAAA,EACd,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,GAAGC;AACL,GAAoB;AAClB,QAAMC,IACJL,MACC,OAAOH,KAAa,YAAYA,EAAS,KAAA,EAAO,SAAS,IACtDA,EAAS,KAAA,IACTF;AAEN,SACE,gBAAAW;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAAP;AAAA,MACA,cAAYM;AAAA,MACZ,UAAUJ,KAAY;AAAA,MACrB,GAAGG;AAAA,MACJ,WAAWG;AAAA,QACT;AAAA,QACAL,KAAU;AAAA,QACVC,MAAa,WACX;AAAA,QACFA,MAAa,YACX;AAAA,QACF;AAAA,QACAL;AAAA,MAAA;AAAA,MAGF,UAAA;AAAA,QAAA,gBAAAU;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,WAAWF;AAAA,cACT;AAAA,cACAL,KACE;AAAA,YAAA;AAAA,UACJ;AAAA,QAAA;AAAA,QAEF,gBAAAM,EAAC,OAAA,EAAI,WAAU,+MACb,UAAA,gBAAAF;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAY;AAAA,YACZ,WAAU;AAAA,YAET,UAAA;AAAA,cAAAT;AAAA,cACD,gBAAAW,EAACC,GAAA,EAAK,MAAK,kBAAiB,OAAM,OAAA,CAAO;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA,EAC3C,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
|