draft-components 1.0.0-beta.10 → 1.0.0-beta.11

package/cjs/components/selection-control/selection-control.cjs

@@ -12,7 +12,7 @@ function SelectionControl({ label: label$1, labelFor, caption: caption$1, classN
     const shouldRenderCaption = Boolean(caption$1);
     return (jsxRuntime.jsxs("div", { ...props, className: reactHelpers.classNames('dc-selection-control', className), children: [jsxRuntime.jsx("div", { className: "dc-selection-control__input", children: typeof children === 'function'
                     ? children({ id: controlId })
-                    : children }), jsxRuntime.jsx(label.Label, { className: "dc-selection-control__label", htmlFor: controlId, children: label$1 }), shouldRenderCaption && (jsxRuntime.jsx(caption.Caption, { className: "dc-selection-control__caption", children: caption$1 }))] }));
+                    : react.cloneElement(children, { id: children.props.id || controlId }) }), jsxRuntime.jsx(label.Label, { className: "dc-selection-control__label", htmlFor: controlId, children: label$1 }), shouldRenderCaption && (jsxRuntime.jsx(caption.Caption, { className: "dc-selection-control__caption", children: caption$1 }))] }));
 }
 
 exports.SelectionControl = SelectionControl;

package/css/draft-components.css

@@ -1593,6 +1593,7 @@
   --dc-switch-focus-ring-color: var(--dc-focus-ring-color);
 
   color-scheme: light;
+  display: inline-flex;
 }
 
 .dc-switch__input {
@@ -1698,6 +1699,7 @@
   --dc-checkbox-focus-ring-color: var(--dc-focus-ring-color);
 
   color-scheme: light;
+  display: inline-flex;
 }
 
 .dc-checkbox__input {
@@ -1771,6 +1773,7 @@
   --dc-radio-color-focus-ring: var(--dc-focus-ring-color);
 
   color-scheme: light;
+  display: inline-flex;
 }
 
 .dc-radio__input {
@@ -2419,6 +2422,7 @@
 }
 
 .dc-selection-control__input {
+  display: inline-flex;
   grid-area: input;
 }
 

package/esm/components/selection-control/selection-control.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useId } from 'react';
+import { useId, cloneElement } from 'react';
 import { classNames } from '../../lib/react-helpers.js';
 import { Label } from '../label/label.js';
 import { Caption } from '../caption/caption.js';
@@ -10,7 +10,7 @@ function SelectionControl({ label, labelFor, caption, className, children, ...pr
     const shouldRenderCaption = Boolean(caption);
     return (jsxs("div", { ...props, className: classNames('dc-selection-control', className), children: [jsx("div", { className: "dc-selection-control__input", children: typeof children === 'function'
                     ? children({ id: controlId })
-                    : children }), jsx(Label, { className: "dc-selection-control__label", htmlFor: controlId, children: label }), shouldRenderCaption && (jsx(Caption, { className: "dc-selection-control__caption", children: caption }))] }));
+                    : cloneElement(children, { id: children.props.id || controlId }) }), jsx(Label, { className: "dc-selection-control__label", htmlFor: controlId, children: label }), shouldRenderCaption && (jsx(Caption, { className: "dc-selection-control__caption", children: caption }))] }));
 }
 
 export { SelectionControl };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "draft-components",
-  "version": "1.0.0-beta.10",
+  "version": "1.0.0-beta.11",
   "description": "The React based UI components library.",
   "type": "module",
   "exports": {

package/types/components/selection-control/selection-control.d.ts

@@ -1,14 +1,14 @@
 import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
 export type SelectionControlRenderFn = (props: {
     id: string;
-}) => ReactNode;
+}) => JSX.Element;
 type SelectionControlHTMLProps = ComponentPropsWithoutRef<'div'>;
 type SelectionControlBaseProps = Omit<SelectionControlHTMLProps, 'children'>;
 export type SelectionControlProps = {
     labelFor?: string;
     caption?: ReactNode;
     label: ReactNode;
-    children: ReactNode | SelectionControlRenderFn;
+    children: JSX.Element | SelectionControlRenderFn;
 } & SelectionControlBaseProps;
 export declare function SelectionControl({ label, labelFor, caption, className, children, ...props }: SelectionControlProps): JSX.Element;
 export {};