@yuva-devlab/ui 1.4.2 → 1.4.3

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 (11) hide show
  1. package/dist/components/button/button.css +5 -5
  2. package/dist/components/input/input.css +1 -1
  3. package/dist/components/input-otp/input-otp.css +2 -2
  4. package/dist/components/select/select.css +33 -10
  5. package/dist/components.css +41 -18
  6. package/dist/index.cjs +1 -6
  7. package/dist/index.cjs.map +1 -1
  8. package/dist/index.js +1 -6
  9. package/dist/index.js.map +1 -1
  10. package/dist/styles/components.css +41 -18
  11. package/package.json +1 -1
package/dist/components/button/button.css CHANGED
@@ -35,21 +35,21 @@
35
35
 
36
36
  /* Sizes */
37
37
  .dl-btn--sm {
38
- height: 2rem;
38
+ height: var(--control-height-sm, 2rem);
39
39
  padding: 0 0.75rem;
40
40
  font-size: 0.75rem;
41
41
  }
42
42
  .dl-btn--md {
43
- height: 2.25rem;
43
+ height: var(--control-height-md, 2.25rem);
44
44
  padding: 0 1rem;
45
45
  }
46
46
  .dl-btn--lg {
47
- height: 2.5rem;
47
+ height: var(--control-height-lg, 2.5rem);
48
48
  padding: 0 2rem;
49
49
  }
50
50
  .dl-btn--icon {
51
- width: 2.25rem;
52
- height: 2.25rem;
51
+ width: var(--control-height-md, 2.25rem);
52
+ height: var(--control-height-md, 2.25rem);
53
53
  padding: 0;
54
54
  }
55
55
 
