Hooklar

'use client';

import { useToggle } from '@akhatmirzo/hooks';
import { Button, Switch } from '@akhatmirzo/ui';

export default function HooksToggle() {
  const [notify, toggleNotify, setNotify] = useToggle(true);

  return (
    <div className="flex flex-col items-center gap-4">
      <Switch
        checked={notify}
        onCheckedChange={setNotify}
        label="SMS xabarnomalar"
        description={notify ? 'Yoqilgan' : "O'chirilgan"}
      />
      <div className="flex flex-wrap gap-2">
        <Button variant="outline" onClick={toggleNotify}>
          Almashtirish
        </Button>
        <Button variant="ghost" onClick={() => setNotify(false)}>
          O'chirish
        </Button>
      </div>
    </div>
  );
}

'use client';

import { useControllableState } from '@akhatmirzo/hooks';
import { Button } from '@akhatmirzo/ui';
import { useState } from 'react';

interface StepperProps {
  value?: number;
  defaultValue?: number;
  onValueChange?: (value: number) => void;
}

function Stepper({ value, defaultValue = 0, onValueChange }: StepperProps) {
  const [count, setCount] = useControllableState({ value, defaultValue, onChange: onValueChange });
  return (
    <div className="flex items-center gap-2">
      <Button size="sm" variant="outline" onClick={() => setCount((n) => n - 1)}>
        −
      </Button>
      <span className="min-w-8 text-center font-semibold text-text tabular-nums">{count}</span>
      <Button size="sm" variant="outline" onClick={() => setCount((n) => n + 1)}>
        +
      </Button>
    </div>
  );
}

export default function HooksControllableState() {
  const [value, setValue] = useState(10);

  return (
    <div className="grid w-full max-w-md gap-6 sm:grid-cols-2">
      <div className="flex flex-col gap-2">
        <p className="text-xs font-medium text-text-muted">Boshqarilmaydigan (defaultValue=3)</p>
        <Stepper defaultValue={3} />
      </div>
      <div className="flex flex-col gap-2">
        <p className="text-xs font-medium text-text-muted">Boshqariladigan (0…20)</p>
        <Stepper value={value} onValueChange={(v) => setValue(Math.min(20, Math.max(0, v)))} />
      </div>
    </div>
  );
}

'use client';

import { useDebounce } from '@akhatmirzo/hooks';
import { Badge, Field, Input } from '@akhatmirzo/ui';
import { useState } from 'react';

const CITIES = [
  'Toshkent',
  'Samarqand',
  'Buxoro',
  'Xiva',
  'Namangan',
  'Andijon',
  'Nukus',
  'Termiz',
];

export default function HooksDebounce() {
  const [query, setQuery] = useState('');
  const debounced = useDebounce(query, 400);
  const results = CITIES.filter((c) => c.toLowerCase().includes(debounced.trim().toLowerCase()));

  return (
    <div className="flex w-full max-w-sm flex-col gap-3">
      <Field label="Shahar qidirish" description="Natija yozishni to'xtatganingizdan 400 ms keyin">
        <Input value={query} onChange={(e) => setQuery(e.target.value)} clearable />
      </Field>
      <Badge color={query === debounced ? 'success' : 'warning'} dot className="self-start">
        {query === debounced ? 'Yangilangan' : 'Kutilmoqda…'}
      </Badge>
      <div className="flex flex-wrap gap-2">
        {results.map((city) => (
          <Badge key={city} variant="outline">
            {city}
          </Badge>
        ))}
        {results.length === 0 && (
          <span className="text-sm text-text-muted">Hech narsa topilmadi</span>
        )}
      </div>
    </div>
  );
}

'use client';

import { useDebouncedCallback } from '@akhatmirzo/hooks';
import { Button, Field, Textarea } from '@akhatmirzo/ui';
import { useState } from 'react';

