import { LButton } from "@/components/laska/Button";

<LButton variant="heart">Líbí</LButton>
<LButton variant="primary">Pokračovat</LButton>
<LButton variant="outline">Zrušit</LButton>
<LButton variant="ghost">Skip</LButton>
<LButton variant="dark">Premium</LButton>
<LButton size="block">Plná šířka</LButton>

import { SocialButton } from "@/components/laska/Primitives";

<SocialButton provider="google">Pokračovat s Googlem</SocialButton>
<SocialButton provider="apple">Pokračovat s Apple</SocialButton>
<SocialButton provider="facebook">Pokračovat s Facebookem</SocialButton>

import { PaymentButton } from "@/components/laska/Primitives";

<PaymentButton provider="apple-pay" />
<PaymentButton provider="google-pay" />

import { TextField } from "@/components/laska/Inputs";

<TextField
  label="Jméno"
  placeholder="Eliška"
  helper="Jak ti říkají blízcí."
  maxLength={40}
  counter
/>

import { TextArea } from "@/components/laska/Inputs";

<TextArea
  label="O mně"
  placeholder="Pár vět o tobě…"
  maxLength={240}
/>

import { PasswordField } from "@/components/laska/Primitives";

<PasswordField label="Heslo" placeholder="Min. 8 znaků" />

import { OTPField } from "@/components/laska/Inputs";

<OTPField length={6} />

import { SelectField } from "@/components/laska/Primitives";

<SelectField
  label="Město"
  options={[
    { value: "praha", label: "Praha" },
    { value: "brno", label: "Brno" },
  ]}
/>

import { RadioGroup } from "@/components/laska/Primitives";
import { useState } from "react";

const [v, setV] = useState("ona");
<RadioGroup
  value={v}
  onChange={setV}
  options={[
    { value: "on", label: "On" },
    { value: "ona", label: "Ona" },
    { value: "jine", label: "Jiné" },
  ]}
/>

import { ToggleSwitch } from "@/components/laska/Inputs";

<ToggleSwitch
  label="Anonymní režim"
  description="Skryje fotografii do první rezonance."
  checked
/>

import { SegmentedControl } from "@/components/laska/Inputs";
import { useState } from "react";

const [tone, setTone] = useState<"klid" | "vasen" | "humor">("klid");

<SegmentedControl
  value={tone}
  onChange={setTone}
  options={[
    { value: "klid", label: "Klid" },
    { value: "vasen", label: "Vášeň" },
    { value: "humor", label: "Humor" },
  ]}
/>

import { FileUpload } from "@/components/laska/Primitives";

<FileUpload hint="JPG nebo PNG, max 5 MB" />

import { Chip } from "@/components/laska/Inputs";

<Chip active>Hudba</Chip>
<Chip>Knihy</Chip>

import { TopAppBar } from "@/components/laska/Navigation";

<TopAppBar title="Profil" back variant="centered" />

import { BottomNav } from "@/components/laska/Navigation";

<BottomNav
  active="chats"
  badges={{ matches: 3, chats: 12, profile: true }}
/>

import { BackButton } from "@/components/laska/Primitives";

<BackButton label="Zpět" />

import { ProgressStepper } from "@/components/laska/Navigation";

<ProgressStepper step={3} total={5} />

import { Avatar } from "@/components/laska/Primitives";

<Avatar initials="E" />
<Avatar initials="K" />
<Avatar state="placeholder" />

import { VerifiedBadge } from "@/components/laska/Primitives";

<VerifiedBadge level="email" />
<VerifiedBadge level="photo" />
<VerifiedBadge level="id" />

import { MatchListItem } from "@/components/laska/Extended";

<MatchListItem name="Eliška" meta="92% rezonance" initial="E" />
<MatchListItem name="Markéta" meta="98% · doporučená AI" initial="M" state="highlighted" />
<MatchListItem name="Klára" meta="Nový like" initial="K" state="newLike" />

import { ProgressBar } from "@/components/laska/Extended";

<ProgressBar value={87} label="Síla rezonance" tone="heart" />

import { MatchBoostCTA } from "@/components/laska/Extended";

<MatchBoostCTA price="49 Kč" hint="Boost na 24 h" />

import { ChatBubble } from "@/components/laska/Chat";

<ChatBubble side="in" time="10:24">Ahoj, jak se máš?</ChatBubble>
<ChatBubble side="out" time="10:25">Dobře, díky.</ChatBubble>

import { ChatComposer } from "@/components/laska/Chat";

<ChatComposer />

import { AINudge } from "@/components/laska/Chat";

<AINudge text="Zkus se zeptat na to, co dnes Klára zažila." />

import { ConfirmationModal } from "@/components/laska/Feedback";

<ConfirmationModal
  title="Zrušit předplatné?"
  description="Funkce zůstanou aktivní do konce zúčtovacího období."
  cancel="Ne, ponechat"
  confirm="Ano, zrušit"
/>

import { Toast } from "@/components/laska/Feedback";

<Toast title="Zpráva odeslána" description="Eliška vidí, že jste online." />

import { InlineAlert } from "@/components/laska/Feedback";

<InlineAlert tone="info" title="Postupné odhalování">
  Sdílíte podle svého tempa.
</InlineAlert>

import { EmptyState } from "@/components/laska/Feedback";
import { LButton } from "@/components/laska/Button";

<EmptyState
  title="Zatím žádné konverzace"
  description="Začni s první anonymní rezonancí."
  action={<LButton variant="heart">Najít rezonanci</LButton>}
/>

import { AIJourneyCard } from "@/components/laska/Extended";

<AIJourneyCard
  step={2}
  total={5}
  title="Hodnoty a rytmus"
  description="AI hledá společné body ve vašem stylu vyjadřování."
/>

import { AIResultCard } from "@/components/laska/Extended";

<AIResultCard
  title="Vaše rezonance s Eliškou"
  insight="Píšete podobně dlouhé věty a oba upřednostňujete otázky."
  confidence={87}
/>

import { PlanCardSelectable } from "@/components/laska/Extended";

<PlanCardSelectable
  name="Resonance"
  price="299 Kč / měsíc"
  features={["Neomezené rezonance", "AI insight", "Boost 1× týdně"]}
  selected
/>

import { CreditPackageCard } from "@/components/laska/Extended";

<CreditPackageCard credits={10} price="149 Kč" bonus="+1 zdarma" highlighted />

import { PaymentHistoryRow } from "@/components/laska/Extended";

<PaymentHistoryRow
  date="12. 4. 2026"
  description="Resonance · měsíční předplatné"
  amount="299 Kč"
  status="paid"
/>

import { FAQAccordion } from "@/components/laska/Support";

<FAQAccordion items={[
  { q: "Jak funguje postupné odhalování?", a: "Sdílíte podle svého tempa." },
  { q: "Můžu být anonymní?", a: "Ano, fotky odemykáte ručně." },
]} />

import { AppSplash } from "@/components/laska/Primitives";

<AppSplash tagline="Pomalu, ale doopravdy." />