Radix UI

# Każdy prymityw instalujemy osobno
npm install @radix-ui/react-dialog
npm install @radix-ui/react-dropdown-menu
npm install @radix-ui/react-popover
npm install @radix-ui/react-tooltip
npm install @radix-ui/react-tabs
npm install @radix-ui/react-accordion
npm install @radix-ui/react-switch
npm install @radix-ui/react-checkbox
npm install @radix-ui/react-select
npm install @radix-ui/react-slider

npm install @radix-ui/react-icons

// components/Modal.tsx
import * as Dialog from '@radix-ui/react-dialog'
import { X } from 'lucide-react'

interface ModalProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  title: string
  description?: string
  children: React.ReactNode
}

export function Modal({
  open,
  onOpenChange,
  title,
  description,
  children,
}: ModalProps) {
  return (
    <Dialog.Root open={open} onOpenChange={onOpenChange}>
      <Dialog.Portal>
        {/* Overlay - tło za modalem */}
        <Dialog.Overlay
          className="fixed inset-0 bg-black/50 backdrop-blur-sm
            data-[state=open]:animate-in data-[state=closed]:animate-out
            data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
        />

        {/* Content - sam modal */}
        <Dialog.Content
          className="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2
            w-full max-w-lg bg-white dark:bg-gray-900
            rounded-xl shadow-xl p-6
            data-[state=open]:animate-in data-[state=closed]:animate-out
            data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0
            data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95
            data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]
            data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]"
        >
          {/* Nagłówek */}
          <Dialog.Title className="text-xl font-semibold mb-2">
            {title}
          </Dialog.Title>

          {description && (
            <Dialog.Description className="text-gray-500 mb-4">
              {description}
            </Dialog.Description>
          )}

          {/* Zawartość */}
          <div className="mt-4">
            {children}
          </div>

          {/* Przycisk zamknięcia */}
          <Dialog.Close asChild>
            <button
              className="absolute top-4 right-4 p-1 rounded-full
                hover:bg-gray-100 dark:hover:bg-gray-800
                focus:outline-none focus:ring-2 focus:ring-blue-500"
              aria-label="Zamknij"
            >
              <X className="w-5 h-5" />
            </button>
          </Dialog.Close>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  )
}

// Przykład użycia
function Example() {
  const [open, setOpen] = useState(false)

  return (
    <>
      <button onClick={() => setOpen(true)}>
        Otwórz modal
      </button>

      <Modal
        open={open}
        onOpenChange={setOpen}
        title="Potwierdź akcję"
        description="Czy na pewno chcesz kontynuować?"
      >
        <div className="flex gap-3 justify-end">
          <Dialog.Close asChild>
            <button className="px-4 py-2 rounded bg-gray-100">
              Anuluj
            </button>
          </Dialog.Close>
          <button
            className="px-4 py-2 rounded bg-blue-500 text-white"
            onClick={() => {
              // Akcja
              setOpen(false)
            }}
          >
            Potwierdź
          </button>
        </div>
      </Modal>
    </>
  )
}

<Dialog.Root>
  <Dialog.Trigger asChild>
    <button className="px-4 py-2 bg-blue-500 text-white rounded">
      Otwórz
    </button>
  </Dialog.Trigger>

  <Dialog.Portal>
    <Dialog.Overlay className="fixed inset-0 bg-black/50" />
    <Dialog.Content className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white p-6 rounded-lg">
      <Dialog.Title>Tytuł</Dialog.Title>
      <Dialog.Description>Opis...</Dialog.Description>
      <Dialog.Close asChild>
        <button>Zamknij</button>
      </Dialog.Close>
    </Dialog.Content>
  </Dialog.Portal>
</Dialog.Root>

// components/DropdownMenu.tsx
import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
import {
  User,
  Settings,
  CreditCard,
  LogOut,
  ChevronRight,
  Check
} from 'lucide-react'

interface UserMenuProps {
  user: {
    name: string
    email: string
    avatar: string
  }
  onLogout: () => void
}

