@sikka/hawa/dist/accordion/index.mjs

Modern UI Kit made with Tailwind

"use client";

// elements/accordion/Accordion.tsx
import * as React4 from "react";
import * as AccordionPrimitive3 from "@radix-ui/react-accordion";

// util/index.ts
import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";
function cn(...inputs) {
  return twMerge(clsx(inputs));
}

// elements/chip/Chip.tsx
import React from "react";
var Chip = React.forwardRef(
  ({
    label,
    size = "normal",
    icon,
    color,
    radius = "inherit",
    dot,
    dotStatus = "none",
    ...rest
  }, ref) => {
    let defaultStyles = "hawa-flex hawa-flex-row hawa-w-fit hawa-gap-1 hawa-items-center  hawa-px-2.5 hawa-py-1  hawa-font-bold ";
    let radiusStyles = {
      inherit: " hawa-rounded",
      full: "hawa-rounded-full",
      none: "hawa-rounded-none"
    };
    let sizeStyles = {
      small: "hawa-h-[15px] hawa-leading-4 hawa-px-0 hawa-py-0 hawa-text-[9px] hawa-gap-0.5 ",
      normal: "hawa-h-fit hawa-text-xs",
      large: "hawa-text-base"
    };
    let dotStyles = {
      small: "hawa-flex hawa-h-1 hawa-w-1 hawa-rounded-full",
      normal: "hawa-flex hawa-h-2 hawa-w-2 hawa-rounded-full",
      large: "hawa-flex hawa-h-3 hawa-w-3 hawa-rounded-full"
    };
    let dotStatusStyles = {
      none: "hawa-bg-gray-500 dark:hawa-bg-gray-800",
      available: "hawa-bg-green-500",
      unavailable: "hawa-bg-red-500"
    };
    let colorStyles = {
      green: "hawa-bg-green-200 hawa-text-green-700 dark:hawa-bg-green-700 dark:hawa-text-green-200",
      blue: "hawa-bg-blue-200 hawa-text-blue-700 dark:hawa-bg-blue-700 dark:hawa-text-blue-100",
      red: "hawa-bg-red-200 hawa-text-red-700 dark:hawa-bg-red-700 dark:hawa-text-red-100",
      yellow: "hawa-bg-yellow-200 hawa-text-yellow-700 dark:hawa-bg-yellow-600 dark:hawa-text-black",
      orange: "hawa-bg-orange-200 hawa-text-orange-700 dark:hawa-bg-orange-700 dark:hawa-text-orange-100",
      purple: "hawa-bg-purple-200 hawa-text-purple-700 dark:hawa-bg-purple-700 dark:hawa-text-purple-100",
      cyan: "hawa-bg-cyan-200 hawa-text-cyan-700 dark:hawa-bg-cyan-700 dark:hawa-text-cyan-100",
      hyper: "hawa-text-white dark:hawa-text-black hawa-bg-gradient-to-tl hawa-from-pink-500 hawa-via-red-500 hawa-to-yellow-500 ",
      oceanic: "hawa-text-white dark:hawa-text-black hawa-bg-gradient-to-bl hawa-from-green-300 hawa-via-blue-500 hawa-to-purple-600"
    };
    if (label) {
      return /* @__PURE__ */ React.createElement(
        "span",
        {
          ...rest,
          ref,
          className: cn(
            defaultStyles,
            sizeStyles[size],
            radiusStyles[radius],
            color ? colorStyles[color] : "hawa-border hawa-bg-none",
            rest.className
          )
        },
        dot && /* @__PURE__ */ React.createElement(
          "span",
          {
            className: cn(dotStyles[size], dotStatusStyles[dotStatus])
          }
        ),
        icon && icon,
        label
      );
    } else {
      return /* @__PURE__ */ React.createElement(
        "span",
        {
          ...rest,
          ref,
          className: cn(
            "hawa-h-2 hawa-w-2 hawa-rounded-full",
            color ? colorStyles[color] : "hawa-border hawa-bg-none"
          )
        }
      );
    }
  }
);

// elements/accordion/AccordionContent.tsx
import * as React2 from "react";
import * as AccordionPrimitive from "@radix-ui/react-accordion";
var AccordionContent = React2.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React2.createElement(
  AccordionPrimitive.Content,
  {
    ref,
    className: !props.unstyled ? cn(
      "hawa-overflow-hidden hawa-text-sm hawa-transition-all data-[state=closed]:hawa-animate-accordion-up data-[state=open]:hawa-animate-accordion-down",
      className
    ) : className,
    ...props
  },
  /* @__PURE__ */ React2.createElement("div", { className: "hawa-bg-background hawa-p-4" }, children)
));
AccordionContent.displayName = AccordionPrimitive.Content.displayName;

