feat: simplified checkbox and radio

packages/frosted-ui/.storybook/stories/components/checkbox.stories.tsx

@@ -29,21 +29,43 @@ export const Default: Story = {
   },
   render: (args) => (
     <Flex gap="2" direction="column">
-      {/* TODO: text size matching checkbox size */}
+      <Checkbox defaultChecked {...args}>
+        Default
+      </Checkbox>
+      <Checkbox defaultChecked={true} disabled {...args}>
+        Disabled checked
+      </Checkbox>
+      <Checkbox defaultChecked={false} disabled {...args}>
+        Disabled unchecked
+      </Checkbox>
+    </Flex>
+  ),
+};
+
+export const Composed: Story = {
+  args: {
+    size: checkboxPropDefs.size.default,
+    color: checkboxPropDefs.color.default,
+    highContrast: checkboxPropDefs.highContrast.default,
+  },
+  render: (args) => (
+    <Flex gap="2" direction="column">
       <Text as="label" size="2">
         <Flex gap="2">
-          <Checkbox defaultChecked {...args} /> Default
+          <Checkbox defaultChecked {...args} />
+          Default
         </Flex>
       </Text>
       <Text as="label" size="2">
         <Flex gap="2">
-          <Checkbox defaultChecked={true} disabled {...args} /> Disabled checked
+          <Checkbox defaultChecked={true} disabled {...args} />
+          Disabled checked
         </Flex>
       </Text>
       <Text as="label" size="2">
         <Flex gap="2">
-          <Checkbox defaultChecked={false} disabled {...args} /> Disabled
-          unchecked
+          <Checkbox defaultChecked={false} disabled {...args} />
+          Disabled unchecked
         </Flex>
       </Text>
     </Flex>

packages/frosted-ui/.storybook/stories/components/radio-group.stories.tsx

@@ -24,6 +24,24 @@ type Story = StoryObj<typeof meta>;
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 export const Default: Story = {
+  args: {
+    size: radioGroupPropDefs.size.default,
+    color: radioGroupPropDefs.color.default,
+    variant: radioGroupPropDefs.variant.default,
+    highContrast: radioGroupPropDefs.highContrast.default,
+  },
+  render: (args) => (
+    <RadioGroup.Root defaultValue="1" {...args}>
+      <Flex gap="2" direction="column">
+        <RadioGroup.Item value="1">Default</RadioGroup.Item>
+        <RadioGroup.Item value="2">Comfortable</RadioGroup.Item>
+        <RadioGroup.Item value="3">Compact</RadioGroup.Item>
+      </Flex>
+    </RadioGroup.Root>
+  ),
+};
+
+export const Composed: Story = {
   args: {
     size: radioGroupPropDefs.size.default,
     color: radioGroupPropDefs.color.default,

packages/frosted-ui/src/components/checkbox.css

@@ -86,8 +86,13 @@
 
 @breakpoints {
   .fui-CheckboxRoot {
+    user-select: none;
     &:where(.fui-r-size-1) {
       --checkbox-size: var(--space-4);
+      gap: var(--space-2);
+      font-size: var(--font-size-2);
+      line-height: var(--line-height-2);
+      letter-spacing: var(--letter-spacing-2);
 
       & :where(.fui-CheckboxButton) {
         border-radius: var(--radius-2);
@@ -100,6 +105,10 @@
     }
     &:where(.fui-r-size-2) {
       --checkbox-size: calc(var(--space-4) * 1.25);
+      gap: var(--space-2);
+      font-size: var(--font-size-3);
+      line-height: var(--line-height-3);
+      letter-spacing: var(--letter-spacing-3);
 
       & :where(.fui-CheckboxButton) {
         border-radius: var(--radius-3);
@@ -112,6 +121,10 @@
     }
     &:where(.fui-r-size-3) {
       --checkbox-size: var(--space-5);
+      gap: var(--space-3);
+      font-size: var(--font-size-4);
+      line-height: var(--line-height-4);
+      letter-spacing: var(--letter-spacing-4);
 
       & :where(.fui-CheckboxButton) {
         border-radius: var(--radius-3);

packages/frosted-ui/src/components/checkbox.tsx

@@ -96,25 +96,26 @@ CheckboxCheckmarkIcon.displayName = 'CheckboxCheckmarkIcon';
 type CheckboxElement = React.ElementRef<typeof CheckboxPrimitive.Root>;
 type CheckboxOwnProps = GetPropDefTypes<typeof checkboxPropDefs>;
 interface CheckboxProps
-  extends Omit<
-      PropsWithoutRefOrColor<typeof CheckboxPrimitive.Root>,
-      'children'
-    >,
+  extends PropsWithoutRefOrColor<typeof CheckboxPrimitive.Root>,
     MarginProps,
     CheckboxOwnProps {}
 const Checkbox = React.forwardRef<CheckboxElement, CheckboxProps>(
   (props, forwardedRef) => {
     const { rest: marginRest, ...marginProps } = extractMarginProps(props);
     const {
+      children,
       className,
       style,
       size = checkboxPropDefs.size.default,
       color = checkboxPropDefs.color.default,
       highContrast = checkboxPropDefs.highContrast.default,
       ...checkboxProps
     } = marginRest;
+
+    const Comp = children ? 'label' : 'span';
+
     return (
-      <span
+      <Comp
         className={classNames(
           'fui-CheckboxRoot',
           className,
@@ -138,7 +139,9 @@ const Checkbox = React.forwardRef<CheckboxElement, CheckboxProps>(
             />
           </CheckboxPrimitive.Indicator>
         </CheckboxPrimitive.Root>
-      </span>
+
+        {children}
+      </Comp>
     );
   },
 );

packages/frosted-ui/src/components/radio-group.css

@@ -4,6 +4,10 @@
   vertical-align: top;
   flex-shrink: 0;
   height: var(--line-height, var(--radio-group-item-size));
+  gap: var(--gap);
+  font-size: var(--font-size);
+  line-height: var(--line-height);
+  letter-spacing: var(--letter-spacing);
 }
 
 .fui-RadioGroupButton {
@@ -40,12 +44,24 @@
 @breakpoints {
   .fui-RadioGroupRoot {
     &:where(.fui-r-size-1) {
+      --gap: var(--space-2);
+      --font-size: var(--font-size-2);
+      --line-height: var(--line-height-2);
+      --letter-spacing: var(--letter-spacing-2);
       --radio-group-item-size: calc(var(--space-4) * 0.875);
     }
     &:where(.fui-r-size-2) {
+      --gap: var(--space-2);
+      --font-size: var(--font-size-3);
+      --line-height: var(--line-height-3);
+      --letter-spacing: var(--letter-spacing-3);
       --radio-group-item-size: var(--space-4);
     }
     &:where(.fui-r-size-3) {
+      --gap: var(--space-3);
+      --font-size: var(--font-size-4);
+      --line-height: var(--line-height-4);
+      --letter-spacing: var(--letter-spacing-4);
       --radio-group-item-size: calc(var(--space-4) * 1.25);
     }
   }

packages/frosted-ui/src/components/radio-group.tsx

@@ -54,19 +54,19 @@ RadioGroupRoot.displayName = 'RadioGroupRoot';
 
 type RadioGroupItemElement = React.ElementRef<typeof RadioGroupPrimitive.Item>;
 interface RadioGroupItemProps
-  extends Omit<
-      React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>,
-      'children'
-    >,
+  extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>,
     MarginProps {}
 const RadioGroupItem = React.forwardRef<
   RadioGroupItemElement,
   RadioGroupItemProps
 >((props, forwardedRef) => {
   const { rest: marginRest, ...marginProps } = extractMarginProps(props);
-  const { className, style, ...itemProps } = marginRest;
+  const { children, className, style, ...itemProps } = marginRest;
+
+  const Comp = children ? 'label' : 'span';
+
   return (
-    <span
+    <Comp
       className={classNames(
         'fui-RadioGroupItem',
         className,
@@ -81,7 +81,8 @@ const RadioGroupItem = React.forwardRef<
       >
         <RadioGroupPrimitive.Indicator className="fui-RadioGroupIndicator" />
       </RadioGroupPrimitive.Item>
-    </span>
+      {children}
+    </Comp>
   );
 });
 RadioGroupItem.displayName = 'RadioGroupItem';