@trail-ui/react/src/multiselect/tw-utils.ts

import { composeRenderProps } from 'react-aria-components';
import { twMerge } from 'tailwind-merge';

export function composeTailwindRenderProps<T>(
  className: string | ((v: T) => string) | undefined,
  tw: string | Array<string | undefined>,
): string | ((v: T) => string) {
  return composeRenderProps(className, (className) => twMerge(tw, className));
}

export const focusOutlineStyle = ['outline outline-2 outline-purple-600 outline-offset-2'];

export const inputFieldStyle = [
  'group flex flex-col',
  '[&_[data-slot=label]:not([class*=mb-])]:mb-1',
  '[&_[data-slot=description]:not([class*=mb-]):has(+:is(input,textarea,[data-slot=control]))]:mb-2',
  '[&_:is(input,textarea,[data-slot=control])+[data-slot=description]:not([class*=mt-])]:mt-1',
];

// export const groupContentStyle = [
//   'group flex flex-col',
//   '[&_[data-slot=description]:not([class*=mt-]):has(+[data-slot=content])]:mt-1',
//   '[&:has(:is([type=checkbox],[type=radio],[role=switch]))_[data-slot=content]:not([class*=mt-])]:mt-6',
//   '[&:has(:is([type=checkbox],[type=radio],[role=switch]))_[data-slot=content]:not([class*=gap-])]:gap-6',
//   '[&[data-orientation=horizontal]:has(:is([type=checkbox],[type=radio],[role=switch]))_[data-slot=content]:not([class*=gap-y-])]:gap-y-2',
// ];

// // Chevron up and down as select box indicator
// export const selectBoxIndicator = [
//   "before:pointer-events-none before:absolute before:end-1.5 before:top-[42%] before:size-[5px] before:-translate-x-1.5 before:-translate-y-1/2 before:rotate-45 before:border-l-[1.5px] before:border-t-[1.5px] before:border-muted before:content-[''] rtl:before:translate-x-1.5",
//   "after:pointer-events-none after:absolute after:bottom-[42%] after:end-1.5 after:size-[5px] after:-translate-x-1.5 after:translate-y-1/2 after:rotate-45  after:border-b-[1.5px] after:border-r-[1.5px] after:border-muted after:content-[''] rtl:after:translate-x-1.5",
// ];