export function UserMenu({ user, onLogout }: UserMenuProps) {
  const [theme, setTheme] = useState('system')
  const [notifications, setNotifications] = useState(true)

  return (
    <DropdownMenu.Root>
      <DropdownMenu.Trigger asChild>
        <button className="flex items-center gap-2 p-2 rounded-full hover:bg-gray-100">
          <img
            src={user.avatar}
            alt={user.name}
            className="w-8 h-8 rounded-full"
          />
        </button>
      </DropdownMenu.Trigger>

      <DropdownMenu.Portal>
        <DropdownMenu.Content
          className="min-w-[220px] bg-white dark:bg-gray-900
            rounded-lg shadow-lg border border-gray-200 dark:border-gray-800
            p-1.5 animate-in fade-in-0 zoom-in-95"
          sideOffset={8}
          align="end"
        >
          {/* Nagłówek z informacjami o użytkowniku */}
          <DropdownMenu.Label className="px-2 py-1.5">
            <p className="font-medium">{user.name}</p>
            <p className="text-sm text-gray-500">{user.email}</p>
          </DropdownMenu.Label>

          <DropdownMenu.Separator className="h-px bg-gray-200 dark:bg-gray-800 my-1" />

          {/* Zwykłe elementy menu */}
          <DropdownMenu.Item
            className="flex items-center gap-2 px-2 py-1.5 rounded
              cursor-pointer outline-none
              hover:bg-gray-100 dark:hover:bg-gray-800
              focus:bg-gray-100 dark:focus:bg-gray-800"
          >
            <User className="w-4 h-4" />
            <span>Profil</span>
          </DropdownMenu.Item>

          <DropdownMenu.Item className="flex items-center gap-2 px-2 py-1.5 rounded cursor-pointer outline-none hover:bg-gray-100 focus:bg-gray-100">
            <CreditCard className="w-4 h-4" />
            <span>Płatności</span>
          </DropdownMenu.Item>

          <DropdownMenu.Item className="flex items-center gap-2 px-2 py-1.5 rounded cursor-pointer outline-none hover:bg-gray-100 focus:bg-gray-100">
            <Settings className="w-4 h-4" />
            <span>Ustawienia</span>
          </DropdownMenu.Item>

          <DropdownMenu.Separator className="h-px bg-gray-200 my-1" />

          {/* Podmenu */}
          <DropdownMenu.Sub>
            <DropdownMenu.SubTrigger
              className="flex items-center justify-between px-2 py-1.5 rounded
                cursor-pointer outline-none
                hover:bg-gray-100 focus:bg-gray-100
                data-[state=open]:bg-gray-100"
            >
              <span>Motyw</span>
              <ChevronRight className="w-4 h-4" />
            </DropdownMenu.SubTrigger>

            <DropdownMenu.Portal>
              <DropdownMenu.SubContent
                className="min-w-[160px] bg-white rounded-lg shadow-lg border p-1.5"
                sideOffset={4}
              >
                <DropdownMenu.RadioGroup value={theme} onValueChange={setTheme}>
                  <DropdownMenu.RadioItem
                    value="light"
                    className="flex items-center gap-2 px-2 py-1.5 rounded cursor-pointer outline-none hover:bg-gray-100"
                  >
                    <DropdownMenu.ItemIndicator>
                      <Check className="w-4 h-4" />
                    </DropdownMenu.ItemIndicator>
                    <span className="pl-6">Jasny</span>
                  </DropdownMenu.RadioItem>

                  <DropdownMenu.RadioItem
                    value="dark"
                    className="flex items-center gap-2 px-2 py-1.5 rounded cursor-pointer outline-none hover:bg-gray-100"
                  >
                    <DropdownMenu.ItemIndicator>
                      <Check className="w-4 h-4" />
                    </DropdownMenu.ItemIndicator>
                    <span className="pl-6">Ciemny</span>
                  </DropdownMenu.RadioItem>

                  <DropdownMenu.RadioItem
                    value="system"
                    className="flex items-center gap-2 px-2 py-1.5 rounded cursor-pointer outline-none hover:bg-gray-100"
                  >
                    <DropdownMenu.ItemIndicator>
                      <Check className="w-4 h-4" />
                    </DropdownMenu.ItemIndicator>
                    <span className="pl-6">System</span>
                  </DropdownMenu.RadioItem>
                </DropdownMenu.RadioGroup>
              </DropdownMenu.SubContent>
            </DropdownMenu.Portal>
          </DropdownMenu.Sub>

          {/* Checkbox item */}
          <DropdownMenu.CheckboxItem
            checked={notifications}
            onCheckedChange={setNotifications}
            className="flex items-center gap-2 px-2 py-1.5 rounded cursor-pointer outline-none hover:bg-gray-100"
          >
            <DropdownMenu.ItemIndicator>
              <Check className="w-4 h-4" />
            </DropdownMenu.ItemIndicator>
            <span className="pl-6">Powiadomienia</span>
          </DropdownMenu.CheckboxItem>

          <DropdownMenu.Separator className="h-px bg-gray-200 my-1" />

          {/* Logout z custom styling */}
          <DropdownMenu.Item
            onClick={onLogout}
            className="flex items-center gap-2 px-2 py-1.5 rounded
              cursor-pointer outline-none
              text-red-600 hover:bg-red-50 focus:bg-red-50"
          >
            <LogOut className="w-4 h-4" />
            <span>Wyloguj się</span>
          </DropdownMenu.Item>

          {/* Strzałka wskazująca na trigger */}
          <DropdownMenu.Arrow className="fill-white" />
        </DropdownMenu.Content>
      </DropdownMenu.Portal>
    </DropdownMenu.Root>
  )
}

