@a-type/ui 6.0.22 → 6.0.24

package/src/components/forms/ToggleGroupField.tsx

@@ -1,7 +1,8 @@
 import { useField } from 'formik';
+import { ReactNode } from 'react';
+import { useIdOrGenerated } from '../../hooks/useIdOrGenerated.js';
 import { ToggleGroup, ToggleGroupProps } from '../toggleGroup/toggleGroup.js';
-import { FieldLabel } from './FieldLabel.js';
-import { FieldRoot } from './TextField.js';
+import { Field } from './Field.js';
 
 export type ToggleGroupFieldProps<Value extends string> =
 	ToggleGroupProps<Value> & {
@@ -11,6 +12,7 @@ export type ToggleGroupFieldProps<Value extends string> =
 		className?: string;
 		id?: string;
 		type?: 'single' | 'multiple';
+		description?: ReactNode;
 	};
 
 function ToggleGroupFieldDefault({
@@ -20,29 +22,35 @@ function ToggleGroupFieldDefault({
 	className,
 	type = 'single',
 	multiple,
-	id,
+	description,
+	id: providedId,
 	...props
 }: ToggleGroupFieldProps<string>) {
+	const id = useIdOrGenerated(providedId);
 	const [fieldProps, _, tools] = useField({ name, required, ...props });
 
 	return (
-		<FieldRoot>
-			{label && <FieldLabel htmlFor={id}>{label}</FieldLabel>}
-			<ToggleGroup
-				{...fieldProps}
-				onValueChange={(v) => {
-					if (multiple || type === 'multiple') {
-						tools.setValue(v);
-					} else {
-						tools.setValue(v[0]);
-					}
-				}}
-				multiple={multiple || type === 'multiple'}
-				{...props}
-				id={id}
-				className={className}
+		<Field id={id}>
+			{label && <Field.Label>{label}</Field.Label>}
+			<Field.Control
+				render={
+					<ToggleGroup
+						{...fieldProps}
+						onValueChange={(v) => {
+							if (multiple || type === 'multiple') {
+								tools.setValue(v);
+							} else {
+								tools.setValue(v[0]);
+							}
+						}}
+						multiple={multiple || type === 'multiple'}
+						{...props}
+						className={className}
+					/>
+				}
 			/>
-		</FieldRoot>
+			{description && <Field.Description>{description}</Field.Description>}
+		</Field>
 	);
 }
 

package/src/components/forms/index.tsx

@@ -1,5 +1,5 @@
 export * from './CheckboxField.js';
-export * from './FieldLabel.js';
+export * from './Field.js';
 export * from './Form.js';
 export * from './FormikForm.js';
 export * from './hooks.js';

package/src/components/switch/Switch.module.css

@@ -15,7 +15,7 @@
 	--mx-shadow-value: inset var(--m-shadow-sm);
 
 	@apply --mx-bg(var(--m-control-bg));
-	@apply --mx-borderColor(var(--m-control-border));
+	@apply --mx-borderColor(var(--m-control-borderColor));
 	border-radius: var(--m-radius-lg);
 
 	&[data-checked] {

package/dist/components/forms/FieldLabel.d.ts

@@ -1,2 +0,0 @@
-export declare const FieldLabel: import("react").FunctionComponent<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>>;
-export declare const HorizontalFieldLabel: import("react").FunctionComponent<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>>;

package/dist/components/forms/FieldLabel.js

@@ -1,5 +0,0 @@
-import { withClassName } from '../../hooks.js';
-import cls from './FieldLabel.module.css';
-export const FieldLabel = withClassName('label', cls.fieldLabel);
-export const HorizontalFieldLabel = withClassName('label', cls.horizontalFieldLabel);
-//# sourceMappingURL=FieldLabel.js.map

package/dist/components/forms/FieldLabel.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"FieldLabel.js","sourceRoot":"","sources":["../../../src/components/forms/FieldLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,GAAG,MAAM,yBAAyB,CAAC;AAE1C,MAAM,CAAC,MAAM,UAAU,GAAG,aAAa,CAAC,OAAO,EAAE,GAAG,CAAC,UAAU,CAAC,CAAC;AAEjE,MAAM,CAAC,MAAM,oBAAoB,GAAG,aAAa,CAChD,OAAO,EACP,GAAG,CAAC,oBAAoB,CACxB,CAAC"}

package/dist/components/forms/FieldLabel.module.css

@@ -1,20 +0,0 @@
-.fieldLabel {
-	display: inline-flex;
-	flex-direction: column;
-	@apply --mx-fg(var(--m-color-neutral-ink));
-	margin-inline-start: var(--m-space-md);
-	gap: var(--m-space-xs);
-	font-size: var(--m-prose-ambient-size);
-	line-height: var(--m-prose-ambient-lineHeight);
-	font-weight: bold;
-}
-
-.horizontalFieldLabel {
-	display: inline-flex;
-	flex-direction: row;
-	@apply --mx-fg(var(--m-color-neutral-ink));
-	gap: var(--m-space-sm);
-	font-size: var(--m-prose-ambient-size);
-	line-height: var(--m-prose-ambient-lineHeight);
-	margin-block-start: var(--m-space-sm);
-}

package/src/components/forms/FieldLabel.module.css

@@ -1,20 +0,0 @@
-.fieldLabel {
-	display: inline-flex;
-	flex-direction: column;
-	@apply --mx-fg(var(--m-color-neutral-ink));
-	margin-inline-start: var(--m-space-md);
-	gap: var(--m-space-xs);
-	font-size: var(--m-prose-ambient-size);
-	line-height: var(--m-prose-ambient-lineHeight);
-	font-weight: bold;
-}
-
-.horizontalFieldLabel {
-	display: inline-flex;
-	flex-direction: row;
-	@apply --mx-fg(var(--m-color-neutral-ink));
-	gap: var(--m-space-sm);
-	font-size: var(--m-prose-ambient-size);
-	line-height: var(--m-prose-ambient-lineHeight);
-	margin-block-start: var(--m-space-sm);
-}

package/src/components/forms/FieldLabel.tsx

@@ -1,9 +0,0 @@
-import { withClassName } from '../../hooks.js';
-import cls from './FieldLabel.module.css';
-
-export const FieldLabel = withClassName('label', cls.fieldLabel);
-
-export const HorizontalFieldLabel = withClassName(
-	'label',
-	cls.horizontalFieldLabel,
-);