@maestro-js/agent-skills 1.0.0-alpha.2 → 1.0.0-alpha.21

package/skills/maestro-examples/references/cadence/cadence-web/.auth/user.json

@@ -0,0 +1,15 @@
+{
+  "cookies": [
+    {
+      "name": "cadence_session",
+      "value": "i1To.BLvpK4v2AZ5oaUF1.bEkATVN1vH83APq3cB1HI2kgtoEq%2B9oYhQL7qxEIzLC6TTZj.ARQCtO%2BCqIavpkpd2uhxeg%3D%3D",
+      "domain": "localhost",
+      "path": "/",
+      "expires": 1778360173.123072,
+      "httpOnly": true,
+      "secure": false,
+      "sameSite": "Lax"
+    }
+  ],
+  "origins": []
+}

package/skills/maestro-examples/references/cadence/cadence-web/app/app.css

@@ -0,0 +1,112 @@
+@import 'tailwindcss';
+@plugin "@tailwindcss/typography";
+
+@theme {
+  --color-primary-50: var(--color-blue-50);
+  --color-primary-100: var(--color-blue-100);
+  --color-primary-200: var(--color-blue-200);
+  --color-primary-300: var(--color-blue-300);
+  --color-primary-400: var(--color-blue-400);
+  --color-primary-500: var(--color-blue-500);
+  --color-primary-600: var(--color-blue-600);
+  --color-primary-700: var(--color-blue-700);
+  --color-primary-800: var(--color-blue-800);
+  --color-primary-900: var(--color-blue-900);
+  --color-primary-950: var(--color-blue-950);
+
+  --color-positive-50: var(--color-emerald-50);
+  --color-positive-100: var(--color-emerald-100);
+  --color-positive-200: var(--color-emerald-200);
+  --color-positive-300: var(--color-emerald-300);
+  --color-positive-400: var(--color-emerald-400);
+  --color-positive-500: var(--color-emerald-500);
+  --color-positive-600: var(--color-emerald-600);
+  --color-positive-700: var(--color-emerald-700);
+  --color-positive-800: var(--color-emerald-800);
+  --color-positive-900: var(--color-emerald-900);
+  --color-positive-950: var(--color-emerald-950);
+
+  --color-negative-50: var(--color-red-50);
+  --color-negative-100: var(--color-red-100);
+  --color-negative-200: var(--color-red-200);
+  --color-negative-300: var(--color-red-300);
+  --color-negative-400: var(--color-red-400);
+  --color-negative-500: var(--color-red-500);
+  --color-negative-600: var(--color-red-600);
+  --color-negative-700: var(--color-red-700);
+  --color-negative-800: var(--color-red-800);
+  --color-negative-900: var(--color-red-900);
+  --color-negative-950: var(--color-red-950);
+
+  --color-neutral-50: var(--color-gray-50);
+  --color-neutral-100: var(--color-gray-100);
+  --color-neutral-200: var(--color-gray-200);
+  --color-neutral-300: var(--color-gray-300);
+  --color-neutral-400: var(--color-gray-400);
+  --color-neutral-500: var(--color-gray-500);
+  --color-neutral-600: var(--color-gray-600);
+  --color-neutral-700: var(--color-gray-700);
+  --color-neutral-800: var(--color-gray-800);
+  --color-neutral-900: var(--color-gray-900);
+  --color-neutral-950: var(--color-gray-950);
+
+  --font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+}
+
+/* Base styles */
+html {
+  @apply h-full antialiased;
+}
+
+body {
+  @apply h-full bg-white text-neutral-900 font-sans text-sm leading-relaxed;
+}
+
+/* Interactive element base states */
+button,
+[role='button'] {
+  @apply cursor-pointer;
+}
+
+a,
+button,
+[role='button'],
+input,
+select,
+textarea {
+  @apply outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40 focus-visible:ring-offset-1 rounded-sm;
+}
+
+/* Top nav item styles */
+.top-nav-item {
+  @apply flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-sm font-medium text-neutral-500 transition-colors duration-100;
+}
+
+.top-nav-item:hover {
+  @apply bg-neutral-100 text-neutral-900;
+}
+
+.top-nav-item.active {
+  @apply bg-primary-50 text-primary-700;
+}
+
+/* Typography utilities */
+.typography-h1 {
+  @apply text-2xl font-semibold tracking-tight text-balance text-neutral-900;
+}
+
+.typography-h2 {
+  @apply text-base font-semibold text-neutral-900;
+}
+
+.typography-h3 {
+  @apply text-sm font-semibold text-neutral-900;
+}
+
+.typography-link {
+  @apply text-sm font-medium text-blue-600 hover:text-blue-500;
+}
+
+.typography-button {
+  @apply text-sm font-medium;
+}