// components/Popover.tsx
import * as Popover from '@radix-ui/react-popover'
import { Settings, X } from 'lucide-react'

export function SettingsPopover() {
  return (
    <Popover.Root>
      <Popover.Trigger asChild>
        <button
          className="p-2 rounded-lg hover:bg-gray-100"
          aria-label="Ustawienia"
        >
          <Settings className="w-5 h-5" />
        </button>
      </Popover.Trigger>

      <Popover.Portal>
        <Popover.Content
          className="w-80 bg-white dark:bg-gray-900 rounded-lg shadow-xl
            border border-gray-200 dark:border-gray-800 p-4
            animate-in fade-in-0 zoom-in-95
            data-[side=bottom]:slide-in-from-top-2
            data-[side=left]:slide-in-from-right-2
            data-[side=right]:slide-in-from-left-2
            data-[side=top]:slide-in-from-bottom-2"
          sideOffset={8}
        >
          <div className="flex justify-between items-center mb-4">
            <h3 className="font-semibold">Ustawienia wyświetlania</h3>
            <Popover.Close asChild>
              <button className="p-1 rounded hover:bg-gray-100">
                <X className="w-4 h-4" />
              </button>
            </Popover.Close>
          </div>

          <div className="space-y-4">
            <div>
              <label className="block text-sm font-medium mb-1">
                Rozmiar tekstu
              </label>
              <select className="w-full px-3 py-2 border rounded-lg">
                <option>Mały</option>
                <option>Średni</option>
                <option>Duży</option>
              </select>
            </div>

            <div>
              <label className="block text-sm font-medium mb-1">
                Kontrast
              </label>
              <input
                type="range"
                min="0"
                max="100"
                className="w-full"
              />
            </div>

            <div className="flex items-center justify-between">
              <span className="text-sm">Tryb ciemny</span>
              <Switch />
            </div>
          </div>

          <Popover.Arrow className="fill-white" />
        </Popover.Content>
      </Popover.Portal>
    </Popover.Root>
  )
}

// components/Tooltip.tsx
import * as Tooltip from '@radix-ui/react-tooltip'

