@witchcraft/ui 0.3.6 → 0.3.8

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 (6) hide show
  1. package/dist/module.json +1 -1
  2. package/dist/runtime/components/LibInputDeprecated/LibInputDeprecated.vue +12 -3
  3. package/dist/runtime/components/LibSimpleInput/LibSimpleInput.vue +41 -29
  4. package/package.json +193 -194
  5. package/src/runtime/components/LibInputDeprecated/LibInputDeprecated.vue +12 -3
  6. package/src/runtime/components/LibSimpleInput/LibSimpleInput.vue +41 -29
package/dist/module.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "witchcraftUi",
3
3
  "configKey": "witchcraftUi",
4
- "version": "0.3.6",
4
+ "version": "0.3.8",
5
5
  "builder": {
6
6
  "@nuxt/module-builder": "1.0.2",
7
7
  "unbuild": "3.6.1"
package/dist/runtime/components/LibInputDeprecated/LibInputDeprecated.vue CHANGED
@@ -59,15 +59,24 @@
59
59
  border
60
60
  border-neutral-500
61
61
  outlined-within:border-accent-500
62
+ has-[input:invalid]:border-danger-700
63
+ has-[input:invalid]:dark:border-danger-600
64
+ `,
65
+ border && !valid && `
66
+ border-danger-700
67
+ dark:border-danger-600
62
68
  `,
63
69
  isOpen && `rounded-b-none`,
64
70
  !valid && `
65
- border-danger-700
66
71
  outlined:!outline-danger-700
67
72
  text-danger-800
68
73
  dark:text-danger-400
69
- dark:border-danger-600
70
- `,
74
+ `,
75
+ `
76
+ has-[input:invalid]:outline-danger-700
77
+ has-[input:invalid]:text-danger-800
78
+ has-[input:invalid]:dark:text-danger-400
79
+ `,
71
80
  readonly && `
72
81
  bg-neutral-50
73
82
  text-neutral-800
package/dist/runtime/components/LibSimpleInput/LibSimpleInput.vue CHANGED
@@ -3,31 +3,31 @@
3
3
  :id="id ?? fallbackId"
4
4
  :class="twMerge(
5
5
  `
6
- simple-input
7
- flex-1
8
- grow-[999999]
9
- rounded-sm
10
- px-1
11
- focus-outline
12
- min-w-[2rem]
13
- bg-inherit
14
- placeholder:text-neutral-400
15
- placeholder:focus:text-accent-300
16
- read-only:bg-neutral-50
17
- read-only:text-neutral-800
18
- read-only:placeholder:select-none
19
- read-only:placeholder:text-opacity-0
20
- read-only:focus:placeholder:text-opacity-0
21
- disabled:placeholder:text-nuetral-400
22
- disabled:cursor-unset
23
- disabled:bg-neutral-50
24
- disabled:text-neutral-400
25
- dark:read-only:bg-neutral-950
26
- dark:read-only:text-neutral-200
27
- dark:disabled:placeholder:text-nuetral-600
28
- dark:disabled:bg-neutral-950
29
- dark:disabled:text-neutral-500
30
- `,
6
+ simple-input
7
+ flex-1
8
+ grow-[999999]
9
+ rounded-sm
10
+ px-1
11
+ focus-outline
12
+ min-w-[2rem]
13
+ bg-inherit
14
+ placeholder:text-neutral-400
15
+ placeholder:focus:text-accent-300
16
+ read-only:bg-neutral-50
17
+ read-only:text-neutral-800
18
+ read-only:placeholder:select-none
19
+ read-only:placeholder:text-opacity-0
20
+ read-only:focus:placeholder:text-opacity-0
21
+ disabled:placeholder:text-nuetral-400
22
+ disabled:cursor-unset
23
+ disabled:bg-neutral-50
24
+ disabled:text-neutral-400
25
+ dark:read-only:bg-neutral-950
26
+ dark:read-only:text-neutral-200
27
+ dark:disabled:placeholder:text-nuetral-600
28
+ dark:disabled:bg-neutral-950
29
+ dark:disabled:text-neutral-500
30
+ `,
31
31
  type === `text` && `
32
32
  min-w-[10ch]
33
33
  w-full
@@ -44,16 +44,28 @@
44
44
  focus:border-accent-500
45
45
  disabled:border-neutral-400
46
46
  dark:disabled:border-neutral-600
47
+ invalid:border-danger-700
48
+ invalid:focus:border-danger-700
49
+ invalid:dark:border-danger-600
47
50
  `,
48
- !valid && `
49
- placeholder:text-danger-700
50
- border-danger-700
51
+ border && !valid && `
52
+ dark:border-danger-600
51
53
  focus:border-danger-700
54
+ border-danger-700
55
+ `,
56
+ `
57
+ invalid:outline-danger-700
58
+ invalid:text-danger-800
59
+ invalid:dark:text-danger-400
60
+ invalid:placeholder:text-danger-700
61
+ invalid:dark:placeholder:text-danger-700
62
+ `,
63
+ !valid && `
52
64
  outlined:!outline-danger-700
53
65
  text-danger-800
54
66
  dark:text-danger-400
67
+ placeholder:text-danger-700
55
68
  dark:placeholder:text-danger-700
56
- dark:border-danger-600
57
69
  `,
58
70
  $attrs?.class
59
71
  )"
package/package.json CHANGED
@@ -1,195 +1,194 @@
1
1
  {
2
- "name": "@witchcraft/ui",
3
- "version": "0.3.6",
4
- "description": "Vue component library.",
5
- "type": "module",
6
- "main": "./dist/runtime/main.lib.js",
7
- "sideEffects": false,
8
- "exports": {
9
- ".": {
10
- "types": "./types/index.d.ts",
11
- "import": "./dist/runtime/main.lib.js"
12
- },
13
- "./components": {
14
- "types": "./dist/runtime/components/index.d.ts",
15
- "import": "./dist/runtime/components/index.js"
16
- },
17
- "./components/*": {
18
- "types": "./dist/runtime/components/*/*.vue.d.ts",
19
- "import": "./dist/runtime/components/*/*.vue"
20
- },
21
- "./composables": {
22
- "types": "./dist/runtime/composables/index.d.ts",
23
- "import": "./dist/runtime/composables/index.js"
24
- },
25
- "./directives": {
26
- "types": "./dist/runtime/directives/index.d.ts",
27
- "import": "./dist/runtime/directives/index.js"
28
- },
29
- "./helpers": {
30
- "types": "./dist/runtime/helpers/index.d.ts",
31
- "import": "./dist/runtime/helpers/index.js"
32
- },
33
- "./utils.css": "./src/runtime/assets/utils.css",
34
- "./base.css": "./src/runtime/assets/base.css",
35
- "./nuxt": {
36
- "types": "./dist/types.d.mts",
37
- "import": "./dist/module.mjs"
38
- },
39
- "./types": {
40
- "types": "./dist/runtime/types/index.d.ts",
41
- "import": "./dist/runtime/types/index.js"
42
- },
43
- "./*": {
44
- "import": "./dist/runtime/*.js",
45
- "types": "./dist/runtime/*.d.ts"
46
- }
47
- },
48
- "unbuild": {
49
- "failOnWarn": false
50
- },
51
- "scripts": {
52
- "prepare": "husky && pnpm gen:theme && pnpm build",
53
- "build": "nuxt-module-build prepare && nuxt-module-build build && nuxi generate playground",
54
- "build:only": "nuxt-module-build build",
55
- "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
56
- "dev": "nuxi dev playground",
57
- "storybook": "BROWSER=none storybook dev -p 6006",
58
- "storybook:clear-cache": "BROWSER=none storybook dev -p 6006 --no-manager-cache",
59
- "storybook:build": "pnpm nuxt prepare && storybook build -o docs/storybook",
60
- "storybook:test": "pnpm storybook:build && pnpm concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"pnpm http-server docs/storybook --port 6006 --silent\" \"pnpm wait-on tcp:6006 && pnpm test-storybook\"",
61
- "test": "pnpm storybook:test && pnpm lint:types",
62
- "test:dev": "pnpm concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"pnpm storybook\" \"pnpm wait-on tcp:6006 && pnpm test-storybook --watch\"",
63
- "doc": "pnpm test && pnpm storybook:build",
64
- "doc:dev": "pnpm storybook",
65
- "lint:eslint": "eslint \"src/**/*.{js,ts,vue,cjs}\" \"*.{js,ts}\" --max-warnings=5 --report-unused-disable-directives",
66
- "lint:types": "vue-tsc --noEmit --pretty --project tsconfig.types.json",
67
- "lint:commits": "commitlint --from-last-tag --to HEAD --verbose",
68
- "lint:imports": "madge --circular --extensions ts ./src",
69
- "lint": "pnpm lint:eslint && pnpm lint:types && pnpm lint:commits && pnpm lint:imports",
70
- "//actions:debug": "echo For debugging github build action locally with nektos/act. Requires act and docker. Note: Cache will never work locally because of https://github.com/nektos/act/issues/285",
71
- "actions:debug": "act -r -j release",
72
- "gen:exports": "indexit update --ignore **.d.ts **.stories.ts **.vue -o '${path}.js'",
73
- "gen:theme": "echo src/runtime/build/generateTheme.ts"
74
- },
75
- "peerDependencies": {
76
- "tailwindcss": "catalog:",
77
- "unplugin-icons": "catalog:",
78
- "vue": "catalog:"
79
- },
80
- "peerDependenciesMeta": {
81
- "tailwindcss": {
82
- "optional": true
83
- },
84
- "vue": {
85
- "optional": false
86
- }
87
- },
88
- "dependencies": {
89
- "@alanscodelog/utils": "catalog:",
90
- "@iconify/json": "catalog:",
91
- "@nuxt/kit": "catalog:",
92
- "@nuxt/schema": "catalog:",
93
- "@nuxt/types": "catalog:",
94
- "@tailwindcss/vite": "catalog:",
95
- "@witchcraft/nuxt-utils": "catalog:",
96
- "colord": "catalog:",
97
- "colorjs.io": "catalog:",
98
- "defu": "catalog:",
99
- "fast-glob": "catalog:",
100
- "metamorphosis": "catalog:",
101
- "reka-ui": "catalog:",
102
- "tailwind-merge": "catalog:",
103
- "unplugin-icons": "catalog:",
104
- "unplugin-vue-components": "catalog:",
105
- "vue-component-type-helpers": "catalog:"
106
- },
107
- "devDependencies": {
108
- "@alanscodelog/commitlint-config": "catalog:",
109
- "@alanscodelog/eslint-config": "catalog:",
110
- "@alanscodelog/semantic-release-config": "catalog:",
111
- "@alanscodelog/tsconfigs": "catalog:",
112
- "@alanscodelog/vite-config": "catalog:",
113
- "@chromatic-com/storybook": "catalog:",
114
- "@commitlint/cli": "catalog:",
115
- "@internationalized/date": "catalog:",
116
- "@nuxt/eslint-config": "catalog:",
117
- "@nuxt/module-builder": "catalog:",
118
- "@nuxtjs/i18n": "catalog:",
119
- "@playwright/test": "catalog:",
120
- "@rollup/plugin-node-resolve": "catalog:",
121
- "@storybook/addon-a11y": "catalog:",
122
- "@storybook/addon-actions": "catalog:",
123
- "@storybook/addon-essentials": "catalog:",
124
- "@storybook/addon-interactions": "catalog:",
125
- "@storybook/addon-links": "catalog:",
126
- "@storybook/addon-storysource": "catalog:",
127
- "@storybook/blocks": "catalog:",
128
- "@storybook/manager-api": "catalog:",
129
- "@storybook/test": "catalog:",
130
- "@storybook/test-runner": "catalog:",
131
- "@storybook/vue3": "catalog:",
132
- "@storybook/vue3-vite": "catalog:",
133
- "@tailwindcss/cli": "catalog:",
134
- "@tailwindcss/postcss": "catalog:",
135
- "@types/node": "catalog:",
136
- "@vitejs/plugin-vue": "catalog:",
137
- "@vue/runtime-core": "catalog:",
138
- "@vue/runtime-dom": "catalog:",
139
- "@vueuse/components": "catalog:",
140
- "@vueuse/core": "catalog:",
141
- "autoprefixer": "catalog:",
142
- "concurrently": "catalog:",
143
- "eslint": "catalog:",
144
- "http-server": "catalog:",
145
- "husky": "catalog:",
146
- "indexit": "catalog:",
147
- "madge": "catalog:",
148
- "nuxt": "catalog:",
149
- "playwright": "catalog:",
150
- "playwright-core": "catalog:",
151
- "semantic-release": "catalog:",
152
- "storybook": "catalog:",
153
- "storybook-dark-mode": "catalog:",
154
- "tailwindcss": "catalog:",
155
- "ts-node": "catalog:",
156
- "typescript": "catalog:",
157
- "unbuild": "catalog:",
158
- "vite": "catalog:",
159
- "vite-tsconfig-paths": "catalog:",
160
- "vue": "catalog:",
161
- "vue-tsc": "catalog:",
162
- "wait-on": "catalog:"
163
- },
164
- "author": "Alan <alanscodelog@gmail.com>",
165
- "repository": "https://github.com/witchcraftjs/ui",
166
- "license": "MIT",
167
- "files": [
168
- "src",
169
- "dist",
170
- "types"
171
- ],
172
- "release": {
173
- "extends": [
174
- "@alanscodelog/semantic-release-config"
175
- ]
176
- },
177
- "commitlint": {
178
- "extends": [
179
- "@alanscodelog"
180
- ]
181
- },
182
- "madge": {
183
- "detectiveOptions": {
184
- "ts": {
185
- "skipTypeImports": true
186
- }
187
- }
188
- },
189
- "engines": {
190
- "node": ">=20.0.0"
191
- },
192
- "publishConfig": {
193
- "access": "public"
194
- }
195
- }
2
+ "name": "@witchcraft/ui",
3
+ "version": "0.3.8",
4
+ "description": "Vue component library.",
5
+ "type": "module",
6
+ "main": "./dist/runtime/main.lib.js",
7
+ "sideEffects": false,
8
+ "exports": {
9
+ ".": {
10
+ "types": "./types/index.d.ts",
11
+ "import": "./dist/runtime/main.lib.js"
12
+ },
13
+ "./components": {
14
+ "types": "./dist/runtime/components/index.d.ts",
15
+ "import": "./dist/runtime/components/index.js"
16
+ },
17
+ "./components/*": {
18
+ "types": "./dist/runtime/components/*/*.vue.d.ts",
19
+ "import": "./dist/runtime/components/*/*.vue"
20
+ },
21
+ "./composables": {
22
+ "types": "./dist/runtime/composables/index.d.ts",
23
+ "import": "./dist/runtime/composables/index.js"
24
+ },
25
+ "./directives": {
26
+ "types": "./dist/runtime/directives/index.d.ts",
27
+ "import": "./dist/runtime/directives/index.js"
28
+ },
29
+ "./helpers": {
30
+ "types": "./dist/runtime/helpers/index.d.ts",
31
+ "import": "./dist/runtime/helpers/index.js"
32
+ },
33
+ "./utils.css": "./src/runtime/assets/utils.css",
34
+ "./base.css": "./src/runtime/assets/base.css",
35
+ "./nuxt": {
36
+ "types": "./dist/types.d.mts",
37
+ "import": "./dist/module.mjs"
38
+ },
39
+ "./types": {
40
+ "types": "./dist/runtime/types/index.d.ts",
41
+ "import": "./dist/runtime/types/index.js"
42
+ },
43
+ "./*": {
44
+ "import": "./dist/runtime/*.js",
45
+ "types": "./dist/runtime/*.d.ts"
46
+ }
47
+ },
48
+ "unbuild": {
49
+ "failOnWarn": false
50
+ },
51
+ "peerDependencies": {
52
+ "tailwindcss": "^4.1.12",
53
+ "unplugin-icons": "^22.2.0",
54
+ "vue": "^3.5.20"
55
+ },
56
+ "peerDependenciesMeta": {
57
+ "tailwindcss": {
58
+ "optional": true
59
+ },
60
+ "vue": {
61
+ "optional": false
62
+ }
63
+ },
64
+ "dependencies": {
65
+ "@alanscodelog/utils": "^6.0.1",
66
+ "@iconify/json": "^2.2.379",
67
+ "@nuxt/kit": "^4.0.3",
68
+ "@nuxt/schema": "^4.0.3",
69
+ "@nuxt/types": "^2.18.1",
70
+ "@tailwindcss/vite": "^4.1.12",
71
+ "@witchcraft/nuxt-utils": "^0.3.6",
72
+ "colord": "^2.9.3",
73
+ "colorjs.io": "0.6.0-alpha.1",
74
+ "defu": "^6.1.4",
75
+ "fast-glob": "^3.3.3",
76
+ "metamorphosis": "^0.6.1",
77
+ "reka-ui": "^2.5.0",
78
+ "tailwind-merge": "^3.3.1",
79
+ "unplugin-icons": "^22.2.0",
80
+ "unplugin-vue-components": "^28.8.0",
81
+ "vue-component-type-helpers": "^2.2.12"
82
+ },
83
+ "devDependencies": {
84
+ "@alanscodelog/commitlint-config": "^3.1.2",
85
+ "@alanscodelog/eslint-config": "^6.3.0",
86
+ "@alanscodelog/semantic-release-config": "^6.0.0",
87
+ "@alanscodelog/tsconfigs": "^6.2.0",
88
+ "@alanscodelog/vite-config": "^0.0.6",
89
+ "@chromatic-com/storybook": "^3.2.7",
90
+ "@commitlint/cli": "^19.8.1",
91
+ "@internationalized/date": "^3.9.0",
92
+ "@nuxt/eslint-config": "^1.9.0",
93
+ "@nuxt/module-builder": "^1.0.2",
94
+ "@nuxtjs/i18n": "^9.5.6",
95
+ "@playwright/test": "=1.54.0",
96
+ "@rollup/plugin-node-resolve": "^16.0.1",
97
+ "@storybook/addon-a11y": "^8.6.14",
98
+ "@storybook/addon-actions": "^8.6.14",
99
+ "@storybook/addon-essentials": "^8.6.14",
100
+ "@storybook/addon-interactions": "^8.6.14",
101
+ "@storybook/addon-links": "^8.6.14",
102
+ "@storybook/addon-storysource": "^8.6.14",
103
+ "@storybook/blocks": "^8.6.14",
104
+ "@storybook/manager-api": "^8.6.14",
105
+ "@storybook/test": "^8.6.14",
106
+ "@storybook/test-runner": "^0.22.1",
107
+ "@storybook/vue3": "^8.6.14",
108
+ "@storybook/vue3-vite": "^8.6.14",
109
+ "@tailwindcss/cli": "^4.1.12",
110
+ "@tailwindcss/postcss": "^4.1.12",
111
+ "@types/node": "^24.3.0",
112
+ "@vitejs/plugin-vue": "^6.0.1",
113
+ "@vue/runtime-core": "^3.5.20",
114
+ "@vue/runtime-dom": "^3.5.20",
115
+ "@vueuse/components": "^13.8.0",
116
+ "@vueuse/core": "^13.8.0",
117
+ "autoprefixer": "^10.4.21",
118
+ "concurrently": "^9.2.1",
119
+ "eslint": "^9.34.0",
120
+ "http-server": "^14.1.1",
121
+ "husky": "^9.1.7",
122
+ "indexit": "2.1.0-beta.3",
123
+ "madge": "^7.0.0",
124
+ "nuxt": "^4.0.3",
125
+ "playwright": "=1.54.0",
126
+ "playwright-core": "=1.54.0",
127
+ "semantic-release": "^24.2.7",
128
+ "storybook": "^8.6.14",
129
+ "storybook-dark-mode": "^4.0.2",
130
+ "tailwindcss": "^4.1.12",
131
+ "ts-node": "^10.9.2",
132
+ "typescript": "^5.9.2",
133
+ "unbuild": "^3.6.1",
134
+ "vite": "^7.1.3",
135
+ "vite-tsconfig-paths": "^5.1.4",
136
+ "vue": "^3.5.20",
137
+ "vue-tsc": "3.0.6",
138
+ "wait-on": "^8.0.4"
139
+ },
140
+ "author": "Alan <alanscodelog@gmail.com>",
141
+ "repository": "https://github.com/witchcraftjs/ui",
142
+ "license": "MIT",
143
+ "files": [
144
+ "src",
145
+ "dist",
146
+ "types"
147
+ ],
148
+ "release": {
149
+ "extends": [
150
+ "@alanscodelog/semantic-release-config"
151
+ ]
152
+ },
153
+ "commitlint": {
154
+ "extends": [
155
+ "@alanscodelog"
156
+ ]
157
+ },
158
+ "madge": {
159
+ "detectiveOptions": {
160
+ "ts": {
161
+ "skipTypeImports": true
162
+ }
163
+ }
164
+ },
165
+ "engines": {
166
+ "node": ">=20.0.0"
167
+ },
168
+ "publishConfig": {
169
+ "access": "public"
170
+ },
171
+ "scripts": {
172
+ "build": "nuxt-module-build prepare && nuxt-module-build build && nuxi generate playground",
173
+ "build:only": "nuxt-module-build build",
174
+ "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
175
+ "dev": "nuxi dev playground",
176
+ "storybook": "BROWSER=none storybook dev -p 6006",
177
+ "storybook:clear-cache": "BROWSER=none storybook dev -p 6006 --no-manager-cache",
178
+ "storybook:build": "pnpm nuxt prepare && storybook build -o docs/storybook",
179
+ "storybook:test": "pnpm storybook:build && pnpm concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"pnpm http-server docs/storybook --port 6006 --silent\" \"pnpm wait-on tcp:6006 && pnpm test-storybook\"",
180
+ "test": "pnpm storybook:test && pnpm lint:types",
181
+ "test:dev": "pnpm concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"pnpm storybook\" \"pnpm wait-on tcp:6006 && pnpm test-storybook --watch\"",
182
+ "doc": "pnpm test && pnpm storybook:build",
183
+ "doc:dev": "pnpm storybook",
184
+ "lint:eslint": "eslint \"src/**/*.{js,ts,vue,cjs}\" \"*.{js,ts}\" --max-warnings=5 --report-unused-disable-directives",
185
+ "lint:types": "vue-tsc --noEmit --pretty --project tsconfig.types.json",
186
+ "lint:commits": "commitlint --from-last-tag --to HEAD --verbose",
187
+ "lint:imports": "madge --circular --extensions ts ./src",
188
+ "lint": "pnpm lint:eslint && pnpm lint:types && pnpm lint:commits && pnpm lint:imports",
189
+ "//actions:debug": "echo For debugging github build action locally with nektos/act. Requires act and docker. Note: Cache will never work locally because of https://github.com/nektos/act/issues/285",
190
+ "actions:debug": "act -r -j release",
191
+ "gen:exports": "indexit update --ignore **.d.ts **.stories.ts **.vue -o '${path}.js'",
192
+ "gen:theme": "echo src/runtime/build/generateTheme.ts"
193
+ }
194
+ }
package/src/runtime/components/LibInputDeprecated/LibInputDeprecated.vue CHANGED
@@ -57,15 +57,24 @@
57
57
  border
58
58
  border-neutral-500
59
59
  outlined-within:border-accent-500
60
+ has-[input:invalid]:border-danger-700
61
+ has-[input:invalid]:dark:border-danger-600
62
+ `,
63
+ border && !valid && `
64
+ border-danger-700
65
+ dark:border-danger-600
60
66
  `,
61
67
  isOpen && `rounded-b-none`,
62
68
  !valid && `
63
- border-danger-700
64
69
  outlined:!outline-danger-700
65
70
  text-danger-800
66
71
  dark:text-danger-400
67
- dark:border-danger-600
68
- `,
72
+ `,
73
+ `
74
+ has-[input:invalid]:outline-danger-700
75
+ has-[input:invalid]:text-danger-800
76
+ has-[input:invalid]:dark:text-danger-400
77
+ `,
69
78
  readonly && `
70
79
  bg-neutral-50
71
80
  text-neutral-800
package/src/runtime/components/LibSimpleInput/LibSimpleInput.vue CHANGED
@@ -2,31 +2,31 @@
2
2
  <input
3
3
  :id="id ?? fallbackId"
4
4
  :class="twMerge(`
5
- simple-input
6
- flex-1
7
- grow-[999999]
8
- rounded-sm
9
- px-1
10
- focus-outline
11
- min-w-[2rem]
12
- bg-inherit
13
- placeholder:text-neutral-400
14
- placeholder:focus:text-accent-300
15
- read-only:bg-neutral-50
16
- read-only:text-neutral-800
17
- read-only:placeholder:select-none
18
- read-only:placeholder:text-opacity-0
19
- read-only:focus:placeholder:text-opacity-0
20
- disabled:placeholder:text-nuetral-400
21
- disabled:cursor-unset
22
- disabled:bg-neutral-50
23
- disabled:text-neutral-400
24
- dark:read-only:bg-neutral-950
25
- dark:read-only:text-neutral-200
26
- dark:disabled:placeholder:text-nuetral-600
27
- dark:disabled:bg-neutral-950
28
- dark:disabled:text-neutral-500
29
- `,
5
+ simple-input
6
+ flex-1
7
+ grow-[999999]
8
+ rounded-sm
9
+ px-1
10
+ focus-outline
11
+ min-w-[2rem]
12
+ bg-inherit
13
+ placeholder:text-neutral-400
14
+ placeholder:focus:text-accent-300
15
+ read-only:bg-neutral-50
16
+ read-only:text-neutral-800
17
+ read-only:placeholder:select-none
18
+ read-only:placeholder:text-opacity-0
19
+ read-only:focus:placeholder:text-opacity-0
20
+ disabled:placeholder:text-nuetral-400
21
+ disabled:cursor-unset
22
+ disabled:bg-neutral-50
23
+ disabled:text-neutral-400
24
+ dark:read-only:bg-neutral-950
25
+ dark:read-only:text-neutral-200
26
+ dark:disabled:placeholder:text-nuetral-600
27
+ dark:disabled:bg-neutral-950
28
+ dark:disabled:text-neutral-500
29
+ `,
30
30
  type === `text` && `
31
31
  min-w-[10ch]
32
32
  w-full
@@ -43,16 +43,28 @@
43
43
  focus:border-accent-500
44
44
  disabled:border-neutral-400
45
45
  dark:disabled:border-neutral-600
46
+ invalid:border-danger-700
47
+ invalid:focus:border-danger-700
48
+ invalid:dark:border-danger-600
46
49
  `,
47
- !valid && `
48
- placeholder:text-danger-700
49
- border-danger-700
50
+ border && !valid && `
51
+ dark:border-danger-600
50
52
  focus:border-danger-700
53
+ border-danger-700
54
+ `,
55
+ `
56
+ invalid:outline-danger-700
57
+ invalid:text-danger-800
58
+ invalid:dark:text-danger-400
59
+ invalid:placeholder:text-danger-700
60
+ invalid:dark:placeholder:text-danger-700
61
+ `,
62
+ !valid && `
51
63
  outlined:!outline-danger-700
52
64
  text-danger-800
53
65
  dark:text-danger-400
66
+ placeholder:text-danger-700
54
67
  dark:placeholder:text-danger-700
55
- dark:border-danger-600
56
68
  `,
57
69
  ($attrs as any)?.class
58
70
  )"