@ladder-ui/input 0.0.3 → 0.0.5

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.

Potentially problematic release.

This version of @ladder-ui/input might be problematic. Click here for more details.

Files changed (2) hide show
  1. package/dist/input.css +101 -108
  2. package/package.json +2 -2
package/dist/input.css CHANGED
@@ -1,109 +1,102 @@
1
- .lui-input {
2
- display: block;
3
- background-color: var(--lui-input-bg);
4
- border: var(--lui-border-width) solid var(--lui-input-border);
5
- border-radius: var(--lui-input-radius);
6
- color: var(--lui-input-text);
7
- font-family: var(--lui-font-family);
8
- font-weight: var(--lui-font-weight);
9
- line-height: 1.5;
10
- min-width: 0;
11
- transition: var(--lui-transition);
12
- }
13
- .lui-input:focus-visible {
14
- outline: none;
15
- border-color: var(--lui-input-focus-border);
16
- box-shadow: 0 0 0 2px var(--lui-input-focus-ring-color);
17
- }
18
- .lui-input::placeholder {
19
- color: var(--lui-input-placeholder);
20
- }
21
- .lui-input--disabled, .lui-input:disabled {
22
- opacity: var(--lui-disabled-opacity);
23
- cursor: not-allowed;
24
- }
25
- .lui-input--readonly {
26
- cursor: default;
27
- }
28
- .lui-input--full-width {
29
- width: 100%;
30
- }
31
-
32
- .lui-input--error {
33
- border-color: var(--lui-error);
34
- }
35
- .lui-input--error:focus-visible {
36
- box-shadow: 0 0 0 2px color-mix(in srgb, var(--lui-error) 40%, transparent);
37
- }
38
-
39
- .lui-input--success {
40
- border-color: var(--lui-success);
41
- }
42
- .lui-input--success:focus-visible {
43
- box-shadow: 0 0 0 2px color-mix(in srgb, var(--lui-success) 40%, transparent);
44
- }
45
-
46
- .lui-input--warning {
47
- border-color: var(--lui-warning);
48
- }
49
- .lui-input--warning:focus-visible {
50
- box-shadow: 0 0 0 2px color-mix(in srgb, var(--lui-warning) 40%, transparent);
51
- }
52
-
53
- .lui-input--xs {
54
- padding: 0.25rem 0.5rem;
55
- font-size: var(--lui-font-size-xs);
56
- }
57
-
58
- .lui-input--sm {
59
- padding: 0.375rem 0.625rem;
60
- font-size: var(--lui-font-size-sm);
61
- }
62
-
63
- .lui-input--md {
64
- padding: 0.5rem 0.75rem;
65
- font-size: var(--lui-font-size-md);
66
- }
67
-
68
- .lui-input--lg {
69
- padding: 0.625rem 0.875rem;
70
- font-size: var(--lui-font-size-lg);
71
- }
72
-
73
- .lui-input--xl {
74
- padding: 0.75rem 1rem;
75
- font-size: var(--lui-font-size-xl);
76
- }
77
-
78
- .lui-input[type=file] {
79
- cursor: pointer;
80
- }
81
- .lui-input[type=file]::file-selector-button {
82
- font-family: var(--lui-font-family);
83
- font-size: inherit;
84
- font-weight: 500;
85
- background: transparent;
86
- color: var(--lui-surface-text);
87
- border: none;
88
- border-right: var(--lui-border-width) solid var(--lui-input-file-btn-border);
89
- padding: 0 0.75em 0 0;
90
- margin-right: 0.75em;
91
- cursor: pointer;
92
- transition: var(--lui-transition);
93
- }
94
- .lui-input[type=file]::file-selector-button:hover {
95
- color: var(--lui-primary);
96
- }
97
- .lui-input[type=search]::-webkit-search-decoration, .lui-input[type=search]::-webkit-search-cancel-button, .lui-input[type=search]::-webkit-search-results-button, .lui-input[type=search]::-webkit-search-results-decoration {
98
- -webkit-appearance: none;
99
- }
100
- .lui-input[type=number] {
101
- -moz-appearance: textfield;
102
- }
103
- .lui-input[type=number]::-webkit-inner-spin-button, .lui-input[type=number]::-webkit-outer-spin-button {
104
- -webkit-appearance: none;
105
- margin: 0;
106
- }
107
- .lui-input[type=date], .lui-input[type=time], .lui-input[type=datetime-local], .lui-input[type=month], .lui-input[type=week] {
108
- color-scheme: light dark;
1
+ @layer components {
2
+ .lui-input {
3
+ display: block;
4
+ background-color: var(--lui-input-bg);
5
+ border: var(--lui-border-width) solid var(--lui-input-border);
6
+ border-radius: var(--lui-input-radius);
7
+ color: var(--lui-input-text);
8
+ font-family: var(--lui-font-family);
9
+ font-weight: var(--lui-font-weight);
10
+ line-height: 1.5;
11
+ min-width: 0;
12
+ transition: var(--lui-transition);
13
+ }
14
+ .lui-input:focus-visible {
15
+ outline: none;
16
+ border-color: var(--lui-input-focus-border);
17
+ box-shadow: 0 0 0 2px var(--lui-input-focus-ring-color);
18
+ }
19
+ .lui-input::placeholder {
20
+ color: var(--lui-input-placeholder);
21
+ }
22
+ .lui-input--disabled, .lui-input:disabled {
23
+ opacity: var(--lui-disabled-opacity);
24
+ cursor: not-allowed;
25
+ }
26
+ .lui-input--readonly {
27
+ cursor: default;
28
+ }
29
+ .lui-input--full-width {
30
+ width: 100%;
31
+ }
32
+ .lui-input--error {
33
+ border-color: var(--lui-error);
34
+ }
35
+ .lui-input--error:focus-visible {
36
+ box-shadow: 0 0 0 2px color-mix(in srgb, var(--lui-error) 40%, transparent);
37
+ }
38
+ .lui-input--success {
39
+ border-color: var(--lui-success);
40
+ }
41
+ .lui-input--success:focus-visible {
42
+ box-shadow: 0 0 0 2px color-mix(in srgb, var(--lui-success) 40%, transparent);
43
+ }
44
+ .lui-input--warning {
45
+ border-color: var(--lui-warning);
46
+ }
47
+ .lui-input--warning:focus-visible {
48
+ box-shadow: 0 0 0 2px color-mix(in srgb, var(--lui-warning) 40%, transparent);
49
+ }
50
+ .lui-input--xs {
51
+ padding: 0.25rem 0.5rem;
52
+ font-size: var(--lui-font-size-xs);
53
+ }
54
+ .lui-input--sm {
55
+ padding: 0.375rem 0.625rem;
56
+ font-size: var(--lui-font-size-sm);
57
+ }
58
+ .lui-input--md {
59
+ padding: 0.5rem 0.75rem;
60
+ font-size: var(--lui-font-size-md);
61
+ }
62
+ .lui-input--lg {
63
+ padding: 0.625rem 0.875rem;
64
+ font-size: var(--lui-font-size-lg);
65
+ }
66
+ .lui-input--xl {
67
+ padding: 0.75rem 1rem;
68
+ font-size: var(--lui-font-size-xl);
69
+ }
70
+ .lui-input[type=file] {
71
+ cursor: pointer;
72
+ }
73
+ .lui-input[type=file]::file-selector-button {
74
+ font-family: var(--lui-font-family);
75
+ font-size: inherit;
76
+ font-weight: 500;
77
+ background: transparent;
78
+ color: var(--lui-surface-text);
79
+ border: none;
80
+ border-right: var(--lui-border-width) solid var(--lui-input-file-btn-border);
81
+ padding: 0 0.75em 0 0;
82
+ margin-right: 0.75em;
83
+ cursor: pointer;
84
+ transition: var(--lui-transition);
85
+ }
86
+ .lui-input[type=file]::file-selector-button:hover {
87
+ color: var(--lui-primary);
88
+ }
89
+ .lui-input[type=search]::-webkit-search-decoration, .lui-input[type=search]::-webkit-search-cancel-button, .lui-input[type=search]::-webkit-search-results-button, .lui-input[type=search]::-webkit-search-results-decoration {
90
+ -webkit-appearance: none;
91
+ }
92
+ .lui-input[type=number] {
93
+ -moz-appearance: textfield;
94
+ }
95
+ .lui-input[type=number]::-webkit-inner-spin-button, .lui-input[type=number]::-webkit-outer-spin-button {
96
+ -webkit-appearance: none;
97
+ margin: 0;
98
+ }
99
+ .lui-input[type=date], .lui-input[type=time], .lui-input[type=datetime-local], .lui-input[type=month], .lui-input[type=week] {
100
+ color-scheme: light dark;
101
+ }
109
102
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ladder-ui/input",
3
- "version": "0.0.3",
3
+ "version": "0.0.5",
4
4
  "type": "module",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",
@@ -47,7 +47,7 @@
47
47
  "sass": "^1.90.0",
48
48
  "tslib": "^2.6.2",
49
49
  "typescript": "^5.3.3",
50
- "@ladder-ui/core": "0.0.3"
50
+ "@ladder-ui/core": "0.0.5"
51
51
  },
52
52
  "peerDependencies": {
53
53
  "@ladder-ui/core": ">=0.0.0",