import type { Meta, StoryObj } from '@storybook/react';
import { RadioGroup } from './radio-group.js';
/**
 * The `RadioGroup` component provides a group of radio button options.
 * It supports multiple configuration properties like:
 * - label
 * - description
 * - options
 * - required
 * - disabled
 *
 * Features include:
 * - Default value selection
 * - Option descriptions
 * - Disabled options support
 * - Error and warning message display
 *
 * ## Radio Group Customization
 * The radio group can be customized using the `className` prop which accepts a string of Tailwind classes.
 * Each class should follow the format `[&_.radio-group\\_\\_{element}]:{tailwind-classes}`.
 *
 * Base classes available for customization:
 * - .radio-group: Radio group container
 * - .radio-group__item: Individual radio option container
 *
 * ## Example Usage
 *
 * When using Tailwind CSS with custom class names, we need to use `String.raw` because Tailwind
 * interprets underscores (`_`) as class separators. Without `String.raw`, the escape characters don't work
 * properly and you would need to use four backslashes (`\\\\`) to make it work. Using `String.raw` ensures
 * that the class names with underscores are properly escaped and interpreted by Tailwind.
 *
 * Here's an example of how to use the RadioGroup component with custom classes for styling:
 *
 * ```tsx
 * import { RadioGroup } from './radio-group'
 *
 * function MyCustomRadioGroup() {
 *   return (
 *     <RadioGroup
 *       name="custom-radio"
 *       label="Select an option"
 *       options={[
 *         { label: 'Option 1', value: '1' },
 *         { label: 'Option 2', value: '2' },
 *       ]}
 *       className={String.raw`
 *         [&_.radio-group]:bg-gray-200
 *         [&_.radio-group]:border-2
 *         [&_.radio-group]:border-red-500
 *         [&_.radio-group]:rounded-lg
 *         [&_.radio-group]:shadow-lg
 *         [&_.radio-group]:[&>label]:text-blue-500
 *         [&_.radio-group]:[&>label]:font-semibold
 *
 *         [&_.radio-group\\_\\_item]:text-cyan-400
 *         [&_.radio-group\\_\\_item]:hover:text-cyan-300
 *         [&_.radio-group\\_\\_item]:hover:bg-cyan-400/10
 *         [&_.radio-group\\_\\_item]:rounded-full
 *         [&_.radio-group\\_\\_item]:[&_button[data-state=checked]]:border-cyan-400
 *         [&_.radio-group\\_\\_item]:[&_button[data-state=checked]_span]:after:!bg-cyan-400
 *         [&_.radio-group\\_\\_item]:[&_label]:text-red-400
 *       `}
 *     />
 *   )
 * }
 * ```
 *
 * > **Note:** This component does not have built-in validation. If you need built-in validation
 * > you can use the [EnumField](?path=/docs/scalars-enum-field--readme)
 * > component.
 */
declare const meta: Meta<typeof RadioGroup>;
export default meta;
type Story = StoryObj<typeof RadioGroup>;
export declare const Default: Story;
export declare const WithDescription: Story;
export declare const Required: Story;
export declare const WithDefaultValue: Story;
export declare const Disabled: Story;
export declare const WithError: Story;
export declare const WithWarning: Story;
export declare const WithDescriptionInOptions: Story;
export declare const WithDisabledOptions: Story;
export declare const WithCustomStyles: Story;
//# sourceMappingURL=radio-group.stories.d.ts.map