import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"

export function Component() {
  return (
    <div className="flex h-full w-full items-center justify-center">
      <Accordion
        type="single"
        collapsible
        className="w-full max-w-lg"
        defaultValue="item-1"
      >
        <AccordionItem value="item-1">
          <AccordionTrigger>
            What makes Dalim Design different?
          </AccordionTrigger>
          <AccordionContent className="flex flex-col gap-4 text-balance">
            <p>
              Dalim Design blends creativity with clarity, offering a visually
              consistent system that empowers both designers and developers.
            </p>
            <p>
              It emphasizes minimal aesthetics, strong typography, and
              pixel-perfect components tailored for modern web experiences.
            </p>
          </AccordionContent>
        </AccordionItem>
        <AccordionItem value="item-2">
          <AccordionTrigger>
            How can I customize the design system?
          </AccordionTrigger>
          <AccordionContent className="flex flex-col gap-4 text-balance">
            <p>
              Dalim Design is highly flexible—modify design tokens, color
              palettes, typography scales, and spacing units to suit your brand.
            </p>
            <p>
              The system supports seamless theming, including dark mode and
              accessibility-aware contrast settings.
            </p>
          </AccordionContent>
        </AccordionItem>
        <AccordionItem value="item-3">
          <AccordionTrigger>
            Is Dalim Design optimized for performance?
          </AccordionTrigger>
          <AccordionContent className="flex flex-col gap-4 text-balance">
            <p>
              Absolutely. The design system is streamlined to avoid bloat,
              enabling fast load times and high responsiveness.
            </p>
            <p>
              Assets are optimized for modern rendering pipelines and support
              responsive and adaptive layouts by default.
            </p>
          </AccordionContent>
        </AccordionItem>
      </Accordion>
    </div>
  )
}

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"

export function Component() {
  return (
    <div className="flex h-full w-full items-center justify-center">
      <Accordion
        type="single"
        collapsible
        className="w-full max-w-lg"
        defaultValue="item-1"
      >
        <AccordionItem value="item-1" variant="outline">
          <AccordionTrigger variant="outline">
            What makes Dalim Design different?
          </AccordionTrigger>
          <AccordionContent
            variant="outline"
            className="flex flex-col gap-4 text-balance"
          >
            <p>
              Dalim Design blends creativity with clarity, offering a visually
              consistent system that empowers both designers and developers.
            </p>
            <p>
              It emphasizes minimal aesthetics, strong typography, and
              pixel-perfect components tailored for modern web experiences.
            </p>
          </AccordionContent>
        </AccordionItem>
        <AccordionItem variant="outline" value="item-2">
          <AccordionTrigger variant="outline">
            How can I customize the design system?
          </AccordionTrigger>
          <AccordionContent
            variant="outline"
            className="flex flex-col gap-4 text-balance"
          >
            <p>
              Dalim Design is highly flexible—modify design tokens, color
              palettes, typography scales, and spacing units to suit your brand.
            </p>
            <p>
              The system supports seamless theming, including dark mode and
              accessibility-aware contrast settings.
            </p>
          </AccordionContent>
        </AccordionItem>
        <AccordionItem variant="outline" value="item-3">
          <AccordionTrigger variant="outline">
            Is Dalim Design optimized for performance?
          </AccordionTrigger>
          <AccordionContent
            variant="outline"
            className="flex flex-col gap-4 text-balance"
          >
            <p>
              Absolutely. The design system is streamlined to avoid bloat,
              enabling fast load times and high responsiveness.
            </p>
            <p>
              Assets are optimized for modern rendering pipelines and support
              responsive and adaptive layouts by default.
            </p>
          </AccordionContent>
        </AccordionItem>
      </Accordion>
    </div>
  )
}

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"