export default function HooksDebouncedCallback() {
  const [text, setText] = useState('');
  const [saved, setSaved] = useState<string[]>([]);

  const save = useDebouncedCallback((value: string) => {
    setSaved((list) => [`${value.length} belgi saqlandi`, ...list].slice(0, 3));
  }, 800);

  return (
    <div className="flex w-full max-w-sm flex-col gap-3">
      <Field label="Izoh" description="Avtomatik saqlash: yozishni to'xtatgach 800 ms o'tib">
        <Textarea
          value={text}
          onChange={(e) => {
            setText(e.target.value);
            save(e.target.value);
          }}
          minRows={3}
        />
      </Field>
      <Button size="sm" variant="outline" className="self-start" onClick={save.flush}>
        Hozir saqlash
      </Button>
      <ul className="text-sm text-text-muted">
        {saved.map((line, i) => (
          <li key={i}>{line}</li>
        ))}
      </ul>
    </div>
  );
}

'use client';

import { useLocalStorage } from '@akhatmirzo/hooks';
import { Button } from '@akhatmirzo/ui';

function Mirror() {
  const [count] = useLocalStorage('docs-demo:counter', 0);
  return (
    <p className="text-sm text-text-muted">
      Boshqa komponent ko'rayotgan qiymat: <strong className="text-text">{count}</strong>
    </p>
  );
}

export default function HooksLocalStorage() {
  const [count, setCount, remove] = useLocalStorage('docs-demo:counter', 0);

  return (
    <div className="flex flex-col items-center gap-3">
      <div className="flex items-center gap-2">
        <Button variant="outline" onClick={() => setCount((n) => n - 1)}>
          −
        </Button>
        <span className="min-w-12 text-center text-2xl font-semibold text-text tabular-nums">
          {count}
        </span>
        <Button variant="outline" onClick={() => setCount((n) => n + 1)}>
          +
        </Button>
        <Button variant="ghost" onClick={remove}>
          O'chirish
        </Button>
      </div>
      <Mirror />
      <p className="text-xs text-text-faint">
        Sahifani boshqa tabda oching — qiymat sinxron o'zgaradi
      </p>
    </div>
  );
}

'use client';

import { useMediaQuery } from '@akhatmirzo/hooks';
import { Badge } from '@akhatmirzo/ui';

export default function HooksMediaQuery() {
  const queries = [
    { label: '≥ 640px', on: useMediaQuery('(min-width: 640px)') },
    { label: '≥ 1024px', on: useMediaQuery('(min-width: 1024px)') },
    { label: "Tizim: qorong'i mavzu", on: useMediaQuery('(prefers-color-scheme: dark)') },
    { label: 'Kam animatsiya', on: useMediaQuery('(prefers-reduced-motion: reduce)') },
    { label: 'Sichqoncha (hover)', on: useMediaQuery('(hover: hover)') },
  ];

  return (
    <div className="flex flex-wrap justify-center gap-2">
      {queries.map(({ label, on }) => (
        <Badge key={label} color={on ? 'success' : 'neutral'} variant={on ? 'soft' : 'outline'} dot>
          {label}
        </Badge>
      ))}
    </div>
  );
}

'use client';

import { useClickOutside, useHotkeys, useToggle } from '@akhatmirzo/hooks';
import { Button } from '@akhatmirzo/ui';
import { useRef } from 'react';

export default function HooksClickOutside() {
  const [open, toggle, setOpen] = useToggle(false);
  const triggerRef = useRef<HTMLButtonElement>(null);
  const panelRef = useRef<HTMLDivElement>(null);

  useClickOutside([triggerRef, panelRef], () => setOpen(false), open);
  useHotkeys('esc', () => setOpen(false), { enabled: open });

  return (
    <div className="relative flex flex-col items-center gap-2">
      <Button ref={triggerRef} variant="outline" onClick={toggle} aria-expanded={open}>
        Filtrlar
      </Button>
      {open && (
        <div
          ref={panelRef}
          className="w-64 rounded-xl border border-border bg-surface-raised p-4 text-sm text-text shadow-lg"
        >
          Panel tashqarisiga bosing yoki <kbd className="font-mono">Esc</kbd> ni bosing — yopiladi.
        </div>
      )}
    </div>
  );
}

'use client';

