Merge pull request #10 from Bland-UI/feat/radio-button

Feat/radio button

.changeset/yellow-ears-divide.md

@@ -0,0 +1,6 @@
+---
+"@blandui/blandui-react": patch
+"@blandui/blandui": patch
+---
+
+RadioButton component added

apps/storybook-react/stories/RadioButton.stories.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { RadioButton } from '@blandui/blandui-react';
+
+const meta: Meta<typeof RadioButton> = {
+	title:     'Component/RadioButton',
+	component: RadioButton,
+};
+
+export default meta;
+type Story = StoryObj<typeof RadioButton>;
+
+export const Default: Story = {
+	render: () => (
+		<div className="flex flex-col gap-lg items-start justify-center">
+			<div className="flex gap-md">
+				<RadioButton radioSize="sm" checked={false} />
+				<RadioButton radioSize="sm" checked={false} disabled />
+				<RadioButton radioSize="sm" checked />
+				<RadioButton radioSize="sm" checked disabled />
+			</div>
+			<div className="flex gap-md">
+				<RadioButton radioSize="md" checked={false} />
+				<RadioButton radioSize="md" checked={false} disabled />
+				<RadioButton radioSize="md" checked />
+				<RadioButton radioSize="md" checked disabled />
+			</div>
+		</div>
+	),
+};

packages/blandui-react/src/components/RadioButton/RadioButton.tsx

@@ -0,0 +1,50 @@
+import { ComponentProps, forwardRef } from 'react';
+import cn from '../../utils/cn';
+
+export interface RadioButtonProps extends ComponentProps<'input'> {
+	className?: string;
+	radioSize?: 'sm' | 'md';
+}
+
+export const RadioButton = forwardRef<HTMLInputElement, RadioButtonProps>((
+	{
+		className,
+		radioSize = 'sm',
+		...props
+	},
+	ref,
+) => {
+	const baseCn = `
+		not:checked:bg-radio-btn not:checked:border-radio-btn
+		checked:text-radio-btn-checked
+
+		focus:ring-2
+		focus:ring-offset-0 checked:focus:ring-offset-1
+		focus:ring-radio-btn-focused
+
+		hover:ring-2
+		hover:ring-offset-0 checked:hover:ring-offset-1
+		hover:ring-radio-btn-hover
+		disabled:hover:ring-0
+
+		disabled:border-radio-btn-disabled
+		checked:disabled:border-transparent checked:disabled:text-radio-btn-checked-disabled
+	`;
+
+	const radioSizeClasses = {
+		sm: 'w-4 h-4',
+		md: 'w-5 h-5',
+	};
+
+	const radioButtonCn = cn(
+		baseCn,
+		radioSizeClasses[radioSize],
+		className,
+	);
+
+	return (
+		<input type="radio" className={radioButtonCn} ref={ref} {...props}/>
+	);
+});
+
+RadioButton.displayName = 'Button';

packages/blandui-react/src/components/RadioButton/index.tsx

@@ -0,0 +1,2 @@
+export { RadioButton } from './RadioButton';
+export type { RadioButtonProps } from './RadioButton';

packages/blandui-react/src/index.ts

@@ -2,6 +2,7 @@ export * from './components/Badge';
 export * from './components/Button';
 export * from './components/Checkbox';
 export * from './components/Chip';
+export * from './components/RadioButton';
 export * from './components/SegmentedBar';
 export * from './components/Typography';
 export * from './components/TextInput';

packages/blandui/src/Color/backgroundColor.ts

@@ -117,6 +117,9 @@ export default {
 	'badge-amber-primary':   colors.amber[600],
 	'badge-amber-secondary': colors.amber[100],
 
+	// RADIO BUTTON
+	'radio-btn': colors.gray[50],
+
 	// SURFACE
 	'surface-4': colors.gray[0],
 	'surface-3': colors.gray[50],

packages/blandui/src/Color/borderColor.ts

@@ -55,4 +55,12 @@ export default {
 	'btn-warning-stroke-rest':     colors.amber[500],
 	'btn-warning-stroke-focused':  colors.amber[200],
 	'btn-warning-stroke-disabled': colors.gray[100],
+
+	// RADIO BUTTON
+	'radio-btn':          colors.gray[200],
+	'radio-btn-disabled': colors.gray[100],
+
+	'radio-btn-checked': colors.gray[0],
+	'radio-btn-hover':   colors.carbon[100],
+	'radio-btn-focused': colors.carbon[300],
 };

packages/blandui/src/Color/textColor.ts

@@ -112,4 +112,8 @@ export default {
 	'btn-warning-stroke-pressed':  colors.amber[700],
 	'btn-warning-stroke-focused':  colors.amber[700],
 	'btn-warning-stroke-disabled': colors.gray[200],
+
+	// RADIO BUTTON
+	'radio-btn-checked':          colors.carbon[1000],
+	'radio-btn-checked-disabled': colors.gray[300],
 };