{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "table-checkbox-support",
  "title": "Table Checkbox Support",
  "dependencies": [
    "@radix-ui/react-checkbox",
    "@rc-component/util",
    "motion",
    "radix-ui",
    "ts-xor"
  ],
  "registryDependencies": [
    "table-shared-core"
  ],
  "files": [
    {
      "path": "components/checkbox/index.tsx",
      "content": "\"use client\";\n\nimport type { XOR } from \"ts-xor\";\nimport * as React from \"react\";\n\nimport type { CheckboxChangeEvent, CheckboxProps } from \"./checkbox\";\nimport { CheckboxControl } from \"./_components/checkbox-control\";\nimport { Checkbox as InternalCheckbox } from \"./checkbox\";\nimport { CheckboxGroup } from \"./checkbox-group\";\n\nexport * from \"./checkbox\";\nexport * from \"./checkbox-group\";\n\ntype ShadcnCheckboxProps = Omit<\n  React.ComponentProps<typeof CheckboxControl>,\n  \"onChange\"\n>;\n\ntype XORCheckboxProps = XOR<CheckboxProps, ShadcnCheckboxProps>;\n\nconst ConditionCheckbox = (props: XORCheckboxProps) => {\n  const hasLabelContent = React.Children.toArray(props.children).some(\n    (child) => {\n      if (typeof child === \"boolean\") {\n        return false;\n      }\n\n      return child !== \"\";\n    },\n  );\n  const hasDescriptionContent = React.Children.toArray(\n    (props as CheckboxProps).description,\n  ).some((child) => {\n    if (typeof child === \"boolean\") {\n      return false;\n    }\n\n    return child !== \"\";\n  });\n  const isShadcnCheckbox =\n    (props.onCheckedChange !== undefined &&\n      !hasLabelContent &&\n      !hasDescriptionContent) ||\n    (!hasLabelContent && !hasDescriptionContent);\n\n  // Keep the no-label path wrapper-free, but adapt onChange to preserve the public Checkbox API.\n  if (isShadcnCheckbox) {\n    const checkboxProps = props as CheckboxProps & ShadcnCheckboxProps;\n    const { onChange, onCheckedChange, ...controlProperties } = checkboxProps;\n\n    return (\n      <CheckboxControl\n        {...controlProperties}\n        onCheckedChange={(nextChecked) => {\n          onCheckedChange?.(nextChecked);\n          onChange?.({\n            type: \"change\",\n            target: {\n              name: checkboxProps.name,\n              value:\n                checkboxProps.value as unknown as CheckboxChangeEvent[\"target\"][\"value\"],\n              checked: nextChecked === \"indeterminate\" ? false : nextChecked,\n              type: \"checkbox\",\n            },\n            nativeEvent: new MouseEvent(\"change\"),\n            preventDefault: () => {\n              //\n            },\n            stopPropagation: () => {\n              //\n            },\n          } satisfies CheckboxChangeEvent);\n        }}\n      />\n    );\n  }\n\n  return <InternalCheckbox {...(props as CheckboxProps)} />;\n};\n\ntype InternalCheckboxType = typeof ConditionCheckbox;\n\ntype CompoundedComponent = InternalCheckboxType & {\n  Group: typeof CheckboxGroup;\n};\nconst Checkbox = ConditionCheckbox as unknown as CompoundedComponent;\n\nCheckbox.Group = CheckboxGroup;\n\nexport { Checkbox };\nexport { CheckboxGroup } from \"./checkbox-group\";\n\nexport { type CheckboxProps } from \"./checkbox\";\n",
      "type": "registry:file",
      "target": "components/checkbox/index.tsx"
    },
    {
      "path": "components/checkbox/checkbox.tsx",
      "content": "import * as React from \"react\";\n\nimport type { CheckboxGroupContext, CheckboxValueType } from \"./group-context\";\nimport { devUseWarning as developmentUseWarning } from \"../_util/warning\";\nimport { cn } from \"../../lib/utils\";\nimport Wave from \"../../lib/wave\";\nimport { LoadingIcon } from \"../button/loading-icon\";\nimport { ConfigContext } from \"../config-provider/context\";\nimport DisabledContext from \"../config-provider/disabled-context\";\nimport { inputDisabledVariants, inputSizeVariants } from \"../input/variants\";\nimport { Label } from \"../label/label\";\nimport { CheckboxControl } from \"./_components/checkbox-control\";\nimport GroupContext from \"./group-context\";\nimport useBubbleLock from \"./use-bubble-lock\";\n\ntype AbstractCheckboxProperties<\n  TChangeEvent,\n  TValue extends CheckboxValueType = CheckboxValueType,\n> = {\n  id?: string;\n  name?: string;\n\n  // value\n  value?: TValue;\n  checked?: boolean;\n  defaultChecked?: boolean;\n  onChange?: (e: TChangeEvent) => void;\n  onClick?: React.MouseEventHandler<HTMLElement>;\n  onMouseEnter?: React.MouseEventHandler<HTMLElement>;\n  onMouseLeave?: React.MouseEventHandler<HTMLElement>;\n\n  // state\n  disabled?: boolean;\n  loading?: boolean;\n  required?: boolean;\n\n  // styles\n  style?: React.CSSProperties;\n  className?: string;\n  classNames?: {\n    label?: string;\n  };\n\n  // render\n  children?: React.ReactNode;\n  description?: React.ReactNode;\n\n  // config\n  skipGroup?: boolean;\n};\nexport interface CheckboxChangeEventTarget<\n  TValue extends CheckboxValueType = CheckboxValueType,\n> extends Omit<CheckboxProperties<TValue>, \"value\"> {\n  checked: boolean;\n  name?: string;\n  type: \"checkbox\" | \"radio\";\n  value: TValue;\n}\n\nexport interface CheckboxChangeEvent<\n  TValue extends CheckboxValueType = CheckboxValueType,\n> {\n  type: \"change\";\n  target: CheckboxChangeEventTarget<TValue>;\n  stopPropagation: () => void;\n  preventDefault: () => void;\n  nativeEvent: MouseEvent;\n}\n\ntype CheckboxProperties<TValue extends CheckboxValueType = CheckboxValueType> =\n  AbstractCheckboxProperties<CheckboxChangeEvent<TValue>, TValue> &\n    React.AriaAttributes & {\n      key?: React.Key; // fix warning when use key (shadcn)\n      indeterminate?: boolean;\n      variant?: \"default\" | \"card\";\n      size?: \"small\" | \"middle\" | \"large\";\n    };\n\nfunction Checkbox<TValue extends CheckboxValueType = CheckboxValueType>(\n  properties: CheckboxProperties<TValue>,\n) {\n  const {\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n\n    value,\n\n    loading,\n    disabled,\n\n    indeterminate = false,\n    checked,\n    defaultChecked,\n\n    // styles\n    style,\n    className,\n    classNames,\n    variant = \"default\",\n    size = \"middle\",\n    // render\n    children,\n    description,\n\n    skipGroup,\n\n    // on\n    // onClick,\n    onChange,\n    onMouseEnter,\n    onMouseLeave,\n    ...restProperties\n  } = properties;\n\n  const { direction, checkbox } = React.useContext(ConfigContext);\n  const checkboxGroup = React.useContext(\n    GroupContext as unknown as React.Context<\n      CheckboxGroupContext<TValue> | undefined\n    >,\n  );\n  const contextDisabled = React.useContext(DisabledContext);\n  const mergedDisabled = checkboxGroup?.disabled ?? disabled ?? contextDisabled;\n\n  const isGroup = !!(checkboxGroup && !skipGroup);\n\n  if (process.env.NODE_ENV !== \"production\") {\n    const warning = developmentUseWarning(\"Checkbox\");\n\n    warning(\n      checked !== undefined || !!checkboxGroup || value === undefined,\n      \"usage\",\n      \"`value` is not a valid prop, do you mean `checked`?\",\n    );\n  }\n\n  const mergedChecked = isGroup\n    ? value === undefined\n      ? false\n      : !!checkboxGroup.value?.includes(value)\n    : checked;\n\n  const hasLabelContent = React.Children.toArray(children).some((child) => {\n    if (typeof child === \"boolean\") {\n      return false;\n    }\n\n    return child !== \"\";\n  });\n\n  const hasDescriptionContent = React.Children.toArray(description).some(\n    (child) => {\n      if (typeof child === \"boolean\") {\n        return false;\n      }\n\n      return child !== \"\";\n    },\n  );\n\n  const rendersLabelContent = hasLabelContent && !loading;\n  const rendersDescriptionContent = hasDescriptionContent && !loading;\n\n  const generatedLabelId = React.useId();\n  const generatedDescriptionId = React.useId();\n  const mergedAriaLabelledBy =\n    [ariaLabelledBy, rendersLabelContent ? generatedLabelId : undefined]\n      .filter(Boolean)\n      .join(\" \") || undefined;\n  const mergedAriaDescribedBy =\n    [\n      ariaDescribedBy,\n      rendersDescriptionContent ? generatedDescriptionId : undefined,\n    ]\n      .filter(Boolean)\n      .join(\" \") || undefined;\n\n  // ============================ Event Lock ============================\n  const [onLabelClick, onInputClick] = useBubbleLock(restProperties.onClick);\n\n  return (\n    <Wave component=\"Checkbox\" disabled={mergedDisabled}>\n      <Label\n        className={cn(\n          \"inline-flex shrink-0 cursor-pointer text-sm\",\n          hasDescriptionContent ? \"items-start\" : \"items-center\",\n          direction === \"rtl\" ? \"flex-row-reverse\" : \"flex-row\",\n          variant === \"card\" && [\n            \"hover:bg-accent/50 items-start gap-2 rounded-md border\",\n            inputSizeVariants({ size }),\n            \"h-auto\",\n            size === \"small\"\n              ? \"min-h-6 px-2.5 py-1.5\"\n              : size === \"large\"\n                ? \"min-h-10 px-4 py-3\"\n                : \"min-h-8 px-3 py-2\",\n            \"has-aria-checked:border-primary-600 has-aria-checked:bg-primary-50\",\n            \"dark:has-aria-checked:border-primary-900 dark:has-aria-checked:bg-primary-950\",\n          ],\n          inputDisabledVariants({ disabled: mergedDisabled }),\n          className,\n        )}\n        style={{ ...checkbox?.style, ...style }}\n        onMouseEnter={onMouseEnter}\n        onMouseLeave={onMouseLeave}\n        onClick={onLabelClick}\n      >\n        <CheckboxControl\n          className={cn(\n            hasDescriptionContent || variant === \"card\"\n              ? \"self-start\"\n              : \"self-center\",\n            \"disabled:border-black/55 disabled:bg-black/15\",\n            variant === \"card\" && [\n              \"data-[state=checked]:border-primary-600 data-[state=checked]:bg-primary-600 data-[state=checked]:text-white\",\n              \"dark:data-[state=checked]:border-primary-700 dark:data-[state=checked]:bg-primary-700\",\n            ],\n          )}\n          value={value as string | undefined}\n          checked={indeterminate ? \"indeterminate\" : mergedChecked}\n          defaultChecked={defaultChecked}\n          name={isGroup ? checkboxGroup.name : restProperties.name}\n          disabled={mergedDisabled}\n          aria-label={ariaLabel}\n          aria-labelledby={mergedAriaLabelledBy}\n          aria-describedby={mergedAriaDescribedBy}\n          onClick={onInputClick}\n          onCheckedChange={(nextChecked) => {\n            onChange?.({\n              type: \"change\",\n              target: {\n                type: \"checkbox\",\n                name: isGroup ? checkboxGroup.name : restProperties.name,\n                value: value as unknown as TValue,\n                checked: nextChecked === \"indeterminate\" ? false : nextChecked,\n                indeterminate,\n                // \"aria-describedby\": ariaDescribedBy,\n                // \"aria-invalid\": ariaInvalid,\n              },\n\n              nativeEvent: new MouseEvent(\"change\"),\n              preventDefault: () => {\n                //\n              },\n              stopPropagation: () => {\n                //\n              },\n            });\n\n            if (isGroup && checkboxGroup.toggleOption && value !== undefined) {\n              checkboxGroup.toggleOption({ label: children, value });\n            }\n          }}\n          {...restProperties}\n        />\n        {loading ? <LoadingIcon /> : undefined}\n        {!loading &&\n          (hasDescriptionContent ? (\n            <div\n              data-slot={rendersLabelContent ? \"checkbox-label\" : undefined}\n              className={cn(\n                \"flex flex-col gap-1\",\n                variant === \"card\" ? \"w-full leading-none font-medium\" : \"px-2\",\n                classNames?.label,\n              )}\n            >\n              {rendersLabelContent ? (\n                <div\n                  id={generatedLabelId}\n                  className={cn(\n                    variant === \"card\"\n                      ? \"w-full leading-none font-medium\"\n                      : \"leading-4\",\n                  )}\n                >\n                  {children}\n                </div>\n              ) : null}\n              {rendersDescriptionContent ? (\n                <p\n                  id={generatedDescriptionId}\n                  className=\"text-muted-foreground text-xs font-normal\"\n                >\n                  {description}\n                </p>\n              ) : null}\n            </div>\n          ) : rendersLabelContent ? (\n            variant === \"card\" ? (\n              <div\n                id={generatedLabelId}\n                data-slot=\"checkbox-label\"\n                className={cn(\n                  \"mt-px flex w-full flex-col gap-0.5\",\n                  \"leading-none font-medium\",\n                  classNames?.label,\n                )}\n              >\n                {children}\n              </div>\n            ) : (\n              <span\n                id={generatedLabelId}\n                data-slot=\"checkbox-label\"\n                className={cn(\"mt-px px-2 leading-none\", classNames?.label)}\n              >\n                {children}\n              </span>\n            )\n          ) : null)}\n      </Label>\n    </Wave>\n  );\n}\n\nexport type {\n  CheckboxProperties as CheckboxProps,\n  AbstractCheckboxProperties as AbstractCheckboxProps,\n};\nexport { Checkbox };\n",
      "type": "registry:file",
      "target": "components/checkbox/checkbox.tsx"
    },
    {
      "path": "components/checkbox/_components/checkbox-control.tsx",
      "content": "import type * as React from \"react\";\nimport { CheckIcon, MinusIcon } from \"lucide-react\";\nimport { Checkbox as CheckboxPrimitive } from \"radix-ui\";\n\nimport { cn } from \"../../../lib/utils\";\n\ntype CheckboxControlProps = React.ComponentProps<typeof CheckboxPrimitive.Root>;\n\nfunction CheckboxControl({ className, ...props }: CheckboxControlProps) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        \"group peer border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:data-[state=checked]:bg-primary size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50\",\n        \"data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-muted data-[state=indeterminate]:text-primary\",\n        className,\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"grid place-content-center text-current transition-none\"\n      >\n        <CheckIcon className=\"hidden size-3.5 group-data-[state=checked]:block\" />\n        <MinusIcon className=\"hidden size-3.5 group-data-[state=indeterminate]:block\" />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  );\n}\n\nexport { CheckboxControl };\nexport type { CheckboxControlProps };\n",
      "type": "registry:file",
      "target": "components/checkbox/_components/checkbox-control.tsx"
    },
    {
      "path": "components/checkbox/checkbox-group.tsx",
      "content": "import { useMemo } from \"react\";\nimport { useControlledState } from \"@rc-component/util\";\n\nimport type { ButtonColorVariants } from \"../button/button-variants\";\nimport type {\n  CheckboxChangeEvent,\n  CheckboxProps as CheckboxProperties,\n} from \"./checkbox\";\nimport type { CheckboxValueType } from \"./group-context\";\nimport { cn } from \"../../lib/utils\";\nimport { Checkbox } from \"./checkbox\";\n\nexport interface CheckboxOptionType<\n  T extends CheckboxValueType = CheckboxValueType,\n> {\n  label: React.ReactNode;\n  value: T;\n  style?: React.CSSProperties;\n  className?: string; // 👈 5.25.0+\n  description?: React.ReactNode;\n  disabled?: boolean;\n  id?: string;\n  onChange?: (e: CheckboxChangeEvent<T>) => void;\n  required?: boolean;\n\n  color?: ButtonColorVariants[\"color\"];\n}\n\nexport interface AbstractCheckboxGroupProps<\n  T extends CheckboxValueType = CheckboxValueType,\n> {\n  options?: CheckboxOptionType<T>[];\n  style?: React.CSSProperties;\n  className?: string;\n  classNames?: {\n    item?: string;\n    label?: string;\n  };\n  disabled?: boolean;\n  optionVariant?: CheckboxProperties[\"variant\"];\n  size?: \"small\" | \"middle\" | \"large\";\n}\n\ntype CheckboxGroupProperties<T extends CheckboxValueType = CheckboxValueType> =\n  AbstractCheckboxGroupProps<T> & {\n    name?: string;\n    value?: T[];\n    defaultValue?: T[];\n    onChange?: (checkedValues: T[]) => void;\n  };\nconst CheckboxGroup = <T extends CheckboxValueType = CheckboxValueType>({\n  name,\n  value,\n  defaultValue,\n  options = [],\n  onChange,\n  disabled,\n  style,\n  className,\n  classNames,\n  optionVariant,\n  size,\n}: CheckboxGroupProperties<T>) => {\n  const [internalValue, setInternalValue] = useControlledState(\n    defaultValue,\n    value,\n  );\n\n  const memoizedOptions = useMemo<CheckboxOptionType<T>[]>(\n    () =>\n      options.map((option) => {\n        if (typeof option === \"string\" || typeof option === \"number\") {\n          return { label: option, value: option } as CheckboxOptionType<T>;\n        }\n        return option;\n      }),\n    [options],\n  );\n\n  return (\n    <div\n      data-slot=\"checkbox-group\"\n      style={style}\n      className={cn(\"inline-flex flex-wrap gap-2\", className)}\n    >\n      {memoizedOptions.map((o) => {\n        const isDisabled = o.disabled ?? disabled;\n        return (\n          <Checkbox\n            key={o.value.toString()}\n            id={o.id}\n            name={name}\n            required={o.required}\n            style={o.style}\n            checked={internalValue?.includes(o.value)}\n            value={o.value}\n            disabled={isDisabled}\n            onChange={(e) => {\n              if (isDisabled) return;\n\n              const newValue = e.target.checked\n                ? [...(internalValue ?? []), o.value]\n                : internalValue?.filter((x) => x !== o.value);\n\n              setInternalValue(newValue);\n              o.onChange?.(e);\n              onChange?.(newValue ?? []);\n            }}\n            className={cn(classNames?.item, o.className)}\n            classNames={classNames}\n            variant={optionVariant}\n            size={size}\n            description={o.description}\n          >\n            {o.label}\n          </Checkbox>\n        );\n      })}\n    </div>\n  );\n};\n\nexport type { CheckboxGroupProperties as CheckboxGroupProps };\nexport { CheckboxGroup };\n",
      "type": "registry:file",
      "target": "components/checkbox/checkbox-group.tsx"
    },
    {
      "path": "components/checkbox/group-context.ts",
      "content": "import React from \"react\";\n\nimport type { CheckboxOptionType } from \"./checkbox-group\";\n\nexport type CheckboxValueType = string | number | boolean;\n\nexport interface CheckboxGroupContext<\n  TValue extends CheckboxValueType = CheckboxValueType,\n> {\n  name?: string;\n  toggleOption?: (option: CheckboxOptionType<TValue>) => void;\n  value?: TValue[];\n  disabled?: boolean;\n  registerValue: (value: TValue) => void;\n  cancelValue: (value: TValue) => void;\n}\n\nconst GroupContext = React.createContext<\n  CheckboxGroupContext<CheckboxValueType> | undefined\n>(undefined);\n\nexport default GroupContext;\n",
      "type": "registry:file",
      "target": "components/checkbox/group-context.ts"
    },
    {
      "path": "components/checkbox/use-bubble-lock.ts",
      "content": "import React from \"react\";\nimport raf from \"rc-util/es/raf\";\n\n/**\n * When click on the label,\n * the event will be stopped to prevent the label from being clicked twice.\n * label click -> input click -> label click again\n */\nexport default function useBubbleLock(\n  onOriginInputClick?: React.MouseEventHandler<HTMLButtonElement>,\n) {\n  const labelClickLockReference = React.useRef<number | undefined>(undefined);\n\n  const clearLock = () => {\n    if (labelClickLockReference.current !== undefined) {\n      raf.cancel(labelClickLockReference.current);\n    }\n    labelClickLockReference.current = undefined;\n  };\n\n  const onLabelClick: React.MouseEventHandler<HTMLLabelElement> = () => {\n    clearLock();\n\n    labelClickLockReference.current = raf(() => {\n      labelClickLockReference.current = undefined;\n    });\n  };\n\n  const onInputClick: React.MouseEventHandler<HTMLButtonElement> = (e) => {\n    if (labelClickLockReference.current) {\n      e.stopPropagation();\n      clearLock();\n    }\n\n    onOriginInputClick?.(e);\n  };\n\n  return [onLabelClick, onInputClick] as const;\n}\n",
      "type": "registry:file",
      "target": "components/checkbox/use-bubble-lock.ts"
    },
    {
      "path": "components/button/loading-icon.tsx",
      "content": "import { cn } from \"../../lib/utils\";\n\nexport const LoadingIcon = ({\n  className,\n  ...properties\n}: React.SVGProps<SVGSVGElement>) => {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"1em\"\n      height=\"1em\"\n      viewBox=\"0 0 24 24\"\n      className={cn(\"animate-spin\", className)}\n      {...properties}\n    >\n      <defs>\n        <linearGradient\n          id=\"mingcuteLoadingFill0\"\n          x1=\"50%\"\n          x2=\"50%\"\n          y1=\"5.271%\"\n          y2=\"91.793%\"\n        >\n          <stop offset=\"0%\" stopColor=\"currentColor\"></stop>\n          <stop\n            offset=\"100%\"\n            stopColor=\"currentColor\"\n            stopOpacity={0.55}\n          ></stop>\n        </linearGradient>\n        <linearGradient\n          id=\"mingcuteLoadingFill1\"\n          x1=\"50%\"\n          x2=\"50%\"\n          y1=\"15.24%\"\n          y2=\"87.15%\"\n        >\n          <stop offset=\"0%\" stopColor=\"currentColor\" stopOpacity={0}></stop>\n          <stop\n            offset=\"100%\"\n            stopColor=\"currentColor\"\n            stopOpacity={0.55}\n          ></stop>\n        </linearGradient>\n      </defs>\n      <g fill=\"none\">\n        <path d=\"M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022m-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z\"></path>\n        <path\n          fill=\"url(#mingcuteLoadingFill0)\"\n          d=\"M8.749.021a1.5 1.5 0 0 1 .497 2.958A7.502 7.502 0 0 0 3 10.375a7.5 7.5 0 0 0 7.5 7.5v3c-5.799 0-10.5-4.7-10.5-10.5C0 5.23 3.726.865 8.749.021\"\n          transform=\"translate(1.5 1.625)\"\n        ></path>\n        <path\n          fill=\"url(#mingcuteLoadingFill1)\"\n          d=\"M15.392 2.673a1.5 1.5 0 0 1 2.119-.115A10.475 10.475 0 0 1 21 10.375c0 5.8-4.701 10.5-10.5 10.5v-3a7.5 7.5 0 0 0 5.007-13.084a1.5 1.5 0 0 1-.115-2.118\"\n          transform=\"translate(1.5 1.625)\"\n        ></path>\n      </g>\n    </svg>\n  );\n};\n",
      "type": "registry:file",
      "target": "components/button/loading-icon.tsx"
    },
    {
      "path": "components/button/button-variants.ts",
      "content": "import type { VariantProps } from \"tailwind-variants\";\nimport { tv } from \"tailwind-variants\";\n\nexport const buttonVariants = tv({\n  base: [\n    \"inline-flex shrink-0 items-center justify-center gap-2 border text-sm font-medium whitespace-nowrap ring-offset-white transition-all outline-none\",\n    // \"disabled:pointer-events-none disabled:opacity-50\",\n    \"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]\",\n    \"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n    // own\n    // \"shrink-0\", // disable flex box sizing - added by shadcn\n    \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n    \"[&_span[role='img']]:pointer-events-none [&_span[role='img']]:shrink-0 [&_span[role='img']:not([class*='size-'])]:size-4\",\n  ],\n  variants: {\n    action: {\n      true: [],\n    },\n\n    size: {\n      small: \"h-6 gap-1.5 rounded-sm px-2 py-0\",\n      middle: \"h-8 rounded-md px-[15px] has-[>svg]:px-2.5\",\n      large: \"h-10 rounded-lg px-4 py-2 has-[>svg]:px-4\",\n    },\n    shape: {\n      default: \"\",\n      icon: [\n        'sm:has-[span[class*=\"sm::not-sr-only\"]]:w-auto',\n        'max-sm:has-[span[class*=\"sm::not-sr-only\"]]:p-0',\n        '[&:not(:has(span[class*=\"sm::not-sr-only\"]))]:p-0',\n      ],\n      circle: \"rounded-full\",\n    },\n    /* Whenever to hidden text at mobile view */\n    srOnly: {\n      true: \"\",\n      false: \"\",\n    },\n  },\n  compoundVariants: [\n    // Size\n    {\n      size: \"small\",\n      shape: [\"icon\", \"circle\"],\n      className: \"w-6\",\n    },\n    {\n      size: \"middle\",\n      shape: [\"icon\", \"circle\"],\n      className: \"size-8\",\n    },\n    {\n      size: \"large\",\n      shape: [\"icon\", \"circle\"],\n      className: \"w-10\",\n    },\n  ],\n  defaultVariants: {\n    size: \"middle\",\n    shape: \"default\",\n  },\n});\n\nexport type ButtonColorVariants = VariantProps<typeof buttonColorVariants>;\n\nexport const buttonColorVariants = tv({\n  variants: {\n    disabled: {\n      true: \"cursor-not-allowed\",\n    },\n    variant: {\n      solid: [\"text-white\", \"hover:text-white\"],\n      outlined: [\n        \"border-border bg-background hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border shadow-xs\",\n      ],\n      dashed: [],\n      filled: [\"border-transparent\", \"hover:bg-background-hover\"],\n      link: [\"border-transparent\"],\n      text: \"border-transparent\",\n    },\n    color: {\n      default: [],\n      primary: [],\n      danger: [],\n      link: [],\n      success: [],\n      gray: [],\n      red: [],\n      orange: [],\n      amber: [],\n      yellow: [],\n      lime: [],\n      green: [],\n      emerald: [],\n      teal: [],\n      cyan: [],\n      sky: [],\n      blue: [],\n      indigo: [],\n      violet: [],\n      purple: [],\n      fuchsia: [],\n      pink: [],\n      rose: [],\n    },\n  },\n  compoundVariants: [\n    // solid\n    {\n      variant: \"solid\",\n      color: \"default\",\n      className: [\n        \"border-button-solid bg-button-solid\",\n        \"hover:border-button-solid-hover hover:bg-button-solid-hover\",\n        \"active:border-button-solid-active active:bg-button-solid-active\",\n      ],\n    },\n    {\n      variant: \"solid\",\n      color: \"primary\",\n      className: [\n        \"border-primary bg-primary\",\n        \"hover:border-primary-hover hover:bg-primary-hover\",\n        \"active:border-primary-active active:bg-primary-active\",\n      ],\n    },\n    {\n      variant: \"solid\",\n      color: \"danger\",\n      className: [\n        \"border-red-600 bg-red-600\",\n        \"hover:border-red-500 hover:bg-red-500\",\n        \"active:border-red-700 active:bg-red-700\",\n      ],\n    },\n    {\n      variant: \"solid\",\n      color: \"orange\",\n      className: [\n        \"border-orange-700 bg-orange-700\",\n        \"hover:border-orange-600 hover:bg-orange-600\",\n        \"active:border-orange-800 active:bg-orange-800\",\n      ],\n    },\n    {\n      variant: \"solid\",\n      color: \"green\",\n      className: [\n        \"border-green-700 bg-green-700\",\n        \"hover:border-green-600 hover:bg-green-600\",\n        \"active:border-green-800 active:bg-green-800\",\n      ],\n    },\n    {\n      variant: \"solid\",\n      color: \"emerald\",\n      className: [\n        \"border-emerald-600 bg-emerald-600\",\n        \"hover:border-emerald-500 hover:bg-emerald-500\",\n        \"active:border-emerald-700 active:bg-emerald-700\",\n      ],\n    },\n    {\n      variant: \"solid\",\n      color: \"cyan\",\n      className: [\n        \"border-cyan-600 bg-cyan-600\",\n        \"hover:border-cyan-500 hover:bg-cyan-500\",\n        \"active:border-cyan-700 active:bg-cyan-700\",\n      ],\n    },\n    {\n      variant: \"solid\",\n      color: \"teal\",\n      className: [\n        \"border-teal-600 bg-teal-600\",\n        \"hover:border-teal-500 hover:bg-teal-500\",\n        \"active:border-teal-700 active:bg-teal-700\",\n      ],\n    },\n    {\n      variant: \"solid\",\n      color: \"blue\",\n      className: [\n        \"border-blue-600 bg-blue-600\",\n        \"hover:border-blue-500 hover:bg-blue-500\",\n        \"active:border-blue-700 active:bg-blue-700\",\n      ],\n    },\n    {\n      variant: \"solid\",\n      color: \"indigo\",\n      className: [\n        \"border-indigo-600 bg-indigo-600\",\n        \"hover:border-indigo-500 hover:bg-indigo-500\",\n        \"active:border-indigo-700 active:bg-indigo-700\",\n      ],\n    },\n    {\n      variant: \"solid\",\n      color: \"purple\",\n      className: [\n        \"border-purple-600 bg-purple-600\",\n        \"hover:border-purple-500 hover:bg-purple-500\",\n        \"active:border-purple-700 active:bg-purple-700\",\n      ],\n    },\n    {\n      variant: \"solid\",\n      color: \"pink\",\n      className: [\n        \"border-pink-600 bg-pink-600\",\n        \"hover:border-pink-500 hover:bg-pink-500\",\n        \"active:border-pink-700 active:bg-pink-700\",\n      ],\n    },\n    {\n      variant: \"solid\",\n      color: \"link\",\n      className: [\n        \"border-blue-600 bg-blue-600\",\n        \"hover:border-blue-500 hover:bg-blue-500\",\n        \"active:border-blue-700 active:bg-blue-700\",\n      ],\n    },\n    {\n      variant: \"solid\",\n      color: \"success\",\n      className: [\n        \"border-green-700 bg-green-700\",\n        \"hover:border-green-600 hover:bg-green-600\",\n        \"active:border-green-800 active:bg-green-800\",\n      ],\n    },\n    {\n      variant: \"solid\",\n      color: \"gray\",\n      className: [\n        \"border-gray-600 bg-gray-600\",\n        \"hover:border-gray-500 hover:bg-gray-500\",\n        \"active:border-gray-700 active:bg-gray-700\",\n      ],\n    },\n    {\n      variant: \"solid\",\n      color: \"red\",\n      className: [\n        \"border-red-600 bg-red-600\",\n        \"hover:border-red-500 hover:bg-red-500\",\n        \"active:border-red-700 active:bg-red-700\",\n      ],\n    },\n    {\n      variant: \"solid\",\n      color: \"amber\",\n      className: [\n        \"border-amber-600 bg-amber-600\",\n        \"hover:border-amber-500 hover:bg-amber-500\",\n        \"active:border-amber-700 active:bg-amber-700\",\n      ],\n    },\n    {\n      variant: \"solid\",\n      color: \"yellow\",\n      className: [\n        \"border-yellow-600 bg-yellow-600\",\n        \"hover:border-yellow-500 hover:bg-yellow-500\",\n        \"active:border-yellow-700 active:bg-yellow-700\",\n      ],\n    },\n    {\n      variant: \"solid\",\n      color: \"lime\",\n      className: [\n        \"border-lime-600 bg-lime-600\",\n        \"hover:border-lime-500 hover:bg-lime-500\",\n        \"active:border-lime-700 active:bg-lime-700\",\n      ],\n    },\n    {\n      variant: \"solid\",\n      color: \"sky\",\n      className: [\n        \"border-sky-600 bg-sky-600\",\n        \"hover:border-sky-500 hover:bg-sky-500\",\n        \"active:border-sky-700 active:bg-sky-700\",\n      ],\n    },\n    {\n      variant: \"solid\",\n      color: \"violet\",\n      className: [\n        \"border-violet-600 bg-violet-600\",\n        \"hover:border-violet-500 hover:bg-violet-500\",\n        \"active:border-violet-700 active:bg-violet-700\",\n      ],\n    },\n    {\n      variant: \"solid\",\n      color: \"fuchsia\",\n      className: [\n        \"border-fuchsia-600 bg-fuchsia-600\",\n        \"hover:border-fuchsia-500 hover:bg-fuchsia-500\",\n        \"active:border-fuchsia-700 active:bg-fuchsia-700\",\n      ],\n    },\n    {\n      variant: \"solid\",\n      color: \"rose\",\n      className: [\n        \"border-rose-600 bg-rose-600\",\n        \"hover:border-rose-500 hover:bg-rose-500\",\n        \"active:border-rose-700 active:bg-rose-700\",\n      ],\n    },\n    // outlined\n    {\n      variant: \"outlined\",\n      color: \"default\",\n      className: [\n        \"\",\n        \"hover:border-primary-hover hover:text-primary-hover\",\n        \"active:border-primary-active active:text-primary-active\",\n      ],\n    },\n    {\n      variant: \"outlined\",\n      color: \"primary\",\n      className: [\n        \"border-primary text-primary\",\n        \"hover:border-primary-hover hover:text-primary-hover\",\n        \"active:border-primary-active active:text-primary-active\",\n      ],\n    },\n    {\n      variant: \"outlined\",\n      color: \"link\",\n      className: [\"text-link\", \"hover:bg-link-hover hover:text-white\"],\n    },\n    {\n      variant: \"outlined\",\n      color: \"danger\",\n      className: [\n        \"border-red-600 text-red-600\",\n        \"hover:border-red-500 hover:text-red-500\",\n        \"active:border-red-700 active:text-red-700\",\n      ],\n    },\n    {\n      variant: \"outlined\",\n      color: \"orange\",\n      className: [\n        \"border-orange-600 text-orange-600\",\n        \"hover:border-orange-500 hover:text-orange-500\",\n        \"active:border-orange-700 active:text-orange-700\",\n      ],\n    },\n    {\n      variant: \"outlined\",\n      color: \"green\",\n      className: [\n        \"border-green-600 text-green-600\",\n        \"hover:border-green-500 hover:text-green-500\",\n        \"active:border-green-700 active:text-green-700\",\n      ],\n    },\n    {\n      variant: \"outlined\",\n      color: \"emerald\",\n      className: [\n        \"border-emerald-600 text-emerald-600\",\n        \"hover:border-emerald-500 hover:text-emerald-500\",\n        \"active:border-emerald-700 active:text-emerald-700\",\n      ],\n    },\n    {\n      variant: \"outlined\",\n      color: \"cyan\",\n      className: [\n        \"border-cyan-600 text-cyan-600\",\n        \"hover:border-cyan-500 hover:text-cyan-500\",\n        \"active:border-cyan-700 active:text-cyan-700\",\n      ],\n    },\n    {\n      variant: \"outlined\",\n      color: \"teal\",\n      className: [\n        \"border-teal-600 text-teal-600\",\n        \"hover:border-teal-500 hover:text-teal-500\",\n        \"active:border-teal-700 active:text-teal-700\",\n      ],\n    },\n    {\n      variant: \"outlined\",\n      color: \"blue\",\n      className: [\n        \"border-blue-600 text-blue-600\",\n        \"hover:border-blue-500 hover:text-blue-500\",\n        \"active:border-blue-700 active:text-blue-700\",\n      ],\n    },\n    {\n      variant: \"outlined\",\n      color: \"indigo\",\n      className: [\n        \"border-indigo-600 text-indigo-600\",\n        \"hover:border-indigo-500 hover:text-indigo-500\",\n        \"active:border-indigo-700 active:text-indigo-700\",\n      ],\n    },\n    {\n      variant: \"outlined\",\n      color: \"purple\",\n      className: [\n        \"border-purple-600 text-purple-600\",\n        \"hover:border-purple-500 hover:text-purple-500\",\n        \"active:border-purple-700 active:text-purple-700\",\n      ],\n    },\n    {\n      variant: \"outlined\",\n      color: \"pink\",\n      className: [\n        \"border-pink-600 text-pink-600\",\n        \"hover:border-pink-500 hover:text-pink-500\",\n        \"active:border-pink-700 active:text-pink-700\",\n      ],\n    },\n    {\n      variant: \"outlined\",\n      color: \"success\",\n      className: [\n        \"border-green-600 text-green-600\",\n        \"hover:border-green-500 hover:text-green-500\",\n        \"active:border-green-700 active:text-green-700\",\n      ],\n    },\n    {\n      variant: \"outlined\",\n      color: \"gray\",\n      className: [\n        \"border-gray-600 text-gray-600\",\n        \"hover:border-gray-500 hover:text-gray-500\",\n        \"active:border-gray-700 active:text-gray-700\",\n      ],\n    },\n    {\n      variant: \"outlined\",\n      color: \"red\",\n      className: [\n        \"border-red-600 text-red-600\",\n        \"hover:border-red-500 hover:text-red-500\",\n        \"active:border-red-700 active:text-red-700\",\n      ],\n    },\n    {\n      variant: \"outlined\",\n      color: \"amber\",\n      className: [\n        \"border-amber-600 text-amber-600\",\n        \"hover:border-amber-500 hover:text-amber-500\",\n        \"active:border-amber-700 active:text-amber-700\",\n      ],\n    },\n    {\n      variant: \"outlined\",\n      color: \"yellow\",\n      className: [\n        \"border-yellow-600 text-yellow-600\",\n        \"hover:border-yellow-500 hover:text-yellow-500\",\n        \"active:border-yellow-700 active:text-yellow-700\",\n      ],\n    },\n    {\n      variant: \"outlined\",\n      color: \"lime\",\n      className: [\n        \"border-lime-600 text-lime-600\",\n        \"hover:border-lime-500 hover:text-lime-500\",\n        \"active:border-lime-700 active:text-lime-700\",\n      ],\n    },\n    {\n      variant: \"outlined\",\n      color: \"sky\",\n      className: [\n        \"border-sky-600 text-sky-600\",\n        \"hover:border-sky-500 hover:text-sky-500\",\n        \"active:border-sky-700 active:text-sky-700\",\n      ],\n    },\n    {\n      variant: \"outlined\",\n      color: \"violet\",\n      className: [\n        \"border-violet-600 text-violet-600\",\n        \"hover:border-violet-500 hover:text-violet-500\",\n        \"active:border-violet-700 active:text-violet-700\",\n      ],\n    },\n    {\n      variant: \"outlined\",\n      color: \"fuchsia\",\n      className: [\n        \"border-fuchsia-600 text-fuchsia-600\",\n        \"hover:border-fuchsia-500 hover:text-fuchsia-500\",\n        \"active:border-fuchsia-700 active:text-fuchsia-700\",\n      ],\n    },\n    {\n      variant: \"outlined\",\n      color: \"rose\",\n      className: [\n        \"border-rose-600 text-rose-600\",\n        \"hover:border-rose-500 hover:text-rose-500\",\n        \"active:border-rose-700 active:text-rose-700\",\n      ],\n    },\n    // filled | light\n    {\n      variant: \"filled\",\n      color: \"default\",\n      className: [\n        \"bg-secondary\",\n        \"hover:bg-secondary-hover\",\n        \"active:bg-secondary-active\",\n      ],\n    },\n    {\n      variant: \"filled\",\n      color: \"primary\",\n      className: [\n        \"bg-primary-50 text-primary-700\",\n        \"hover:bg-primary-100 hover:text-primary-700\",\n        \"active:bg-primary-200 active:text-primary-active\",\n      ],\n    },\n    {\n      variant: \"filled\",\n      color: \"danger\",\n      className: [\n        \"bg-red-50 text-red-600\",\n        \"hover:bg-red-100 hover:text-red-600\",\n        \"active:bg-red-200 active:text-red-700\",\n      ],\n    },\n    {\n      variant: \"filled\",\n      color: \"orange\",\n      className: [\n        \"bg-orange-50 text-orange-600\",\n        \"hover:bg-orange-100 hover:text-orange-600\",\n        \"active:bg-orange-200 active:text-orange-700\",\n      ],\n    },\n    {\n      variant: \"filled\",\n      color: \"green\",\n      className: [\n        \"bg-green-50 text-green-600\",\n        \"hover:bg-green-100 hover:text-green-600\",\n        \"active:bg-green-200 active:text-green-700\",\n      ],\n    },\n    {\n      variant: \"filled\",\n      color: \"emerald\",\n      className: [\n        \"bg-emerald-50 text-emerald-600\",\n        \"hover:bg-emerald-100 hover:text-emerald-600\",\n        \"active:bg-emerald-200 active:text-emerald-700\",\n      ],\n    },\n    {\n      variant: \"filled\",\n      color: \"cyan\",\n      className: [\n        \"bg-cyan-50 text-cyan-600\",\n        \"hover:bg-cyan-100 hover:text-cyan-600\",\n        \"active:bg-cyan-200 active:text-cyan-700\",\n      ],\n    },\n    {\n      variant: \"filled\",\n      color: \"teal\",\n      className: [\n        \"bg-teal-50 text-teal-600\",\n        \"hover:bg-teal-100 hover:text-teal-600\",\n        \"active:bg-teal-200 active:text-teal-700\",\n      ],\n    },\n    {\n      variant: \"filled\",\n      color: \"blue\",\n      className: [\n        \"bg-blue-50 text-blue-600\",\n        \"hover:bg-blue-100 hover:text-blue-600\",\n        \"active:bg-blue-200 active:text-blue-700\",\n      ],\n    },\n    {\n      variant: \"filled\",\n      color: \"indigo\",\n      className: [\n        \"bg-indigo-50 text-indigo-600\",\n        \"hover:bg-indigo-100 hover:text-indigo-600\",\n        \"active:bg-indigo-200 active:text-indigo-700\",\n      ],\n    },\n    {\n      variant: \"filled\",\n      color: \"link\",\n      className: [\n        \"bg-blue-50 text-blue-600\",\n        \"hover:bg-blue-100 hover:text-blue-600\",\n        \"active:bg-blue-200 active:text-blue-700\",\n      ],\n    },\n    {\n      variant: \"filled\",\n      color: \"purple\",\n      className: [\n        \"bg-purple-50 text-purple-600\",\n        \"hover:bg-purple-100 hover:text-purple-600\",\n        \"active:bg-purple-200 active:text-purple-700\",\n      ],\n    },\n    {\n      variant: \"filled\",\n      color: \"pink\",\n      className: [\n        \"bg-pink-50 text-pink-600\",\n        \"hover:bg-pink-100 hover:text-pink-600\",\n        \"active:bg-pink-200 active:text-pink-700\",\n      ],\n    },\n    {\n      variant: \"filled\",\n      color: \"success\",\n      className: [\n        \"bg-green-50 text-green-600\",\n        \"hover:bg-green-100 hover:text-green-600\",\n        \"active:bg-green-200 active:text-green-700\",\n      ],\n    },\n    {\n      variant: \"filled\",\n      color: \"gray\",\n      className: [\n        \"bg-gray-50 text-gray-600\",\n        \"hover:bg-gray-100 hover:text-gray-600\",\n        \"active:bg-gray-200 active:text-gray-700\",\n      ],\n    },\n    {\n      variant: \"filled\",\n      color: \"red\",\n      className: [\n        \"bg-red-50 text-red-600\",\n        \"hover:bg-red-100 hover:text-red-600\",\n        \"active:bg-red-200 active:text-red-700\",\n      ],\n    },\n    {\n      variant: \"filled\",\n      color: \"amber\",\n      className: [\n        \"bg-amber-50 text-amber-600\",\n        \"hover:bg-amber-100 hover:text-amber-600\",\n        \"active:bg-amber-200 active:text-amber-700\",\n      ],\n    },\n    {\n      variant: \"filled\",\n      color: \"yellow\",\n      className: [\n        \"bg-yellow-50 text-yellow-600\",\n        \"hover:bg-yellow-100 hover:text-yellow-600\",\n        \"active:bg-yellow-200 active:text-yellow-700\",\n      ],\n    },\n    {\n      variant: \"filled\",\n      color: \"lime\",\n      className: [\n        \"bg-lime-50 text-lime-600\",\n        \"hover:bg-lime-100 hover:text-lime-600\",\n        \"active:bg-lime-200 active:text-lime-700\",\n      ],\n    },\n    {\n      variant: \"filled\",\n      color: \"sky\",\n      className: [\n        \"bg-sky-50 text-sky-600\",\n        \"hover:bg-sky-100 hover:text-sky-600\",\n        \"active:bg-sky-200 active:text-sky-700\",\n      ],\n    },\n    {\n      variant: \"filled\",\n      color: \"violet\",\n      className: [\n        \"bg-violet-50 text-violet-600\",\n        \"hover:bg-violet-100 hover:text-violet-600\",\n        \"active:bg-violet-200 active:text-violet-700\",\n      ],\n    },\n    {\n      variant: \"filled\",\n      color: \"fuchsia\",\n      className: [\n        \"bg-fuchsia-50 text-fuchsia-600\",\n        \"hover:bg-fuchsia-100 hover:text-fuchsia-600\",\n        \"active:bg-fuchsia-200 active:text-fuchsia-700\",\n      ],\n    },\n    {\n      variant: \"filled\",\n      color: \"rose\",\n      className: [\n        \"bg-rose-50 text-rose-600\",\n        \"hover:bg-rose-100 hover:text-rose-600\",\n        \"active:bg-rose-200 active:text-rose-700\",\n      ],\n    },\n    // Text\n    {\n      variant: \"text\",\n      color: \"default\",\n      className: [\"\", \"hover:bg-secondary\", \"active:bg-secondary-active\"],\n    },\n    {\n      variant: \"text\",\n      color: \"primary\",\n      className: [\n        \"text-primary\",\n        \"hover:bg-primary-100 hover:text-primary-hover\",\n        \"active:bg-primary-300 active:text-primary-active\",\n      ],\n    },\n    {\n      variant: \"text\",\n      color: \"danger\",\n      className: [\n        \"text-red-600\",\n        \"hover:bg-red-100 hover:text-red-500\",\n        \"active:bg-red-300 active:text-red-700\",\n      ],\n    },\n    {\n      variant: \"text\",\n      color: \"green\",\n      className: [\n        \"text-green-600\",\n        \"hover:bg-green-100 hover:text-green-500\",\n        \"active:bg-green-300 active:text-green-700\",\n      ],\n    },\n    {\n      variant: \"text\",\n      color: \"emerald\",\n      className: [\n        \"text-emerald-600\",\n        \"hover:bg-emerald-100 hover:text-emerald-500\",\n        \"active:bg-emerald-300 active:text-emerald-700\",\n      ],\n    },\n    {\n      variant: \"text\",\n      color: \"cyan\",\n      className: [\n        \"text-cyan-600\",\n        \"hover:bg-cyan-100 hover:text-cyan-500\",\n        \"active:bg-cyan-300 active:text-cyan-700\",\n      ],\n    },\n    {\n      variant: \"text\",\n      color: \"teal\",\n      className: [\n        \"text-teal-600\",\n        \"hover:bg-teal-100 hover:text-teal-500\",\n        \"active:bg-teal-300 active:text-teal-700\",\n      ],\n    },\n    {\n      variant: \"text\",\n      color: \"blue\",\n      className: [\n        \"text-blue-600\",\n        \"hover:bg-blue-100 hover:text-blue-500\",\n        \"active:bg-blue-300 active:text-blue-700\",\n      ],\n    },\n    {\n      variant: \"text\",\n      color: \"indigo\",\n      className: [\n        \"text-indigo-600\",\n        \"hover:bg-indigo-100 hover:text-indigo-500\",\n        \"active:bg-indigo-300 active:text-indigo-700\",\n      ],\n    },\n    {\n      variant: \"text\",\n      color: \"purple\",\n      className: [\n        \"text-purple-600\",\n        \"hover:bg-purple-100 hover:text-purple-500\",\n        \"active:bg-purple-300 active:text-purple-700\",\n      ],\n    },\n    {\n      variant: \"text\",\n      color: \"pink\",\n      className: [\n        \"text-pink-600\",\n        \"hover:bg-pink-100 hover:text-pink-500\",\n        \"active:bg-pink-300 active:text-pink-700\",\n      ],\n    },\n    {\n      variant: \"text\",\n      color: \"link\",\n      className: [\n        \"text-blue-600\",\n        \"hover:bg-blue-100 hover:text-blue-500\",\n        \"active:bg-blue-300 active:text-blue-700\",\n      ],\n    },\n    {\n      variant: \"text\",\n      color: \"success\",\n      className: [\n        \"text-green-600\",\n        \"hover:bg-green-100 hover:text-green-500\",\n        \"active:bg-green-300 active:text-green-700\",\n      ],\n    },\n    {\n      variant: \"text\",\n      color: \"gray\",\n      className: [\n        \"text-gray-600\",\n        \"hover:bg-gray-100 hover:text-gray-500\",\n        \"active:bg-gray-300 active:text-gray-700\",\n      ],\n    },\n    {\n      variant: \"text\",\n      color: \"red\",\n      className: [\n        \"text-red-600\",\n        \"hover:bg-red-100 hover:text-red-500\",\n        \"active:bg-red-300 active:text-red-700\",\n      ],\n    },\n    {\n      variant: \"text\",\n      color: \"orange\",\n      className: [\n        \"text-orange-600\",\n        \"hover:bg-orange-100 hover:text-orange-500\",\n        \"active:bg-orange-300 active:text-orange-700\",\n      ],\n    },\n    {\n      variant: \"text\",\n      color: \"amber\",\n      className: [\n        \"text-amber-600\",\n        \"hover:bg-amber-100 hover:text-amber-500\",\n        \"active:bg-amber-300 active:text-amber-700\",\n      ],\n    },\n    {\n      variant: \"text\",\n      color: \"yellow\",\n      className: [\n        \"text-yellow-600\",\n        \"hover:bg-yellow-100 hover:text-yellow-500\",\n        \"active:bg-yellow-300 active:text-yellow-700\",\n      ],\n    },\n    {\n      variant: \"text\",\n      color: \"lime\",\n      className: [\n        \"text-lime-600\",\n        \"hover:bg-lime-100 hover:text-lime-500\",\n        \"active:bg-lime-300 active:text-lime-700\",\n      ],\n    },\n    {\n      variant: \"text\",\n      color: \"sky\",\n      className: [\n        \"text-sky-600\",\n        \"hover:bg-sky-100 hover:text-sky-500\",\n        \"active:bg-sky-300 active:text-sky-700\",\n      ],\n    },\n    {\n      variant: \"text\",\n      color: \"violet\",\n      className: [\n        \"text-violet-600\",\n        \"hover:bg-violet-100 hover:text-violet-500\",\n        \"active:bg-violet-300 active:text-violet-700\",\n      ],\n    },\n    {\n      variant: \"text\",\n      color: \"fuchsia\",\n      className: [\n        \"text-fuchsia-600\",\n        \"hover:bg-fuchsia-100 hover:text-fuchsia-500\",\n        \"active:bg-fuchsia-300 active:text-fuchsia-700\",\n      ],\n    },\n    {\n      variant: \"text\",\n      color: \"rose\",\n      className: [\n        \"text-rose-600\",\n        \"hover:bg-rose-100 hover:text-rose-500\",\n        \"active:bg-rose-300 active:text-rose-700\",\n      ],\n    },\n\n    // Link\n    {\n      variant: \"link\",\n      color: \"default\",\n      className: [\"\", \"hover:text-primary-hover\", \"active:text-primary-active\"],\n    },\n    {\n      variant: \"link\",\n      color: \"primary\",\n      className: [\n        \"text-primary\",\n        \"hover:text-primary-hover\",\n        \"active:text-primary-active\",\n      ],\n    },\n    {\n      variant: \"link\",\n      color: \"link\",\n      className: [\n        \"text-primary\",\n        \"hover:text-primary-hover\",\n        \"active:text-primary-active\",\n      ],\n    },\n    {\n      variant: \"link\",\n      color: \"danger\",\n      className: [\"text-red-500\", \"hover:text-red-400\", \"active:text-red-600\"],\n    },\n    {\n      variant: \"link\",\n      color: \"pink\",\n      className: [\n        \"text-pink-500\",\n        \"hover:text-pink-400\",\n        \"active:text-pink-600\",\n      ],\n    },\n    {\n      variant: \"link\",\n      color: \"purple\",\n      className: [\n        \"text-purple-500\",\n        \"hover:text-purple-400\",\n        \"active:text-purple-600\",\n      ],\n    },\n    {\n      variant: \"link\",\n      color: \"cyan\",\n      className: [\n        \"text-cyan-500\",\n        \"hover:text-cyan-400\",\n        \"active:text-cyan-600\",\n      ],\n    },\n    {\n      variant: \"link\",\n      color: \"teal\",\n      className: [\n        \"text-teal-500\",\n        \"hover:text-teal-400\",\n        \"active:text-teal-600\",\n      ],\n    },\n    {\n      variant: \"link\",\n      color: \"orange\",\n      className: [\n        \"text-orange-500\",\n        \"hover:text-orange-400\",\n        \"active:text-orange-600\",\n      ],\n    },\n    {\n      variant: \"link\",\n      color: \"amber\",\n      className: [\n        \"text-amber-500\",\n        \"hover:text-amber-400\",\n        \"active:text-amber-600\",\n      ],\n    },\n    {\n      variant: \"link\",\n      color: \"yellow\",\n      className: [\n        \"text-yellow-500\",\n        \"hover:text-yellow-400\",\n        \"active:text-yellow-600\",\n      ],\n    },\n    {\n      variant: \"link\",\n      color: \"lime\",\n      className: [\n        \"text-lime-500\",\n        \"hover:text-lime-400\",\n        \"active:text-lime-600\",\n      ],\n    },\n    {\n      variant: \"link\",\n      color: \"green\",\n      className: [\n        \"text-green-500\",\n        \"hover:text-green-400\",\n        \"active:text-green-600\",\n      ],\n    },\n    {\n      variant: \"link\",\n      color: \"emerald\",\n      className: [\n        \"text-emerald-500\",\n        \"hover:text-emerald-400\",\n        \"active:text-emerald-600\",\n      ],\n    },\n    {\n      variant: \"link\",\n      color: \"sky\",\n      className: [\"text-sky-500\", \"hover:text-sky-400\", \"active:text-sky-600\"],\n    },\n    {\n      variant: \"link\",\n      color: \"blue\",\n      className: [\n        \"text-blue-500\",\n        \"hover:text-blue-400\",\n        \"active:text-blue-600\",\n      ],\n    },\n    {\n      variant: \"link\",\n      color: \"indigo\",\n      className: [\n        \"text-indigo-500\",\n        \"hover:text-indigo-400\",\n        \"active:text-indigo-600\",\n      ],\n    },\n    {\n      variant: \"link\",\n      color: \"violet\",\n      className: [\n        \"text-violet-500\",\n        \"hover:text-violet-400\",\n        \"active:text-violet-600\",\n      ],\n    },\n    {\n      variant: \"link\",\n      color: \"fuchsia\",\n      className: [\n        \"text-fuchsia-500\",\n        \"hover:text-fuchsia-400\",\n        \"active:text-fuchsia-600\",\n      ],\n    },\n    {\n      variant: \"link\",\n      color: \"rose\",\n      className: [\n        \"text-rose-500\",\n        \"hover:text-rose-400\",\n        \"active:text-rose-600\",\n      ],\n    },\n    {\n      variant: \"link\",\n      color: \"red\",\n      className: [\"text-red-500\", \"hover:text-red-400\", \"active:text-red-600\"],\n    },\n    {\n      variant: \"link\",\n      color: \"success\",\n      className: [\n        \"text-green-500\",\n        \"hover:text-green-400\",\n        \"active:text-green-600\",\n      ],\n    },\n    {\n      variant: \"link\",\n      color: \"gray\",\n      className: [\n        \"text-gray-500\",\n        \"hover:text-gray-400\",\n        \"active:text-gray-600\",\n      ],\n    },\n    // Disabled states - use muted colors instead of opacity\n    {\n      disabled: true,\n      variant: \"solid\",\n      className: [\n        \"bg-muted/80 border-input text-muted-foreground/50\",\n        \"hover:bg-muted/80! hover:border-input! hover:text-muted-foreground/50!\",\n        \"active:bg-muted/80! active:border-input! active:text-muted-foreground/50!\",\n      ],\n    },\n    {\n      disabled: true,\n      variant: \"outlined\",\n      className: [\n        \"border-input text-muted-foreground/50 bg-muted/80\",\n        \"hover:border-input! hover:text-muted-foreground/50! hover:bg-muted/80!\",\n        \"active:border-input! active:text-muted-foreground/50! active:bg-muted/80!\",\n      ],\n    },\n    {\n      disabled: true,\n      variant: \"filled\",\n      className: [\n        \"bg-muted/80 text-muted-foreground/50 border-transparent\",\n        \"hover:bg-muted/80! hover:text-muted-foreground/50! hover:border-transparent!\",\n        \"active:bg-muted/80! active:text-muted-foreground/50! active:border-transparent!\",\n      ],\n    },\n    {\n      disabled: true,\n      variant: \"text\",\n      className: [\n        \"text-muted-foreground/50 border-transparent bg-transparent\",\n        \"hover:text-muted-foreground/50! hover:border-transparent! hover:bg-transparent!\",\n        \"active:text-muted-foreground/50! active:border-transparent! active:bg-transparent!\",\n      ],\n    },\n    {\n      disabled: true,\n      variant: \"link\",\n      className: [\n        \"text-muted-foreground/50 border-transparent\",\n        \"hover:text-muted-foreground/50! hover:border-transparent!\",\n        \"active:text-muted-foreground/50! active:border-transparent!\",\n      ],\n    },\n  ],\n});\n\nexport type ButtonVariants = VariantProps<typeof buttonVariants>;\n",
      "type": "registry:file",
      "target": "components/button/button-variants.ts"
    },
    {
      "path": "components/config-provider/disabled-context.tsx",
      "content": "import * as React from \"react\";\n\nconst DisabledContext = React.createContext<boolean>(false);\n\nexport interface DisabledContextProps {\n  disabled?: boolean;\n  children?: React.ReactNode;\n}\n\nexport const DisabledContextProvider: React.FC<DisabledContextProps> = ({\n  children,\n  disabled,\n}) => {\n  const originDisabled = React.useContext(DisabledContext);\n  return (\n    <DisabledContext.Provider value={disabled ?? originDisabled}>\n      {children}\n    </DisabledContext.Provider>\n  );\n};\n\nexport default DisabledContext;\n",
      "type": "registry:file",
      "target": "components/config-provider/disabled-context.tsx"
    },
    {
      "path": "components/config-provider/unstable-context.ts",
      "content": "import { render, unmount } from \"@rc-component/util/es/React/render\";\n\n// import warning from \"../_util/warning\";\n\nexport type UnmountType = () => Promise<void>;\nexport type RenderType = (\n  node: React.ReactElement,\n  container: Element | DocumentFragment,\n) => UnmountType;\n\nconst defaultReactRender: RenderType = (node, container) => {\n  // // TODO: Remove in v6\n  // // Warning for React 19\n  // if (process.env.NODE_ENV !== \"production\") {\n  //   const majorVersion = Number.parseInt(\n  //     React.version.split(\".\")[0] ?? \"0\",\n  //     10,\n  //   );\n  //   const fullKeys = Object.keys(ReactDOM);\n\n  //   warning(\n  //     majorVersion < 19 || fullKeys.includes(\"createRoot\"),\n  //     \"compatible\",\n  //     \"antd v5 support React is 16 ~ 18. see https://u.ant.design/v5-for-19 for compatible.\",\n  //   );\n  // }\n\n  render(node, container);\n  return () => {\n    return unmount(container);\n  };\n};\n\nlet unstableRender: RenderType = defaultReactRender;\n\n/**\n * @deprecated Set React render function for compatible usage.\n * This is internal usage only compatible with React 19.\n * And will be removed in next major version.\n */\nexport function unstableSetRender(render: RenderType) {\n  unstableRender = render;\n}\n\nexport function getReactRender() {\n  return unstableRender;\n}\n",
      "type": "registry:file",
      "target": "components/config-provider/unstable-context.ts"
    },
    {
      "path": "components/label/label.tsx",
      "content": "import { Slot } from \"radix-ui\";\n\nimport { cn } from \"../../lib/utils\";\nimport type { Label as ShadLabel } from \"../../shadcn/label\";\n\n// Base classes mirror ../../shadcn/label but with select-none -> select-text so\n// double-click selects the label text. Keep in sync if the shadcn CLI updates\n// that file. gap-0 overrides the shadcn gap-2 default for this wrapper.\nconst labelClassName =\n  \"flex items-center gap-0 text-sm leading-none font-medium select-text group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50\";\n\nconst Label = ({\n  className,\n  children,\n  required,\n  colon,\n  asChild,\n  ...properties\n}: React.ComponentProps<typeof ShadLabel> & {\n  required?: boolean;\n  colon?: boolean;\n}) => {\n  // Slot.Root (not Radix ShadLabel) so asChild merges props onto the consumer's\n  // element without Radix's onMouseDown block on double-click text selection.\n  if (asChild) {\n    return (\n      <Slot.Root\n        data-slot=\"label\"\n        className={cn(labelClassName, className)}\n        {...properties}\n      >\n        {children}\n      </Slot.Root>\n    );\n  }\n  // Native <label> instead of Radix ShadLabel: Radix blocks double-click text\n  // selection via onMouseDown preventDefault (detail > 1). Native allows it.\n  return (\n    <label\n      data-slot=\"label\"\n      className={cn(labelClassName, className)}\n      {...properties}\n    >\n      {children}\n      {colon && \":\"}\n      {required && <span className=\"ml-1 text-red-600\">*</span>}\n    </label>\n  );\n};\n\nexport { Label };\n",
      "type": "registry:file",
      "target": "components/label/label.tsx"
    },
    {
      "path": "shadcn/label.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Label as LabelPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@acme/ui/lib/utils\"\n\nfunction Label({\n  className,\n  ...props\n}: React.ComponentProps<typeof LabelPrimitive.Root>) {\n  return (\n    <LabelPrimitive.Root\n      data-slot=\"label\"\n      className={cn(\n        \"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Label }\n",
      "type": "registry:file",
      "target": "shadcn/label.tsx"
    },
    {
      "path": "lib/wave/index.ts",
      "content": "import React, { cloneElement, useRef } from \"react\";\nimport isVisible from \"@rc-component/util/es/Dom/isVisible\";\nimport { composeRef, getNodeRef, supportRef } from \"@rc-component/util/es/ref\";\n\nimport type { WaveComponent } from \"./interface\";\nimport useWave from \"./use-wave\";\n\nexport interface WaveProps {\n  disabled?: boolean;\n  children?: React.ReactNode;\n  component?: WaveComponent;\n}\n\nconst Wave: React.FC<WaveProps> = (properties) => {\n  const { children, disabled, component } = properties;\n  const containerReference = useRef<HTMLElement>(null);\n\n  // =============================== Wave ===============================\n  const showWave = useWave(containerReference, \"\", component);\n\n  // ============================== Effect ==============================\n  React.useEffect(() => {\n    const node = containerReference.current;\n    if (node?.nodeType !== 1 || disabled) {\n      return;\n    }\n\n    // Click handler\n    const onClick = (e: MouseEvent) => {\n      // Fix radio button click twice\n      if (\n        !isVisible(e.target as HTMLElement) ||\n        // No need wave\n        !node.getAttribute ||\n        node.getAttribute(\"disabled\") ||\n        (node as HTMLInputElement).disabled ||\n        // node.className.includes(\"disabled\") ||\n        node.className.includes(\"-leave\")\n      ) {\n        return;\n      }\n      showWave(e);\n    };\n\n    // Bind events\n    node.addEventListener(\"click\", onClick, true);\n    return () => {\n      node.removeEventListener(\"click\", onClick, true);\n    };\n  }, [disabled, showWave]);\n\n  // ============================== Render ==============================\n  if (!React.isValidElement(children)) {\n    return children ?? undefined;\n  }\n\n  const reference = supportRef(children)\n    ? // eslint-disable-next-line react-hooks/refs\n      composeRef(getNodeRef(children), containerReference)\n    : containerReference;\n\n  // eslint-disable-next-line react-hooks/refs, @typescript-eslint/no-explicit-any\n  return cloneElement<any>(children, { ref: reference });\n};\n\nif (process.env.NODE_ENV !== \"production\") {\n  Wave.displayName = \"Wave\";\n}\n\nexport default Wave;\n",
      "type": "registry:file",
      "target": "lib/wave/index.ts"
    },
    {
      "path": "lib/wave/interface.ts",
      "content": "export const TARGET_CLS = `wave-target`;\n\nexport type ShowWaveEffect = (\n  element: HTMLElement,\n  info: {\n    className: string;\n    component?: WaveComponent;\n    event: MouseEvent;\n  },\n) => void;\n\nexport type ShowWave = (event: MouseEvent) => void;\n\nexport type WaveComponent = \"Tag\" | \"Button\" | \"Checkbox\" | \"Radio\" | \"Switch\";\n\nexport interface WaveConfig {\n  /**\n   * @descEN Whether to use wave effect. If it needs to close, set to `false`.\n   * @default true\n   */\n  disabled?: boolean;\n  /**\n   * @descEN Customized wave effect.\n   */\n  showEffect?: ShowWaveEffect;\n}\n",
      "type": "registry:file",
      "target": "lib/wave/interface.ts"
    },
    {
      "path": "lib/wave/use-wave.ts",
      "content": "import * as React from \"react\";\nimport { useEvent } from \"@rc-component/util\";\nimport raf from \"@rc-component/util/es/raf\";\n\nimport type { ShowWave, WaveComponent } from \"./interface\";\nimport { useComponentConfig } from \"../../components/config-provider/context\";\nimport { TARGET_CLS } from \"./interface\";\nimport showWaveEffect from \"./wave-effect\";\n\nconst useWave = (\n  nodeReference: React.RefObject<HTMLElement | null>,\n  className: string,\n  component?: WaveComponent,\n) => {\n  const wave = useComponentConfig(\"wave\");\n\n  const showWave = useEvent<ShowWave>((event) => {\n    const node = nodeReference.current;\n\n    if (wave.disabled || !node) {\n      return;\n    }\n\n    const targetNode =\n      node.querySelector<HTMLElement>(`.${TARGET_CLS}`) ?? node;\n\n    const { showEffect } = wave;\n\n    // Customize wave effect\n    (showEffect ?? showWaveEffect)(targetNode, {\n      className,\n      component,\n      event,\n    });\n  });\n\n  const rafId = React.useRef<number>(null);\n\n  // Merge trigger event into one for each frame\n  const showDebounceWave: ShowWave = (event) => {\n    if (rafId.current) {\n      raf.cancel(rafId.current);\n    }\n\n    rafId.current = raf(() => {\n      showWave(event);\n    });\n  };\n\n  return showDebounceWave;\n};\n\nexport default useWave;\n",
      "type": "registry:file",
      "target": "lib/wave/use-wave.ts"
    },
    {
      "path": "lib/wave/wave-effect.tsx",
      "content": "/* eslint-disable react-hooks/exhaustive-deps */\n\n// Jun 15, 2024\nimport * as React from \"react\";\nimport raf from \"@rc-component/util/es/raf\";\nimport { motion } from \"motion/react\";\n\nimport type { UnmountType } from \"../../components/config-provider/unstable-context\";\nimport type { ShowWaveEffect, WaveComponent } from \"./interface\";\nimport { getReactRender } from \"../../components/config-provider/unstable-context\";\nimport { TARGET_CLS } from \"./interface\";\nimport {\n  motionDurationSlow,\n  motionEaseInOut,\n  motionEaseOutCirc,\n} from \"./token\";\nimport { getTargetWaveColor } from \"./util\";\n\nfunction validateNumber(value: number) {\n  return Number.isNaN(value) ? 0 : value;\n}\n\nexport interface WaveEffectProps {\n  className: string;\n  target: HTMLElement;\n  component?: WaveComponent;\n  registerUnmount: () => UnmountType | null;\n}\n\nconst WaveEffect: React.FC<WaveEffectProps> = (properties) => {\n  const { className, target, component, registerUnmount } = properties;\n  const divReference = React.useRef<HTMLDivElement>(null);\n\n  // ====================== Refs ======================\n  const unmountReference = React.useRef<UnmountType>(null);\n\n  React.useEffect(() => {\n    unmountReference.current = registerUnmount();\n  }, []);\n\n  // ===================== Effect =====================\n  const [color, setWaveColor] = React.useState<string | null>();\n  const [borderRadius, setBorderRadius] = React.useState<number[]>([]);\n  const [left, setLeft] = React.useState(0);\n  const [top, setTop] = React.useState(0);\n  const [width, setWidth] = React.useState(0);\n  const [height, setHeight] = React.useState(0);\n  const [enabled, setEnabled] = React.useState(false);\n\n  const waveStyle: React.CSSProperties = {\n    left,\n    top,\n    width,\n    height,\n    borderRadius: borderRadius.map((radius) => `${radius}px`).join(\" \"),\n  };\n\n  if (color) {\n    (waveStyle as Record<string, string>)[\"--wave-color\"] = color;\n  }\n\n  function syncPos() {\n    const nodeStyle = getComputedStyle(target);\n\n    // Get wave color from target\n    setWaveColor(getTargetWaveColor(target));\n\n    const isStatic = nodeStyle.position === \"static\";\n\n    // Rect\n    const { borderLeftWidth, borderTopWidth } = nodeStyle;\n    setLeft(\n      isStatic\n        ? target.offsetLeft\n        : validateNumber(-Number.parseFloat(borderLeftWidth)),\n    );\n    setTop(\n      isStatic\n        ? target.offsetTop\n        : validateNumber(-Number.parseFloat(borderTopWidth)),\n    );\n    setWidth(target.offsetWidth);\n    setHeight(target.offsetHeight);\n\n    // Get border radius\n    const {\n      borderTopLeftRadius,\n      borderTopRightRadius,\n      borderBottomLeftRadius,\n      borderBottomRightRadius,\n    } = nodeStyle;\n\n    setBorderRadius(\n      [\n        borderTopLeftRadius,\n        borderTopRightRadius,\n        borderBottomRightRadius,\n        borderBottomLeftRadius,\n      ].map((radius) => validateNumber(Number.parseFloat(radius))),\n    );\n  }\n\n  React.useEffect(() => {\n    if (target) {\n      // We need delay to check position here\n      // since UI may change after click\n      const id = raf(() => {\n        syncPos();\n\n        setEnabled(true);\n      });\n\n      // Add resize observer to follow size\n      let resizeObserver: ResizeObserver;\n      if (typeof ResizeObserver !== \"undefined\") {\n        resizeObserver = new ResizeObserver(syncPos);\n\n        resizeObserver.observe(target);\n      }\n\n      return () => {\n        raf.cancel(id);\n        resizeObserver?.disconnect();\n      };\n    }\n  }, []);\n\n  if (!enabled) {\n    return;\n  }\n\n  if (!enabled) {\n    return;\n  }\n\n  // use for wave-quick or not\n  const isSmallComponent =\n    (component === \"Checkbox\" || component === \"Radio\") &&\n    target?.classList.contains(TARGET_CLS);\n\n  return (\n    <motion.div\n      ref={divReference}\n      className={className}\n      style={waveStyle}\n      initial={{\n        position: \"absolute\",\n        background: \"transparent\",\n        pointerEvents: \"none\",\n        boxSizing: \"border-box\",\n        color: `var(--wave-color, --color-primary-600)`,\n        opacity: 0.2,\n        boxShadow: \"0 0 0 0 currentColor\",\n      }}\n      animate={{\n        boxShadow: \"0 0 0 6px currentColor\",\n        opacity: 0,\n        transition: isSmallComponent\n          ? {\n              boxShadow: {\n                ease: motionEaseInOut,\n                duration: motionDurationSlow,\n              },\n              opacity: {\n                ease: motionEaseInOut,\n                duration: motionDurationSlow,\n              },\n            }\n          : {\n              boxShadow: {\n                ease: motionEaseOutCirc,\n                duration: 0.4,\n              },\n              opacity: {\n                ease: motionEaseOutCirc,\n                duration: 2,\n              },\n            },\n      }}\n      onAnimationComplete={() => {\n        const holder = divReference.current?.parentElement;\n        void unmountReference.current?.().then(() => {\n          holder?.remove();\n        });\n      }}\n    />\n  );\n};\n\nconst showWaveEffect: ShowWaveEffect = (target, info) => {\n  const { component } = info;\n\n  // Skip for unchecked checkbox\n  if (\n    component === \"Checkbox\" &&\n    !target.querySelector<HTMLInputElement>(\"input\")?.checked\n  ) {\n    return;\n  }\n\n  // Create holder\n  const holder = document.createElement(\"div\");\n  holder.style.position = \"absolute\";\n  holder.style.left = \"0px\";\n  holder.style.top = \"0px\";\n  target?.insertBefore(holder, target?.firstChild);\n\n  const reactRender = getReactRender();\n\n  let unmountCallback: UnmountType | null = null;\n\n  function registerUnmount() {\n    return unmountCallback;\n  }\n\n  unmountCallback = reactRender(\n    <WaveEffect {...info} target={target} registerUnmount={registerUnmount} />,\n    holder,\n  );\n};\n\nexport default showWaveEffect;\n",
      "type": "registry:file",
      "target": "lib/wave/wave-effect.tsx"
    },
    {
      "path": "lib/wave/token.ts",
      "content": "// https://ant.design/docs/react/customize-theme#theme\nimport { cubicBezier } from \"motion\";\n\nexport const motionDurationFast = 0.1;\nexport const motionDurationMid = 0.2;\nexport const motionDurationSlow = 0.3;\n\nexport const motionEaseOutCirc = cubicBezier(0.08, 0.82, 0.17, 1);\nexport const motionEaseInOut = cubicBezier(0.645, 0.045, 0.355, 1);\n",
      "type": "registry:file",
      "target": "lib/wave/token.ts"
    },
    {
      "path": "lib/wave/util.ts",
      "content": "export function isValidWaveColor(color: string) {\n  return (\n    color &&\n    color !== \"#fff\" &&\n    color !== \"#ffffff\" &&\n    color !== \"rgb(255, 255, 255)\" &&\n    color !== \"rgba(255, 255, 255, 1)\" &&\n    !/rgba\\((?:\\d*, ){3}0\\)/.test(color) && // any transparent rgba color\n    color !== \"transparent\"\n  );\n}\n\nexport function getTargetWaveColor(node: HTMLElement) {\n  const { borderTopColor, borderColor, backgroundColor } =\n    getComputedStyle(node);\n  if (isValidWaveColor(borderTopColor)) {\n    return borderTopColor;\n  }\n  if (isValidWaveColor(borderColor)) {\n    return borderColor;\n  }\n  if (isValidWaveColor(backgroundColor)) {\n    return backgroundColor;\n  }\n  return;\n}\n",
      "type": "registry:file",
      "target": "lib/wave/util.ts"
    },
    {
      "path": "shadcn/checkbox.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CheckIcon } from \"lucide-react\"\nimport { Checkbox as CheckboxPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@acme/ui/lib/utils\"\n\nfunction Checkbox({\n  className,\n  ...props\n}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        \"peer size-4 shrink-0 rounded-[4px] border border-input shadow-xs transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:data-[state=checked]:bg-primary\",\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"grid place-content-center text-current transition-none\"\n      >\n        <CheckIcon className=\"size-3.5\" />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n}\n\nexport { Checkbox }\n",
      "type": "registry:file",
      "target": "shadcn/checkbox.tsx"
    }
  ],
  "type": "registry:component"
}