import { useCopyToClipboard } from '@akhatmirzo/hooks';
import { Button } from '@akhatmirzo/ui';
import { Check, Copy } from 'lucide-react';

export default function HooksCopy() {
  const { copied, copy } = useCopyToClipboard();
  const command = 'pnpm add @akhatmirzo/hooks';

  return (
    <div className="flex flex-wrap items-center gap-3">
      <code className="rounded-lg border border-border bg-surface-muted px-3 py-2 font-mono text-sm text-text">
        {command}
      </code>
      <Button
        variant={copied ? 'soft' : 'outline'}
        leftIcon={copied ? <Check /> : <Copy />}
        onClick={() => void copy(command)}
      >
        {copied ? 'Nusxalandi' : 'Nusxa olish'}
      </Button>
    </div>
  );
}

'use client';

import { useIntersection } from '@akhatmirzo/hooks';
import { Spinner } from '@akhatmirzo/ui';
import { useEffect, useState } from 'react';

const MAX = 60;

export default function HooksIntersection() {
  const [count, setCount] = useState(12);
  const done = count >= MAX;
  const [sentinelRef, entry] = useIntersection<HTMLDivElement>({
    rootMargin: '40px',
    enabled: !done,
  });
  const visible = entry?.isIntersecting ?? false;

  useEffect(() => {
    if (!visible || done) return;
    // Haqiqiy ilovada — keyingi sahifani serverdan yuklash
    const timer = setTimeout(() => setCount((n) => Math.min(MAX, n + 12)), 500);
    return () => clearTimeout(timer);
  }, [visible, done, count]);

  return (
    <div className="h-64 w-full max-w-sm overflow-auto rounded-xl border border-border bg-surface">
      <ul className="divide-y divide-border text-sm text-text">
        {Array.from({ length: count }, (_, i) => (
          <li key={i} className="px-4 py-2">
            Buyurtma #{1000 + i}
          </li>
        ))}
      </ul>
      <div
        ref={sentinelRef}
        className="flex items-center justify-center gap-2 p-3 text-sm text-text-muted"
      >
        {done ? (
          'Hammasi yuklandi'
        ) : (
          <>
            <Spinner size="sm" /> Yuklanmoqda…
          </>
        )}
      </div>
    </div>
  );
}

'use client';

import { useEventListener } from '@akhatmirzo/hooks';
import { Badge, Kbd } from '@akhatmirzo/ui';
import { useState } from 'react';

export default function HooksEventListener() {
  const [width, setWidth] = useState<number | null>(null);
  const [lastKey, setLastKey] = useState<string | null>(null);

  // Qisqa shakl — window uchun, SSR-xavfsiz
  useEventListener('resize', () => setWidth(window.innerWidth));
  useEventListener('keydown', (event) => setLastKey(event.key));

  return (
    <div className="flex flex-col items-center gap-3 text-sm text-text">
      <p className="text-text-muted">Oyna o'lchamini o'zgartiring yoki istalgan tugmani bosing</p>
      <div className="flex flex-wrap items-center justify-center gap-2">
        <Badge variant="outline">Kenglik: {width === null ? '—' : `${width}px`}</Badge>
        <span className="flex items-center gap-1">
          Oxirgi tugma: {lastKey ? <Kbd>{lastKey === ' ' ? 'Space' : lastKey}</Kbd> : '—'}
        </span>
      </div>
    </div>
  );
}

'use client';

import { useResizeObserver } from '@akhatmirzo/hooks';
import { Badge } from '@akhatmirzo/ui';
import { useRef } from 'react';

export default function HooksResizeObserver() {
  const ref = useRef<HTMLDivElement>(null);
  const size = useResizeObserver(ref, { box: 'border-box' });
  const compact = size !== null && size.width < 240;

  return (
    <div
      ref={ref}
      className="flex h-40 w-72 min-w-40 max-w-full resize flex-col items-center justify-center gap-2 overflow-auto rounded-xl border border-border bg-surface p-4 text-sm text-text"
    >
      <Badge color={compact ? 'warning' : 'success'} dot>
        {compact ? 'Ixcham' : 'Keng'}
      </Badge>
      <span className="font-mono text-text-muted">
        {size ? `${Math.round(size.width)} × ${Math.round(size.height)}` : '…'}
      </span>
      <span className="text-xs text-text-muted">O'ng pastki burchakdan torting</span>
    </div>
  );
}

