draft-components 3.0.0 → 3.1.0

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 (6) hide show
  1. package/css/draft-components-variables.css +9 -9
  2. package/css/draft-components.css +10 -10
  3. package/dist/components/select/select.css +1 -1
  4. package/dist/components/selection-control/selection-control.d.ts +6 -1
  5. package/dist/components/selection-control/selection-control.js +4 -4
  6. package/package.json +1 -1
package/css/draft-components-variables.css CHANGED
@@ -48,7 +48,7 @@
48
48
  --dc-gray-700-rgb: 55 65 81;
49
49
  --dc-gray-800-rgb: 31 41 55;
50
50
  --dc-gray-900-rgb: 17 24 39;
51
- --dc-gray-50: rgb(var(--dc-gray-50));
51
+ --dc-gray-50: rgb(var(--dc-gray-50-rgb));
52
52
  --dc-gray-100: rgb(var(--dc-gray-100-rgb));
53
53
  --dc-gray-200: rgb(var(--dc-gray-200-rgb));
54
54
  --dc-gray-300: rgb(var(--dc-gray-300-rgb));
@@ -70,7 +70,7 @@
70
70
  --dc-red-700-rgb: 185 28 28;
71
71
  --dc-red-800-rgb: 153 27 27;
72
72
  --dc-red-900-rgb: 127 29 29;
73
- --dc-red-50: rgb(var(--dc-red-50));
73
+ --dc-red-50: rgb(var(--dc-red-50-rgb));
74
74
  --dc-red-100: rgb(var(--dc-red-100-rgb));
75
75
  --dc-red-200: rgb(var(--dc-red-200-rgb));
76
76
  --dc-red-300: rgb(var(--dc-red-300-rgb));
@@ -92,7 +92,7 @@
92
92
  --dc-orange-700-rgb: 194 65 12;
93
93
  --dc-orange-800-rgb: 154 52 18;
94
94
  --dc-orange-900-rgb: 124 45 18;
95
- --dc-orange-50: rgb(var(--dc-orange-50));
95
+ --dc-orange-50: rgb(var(--dc-orange-50-rgb));
96
96
  --dc-orange-100: rgb(var(--dc-orange-100-rgb));
97
97
  --dc-orange-200: rgb(var(--dc-orange-200-rgb));
98
98
  --dc-orange-300: rgb(var(--dc-orange-300-rgb));
@@ -114,7 +114,7 @@
114
114
  --dc-yellow-700-rgb: 161 98 7;
115
115
  --dc-yellow-800-rgb: 133 77 14;
116
116
  --dc-yellow-900-rgb: 113 63 18;
117
- --dc-yellow-50: rgb(var(--dc-yellow-50));
117
+ --dc-yellow-50: rgb(var(--dc-yellow-50-rgb));
118
118
  --dc-yellow-100: rgb(var(--dc-yellow-100-rgb));
119
119
  --dc-yellow-200: rgb(var(--dc-yellow-200-rgb));
120
120
  --dc-yellow-300: rgb(var(--dc-yellow-300-rgb));
@@ -136,7 +136,7 @@
136
136
  --dc-green-700-rgb: 21 128 61;
137
137
  --dc-green-800-rgb: 22 101 52;
138
138
  --dc-green-900-rgb: 20 83 45;
139
- --dc-green-50: rgb(var(--dc-green-50));
139
+ --dc-green-50: rgb(var(--dc-green-50-rgb));
140
140
  --dc-green-100: rgb(var(--dc-green-100-rgb));
141
141
  --dc-green-200: rgb(var(--dc-green-200-rgb));
142
142
  --dc-green-300: rgb(var(--dc-green-300-rgb));
@@ -158,7 +158,7 @@
158
158
  --dc-sky-700-rgb: 3 105 161;
159
159
  --dc-sky-800-rgb: 7 89 133;
160
160
  --dc-sky-900-rgb: 12 74 110;
161
- --dc-sky-50: rgb(var(--dc-sky-50));
161
+ --dc-sky-50: rgb(var(--dc-sky-50-rgb));
162
162
  --dc-sky-100: rgb(var(--dc-sky-100-rgb));
163
163
  --dc-sky-200: rgb(var(--dc-sky-200-rgb));
164
164
  --dc-sky-300: rgb(var(--dc-sky-300-rgb));
@@ -180,7 +180,7 @@
180
180
  --dc-blue-700-rgb: 29 78 216;
181
181
  --dc-blue-800-rgb: 30 64 175;
182
182
  --dc-blue-900-rgb: 30 58 138;
183
- --dc-blue-50: rgb(var(--dc-blue-50));
183
+ --dc-blue-50: rgb(var(--dc-blue-50-rgb));
184
184
  --dc-blue-100: rgb(var(--dc-blue-100-rgb));
185
185
  --dc-blue-200: rgb(var(--dc-blue-200-rgb));
186
186
  --dc-blue-300: rgb(var(--dc-blue-300-rgb));
@@ -202,7 +202,7 @@
202
202
  --dc-violet-700-rgb: 109 40 217;
203
203
  --dc-violet-800-rgb: 91 33 182;
