BoxLayoutProps

What is BoxLayoutProps?

Every component accepts these props

import {
  Button, Input, Card, Badge, Accordion,
  Avatar, Checkbox, Dropdown, Modal,
  Progress, Skeleton, Spinner, Switch, Tabs,
  Breadcrumb, Pagination, Table, Tag, Tooltip, Drawer,
} from '@stareezy-ui/components'

// Spacing on any component
<Button p={{ base: 8, md: 12 }} mb={16} />
<Input  mx={12} mt={8} />
<Card   p={{ base: 12, md: 20, lg: 28 }} />
<Badge  px={8} py={4} />

// Sizing on any component
<Button w={{ base: '100%', md: 'auto' }} />
<Input  w={{ base: '100%', md: 360 }} />
<Modal  maxW={560} />

// $-prefixed breakpoint groups
<Card
  $md={{ flexDirection: 'row', p: 20 }}
  $lg={{ p: 28, gap: 16 }}
/>

With custom shorthands

Custom shorthands from your stareezy.config.ts are also part of BoxLayoutProps after module augmentation. They accept both plain values and responsive objects.

// With shorthands: { br: 'borderRadius', w: 'width', h: 'height' } as const

<Button
  p={{ md: 16 }}
  w="100%"
  br={8}
/>

// TypeScript knows 'br', 'w', 'h' are valid on Button because
// Button extends BoxLayoutProps which includes CustomShorthandProps

Spacing props

Sizing props

Flex props

extractBoxLayoutProps utility

When building custom components that should accept BoxLayoutProps, use extractBoxLayoutProps to split layout props from component-specific props:

import { extractBoxLayoutProps, Box } from '@stareezy-ui/components'
import type { BoxLayoutProps } from '@stareezy-ui/components'

interface MyCardProps extends BoxLayoutProps {
  title: string
  children: React.ReactNode
}

function MyCard({ title, children, ...props }: MyCardProps) {
  const { layout, rest } = extractBoxLayoutProps(props)

  return (
    <Box {...layout} style={{ borderRadius: 12 }}>
      <h3>{title}</h3>
      {children}
    </Box>
  )
}

// Usage — layout props are accepted
<MyCard title="Hello" p={{ base: 12, md: 20 }} mb={16}>
  Content here
</MyCard>