Kbd

'use client';

import { Kbd } from '@akhatmirzo/ui';

export default function KbdBasic() {
  return (
    <p className="text-sm text-text">
      Qidiruvni ochish uchun <Kbd keys={['mod', 'K']} /> ni bosing, yopish uchun <Kbd>Esc</Kbd>.
    </p>
  );
}

ImportBo'lim havolasini nusxalash

import { Kbd } from '@akhatmirzo/ui';

Qachon ishlatishBo'lim havolasini nusxalash

• Qisqa yo'llarni ko'rsatish uchun — menyu bandlari, Tooltip, CommandPalette va yordam matnlarida.
• Kombinatsiyalar uchun keys massivini ishlating — har bir tugma alohida chiziladi, mod esa operatsion tizimga qarab almashadi.
• Bu faqat ko'rsatish. Kbd tugma bosilishini tinglamaydi — buning uchun useHotkeys bor (pastda misol).
• Har bir menyu bandiga qisqa yo'l yozmang — faqat tez-tez ishlatiladigan harakatlarga.

Tugmalar ro'yxati (keys)Bo'lim havolasini nusxalash

keys dagi har bir element alohida chiziladi. mod (katta-kichik harf farqi yo'q) macOS va iOS'da ⌘, boshqa tizimlarda Ctrl ga aylanadi. Bitta tugma uchun oddiy children yetarli.

'use client';

import { Kbd } from '@akhatmirzo/ui';

export default function KbdKeys() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Kbd keys={['mod', 'K']} />
      <Kbd keys={['mod', 'Shift', 'P']} />
      <Kbd keys={['Alt', 'F4']} />
      <Kbd>Esc</Kbd>
      <Kbd>↵</Kbd>
      <Kbd>↑</Kbd>
      <Kbd>↓</Kbd>
    </div>
  );
}

O'lchamlarBo'lim havolasini nusxalash

sm (standart) — 20px, matn ichida va menyularda. md — 24px, alohida turganda yoki kattaroq matn yonida.

'use client';

import { Kbd } from '@akhatmirzo/ui';

export default function KbdSizes() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Kbd keys={['mod', 'C']} />
      <Kbd size="md" keys={['mod', 'C']} />
    </div>
  );
}

MenyudaBo'lim havolasini nusxalash

Eng ko'p uchraydigan holat — menyu bandining o'ng tomonidagi qisqa yo'l.

'use client';

import { Kbd } from '@akhatmirzo/ui';

const items = [
  { label: 'Nusxa olish', keys: ['mod', 'C'] },
  { label: "Qo'yish", keys: ['mod', 'V'] },
  { label: 'Hammasini tanlash', keys: ['mod', 'A'] },
];

export default function KbdMenu() {
  return (
    <ul className="flex w-64 flex-col rounded-lg border border-border bg-surface p-1 text-sm text-text">
      {items.map((item) => (
        <li key={item.label} className="flex items-center justify-between rounded-md px-2 py-1.5">
          {item.label}
          <Kbd keys={item.keys} />
        </li>
      ))}
    </ul>
  );
}

Qisqa yo'lni ishlatishBo'lim havolasini nusxalash

Kbd va @akhatmirzo/hooks dagi useHotkeys bir xil mod qoidasiga amal qiladi: ko'rsatilgan tugma va tinglanadigan tugma doim mos keladi.

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

export function SearchHint() {
  const [open, setOpen] = useState(false);
  useHotkeys('mod+k', () => setOpen(true));

  return (
    <p>
      Qidirish: <Kbd keys={['mod', 'K']} /> {open && '— ochildi'}
    </p>
  );
}

PropsBo'lim havolasini nusxalash

Kbd qolgan barcha <kbd> atributlarini (className, title, data-* ...) qabul qiladi.

Ildiz elementda data-size atributi bor. Stilni boshqa elementga qo'llash uchun kbdVariants ham eksport qilinadi.

AccessibilityBo'lim havolasini nusxalash

• Semantik <kbd> elementi — bu klaviatura kiritishi ekani belgilanadi.
• Belgilar (⌘, ↵, ↑) ekran o'quvchida har doim ham tushunarli o'qilmaydi. Muhim ko'rsatmalarda belgi o'rniga so'z yozing: <Kbd>Enter</Kbd>.