+>(({ className, children, ...props }, ref) => {
+ return (
+
+
+
+
+
+ )
+})
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
+
+export { RadioGroupItem as Radio }
diff --git a/src/components/Radio/index.tsx b/src/components/Radio/index.tsx
new file mode 100644
index 00000000..9cac04d3
--- /dev/null
+++ b/src/components/Radio/index.tsx
@@ -0,0 +1,2 @@
+export { RadioGroup } from './RadioGroup'
+export { Radio } from './RadioGroupItem'
diff --git a/stories/Label/Label.example.tsx b/stories/Label/Label.example.tsx
new file mode 100644
index 00000000..eae13033
--- /dev/null
+++ b/stories/Label/Label.example.tsx
@@ -0,0 +1,20 @@
+import { Checkbox } from '@/components/Checkbox'
+import { Label, LabelProps } from '@/components/Label'
+
+interface LabelDemoProps extends LabelProps {
+ labelText: string
+}
+const LabelDemo = (props: LabelDemoProps) => {
+ return (
+ <>
+
+
+
+
+
+ )
+}
+
+export { LabelDemo }
diff --git a/stories/Label/Label.stories.ts b/stories/Label/Label.stories.ts
new file mode 100644
index 00000000..8c7a110d
--- /dev/null
+++ b/stories/Label/Label.stories.ts
@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { LabelDemo } from './Label.example'
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta = {
+ title: 'Components/Label',
+ component: LabelDemo,
+ parameters: {
+ // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+ layout: 'centered'
+ },
+ // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+ tags: ['autodocs']
+ // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Default: Story = {
+ args: {
+ labelText: 'A Label with a Checkbox',
+ htmlFor: 'checkbox'
+ }
+}
diff --git a/stories/Radio/Radio.example.tsx b/stories/Radio/Radio.example.tsx
new file mode 100644
index 00000000..09b37124
--- /dev/null
+++ b/stories/Radio/Radio.example.tsx
@@ -0,0 +1,39 @@
+import { Label } from '@/components/Label'
+import { Radio, RadioGroup } from '@/components/Radio'
+import { useState } from 'react'
+export const RadioGroupDemo = ({
+ defaultValue,
+ disabled,
+ loop
+}: {
+ defaultValue?: string
+ disabled?: boolean
+ loop?: boolean
+}): JSX.Element => {
+ const [value, setValue] = useState(defaultValue)
+ const handleValueChange = (newValue: string) => {
+ console.log(newValue)
+ setValue(newValue)
+ }
+ return (
+
+
+
+
+
+
+ )
+}
+const RadioWithLabel = ({ value }: { value: string }) => {
+ return (
+
+
+
+
+ )
+}
diff --git a/stories/Radio/Radio.stories.ts b/stories/Radio/Radio.stories.ts
new file mode 100644
index 00000000..688da44b
--- /dev/null
+++ b/stories/Radio/Radio.stories.ts
@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { RadioGroupDemo } from './Radio.example'
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta = {
+ title: 'Components/RadioGroup',
+ component: RadioGroupDemo,
+ parameters: {
+ // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+ layout: 'centered'
+ },
+ // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+ tags: ['autodocs']
+ // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const NoDefault: Story = {}
+export const DefaultSet: Story = {
+ args: {
+ defaultValue: 'goodbye'
+ }
+}
+export const RadioButtonDisabled: Story = {
+ args: {
+ disabled: true
+ }
+}
diff --git a/stories/tailwind.config.js b/stories/tailwind.config.js
index d4faf329..7ce338e8 100644
--- a/stories/tailwind.config.js
+++ b/stories/tailwind.config.js
@@ -1,5 +1,5 @@
const config = require('../tailwind.config')
-config.content.push('./stories/**/*.tsx')
+config.content.push('./stories/**/*.{tsx, ts}')
module.exports = config
diff --git a/tailwind.config.js b/tailwind.config.js
index e58291cc..3f26f712 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -4,6 +4,8 @@ import defaultTheme from 'tailwindcss/defaultTheme'
module.exports = {
content: ['./src/**/*.tsx'],
+ darkMode: 'class',
+ plugins: [],
theme: {
colors: colors,
boxShadow: {
@@ -40,8 +42,6 @@ module.exports = {
'accordion-down': 'accordion-down 0.2s ease-out',
'accordion-up': 'accordion-up 0.2s ease-out'
}
- },
- darkMode: 'class',
- plugins: []
+ }
}
}