PXLKIT UI KIT

<PixelButton tone="green" iconLeft={<PxlKitIcon icon={Trophy} size={16} />}>
  Primary Action
</PixelButton>
<PixelButton tone="cyan" variant="ghost">
  Ghost Button
</PixelButton>
<PixelButton tone="red" loading>
  Processing...
</PixelButton>

<PxlKitButton label="Edit" icon={<PxlKitIcon icon={Edit} size={16} />} tone="cyan" />
<PxlKitButton label="Copy" icon={<PxlKitIcon icon={Copy} size={16} />} tone="green" />

<PixelSplitButton
  label="Deploy"
  tone="purple"
  options={[
    { value: 'preview', label: 'Preview' },
    { value: 'production', label: 'Production' },
  ]}
  onSelect={(v) => console.log(v)}
/>

<PixelInput
  label="Search"
  icon={<PxlKitIcon icon={Search} size={16} />}
  placeholder="Find components..."
  tone="cyan"
/>
<PixelInput label="Email" error="Invalid email address" />

<PixelPasswordInput label="Password" placeholder="Enter your password" />

<PixelTextarea label="Bio" placeholder="Tell us about yourself..." />

<PixelSelect
  label="Icon Pack"
  value={pack}
  onChange={setPack}
  options={[
    { value: 'ui', label: 'UI' },
    { value: 'gamification', label: 'Gamification' },
    { value: 'social', label: 'Social' },
  ]}
/>

<PixelCheckbox
  label="Enable animations"
  checked={enabled}
  onChange={setEnabled}
  tone="green"
/>

<PixelRadioGroup
  label="Framework"
  value={framework}
  onChange={setFramework}
  options={[
    { value: 'react', label: 'React' },
    { value: 'vue', label: 'Vue' },
    { value: 'svelte', label: 'Svelte' },
  ]}
/>

<PixelSwitch label="Auto refresh" checked={on} onChange={setOn} />

<PixelSlider label="Volume" value={vol} onChange={setVol} min={0} max={100} />
<PixelSlider label="Opacity" value={opacity} onChange={setOpacity} tone="gold" />

<PixelSegmented
  label="Density"
  value={density}
  onChange={setDensity}
  options={[
    { value: 'compact', label: 'Compact' },
    { value: 'comfortable', label: 'Comfortable' },
  ]}
/>

<PixelCard
  title="Gamification"
  icon={<PxlKitIcon icon={Trophy} size={16} />}
  footer={<PixelButton tone="gold" size="sm">Use Pack</PixelButton>}
>
  RPG icons, rewards, and game UI elements.
</PixelCard>

<PixelStatCard label="Downloads" value="12.4k" tone="green" trend="+15% this week" />

<PixelTable
  columns={[
    { key: 'name', header: 'Component' },
    { key: 'category', header: 'Category' },
    { key: 'status', header: 'Status' },
  ]}
  data={[
    { name: 'PixelButton', category: 'Actions', status: <PixelBadge tone="green">Stable</PixelBadge> },
    { name: 'PixelTable', category: 'Data', status: <PixelBadge tone="gold">New</PixelBadge> },
  ]}
/>

<PixelAvatar name="Joangel De La Rosa" tone="green" />
<PixelAvatar name="AI Bot" tone="purple" size="lg" />

<PixelBadge tone="green">Stable</PixelBadge>
<PixelBadge tone="gold">Beta</PixelBadge>
<PixelBadge tone="red">Deprecated</PixelBadge>

<PixelChip label="react" tone="cyan" />
<PixelChip label="removable" tone="gold" onRemove={() => {}} />

<PixelTextLink href="/docs" tone="cyan">Documentation</PixelTextLink>
<PixelTextLink tone="gold" onClick={() => alert('clicked')}>Action Link</PixelTextLink>

<PixelCodeInline tone="cyan">useState</PixelCodeInline>
<PixelCodeInline tone="purple">PxlKitIcon</PixelCodeInline>

<PixelKbd>Ctrl</PixelKbd> + <PixelKbd>K</PixelKbd>
<PixelKbd>⌘</PixelKbd> + <PixelKbd>Shift</PixelKbd> + <PixelKbd>P</PixelKbd>

<PixelColorSwatch name="Green" cssVar="--retro-green" />
<PixelColorSwatch name="Cyan" cssVar="--retro-cyan" />

<PixelAlert
  tone="green"
  icon={<PxlKitIcon icon={CheckCircle} size={16} />}
  title="Build Success"
  message="Package compiled successfully."
  action={<PixelButton tone="green" size="sm">View Logs</PixelButton>}
/>