// elements/accordion/AccordionTrigger.tsx
import * as React3 from "react";
import * as AccordionPrimitive2 from "@radix-ui/react-accordion";
var AccordionTrigger = React3.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React3.createElement(AccordionPrimitive2.Header, { className: "hawa-flex" }, /* @__PURE__ */ React3.createElement(
  AccordionPrimitive2.Trigger,
  {
    ref,
    className: !props.unstyled ? cn(
      "hawa-flex hawa-flex-1 hawa-items-center hawa-justify-between hawa-bg-muted/50 hawa-p-4 hawa-font-medium hawa-transition-all [&[data-state=open]>svg]:hawa-rotate-180",
      props.disabled ? "hawa-bg-muted/30 hawa-text-muted-foreground/50" : "hover:hawa-bg-muted",
      className
    ) : className,
    ...props
  },
  children,
  !props.hideArrow && /* @__PURE__ */ React3.createElement(
    "svg",
    {
      xmlns: "http://www.w3.org/2000/svg",
      width: "24",
      height: "24",
      viewBox: "0 0 24 24",
      fill: "none",
      stroke: "currentColor",
      strokeWidth: "2",
      strokeLinecap: "round",
      strokeLinejoin: "round",
      className: "hawa-icon hawa-shrink-0 hawa-transition-transform hawa-duration-200"
    },
    /* @__PURE__ */ React3.createElement("path", { d: "m6 9 6 6 6-6" })
  )
)));
AccordionTrigger.displayName = AccordionPrimitive2.Trigger.displayName;

// elements/accordion/Accordion.tsx
var Accordion = React4.forwardRef(
  ({
    items,
    design = "default",
    itemClassNames,
    triggerclassNames,
    contentclassNames,
    className,
    ...props
  }, ref) => /* @__PURE__ */ React4.createElement(AccordionPrimitive3.Root, { type: props.type, collapsible: true }, /* @__PURE__ */ React4.createElement(
    "div",
    {
      className: cn("hawa-flex hawa-flex-col", {
        "hawa-gap-4": design === "separated",
        "hawa-gap-0": design === "default"
      })
    },
    items.map((item, index) => /* @__PURE__ */ React4.createElement(
      AccordionPrimitive3.Item,
      {
        disabled: item.disabled || false,
        className: cn(itemClassNames, "hawa-rounded"),
        key: index,
        value: `item-${index}`
      },
      /* @__PURE__ */ React4.createElement(
        AccordionTrigger,
        {
          disabled: item.disabled || false,
          className: cn(
            "hawa-transition-all hawa-text-start",
            design === "separated" ? "hawa-rounded data-[state=open]:hawa-rounded-b-none" : {
              "hawa-rounded-t": index === 0,
              "data-[state=closed]:hawa-rounded-b": index === items.length - 1
            },
            triggerclassNames
          )
        },
        /* @__PURE__ */ React4.createElement(
          "span",
          {
            className: cn(
              "hawa-flex hawa-flex-row",
              item.chip && "hawa-gap-2"
            )
          },
          item.trigger,
          " ",
          item.chip && /* @__PURE__ */ React4.createElement(Chip, { ...item.chip })
        )
      ),
      /* @__PURE__ */ React4.createElement(
        AccordionContent,
        {
          "aria-disabled": item.disabled || false,
          className: cn(
            "hawa-border hawa-transition-all",
            design === "separated" ? "hawa-rounded data-[state=open]:hawa-rounded-t-none" : {
              "data-[state=open]:hawa-rounded-b": index === items.length - 1
            },
            contentclassNames
          )
        },
        item.content
      )
    ))
  ))
);
Accordion.displayName = "Accordion";

// elements/accordion/AccordionItem.tsx
import * as React5 from "react";
import * as AccordionPrimitive4 from "@radix-ui/react-accordion";
var AccordionItem = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React5.createElement(AccordionPrimitive4.Item, { ref, className: cn(className), ...props }));
AccordionItem.displayName = "AccordionItem";

// elements/accordion/AccordionRoot.tsx
import * as AccordionPrimitive5 from "@radix-ui/react-accordion";
var AccordionRoot = AccordionPrimitive5.Root;
export {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionRoot,
  AccordionTrigger
};
//# sourceMappingURL=index.mjs.map