export function Component() {
  return (
    <div className="flex h-full w-full items-center justify-center">
      <Accordion
        type="single"
        collapsible
        className="w-full max-w-lg"
        defaultValue="item-1"
      >
        <AccordionItem value="item-1" variant="ghost">
          <AccordionTrigger variant="ghost">
            What makes Dalim Design different?
          </AccordionTrigger>
          <AccordionContent
            variant="ghost"
            className="flex flex-col gap-4 text-balance"
          >
            <p>
              Dalim Design blends creativity with clarity, offering a visually
              consistent system that empowers both designers and developers.
            </p>
            <p>
              It emphasizes minimal aesthetics, strong typography, and
              pixel-perfect components tailored for modern web experiences.
            </p>
          </AccordionContent>
        </AccordionItem>
        <AccordionItem value="item-2" variant="ghost">
          <AccordionTrigger variant="ghost">
            How can I customize the design system?
          </AccordionTrigger>
          <AccordionContent
            variant="ghost"
            className="flex flex-col gap-4 text-balance"
          >
            <p>
              Dalim Design is highly flexible—modify design tokens, color
              palettes, typography scales, and spacing units to suit your brand.
            </p>
            <p>
              The system supports seamless theming, including dark mode and
              accessibility-aware contrast settings.
            </p>
          </AccordionContent>
        </AccordionItem>
        <AccordionItem value="item-3" variant="ghost">
          <AccordionTrigger variant="ghost">
            Is Dalim Design optimized for performance?
          </AccordionTrigger>
          <AccordionContent
            variant="ghost"
            className="flex flex-col gap-4 text-balance"
          >
            <p>
              Absolutely. The design system is streamlined to avoid bloat,
              enabling fast load times and high responsiveness.
            </p>
            <p>
              Assets are optimized for modern rendering pipelines and support
              responsive and adaptive layouts by default.
            </p>
          </AccordionContent>
        </AccordionItem>
      </Accordion>
    </div>
  )
}

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"

const items = [
  {
    id: "1",
    title: "What makes Dalim Design different?",
    content:
      "Dalim Design blends creativity with clarity, offering a visually consistent system that empowers both designers and developers. It emphasizes minimal aesthetics, strong typography, and pixel-perfect components tailored for modern web experiences.",
  },
  {
    id: "2",
    title: "How can I customize the design system?",
    content:
      "Dalim Design is highly flexible—modify design tokens, color palettes, typography scales, and spacing units to suit your brand. The system supports seamless theming, including dark mode and accessibility-aware contrast settings.",
  },
  {
    id: "3",
    title: "Is Dalim Design optimized for performance?",
    content:
      "Absolutely. The design system is streamlined to avoid bloat, enabling fast load times and high responsiveness. Assets are optimized for modern rendering pipelines and support responsive and adaptive layouts by default.",
  },
  {
    id: "4",
    title: "How accessible is Dalim Design?",
    content:
      "Accessibility is a core principle. All visual elements are designed with inclusive UX in mind—ensuring legible typography, sufficient contrast, focus indicators, and compatibility with assistive technologies.",
  },
]

