fix: export toggle group field

Author: lisalupi

.changeset/soft-tables-prove.md

@@ -0,0 +1,5 @@
+---
+"@ultraviolet/form": patch
+---
+
+Export `ToggleGroupField` and fix story

packages/form/src/components/ToggleGroupField/__stories__/Required.stories.tsx

@@ -1,39 +1,24 @@
 import type { StoryFn } from '@storybook/react-vite'
 import { Stack } from '@ultraviolet/ui'
-import type { ComponentProps } from 'react'
-import { useWatch } from '../../..'
 import { Submit } from '../..'
 import { ToggleGroupField } from '..'
 
-export const RequiredStory = (
-  args: ComponentProps<typeof ToggleGroupField>,
-) => {
-  const values = useWatch()
-
-  return (
-    <Stack gap={1}>
-      <ToggleGroupField {...args}>
-        <ToggleGroupField.Toggle
-          label="Automatically run a save every monday at 6 am"
-          name="weekly-save"
-          value="weekly-save"
-        />
-        <ToggleGroupField.Toggle
-          label="Reboot server every day at 9 am"
-          name="daily-reboot"
-          value="daily-reboot"
-        />
-      </ToggleGroupField>
-      <Submit>Submit</Submit>
-      <span>
-        <b>Form content:</b> {JSON.stringify(values)}
-      </span>
-    </Stack>
-  )
-}
-
 export const Required: StoryFn<typeof ToggleGroupField> = args => (
-  <RequiredStory {...args} />
+  <Stack gap={1}>
+    <ToggleGroupField {...args}>
+      <ToggleGroupField.Toggle
+        label="Automatically run a save every monday at 6 am"
+        name="weekly-save"
+        value="weekly-save"
+      />
+      <ToggleGroupField.Toggle
+        label="Reboot server every day at 9 am"
+        name="daily-reboot"
+        value="daily-reboot"
+      />
+    </ToggleGroupField>
+    <Submit>Submit</Submit>
+  </Stack>
 )
 
 Required.parameters = {

packages/form/src/components/ToggleGroupField/__stories__/Template.stories.tsx

@@ -1,37 +1,19 @@
 import type { StoryFn } from '@storybook/react-vite'
-import { Stack } from '@ultraviolet/ui'
-import type { ComponentProps } from 'react'
-import { useWatch } from '../../..'
 import { ToggleGroupField } from '..'
 
-const ToggleGroupFieldStory = (
-  args: ComponentProps<typeof ToggleGroupField>,
-) => {
-  const values = useWatch()
-
-  return (
-    <Stack gap={2}>
-      <ToggleGroupField {...args}>
-        <ToggleGroupField.Toggle
-          label="Automatically run a save every monday at 6 am"
-          name="weekly-save"
-          value="weekly-save"
-        />
-        <ToggleGroupField.Toggle
-          label="Reboot server every day at 9 am"
-          name="daily-reboot"
-          value="daily-reboot"
-        />
-      </ToggleGroupField>
-      <span>
-        <b>Form content:</b> {JSON.stringify(values)}
-      </span>
-    </Stack>
-  )
-}
-
 export const Template: StoryFn<typeof ToggleGroupField> = args => (
-  <ToggleGroupFieldStory {...args} />
+  <ToggleGroupField {...args}>
+    <ToggleGroupField.Toggle
+      label="Automatically run a save every monday at 6 am"
+      name="weekly-save"
+      value="weekly-save"
+    />
+    <ToggleGroupField.Toggle
+      label="Reboot server every day at 9 am"
+      name="daily-reboot"
+      value="daily-reboot"
+    />
+  </ToggleGroupField>
 )
 
 Template.args = {

packages/form/src/components/index.ts

@@ -19,5 +19,6 @@ export { TextAreaField } from './TextAreaField'
 export { TextInputField } from './TextInputField'
 export { TimeInputField } from './TimeInputField'
 export { ToggleField } from './ToggleField'
+export { ToggleGroupField } from './ToggleGroupField'
 export { UnitInputField } from './UnitInputField'
 export { VerificationCodeField } from './VerificationCodeField'