204
204
  --dc-violet-900-rgb: 76 29 149;
205
- --dc-violet-50: rgb(var(--dc-violet-50));
205
+ --dc-violet-50: rgb(var(--dc-violet-50-rgb));
206
206
  --dc-violet-100: rgb(var(--dc-violet-100-rgb));
207
207
  --dc-violet-200: rgb(var(--dc-violet-200-rgb));
208
208
  --dc-violet-300: rgb(var(--dc-violet-300-rgb));
@@ -224,7 +224,7 @@
224
224
  --dc-pink-700-rgb: 190 24 93;
225
225
  --dc-pink-800-rgb: 157 23 77;
226
226
  --dc-pink-900-rgb: 131 24 67;
227
- --dc-pink-50: rgb(var(--dc-pink-50));
227
+ --dc-pink-50: rgb(var(--dc-pink-50-rgb));
228
228
  --dc-pink-100: rgb(var(--dc-pink-100-rgb));
229
229
  --dc-pink-200: rgb(var(--dc-pink-200-rgb));
230
230
  --dc-pink-300: rgb(var(--dc-pink-300-rgb));
package/css/draft-components.css CHANGED
@@ -48,7 +48,7 @@
48
48
  --dc-gray-700-rgb: 55 65 81;
49
49
  --dc-gray-800-rgb: 31 41 55;
50
50
  --dc-gray-900-rgb: 17 24 39;
51
- --dc-gray-50: rgb(var(--dc-gray-50));
51
+ --dc-gray-50: rgb(var(--dc-gray-50-rgb));
52
52
  --dc-gray-100: rgb(var(--dc-gray-100-rgb));
53
53
  --dc-gray-200: rgb(var(--dc-gray-200-rgb));
54
54
  --dc-gray-300: rgb(var(--dc-gray-300-rgb));
@@ -70,7 +70,7 @@
70
70
  --dc-red-700-rgb: 185 28 28;
71
71
  --dc-red-800-rgb: 153 27 27;
72
72
  --dc-red-900-rgb: 127 29 29;
73
- --dc-red-50: rgb(var(--dc-red-50));
73
+ --dc-red-50: rgb(var(--dc-red-50-rgb));
74
74
  --dc-red-100: rgb(var(--dc-red-100-rgb));
75
75
  --dc-red-200: rgb(var(--dc-red-200-rgb));
76
76
  --dc-red-300: rgb(var(--dc-red-300-rgb));
@@ -92,7 +92,7 @@
92
92
  --dc-orange-700-rgb: 194 65 12;
93
93
  --dc-orange-800-rgb: 154 52 18;
94
94
  --dc-orange-900-rgb: 124 45 18;
95
- --dc-orange-50: rgb(var(--dc-orange-50));
95
+ --dc-orange-50: rgb(var(--dc-orange-50-rgb));
96
96
  --dc-orange-100: rgb(var(--dc-orange-100-rgb));
97
97
  --dc-orange-200: rgb(var(--dc-orange-200-rgb));
98
98
  --dc-orange-300: rgb(var(--dc-orange-300-rgb));
@@ -114,7 +114,7 @@
114
114
  --dc-yellow-700-rgb: 161 98 7;
115
115
  --dc-yellow-800-rgb: 133 77 14;
116
116
  --dc-yellow-900-rgb: 113 63 18;
117
- --dc-yellow-50: rgb(var(--dc-yellow-50));
117
+ --dc-yellow-50: rgb(var(--dc-yellow-50-rgb));
118
118
  --dc-yellow-100: rgb(var(--dc-yellow-100-rgb));
119
119
  --dc-yellow-200: rgb(var(--dc-yellow-200-rgb));
120
120
  --dc-yellow-300: rgb(var(--dc-yellow-300-rgb));
@@ -136,7 +136,7 @@
136
136
  --dc-green-700-rgb: 21 128 61;
137
137
  --dc-green-800-rgb: 22 101 52;
138
138
  --dc-green-900-rgb: 20 83 45;
139
- --dc-green-50: rgb(var(--dc-green-50));
139
+ --dc-green-50: rgb(var(--dc-green-50-rgb));
140
140
  --dc-green-100: rgb(var(--dc-green-100-rgb));
141
141
  --dc-green-200: rgb(var(--dc-green-200-rgb));
142
142
  --dc-green-300: rgb(var(--dc-green-300-rgb));
@@ -158,7 +158,7 @@
158
158
  --dc-sky-700-rgb: 3 105 161;
159
159
  --dc-sky-800-rgb: 7 89 133;
160
160
  --dc-sky-900-rgb: 12 74 110;
161
- --dc-sky-50: rgb(var(--dc-sky-50));
161
+ --dc-sky-50: rgb(var(--dc-sky-50-rgb));
162
162
  --dc-sky-100: rgb(var(--dc-sky-100-rgb));
163
163
  --dc-sky-200: rgb(var(--dc-sky-200-rgb));
164
164
  --dc-sky-300: rgb(var(--dc-sky-300-rgb));
@@ -180,7 +180,7 @@
180
180
  --dc-blue-700-rgb: 29 78 216;