package/skills/maestro-examples/references/cadence/cadence-web/app/components/auth-layout.tsx

@@ -0,0 +1,39 @@
+import type { ReactNode } from 'react'
+import { InlineAlert } from './inline-alert'
+
+interface AuthLayoutProps {
+  title: string
+  subtitle: string
+  formError?: string | null | false
+  footer?: ReactNode
+  children: ReactNode
+}
+
+export function AuthLayout({ title, subtitle, formError, footer, children }: AuthLayoutProps) {
+  return (
+    <div className="flex min-h-dvh items-center justify-center bg-linear-to-br from-blue-50 via-white to-indigo-50 px-4 py-12">
+      <div className="w-full max-w-xs">
+        <div className="flex flex-col items-center gap-3">
+          <div className="flex size-12 items-center justify-center rounded-xl bg-linear-to-br from-blue-600 to-indigo-600 shadow-md">
+            <span className="text-xl font-semibold text-white">C</span>
+          </div>
+          <div className="text-center">
+            <h1 className="text-xl font-semibold tracking-tight text-balance text-neutral-900">{title}</h1>
+            <p className="mt-1 text-sm text-pretty text-neutral-500">{subtitle}</p>
+          </div>
+        </div>
+
+        <div className="mt-8 rounded-xl bg-white p-6 shadow-md ring-1 ring-black/5">
+          {formError && (
+            <div className="mb-6">
+              <InlineAlert variant="negative" description={formError} />
+            </div>
+          )}
+          {children}
+        </div>
+
+        {footer && <p className="mt-6 text-center text-sm text-neutral-500">{footer}</p>}
+      </div>
+    </div>
+  )
+}

package/skills/maestro-examples/references/cadence/cadence-web/app/components/back-link.tsx

@@ -0,0 +1,24 @@
+import { Link } from 'react-router'
+
+interface BackLinkProps {
+  to: string
+  children: string
+}
+
+export function BackLink({ to, children }: BackLinkProps) {
+  return (
+    <Link
+      to={to}
+      className="inline-flex items-center gap-1.5 text-sm text-neutral-500 transition-colors hover:text-neutral-700"
+    >
+      <svg viewBox="0 0 16 16" fill="currentColor" className="size-4">
+        <path
+          fillRule="evenodd"
+          d="M9.78 4.22a.75.75 0 0 1 0 1.06L7.06 8l2.72 2.72a.75.75 0 1 1-1.06 1.06L5.47 8.53a.75.75 0 0 1 0-1.06l3.25-3.25a.75.75 0 0 1 1.06 0Z"
+          clipRule="evenodd"
+        />
+      </svg>
+      {children}
+    </Link>
+  )
+}

package/skills/maestro-examples/references/cadence/cadence-web/app/components/button-group.tsx

