@taicode/common-web 1.0.3 → 1.0.4
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/package.json
CHANGED
|
@@ -0,0 +1,136 @@
|
|
|
1
|
+
# Changelog
|
|
2
|
+
|
|
3
|
+
## 2025-06-05
|
|
4
|
+
|
|
5
|
+
- Update `DropdownLabel` to extend a plain `<div>` instead of the `Headless.Label` ([#1699](https://github.com/tailwindlabs/tailwind-plus-issues/issues/1699))
|
|
6
|
+
|
|
7
|
+
## 2025-04-28
|
|
8
|
+
|
|
9
|
+
- Update template to Tailwind CSS v4.1.4
|
|
10
|
+
|
|
11
|
+
## 2025-04-22
|
|
12
|
+
|
|
13
|
+
- Fix focus styles in the `Avatar`, `Badge`, `Button`, `Checkbox`, and `Switch` components ([#1693](https://github.com/tailwindlabs/tailwind-plus-issues/issues/1693))
|
|
14
|
+
|
|
15
|
+
## 2025-04-17
|
|
16
|
+
|
|
17
|
+
- Update `@headlessui/react` dependency to `v2.2.2` to fix listbox performance issues ([#1667](https://github.com/tailwindlabs/tailwind-plus-issues/issues/1667))
|
|
18
|
+
|
|
19
|
+
## 2025-04-04
|
|
20
|
+
|
|
21
|
+
- Add new `Combobox` component
|
|
22
|
+
- Add new `AuthLayout` component, with example login page, registration page, and forgot password page
|
|
23
|
+
- Fix centering of checkboxes, radios, and switches in fields with multi-line labels
|
|
24
|
+
- Update template to Tailwind CSS v4.1.3
|
|
25
|
+
- Update template to Headless UI v2.2.1 (required for new `Combobox` component)
|
|
26
|
+
|
|
27
|
+
## 2025-03-24
|
|
28
|
+
|
|
29
|
+
- Adjust avatar ring opacity from 20% to 10%
|
|
30
|
+
|
|
31
|
+
## 2025-03-22
|
|
32
|
+
|
|
33
|
+
- Update template to Tailwind CSS v4.0.15
|
|
34
|
+
|
|
35
|
+
## 2025-02-22
|
|
36
|
+
|
|
37
|
+
- Fix border radius of avatars in navbar items
|
|
38
|
+
|
|
39
|
+
## 2025-02-12
|
|
40
|
+
|
|
41
|
+
- Fix baseline alignment for buttons with icons ([#1668](https://github.com/tailwindlabs/tailwind-plus-issues/issues/1668))
|
|
42
|
+
|
|
43
|
+
## 2025-02-10
|
|
44
|
+
|
|
45
|
+
- Update template to Tailwind CSS v4.0.6
|
|
46
|
+
|
|
47
|
+
## 2025-01-29
|
|
48
|
+
|
|
49
|
+
- Fix conflicting outline utilities ([#1661](https://github.com/tailwindlabs/tailwind-plus-issues/issues/1661))
|
|
50
|
+
|
|
51
|
+
## 2025-01-23
|
|
52
|
+
|
|
53
|
+
- Update template to Tailwind CSS v4.0
|
|
54
|
+
|
|
55
|
+
## 2024-10-31
|
|
56
|
+
|
|
57
|
+
- Fix `disabled` prop in `DropdownItem` component ([#1640](https://github.com/tailwindlabs/tailwind-plus-issues/issues/1640))
|
|
58
|
+
- Update types in `SidebarItem` component
|
|
59
|
+
|
|
60
|
+
## 2024-06-09
|
|
61
|
+
|
|
62
|
+
- Omit `as` prop from types for Headless UI-based components
|
|
63
|
+
|
|
64
|
+
## 2024-06-26
|
|
65
|
+
|
|
66
|
+
- Update `@headlessui/react` dependency to `v2.1.1`
|
|
67
|
+
- Update `Dialog`, `Alert`, and `Listbox` to new data-attribute-based transition API
|
|
68
|
+
|
|
69
|
+
## 2024-06-21
|
|
70
|
+
|
|
71
|
+
- Update `@headlessui/react` dependency to `v2.1.0`
|
|
72
|
+
- Use `DialogBackdrop` in `Alert` and `Dialog` components
|
|
73
|
+
- Update to new data-attribute-based transition API
|
|
74
|
+
|
|
75
|
+
## 2024-06-19
|
|
76
|
+
|
|
77
|
+
- Prevent content from overflowing the mobile sidebar
|
|
78
|
+
|
|
79
|
+
## 2024-06-18
|
|
80
|
+
|
|
81
|
+
- Use consistent `let` and `const` declarations
|
|
82
|
+
- Use consistent `clsx` import
|
|
83
|
+
- Use consistent `forwardRef` instead of `React.forwardRef` import
|
|
84
|
+
- Update `tailwindcss`, `prettier` and `prettier-plugin-tailwindcss` dependencies in Next.js demo app
|
|
85
|
+
- Fix class order in `Dropdown` component
|
|
86
|
+
|
|
87
|
+
## 2024-06-10
|
|
88
|
+
|
|
89
|
+
- Add `dark:[color-scheme:dark]` class to `Input` component ([#1596](https://github.com/tailwindlabs/tailwind-plus-issues/issues/1596))
|
|
90
|
+
|
|
91
|
+
## 2024-05-31
|
|
92
|
+
|
|
93
|
+
- Add Next.js demo app ([#1580](https://github.com/tailwindlabs/tailwind-plus-issues/issues/1580))
|
|
94
|
+
- Fix `Avatar` sizing and padding ([#1588](https://github.com/tailwindlabs/tailwind-plus-issues/issues/1588))
|
|
95
|
+
|
|
96
|
+
## 2024-05-27
|
|
97
|
+
|
|
98
|
+
- Add `pointer-events-none` to `InputGroup` icon ([#1594](https://github.com/tailwindlabs/tailwind-plus-issues/issues/1594))
|
|
99
|
+
- Add default text color to `Table` component ([#1581](https://github.com/tailwindlabs/tailwind-plus-issues/issues/1581))
|
|
100
|
+
- Fix TypeScript issues when using `as={Link}` ([#1582](https://github.com/tailwindlabs/tailwind-plus-issues/issues/1582))
|
|
101
|
+
- Fix `SidebarItem` import ([#1582](https://github.com/tailwindlabs/tailwind-plus-issues/issues/1582))
|
|
102
|
+
- Add `isolate` class to `InputGroup`, `SidebarLayout`, and `StackedLayout` components
|
|
103
|
+
- Fix comment indentation and use proper DocBlocks
|
|
104
|
+
|
|
105
|
+
## 2024-05-24
|
|
106
|
+
|
|
107
|
+
- Add new `SidebarLayout` component
|
|
108
|
+
- Add new `StackedLayout` component
|
|
109
|
+
- Add new `Navbar` component
|
|
110
|
+
- Add new `Sidebar` component
|
|
111
|
+
- Add new `DescriptionList` component
|
|
112
|
+
- Add new `Heading` component
|
|
113
|
+
- Add new `Divider` component
|
|
114
|
+
- Add new `framer-motion` dependency
|
|
115
|
+
- Update `@headlessui/react` dependency to `v2.0`
|
|
116
|
+
- Remove `as={Fragment}` from the transition components
|
|
117
|
+
- Improve and fix a number of types
|
|
118
|
+
- Made formatting of `className` and `{...prop}` more consistent across all components
|
|
119
|
+
- Made formatting of `forwardRef` consistent across all components
|
|
120
|
+
- Update `PaginationGap` component to use a `span` instead of a `div`
|
|
121
|
+
- Update the `SidebarHeading` to render use an `h3` instead of a `d`iv
|
|
122
|
+
- Remove `children` prop from `Switch` component
|
|
123
|
+
|
|
124
|
+
## 2024-01-08
|
|
125
|
+
|
|
126
|
+
- Add `resizable` prop to `Textarea` component ([#1543](https://github.com/tailwindlabs/tailwind-plus-issues/issues/1543))
|
|
127
|
+
|
|
128
|
+
## 2024-01-03
|
|
129
|
+
|
|
130
|
+
- Change top-level `let` declarations to `const`
|
|
131
|
+
- Fix `--btn-hover-overlay` color for dark/white button ([#1538](https://github.com/tailwindlabs/tailwind-plus-issues/issues/1538))
|
|
132
|
+
- Add `forwardRef` to `Input`, `Select`, and `Textarea` components ([#1540](https://github.com/tailwindlabs/tailwind-plus-issues/issues/1540))
|
|
133
|
+
|
|
134
|
+
## 2023-12-20
|
|
135
|
+
|
|
136
|
+
- Initial release
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
# Catalyst UI Kit
|
|
2
|
+
|
|
3
|
+
Catalyst is a modern application UI kit built with [Tailwind CSS](https://tailwindcss.com) and [React](https://react.dev/), designed and built by the Tailwind CSS team and included as part of [Tailwind Plus](https://tailwindcss.com/plus).
|
|
4
|
+
|
|
5
|
+
## Getting started
|
|
6
|
+
|
|
7
|
+
To get started, first copy the component files included in the downloaded ZIP file into wherever you keep components in your own project. The components are provided in both TypeScript and plain JavaScript, pick whichever set you prefer.
|
|
8
|
+
|
|
9
|
+
Next, install the dependencies used by the components in Catalyst:
|
|
10
|
+
|
|
11
|
+
```sh
|
|
12
|
+
npm install @headlessui/react framer-motion clsx
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
Catalyst is also designed for the latest version of Tailwind CSS, which is currently Tailwind CSS v4.0. To make sure that you are on the latest version of Tailwind, update it via npm:
|
|
16
|
+
|
|
17
|
+
```sh
|
|
18
|
+
npm install tailwindcss@latest
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
Now you're ready to start using the components in your project — just import them from wherever you're keeping your components and start using them like any of your other React components:
|
|
22
|
+
|
|
23
|
+
```jsx
|
|
24
|
+
import { Input } from './components/input'
|
|
25
|
+
import { Field, FieldGroup, Label } from './components/fieldset'
|
|
26
|
+
import { Button } from './components/button'
|
|
27
|
+
|
|
28
|
+
export default function SettingsForm() {
|
|
29
|
+
return (
|
|
30
|
+
<form>
|
|
31
|
+
<FieldGroup>
|
|
32
|
+
<Field>
|
|
33
|
+
<Label>Name</Label>
|
|
34
|
+
<Input name="name" />
|
|
35
|
+
</Field>
|
|
36
|
+
<Field>
|
|
37
|
+
<Label>Email</Label>
|
|
38
|
+
<Input type="email" name="email" />
|
|
39
|
+
</Field>
|
|
40
|
+
<Button type="submit">Save changes</Button>
|
|
41
|
+
</FieldGroup>
|
|
42
|
+
</form>
|
|
43
|
+
)
|
|
44
|
+
}
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
Additional installation instructions can be found in the Catalyst documentation.
|
|
48
|
+
|
|
49
|
+
## Documentation
|
|
50
|
+
|
|
51
|
+
You can find the Catalyst documentation at https://catalyst.tailwindui.com/docs.
|
|
52
|
+
|
|
53
|
+
## License
|
|
54
|
+
|
|
55
|
+
This site template is a commercial product and is licensed under the [Tailwind Plus license](https://tailwindcss.com/plus/license).
|
|
56
|
+
|
|
57
|
+
## Learn more
|
|
58
|
+
|
|
59
|
+
To learn more about the technologies used in this site template, see the following resources:
|
|
60
|
+
|
|
61
|
+
- [Tailwind CSS](https://tailwindcss.com/docs) - the official Tailwind CSS documentation
|
|
62
|
+
- [Headless UI](https://headlessui.dev) - the official Headless UI documentation
|
|
63
|
+
- [React](https://react.dev) - the official React documentation
|
|
64
|
+
- [Framer Motion](https://www.framer.com/docs/) - the official Framer Motion documentation
|
|
65
|
+
- [clsx](https://github.com/lukeed/clsx) - the GitHub repo for the `clsx` helper
|
|
@@ -135,13 +135,8 @@ export function DropdownDivider({
|
|
|
135
135
|
)
|
|
136
136
|
}
|
|
137
137
|
|
|
138
|
-
export function DropdownLabel({
|
|
139
|
-
className,
|
|
140
|
-
...props
|
|
141
|
-
}: { className?: string } & Omit<Headless.LabelProps, 'as' | 'className'>) {
|
|
142
|
-
return (
|
|
143
|
-
<Headless.Label {...props} data-slot="label" className={clsx(className, 'col-start-2 row-start-1')} {...props} />
|
|
144
|
-
)
|
|
138
|
+
export function DropdownLabel({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
|
|
139
|
+
return <div {...props} data-slot="label" className={clsx(className, 'col-start-2 row-start-1')} {...props} />
|
|
145
140
|
}
|
|
146
141
|
|
|
147
142
|
export function DropdownDescription({
|