export function Component() {
  return (
    <div className="flex h-full w-full items-center justify-center">
      <Accordion
        type="single"
        collapsible
        className="w-full max-w-lg -space-y-px rounded-xl p-2 shadow-[0_0_6px_rgba(0,0,0,0.03),0_2px_6px_rgba(0,0,0,0.08),inset_3px_3px_0.5px_-3px_rgba(0,0,0,0.9),inset_-3px_-3px_0.5px_-3px_rgba(0,0,0,0.85),inset_1px_1px_1px_-0.5px_rgba(0,0,0,0.6),inset_-1px_-1px_1px_-0.5px_rgba(0,0,0,0.6),inset_0_0_6px_6px_rgba(0,0,0,0.12),inset_0_0_2px_2px_rgba(0,0,0,0.06),0_0_12px_rgba(255,255,255,0.15)] transition-all md:w-lg dark:shadow-[0_0_8px_rgba(0,0,0,0.03),0_2px_6px_rgba(0,0,0,0.08),inset_3px_3px_0.5px_-3.5px_rgba(255,255,255,0.09),inset_-3px_-3px_0.5px_-3.5px_rgba(255,255,255,0.85),inset_1px_1px_1px_-0.5px_rgba(255,255,255,0.6),inset_-1px_-1px_1px_-0.5px_rgba(255,255,255,0.6),inset_0_0_6px_6px_rgba(255,255,255,0.12),inset_0_0_2px_2px_rgba(255,255,255,0.06),0_0_12px_rgba(0,0,0,0.15)]"
        defaultValue="2"
      >
        {items.map((item) => (
          <AccordionItem
            value={item.id}
            key={item.id}
            className="bg-background has-focus-visible:border-ring has-focus-visible:ring-ring/50 relative border px-4 py-1 outline-none first:rounded-t-md last:rounded-b-md last:border-b has-focus-visible:z-10 has-focus-visible:ring-[3px]"
          >
            <AccordionTrigger className="justify-start gap-3 rounded-md py-2 text-[15px] leading-6 outline-none hover:no-underline focus-visible:ring-0 [&>svg]:-order-1">
              {item.title}
            </AccordionTrigger>
            <AccordionContent className="text-muted-foreground ps-7 pb-2">
              {item.content}
            </AccordionContent>
          </AccordionItem>
        ))}
      </Accordion>
    </div>
  )
}

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"

const items = [
  {
    id: "1",
    title: "What makes Dalim Design different?",
    content:
      "Dalim Design blends creativity with clarity, offering a visually consistent system that empowers both designers and developers. It emphasizes minimal aesthetics, strong typography, and pixel-perfect components tailored for modern web experiences.",
  },
  {
    id: "2",
    title: "How can I customize the design system?",
    content:
      "Dalim Design is highly flexible—modify design tokens, color palettes, typography scales, and spacing units to suit your brand. The system supports seamless theming, including dark mode and accessibility-aware contrast settings.",
  },
  {
    id: "3",
    title: "Is Dalim Design optimized for performance?",
    content:
      "Absolutely. The design system is streamlined to avoid bloat, enabling fast load times and high responsiveness. Assets are optimized for modern rendering pipelines and support responsive and adaptive layouts by default.",
  },
  {
    id: "4",
    title: "How accessible is Dalim Design?",
    content:
      "Accessibility is a core principle. All visual elements are designed with inclusive UX in mind—ensuring legible typography, sufficient contrast, focus indicators, and compatibility with assistive technologies.",
  },
]

export function Component() {
  return (
    <div className="flex h-full w-full items-center justify-center">
      <Accordion
        type="single"
        collapsible
        className="w-full max-w-lg space-y-1"
        defaultValue="1"
      >
        {items.map((item) => (
          <AccordionItem
            value={item.id}
            key={item.id}
            className="bg-background has-focus-visible:border-ring has-focus-visible:ring-ring/50 rounded-md border px-4 py-1 shadow-[0_0_6px_rgba(0,0,0,0.03),0_2px_6px_rgba(0,0,0,0.08),inset_3px_3px_0.5px_-3px_rgba(0,0,0,0.9),inset_-3px_-3px_0.5px_-3px_rgba(0,0,0,0.85),inset_1px_1px_1px_-0.5px_rgba(0,0,0,0.6),inset_-1px_-1px_1px_-0.5px_rgba(0,0,0,0.6),inset_0_0_6px_6px_rgba(0,0,0,0.12),inset_0_0_2px_2px_rgba(0,0,0,0.06),0_0_12px_rgba(255,255,255,0.15)] transition-all outline-none last:border-b has-focus-visible:ring-[3px] dark:shadow-[0_0_8px_rgba(0,0,0,0.03),0_2px_6px_rgba(0,0,0,0.08),inset_3px_3px_0.5px_-3.5px_rgba(255,255,255,0.09),inset_-3px_-3px_0.5px_-3.5px_rgba(255,255,255,0.85),inset_1px_1px_1px_-0.5px_rgba(255,255,255,0.6),inset_-1px_-1px_1px_-0.5px_rgba(255,255,255,0.6),inset_0_0_6px_6px_rgba(255,255,255,0.12),inset_0_0_2px_2px_rgba(255,255,255,0.06),0_0_12px_rgba(0,0,0,0.15)]"
          >
            <AccordionTrigger className="py-2 text-[15px] leading-6 hover:no-underline focus-visible:ring-0">
              {item.title}
            </AccordionTrigger>
            <AccordionContent className="text-muted-foreground pb-2">
              {item.content}
            </AccordionContent>
          </AccordionItem>
        ))}
      </Accordion>
    </div>
  )
}

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"

