Dashboard/ui/components/AccordionNested/AccordionNested.tsx

"use client";
/*
 * Documentation:
 * Accordion Nested — https://app.subframe.com/f023064a5ca0/library?component=Accordion+Nested_91a645f4-5a9c-4c61-be00-d85b9d554e91
 */

import React from "react";
import { FeatherChevronRight } from "@subframe/core";
import * as SubframeCore from "@subframe/core";
import * as SubframeUtils from "../../utils";

export interface ChevronProps
  extends React.ComponentProps<typeof SubframeCore.Collapsible.Chevron> {
  className?: string;
}

const Chevron = React.forwardRef<
  React.ElementRef<typeof FeatherChevronRight>,
  ChevronProps
>(function Chevron({ className, ...otherProps }: ChevronProps, ref) {
  return (
    <SubframeCore.Collapsible.Chevron {...otherProps}>
      <FeatherChevronRight
        className={SubframeUtils.twClassNames(
          "text-body-default-regular-150 font-body-default-regular-150 text-icon-neutral-primary transition-transform group-data-[state=open]/91a645f4:-rotate-90 group-aria-[invalid=true]/91a645f4:text-icon-feedback-negative group-aria-[disabled=true]/91a645f4:text-icon-neutral-disabled",
          className
        )}
        ref={ref}
      />
    </SubframeCore.Collapsible.Chevron>
  );
});

export interface ContentProps
  extends React.ComponentProps<typeof SubframeCore.Collapsible.Content> {
  children?: React.ReactNode;
  className?: string;
}

const Content = React.forwardRef<HTMLDivElement, ContentProps>(function Content(
  { children, className, ...otherProps }: ContentProps,
  ref
) {
  return children ? (
    <SubframeCore.Collapsible.Content asChild={true} {...otherProps}>
      <div
        className={SubframeUtils.twClassNames(
          "flex w-full flex-col items-start gap-2",
          className
        )}
        ref={ref}
      >
        {children}
      </div>
    </SubframeCore.Collapsible.Content>
  ) : null;
});

export interface TriggerProps
  extends React.ComponentProps<typeof SubframeCore.Collapsible.Trigger> {
  children?: React.ReactNode;
  className?: string;
}

const Trigger = React.forwardRef<HTMLDivElement, TriggerProps>(function Trigger(
  { children, className, ...otherProps }: TriggerProps,
  ref
) {
  return children ? (
    <SubframeCore.Collapsible.Trigger asChild={true} {...otherProps}>
      <div
        className={SubframeUtils.twClassNames(
          "flex w-full cursor-pointer flex-col items-start gap-2",
          className
        )}
        ref={ref}
      >
        {children}
      </div>
    </SubframeCore.Collapsible.Trigger>
  ) : null;
});

export interface AccordionNestedRootProps
  extends React.ComponentProps<typeof SubframeCore.Collapsible.Root> {
  disabled?: boolean;
  error?: boolean;
  open?: boolean;
  variant?: "card" | "ghost";
  trigger?: React.ReactNode;
  children?: React.ReactNode;
  className?: string;
}

const AccordionNestedRoot = React.forwardRef<
  HTMLDivElement,
  AccordionNestedRootProps
>(function AccordionNestedRoot(
  {
    disabled = false,
    error = false,
    open,
    variant = "card",
    trigger,
    children,
    className,
    defaultOpen = false,
    ...otherProps
  }: AccordionNestedRootProps,
  ref
) {
  return (
    <SubframeCore.Collapsible.Root
      open={open}
      defaultOpen={defaultOpen}
      asChild={true}
      disabled={disabled}
      {...otherProps}
    >
      <div
        className={SubframeUtils.twClassNames(
          "group/91a645f4 flex w-full cursor-pointer flex-col items-start rounded-md border border-solid border-border-default bg-surface-neutral-secondary hover:bg-surface-neutral-tertiary",
          {
            "border-none bg-transparent hover:bg-transparent":
              variant === "ghost",
            "border-2 border-solid border-border-negative-solid hover:border-border-negative-solid":
              error,
            "border border-solid border-border-disabled bg-surface-neutral-disabled opacity-40 pointer-events-none hover:bg-surface-neutral-disabled hover:border-border-disabled":
              disabled,
          },
          className
        )}
        ref={ref}
      >
        <Trigger>
          {trigger ? (
            <div className="flex w-full grow shrink-0 basis-0 flex-col items-start group-data-[state=open]/91a645f4:flex-none">
              {trigger}
            </div>
          ) : null}
        </Trigger>
        <Content>
          {children ? (
            <div className="flex w-full grow shrink-0 basis-0 flex-col items-start">
              {children}
            </div>
          ) : null}
        </Content>
      </div>
    </SubframeCore.Collapsible.Root>
  );
});

export const AccordionNested = Object.assign(AccordionNestedRoot, {
  Chevron,
  Content,
  Trigger,
});