Dashboard/ui/components/RadioGroup/RadioGroup.tsx

"use client";
/*
 * Documentation:
 * Radio Group — https://app.subframe.com/f023064a5ca0/library?component=Radio+Group_c4b6300e-20b4-4f3e-8b9f-379a046674ca
 */

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

export interface OptionProps
  extends React.ComponentProps<typeof SubframeCore.RadioGroup.Item> {
  label?: React.ReactNode;
  disabled?: boolean;
  className?: string;
}

const Option = React.forwardRef<HTMLButtonElement, OptionProps>(function Option(
  { label, disabled = false, className, ...otherProps }: OptionProps,
  ref
) {
  return (
    <SubframeCore.RadioGroup.Item
      disabled={disabled}
      asChild={true}
      {...otherProps}
    >
      <button
        className={SubframeUtils.twClassNames(
          "group/0f804ad9 flex cursor-pointer items-center gap-2 border-none bg-transparent text-left",
          className
        )}
        ref={ref}
      >
        <div className="flex h-4 items-center gap-2">
          <div className="flex h-4 w-4 flex-none flex-col items-center justify-center gap-2 rounded-round border-2 border-solid border-border-strong bg-surface-neutral-secondary group-hover/0f804ad9:border-2 group-hover/0f804ad9:border-solid group-hover/0f804ad9:border-brand-brand-border-solid-hover group-focus-within/0f804ad9:shadow-focus group-aria-[checked=true]/0f804ad9:border-2 group-aria-[checked=true]/0f804ad9:border-solid group-aria-[checked=true]/0f804ad9:border-brand-brand-border-solid-default group-disabled/0f804ad9:border-2 group-disabled/0f804ad9:border-solid group-disabled/0f804ad9:border-border-disabled group-disabled/0f804ad9:bg-surface-neutral-disabled">
            <div className="hidden h-2 w-2 flex-none flex-col items-start gap-2 rounded-round bg-brand-brand-surface-solid-default group-hover/0f804ad9:bg-brand-brand-surface-solid-hover group-aria-[checked=true]/0f804ad9:flex group-disabled/0f804ad9:bg-icon-neutral-disabled" />
          </div>
        </div>
        {label ? (
          <span className="text-body-small-medium-150 font-body-small-medium-150 text-text-neutral-primary group-disabled/0f804ad9:text-text-neutral-disabled">
            {label}
          </span>
        ) : null}
      </button>
    </SubframeCore.RadioGroup.Item>
  );
});

export interface RadioGroupRootProps
  extends React.ComponentProps<typeof SubframeCore.RadioGroup.Root> {
  error?: boolean;
  horizontal?: boolean;
  label?: React.ReactNode;
  helpText?: React.ReactNode;
  children?: React.ReactNode;
  value?: string;
  onValueChange?: (value: string) => void;
  className?: string;
}

const RadioGroupRoot = React.forwardRef<HTMLDivElement, RadioGroupRootProps>(
  function RadioGroupRoot(
    {
      error = false,
      horizontal = false,
      label,
      helpText,
      children,
      className,
      ...otherProps
    }: RadioGroupRootProps,
    ref
  ) {
    return (
      <SubframeCore.RadioGroup.Root asChild={true} {...otherProps}>
        <div
          className={SubframeUtils.twClassNames(
            "group/c4b6300e flex flex-col items-start gap-2",
            className
          )}
          ref={ref}
        >
          {label ? (
            <span className="text-body-small-medium-150 font-body-small-medium-150 text-text-neutral-primary">
              {label}
            </span>
          ) : null}
          {children ? (
            <div
              className={SubframeUtils.twClassNames(
                "flex flex-col items-start gap-2",
                { "flex-row gap-6": horizontal }
              )}
            >
              {children}
            </div>
          ) : null}
          {helpText ? (
            <span
              className={SubframeUtils.twClassNames(
                "text-body-extra-small-regular-150 font-body-extra-small-regular-150 text-text-neutral-tertiary",
                { "text-text-feedback-negative": error }
              )}
            >
              {helpText}
            </span>
          ) : null}
        </div>
      </SubframeCore.RadioGroup.Root>
    );
  }
);

export const RadioGroup = Object.assign(RadioGroupRoot, {
  Option,
});