export function Component() {
  return (
    <div className="flex h-full w-full items-center justify-center">
      <Accordion
        type="single"
        defaultValue="privacy"
        className="w-full max-w-lg rounded-md border px-4"
      >
        <AccordionItem value="notifications">
          <AccordionTrigger>Notifications</AccordionTrigger>
          <AccordionContent>
            <div className="space-y-4">
              <div className="flex items-center justify-between">
                <Label htmlFor="email-notifications">Email notifications</Label>
                <Switch id="email-notifications" />
              </div>
              <div className="flex items-center justify-between">
                <Label htmlFor="push-notifications">SMS notifications</Label>
                <Switch id="sms-notifications" />
              </div>
            </div>
          </AccordionContent>
        </AccordionItem>

        <AccordionItem value="privacy">
          <AccordionTrigger>Privacy & Security</AccordionTrigger>
          <AccordionContent>
            <div className="space-y-4">
              <div className="flex items-center justify-between">
                <Label htmlFor="public-profile">Public profile</Label>
                <Switch id="public-profile" />
              </div>
              <div className="flex items-center justify-between">
                <Label htmlFor="two-factor">Two-factor authentication</Label>
                <Switch id="two-factor" />
              </div>
            </div>
          </AccordionContent>
        </AccordionItem>
      </Accordion>
    </div>
  )
}

import { AtSignIcon, CommandIcon, EclipseIcon, ZapIcon } from "lucide-react"

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"

const items = [
  {
    id: "1",
    title: "What makes Dalim Design different?",
    icon: CommandIcon,
    content:
      "Dalim Design blends creativity with clarity, offering a visually consistent system that empowers both designers and developers. It emphasizes minimal aesthetics, strong typography, and pixel-perfect components tailored for modern web experiences.",
  },
  {
    id: "2",
    title: "How can I customize the design system?",
    icon: EclipseIcon,
    content:
      "Dalim Design is highly flexible—modify design tokens, color palettes, typography scales, and spacing units to suit your brand. The system supports seamless theming, including dark mode and accessibility-aware contrast settings.",
  },
  {
    id: "3",
    title: "Is Dalim Design optimized for performance?",
    icon: ZapIcon,
    content:
      "Absolutely. The design system is streamlined to avoid bloat, enabling fast load times and high responsiveness. Assets are optimized for modern rendering pipelines and support responsive and adaptive layouts by default.",
  },
  {
    id: "4",
    title: "How accessible is Dalim Design?",
    icon: AtSignIcon,
    content:
      "Accessibility is a core principle. All visual elements are designed with inclusive UX in mind—ensuring legible typography, sufficient contrast, focus indicators, and compatibility with assistive technologies.",
  },
]

export function Component() {
  return (
    <div className="flex h-full w-full items-center justify-center">
      <Accordion
        type="single"
        collapsible
        className="w-full max-w-lg space-y-1"
        defaultValue="3"
      >
        {items.map((item) => (
          <AccordionItem value={item.id} key={item.id} className="py-2">
            <AccordionTrigger className="py-2 text-[15px] leading-6 hover:no-underline">
              <span className="flex items-center gap-3">
                <item.icon
                  size={16}
                  className="shrink-0 opacity-60"
                  aria-hidden="true"
                />
                <span>{item.title}</span>
              </span>
            </AccordionTrigger>
            <AccordionContent className="text-muted-foreground ps-7 pb-2">
              {item.content}
            </AccordionContent>
          </AccordionItem>
        ))}
      </Accordion>
    </div>
  )
}

