cn

import * as React from 'react'
import { Checkbox, Label, cn } from 'ferry-ui'

export default function CnHero() {
  const [selected, setSelected] = React.useState(true)
  return (
    <>
      <div
        className={cn(
          'rounded-lg border bg-surface-100 px-4 py-3 text-sm text-foreground-light',
          // A conditional class. When the condition is false, cn() ignores the value.
          selected && 'border-primary-bright bg-primary-soft text-foreground',
        )}
      >
        Customer portal
      </div>
      <Label>
        <Checkbox checked={selected} onCheckedChange={(checked) => setSelected(checked === true)} />
        Selected
      </Label>
    </>
  )
}

import type { ComponentProps } from 'react'
import { cn } from 'ferry-ui'

// The base classes come first and `className` comes last: the class of the caller wins.
function Panel({ className, ...props }: ComponentProps<'div'>) {
  return <div className={cn('rounded-lg border bg-surface-100 p-3 text-sm text-foreground', className)} {...props} />
}

export default function CnMerge() {
  return (
    <>
      <Panel>The base padding</Panel>
      <Panel className="p-6">More padding</Panel>
    </>
  )
}