interface TooltipWrapperProps {
  content: string
  children: React.ReactNode
  side?: 'top' | 'right' | 'bottom' | 'left'
  delayDuration?: number
}

export function TooltipWrapper({
  content,
  children,
  side = 'top',
  delayDuration = 200,
}: TooltipWrapperProps) {
  return (
    <Tooltip.Provider delayDuration={delayDuration}>
      <Tooltip.Root>
        <Tooltip.Trigger asChild>
          {children}
        </Tooltip.Trigger>

        <Tooltip.Portal>
          <Tooltip.Content
            side={side}
            className="px-3 py-1.5 bg-gray-900 text-white text-sm rounded-lg
              animate-in fade-in-0 zoom-in-95
              data-[side=bottom]:slide-in-from-top-2
              data-[side=left]:slide-in-from-right-2
              data-[side=right]:slide-in-from-left-2
              data-[side=top]:slide-in-from-bottom-2"
            sideOffset={4}
          >
            {content}
            <Tooltip.Arrow className="fill-gray-900" />
          </Tooltip.Content>
        </Tooltip.Portal>
      </Tooltip.Root>
    </Tooltip.Provider>
  )
}

// Użycie
function Example() {
  return (
    <TooltipWrapper content="Kliknij, aby skopiować">
      <button className="p-2 rounded hover:bg-gray-100">
        <Copy className="w-5 h-5" />
      </button>
    </TooltipWrapper>
  )
}

// app/providers.tsx
import * as Tooltip from '@radix-ui/react-tooltip'

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <Tooltip.Provider delayDuration={200} skipDelayDuration={500}>
      {children}
    </Tooltip.Provider>
  )
}

// components/Tabs.tsx
import * as Tabs from '@radix-ui/react-tabs'

interface Tab {
  value: string
  label: string
  content: React.ReactNode
  disabled?: boolean
}

interface TabsProps {
  tabs: Tab[]
  defaultValue?: string
}

export function TabsComponent({ tabs, defaultValue }: TabsProps) {
  return (
    <Tabs.Root
      defaultValue={defaultValue || tabs[0]?.value}
      className="w-full"
    >
      <Tabs.List
        className="flex border-b border-gray-200"
        aria-label="Zarządzaj kontem"
      >
        {tabs.map((tab) => (
          <Tabs.Trigger
            key={tab.value}
            value={tab.value}
            disabled={tab.disabled}
            className="px-4 py-2 text-sm font-medium
              border-b-2 border-transparent
              text-gray-500 hover:text-gray-700
              data-[state=active]:border-blue-500
              data-[state=active]:text-blue-600
              disabled:opacity-50 disabled:cursor-not-allowed
              focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
          >
            {tab.label}
          </Tabs.Trigger>
        ))}
      </Tabs.List>

      {tabs.map((tab) => (
        <Tabs.Content
          key={tab.value}
          value={tab.value}
          className="pt-4 focus:outline-none"
        >
          {tab.content}
        </Tabs.Content>
      ))}
    </Tabs.Root>
  )
}

// Użycie
function AccountSettings() {
  const tabs = [
    {
      value: 'profile',
      label: 'Profil',
      content: <ProfileForm />,
    },
    {
      value: 'security',
      label: 'Bezpieczeństwo',
      content: <SecuritySettings />,
    },
    {
      value: 'notifications',
      label: 'Powiadomienia',
      content: <NotificationSettings />,
    },
    {
      value: 'billing',
      label: 'Płatności',
      content: <BillingInfo />,
      disabled: true, // Niedostępne
    },
  ]

  return <TabsComponent tabs={tabs} defaultValue="profile" />
}

<Tabs.Root
  defaultValue="tab1"
  orientation="vertical"
  className="flex gap-4"