181
181
  --dc-blue-800-rgb: 30 64 175;
182
182
  --dc-blue-900-rgb: 30 58 138;
183
- --dc-blue-50: rgb(var(--dc-blue-50));
183
+ --dc-blue-50: rgb(var(--dc-blue-50-rgb));
184
184
  --dc-blue-100: rgb(var(--dc-blue-100-rgb));
185
185
  --dc-blue-200: rgb(var(--dc-blue-200-rgb));
186
186
  --dc-blue-300: rgb(var(--dc-blue-300-rgb));
@@ -202,7 +202,7 @@
202
202
  --dc-violet-700-rgb: 109 40 217;
203
203
  --dc-violet-800-rgb: 91 33 182;
204
204
  --dc-violet-900-rgb: 76 29 149;
205
- --dc-violet-50: rgb(var(--dc-violet-50));
205
+ --dc-violet-50: rgb(var(--dc-violet-50-rgb));
206
206
  --dc-violet-100: rgb(var(--dc-violet-100-rgb));
207
207
  --dc-violet-200: rgb(var(--dc-violet-200-rgb));
208
208
  --dc-violet-300: rgb(var(--dc-violet-300-rgb));
@@ -224,7 +224,7 @@
224
224
  --dc-pink-700-rgb: 190 24 93;
225
225
  --dc-pink-800-rgb: 157 23 77;
226
226
  --dc-pink-900-rgb: 131 24 67;
227
- --dc-pink-50: rgb(var(--dc-pink-50));
227
+ --dc-pink-50: rgb(var(--dc-pink-50-rgb));
228
228
  --dc-pink-100: rgb(var(--dc-pink-100-rgb));
229
229
  --dc-pink-200: rgb(var(--dc-pink-200-rgb));
230
230
  --dc-pink-300: rgb(var(--dc-pink-300-rgb));
@@ -2008,7 +2008,7 @@
2008
2008
  }
2009
2009
 
2010
2010
  .dc-select__native {
2011
- width: 100%;
2011
+ max-width: 100%;
2012
2012
  padding-right: calc(var(--dc-select-height) + 0.5em);
2013
2013
  padding-left: var(--dc-select-padding-x);
2014
2014
  font: inherit;
package/dist/components/select/select.css CHANGED
@@ -65,7 +65,7 @@
65
65
  }
66
66
 
67
67
  .dc-select__native {
68
- width: 100%;
68
+ max-width: 100%;
69
69
  padding-right: calc(var(--dc-select-height) + 0.5em);
70
70
  padding-left: var(--dc-select-padding-x);
71
71
  font: inherit;
package/dist/components/selection-control/selection-control.d.ts CHANGED
@@ -10,5 +10,10 @@ export type SelectionControlProps = {
10
10
  label: ReactNode;
11
11
  children: JSX.Element | SelectionControlRenderFn;
12
12
  } & SelectionControlBaseProps;
13
- export declare function SelectionControl({ label, labelFor, caption, className, children, ...props }: SelectionControlProps): import("react/jsx-runtime").JSX.Element;
13
+ export declare const SelectionControl: import("react").ForwardRefExoticComponent<{
14
+ labelFor?: string | undefined;
15
+ caption?: ReactNode;
16
+ label: ReactNode;
17
+ children: JSX.Element | SelectionControlRenderFn;
18
+ } & SelectionControlBaseProps & import("react").RefAttributes<HTMLDivElement>>;
14
19
  export {};
package/dist/components/selection-control/selection-control.js CHANGED
@@ -1,12 +1,12 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { cloneElement, useId } from 'react';
2
+ import { cloneElement, forwardRef, useId } from 'react';
3
3
  import { classNames } from '../../lib/react-helpers.js';
4
4
  import { Label } from '../label/index.js';
5
5
  import { Caption } from '../caption/index.js';
6
- export function SelectionControl({ label, labelFor, caption, className, children, ...props }) {
6
+ export const SelectionControl = forwardRef(function SelectionControl({ label, labelFor, caption, className, children, ...props }, ref) {
7
7
  const defaultId = useId();
8
8
  const controlId = labelFor || defaultId;
9
- return (_jsxs("div", { ...props, className: classNames(className, {
9
+ return (_jsxs("div", { ...props, ref: ref, className: classNames(className, {
10
10
  'dc-selection-control': true,
11
11
  'dc-selection-control__with_caption': caption,
12
12
  }), children: [_jsx("div", { className: "dc-selection-control__input", children: typeof children === 'function'
@@ -14,4 +14,4 @@ export function SelectionControl({ label, labelFor, caption, className, children
14
14
  : cloneElement(children, { id: children.props.id || controlId }) }), _jsx(Label, { className: "dc-selection-control__label", htmlFor: controlId, children: label }), caption
15
15
  ? (_jsx(Caption, { className: "dc-selection-control__caption", children: caption }))
16
16
  : null] }));
17
- }
17
+ });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "draft-components",
3
- "version": "3.0.0",
3
+ "version": "3.1.0",
4
4
  "description": "The React based UI components library.",
5
5
  "type": "module",
6
6
  "exports": {