export const title = "Gradient picker components"
export const description = "Powerful and customizable React gradient picker components built for modern applications and websites. These gradient pickers are built using React Aria and styled with Tailwind CSS."

import * as Demos from "@/components/application/gradient-picker/gradient-picker.demo.tsx";

<PreviewAndCode title="Gradient picker example" isPublic={false}>
    <ResizablePreview id="preview" className="flex py-32 px-4 md:px-8 min-h-[320px] items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.GradientPickerDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="gradient-picker/GradientPickerDemo" />
    </TabPanel>
</PreviewAndCode>

<Divider />

## Installation

You can add this gradient picker component using our CLI or manually:

<Tabs className="w-full mt-8">
    <TabList type="underline" items={[{ id:'cli', label:'CLI' }, { id:'manual', label:'Manual' }]} />

    <TabPanel id="cli" className="mt-8">
        ```bash
        npx untitledui@latest add gradient-picker
        ```
    </TabPanel>

    <TabPanel id="manual">
        <Steps>
            <Step title="Copy component files">
                Copy the files below into your project:

                <ComponentCodeTabs component="application/gradient-picker" />
            </Step>
            <Step title="Start using the components">
                Great! Now you can start using the gradient picker components in your project by just copy/pasting our examples below.
            </Step>
        </Steps>
    </TabPanel>
</Tabs>

<Divider />

## Gradient picker examples

Below are examples and variations of this gradient picker component:

### Gradient picker {{ tocOnly:true }}

<PreviewAndCode title="Gradient picker" isPublic={false}>
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 items-center justify-center py-32 px-4 md:px-8 min-h-[320px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.GradientPickerDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="gradient-picker/GradientPickerDemo" />
    </TabPanel>
</PreviewAndCode>

<Divider />

<FAQ
    faqs={[
        {
            question: "What gradient types are supported?",
            answer: "The gradient picker supports four gradient types: `\"linear\"`, `\"radial\"`, `\"angular\"` (conic), and `\"diamond\"`. You can switch between types using the built-in type selector dropdown.",
        },
        {
            question: "How do I add or remove gradient stops?",
            answer: "You can add new stops by clicking on an empty area of the gradient slider, or by using the add button in the stop list. Stops can be removed by selecting a stop and pressing Delete/Backspace, or by clicking the remove button in the stop list. A minimum of 2 stops is always enforced.",
        },
        {
            question: "Can I control the gradient angle?",
            answer: "Yes, you can control the gradient angle by dragging the endpoints on the 2D gradient area, or programmatically via the `defaultAngle` prop on `GradientPicker.Provider`. The `onAngleChange` callback fires when the angle is modified.",
        },
        {
            question: "Can I use the gradient picker sub-components independently?",
            answer: "Yes, the gradient picker uses a compound component pattern. You can use `GradientPicker.Area`, `GradientPicker.Slider`, `GradientPicker.StopList`, `GradientPicker.TypeSelect`, and `GradientPicker.Reverse` independently within a `GradientPicker.Provider` wrapper.",
        },
        {
            question: "How do I get the CSS gradient output?",
            answer: "Use the `onStopsChange` callback on `GradientPicker.Provider` to receive updated gradient stops. The component also provides utility functions to convert stops into CSS gradient strings using the `toGradientCSS()` helper.",
        },
    ]}
/>