@idds/styles 1.0.26

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 (81) hide show
  1. package/README.md +147 -0
  2. package/package.json +55 -0
  3. package/src/colors/brands/bgn.css +29 -0
  4. package/src/colors/brands/bkn.css +32 -0
  5. package/src/colors/brands/inagov.css +39 -0
  6. package/src/colors/brands/inaku.css +28 -0
  7. package/src/colors/brands/inapas.css +28 -0
  8. package/src/colors/brands/lan.css +38 -0
  9. package/src/colors/brands/pan-rb.css +30 -0
  10. package/src/colors/index.css +11 -0
  11. package/src/colors/primitives/index.css +150 -0
  12. package/src/colors/product/index.css +205 -0
  13. package/src/colors/utilities/index.css +77 -0
  14. package/src/components/accordion-card.css +99 -0
  15. package/src/components/accordion.css +120 -0
  16. package/src/components/action-dropdown.css +140 -0
  17. package/src/components/alert.css +180 -0
  18. package/src/components/avatar.css +182 -0
  19. package/src/components/badge.css +244 -0
  20. package/src/components/bottom-sheet.css +61 -0
  21. package/src/components/breadcrumb.css +94 -0
  22. package/src/components/button-group.css +130 -0
  23. package/src/components/button.css +233 -0
  24. package/src/components/card.css +488 -0
  25. package/src/components/carousel.css +100 -0
  26. package/src/components/chart.css +81 -0
  27. package/src/components/checkbox.css +211 -0
  28. package/src/components/chip.css +228 -0
  29. package/src/components/collapse.css +84 -0
  30. package/src/components/confirmation.css +131 -0
  31. package/src/components/date-picker.css +1063 -0
  32. package/src/components/divider.css +174 -0
  33. package/src/components/drawer.css +757 -0
  34. package/src/components/dropdown.css +369 -0
  35. package/src/components/field-input-table.css +347 -0
  36. package/src/components/file-upload.css +357 -0
  37. package/src/components/input-search.css +428 -0
  38. package/src/components/linear-progress-indicator.css +34 -0
  39. package/src/components/modal.css +497 -0
  40. package/src/components/month-picker.css +325 -0
  41. package/src/components/multiple-choice-grid.css +383 -0
  42. package/src/components/pagination.css +415 -0
  43. package/src/components/password-input.css +472 -0
  44. package/src/components/phone-input.css +412 -0
  45. package/src/components/progress-bar.css +447 -0
  46. package/src/components/radio-input.css +263 -0
  47. package/src/components/reset.css +431 -0
  48. package/src/components/select-dropdown.css +663 -0
  49. package/src/components/select-option.css +217 -0
  50. package/src/components/skeleton.css +488 -0
  51. package/src/components/spinner.css +450 -0
  52. package/src/components/stepper.css +209 -0
  53. package/src/components/tab-horizontal.css +278 -0
  54. package/src/components/tab-vertical.css +261 -0
  55. package/src/components/table-progress-bar.css +48 -0
  56. package/src/components/table.css +538 -0
  57. package/src/components/text-area.css +216 -0
  58. package/src/components/text-field.css +275 -0
  59. package/src/components/theme-toggle.css +259 -0
  60. package/src/components/time-picker.css +436 -0
  61. package/src/components/toast.css +245 -0
  62. package/src/components/toggle.css +223 -0
  63. package/src/components/tooltip.css +452 -0
  64. package/src/components/year-picker.css +423 -0
  65. package/src/index.css +3 -0
  66. package/src/tailwind/css/bgn.css +43 -0
  67. package/src/tailwind/css/bkn.css +37 -0
  68. package/src/tailwind/css/idds.css +231 -0
  69. package/src/tailwind/css/inagov.css +33 -0
  70. package/src/tailwind/css/inaku.css +33 -0
  71. package/src/tailwind/css/inapas.css +33 -0
  72. package/src/tailwind/css/lan.css +43 -0
  73. package/src/tailwind/css/pan-rb.css +35 -0
  74. package/src/tailwind/ts/bgn.ts +20 -0
  75. package/src/tailwind/ts/bkn.ts +38 -0
  76. package/src/tailwind/ts/idds.ts +240 -0
  77. package/src/tailwind/ts/inagov.ts +35 -0
  78. package/src/tailwind/ts/inaku.ts +35 -0
  79. package/src/tailwind/ts/inapas.ts +35 -0
  80. package/src/tailwind/ts/lan.ts +45 -0
  81. package/src/tailwind/ts/panrb.ts +37 -0
