@yuva-devlab/ui 1.4.1 → 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 +39 -11
  5. package/dist/components.css +47 -19
  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 +47 -19
  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,18 +1,25 @@
1
1
  .dl-select-trigger {
2
2
  display: inline-flex;
3
- min-height: 1.75rem;
3
+ width: 100%;
4
+ height: var(--control-height-md, 2.25rem);
5
+ min-height: var(--control-height-md, 2.25rem);
4
6
  align-items: center;
5
7
  justify-content: space-between;
6
8
  white-space: nowrap;
7
9
  border-radius: var(--radius-md, 0.375rem);
8
10
  border: 1px solid var(--input);
9
11
  background-color: transparent;
10
- padding: 0 0.5rem;
11
- font-size: 0.75rem;
12
+ padding: 0 0.75rem;
13
+ font-size: 0.875rem;
14
+ line-height: 1.25rem;
12
15
  font-family: inherit;
16
+ font-weight: 400;
13
17
  cursor: pointer;
14
18
  color: var(--foreground);
15
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;
16
23
  }
17
24
  .dl-select-trigger[data-placeholder] {
18
25
  color: var(--muted-foreground);
@@ -27,16 +34,32 @@
27
34
  }
28
35
  .dl-select-trigger > svg {
29
36
  opacity: 0.5;
30
- width: 0.75rem;
31
- height: 0.75rem;
37
+ width: 1rem;
38
+ height: 1rem;
32
39
  flex-shrink: 0;
33
40
  }
34
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
+
35
56
  .dl-select-content {
36
57
  position: relative;
37
58
  z-index: 50;
38
59
  max-height: 24rem;
39
- min-width: 8rem;
60
+ min-width: var(--radix-select-trigger-width, 8rem);
61
+ width: var(--radix-select-trigger-width, max-content);
62
+ max-width: var(--radix-select-content-available-width, 100vw);
40
63
  overflow: hidden;
41
64
  border-radius: var(--radius-md, 0.375rem);
42
65
  border: 1px solid var(--border);
@@ -51,6 +74,8 @@
51
74
  animation: dl-fade-out 100ms ease;
52
75
  }
53
76
  .dl-select-viewport {
77
+ width: 100%;
78
+ min-width: var(--radix-select-trigger-width, 8rem);
54
79
  padding: 0.25rem;
55
80
  }
56
81
 
@@ -61,10 +86,13 @@
61
86
  cursor: pointer;
62
87
  align-items: center;
63
88
  border-radius: var(--radius-sm, 0.25rem);
64
- padding: 0.25rem 0.5rem 0.25rem 1.75rem;
65
- font-size: 0.75rem;
89
+ padding: 0.375rem 0.625rem 0.375rem 2rem;
90
+ font-size: 0.875rem;
66
91
  outline: none;
67
92
  user-select: none;
93
+ transition:
94
+ background-color 0.15s ease,
95
+ color 0.15s ease;
68
96
  }
69
97
  .dl-select-item:focus,
70
98
  .dl-select-item[data-highlighted] {
@@ -77,12 +105,12 @@
77
105
  }
78
106
  .dl-select-item__indicator {
79
107
  position: absolute;
80
- left: 0.5rem;
108
+ left: 0.625rem;
81
109
  display: flex;
82
110
  align-items: center;
83
111
  justify-content: center;
84
- width: 0.75rem;
85
- height: 0.75rem;
112
+ width: 0.875rem;
113
+ height: 0.875rem;
86
114
  }
87
115
  .dl-select-label {
88
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);
@@ -2086,19 +2086,26 @@
2086
2086
  /* ── select ── */
2087
2087
  .dl-select-trigger {
2088
2088
  display: inline-flex;
2089
- min-height: 1.75rem;
2089
+ width: 100%;
2090
+ height: var(--control-height-md, 2.25rem);
2091
+ min-height: var(--control-height-md, 2.25rem);
2090
2092
  align-items: center;
2091
2093
  justify-content: space-between;
2092
2094
  white-space: nowrap;
2093
2095
  border-radius: var(--radius-md, 0.375rem);
2094
2096
  border: 1px solid var(--input);
2095
2097
  background-color: transparent;
2096
- padding: 0 0.5rem;
2097
- font-size: 0.75rem;
2098
+ padding: 0 0.75rem;
2099
+ font-size: 0.875rem;
2100
+ line-height: 1.25rem;
2098
2101
  font-family: inherit;
2102
+ font-weight: 400;
2099
2103
  cursor: pointer;
2100
2104
  color: var(--foreground);
2101
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;
2102
2109
  }
2103
2110
  .dl-select-trigger[data-placeholder] {
2104
2111
  color: var(--muted-foreground);
@@ -2113,16 +2120,32 @@
2113
2120
  }
2114
2121
  .dl-select-trigger > svg {
2115
2122
  opacity: 0.5;
2116
- width: 0.75rem;
2117
- height: 0.75rem;
2123
+ width: 1rem;
2124
+ height: 1rem;
2118
2125
  flex-shrink: 0;
2119
2126
  }
2120
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
+
2121
2142
  .dl-select-content {
2122
2143
  position: relative;
2123
2144
  z-index: 50;
2124
2145
  max-height: 24rem;
2125
- min-width: 8rem;
2146
+ min-width: var(--radix-select-trigger-width, 8rem);
2147
+ width: var(--radix-select-trigger-width, max-content);
2148
+ max-width: var(--radix-select-content-available-width, 100vw);
2126
2149
  overflow: hidden;
2127
2150
  border-radius: var(--radius-md, 0.375rem);
2128
2151
  border: 1px solid var(--border);
@@ -2137,6 +2160,8 @@
2137
2160
  animation: dl-fade-out 100ms ease;
2138
2161
  }
2139
2162
  .dl-select-viewport {
2163
+ width: 100%;
2164
+ min-width: var(--radix-select-trigger-width, 8rem);
2140
2165
  padding: 0.25rem;
2141
2166
  }
2142
2167
 
@@ -2147,10 +2172,13 @@
2147
2172
  cursor: pointer;
2148
2173
  align-items: center;
2149
2174
  border-radius: var(--radius-sm, 0.25rem);
2150
- padding: 0.25rem 0.5rem 0.25rem 1.75rem;
2151
- font-size: 0.75rem;
2175
+ padding: 0.375rem 0.625rem 0.375rem 2rem;
2176
+ font-size: 0.875rem;
2152
2177
  outline: none;
2153
2178
  user-select: none;
2179
+ transition:
2180
+ background-color 0.15s ease,
2181
+ color 0.15s ease;
2154
2182
  }
2155
2183
  .dl-select-item:focus,
2156
2184
  .dl-select-item[data-highlighted] {
@@ -2163,12 +2191,12 @@
2163
2191
  }
2164
2192
  .dl-select-item__indicator {
2165
2193
  position: absolute;
2166
- left: 0.5rem;
2194
+ left: 0.625rem;
2167
2195
  display: flex;
2168
2196
  align-items: center;
2169
2197
  justify-content: center;
2170
- width: 0.75rem;
2171
- height: 0.75rem;
2198
+ width: 0.875rem;
2199
+ height: 0.875rem;
2172
2200
  }
2173
2201
  .dl-select-label {
2174
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
  ));