@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/divider.css ADDED
@@ -0,0 +1,174 @@
1
+ /**
2
+ * Divider Component Styles
3
+ * Menggunakan BEM naming convention dengan prefix "ina-"
4
+ */
5
+
6
+ .ina-divider {
7
+ /* Base divider styling */
8
+ margin: 0;
9
+ padding: 0;
10
+ border: 0;
11
+ border-width: 1px;
12
+ border-style: solid;
13
+ flex-shrink: 0;
14
+ }
15
+
16
+ /* Orientation variants */
17
+ .ina-divider--horizontal {
18
+ border-top: 1px solid;
19
+ width: 100%;
20
+ }
21
+
22
+ .ina-divider--vertical {
23
+ border-left: 1px solid;
24
+ height: 1rem; /* Default height for vertical */
25
+ }
26
+
27
+ /* Color variants */
28
+ .ina-divider--light {
29
+ border-color: var(--ina-stroke-secondary);
30
+ }
31
+
32
+ .ina-divider--dark {
33
+ border-color: var(--ina-stroke-primary);
34
+ }
35
+
36
+ /* Default color (when light prop is not specified) */
37
+ .ina-divider--horizontal.ina-divider--dark,
38
+ .ina-divider--vertical.ina-divider--dark {
39
+ border-color: var(--ina-stroke-primary);
40
+ }
41
+
42
+ .ina-divider--horizontal.ina-divider--light,
43
+ .ina-divider--vertical.ina-divider--light {
44
+ border-color: var(--ina-stroke-secondary);
45
+ }
46
+
47
+ /* Margin variants for horizontal dividers */
48
+ .ina-divider--horizontal.ina-divider--full-width {
49
+ /* Default: full width, no margins */
50
+ }
51
+
52
+ .ina-divider--horizontal.ina-divider--inset {
53
+ margin-left: var(--ina-spacing-4);
54
+ }
55
+
56
+ .ina-divider--horizontal.ina-divider--middle {
57
+ margin-left: auto;
58
+ margin-right: auto;
59
+ }
60
+
61
+ /* Margin variants for vertical dividers */
62
+ .ina-divider--vertical.ina-divider--full-width {
63
+ /* Default vertical styling */
64
+ }
65
+
66
+ .ina-divider--vertical.ina-divider--inset {
67
+ margin-top: var(--ina-spacing-4);
68
+ }
69
+
70
+ .ina-divider--vertical.ina-divider--middle {
71
+ margin-top: auto;
72
+ margin-bottom: auto;
73
+ }
74
+
75
+ /* Flex item support for vertical dividers */
76
+ .ina-divider--vertical.ina-divider--flex-item {
77
+ align-self: stretch;
78
+ height: auto;
79
+ }
80
+
81
+ /* Height variants for vertical dividers */
82
+ .ina-divider--vertical.ina-divider--small {
83
+ height: calc(0.75 * var(--ina-spacing-4)); /* 12px */
84
+ }
85
+
86
+ .ina-divider--vertical.ina-divider--medium {
87
+ height: var(--ina-spacing-4); /* 16px */
88
+ }
89
+
90
+ .ina-divider--vertical.ina-divider--large {
91
+ height: var(--ina-spacing-8); /* 32px */
92
+ }
93
+
94
+ .ina-divider--vertical.ina-divider--full {
95
+ height: 100%;
96
+ }
97
+
98
+ /* Content variants - dividers with text/content */
99
+ .ina-divider--with-content {
100
+ display: flex;
101
+ align-items: center;
102
+ border: none;
103
+ }
104
+
105
+ .ina-divider--with-content::before,
106
+ .ina-divider--with-content::after {
107
+ content: '';
108
+ flex: 1;
109
+ border-top: 1px solid var(--ina-stroke-primary);
110
+ }
111
+
112
+ .ina-divider--with-content.ina-divider--light::before,
113
+ .ina-divider--with-content.ina-divider--light::after {
114
+ border-color: var(--ina-stroke-secondary);
115
+ }
116
+
117
+ .ina-divider__content {
118
+ padding: 0 var(--ina-spacing-4);
119
+ color: var(--ina-content-secondary);
120
+ font-size: var(--ina-font-sm);
121
+ }
122
+
123
+ /* Spacing variants */
124
+ .ina-divider--spacing-xs {
125
+ margin-top: var(--ina-spacing-1);
126
+ margin-bottom: var(--ina-spacing-1);
127
+ }
128
+
129
+ .ina-divider--spacing-sm {
130
+ margin-top: var(--ina-spacing-2);
131
+ margin-bottom: var(--ina-spacing-2);
132
+ }
133
+
134
+ .ina-divider--spacing-md {
135
+ margin-top: var(--ina-spacing-4);
136
+ margin-bottom: var(--ina-spacing-4);
137
+ }
138
+
139
+ .ina-divider--spacing-lg {
140
+ margin-top: var(--ina-spacing-6);
141
+ margin-bottom: var(--ina-spacing-6);
142
+ }
143
+
144
+ .ina-divider--spacing-xl {
145
+ margin-top: var(--ina-spacing-8);
146
+ margin-bottom: var(--ina-spacing-8);
147
+ }
148
+
149
+ /* Responsive dividers */
150
+ @media (max-width: 640px) {
151
+ .ina-divider__content {
152
+ font-size: var(--ina-font-xs); /* Turun dari sm ke xs */
153
+ }
154
+ }
155
+
156
+ @media (min-width: 640px) {
157
+ .ina-divider--responsive-sm\:larger {
158
+ height: var(--ina-spacing-8);
159
+ }
160
+ }
161
+
162
+ @media (min-width: 768px) {
163
+ .ina-divider--responsive-md\:middle {
164
+ margin-left: auto;
165
+ margin-right: auto;
166
+ }
167
+ }
168
+
169
+ @media (min-width: 1024px) {
170
+ .ina-divider--responsive-lg\:middle {
171
+ margin-left: auto;
172
+ margin-right: auto;
173
+ }
174
+ }