'use client';

import { useScrollLock, useToggle } from '@akhatmirzo/hooks';
import { Badge, Button } from '@akhatmirzo/ui';

export default function HooksScrollLock() {
  const [locked, toggle] = useToggle(false);
  useScrollLock(locked);

  return (
    <div className="flex flex-col items-center gap-3">
      <Button variant={locked ? 'primary' : 'outline'} onClick={toggle} aria-pressed={locked}>
        {locked ? 'Scroll qulfini ochish' : "Sahifa scroll'ini qulflash"}
      </Button>
      <Badge color={locked ? 'warning' : 'neutral'} dot>
        {locked ? "Sahifa qulflangan — g'ildirak bilan aylantirib ko'ring" : 'Sahifa erkin'}
      </Badge>
    </div>
  );
}

'use client';

import { useFocusTrap, useHotkeys, useToggle } from '@akhatmirzo/hooks';
import { Button, Field, Input } from '@akhatmirzo/ui';
import { useRef } from 'react';

export default function HooksFocusTrap() {
  const [open, toggle, setOpen] = useToggle(false);
  const panelRef = useRef<HTMLDivElement>(null);
  const inputRef = useRef<HTMLInputElement>(null);

  useFocusTrap(panelRef, open, { initialFocus: inputRef });
  useHotkeys('esc', () => setOpen(false), { enabled: open, enableOnInputs: true });

  return (
    <div className="flex w-full max-w-sm flex-col items-center gap-3">
      <Button variant="outline" onClick={toggle} aria-expanded={open}>
        {open ? 'Yopish' : "Manzil qo'shish"}
      </Button>
      {open && (
        <div
          ref={panelRef}
          className="flex w-full flex-col gap-3 rounded-xl border border-border bg-surface-raised p-4 shadow-lg"
        >
          <Field label="Shahar">
            <Input ref={inputRef} placeholder="Toshkent" />
          </Field>
          <Field label="Ko'cha">
            <Input placeholder="Amir Temur ko'chasi, 15" />
          </Field>
          <div className="flex justify-end gap-2">
            <Button variant="ghost" onClick={() => setOpen(false)}>
              Bekor qilish
            </Button>
            <Button variant="primary" onClick={() => setOpen(false)}>
              Saqlash
            </Button>
          </div>
        </div>
      )}
    </div>
  );
}

'use client';

import { useLongPress } from '@akhatmirzo/hooks';
import { Badge } from '@akhatmirzo/ui';
import { useState } from 'react';

export default function HooksLongPress() {
  const [status, setStatus] = useState<'idle' | 'pressing' | 'done' | 'cancelled'>('idle');
  const handlers = useLongPress<HTMLButtonElement>(() => setStatus('done'), {
    delay: 700,
    onStart: () => setStatus('pressing'),
    onCancel: () => setStatus('cancelled'),
  });

  const label = {
    idle: 'Kutilmoqda',
    pressing: 'Bosib turibsiz…',
    done: "Buyurtma o'chirishga tanlandi",
    cancelled: 'Bekor qilindi',
  }[status];

  return (
    <div className="flex flex-col items-center gap-3">
      <button
        type="button"
        {...handlers}
        className="w-64 touch-none select-none rounded-xl border border-border bg-surface px-4 py-3 text-left text-sm text-text transition-colors active:bg-surface-muted"
      >
        <span className="font-medium">Buyurtma #1024</span>
        <span className="block text-text-muted">1 250 000 so'm · 0,7 s bosib turing</span>
      </button>
      <Badge
        color={status === 'done' ? 'success' : status === 'cancelled' ? 'warning' : 'neutral'}
        dot
      >
        {label}
      </Badge>
    </div>
  );
}

'use client';