<PixelProgress value={72} tone="green" label="Upload Progress" />

<PixelSkeleton width="200px" height="1rem" />
<PixelSkeleton width="40px" height="40px" rounded />

<PixelEmptyState
  title="No results"
  description="Try adjusting your search or filters."
  icon={<PxlKitIcon icon={Search} size={20} />}
  action={<PixelButton tone="green">Reset Filters</PixelButton>}
/>

import { useToast } from '@/components/ToastProvider';
import { CheckCircle, WarningTriangle } from '@pxlkit/feedback';
import { FireSword } from '@pxlkit/gamification';
function SaveButton() {
  const { toast, success, warning } = useToast();
  return (
    <>
      <PixelButton
        onClick={() => success('SAVED', 'Changes synced to server', CheckCircle)}
      >
        Save
      </PixelButton>
      <PixelButton
        onClick={() =>
          toast({
            tone: 'warning',
            title: 'LOW HEALTH',
            message: 'Use a potion now',
            position: 'bottom-right',
            duration: 3500,
            animatedIcon: FireSword,
          })
        }
      >
        Show Warning Toast
      </PixelButton>
    </>
  );
}

<PixelTabs items={[
  { id: 'overview', label: 'Overview', content: '...' },
  { id: 'api', label: 'API', content: '...' },
  { id: 'tokens', label: 'Tokens', content: '...' },
]} />

<PixelAccordion items={[
  { id: '1', title: 'How to use icons', content: '...' },
  { id: '2', title: 'Custom themes', content: '...' },
]} />

<PixelCollapsible label="Show details">
  <p>Hidden content revealed on toggle.</p>
</PixelCollapsible>
<PixelCollapsible label="Open by default" defaultOpen tone="green">
  <p>Visible from the start.</p>
</PixelCollapsible>

<PixelBreadcrumb items={[
  { label: 'Home', href: '/' },
  { label: 'Docs', href: '/docs' },
  { label: 'UI Kit', active: true },
]} />

<PixelPagination page={page} total={5} onChange={setPage} />

const [open, setOpen] = useState(false);
<PixelButton onClick={() => setOpen(true)}>Open Modal</PixelButton>
<PixelModal open={open} title="Confirm Action" onClose={() => setOpen(false)}>
  <p>Are you sure you want to proceed?</p>
  <PixelButton tone="green" onClick={() => setOpen(false)}>Confirm</PixelButton>
</PixelModal>

<PixelTooltip content="Edit this item" position="top">
  <PxlKitButton label="Edit" icon={<PxlKitIcon icon={Edit} size={16} />} />
</PixelTooltip>

<PixelDropdown
  label="Actions"
  items={[
    { value: 'copy', label: 'Copy snippet' },
    { value: 'preview', label: 'Open preview' },
    { value: 'delete', label: 'Delete item' },
  ]}
  onSelect={(v) => console.log(v)}
/>

<PixelSection title="Actions" subtitle="Interactive button components.">
  {children}
</PixelSection>

<PixelDivider />
<PixelDivider label="Section" tone="green" />

<PixelBareButton onClick={() => alert('click')} className="px-3 py-1 bg-retro-green/20 rounded">
  Custom Button
</PixelBareButton>

<PixelBareInput type="text" placeholder="Unstyled input..." className="border px-2 py-1" />

<PixelBareTextarea rows={3} placeholder="Unstyled textarea..." className="border px-2 py-1 w-full" />

<PixelParallaxGroup className="h-[400px]">
  {/* Slow background layer */}
  <PixelParallaxLayer speed={0.3} className="absolute inset-0">
    <img src="/bg-stars.png" className="w-full h-full object-cover" />
  </PixelParallaxLayer>
  {/* Foreground content */}
  <PixelParallaxLayer speed={-0.1}>
    <PixelCard title="Floating Card">I move slightly opposite to scroll</PixelCard>
  </PixelParallaxLayer>
</PixelParallaxGroup>

<PixelParallaxGroup as="section" className="h-[600px] bg-retro-bg">
  <PixelParallaxLayer speed={0.2}>
    {/* Background */}
  </PixelParallaxLayer>
  <PixelMouseParallax strength={15}>
    {/* Foreground that follows cursor */}
  </PixelMouseParallax>
</PixelParallaxGroup>

{/* Follows cursor */}
<PixelMouseParallax strength={15}>
  <PxlKitIcon icon={Star} size={32} colorful />
</PixelMouseParallax>
{/* Moves away from cursor (depth feel) */}
<PixelMouseParallax strength={25} invert>
  <PixelBadge tone="cyan">Background layer</PixelBadge>
</PixelMouseParallax>