@idds/styles 1.2.11 → 1.2.12

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 (95) hide show
  1. package/dist/base.css +1071 -0
  2. package/dist/base.min.css +1 -0
  3. package/dist/index.css +14801 -0
  4. package/dist/index.min.css +15 -0
  5. package/dist/tailwind/css/bgn.min.css +1 -0
  6. package/dist/tailwind/css/bkn.min.css +1 -0
  7. package/dist/tailwind/css/idds.min.css +1 -0
  8. package/dist/tailwind/css/inagov.min.css +1 -0
  9. package/dist/tailwind/css/inaku.min.css +1 -0
  10. package/dist/tailwind/css/inapas.min.css +1 -0
  11. package/dist/tailwind/css/lan.min.css +1 -0
  12. package/dist/tailwind/css/pan-rb.min.css +1 -0
  13. package/package.json +31 -21
  14. package/src/colors/brands/bgn.css +0 -30
  15. package/src/colors/brands/bkn.css +0 -33
  16. package/src/colors/brands/inagov.css +0 -40
  17. package/src/colors/brands/inaku.css +0 -29
  18. package/src/colors/brands/inapas.css +0 -29
  19. package/src/colors/brands/lan.css +0 -39
  20. package/src/colors/brands/pan-rb.css +0 -31
  21. package/src/colors/index.css +0 -11
  22. package/src/colors/primitives/index.css +0 -175
  23. package/src/colors/product/index.css +0 -205
  24. package/src/colors/utilities/index.css +0 -77
  25. package/src/components/accordion-card.css +0 -99
  26. package/src/components/accordion.css +0 -120
  27. package/src/components/action-dropdown.css +0 -140
  28. package/src/components/alert.css +0 -180
  29. package/src/components/avatar.css +0 -182
  30. package/src/components/badge.css +0 -247
  31. package/src/components/bottom-sheet.css +0 -61
  32. package/src/components/breadcrumb.css +0 -97
  33. package/src/components/button-group.css +0 -130
  34. package/src/components/button.css +0 -241
  35. package/src/components/card.css +0 -576
  36. package/src/components/carousel.css +0 -100
  37. package/src/components/chart.css +0 -81
  38. package/src/components/checkbox.css +0 -211
  39. package/src/components/chip.css +0 -245
  40. package/src/components/collapse.css +0 -84
  41. package/src/components/confirmation.css +0 -131
  42. package/src/components/date-picker.css +0 -1059
  43. package/src/components/divider.css +0 -174
  44. package/src/components/drawer.css +0 -752
  45. package/src/components/dropdown.css +0 -370
  46. package/src/components/field-input-table.css +0 -347
  47. package/src/components/file-upload.css +0 -333
  48. package/src/components/input-search.css +0 -428
  49. package/src/components/linear-progress-indicator.css +0 -34
  50. package/src/components/modal.css +0 -507
  51. package/src/components/month-picker.css +0 -326
  52. package/src/components/multiple-choice-grid.css +0 -383
  53. package/src/components/one-time-password.css +0 -119
  54. package/src/components/pagination.css +0 -429
  55. package/src/components/password-input.css +0 -477
  56. package/src/components/phone-input.css +0 -412
  57. package/src/components/progress-bar.css +0 -447
  58. package/src/components/radio-input.css +0 -277
  59. package/src/components/reset.css +0 -431
  60. package/src/components/select-dropdown.css +0 -663
  61. package/src/components/select-option.css +0 -217
  62. package/src/components/single-file-upload.css +0 -186
  63. package/src/components/skeleton.css +0 -488
  64. package/src/components/spinner.css +0 -450
  65. package/src/components/stepper.css +0 -260
  66. package/src/components/tab-horizontal.css +0 -278
  67. package/src/components/tab-vertical.css +0 -261
  68. package/src/components/table-progress-bar.css +0 -48
  69. package/src/components/table.css +0 -538
  70. package/src/components/text-area.css +0 -220
  71. package/src/components/text-field.css +0 -278
  72. package/src/components/theme-toggle.css +0 -259
  73. package/src/components/time-picker.css +0 -436
  74. package/src/components/toast.css +0 -265
  75. package/src/components/toggle.css +0 -195
  76. package/src/components/tooltip.css +0 -343
  77. package/src/components/year-picker.css +0 -424
  78. package/src/index.css +0 -3
  79. /package/{src → dist}/tailwind/css/bgn.css +0 -0
  80. /package/{src → dist}/tailwind/css/bkn.css +0 -0
  81. /package/{src → dist}/tailwind/css/idds.css +0 -0
  82. /package/{src → dist}/tailwind/css/inagov.css +0 -0
  83. /package/{src → dist}/tailwind/css/inaku.css +0 -0
  84. /package/{src → dist}/tailwind/css/inapas.css +0 -0
  85. /package/{src → dist}/tailwind/css/lan.css +0 -0
  86. /package/{src → dist}/tailwind/css/pan-rb.css +0 -0
  87. /package/{src → dist}/tailwind/ts/bgn.ts +0 -0
  88. /package/{src → dist}/tailwind/ts/bkn.ts +0 -0
  89. /package/{src → dist}/tailwind/ts/default.ts +0 -0
  90. /package/{src → dist}/tailwind/ts/idds.ts +0 -0
  91. /package/{src → dist}/tailwind/ts/inagov.ts +0 -0
  92. /package/{src → dist}/tailwind/ts/inaku.ts +0 -0
  93. /package/{src → dist}/tailwind/ts/inapas.ts +0 -0
  94. /package/{src → dist}/tailwind/ts/lan.ts +0 -0
  95. /package/{src → dist}/tailwind/ts/pan-rb.ts +0 -0
