{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "box",
  "type": "registry:ui",
  "title": "Box",
  "description": "Token-backed layout primitive for semantic wrappers, spacing, surfaces, borders, radius, overflow, and asChild composition.",
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [
    "https://components.dethink.co.uk/r/dethink-base.json"
  ],
  "files": [
    {
      "path": "packages/components/src/components/box/box.tsx",
      "type": "registry:file",
      "target": "~/components/dethink/components/box/box.tsx",
      "content": "import {\n  Children,\n  cloneElement,\n  createElement,\n  forwardRef,\n  isValidElement,\n  type ForwardedRef,\n  type HTMLAttributes,\n  type MouseEventHandler,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n} from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nexport type BoxElement =\n  | \"div\"\n  | \"section\"\n  | \"article\"\n  | \"main\"\n  | \"aside\"\n  | \"nav\"\n  | \"header\"\n  | \"footer\"\n  | \"ul\"\n  | \"ol\"\n  | \"li\"\n  | \"span\";\n\nexport type BoxDisplay =\n  | \"block\"\n  | \"inline\"\n  | \"inline-block\"\n  | \"contents\"\n  | \"flex\"\n  | \"inline-flex\"\n  | \"grid\";\n\nexport type BoxSpacing =\n  \"none\" | \"1\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"8\" | \"10\" | \"12\";\n\nexport type BoxSurface =\n  | \"transparent\"\n  | \"background\"\n  | \"muted\"\n  | \"primary\"\n  | \"destructive\"\n  | \"success\"\n  | \"warning\"\n  | \"info\";\n\nexport type BoxBorder =\n  | \"none\"\n  | \"default\"\n  | \"muted\"\n  | \"input\"\n  | \"primary\"\n  | \"destructive\"\n  | \"success\"\n  | \"warning\"\n  | \"info\";\n\nexport type BoxRadius = \"none\" | \"sm\" | \"md\" | \"lg\" | \"full\";\nexport type BoxOverflow = \"visible\" | \"hidden\" | \"clip\" | \"auto\";\n\ntype BoxBaseProps = {\n  as?: BoxElement;\n  asChild?: boolean;\n  border?: BoxBorder;\n  display?: BoxDisplay;\n  gap?: BoxSpacing;\n  m?: BoxSpacing;\n  mb?: BoxSpacing;\n  me?: BoxSpacing;\n  ms?: BoxSpacing;\n  mt?: BoxSpacing;\n  mx?: BoxSpacing;\n  my?: BoxSpacing;\n  overflow?: BoxOverflow;\n  p?: BoxSpacing;\n  pb?: BoxSpacing;\n  pe?: BoxSpacing;\n  ps?: BoxSpacing;\n  pt?: BoxSpacing;\n  px?: BoxSpacing;\n  py?: BoxSpacing;\n  radius?: BoxRadius;\n  surface?: BoxSurface;\n};\n\ntype NativeBoxProps = HTMLAttributes<HTMLElement> &\n  BoxBaseProps & {\n    asChild?: false;\n    children?: ReactNode;\n  };\n\ntype ChildBoxProps = Omit<HTMLAttributes<HTMLElement>, \"children\"> &\n  BoxBaseProps & {\n    asChild: true;\n    children: ReactElement<BoxSlotProps>;\n  };\n\nexport type BoxProps = NativeBoxProps | ChildBoxProps;\n\ntype BoxSlotProps = Record<string, unknown> & {\n  children?: ReactNode;\n  className?: string;\n  onClick?: MouseEventHandler<HTMLElement>;\n  ref?: Ref<HTMLElement>;\n};\n\ntype EventHandler = (...args: unknown[]) => void;\n\nconst boxBaseClasses = \"box-border min-w-0\";\n\nconst boxDisplayClasses: Record<BoxDisplay, string> = {\n  block: \"block\",\n  inline: \"inline\",\n  \"inline-block\": \"inline-block\",\n  contents: \"contents\",\n  flex: \"flex\",\n  \"inline-flex\": \"inline-flex\",\n  grid: \"grid\",\n};\n\nconst boxPaddingClasses: Record<\n  \"p\" | \"px\" | \"py\" | \"ps\" | \"pe\" | \"pt\" | \"pb\",\n  Record<BoxSpacing, string>\n> = {\n  p: {\n    none: \"p-[var(--dt-space-0)]\",\n    1: \"p-[var(--dt-space-1)]\",\n    2: \"p-[var(--dt-space-2)]\",\n    3: \"p-[var(--dt-space-3)]\",\n    4: \"p-[var(--dt-space-4)]\",\n    5: \"p-[var(--dt-space-5)]\",\n    6: \"p-[var(--dt-space-6)]\",\n    8: \"p-[var(--dt-space-8)]\",\n    10: \"p-[var(--dt-space-10)]\",\n    12: \"p-[var(--dt-space-12)]\",\n  },\n  px: {\n    none: \"px-[var(--dt-space-0)]\",\n    1: \"px-[var(--dt-space-1)]\",\n    2: \"px-[var(--dt-space-2)]\",\n    3: \"px-[var(--dt-space-3)]\",\n    4: \"px-[var(--dt-space-4)]\",\n    5: \"px-[var(--dt-space-5)]\",\n    6: \"px-[var(--dt-space-6)]\",\n    8: \"px-[var(--dt-space-8)]\",\n    10: \"px-[var(--dt-space-10)]\",\n    12: \"px-[var(--dt-space-12)]\",\n  },\n  py: {\n    none: \"py-[var(--dt-space-0)]\",\n    1: \"py-[var(--dt-space-1)]\",\n    2: \"py-[var(--dt-space-2)]\",\n    3: \"py-[var(--dt-space-3)]\",\n    4: \"py-[var(--dt-space-4)]\",\n    5: \"py-[var(--dt-space-5)]\",\n    6: \"py-[var(--dt-space-6)]\",\n    8: \"py-[var(--dt-space-8)]\",\n    10: \"py-[var(--dt-space-10)]\",\n    12: \"py-[var(--dt-space-12)]\",\n  },\n  ps: {\n    none: \"ps-[var(--dt-space-0)]\",\n    1: \"ps-[var(--dt-space-1)]\",\n    2: \"ps-[var(--dt-space-2)]\",\n    3: \"ps-[var(--dt-space-3)]\",\n    4: \"ps-[var(--dt-space-4)]\",\n    5: \"ps-[var(--dt-space-5)]\",\n    6: \"ps-[var(--dt-space-6)]\",\n    8: \"ps-[var(--dt-space-8)]\",\n    10: \"ps-[var(--dt-space-10)]\",\n    12: \"ps-[var(--dt-space-12)]\",\n  },\n  pe: {\n    none: \"pe-[var(--dt-space-0)]\",\n    1: \"pe-[var(--dt-space-1)]\",\n    2: \"pe-[var(--dt-space-2)]\",\n    3: \"pe-[var(--dt-space-3)]\",\n    4: \"pe-[var(--dt-space-4)]\",\n    5: \"pe-[var(--dt-space-5)]\",\n    6: \"pe-[var(--dt-space-6)]\",\n    8: \"pe-[var(--dt-space-8)]\",\n    10: \"pe-[var(--dt-space-10)]\",\n    12: \"pe-[var(--dt-space-12)]\",\n  },\n  pt: {\n    none: \"pt-[var(--dt-space-0)]\",\n    1: \"pt-[var(--dt-space-1)]\",\n    2: \"pt-[var(--dt-space-2)]\",\n    3: \"pt-[var(--dt-space-3)]\",\n    4: \"pt-[var(--dt-space-4)]\",\n    5: \"pt-[var(--dt-space-5)]\",\n    6: \"pt-[var(--dt-space-6)]\",\n    8: \"pt-[var(--dt-space-8)]\",\n    10: \"pt-[var(--dt-space-10)]\",\n    12: \"pt-[var(--dt-space-12)]\",\n  },\n  pb: {\n    none: \"pb-[var(--dt-space-0)]\",\n    1: \"pb-[var(--dt-space-1)]\",\n    2: \"pb-[var(--dt-space-2)]\",\n    3: \"pb-[var(--dt-space-3)]\",\n    4: \"pb-[var(--dt-space-4)]\",\n    5: \"pb-[var(--dt-space-5)]\",\n    6: \"pb-[var(--dt-space-6)]\",\n    8: \"pb-[var(--dt-space-8)]\",\n    10: \"pb-[var(--dt-space-10)]\",\n    12: \"pb-[var(--dt-space-12)]\",\n  },\n};\n\nconst boxMarginClasses: Record<\n  \"m\" | \"mx\" | \"my\" | \"ms\" | \"me\" | \"mt\" | \"mb\",\n  Record<BoxSpacing, string>\n> = {\n  m: {\n    none: \"m-[var(--dt-space-0)]\",\n    1: \"m-[var(--dt-space-1)]\",\n    2: \"m-[var(--dt-space-2)]\",\n    3: \"m-[var(--dt-space-3)]\",\n    4: \"m-[var(--dt-space-4)]\",\n    5: \"m-[var(--dt-space-5)]\",\n    6: \"m-[var(--dt-space-6)]\",\n    8: \"m-[var(--dt-space-8)]\",\n    10: \"m-[var(--dt-space-10)]\",\n    12: \"m-[var(--dt-space-12)]\",\n  },\n  mx: {\n    none: \"mx-[var(--dt-space-0)]\",\n    1: \"mx-[var(--dt-space-1)]\",\n    2: \"mx-[var(--dt-space-2)]\",\n    3: \"mx-[var(--dt-space-3)]\",\n    4: \"mx-[var(--dt-space-4)]\",\n    5: \"mx-[var(--dt-space-5)]\",\n    6: \"mx-[var(--dt-space-6)]\",\n    8: \"mx-[var(--dt-space-8)]\",\n    10: \"mx-[var(--dt-space-10)]\",\n    12: \"mx-[var(--dt-space-12)]\",\n  },\n  my: {\n    none: \"my-[var(--dt-space-0)]\",\n    1: \"my-[var(--dt-space-1)]\",\n    2: \"my-[var(--dt-space-2)]\",\n    3: \"my-[var(--dt-space-3)]\",\n    4: \"my-[var(--dt-space-4)]\",\n    5: \"my-[var(--dt-space-5)]\",\n    6: \"my-[var(--dt-space-6)]\",\n    8: \"my-[var(--dt-space-8)]\",\n    10: \"my-[var(--dt-space-10)]\",\n    12: \"my-[var(--dt-space-12)]\",\n  },\n  ms: {\n    none: \"ms-[var(--dt-space-0)]\",\n    1: \"ms-[var(--dt-space-1)]\",\n    2: \"ms-[var(--dt-space-2)]\",\n    3: \"ms-[var(--dt-space-3)]\",\n    4: \"ms-[var(--dt-space-4)]\",\n    5: \"ms-[var(--dt-space-5)]\",\n    6: \"ms-[var(--dt-space-6)]\",\n    8: \"ms-[var(--dt-space-8)]\",\n    10: \"ms-[var(--dt-space-10)]\",\n    12: \"ms-[var(--dt-space-12)]\",\n  },\n  me: {\n    none: \"me-[var(--dt-space-0)]\",\n    1: \"me-[var(--dt-space-1)]\",\n    2: \"me-[var(--dt-space-2)]\",\n    3: \"me-[var(--dt-space-3)]\",\n    4: \"me-[var(--dt-space-4)]\",\n    5: \"me-[var(--dt-space-5)]\",\n    6: \"me-[var(--dt-space-6)]\",\n    8: \"me-[var(--dt-space-8)]\",\n    10: \"me-[var(--dt-space-10)]\",\n    12: \"me-[var(--dt-space-12)]\",\n  },\n  mt: {\n    none: \"mt-[var(--dt-space-0)]\",\n    1: \"mt-[var(--dt-space-1)]\",\n    2: \"mt-[var(--dt-space-2)]\",\n    3: \"mt-[var(--dt-space-3)]\",\n    4: \"mt-[var(--dt-space-4)]\",\n    5: \"mt-[var(--dt-space-5)]\",\n    6: \"mt-[var(--dt-space-6)]\",\n    8: \"mt-[var(--dt-space-8)]\",\n    10: \"mt-[var(--dt-space-10)]\",\n    12: \"mt-[var(--dt-space-12)]\",\n  },\n  mb: {\n    none: \"mb-[var(--dt-space-0)]\",\n    1: \"mb-[var(--dt-space-1)]\",\n    2: \"mb-[var(--dt-space-2)]\",\n    3: \"mb-[var(--dt-space-3)]\",\n    4: \"mb-[var(--dt-space-4)]\",\n    5: \"mb-[var(--dt-space-5)]\",\n    6: \"mb-[var(--dt-space-6)]\",\n    8: \"mb-[var(--dt-space-8)]\",\n    10: \"mb-[var(--dt-space-10)]\",\n    12: \"mb-[var(--dt-space-12)]\",\n  },\n};\n\nconst boxGapClasses: Record<BoxSpacing, string> = {\n  none: \"gap-[var(--dt-space-0)]\",\n  1: \"gap-[var(--dt-space-1)]\",\n  2: \"gap-[var(--dt-space-2)]\",\n  3: \"gap-[var(--dt-space-3)]\",\n  4: \"gap-[var(--dt-space-4)]\",\n  5: \"gap-[var(--dt-space-5)]\",\n  6: \"gap-[var(--dt-space-6)]\",\n  8: \"gap-[var(--dt-space-8)]\",\n  10: \"gap-[var(--dt-space-10)]\",\n  12: \"gap-[var(--dt-space-12)]\",\n};\n\nconst boxSurfaceClasses: Record<BoxSurface, string> = {\n  transparent: \"bg-transparent\",\n  background: \"bg-background text-foreground\",\n  muted: \"bg-muted text-foreground\",\n  primary: \"bg-primary text-primary-foreground\",\n  destructive: \"bg-destructive text-destructive-foreground\",\n  success: \"bg-success text-success-foreground\",\n  warning: \"bg-warning text-warning-foreground\",\n  info: \"bg-info text-info-foreground\",\n};\n\nconst boxBorderClasses: Record<BoxBorder, string> = {\n  none: \"border-0\",\n  default: \"border border-border\",\n  muted: \"border border-muted\",\n  input: \"border border-input\",\n  primary: \"border border-primary\",\n  destructive: \"border border-destructive\",\n  success: \"border border-success\",\n  warning: \"border border-warning\",\n  info: \"border border-info\",\n};\n\nconst boxRadiusClasses: Record<BoxRadius, string> = {\n  none: \"rounded-none\",\n  sm: \"rounded-sm\",\n  md: \"rounded-md\",\n  lg: \"rounded-lg\",\n  full: \"rounded-full\",\n};\n\nconst boxOverflowClasses: Record<BoxOverflow, string> = {\n  visible: \"overflow-visible\",\n  hidden: \"overflow-hidden\",\n  clip: \"overflow-clip\",\n  auto: \"overflow-auto\",\n};\n\nexport function boxClassNames({\n  border = \"none\",\n  className,\n  display,\n  gap,\n  m,\n  mb,\n  me,\n  ms,\n  mt,\n  mx,\n  my,\n  overflow,\n  p,\n  pb,\n  pe,\n  ps,\n  pt,\n  px,\n  py,\n  radius = \"none\",\n  surface = \"transparent\",\n}: Pick<\n  BoxProps,\n  | \"border\"\n  | \"className\"\n  | \"display\"\n  | \"gap\"\n  | \"m\"\n  | \"mb\"\n  | \"me\"\n  | \"ms\"\n  | \"mt\"\n  | \"mx\"\n  | \"my\"\n  | \"overflow\"\n  | \"p\"\n  | \"pb\"\n  | \"pe\"\n  | \"ps\"\n  | \"pt\"\n  | \"px\"\n  | \"py\"\n  | \"radius\"\n  | \"surface\"\n> = {}) {\n  return cn(\n    boxBaseClasses,\n    display ? boxDisplayClasses[display] : undefined,\n    p ? boxPaddingClasses.p[p] : undefined,\n    px ? boxPaddingClasses.px[px] : undefined,\n    py ? boxPaddingClasses.py[py] : undefined,\n    ps ? boxPaddingClasses.ps[ps] : undefined,\n    pe ? boxPaddingClasses.pe[pe] : undefined,\n    pt ? boxPaddingClasses.pt[pt] : undefined,\n    pb ? boxPaddingClasses.pb[pb] : undefined,\n    m ? boxMarginClasses.m[m] : undefined,\n    mx ? boxMarginClasses.mx[mx] : undefined,\n    my ? boxMarginClasses.my[my] : undefined,\n    ms ? boxMarginClasses.ms[ms] : undefined,\n    me ? boxMarginClasses.me[me] : undefined,\n    mt ? boxMarginClasses.mt[mt] : undefined,\n    mb ? boxMarginClasses.mb[mb] : undefined,\n    gap ? boxGapClasses[gap] : undefined,\n    boxSurfaceClasses[surface],\n    boxBorderClasses[border],\n    boxRadiusClasses[radius],\n    overflow ? boxOverflowClasses[overflow] : undefined,\n    className,\n  );\n}\n\nfunction setRef<T>(ref: Ref<T> | undefined, node: T | null) {\n  if (typeof ref === \"function\") {\n    ref(node);\n    return;\n  }\n\n  if (ref) {\n    ref.current = node;\n  }\n}\n\nfunction composeRefs<T>(...refs: Array<Ref<T> | undefined>) {\n  return (node: T | null) => {\n    for (const ref of refs) {\n      setRef(ref, node);\n    }\n  };\n}\n\nfunction getChildRef(child: ReactElement<BoxSlotProps>) {\n  return child.props.ref;\n}\n\nfunction isEventHandler(key: string, value: unknown): value is EventHandler {\n  return /^on[A-Z]/.test(key) && typeof value === \"function\";\n}\n\nfunction isDefaultPreventedEvent(\n  event: unknown,\n): event is { defaultPrevented: boolean } {\n  return (\n    typeof event === \"object\" &&\n    event !== null &&\n    \"defaultPrevented\" in event &&\n    event.defaultPrevented === true\n  );\n}\n\nfunction composeEventHandlers(\n  componentHandler: EventHandler,\n  childHandler: EventHandler,\n): EventHandler {\n  return (...args) => {\n    componentHandler(...args);\n\n    if (!isDefaultPreventedEvent(args[0])) {\n      childHandler(...args);\n    }\n  };\n}\n\nfunction composeSlotProps(\n  componentProps: Record<string, unknown>,\n  childProps: BoxSlotProps,\n) {\n  const composedProps: BoxSlotProps = {\n    ...componentProps,\n    ...childProps,\n  };\n\n  for (const [key, componentValue] of Object.entries(componentProps)) {\n    const childValue = childProps[key];\n\n    if (\n      isEventHandler(key, componentValue) &&\n      isEventHandler(key, childValue)\n    ) {\n      composedProps[key] = composeEventHandlers(componentValue, childValue);\n    }\n  }\n\n  return composedProps;\n}\n\nfunction getBoxDataAttributes({\n  as,\n  asChild,\n  border,\n  display,\n  gap,\n  m,\n  mb,\n  me,\n  ms,\n  mt,\n  mx,\n  my,\n  overflow,\n  p,\n  pb,\n  pe,\n  ps,\n  pt,\n  px,\n  py,\n  radius,\n  surface,\n}: Pick<\n  BoxProps,\n  | \"as\"\n  | \"asChild\"\n  | \"border\"\n  | \"display\"\n  | \"gap\"\n  | \"m\"\n  | \"mb\"\n  | \"me\"\n  | \"ms\"\n  | \"mt\"\n  | \"mx\"\n  | \"my\"\n  | \"overflow\"\n  | \"p\"\n  | \"pb\"\n  | \"pe\"\n  | \"ps\"\n  | \"pt\"\n  | \"px\"\n  | \"py\"\n  | \"radius\"\n  | \"surface\"\n>) {\n  return {\n    \"data-slot\": \"box\",\n    \"data-as-child\": asChild ? \"true\" : undefined,\n    \"data-element\": asChild ? undefined : as,\n    \"data-display\": display,\n    \"data-p\": p,\n    \"data-px\": px,\n    \"data-py\": py,\n    \"data-ps\": ps,\n    \"data-pe\": pe,\n    \"data-pt\": pt,\n    \"data-pb\": pb,\n    \"data-m\": m,\n    \"data-mx\": mx,\n    \"data-my\": my,\n    \"data-ms\": ms,\n    \"data-me\": me,\n    \"data-mt\": mt,\n    \"data-mb\": mb,\n    \"data-gap\": gap,\n    \"data-surface\": surface,\n    \"data-border\": border,\n    \"data-radius\": radius,\n    \"data-overflow\": overflow,\n  };\n}\n\nexport const Box = forwardRef<HTMLElement, BoxProps>(\n  (\n    {\n      as = \"div\",\n      asChild = false,\n      border = \"none\",\n      children,\n      className,\n      display,\n      gap,\n      m,\n      mb,\n      me,\n      ms,\n      mt,\n      mx,\n      my,\n      onClick,\n      overflow,\n      p,\n      pb,\n      pe,\n      ps,\n      pt,\n      px,\n      py,\n      radius = \"none\",\n      surface = \"transparent\",\n      ...props\n    },\n    ref,\n  ) => {\n    const classes = boxClassNames({\n      border,\n      className,\n      display,\n      gap,\n      m,\n      mb,\n      me,\n      ms,\n      mt,\n      mx,\n      my,\n      overflow,\n      p,\n      pb,\n      pe,\n      ps,\n      pt,\n      px,\n      py,\n      radius,\n      surface,\n    });\n    const dataAttributes = getBoxDataAttributes({\n      as,\n      asChild,\n      border,\n      display,\n      gap,\n      m,\n      mb,\n      me,\n      ms,\n      mt,\n      mx,\n      my,\n      overflow,\n      p,\n      pb,\n      pe,\n      ps,\n      pt,\n      px,\n      py,\n      radius,\n      surface,\n    });\n\n    if (asChild) {\n      const child = Children.only(children);\n\n      if (!isValidElement<BoxSlotProps>(child)) {\n        throw new Error(\n          \"Box with asChild expects a single React element child.\",\n        );\n      }\n\n      const childRef = getChildRef(child);\n      const composedProps = composeSlotProps(\n        {\n          ...props,\n          ...(onClick ? { onClick } : {}),\n        },\n        child.props,\n      );\n\n      return cloneElement(child, {\n        ...composedProps,\n        ...dataAttributes,\n        ref: composeRefs(ref as Ref<HTMLElement>, childRef),\n        className: cn(classes, child.props.className),\n      });\n    }\n\n    return createElement(\n      as,\n      {\n        ...props,\n        ...dataAttributes,\n        ref: ref as ForwardedRef<HTMLElement>,\n        className: classes,\n        onClick,\n      },\n      children,\n    );\n  },\n);\n\nBox.displayName = \"Box\";\n"
    },
    {
      "path": "packages/components/src/components/box/index.ts",
      "type": "registry:file",
      "target": "~/components/dethink/components/box/index.ts",
      "content": "export {\n  Box,\n  boxClassNames,\n  type BoxBorder,\n  type BoxDisplay,\n  type BoxElement,\n  type BoxOverflow,\n  type BoxProps,\n  type BoxRadius,\n  type BoxSpacing,\n  type BoxSurface,\n} from \"./box\";\n"
    },
    {
      "path": "packages/components/src/utils/cn.ts",
      "type": "registry:file",
      "target": "~/components/dethink/utils/cn.ts",
      "content": "import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"
    }
  ]
}