package/dist/components/input/input.css CHANGED
@@ -32,7 +32,7 @@
32
32
  .dl-input {
33
33
  display: block;
34
34
  width: 100%;
35
- height: 2.25rem;
35
+ height: var(--control-height-md, 2.25rem);
36
36
  border-radius: var(--radius-md, 0.375rem);
37
37
  border: 1px solid var(--input);
38
38
  background-color: transparent;
package/dist/components/input-otp/input-otp.css CHANGED
@@ -26,8 +26,8 @@
26
26
  display: flex;
27
27
  align-items: center;
28
28
  justify-content: center;
29
- width: 2.25rem;
30
- height: 2.25rem;
29
+ width: var(--control-height-md, 2.25rem);
30
+ height: var(--control-height-md, 2.25rem);
31
31
  border-top: 1px solid var(--input);
32
32
  border-bottom: 1px solid var(--input);
33
33
  border-right: 1px solid var(--input);
package/dist/components/select/select.css CHANGED
@@ -1,19 +1,25 @@
1
1
  .dl-select-trigger {
2
2
  display: inline-flex;
3
3
  width: 100%;
4
- min-height: 1.75rem;
4
+ height: var(--control-height-md, 2.25rem);
5
+ min-height: var(--control-height-md, 2.25rem);
5
6
  align-items: center;
6
7
  justify-content: space-between;
7
8
  white-space: nowrap;
8
9
  border-radius: var(--radius-md, 0.375rem);
9
10
  border: 1px solid var(--input);
10
11
  background-color: transparent;
11
- padding: 0 0.5rem;
12
- font-size: 0.75rem;
12
+ padding: 0 0.75rem;
13
+ font-size: 0.875rem;
14
+ line-height: 1.25rem;
13
15
  font-family: inherit;
16
+ font-weight: 400;
14
17
  cursor: pointer;
15
18
  color: var(--foreground);
16
19
  box-shadow: 0 1px 2px rgb(0 0 0/0.05);
20
+ transition:
21
+ border-color 0.15s ease,
22
+ box-shadow 0.15s ease;
17
23
  }
18
24
  .dl-select-trigger[data-placeholder] {
19
25
  color: var(--muted-foreground);
@@ -28,11 +34,25 @@
28
34
  }
29
35
  .dl-select-trigger > svg {
30
36
  opacity: 0.5;
31
- width: 0.75rem;
32
- height: 0.75rem;
37
+ width: 1rem;
38
+ height: 1rem;
33
39
  flex-shrink: 0;
34
40
  }
35
41
 
42
+ /* Sizes */
43
+ .dl-select-trigger--sm {
44
+ height: var(--control-height-sm, 2rem);
45
+ min-height: var(--control-height-sm, 2rem);
46
+ padding: 0 0.5rem;
47
+ font-size: 0.75rem;
48
+ }
49
+ .dl-select-trigger--lg {
50
+ height: var(--control-height-lg, 2.5rem);
51
+ min-height: var(--control-height-lg, 2.5rem);
52
+ padding: 0 1rem;
53
+ font-size: 1rem;
54
+ }
55
+
36
56
  .dl-select-content {
37
57
  position: relative;
38
58
  z-index: 50;
@@ -66,10 +86,13 @@
66
86
  cursor: pointer;
67
87
  align-items: center;
68
88
  border-radius: var(--radius-sm, 0.25rem);
69
- padding: 0.25rem 0.5rem 0.25rem 1.75rem;
70
- font-size: 0.75rem;
89
+ padding: 0.375rem 0.625rem 0.375rem 2rem;
90
+ font-size: 0.875rem;
71
91
  outline: none;
72
92
  user-select: none;
93
+ transition:
94
+ background-color 0.15s ease,
95
+ color 0.15s ease;
73
96
  }
74
97
  .dl-select-item:focus,
75
98
  .dl-select-item[data-highlighted] {
@@ -82,12 +105,12 @@
82
105
  }
83
106
  .dl-select-item__indicator {
84
107
  position: absolute;
85
- left: 0.5rem;
108
+ left: 0.625rem;
86
109
  display: flex;
87
110
  align-items: center;
88
111
  justify-content: center;
89
- width: 0.75rem;
90
- height: 0.75rem;
112
+ width: 0.875rem;
113
+ height: 0.875rem;
91
114
  }
92
115
  .dl-select-label {
93
116
  padding: 0.25rem 0.5rem;
package/dist/components.css CHANGED
@@ -416,21 +416,21 @@
416
416
 
417
417
  /* Sizes */
418
418
  .dl-btn--sm {
419
- height: 2rem;
419
+ height: var(--control-height-sm, 2rem);
420
420
  padding: 0 0.75rem;
421
421
  font-size: 0.75rem;
422
422
  }
423
423
  .dl-btn--md {
424
- height: 2.25rem;
424
+ height: var(--control-height-md, 2.25rem);
425
425
  padding: 0 1rem;
426
426
  }
427
427
  .dl-btn--lg {
428
- height: 2.5rem;
428
+ height: var(--control-height-lg, 2.5rem);
429
429
  padding: 0 2rem;
430
430
  }
431
431
  .dl-btn--icon {
432
- width: 2.25rem;
433
- height: 2.25rem;
432
+ width: var(--control-height-md, 2.25rem);
433
+ height: var(--control-height-md, 2.25rem);
434
434
  padding: 0;
435
435
  }
436
436
 
@@ -1247,7 +1247,7 @@
1247
1247
  .dl-input {
1248
1248
  display: block;
1249
1249
  width: 100%;
1250
- height: 2.25rem;
1250
+ height: var(--control-height-md, 2.25rem);
1251
1251
  border-radius: var(--radius-md, 0.375rem);
1252
1252
  border: 1px solid var(--input);
1253
1253
  background-color: transparent;
@@ -1332,8 +1332,8 @@
1332
1332
  display: flex;
1333
1333
  align-items: center;
1334
1334
  justify-content: center;
1335
- width: 2.25rem;
1336
- height: 2.25rem;
1335
+ width: var(--control-height-md, 2.25rem);
1336
+ height: var(--control-height-md, 2.25rem);
1337
1337
  border-top: 1px solid var(--input);
1338
1338
  border-bottom: 1px solid var(--input);
1339
1339
  border-right: 1px solid var(--input);
@@ -2087,19 +2087,25 @@
2087
2087
  .dl-select-trigger {
2088
2088
  display: inline-flex;
2089
2089
  width: 100%;
2090
- min-height: 1.75rem;
2090
+ height: var(--control-height-md, 2.25rem);
2091
+ min-height: var(--control-height-md, 2.25rem);
2091
2092
  align-items: center;
2092
2093
  justify-content: space-between;
2093
2094
  white-space: nowrap;
2094
2095
  border-radius: var(--radius-md, 0.375rem);
2095
2096
  border: 1px solid var(--input);
2096
2097
  background-color: transparent;
2097
- padding: 0 0.5rem;
2098
- font-size: 0.75rem;
2098
+ padding: 0 0.75rem;
2099
+ font-size: 0.875rem;
2100
+ line-height: 1.25rem;
2099
2101
  font-family: inherit;
2102
+ font-weight: 400;
2100
2103
  cursor: pointer;
2101
2104
  color: var(--foreground);
2102
2105
  box-shadow: 0 1px 2px rgb(0 0 0/0.05);
2106
+ transition:
2107
+ border-color 0.15s ease,
2108
+ box-shadow 0.15s ease;
2103
2109
  }
2104
2110
  .dl-select-trigger[data-placeholder] {
2105
2111
  color: var(--muted-foreground);
@@ -2114,11 +2120,25 @@
2114
2120
  }
2115
2121
  .dl-select-trigger > svg {
2116
2122
  opacity: 0.5;
2117
- width: 0.75rem;
2118
- height: 0.75rem;
2123
+ width: 1rem;
2124
+ height: 1rem;
2119
2125
  flex-shrink: 0;
2120
2126
  }
2121
2127
 
2128
+ /* Sizes */
2129
+ .dl-select-trigger--sm {
2130
+ height: var(--control-height-sm, 2rem);
2131
+ min-height: var(--control-height-sm, 2rem);
2132
+ padding: 0 0.5rem;
2133
+ font-size: 0.75rem;
2134
+ }
2135
+ .dl-select-trigger--lg {
2136
+ height: var(--control-height-lg, 2.5rem);
2137
+ min-height: var(--control-height-lg, 2.5rem);
2138
+ padding: 0 1rem;
2139
+ font-size: 1rem;
2140
+ }
2141
+
2122
2142
  .dl-select-content {
2123
2143
  position: relative;
2124
2144
  z-index: 50;
@@ -2152,10 +2172,13 @@
2152
2172
  cursor: pointer;
2153
2173
  align-items: center;
2154
2174
  border-radius: var(--radius-sm, 0.25rem);
2155
- padding: 0.25rem 0.5rem 0.25rem 1.75rem;
2156
- font-size: 0.75rem;
2175
+ padding: 0.375rem 0.625rem 0.375rem 2rem;
2176
+ font-size: 0.875rem;
2157
2177
  outline: none;
2158
2178
  user-select: none;
2179
+ transition:
2180
+ background-color 0.15s ease,
2181
+ color 0.15s ease;
2159
2182
  }
2160
2183
  .dl-select-item:focus,
2161
2184
  .dl-select-item[data-highlighted] {
@@ -2168,12 +2191,12 @@
2168
2191
  }
2169
2192
  .dl-select-item__indicator {
2170
2193
  position: absolute;
2171
- left: 0.5rem;
2194
+ left: 0.625rem;
2172
2195
  display: flex;
2173
2196
  align-items: center;
2174
2197
  justify-content: center;
2175
- width: 0.75rem;
2176
- height: 0.75rem;
2198
+ width: 0.875rem;
2199
+ height: 0.875rem;
2177
2200
  }
2178
2201
  .dl-select-label {
2179
2202
  padding: 0.25rem 0.5rem;
package/dist/index.cjs CHANGED
@@ -2819,12 +2819,7 @@ var SelectTrigger = React34.forwardRef(({ className, children, ...props }, ref)
2819
2819
  ...props,
2820
2820
  children: [
2821
2821
  children,
2822
- /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
2823
- import_lucide_react18.ChevronDown,
2824
- {
2825
- style: { opacity: 0.5, width: "0.75rem", height: "0.75rem" }
2826
- }
2827
- ) })
2822
+ /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react18.ChevronDown, { style: { opacity: 0.5, width: "1rem", height: "1rem" } }) })
2828
2823
  ]
2829
2824
  }
2830
2825
  ));