@@ -0,0 +1,78 @@
+// From @maestro-js/components
+// Install with: pnpm maestro components:add button-group --directory app
+
+import * as React from 'react'
+import { mergeProps } from '@react-aria/utils'
+import { tw } from '../utils/tw'
+
+export type ButtonGroupOrientation = 'horizontal' | 'vertical'
+export type ButtonGroupAlignment = 'start' | 'center' | 'end'
+export type ButtonGroupSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+
+export type ButtonGroupProps = {
+  orientation?: ButtonGroupOrientation
+  alignment?: ButtonGroupAlignment
+  size?: ButtonGroupSize
+  className?: string
+  children?: React.ReactNode
+  'aria-label'?: string
+  'aria-labelledby'?: string
+  'aria-describedby'?: string
+  fullWidth?: boolean
+}
+
+export const ButtonGroupContext = React.createContext<{
+  orientation?: ButtonGroupOrientation
+  alignment?: ButtonGroupAlignment
+  size?: ButtonGroupSize
+  fullWidth?: boolean
+  className?: string
+}>({})
+
+const sizeGapClasses: Record<ButtonGroupSize, string> = {
+  xl: 'gap-4',
+  lg: 'gap-3',
+  md: 'gap-2',
+  sm: 'gap-1',
+  xs: 'gap-0.5'
+}
+
+const alignmentClasses: Record<ButtonGroupAlignment, string> = {
+  start: 'justify-start',
+  center: 'justify-center',
+  end: 'justify-end'
+}
+
+export function ButtonGroup(inputProps: ButtonGroupProps) {
+  const context = React.useContext(ButtonGroupContext)
+  const {
+    orientation = 'horizontal',
+    alignment = 'end',
+    size = 'md',
+    className,
+    children,
+    fullWidth,
+    ...ariaProps
+  } = mergeProps(React.useContext(ButtonGroupContext), inputProps)
+
+  return (
+    <div
+      role="group"
+      aria-label={ariaProps['aria-label']}
+      aria-labelledby={ariaProps['aria-labelledby']}
+      aria-describedby={ariaProps['aria-describedby']}
+      className={tw(
+        'inline-flex w-fit',
+        sizeGapClasses[size],
+        orientation === 'horizontal' ? 'flex-row items-center flex-wrap' : 'flex-col',
+        alignmentClasses[alignment],
+        fullWidth && 'w-full',
+        className
+      )}
+    >
+      {children}
+    </div>
+  )
+}
+
+ButtonGroup.displayName = 'ButtonGroup'

package/skills/maestro-examples/references/cadence/cadence-web/app/components/button-link.tsx

@@ -0,0 +1,77 @@
+// From @maestro-js/components
+// Install with: pnpm maestro components:add button-link --directory app
+
+import * as React from 'react'
+import { Link } from 'react-router'
+import { usePress } from '@react-aria/interactions'
+import { mergeProps } from '@react-aria/utils'
+import { Spinner } from './spinner'
+import {
+  getButtonClasses,
+  type ButtonColor,
+  type ButtonShape,
+  type ButtonSize,
+  type ButtonVariant
+} from './helpers/get-button-classes'
+import { useSpinDelay } from '../utils/use-spin-delay'
+import { tw } from '../utils/tw'
+import { ButtonContext } from './helpers/button-context'
+
+export type ButtonLinkProps = React.ComponentPropsWithoutRef<typeof Link> & {
+  size?: ButtonSize
+  variant?: ButtonVariant
+  color?: ButtonColor
+  shape?: ButtonShape
+  disabled?: boolean
+  fullWidth?: boolean
+  isPending?: boolean
+}
+
+export const ButtonLink = React.forwardRef<HTMLAnchorElement, ButtonLinkProps>(
+  ({ disabled, fullWidth, isPending: isPendingProp, children, onClick, className, ...propsRaw }, ref) => {
+    const {
+      size = 'md',
+      variant = 'contained',
+      color = 'primary',
+      shape = 'oval',
+      ...props
+    } = mergeProps(propsRaw, React.useContext(ButtonContext))
+    const { isPressed, pressProps } = usePress({ isDisabled: disabled })
+
+    const isPending = isPendingProp ?? false
+    const showSpinner = useSpinDelay(isPending, { delay: 500, minDuration: 200 })
+
+    const handleClick = disabled || isPending ? (e: React.MouseEvent<HTMLAnchorElement>) => e.preventDefault() : onClick
+
+    return (
+      <Link
+        {...mergeProps(props, pressProps, { onClick: handleClick })}
+        ref={ref}
+        data-pending={isPending || undefined}
+        data-disabled={disabled || undefined}
+        data-pressed={(isPressed && !disabled) || undefined}
+        aria-disabled={disabled || undefined}
+        className={getButtonClasses({
+          size,
+          variant,
+          color,
+          shape,
+          className: tw(fullWidth && 'w-full', className)
+        })}
+      >
+        {(size === 'xs' || size === 'sm' || shape === 'circle') && (
+          <span className="absolute left-1/2 top-1/2 size-12 -translate-x-1/2 -translate-y-1/2" aria-hidden="true" />
+        )}
+        <span className={tw('inline-flex items-center gap-2', showSpinner && 'opacity-0')}>{children}</span>
+        <span
+          aria-hidden={!showSpinner ? true : undefined}
+          className={tw('absolute inset-0 flex items-center justify-center', !showSpinner && 'opacity-0')}
+        >
+          <Spinner className="size-4" />
+        </span>
+      </Link>
+    )
+  }
+)
+
+ButtonLink.displayName = 'ButtonLink'