import { useDocumentVisibility } from '@akhatmirzo/hooks';
import { Badge } from '@akhatmirzo/ui';
import { useEffect, useState } from 'react';

export default function HooksDocumentVisibility() {
  const visibility = useDocumentVisibility();
  const [seconds, setSeconds] = useState(0);

  // Tab yashirin bo'lsa, taymer to'xtaydi — resurs tejaladi
  useEffect(() => {
    if (visibility === 'hidden') return;
    const id = setInterval(() => setSeconds((s) => s + 1), 1000);
    return () => clearInterval(id);
  }, [visibility]);

  return (
    <div className="flex flex-col items-center gap-3 text-sm text-text">
      <Badge color={visibility === 'visible' ? 'success' : 'neutral'} dot>
        {visibility === 'visible' ? "Tab ko'rinib turibdi" : 'Tab yashirin'}
      </Badge>
      <p>
        Faol vaqt: <span className="font-mono">{seconds} s</span>
      </p>
      <p className="text-text-muted">Boshqa tabga o'tib qayting — hisob to'xtab turadi</p>
    </div>
  );
}

'use client';

import { useAsync, useToggle } from '@akhatmirzo/hooks';
import { Badge, Button, Switch } from '@akhatmirzo/ui';

const CITIES = ['Toshkent', 'Samarqand', 'Buxoro', 'Xiva', 'Namangan', 'Andijon', 'Nukus'];
const STATUS_COLOR = {
  idle: 'neutral',
  loading: 'info',
  success: 'success',
  error: 'danger',
} as const;

function fetchCities(fail: boolean): Promise<string[]> {
  const delay = 500 + Math.random() * 1000;
  return new Promise((resolve, reject) =>
    setTimeout(() => {
      if (fail) reject(new Error('Server javob bermadi'));
      else resolve(CITIES.slice(0, 2 + Math.floor(Math.random() * 5)));
    }, delay),
  );
}

export default function HooksAsync() {
  const [fail, , setFail] = useToggle(false);
  const { status, data, error, run } = useAsync(fetchCities, [], { immediate: false });

  return (
    <div className="flex w-full max-w-sm flex-col gap-3">
      <div className="flex flex-wrap items-center gap-3">
        <Button onClick={() => void run(fail)} loading={status === 'loading'}>
          Yuklash
        </Button>
        <Badge color={STATUS_COLOR[status]} dot>
          {status}
        </Badge>
      </div>
      <Switch checked={fail} onCheckedChange={setFail} label="Xato bilan tugasin" />
      {status === 'error' && error instanceof Error && (
        <p className="text-sm text-danger-soft-foreground">{error.message}</p>
      )}
      {data && <p className="text-sm text-text">{data.join(', ')}</p>}
    </div>
  );
}

'use client';

import { usePagination } from '@akhatmirzo/hooks';
import { Button } from '@akhatmirzo/ui';
import { useState } from 'react';

export default function HooksPagination() {
  const [page, setPage] = useState(5);
  const { pages, hasPrev, hasNext, from, to } = usePagination({ total: 200, pageSize: 10, page });

  return (
    <div className="flex flex-col items-center gap-3">
      <nav aria-label="Sahifalar" className="flex flex-wrap items-center justify-center gap-1">
        <Button size="sm" variant="ghost" disabled={!hasPrev} onClick={() => setPage(page - 1)}>
          Oldingi
        </Button>
        {pages.map((p, i) =>
          p === 'ellipsis' ? (
            <span key={`e${i}`} className="px-2 text-text-muted">
              …
            </span>
          ) : (
            <Button
              key={p}
              size="sm"
              variant={p === page ? 'primary' : 'ghost'}
              aria-current={p === page ? 'page' : undefined}
              onClick={() => setPage(p)}
            >
              {p}
            </Button>
          ),
        )}
        <Button size="sm" variant="ghost" disabled={!hasNext} onClick={() => setPage(page + 1)}>
          Keyingi
        </Button>
      </nav>
      <p className="text-sm text-text-muted">
        {from}–{to} / 200 ta yozuv
      </p>
    </div>
  );
}