import { ChevronDown } from "lucide-react"

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible"

const items = [
  {
    id: "1",
    title: "What makes Dalim UI different?",
    collapsibles: [
      {
        title: "What about visual style?",
        content:
          "Dalim UI brings a refined design language with clean layouts, balanced spacing, and intuitive interactions—made for beautiful, consistent interfaces.",
      },
      {
        title: "How is the design system structured?",
        content:
          "It’s built on design tokens: consistent colors, typography, spacing, and motion. Everything is modular and scales with your brand.",
      },
    ],
  },
  {
    id: "2",
    title: "How can I customize the components?",
    collapsibles: [
      {
        title: "Can I apply my brand style?",
        content:
          "Yes. You can override tokens, apply custom themes, and adjust radii, shadows, or typography to match your brand identity.",
      },
      {
        title: "Does it support Tailwind?",
        content:
          "Absolutely. Dalim UI is utility-first and pairs naturally with Tailwind—giving you full control with minimal effort.",
      },
    ],
  },
  {
    id: "3",
    title: "Is Dalim UI optimized for performance?",
    collapsibles: [
      {
        title: "How lightweight is it?",
        open: true,
        content:
          "Each component is minimal by design. Tree-shaking, code splitting, and optimized rendering ensure performance doesn’t take a hit.",
      },
      {
        title: "What about responsiveness?",
        open: true,
        content:
          "All components are fully responsive and follow fluid layout principles. From mobile to desktop, your UI adapts seamlessly.",
      },
    ],
  },
  {
    id: "4",
    title: "How accessible is Dalim UI?",
    collapsibles: [
      {
        title: "Is accessibility baked in?",
        content:
          "Yes. We follow WAI-ARIA guidelines closely—providing keyboard navigation, proper labeling, and screen reader support out of the box.",
      },
      {
        title: "Is it inclusive for all users?",
        content:
          "We design with empathy. Color contrast, motion preferences, and assistive tech compatibility are core to Dalim UI’s design philosophy.",
      },
    ],
  },
]

export function Component() {
  return (
    <div className="flex h-full w-full items-center justify-center">
      <Accordion
        type="single"
        collapsible
        className="w-full max-w-lg -space-y-px"
        defaultValue="3"
      >
        {items.map((item) => (
          <AccordionItem
            value={item.id}
            key={item.id}
            defaultValue="3"
            className="bg-background has-focus-visible:border-ring has-focus-visible:ring-ring/50 relative border outline-none first:rounded-t-md last:rounded-b-md last:border-b has-focus-visible:z-10 has-focus-visible:ring-[3px]"
          >
            <AccordionTrigger className="rounded-md px-4 py-3 text-[15px] leading-6 outline-none hover:no-underline focus-visible:ring-0">
              {item.title}
            </AccordionTrigger>
            <AccordionContent className="p-0">
              {item.collapsibles.map((collapsible, index) => (
                <CollapsibleDemo
                  key={index}
                  title={collapsible.title}
                  content={collapsible.content}
                />
              ))}
            </AccordionContent>
          </AccordionItem>
        ))}
      </Accordion>
    </div>
  )
}

function CollapsibleDemo({
  title,
  content,
  open,
}: {
  title: string
  content: string
  open?: boolean
}) {
  return (
    <Collapsible
      className="bg-background border-t px-4 py-3"
      defaultOpen={open}
    >
      <CollapsibleTrigger className="flex gap-2 text-[15px] leading-6 font-semibold [&[data-state=open]>svg]:rotate-180">
        <ChevronDown
          size={16}
          className="mt-1 shrink-0 opacity-60 transition-transform duration-200"
          aria-hidden="true"
        />
        {title}
      </CollapsibleTrigger>
      <CollapsibleContent className="text-muted-foreground data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down mt-1 overflow-hidden ps-6 text-sm transition-all">
        {content}
      </CollapsibleContent>
    </Collapsible>
  )
}

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"

