Dashboard/ui/components/Slider/Slider.tsx

"use client";
/*
 * Documentation:
 * Slider — https://app.subframe.com/f023064a5ca0/library?component=Slider_f4092874-0320-449e-a0c5-b435987c4cfb
 */

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

export interface RangeProps
  extends React.ComponentProps<typeof SubframeCore.Slider.Range> {
  variant?: "default" | "disabled";
  className?: string;
}

const Range = React.forwardRef<HTMLDivElement, RangeProps>(function Range(
  { variant = "default", className, ...otherProps }: RangeProps,
  ref
) {
  return (
    <SubframeCore.Slider.Range asChild={true} {...otherProps}>
      <div
        className={SubframeUtils.twClassNames(
          "group/ec1ba741 flex h-full flex-col items-start rounded-round bg-brand-brand-surface-solid-default",
          { "bg-surface-neutral-disabled": variant === "disabled" },
          className
        )}
        ref={ref}
      />
    </SubframeCore.Slider.Range>
  );
});

export interface ThumbProps
  extends React.ComponentProps<typeof SubframeCore.Slider.Thumb> {
  variant?: "default" | "disabled";
  className?: string;
}

const Thumb = React.forwardRef<HTMLDivElement, ThumbProps>(function Thumb(
  { variant = "default", className, ...otherProps }: ThumbProps,
  ref
) {
  return (
    <SubframeCore.Slider.Thumb asChild={true} {...otherProps}>
      <div
        className={SubframeUtils.twClassNames(
          "group/a8bce74d flex h-4 w-4 cursor-pointer items-center gap-2 rounded-round bg-brand-brand-surface-solid-default hover:bg-brand-brand-surface-solid-hover active:bg-brand-brand-surface-solid-active focus-within:shadow-focus",
          {
            "border border-solid border-border-disabled bg-surface-neutral-disabled cursor-not-allowed hover:bg-surface-neutral-disabled active:bg-surface-neutral-disabled focus-within:shadow-none":
              variant === "disabled",
          },
          className
        )}
        ref={ref}
      />
    </SubframeCore.Slider.Thumb>
  );
});

export interface TrackProps
  extends React.ComponentProps<typeof SubframeCore.Slider.Track> {
  variant?: "default" | "disabled";
  className?: string;
}

const Track = React.forwardRef<HTMLDivElement, TrackProps>(function Track(
  { variant = "default", className, ...otherProps }: TrackProps,
  ref
) {
  return (
    <SubframeCore.Slider.Track asChild={true} {...otherProps}>
      <div
        className={SubframeUtils.twClassNames(
          "group/303c47d1 flex h-2 w-full flex-col items-start gap-2 rounded-round bg-surface-neutral-tertiary",
          { "bg-surface-neutral-disabled": variant === "disabled" },
          className
        )}
        ref={ref}
      >
        <Slider.Range
          variant={variant === "disabled" ? "disabled" : "default"}
        />
      </div>
    </SubframeCore.Slider.Track>
  );
});

export interface SliderRootProps
  extends React.ComponentProps<typeof SubframeCore.Slider.Root> {
  disabled?: boolean;
  range?: boolean;
  label?: React.ReactNode;
  valueText?: React.ReactNode;
  description?: React.ReactNode;
  value?: number[];
  onValueChange?: (value: number[]) => void;
  onValueCommit?: (value: number[]) => void;
  className?: string;
}

const SliderRoot = React.forwardRef<HTMLDivElement, SliderRootProps>(
  function SliderRoot(
    {
      disabled = false,
      range = false,
      label,
      valueText,
      description,
      className,
      ...otherProps
    }: SliderRootProps,
    ref
  ) {
    return (
      <SubframeCore.Slider.Root
        asChild={true}
        disabled={disabled}
        {...otherProps}
      >
        <div
          className={SubframeUtils.twClassNames(
            "group/f4092874 flex w-full flex-col items-start gap-1.5",
            { "cursor-not-allowed pointer-events-none": disabled },
            className
          )}
          ref={ref}
        >
          <div className="flex w-full items-center justify-between">
            {label ? (
              <span
                className={SubframeUtils.twClassNames(
                  "text-body-default-regular-150 font-body-default-regular-150 text-text-neutral-primary",
                  { "text-text-neutral-disabled": disabled }
                )}
              >
                {label}
              </span>
            ) : null}
            {valueText ? (
              <span
                className={SubframeUtils.twClassNames(
                  "text-body-default-regular-150 font-body-default-regular-150 text-text-neutral-secondary",
                  { "text-text-neutral-disabled": disabled }
                )}
              >
                {valueText}
              </span>
            ) : null}
          </div>
          <div
            className={SubframeUtils.twClassNames(
              "flex h-5 w-full flex-none flex-col items-start justify-center gap-2 cursor-pointer",
              { "cursor-not-allowed": disabled }
            )}
          >
            <Track variant={disabled ? "disabled" : "default"} />
            <Thumb variant={disabled ? "disabled" : "default"} />
            <Thumb
              className={SubframeUtils.twClassNames("hidden", { flex: range })}
              variant={disabled ? "disabled" : "default"}
            />
          </div>
          {description ? (
            <span
              className={SubframeUtils.twClassNames(
                "text-body-extra-small-regular-150 font-body-extra-small-regular-150 text-text-neutral-tertiary",
                { "text-text-neutral-disabled": disabled }
              )}
            >
              {description}
            </span>
          ) : null}
        </div>
      </SubframeCore.Slider.Root>
    );
  }
);

export const Slider = Object.assign(SliderRoot, {
  Range,
  Thumb,
  Track,
});