'use client';

import { useHotkeys } from '@akhatmirzo/hooks';
import { Badge, Kbd } from '@akhatmirzo/ui';
import { useState } from 'react';

export default function HooksHotkeys() {
  const [last, setLast] = useState<string | null>(null);
  const [count, setCount] = useState(0);

  const hit = (name: string) => {
    setLast(name);
    setCount((n) => n + 1);
  };

  useHotkeys('alt+k', () => hit('alt+k'));
  useHotkeys('?', () => hit('?'));
  // Bir nechta kombinatsiya — vergul bilan
  useHotkeys('g, alt+g', () => hit('g'));

  return (
    <div className="flex flex-col items-center gap-3 text-sm text-text">
      <div className="flex flex-wrap items-center justify-center gap-3">
        <Kbd keys={['Alt', 'K']} />
        <Kbd>?</Kbd>
        <Kbd>G</Kbd>
      </div>
      <p className="text-text-muted">Yuqoridagi tugmalardan birini bosing</p>
      {last && (
        <Badge color="primary">
          {last} · {count} marta
        </Badge>
      )}
    </div>
  );
}

'use client';

import { useInterval } from '@akhatmirzo/hooks';
import { Button } from '@akhatmirzo/ui';
import { useState } from 'react';

export default function HooksInterval() {
  const [seconds, setSeconds] = useState(0);
  const [running, setRunning] = useState(true);

  // null — interval to'xtaydi
  useInterval(() => setSeconds((s) => s + 1), running ? 1000 : null);

  const mm = String(Math.floor(seconds / 60)).padStart(2, '0');
  const ss = String(seconds % 60).padStart(2, '0');

  return (
    <div className="flex flex-col items-center gap-4">
      <span className="text-3xl font-semibold tabular-nums text-text">
        {mm}:{ss}
      </span>
      <div className="flex gap-2">
        <Button variant="primary" onClick={() => setRunning((r) => !r)}>
          {running ? "To'xtatish" : 'Davom ettirish'}
        </Button>
        <Button variant="ghost" onClick={() => setSeconds(0)}>
          Nolga qaytarish
        </Button>
      </div>
    </div>
  );
}

'use client';

import { useCountdown } from '@akhatmirzo/hooks';
import { Button, Field, OtpInput, toast } from '@akhatmirzo/ui';
import { useState } from 'react';

export default function HooksCountdown() {
  const [code, setCode] = useState('');
  const { formatted, isRunning, restart } = useCountdown(59);

  const resend = () => {
    // Haqiqiy ilovada — SMS yuborish so'rovi
    setCode('');
    toast('Yangi kod +998 90 *** ** 67 ga yuborildi');
    restart();
  };

  return (
    <div className="flex flex-col items-start gap-3">
      <Field label="Tasdiqlash kodi" description="+998 90 *** ** 67 ga yuborildi">
        <OtpInput groupSize={3} value={code} onValueChange={setCode} />
      </Field>
      <Button variant="ghost" size="sm" disabled={isRunning} onClick={resend}>
        {isRunning ? `Kodni qayta yuborish (${formatted})` : 'Kodni qayta yuborish'}
      </Button>
    </div>
  );
}

'use client';

import { useIdle, useOnline } from '@akhatmirzo/hooks';
import { Badge } from '@akhatmirzo/ui';

export default function HooksIdle() {
  const idle = useIdle(5000);
  const online = useOnline();

  return (
    <div className="flex flex-col items-center gap-3 text-center">
      <div className="flex flex-wrap justify-center gap-2">
        <Badge color={idle ? 'warning' : 'success'} dot>
          {idle ? 'Nofaol' : 'Faol'}
        </Badge>
        <Badge color={online ? 'success' : 'danger'} dot>
          {online ? 'Internet bor' : "Internet yo'q"}
        </Badge>
      </div>
      <p className="max-w-xs text-sm text-text-muted">
        5 soniya sichqoncha va klaviaturaga tegmang. Tarmoqni o'chirib ko'ring — holat darhol
        yangilanadi.
      </p>
    </div>
  );
}