@@ -1,205 +0,0 @@
1
- /* Base Colors - Light Mode (Default) */
2
- :root,
3
- [data-theme='light'] {
4
- /* Base Colors */
5
- --ina-white: var(--ina-neutral-25);
6
- --ina-black: var(--ina-neutral-900);
7
-
8
- /* Background Colors */
9
- --ina-background-primary: var(--ina-neutral-25);
10
- --ina-background-secondary: var(--ina-neutral-50);
11
- --ina-background-tertiary: var(--ina-neutral-100);
12
- --ina-background-overlay: var(--ina-overlay);
13
-
14
- /* Content Colors */
15
- --ina-content-primary: var(--ina-neutral-800);
16
- --ina-content-secondary: var(--ina-neutral-600);
17
- --ina-content-tertiary: var(--ina-neutral-400);
18
- --ina-content-guide: var(--ina-blue-500);
19
- --ina-content-negative: var(--ina-red-600);
20
- --ina-content-positive: var(--ina-green-600);
21
-
22
- /* Stroke Colors */
23
- --ina-stroke-primary: var(--ina-neutral-200);
24
- --ina-stroke-secondary: var(--ina-neutral-400);
25
- --ina-stroke-tertiary: var(--ina-neutral-900);
26
-
27
- /* Guide Colors */
28
- --ina-guide-50: var(--ina-blue-50);
29
- --ina-guide-100: var(--ina-blue-100);
30
- --ina-guide-200: var(--ina-blue-200);
31
- --ina-guide-300: var(--ina-blue-300);
32
- --ina-guide-400: var(--ina-blue-400);
33
- --ina-guide-500: var(--ina-blue-500);
34
- --ina-guide-600: var(--ina-blue-600);
35
- --ina-guide-700: var(--ina-blue-700);
36
- --ina-guide-800: var(--ina-blue-800);
37
- --ina-guide-900: var(--ina-blue-900);
38
-
39
- /* Negative Colors */
40
- --ina-negative-50: var(--ina-red-50);
41
- --ina-negative-100: var(--ina-red-100);
42
- --ina-negative-200: var(--ina-red-200);
43
- --ina-negative-300: var(--ina-red-300);
44
- --ina-negative-400: var(--ina-red-400);
45
- --ina-negative-500: var(--ina-red-500);
46
- --ina-negative-600: var(--ina-red-600);
47
- --ina-negative-700: var(--ina-red-700);
48
- --ina-negative-800: var(--ina-red-800);
49
- --ina-negative-900: var(--ina-red-900);
50
- --ina-sentiment-negative-50: var(--ina-red-50);
51
- --ina-sentiment-negative-100: var(--ina-red-100);
52
- --ina-sentiment-negative-200: var(--ina-red-200);
53
- --ina-sentiment-negative-300: var(--ina-red-300);
54
- --ina-sentiment-negative-400: var(--ina-red-400);
55
- --ina-sentiment-negative-500: var(--ina-red-500);
56
- --ina-sentiment-negative-600: var(--ina-red-600);
57
- --ina-sentiment-negative-700: var(--ina-red-700);
58
- --ina-sentiment-negative-800: var(--ina-red-800);
59
- --ina-sentiment-negative-900: var(--ina-red-900);
60
-
61
- /* Positive Colors */
62
- --ina-positive-50: var(--ina-green-50);
63
- --ina-positive-100: var(--ina-green-100);
64
- --ina-positive-200: var(--ina-green-200);
65
- --ina-positive-300: var(--ina-green-300);
66
- --ina-positive-400: var(--ina-green-400);
67
- --ina-positive-500: var(--ina-green-500);
68
- --ina-positive-600: var(--ina-green-600);
69
- --ina-positive-700: var(--ina-green-700);
70
- --ina-positive-800: var(--ina-green-800);
71
- --ina-positive-900: var(--ina-green-900);
72
- --ina-sentiment-positive-50: var(--ina-green-50);
73
- --ina-sentiment-positive-100: var(--ina-green-100);
74
- --ina-sentiment-positive-200: var(--ina-green-200);
75
- --ina-sentiment-positive-300: var(--ina-green-300);
76
- --ina-sentiment-positive-400: var(--ina-green-400);
77
- --ina-sentiment-positive-500: var(--ina-green-500);
78
- --ina-sentiment-positive-600: var(--ina-green-600);
79
- --ina-sentiment-positive-700: var(--ina-green-700);
80
- --ina-sentiment-positive-800: var(--ina-green-800);
81
-
82
- /* Warning Colors */
83
- --ina-warning-50: var(--ina-orange-50);
84
- --ina-warning-100: var(--ina-orange-100);
85
- --ina-warning-200: var(--ina-orange-200);
86
- --ina-warning-300: var(--ina-orange-300);
87
- --ina-warning-400: var(--ina-orange-400);
88
- --ina-warning-500: var(--ina-orange-500);
89
- --ina-warning-600: var(--ina-orange-600);
90
- --ina-warning-700: var(--ina-orange-700);
91
- --ina-warning-800: var(--ina-orange-800);
92
- --ina-warning-900: var(--ina-orange-900);
93
- --ina-sentiment-warning-50: var(--ina-orange-50);
94
- --ina-sentiment-warning-100: var(--ina-orange-100);
95
- --ina-sentiment-warning-200: var(--ina-orange-200);
96
- --ina-sentiment-warning-300: var(--ina-orange-300);
97
- --ina-sentiment-warning-400: var(--ina-orange-400);
98
- --ina-sentiment-warning-500: var(--ina-orange-500);
99
- --ina-sentiment-warning-600: var(--ina-orange-600);
100
- --ina-sentiment-warning-700: var(--ina-orange-700);
101
- --ina-sentiment-warning-800: var(--ina-orange-800);
102
- }
103
-
104
- /* Base Colors - Dark Mode */
105
- [data-theme='dark'] {
106
- /* Base Colors */
107
- --ina-white: var(--ina-neutral-900);
108
- --ina-black: var(--ina-neutral-25);
109
-
110
- /* Background Colors */
111
- --ina-background-primary: var(--ina-neutral-900);
112
- --ina-background-secondary: var(--ina-neutral-800);
113
- --ina-background-tertiary: var(--ina-neutral-700);
114
- --ina-background-overlay: var(--ina-overlay);
115
-
116
- /* Content Colors */
117
- --ina-content-primary: var(--ina-neutral-25);
118
- --ina-content-secondary: var(--ina-neutral-400);
119
- --ina-content-tertiary: var(--ina-neutral-500);
120
- --ina-content-guide: var(--ina-blue-400);
121
- --ina-content-negative: var(--ina-red-400);
122
- --ina-content-positive: var(--ina-green-400);
123
-
124
- /* Stroke Colors */
125
- --ina-stroke-primary: var(--ina-neutral-700);
126
- --ina-stroke-secondary: var(--ina-neutral-400);
127
- --ina-stroke-tertiary: var(--ina-neutral-200);
128
-
129
- /* Guide Colors */
130
- --ina-guide-50: var(--ina-blue-50);
131
- --ina-guide-100: var(--ina-blue-100);
132
- --ina-guide-200: var(--ina-blue-200);
133
- --ina-guide-300: var(--ina-blue-300);
134
- --ina-guide-400: var(--ina-blue-400);
135
- --ina-guide-500: var(--ina-blue-500);
136
- --ina-guide-600: var(--ina-blue-600);
137
- --ina-guide-700: var(--ina-blue-700);
138
- --ina-guide-800: var(--ina-blue-800);
139
- --ina-guide-900: var(--ina-blue-900);
140
-
141
- /* Negative Colors */
142
- --ina-negative-50: var(--ina-red-50);
143
- --ina-negative-100: var(--ina-red-100);
144
- --ina-negative-200: var(--ina-red-200);
145
- --ina-negative-300: var(--ina-red-300);
146
- --ina-negative-400: var(--ina-red-400);
147
- --ina-negative-500: var(--ina-red-500);
148
- --ina-negative-600: var(--ina-red-600);
149
- --ina-negative-700: var(--ina-red-700);
150
- --ina-negative-800: var(--ina-red-800);
151
- --ina-negative-900: var(--ina-red-900);
152
- --ina-sentiment-negative-50: var(--ina-red-50);
153
- --ina-sentiment-negative-100: var(--ina-red-100);
154
- --ina-sentiment-negative-200: var(--ina-red-200);
155
- --ina-sentiment-negative-300: var(--ina-red-300);
156
- --ina-sentiment-negative-400: var(--ina-red-400);
157
- --ina-sentiment-negative-500: var(--ina-red-500);
158
- --ina-sentiment-negative-600: var(--ina-red-600);
159
- --ina-sentiment-negative-700: var(--ina-red-700);
160
- --ina-sentiment-negative-800: var(--ina-red-800);
161
- --ina-sentiment-negative-900: var(--ina-red-900);
162
-
163
- /* Positive Colors */
164
- --ina-positive-50: var(--ina-green-50);
165
- --ina-positive-100: var(--ina-green-100);
166
- --ina-positive-200: var(--ina-green-200);
167
- --ina-positive-300: var(--ina-green-300);
168
- --ina-positive-400: var(--ina-green-400);
169
- --ina-positive-500: var(--ina-green-500);
170
- --ina-positive-600: var(--ina-green-600);
171
- --ina-positive-700: var(--ina-green-700);
172
- --ina-positive-800: var(--ina-green-800);
173
- --ina-positive-900: var(--ina-green-900);
174
- --ina-sentiment-positive-50: var(--ina-green-50);
175
- --ina-sentiment-positive-100: var(--ina-green-100);
176
- --ina-sentiment-positive-200: var(--ina-green-200);
177
- --ina-sentiment-positive-300: var(--ina-green-300);
178
- --ina-sentiment-positive-400: var(--ina-green-400);
179
- --ina-sentiment-positive-500: var(--ina-green-500);
180
- --ina-sentiment-positive-600: var(--ina-green-600);
181
- --ina-sentiment-positive-700: var(--ina-green-700);
182
- --ina-sentiment-positive-800: var(--ina-green-800);
183
-
184
- /* Warning Colors */
185
- --ina-warning-50: var(--ina-orange-50);
186
- --ina-warning-100: var(--ina-orange-100);
187
- --ina-warning-200: var(--ina-orange-200);
188
- --ina-warning-300: var(--ina-orange-300);
189
- --ina-warning-400: var(--ina-orange-400);
190
- --ina-warning-500: var(--ina-orange-500);
191
- --ina-warning-600: var(--ina-orange-600);
192
- --ina-warning-700: var(--ina-orange-700);
193
- --ina-warning-800: var(--ina-orange-800);
194
- --ina-warning-900: var(--ina-orange-900);
195
- --ina-sentiment-warning-50: var(--ina-orange-50);
196
- --ina-sentiment-warning-100: var(--ina-orange-100);
197
- --ina-sentiment-warning-200: var(--ina-orange-200);
198
- --ina-sentiment-warning-300: var(--ina-orange-300);
199
- --ina-sentiment-warning-400: var(--ina-orange-400);
200
- --ina-sentiment-warning-500: var(--ina-orange-500);
201
- --ina-sentiment-warning-600: var(--ina-orange-600);
202
- --ina-sentiment-warning-700: var(--ina-orange-700);
203
- --ina-sentiment-warning-800: var(--ina-orange-800);
204
- --ina-sentiment-warning-900: var(--ina-orange-900);
205
- }
@@ -1,77 +0,0 @@
1
- :root {
2
- /* Font Sizes */
3
- --ina-font-3xs: 0.5rem; /* 8px */
4
- --ina-font-2xs: 0.625rem; /* 10px */
5
- --ina-font-xs: 0.75rem; /* 12px */
6
- --ina-font-sm: 0.875rem; /* 14px */
7
- --ina-font-base: 1rem; /* 16px */
8
- --ina-font-lg: 1.125rem; /* 18px */
9
- --ina-font-xl: 1.25rem; /* 20px */
10
- --ina-font-2xl: 1.5rem; /* 24px */
11
- --ina-font-3xl: 1.875rem; /* 30px */
12
- --ina-font-4xl: 2.25rem; /* 36px */
13
-
14
- /* Line Heights */
15
- --ina-line-height-xs: 1rem; /* 16px */
16
- --ina-line-height-sm: 1.25rem; /* 20px */
17
- --ina-line-height-base: 1.5rem; /* 24px */
18
- --ina-line-height-lg: 1.75rem; /* 28px */
19
- --ina-line-height-xl: 2rem; /* 32px */
20
-
21
- /* Font Weights */
22
- --ina-font-thin: 100;
23
- --ina-font-extralight: 200;
24
- --ina-font-light: 300;
25
- --ina-font-normal: 400;
26
- --ina-font-medium: 500;
27
- --ina-font-semibold: 600;
28
- --ina-font-bold: 700;
29
- --ina-font-extrabold: 800;
30
- --ina-font-black: 900;
31
-
32
- /* Spacing */
33
- --ina-spacing-1: 0.25rem; /* 4px */
34
- --ina-spacing-2: 0.5rem; /* 8px */
35
- --ina-spacing-3: 0.75rem; /* 12px */
36
- --ina-spacing-3-5: 0.875rem; /* 14px */
37
- --ina-spacing-4: 1rem; /* 16px */
38
- --ina-spacing-5: 1.25rem; /* 20px */
39
- --ina-spacing-6: 1.5rem; /* 24px */
40
- --ina-spacing-8: 2rem; /* 32px */
41
- --ina-spacing-10: 2.5rem; /* 40px */
42
- --ina-spacing-12: 3rem; /* 48px */
43
- --ina-spacing-16: 4rem; /* 64px */
44
- --ina-spacing-20: 5rem; /* 80px */
45
- --ina-spacing-24: 6rem; /* 96px */
46
-
47
- /* Border Radius */
48
- --ina-radius-sm: 0.125rem; /* 2px */
49
- --ina-radius-base: 0.25rem; /* 4px */
50
- --ina-radius-md: 0.375rem; /* 6px */
51
- --ina-radius-lg: 0.5rem; /* 8px */
52
- --ina-radius-xl: 0.75rem; /* 12px */
53
- --ina-radius-2xl: 1rem; /* 16px */
54
- --ina-radius-full: 9999px;
55
-
56
- /* Shadows */
57
- --ina-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
58
- --ina-shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
59
- 0 1px 2px -1px rgba(0, 0, 0, 0.1);
60
- --ina-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
61
- 0 2px 4px -2px rgba(0, 0, 0, 0.1);
62
- --ina-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
63
- 0 4px 6px -4px rgba(0, 0, 0, 0.1);
64
- --ina-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
65
- 0 8px 10px -6px rgba(0, 0, 0, 0.1);
66
-
67
- /* Transition */
68
- --ina-transition-fast: 150ms ease-in-out;
69
- --ina-transition-base: 200ms ease-in-out;
70
- --ina-transition-slow: 300ms ease-in-out;
71
-
72
- /* Breakpoints untuk responsive design */
73
- --ina-breakpoint-sm: 640px;
74
- --ina-breakpoint-md: 768px;
75
- --ina-breakpoint-lg: 1024px;
76
- --ina-breakpoint-xl: 1280px;
77
- }
@@ -1,99 +0,0 @@
1
- /**
2
- * AccordionCard Component Styles
3
- * Menggunakan BEM naming convention dengan prefix "ina-"
4
- */
5
-
6
- .ina-accordion-card {
7
- /* Root container accordion card */
8
- border: 1px solid var(--ina-stroke-primary);
9
- padding: var(--ina-spacing-4);
10
- border-radius: var(--ina-radius-lg);
11
- overflow: hidden;
12
- }
13
-
14
- .ina-accordion-card__header {
15
- /* Header area yang dapat diklik untuk toggle */
16
- cursor: pointer;
17
- width: 100%;
18
- display: flex;
19
- align-items: center;
20
- outline: none;
21
- transition: var(--ina-transition-fast);
22
- }
23
-
24
- .ina-accordion-card__header:focus {
25
- outline: 2px solid var(--ina-guide-500);
26
- outline-offset: 2px;
27
- }
28
-
29
- .ina-accordion-card__icon {
30
- /* Container untuk icon chevron */
31
- display: flex;
32
- align-items: center;
33
- justify-content: center;
34
- width: 2rem; /* 32px */
35
- height: 2rem; /* 32px */
36
- border-radius: var(--ina-radius-lg);
37
- color: var(--ina-content-secondary);
38
- background-color: var(--ina-background-secondary);
39
- margin-right: var(--ina-spacing-4);
40
- }
41
-
42
- .ina-accordion-card__chevron {
43
- /* Icon chevron dengan animasi rotation */
44
- transition: transform 200ms ease;
45
- transform: rotate(180deg);
46
- }
47
-
48
- .ina-accordion-card__chevron--open {
49
- /* State terbuka: chevron menghadap atas */
50
- transform: rotate(0deg);
51
- }
52
- .ina-accordion-card__title {
53
- /* Judul accordion */
54
- text-align: left;
55
- font-weight: var(--ina-font-semibold);
56
- font-size: var(--ina-font-sm);
57
- color: var(--ina-content-primary);
58
- width: 100%;
59
- }
60
-
61
- /* Responsive font size untuk title */
62
- @media (min-width: 640px) {
63
- .ina-accordion-card__title {
64
- font-size: var(--ina-font-base);
65
- }
66
- }
67
-
68
- .ina-accordion-card__content {
69
- /* Container untuk content dengan height animation */
70
- height: 0px;
71
- overflow: hidden;
72
- transition: height 500ms ease;
73
- }
74
-
75
- .ina-accordion-card__content-body {
76
- /* Body content dengan padding */
77
- padding: 0.75rem var(--ina-spacing-4); /* py-3 px-4 equivalent */
78
- }
79
-
80
- /* Modifier untuk state terbuka */
81
- .ina-accordion-card--open .ina-accordion-card__content {
82
- /* Height akan dikontrol melalui JavaScript inline style */
83
- }
84
-
85
- /* Focus styles untuk accessibility */
86
- .ina-accordion-card__header:focus-visible {
87
- outline: 2px solid var(--ina-guide-500);
88
- outline-offset: 2px;
89
- border-radius: var(--ina-radius-base);
90
- }
91
-
92
- /* Hover effects */
93
- .ina-accordion-card__header:hover .ina-accordion-card__icon {
94
- background-color: var(--ina-neutral-200);
95
- }
96
-
97
- .ina-accordion-card__header:hover .ina-accordion-card__title {
98
- color: var(--ina-secondary);
99
- }
@@ -1,120 +0,0 @@
1
- /**
2
- * Accordion Component Styles
3
- * Menggunakan BEM naming convention dengan prefix "ina-"
4
- */
5
-
6
- .ina-accordion {
7
- /* Root container accordion */
8
- border-bottom: 1px solid var(--ina-stroke-primary);
9
- background-color: inherit;
10
- position: relative;
11
- }
12
-
13
- .ina-accordion__toggle {
14
- /* Button untuk toggle accordion */
15
- width: 100%;
16
- font-size: var(--ina-font-sm);
17
- font-weight: var(--ina-font-semibold);
18
- display: flex;
19
- align-items: center;
20
- justify-content: space-between;
21
- padding: var(--ina-spacing-4) 0;
22
- outline: none;
23
- cursor: pointer;
24
- background: none;
25
- border: none;
26
- transition: var(--ina-transition-fast);
27
- position: relative;
28
- z-index: 1;
29
- }
30
-
31
- /* .ina-accordion__toggle:focus {
32
- outline: 2px solid var(--ina-guide-500);
33
- outline-offset: 2px;
34
- } */
35
-
36
- /* Responsive font size */
37
- @media (min-width: 1024px) {
38
- .ina-accordion__toggle {
39
- font-size: var(--ina-font-base);
40
- }
41
- }
42
-
43
- .ina-accordion__title {
44
- /* Title section di sebelah kiri */
45
- color: var(--ina-content-primary);
46
- transition: var(--ina-transition-fast);
47
- }
48
-
49
- .ina-accordion__title:hover {
50
- text-decoration: underline;
51
- text-underline-offset: 4px;
52
- }
53
-
54
- .ina-accordion__toggler {
55
- /* Toggler section di sebelah kanan */
56
- flex-shrink: 0;
57
- color: var(--ina-content-primary);
58
- transition: var(--ina-transition-fast);
59
- }
60
-
61
- .ina-accordion__toggler:hover {
62
- text-decoration: underline;
63
- text-underline-offset: 4px;
64
- }
65
-
66
- .ina-accordion__icon {
67
- transition: transform 200ms ease;
68
- transform: rotate(0deg);
69
- color: var(--ina-content-primary);
70
- }
71
-
72
- .ina-accordion__icon--open {
73
- transform: rotate(180deg);
74
- }
75
-
76
- .ina-accordion__content {
77
- /* Content container yang muncul/muncul */
78
- overflow: hidden;
79
- position: relative;
80
- z-index: 0;
81
- transition: max-height 0.3s ease, opacity 0.3s ease;
82
- max-height: 0;
83
- opacity: 0;
84
- }
85
-
86
- .ina-accordion__content--open {
87
- max-height: 1000px;
88
- opacity: 1;
89
- }
90
-
91
- .ina-accordion__body {
92
- /* Body content yang muncul saat accordion terbuka */
93
- padding-bottom: var(--ina-spacing-4);
94
- color: var(--ina-content-primary);
95
- font-size: var(--ina-font-xs);
96
- }
97
-
98
- /* Responsive font size untuk body */
99
- @media (min-width: 1024px) {
100
- .ina-accordion__body {
101
- font-size: var(--ina-font-sm);
102
- }
103
- }
104
-
105
- /* Modifier untuk state terbuka */
106
- .ina-accordion--open .ina-accordion__toggle {
107
- /* Style tambahan saat accordion terbuka jika diperlukan */
108
- }
109
-
110
- /* Group hover effect untuk seluruh accordion toggle */
111
- .ina-accordion__toggle:hover .ina-accordion__title,
112
- .ina-accordion__toggle:hover .ina-accordion__toggler {
113
- /* Hover effect sudah dihandle masing-masing element */
114
- }
115
-
116
- /* Accordion Group */
117
- .ina-accordion-group {
118
- display: flex;
119
- flex-direction: column;
120
- }
@@ -1,140 +0,0 @@
1
- /**
2
- * ActionDropdown Component Styles
3
- * Menggunakan BEM naming convention dengan prefix "ina-"
4
- */
5
-
6
- .ina-action-dropdown {
7
- /* Root container dengan relative positioning */
8
- position: relative;
9
- display: inline-block;
10
- text-align: left;
11
- }
12
-
13
- .ina-action-dropdown__trigger {
14
- /* Default trigger button */
15
- padding: var(--ina-spacing-1);
16
- border-radius: var(--ina-radius-base);
17
- outline: none;
18
- cursor: pointer;
19
- background: none;
20
- border: none;
21
- transition: var(--ina-transition-fast);
22
- }
23
-
24
- .ina-action-dropdown__trigger:hover {
25
- background-color: var(--ina-neutral-100);
26
- }
27
-
28
- .ina-action-dropdown__trigger:focus {
29
- outline: 2px solid var(--ina-guide-500);
30
- outline-offset: 2px;
31
- }
32
-
33
- .ina-action-dropdown__trigger:focus-visible {
34
- outline: 2px solid var(--ina-guide-500);
35
- outline-offset: 2px;
36
- }
37
-
38
- .ina-action-dropdown__menu {
39
- /* Positioned dropdown menu */
40
- position: absolute;
41
- width: 10rem; /* 160px */
42
- background-color: var(--ina-neutral-25); /* white */
43
- border: 1px solid var(--ina-stroke-primary);
44
- border-radius: var(--ina-radius-lg);
45
- box-shadow: var(--ina-shadow-lg);
46
- z-index: 1000;
47
- }
48
-
49
- /* Vertical positioning */
50
- .ina-action-dropdown__menu--bottom {
51
- top: calc(100% + 0.5rem); /* top-full mt-2 equivalent */
52
- }
53
-
54
- .ina-action-dropdown__menu--top {
55
- bottom: calc(100% + 0.5rem); /* bottom-full mb-2 equivalent */
56
- }
57
-
58
- /* Horizontal positioning */
59
- .ina-action-dropdown__menu--left {
60
- right: 0; /* right-0 equivalent */
61
- }
62
-
63
- .ina-action-dropdown__menu--right {
64
- left: 0; /* left-0 equivalent */
65
- }
66
-
67
- .ina-action-dropdown__list {
68
- /* List container untuk menu items */
69
- padding: var(--ina-spacing-1) 0; /* py-1 equivalent */
70
- margin: 0;
71
- list-style: none;
72
- }
73
-
74
- .ina-action-dropdown__item {
75
- /* Individual list item */
76
- width: 100%;
77
- text-align: left;
78
- padding: var(--ina-spacing-2) var(--ina-spacing-4); /* px-4 py-2 equivalent */
79
- font-size: var(--ina-font-sm);
80
- user-select: none; /* select-none equivalent */
81
- cursor: pointer;
82
- transition: var(--ina-transition-fast);
83
- }
84
-
85
- .ina-action-dropdown__item:hover {
86
- background-color: var(--ina-neutral-100);
87
- }
88
-
89
- .ina-action-dropdown__item:focus {
90
- outline: none;
91
- background-color: var(--ina-neutral-200);
92
- }
93
-
94
- /* Animation untuk dropdown appearance */
95
- .ina-action-dropdown__menu {
96
- animation: fadeIn 150ms ease-in-out;
97
- }
98
-
99
- @keyframes fadeIn {
100
- 0% {
101
- opacity: 0;
102
- transform: scale(0.95);
103
- }
104
- 100% {
105
- opacity: 1;
106
- transform: scale(1);
107
- }
108
- }
109
-
110
- /* Focus styles untuk accessibility */
111
- .ina-action-dropdown__trigger[aria-expanded='true'] {
112
- background-color: var(--ina-neutral-100);
113
- }
114
-
115
- /* Responsive adjustments */
116
- @media (max-width: 640px) {
117
- .ina-action-dropdown__item {
118
- font-size: var(--ina-font-xs); /* Turun dari sm ke xs */
119
- }
120
-
121
- .ina-action-dropdown__menu {
122
- width: 9rem; /* Sedikit lebih kecil di mobile */
123
- }
124
- }
125
-
126
- /* Dark mode support (future consideration) */
127
- /* @media (prefers-color-scheme: dark) {
128
- .ina-action-dropdown__menu {
129
- background-color: var(--ina-neutral-900);
130
- border-color: var(--ina-neutral-700);
131
- }
132
-
133
- .ina-action-dropdown__item:hover {
134
- background-color: var(--ina-neutral-800);
135
- }
136
-
137
- .ina-action-dropdown__trigger:hover {
138
- background-color: var(--ina-neutral-800);
139
- }
140
- } */