import type { Meta, StoryObj } from '@storybook/react-vite'; import { ThemeProvider, ThemeToggle, useTheme } from './index'; import '../buttons/button.scss'; const meta = { title: 'FP.React Components/Theme', component: ThemeToggle, tags: ['beta'], parameters: { docs: { description: { component: 'Theme primitives: writes data-theme to and exposes useTheme() / . Ships with a FOUC-prevention script for SSR consumers.', }, }, }, decorators: [ (Story) => ( ), ], } satisfies Meta; export default meta; type Story = StoryObj; export const Default: Story = { args: { display: 'both', }, }; export const IconOnly: Story = { args: { display: 'icon', }, }; export const TextOnly: Story = { args: { display: 'text', }, }; /** * Demonstrates reading theme state via `useTheme` alongside the toggle. * Useful when building a header that shows the current mode elsewhere. */ export const WithCurrentThemeReadout: Story = { render: (args) => (

), }; function ThemeReadout() { const { preference, theme } = useTheme(); return ( preference: {preference} → resolved: {theme} ); }