package/skills/maestro-examples/references/cadence/cadence-web/app/components/button.tsx

@@ -0,0 +1,139 @@
+// From @maestro-js/components
+// Install with: pnpm maestro components:add button --directory app
+
+import * as React from 'react'
+import { Spinner } from './spinner'
+import { flushSync } from 'react-dom'
+import { composeRenderProps } from 'react-aria-components'
+import {
+  getButtonClasses,
+  type ButtonColor,
+  type ButtonShape,
+  type ButtonSize,
+  type ButtonVariant
+} from './helpers/get-button-classes'
+import { HeadlessButton } from './helpers/headless-button'
+import { useSpinDelay } from '../utils/use-spin-delay'
+import { usePreventDefault } from '../utils/use-prevent-default'
+import { composeTailwindRenderProps, tw } from '../utils/tw'
+import { useStableAccessor } from '../utils/use-stable-accessor'
+import { mergeProps } from '@react-aria/utils'
+import { ButtonContext } from './helpers/button-context'
+
+// --- Public types ---
+
+export type ButtonProps = {
+  variant?: ButtonVariant
+  color?: ButtonColor
+  size?: ButtonSize
+  shape?: ButtonShape
+  isToggled?: boolean
+  fullWidth?: boolean
+  onActionSucceeded?: () => void
+  onActionCompleted?: () => void
+  disabled?: boolean
+  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void
+  className?: string
+  children?: React.ReactNode
+  value?: string | undefined
+  isPending?: boolean
+} & Partial<Pick<React.ComponentProps<'button'>, 'type' | 'role' | 'name' | 'form' | 'id' | 'title' | 'aria-label'>>
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ isToggled, onActionSucceeded, onActionCompleted, isPending: isPendingProp, ...propsRaw }, ref) => {
+    const {
+      variant = 'contained',
+      color = 'primary',
+      size = 'md',
+      shape = 'oval',
+      fullWidth,
+      ...props
+    } = mergeProps(propsRaw, React.useContext(ButtonContext))
+
+    const { isClicking, onClick: isClickingHandler } = useIsClicking(props.onClick)
+
+    const isPending = isPendingProp || isClicking
+    const isPendingSmoothed = useSpinDelay(isPending, { delay: 0, minDuration: 50 })
+    const showSpinner = useSpinDelay(isPending, { delay: 500, minDuration: 200 })
+
+    const getOnActionCompleted = useStableAccessor(onActionCompleted)
+    const getOnActionSucceeded = useStableAccessor(onActionSucceeded)
+    const wasPending = React.useRef(false)
+    React.useEffect(() => {
+      if (isPendingSmoothed !== wasPending.current) {
+        wasPending.current = isPendingSmoothed
+        if (!isPendingSmoothed) {
+          getOnActionCompleted()?.()
+          getOnActionSucceeded()?.()
+        }
+      }
+    }, [isPendingSmoothed, getOnActionCompleted, getOnActionSucceeded])
+
+    const onClick = usePreventDefault(isClickingHandler, showSpinner || isClicking)
+
+    return (
+      <HeadlessButton
+        {...props}
+        ref={ref}
+        data-pending={isPending}
+        onClick={onClick}
+        {...(isToggled != null ? { 'aria-pressed': isToggled } : {})}
+        className={composeTailwindRenderProps(
+          props.className,
+          tw(getButtonClasses({ variant, color, size, shape, isToggled }), fullWidth && 'w-full')
+        )}
+      >
+        {composeRenderProps(props.children, (children) => (
+          <>
+            {(size === 'xs' || size === 'sm' || shape === 'circle') && (
+              <span className="absolute left-1/2 top-1/2 size-12 -translate-x-1/2 -translate-y-1/2" aria-hidden="true" />
+            )}
+            <span className={tw('inline-flex items-center gap-2', showSpinner && 'opacity-0')}>{children}</span>
+            <span
+              aria-hidden={!showSpinner ? true : undefined}
+              className={tw('absolute inset-0 flex items-center justify-center', !showSpinner && 'opacity-0')}
+            >
+              <Spinner className="size-4" />
+            </span>
+          </>
+        ))}
+      </HeadlessButton>
+    )
+  }
+)
+
+Button.displayName = 'Button'
+
+function useIsClicking<C extends ((event: React.MouseEvent<any, MouseEvent>) => unknown) | undefined>(
+  onClickRaw: C
+): { onClick: C; isClicking: boolean } {
+  type Event = C extends (event: infer E) => unknown ? E : never
+
+  const [isClicking, setIsClicking] = React.useState<boolean>(false)
+
+  const onClickRawStabilized = useStableAccessor(onClickRaw)
+
+  const onClickDebounced = React.useCallback(
+    (event: Event) => {
+      try {
+        const onClickInner = onClickRawStabilized()
+        flushSync(() => setIsClicking(true))
+        const result = onClickInner ? onClickInner(event) : null
+        Promise.resolve(result).finally(() => {
+          setIsClicking(false)
+        })
+        return result
+      } catch (e) {
+        setIsClicking(false)
+        throw e
+      }
+    },
+    [onClickRawStabilized, setIsClicking]
+  )
+
+  if (!onClickRaw) {
+    return { onClick: undefined as C, isClicking }
+  } else {
+    return { onClick: onClickDebounced as C, isClicking }
+  }
+}

