ColorPicker

'use client';

import { ColorPicker } from '@akhatmirzo/ui';
import { useState } from 'react';

export default function ColorPickerBasic() {
  const [color, setColor] = useState('#4f46e5');

  return (
    <div className="w-full max-w-60">
      <ColorPicker value={color} onValueChange={setColor} aria-label="Asosiy rang" />
    </div>
  );
}

ImportBo'lim havolasini nusxalash

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

Qachon ishlatishBo'lim havolasini nusxalash

• Foydalanuvchi o'z rangini tanlaydi — brend rangi, teg yoki kategoriya rangi, mavzu sozlamalari.
• Ranglar soni cheklangan bo'lsa — swatches bilan tayyor palitrani bering; erkin tanlash baribir mavjud qoladi.
• Faqat bir nechta rangdan tanlash kerak bo'lsa (5–6 ta) — RadioGroup yoki SegmentedControl bilan rangli namunalar soddaroq.

TuzilishiBo'lim havolasini nusxalash

Trigger — Input ko'rinishidagi tugma: chapda rang namunasi, yonida hex matn. Bosilganda Popover ochiladi:

1. To'yinganlik maydoni (2D) — gorizontal o'q to'yinganlik, vertikal — yorqinlik.
2. Hue slayderi — rang tusi (0–360°), Slider komponenti.
3. Shaffoflik slayderi — faqat alpha bilan.
4. Pipetka — brauzerda EyeDropper API bo'lsa (hozircha Chromium) ekrandan rang oladi; bo'lmasa tugma ko'rinmaydi.
5. Hex input — to'liq 6 (yoki 8) belgili hex darhol qo'llanadi; qisqa #abc — Enter yoki fokus chiqqanda. Noto'g'ri matn xato holatida ko'rinadi va fokus chiqqanda oldingi rangga qaytadi.
6. Tayyor ranglar (swatches).

Qiymat doim kichik harfli #rrggbb ko'rinishida qaytadi (onValueChange('#0ea5e9')). Oq, qora yoki kulrang tanlanganda hue saqlanadi — slayder "sakramaydi".

Field bilanBo'lim havolasini nusxalash

Field ichida trigger nomi — label va joriy rang ("Brend rangi #0EA5E9"), izoh va xato aria-describedby ga ulanadi. name — forma uchun yashirin <input>.

'use client';

import { ColorPicker, Field } from '@akhatmirzo/ui';

export default function ColorPickerWithField() {
  return (
    <div className="w-full max-w-60">
      <Field label="Brend rangi" description="Tugmalar va havolalarda ishlatiladi">
        <ColorPicker name="brand" defaultValue="#0ea5e9" />
      </Field>
    </div>
  );
}

ShaffoflikBo'lim havolasini nusxalash

alpha — panelda shaffoflik slayderi chiqadi, qiymat #rrggbbaa bo'ladi (#10b98180 — 50%). Rang namunalari ostida shaxmat foni ko'rinadi.

'use client';

import { ColorPicker } from '@akhatmirzo/ui';
import { useState } from 'react';

export default function ColorPickerAlpha() {
  const [color, setColor] = useState('#10b98180');

  return (
    <div className="flex w-full max-w-60 flex-col gap-2">
      <ColorPicker alpha value={color} onValueChange={setColor} aria-label="Fon rangi" />
      <p className="m-0 text-sm text-text-muted">
        Qiymat: <span className="font-mono text-text">{color}</span>
      </p>
    </div>
  );
}

Tayyor ranglarBo'lim havolasini nusxalash

Standart swatches — kutubxona palitrasidan 10 ta rang (defaultColorSwatches sifatida eksport qilinadi). O'z palitrangizni bering yoki [] bilan yashiring.

'use client';

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

// Faqat brend palitrasidagi ranglar
const brand = ['#4f46e5', '#0ea5e9', '#10b981', '#f59e0b', '#e11d48'];

export default function ColorPickerSwatches() {
  return (
    <div className="w-full max-w-60">
      <ColorPicker swatches={brand} defaultValue="#10b981" aria-label="Teg rangi" />
    </div>
  );
}

O'lchamlar va holatlarBo'lim havolasini nusxalash

size — trigger balandligi Input bilan bir xil: sm 32px, md 40px (standart), lg 48px. disabled — ochilmaydi; invalid (yoki Field error) — qizil chegara.

'use client';

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

export default function ColorPickerSizes() {
  return (
    <div className="flex w-full max-w-60 flex-col gap-3">
      <ColorPicker size="sm" aria-label="Kichik" />
      <ColorPicker aria-label="O'rtacha" />
      <ColorPicker size="lg" aria-label="Katta" />
      <ColorPicker disabled aria-label="O'chirilgan" />
    </div>
  );
}

PropsBo'lim havolasini nusxalash

Qolgan <button> atributlari va ref trigger'ga tushadi.

labelsBo'lim havolasini nusxalash

Data atributlariBo'lim havolasini nusxalash

KlaviaturaBo'lim havolasini nusxalash

AccessibilityBo'lim havolasini nusxalash

• Trigger — oddiy <button>; Field ichida nomi label + joriy hex, aks holda "Rang tanlash, #4F46E5" (aria-label yoki labels.trigger bilan o'zgartiriladi).
• 2D maydon — role="slider", aria-valuenow (to'yinganlik) va ikkala o'qni aytadigan aria-valuetext: "to'yinganlik 80%, yorqinlik 60%".
• Hue va shaffoflik — Slider komponenti: role="slider", aria-valuetext ("210°", "50%").
• Tayyor ranglar — role="group" ichida tugmalar, har biri hex nomli va aria-pressed.
• Pipetka — faqat API mavjud bo'lsa ko'rinadi (serverda va qo'llab-quvvatlamaydigan brauzerlarda yashirin), aria-label="Ekrandan rang olish".
• Rang yagona signal emas — tanlangan swatch qo'shimcha halqa bilan ajratiladi, trigger hex matnni ham ko'rsatadi.