>
  <Tabs.List className="flex flex-col w-48 border-r">
    <Tabs.Trigger value="tab1" className="px-4 py-2 text-left data-[state=active]:bg-gray-100">
      Tab 1
    </Tabs.Trigger>
    <Tabs.Trigger value="tab2" className="px-4 py-2 text-left data-[state=active]:bg-gray-100">
      Tab 2
    </Tabs.Trigger>
  </Tabs.List>

  <div className="flex-1">
    <Tabs.Content value="tab1">Content 1</Tabs.Content>
    <Tabs.Content value="tab2">Content 2</Tabs.Content>
  </div>
</Tabs.Root>

// components/Accordion.tsx
import * as Accordion from '@radix-ui/react-accordion'
import { ChevronDown } from 'lucide-react'

interface AccordionItem {
  value: string
  trigger: string
  content: React.ReactNode
}

interface AccordionProps {
  items: AccordionItem[]
  type?: 'single' | 'multiple'
  defaultValue?: string | string[]
}

export function AccordionComponent({
  items,
  type = 'single',
  defaultValue,
}: AccordionProps) {
  return (
    <Accordion.Root
      type={type}
      defaultValue={defaultValue}
      collapsible={type === 'single'}
      className="w-full"
    >
      {items.map((item) => (
        <Accordion.Item
          key={item.value}
          value={item.value}
          className="border-b border-gray-200"
        >
          <Accordion.Header>
            <Accordion.Trigger
              className="flex w-full items-center justify-between
                py-4 font-medium text-left
                hover:underline
                [&[data-state=open]>svg]:rotate-180"
            >
              {item.trigger}
              <ChevronDown
                className="w-5 h-5 text-gray-500 transition-transform duration-200"
              />
            </Accordion.Trigger>
          </Accordion.Header>

          <Accordion.Content
            className="overflow-hidden
              data-[state=closed]:animate-accordion-up
              data-[state=open]:animate-accordion-down"
          >
            <div className="pb-4 text-gray-600">
              {item.content}
            </div>
          </Accordion.Content>
        </Accordion.Item>
      ))}
    </Accordion.Root>
  )
}

// Tailwind config dla animacji
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      keyframes: {
        'accordion-down': {
          from: { height: '0' },
          to: { height: 'var(--radix-accordion-content-height)' },
        },
        'accordion-up': {
          from: { height: 'var(--radix-accordion-content-height)' },
          to: { height: '0' },
        },
      },
      animation: {
        'accordion-down': 'accordion-down 0.2s ease-out',
        'accordion-up': 'accordion-up 0.2s ease-out',
      },
    },
  },
}

// components/Select.tsx
import * as Select from '@radix-ui/react-select'
import { Check, ChevronDown, ChevronUp } from 'lucide-react'

interface SelectOption {
  value: string
  label: string
  disabled?: boolean
}

interface SelectGroup {
  label: string
  options: SelectOption[]
}

interface SelectProps {
  placeholder?: string
  value?: string
  onValueChange: (value: string) => void
  groups: SelectGroup[]
}