package/skills/maestro-examples/references/cadence/cadence-web/app/components/checkbox.tsx

@@ -0,0 +1,210 @@
+// From @maestro-js/components
+// Install with: pnpm maestro components:add checkbox --directory app
+
+import * as React from 'react'
+import { Checkbox as AriaCheckbox } from 'react-aria-components'
+import { HeadlessForm } from '@maestro-js/form'
+import type { ValidationFunction, ValidationResult } from '@maestro-js/form'
+import { tw } from '../utils/tw'
+import { FormFieldComponents } from './helpers/form-field'
+import { Icon } from './icon'
+
+// ── Props ─────────────────────────────────────────────────────────────────────
+
+export type PlainCheckboxProps = {
+  name?: string
+  form?: string
+
+  isDisabled?: boolean
+  isRequired?: boolean
+  isInvalid?: boolean
+  validate?: ValidationFunction<boolean>
+
+  checked?: boolean
+  defaultChecked?: boolean
+  onChange?: (checked: boolean) => void
+
+  'aria-label'?: string
+}
+
+export type LabeledCheckboxProps = {
+  name?: string
+  form?: string
+
+  label?: React.ReactNode
+  cornerHint?: React.ReactNode
+  helpText?: React.ReactNode
+  warningMessage?: React.ReactNode
+
+  isRequired?: boolean
+  isDisabled?: boolean
+  isIndeterminate?: boolean
+  isInvalid?: boolean
+  validate?: ValidationFunction<boolean>
+  errorMessage?: React.ReactNode | ((v: ValidationResult) => React.ReactNode)
+
+  checked?: boolean
+  defaultChecked?: boolean
+  onChange?: (checked: boolean) => void
+
+  value?: string
+}
+
+// ── Plain Checkbox ─────────────────────────────────────────────────────────────
+
+export function PlainCheckbox(props: PlainCheckboxProps) {
+  const hiddenInputRef = React.useRef<HTMLInputElement>(null)
+
+  const [checked, setChecked] = HeadlessForm.useControlledState(props.checked, props.defaultChecked ?? false, props.onChange)
+
+  const { isInvalid: validationInvalid, commitValidation } = HeadlessForm.useValidation(
+    {
+      validate: props.validate,
+      value: checked,
+      name: props.name,
+      isRequired: false,
+      form: props.form,
+      focus() {
+        hiddenInputRef.current?.closest('label')?.focus()
+      }
+    },
+    hiddenInputRef
+  )
+
+  return (
+    <AriaCheckbox
+      isSelected={checked}
+      onChange={(v) => {
+        setChecked(v)
+        commitValidation()
+      }}
+      isDisabled={props.isDisabled}
+      isInvalid={props.isInvalid || validationInvalid}
+      aria-label={props['aria-label']}
+      className="group inline-flex items-center focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600"
+    >
+      {({ isSelected, isIndeterminate, isDisabled }) => (
+        <>
+          {props.isDisabled || !props.name ? null : (
+            <HeadlessForm.HiddenInput
+              ref={hiddenInputRef}
+              name={props.name}
+              form={props.form}
+              value={checked ? 'true' : 'false'}
+            />
+          )}
+          <CheckboxBox isSelected={isSelected} isIndeterminate={isIndeterminate} isDisabled={isDisabled} />
+        </>
+      )}
+    </AriaCheckbox>
+  )
+}
+
+PlainCheckbox.displayName = 'PlainCheckbox'
+
+// ── Labeled Checkbox ───────────────────────────────────────────────────────────
+
+export function LabeledCheckbox(props: LabeledCheckboxProps) {
+  const hiddenInputRef = React.useRef<HTMLInputElement>(null)
+  const helpTextId = React.useId()
+
+  const [checked, setChecked] = HeadlessForm.useControlledState(props.checked, props.defaultChecked ?? false, props.onChange)
+
+  const {
+    validationMessage,
+    isInvalid: validationInvalid,
+    commitValidation
+  } = HeadlessForm.useValidation(
+    {
+      validate: props.validate,
+      value: checked,
+      name: props.name,
+      isRequired: props.isRequired,
+      form: props.form,
+      focus() {
+        hiddenInputRef.current?.closest('label')?.focus()
+      }
+    },
+    hiddenInputRef
+  )
+
+  const isInvalid = props.isInvalid || validationInvalid
+  const hasWarning = Boolean(props.warningMessage) && !isInvalid
+
+  return (
+    <AriaCheckbox
+      isSelected={checked}
+      isIndeterminate={props.isIndeterminate}
+      onChange={(v) => {
+        setChecked(v)
+        commitValidation()
+      }}
+      isDisabled={props.isDisabled}
+      isInvalid={isInvalid}
+      aria-describedby={helpTextId}
+      className="group relative flex items-start gap-3 select-none focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600"
+    >
+      {({ isSelected, isIndeterminate, isDisabled }) => (
+        <>
+          {props.isDisabled || !props.name ? null : (
+            <HeadlessForm.HiddenInput
+              ref={hiddenInputRef}
+              name={props.name}
+              form={props.form}
+              value={checked ? 'true' : 'false'}
+            />
+          )}
+          <div className="shrink-0">
+            <CheckboxBox isSelected={isSelected} isIndeterminate={isIndeterminate} isDisabled={isDisabled} />
+          </div>
+          <div className="flex flex-col justify-center">
+            <div className="flex items-center gap-2 justify-between">
+              <FormFieldComponents.Label as="span">{props.label}</FormFieldComponents.Label>
+              {props.cornerHint && <div className="text-sm text-neutral-500">{props.cornerHint}</div>}
+            </div>
+            <FormFieldComponents.FormFieldHelpText
+              id={helpTextId}
+              isInvalid={isInvalid}
+              validationMessage={validationMessage}
+              hasWarning={hasWarning}
+              warningMessage={props.warningMessage}
+              helpText={props.helpText}
+              UNSAFE_className="mt-0.5"
+            />
+          </div>
+        </>
+      )}
+    </AriaCheckbox>
+  )
+}
+
+LabeledCheckbox.displayName = 'LabeledCheckbox'
+
+// ── Helper components ──────────────────────────────────────────────────────────
+
+function CheckboxBox({
+  isSelected,
+  isIndeterminate,
+  isDisabled
+}: {
+  isSelected: boolean
+  isIndeterminate: boolean
+  isDisabled: boolean
+}) {
+  return (
+    <div
+      className={tw(
+        'relative size-5 rounded border transition-colors duration-200',
+        isSelected || isIndeterminate ? 'bg-primary-600 border-primary-600' : 'bg-white border-neutral-300',
+        !isDisabled && !(isSelected || isIndeterminate) && 'group-hovered:border-neutral-400',
+        isDisabled && 'cursor-not-allowed border-neutral-300 bg-neutral-100'
+      )}
+    >
+      {isIndeterminate ? (
+        <Icon name="minus" className="h-5/6 absolute inset-0 m-auto aspect-square stroke-white text-white" />
+      ) : (
+        <Icon name="check" className="h-5/6 absolute inset-0 m-auto aspect-square stroke-white text-white" />
+      )}
+    </div>
+  )
+}