export function Component() {
  return (
    <div className="flex h-full w-full items-center justify-center">
      <Accordion
        type="single"
        collapsible
        className="w-full max-w-md space-y-1 rounded-xl border"
        defaultValue="item-1"
      >
        <AccordionItem value="item-1">
          <AccordionTrigger className="rounded-md px-4 py-3 text-[15px] leading-6 outline-none hover:no-underline focus-visible:ring-0">
            Dalim UI
          </AccordionTrigger>
          <AccordionContent className="flex flex-col gap-2 text-balance">
            <div className="overflow-hidden px-4">
              <div className="pt-1 font-mono text-sm">
                <p>
                  This example demonstrates how you can use{" "}
                  <strong className="font-bold">Dalim Icons</strong>.
                </p>
                <pre className="bg-accent/60 mt-2 rounded-md border p-4 text-xs">
                  {`import { AArrowUp } from 'dalim-icons';
    
const App = () => {
  return (
    <AArrowUp />
  );
}

export App;`}
                </pre>
              </div>
            </div>
          </AccordionContent>
        </AccordionItem>
      </Accordion>
    </div>
  )
}

"use client"

import { useState } from "react"
import Image from "next/image"

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"

const defaultFeatures = [
  {
    id: 1,
    title: "What makes Dalim Design different?",
    image: "/thumbs/accordion.jpg",
    description:
      "Dalim Design blends creativity with clarity, offering a visually consistent system that empowers both designers and developers.",
  },
  {
    id: 2,
    title: "How can I customize the design system?",
    image: "/thumbs/button.jpg",
    description:
      "Dalim Design is highly flexible—modify design tokens, color palettes, typography scales, and spacing units to suit your brand.",
  },
  {
    id: 3,
    title: "Is Dalim Design optimized for performance?",
    image: "/thumbs/book.jpg",
    description: (
      <div>
        <p className="pl-2">
          Absolutely. The design system is streamlined to avoid bloat, enabling
          fast load times and high responsiveness.
        </p>
      </div>
    ),
  },
]

const Component = () => {
  const [activeTabId, setActiveTabId] = useState<number | null>(1)
  const [activeImage, setActiveImage] = useState(defaultFeatures[0].image)

  return (
    <div className="flex h-full w-full items-center justify-center">
      <div className="flex w-full items-start justify-between gap-3">
        <div className="w-full p-4 md:w-1/2">
          <Accordion type="single" className="w-full" defaultValue="item-1">
            {defaultFeatures.map((tab) => (
              <AccordionItem key={tab.id} value={`item-${tab.id}`}>
                <AccordionTrigger
                  onClick={() => {
                    setActiveImage(tab.image)
                    setActiveTabId(tab.id)
                  }}
                  className="cursor-pointer !no-underline transition"
                >
                  <h6
                    className={`text-md font-semibold ${
                      tab.id === activeTabId
                        ? "text-foreground"
                        : "text-muted-foreground"
                    }`}
                  >
                    {tab.title}
                  </h6>
                </AccordionTrigger>
                <AccordionContent>
                  <div className="text-muted-foreground text-sm">
                    {tab.description}
                  </div>
                  <div className="mt-4 md:hidden">
                    <Image
                      src={tab.image}
                      alt={tab.title}
                      width={200}
                      height={200}
                      className="h-full w-full rounded-sm object-cover"
                    />
                  </div>
                </AccordionContent>
              </AccordionItem>
            ))}
          </Accordion>
        </div>
        <div className="bg-muted relative m-auto hidden w-1/2 overflow-hidden rounded-sm md:block">
          <Image
            src={activeImage}
            width={200}
            height={200}
            alt="Feature preview"
            className="h-full w-full rounded-md border object-cover"
          />
        </div>
      </div>
    </div>
  )
}

export Component