Dashboard/ui/components/ToggleGroup/ToggleGroup.tsx

"use client";
/*
 * Documentation:
 * Toggle Group — https://app.subframe.com/f023064a5ca0/library?component=Toggle+Group_2026f10a-e3cc-4c89-80da-a7259acae3b7
 */

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

export interface ItemProps
  extends React.ComponentProps<typeof SubframeCore.ToggleGroup.Item> {
  disabled?: boolean;
  children?: React.ReactNode;
  icon?: React.ReactNode;
  size?: "default" | "large" | "small";
  className?: string;
}

const Item = React.forwardRef<HTMLDivElement, ItemProps>(function Item(
  {
    disabled = false,
    children,
    icon = <FeatherStar />,
    size = "default",
    className,
    ...otherProps
  }: ItemProps,
  ref
) {
  return (
    <SubframeCore.ToggleGroup.Item
      asChild={true}
      disabled={disabled}
      {...otherProps}
    >
      <div
        className={SubframeUtils.twClassNames(
          "group/56dea6ed flex h-full w-full cursor-pointer items-center justify-center gap-2 rounded-md px-3.5 py-2.5 group-[.is-small]/2026f10a:px-3 group-[.is-small]/2026f10a:py-2 group-[.is-large]/2026f10a:gap-2.5 group-[.is-large]/2026f10a:px-5 group-[.is-large]/2026f10a:py-3.5 hover:bg-surface-neutral-primary aria-[checked=true]:bg-brand-brand-surface-solid-default hover:aria-[checked=true]:bg-brand-brand-surface-solid-hover active:aria-[checked=true]:bg-brand-brand-surface-solid-active",
          {
            "h-7 px-2.5 py-2": size === "small",
            "h-11 gap-2.5 px-5 py-3.5": size === "large",
            "cursor-not-allowed pointer-events-none": disabled,
          },
          className
        )}
        ref={ref}
      >
        {icon ? (
          <SubframeCore.IconWrapper
            className={SubframeUtils.twClassNames(
              "text-body-small-medium-0 font-body-small-medium-0 text-icon-neutral-primary group-disabled/56dea6ed:text-icon-neutral-disabled group-[.is-disabled]/2026f10a:text-icon-neutral-disabled group-[.is-large]/2026f10a:text-body-large-0 group-[.is-large]/2026f10a:font-body-large-0 group-aria-[checked=true]/56dea6ed:text-icon-neutral-on-solid",
              { "text-body-large-0 font-body-large-0": size === "large" }
            )}
          >
            {icon}
          </SubframeCore.IconWrapper>
        ) : null}
        {children ? (
          <span
            className={SubframeUtils.twClassNames(
              "whitespace-nowrap text-body-small-medium-0 font-body-small-medium-0 text-text-neutral-primary group-disabled/56dea6ed:text-text-neutral-disabled group-[.is-disabled]/2026f10a:text-text-neutral-disabled group-[.is-large]/2026f10a:text-body-large-0 group-[.is-large]/2026f10a:font-body-large-0 group-aria-[checked=true]/56dea6ed:text-text-neutral-on-solid",
              { "text-body-large-0 font-body-large-0": size === "large" }
            )}
          >
            {children}
          </span>
        ) : null}
      </div>
    </SubframeCore.ToggleGroup.Item>
  );
});

export interface ToggleGroupRootProps
  extends React.ComponentProps<typeof SubframeCore.ToggleGroup.Root> {
  disabled?: boolean;
  size?: "medium" | "large" | "small";
  orientation?: "horizontal" | "vertical";
  children?: React.ReactNode;
  value?: string;
  onValueChange?: (value: string) => void;
  className?: string;
}

const ToggleGroupRoot = React.forwardRef<HTMLDivElement, ToggleGroupRootProps>(
  function ToggleGroupRoot(
    {
      disabled = false,
      size = "medium",
      orientation = "horizontal",
      children,
      className,
      ...otherProps
    }: ToggleGroupRootProps,
    ref
  ) {
    return children ? (
      <SubframeCore.ToggleGroup.Root
        asChild={true}
        disabled={disabled}
        orientation={orientation}
        {...otherProps}
      >
        <div
          className={SubframeUtils.twClassNames(
            "group/2026f10a flex h-9 items-center gap-0.5 overflow-hidden rounded-md border border-solid border-border-default bg-surface-neutral-tertiary px-0.5 py-0.5",
            {
              "h-auto w-full min-w-[0px] flex-col": orientation === "vertical",
              "h-8 is-small": size === "small",
              "h-12 is-large": size === "large",
              "border border-solid border-border-disabled bg-surface-neutral-disabled is-disabled pointer-events-none":
                disabled,
            },
            className
          )}
          ref={ref}
        >
          {children}
        </div>
      </SubframeCore.ToggleGroup.Root>
    ) : null;
  }
);

export const ToggleGroup = Object.assign(ToggleGroupRoot, {
  Item,
});