export function SelectComponent({
  placeholder = 'Wybierz...',
  value,
  onValueChange,
  groups,
}: SelectProps) {
  return (
    <Select.Root value={value} onValueChange={onValueChange}>
      <Select.Trigger
        className="flex items-center justify-between w-full px-3 py-2
          border border-gray-300 rounded-lg bg-white
          focus:outline-none focus:ring-2 focus:ring-blue-500
          data-[placeholder]:text-gray-400"
      >
        <Select.Value placeholder={placeholder} />
        <Select.Icon>
          <ChevronDown className="w-4 h-4 text-gray-500" />
        </Select.Icon>
      </Select.Trigger>

      <Select.Portal>
        <Select.Content
          className="overflow-hidden bg-white rounded-lg shadow-lg border
            animate-in fade-in-0 zoom-in-95"
          position="popper"
          sideOffset={4}
        >
          <Select.ScrollUpButton className="flex items-center justify-center h-6 bg-white">
            <ChevronUp className="w-4 h-4" />
          </Select.ScrollUpButton>

          <Select.Viewport className="p-1">
            {groups.map((group, groupIndex) => (
              <Select.Group key={group.label}>
                {groupIndex > 0 && (
                  <Select.Separator className="h-px bg-gray-200 my-1" />
                )}

                <Select.Label className="px-2 py-1.5 text-xs font-medium text-gray-500">
                  {group.label}
                </Select.Label>

                {group.options.map((option) => (
                  <Select.Item
                    key={option.value}
                    value={option.value}
                    disabled={option.disabled}
                    className="relative flex items-center px-8 py-2 rounded
                      cursor-pointer outline-none
                      hover:bg-gray-100 focus:bg-gray-100
                      data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed"
                  >
                    <Select.ItemIndicator className="absolute left-2">
                      <Check className="w-4 h-4" />
                    </Select.ItemIndicator>
                    <Select.ItemText>{option.label}</Select.ItemText>
                  </Select.Item>
                ))}
              </Select.Group>
            ))}
          </Select.Viewport>

          <Select.ScrollDownButton className="flex items-center justify-center h-6 bg-white">
            <ChevronDown className="w-4 h-4" />
          </Select.ScrollDownButton>
        </Select.Content>
      </Select.Portal>
    </Select.Root>
  )
}

// Użycie
function CountrySelect() {
  const [country, setCountry] = useState('')

  const groups = [
    {
      label: 'Europa',
      options: [
        { value: 'pl', label: 'Polska' },
        { value: 'de', label: 'Niemcy' },
        { value: 'fr', label: 'Francja' },
      ],
    },
    {
      label: 'Ameryka',
      options: [
        { value: 'us', label: 'Stany Zjednoczone' },
        { value: 'ca', label: 'Kanada' },
      ],
    },
  ]

  return (
    <SelectComponent
      placeholder="Wybierz kraj"
      value={country}
      onValueChange={setCountry}
      groups={groups}
    />
  )
}

// components/Switch.tsx
import * as Switch from '@radix-ui/react-switch'

interface SwitchProps {
  checked: boolean
  onCheckedChange: (checked: boolean) => void
  label?: string
  disabled?: boolean
}

export function SwitchComponent({
  checked,
  onCheckedChange,
  label,
  disabled = false,
}: SwitchProps) {
  return (
    <div className="flex items-center gap-3">
      <Switch.Root
        checked={checked}
        onCheckedChange={onCheckedChange}
        disabled={disabled}
        className="w-11 h-6 bg-gray-200 rounded-full
          relative cursor-pointer
          data-[state=checked]:bg-blue-500
          disabled:opacity-50 disabled:cursor-not-allowed
          focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
      >
        <Switch.Thumb
          className="block w-5 h-5 bg-white rounded-full shadow
            transition-transform duration-200
            translate-x-0.5 data-[state=checked]:translate-x-[22px]"
        />
      </Switch.Root>

      {label && (
        <label className="text-sm font-medium">
          {label}
        </label>
      )}
    </div>
  )
}

// Użycie
function NotificationSettings() {
  const [emailNotifications, setEmailNotifications] = useState(true)
  const [pushNotifications, setPushNotifications] = useState(false)

  return (
    <div className="space-y-4">
      <SwitchComponent
        checked={emailNotifications}
        onCheckedChange={setEmailNotifications}
        label="Powiadomienia email"
      />

      <SwitchComponent
        checked={pushNotifications}
        onCheckedChange={setPushNotifications}
        label="Powiadomienia push"
      />
    </div>
  )
}

// components/Checkbox.tsx
import * as Checkbox from '@radix-ui/react-checkbox'
import { Check, Minus } from 'lucide-react'

interface CheckboxProps {
  checked: boolean | 'indeterminate'
  onCheckedChange: (checked: boolean | 'indeterminate') => void
  label: string
  description?: string
}