package/src/components/text-area.css ADDED
@@ -0,0 +1,216 @@
1
+ /* TextArea Component Styles */
2
+
3
+ /* Base container */
4
+ .ina-text-area {
5
+ display: flex;
6
+ flex-direction: column;
7
+ gap: var(--ina-spacing-1);
8
+ }
9
+
10
+ /* Label */
11
+ .ina-text-area__label {
12
+ font-size: var(--ina-font-sm);
13
+ font-weight: var(--ina-font-medium);
14
+ color: var(--ina-content-primary);
15
+ }
16
+
17
+ /* Input wrapper */
18
+ .ina-text-area__wrapper {
19
+ display: flex;
20
+ align-items: flex-start;
21
+ gap: var(--ina-spacing-2);
22
+ border-radius: 8px;
23
+ border: 1px solid var(--ina-stroke-primary);
24
+ padding: var(--ina-spacing-2) var(--ina-spacing-3);
25
+ background-color: var(--ina-background-primary);
26
+ transition: all var(--ina-transition-base);
27
+ }
28
+
29
+ /* Input field */
30
+ .ina-text-area__input {
31
+ flex: 1;
32
+ background: transparent;
33
+ outline: none;
34
+ font-size: var(--ina-font-sm);
35
+ resize: none;
36
+ font-family: inherit;
37
+ line-height: 1.5;
38
+ }
39
+
40
+ .ina-text-area__input::placeholder {
41
+ color: var(--ina-content-tertiary);
42
+ }
43
+
44
+ /* Prefix/suffix icons */
45
+ .ina-text-area__prefix-icon,
46
+ .ina-text-area__suffix-icon {
47
+ flex-shrink: 0;
48
+ padding-top: var(--ina-spacing-2);
49
+ }
50
+
51
+ /* Clear button */
52
+ .ina-text-area__clear-button {
53
+ flex-shrink: 0;
54
+ margin-top: var(--ina-spacing-2);
55
+ background: none;
56
+ border: none;
57
+ cursor: pointer;
58
+ padding: 0;
59
+ display: inline-flex;
60
+ align-items: center;
61
+ justify-content: center;
62
+ color: var(--ina-content-secondary);
63
+ transition: color var(--ina-transition-base);
64
+ }
65
+
66
+ .ina-text-area__clear-button:hover:not(:disabled) {
67
+ color: var(--ina-content-secondary);
68
+ }
69
+
70
+ .ina-text-area__clear-button:disabled {
71
+ cursor: not-allowed;
72
+ opacity: 0.5;
73
+ }
74
+
75
+ /* Clear icon */
76
+ .ina-text-area__clear-icon {
77
+ width: 16px;
78
+ height: 16px;
79
+ }
80
+
81
+ /* Helper text/status message */
82
+ .ina-text-area__helper-text {
83
+ font-size: var(--ina-font-xs);
84
+ margin-top: var(--ina-spacing-1);
85
+ }
86
+
87
+ .ina-text-area__helper-text--neutral {
88
+ color: var(--ina-content-secondary);
89
+ }
90
+
91
+ .ina-text-area__helper-text--error {
92
+ color: var(--ina-negative-600);
93
+ }
94
+
95
+ .ina-text-area__helper-text--warning {
96
+ color: var(--ina-warning-600);
97
+ }
98
+
99
+ .ina-text-area__helper-text--success {
100
+ color: var(--ina-positive-600);
101
+ }
102
+
103
+ /* Character count */
104
+ .ina-text-area__char-count {
105
+ font-size: var(--ina-font-xs);
106
+ color: var(--ina-content-secondary);
107
+ margin-top: var(--ina-spacing-1);
108
+ }
109
+
110
+ /* Status variants */
111
+ .ina-text-area__wrapper--status-neutral {
112
+ border-color: var(--ina-stroke-primary);
113
+ }
114
+
115
+ .ina-text-area__wrapper--status-neutral:focus-within {
116
+ border-color: var(--ina-content-primary);
117
+ }
118
+
119
+ .ina-text-area__wrapper--status-error {
120
+ border-color: var(--ina-negative-500);
121
+ }
122
+
123
+ .ina-text-area__wrapper.ina-text-area__wrapper--status-error:focus-within {
124
+ border-color: var(--ina-negative-600);
125
+ box-shadow: 0 1px 2px 0 rgba(31, 31, 31, 0.1),
126
+ 0 0 0 3px var(--ina-negative-50);
127
+ }
128
+
129
+ .ina-text-area__wrapper--status-warning {
130
+ border-color: var(--ina-warning-500);
131
+ }
132
+
133
+ .ina-text-area__wrapper.ina-text-area__wrapper--status-warning:focus-within {
134
+ border-color: var(--ina-warning-600);
135
+ box-shadow: 0 1px 2px 0 rgba(31, 31, 31, 0.1), 0 0 0 3px var(--ina-warning-50);
136
+ }
137
+
138
+ .ina-text-area__wrapper--status-success {
139
+ border-color: var(--ina-positive-500);
140
+ }
141
+
142
+ .ina-text-area__wrapper.ina-text-area__wrapper--status-success:focus-within {
143
+ border-color: var(--ina-positive-600);
144
+ box-shadow: 0 1px 2px 0 rgba(31, 31, 31, 0.1),
145
+ 0 0 0 3px var(--ina-positive-50);
146
+ }
147
+
148
+ /* Disabled state */
149
+ .ina-text-area__wrapper--disabled {
150
+ background-color: var(--ina-neutral-50);
151
+ border-color: var(--ina-stroke-secondary);
152
+ cursor: not-allowed;
153
+ }
154
+
155
+ .ina-text-area__input:disabled {
156
+ cursor: not-allowed;
157
+ opacity: 0.6;
158
+ }
159
+
160
+ /* Focus styles - Sesuai design Figma */
161
+ .ina-text-area__wrapper:focus-within {
162
+ box-shadow: 0 1px 2px 0 rgba(31, 31, 31, 0.1), 0 0 0 3px #f3f3f3;
163
+ outline: none;
164
+ background-color: var(--ina-background-primary);
165
+ }
166
+ /* hover styles - Sesuai design Figma */
167
+ .ina-text-area__wrapper:hover {
168
+ background-color: var(--ina-neutral-50);
169
+ }
170
+
171
+ /* Responsive adjustments */
172
+ @media (max-width: 640px) {
173
+ .ina-text-area__wrapper {
174
+ padding: var(--ina-spacing-2) var(--ina-spacing-3);
175
+ }
176
+
177
+ .ina-text-area__input {
178
+ font-size: var(--ina-font-xs); /* Mengikuti SelectDropdown reference */
179
+ }
180
+ }
181
+
182
+ /* Dark mode */
183
+ /* @media (prefers-color-scheme: dark) {
184
+ .ina-text-area__label {
185
+ color: var(--ina-content-dark-primary);
186
+ }
187
+
188
+ .ina-text-area__wrapper {
189
+ background-color: var(--ina-background-dark-primary);
190
+ border-color: var(--ina-stroke-primary-dark);
191
+ }
192
+
193
+ .ina-text-area__input {
194
+ color: var(--ina-content-dark-primary);
195
+ }
196
+
197
+ .ina-text-area__input::placeholder {
198
+ color: var(--ina-content-dark-placeholder);
199
+ }
200
+
201
+ .ina-text-area__clear-button {
202
+ color: var(--ina-content-dark-secondary);
203
+ }
204
+
205
+ .ina-text-area__clear-button:hover:not(:disabled) {
206
+ color: var(--ina-content-dark-primary);
207
+ }
208
+
209
+ .ina-text-area__char-count {
210
+ color: var(--ina-content-dark-secondary);
211
+ }
212
+
213
+ .ina-text-area__wrapper--status-neutral:focus-within {
214
+ border-color: var(--ina-primary-400);
215
+ }
216
+ } */
package/src/components/text-field.css ADDED
@@ -0,0 +1,275 @@
1
+ /* TextField Component Styles */
2
+
3
+ /* Base container */
4
+ .ina-text-field {
5
+ display: flex;
6
+ flex-direction: column;
7
+ }
8
+
9
+ /* Label */
10
+ .ina-text-field__label {
11
+ font-size: var(--ina-font-sm);
12
+ font-weight: var(--ina-font-medium);
13
+ color: var(--ina-content-primary);
14
+ margin-bottom: 8px;
15
+ }
16
+
17
+ /* Input wrapper */
18
+ .ina-text-field__wrapper {
19
+ display: flex;
20
+ align-items: center;
21
+ gap: var(--ina-spacing-2);
22
+ border-radius: 8px;
23
+ border: 1px solid var(--ina-stroke-primary);
24
+ padding: var(--ina-spacing-2) var(--ina-spacing-3);
25
+ background-color: var(--ina-background-primary);
26
+ transition: all var(--ina-transition-base);
27
+ }
28
+
29
+ /* Size variants */
30
+ .ina-text-field__wrapper--size-sm {
31
+ /* Desktop >= 768px */
32
+ height: 40px;
33
+ }
34
+
35
+ .ina-text-field__wrapper--size-md {
36
+ /* Desktop >= 768px */
37
+ height: 44px;
38
+ }
39
+
40
+ .ina-text-field__wrapper--size-lg {
41
+ /* Desktop >= 768px */
42
+ height: 48px;
43
+ }
44
+
45
+ /* Responsive adjustments */
46
+ @media (max-width: 767px) {
47
+ .ina-text-field__wrapper--size-sm {
48
+ height: 36px;
49
+ }
50
+
51
+ .ina-text-field__wrapper--size-md {
52
+ height: 40px;
53
+ }
54
+
55
+ .ina-text-field__wrapper--size-lg {
56
+ height: 44px;
57
+ }
58
+ }
59
+
60
+ @media (max-width: 639px) {
61
+ .ina-text-field__wrapper--size-sm {
62
+ height: 32px;
63
+ }
64
+
65
+ .ina-text-field__wrapper--size-md {
66
+ height: 36px;
67
+ }
68
+
69
+ .ina-text-field__wrapper--size-lg {
70
+ height: 40px;
71
+ }
72
+ }
73
+
74
+ /* Input field */
75
+ .ina-text-field__input {
76
+ flex: 1;
77
+ background: transparent;
78
+ outline: none;
79
+ font-size: var(--ina-font-sm);
80
+ font-family: inherit;
81
+ }
82
+
83
+ .ina-text-field__input::placeholder {
84
+ color: var(--ina-content-tertiary);
85
+ }
86
+
87
+ /* Prefix/suffix icons */
88
+ .ina-text-field__prefix-icon,
89
+ .ina-text-field__suffix-icon {
90
+ flex-shrink: 0;
91
+ }
92
+
93
+ /* Clear button */
94
+ .ina-text-field__clear-button {
95
+ flex-shrink: 0;
96
+ background: none;
97
+ border: none;
98
+ cursor: pointer;
99
+ padding: 0;
100
+ display: inline-flex;
101
+ align-items: center;
102
+ justify-content: center;
103
+ color: var(--ina-content-dark-secondary);
104
+ transition: color var(--ina-transition-base);
105
+ }
106
+
107
+ .ina-text-field__clear-button:hover:not(:disabled) {
108
+ color: var(--ina-content-secondary);
109
+ }
110
+
111
+ .ina-text-field__clear-button:disabled {
112
+ cursor: not-allowed;
113
+ opacity: 0.5;
114
+ }
115
+
116
+ /* Clear icon */
117
+ .ina-text-field__clear-icon {
118
+ width: 16px;
119
+ height: 16px;
120
+ }
121
+
122
+ /* Bottom area with helper text and char count */
123
+ .ina-text-field__bottom-area {
124
+ display: flex;
125
+ align-items: center;
126
+ justify-content: space-between;
127
+ gap: var(--ina-spacing-6);
128
+ }
129
+
130
+ /* Helper text/status message */
131
+ .ina-text-field__helper-text {
132
+ font-size: var(--ina-font-xs);
133
+ padding-top: var(--ina-spacing-1);
134
+ }
135
+
136
+ .ina-text-field__helper-text--neutral {
137
+ color: var(--ina-content-secondary);
138
+ }
139
+
140
+ .ina-text-field__helper-text--error {
141
+ color: var(--ina-negative-600);
142
+ }
143
+
144
+ .ina-text-field__helper-text--warning {
145
+ color: var(--ina-warning-600);
146
+ }
147
+
148
+ .ina-text-field__helper-text--success {
149
+ color: var(--ina-positive-600);
150
+ }
151
+
152
+ /* Character count */
153
+ .ina-text-field__char-count {
154
+ font-size: var(--ina-font-xs);
155
+ color: var(--ina-content-secondary);
156
+ }
157
+
158
+ /* Status variants */
159
+ .ina-text-field__wrapper--status-neutral {
160
+ border-color: var(--ina-stroke-primary);
161
+ }
162
+
163
+ .ina-text-field__wrapper--status-neutral:focus-within {
164
+ border-color: var(--ina-content-primary);
165
+ }
166
+
167
+ .ina-text-field__wrapper--status-error {
168
+ border-color: var(--ina-negative-500);
169
+ }
170
+
171
+ .ina-text-field__wrapper.ina-text-field__wrapper--status-error:focus-within {
172
+ border-color: var(--ina-negative-600);
173
+ box-shadow: 0 1px 2px 0 rgba(31, 31, 31, 0.1),
174
+ 0 0 0 3px var(--ina-negative-50) !important;
175
+ }
176
+
177
+ .ina-text-field__wrapper--status-warning {
178
+ border-color: var(--ina-warning-500);
179
+ }
180
+
181
+ .ina-text-field__wrapper.ina-text-field__wrapper--status-warning:focus-within {
182
+ border-color: var(--ina-warning-600);
183
+ box-shadow: 0 1px 2px 0 rgba(31, 31, 31, 0.1), 0 0 0 3px var(--ina-warning-50) !important;
184
+ }
185
+
186
+ .ina-text-field__wrapper--status-success {
187
+ border-color: var(--ina-positive-500);
188
+ }
189
+
190
+ .ina-text-field__wrapper.ina-text-field__wrapper--status-success:focus-within {
191
+ border-color: var(--ina-positive-600);
192
+ box-shadow: 0 1px 2px 0 rgba(31, 31, 31, 0.1),
193
+ 0 0 0 3px var(--ina-positive-50) !important;
194
+ }
195
+
196
+ /* Disabled state */
197
+ .ina-text-field__wrapper--disabled {
198
+ background-color: var(--ina-neutral-50);
199
+ border-color: var(--ina-stroke-secondary);
200
+ cursor: not-allowed;
201
+ }
202
+
203
+ .ina-text-field__input:disabled {
204
+ cursor: not-allowed;
205
+ opacity: 0.6;
206
+ }
207
+
208
+ /* Focus styles - Sesuai design Figma */
209
+ .ina-text-field__wrapper:focus-within {
210
+ box-shadow: 0 1px 2px 0 rgba(31, 31, 31, 0.1), 0 0 0 3px #f3f3f3;
211
+ outline: none;
212
+ background-color: var(--ina-background-primary);
213
+ border-color: var(--ina-content-primary);
214
+ }
215
+ /* hover styles - Sesuai design Figma */
216
+ .ina-text-field__wrapper:hover {
217
+ background-color: var(--ina-neutral-50);
218
+ }
219
+
220
+ /* Responsive adjustments */
221
+ @media (max-width: 640px) {
222
+ .ina-text-field__wrapper {
223
+ padding: var(--ina-spacing-2) var(--ina-spacing-3);
224
+ }
225
+
226
+ .ina-text-field__input {
227
+ font-size: var(--ina-font-xs); /* Mengikuti SelectDropdown reference */
228
+ }
229
+
230
+ .ina-text-field__bottom-area {
231
+ flex-direction: column;
232
+ align-items: flex-start;
233
+ gap: var(--ina-spacing-1);
234
+ }
235
+ }
236
+
237
+ /* Dark mode */
238
+ /* @media (prefers-color-scheme: dark) {
239
+ .ina-text-field__label {
240
+ color: var(--ina-content-dark-primary);
241
+ }
242
+
243
+ .ina-text-field__wrapper {
244
+ background-color: var(--ina-background-dark-primary);
245
+ border-color: var(--ina-stroke-primary-dark);
246
+ }
247
+
248
+ .ina-text-field__input {
249
+ color: var(--ina-content-dark-primary);
250
+ }
251
+
252
+ .ina-text-field__input::placeholder {
253
+ color: var(--ina-content-dark-placeholder);
254
+ }
255
+
256
+ .ina-text-field__clear-button {
257
+ color: var(--ina-content-dark-secondary);
258
+ }
259
+
260
+ .ina-text-field__clear-button:hover:not(:disabled) {
261
+ color: var(--ina-content-dark-primary);
262
+ }
263
+
264
+ .ina-text-field__char-count {
265
+ color: var(--ina-content-dark-secondary);
266
+ }
267
+
268
+ .ina-text-field__wrapper--status-neutral:focus-within {
269
+ border-color: var(--ina-primary-400);
270
+ }
271
+
272
+ .ina-text-field__wrapper--disabled {
273
+ background-color: var(--ina-neutral-900);
274
+ }
275
+ } */