export function CheckboxComponent({
  checked,
  onCheckedChange,
  label,
  description,
}: CheckboxProps) {
  return (
    <div className="flex items-start gap-3">
      <Checkbox.Root
        checked={checked}
        onCheckedChange={onCheckedChange}
        className="w-5 h-5 border-2 border-gray-300 rounded
          flex items-center justify-center
          data-[state=checked]:bg-blue-500 data-[state=checked]:border-blue-500
          data-[state=indeterminate]:bg-blue-500 data-[state=indeterminate]:border-blue-500
          focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
      >
        <Checkbox.Indicator>
          {checked === 'indeterminate' ? (
            <Minus className="w-3 h-3 text-white" />
          ) : (
            <Check className="w-3 h-3 text-white" />
          )}
        </Checkbox.Indicator>
      </Checkbox.Root>

      <div>
        <label className="text-sm font-medium cursor-pointer">
          {label}
        </label>
        {description && (
          <p className="text-sm text-gray-500">{description}</p>
        )}
      </div>
    </div>
  )
}

// Lista z "Select All"
function CheckboxList() {
  const [items, setItems] = useState([
    { id: '1', label: 'Element 1', checked: false },
    { id: '2', label: 'Element 2', checked: true },
    { id: '3', label: 'Element 3', checked: false },
  ])

  const allChecked = items.every(item => item.checked)
  const someChecked = items.some(item => item.checked)
  const selectAllState = allChecked ? true : someChecked ? 'indeterminate' : false

  const handleSelectAll = (checked: boolean | 'indeterminate') => {
    if (checked === 'indeterminate') return
    setItems(items.map(item => ({ ...item, checked })))
  }

  const handleItemChange = (id: string, checked: boolean | 'indeterminate') => {
    if (checked === 'indeterminate') return
    setItems(items.map(item =>
      item.id === id ? { ...item, checked } : item
    ))
  }

  return (
    <div className="space-y-3">
      <CheckboxComponent
        checked={selectAllState}
        onCheckedChange={handleSelectAll}
        label="Zaznacz wszystkie"
      />

      <div className="ml-6 space-y-2">
        {items.map(item => (
          <CheckboxComponent
            key={item.id}
            checked={item.checked}
            onCheckedChange={(checked) => handleItemChange(item.id, checked)}
            label={item.label}
          />
        ))}
      </div>
    </div>
  )
}

// components/Slider.tsx
import * as Slider from '@radix-ui/react-slider'

interface SliderProps {
  value: number[]
  onValueChange: (value: number[]) => void
  min?: number
  max?: number
  step?: number
  label?: string
}

export function SliderComponent({
  value,
  onValueChange,
  min = 0,
  max = 100,
  step = 1,
  label,
}: SliderProps) {
  return (
    <div className="w-full">
      {label && (
        <div className="flex justify-between mb-2">
          <span className="text-sm font-medium">{label}</span>
          <span className="text-sm text-gray-500">{value.join(' - ')}</span>
        </div>
      )}

      <Slider.Root
        value={value}
        onValueChange={onValueChange}
        min={min}
        max={max}
        step={step}
        className="relative flex items-center w-full h-5 select-none"
      >
        <Slider.Track className="relative h-2 w-full grow rounded-full bg-gray-200">
          <Slider.Range className="absolute h-full rounded-full bg-blue-500" />
        </Slider.Track>

        {value.map((_, index) => (
          <Slider.Thumb
            key={index}
            className="block w-5 h-5 bg-white border-2 border-blue-500 rounded-full
              shadow focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
              hover:bg-blue-50"
          />
        ))}
      </Slider.Root>
    </div>
  )
}

// Użycie - pojedynczy suwak
function VolumeControl() {
  const [volume, setVolume] = useState([50])

  return (
    <SliderComponent
      value={volume}
      onValueChange={setVolume}
      label="Głośność"
    />
  )
}

// Użycie - zakres
function PriceRange() {
  const [range, setRange] = useState([20, 80])

  return (
    <SliderComponent
      value={range}
      onValueChange={setRange}
      min={0}
      max={1000}
      step={10}
      label="Zakres cen (PLN)"
    />
  )
}