@lovett/ui 0.0.1

package/src/card.tsx

@@ -0,0 +1,369 @@
+import {
+  Children,
+  forwardRef,
+  isValidElement,
+  type HTMLAttributes,
+  type ReactNode,
+} from 'react'
+import { cn } from './lib/utils'
+
+/**
+ * Card — head/body/foot anatomy.
+ *
+ * Usage:
+ *   <Card interactive onClick={...}>
+ *     <Card.Head>
+ *       <IconTile bg={...} fg={...}><Icon/></IconTile>
+ *       <div className="flex-1 min-w-0">
+ *         <Card.Title>Roof Replacement</Card.Title>
+ *         <Card.Desc>Full tear-off and replacement...</Card.Desc>
+ *       </div>
+ *     </Card.Head>
+ *     <Card.Body>
+ *       <TagRow tags={['25-Year Warranty', 'Metal & Asphalt']}/>
+ *     </Card.Body>
+ *     <Card.Foot>
+ *       <Card.Meta>...</Card.Meta>
+ *       <Card.Actions>...</Card.Actions>
+ *     </Card.Foot>
+ *   </Card>
+ *
+ * `interactive` adds cursor + hover lift + reveal-on-hover for Card.Actions.
+ */
+
+type DivProps = HTMLAttributes<HTMLDivElement>
+
+interface CardProps extends DivProps {
+  interactive?: boolean
+}
+
+const CardRoot = forwardRef<HTMLDivElement, CardProps>(function Card(
+  { className, interactive, children, ...rest },
+  ref,
+) {
+  // Auto-wrap Head + Body (and any sibling content) into a single
+  // tray, with Foot left outside on the outer frame. This gives every
+  // card the canonical "gray frame + white focal panel + footer on
+  // frame" look without callers needing to restructure their JSX.
+  //
+  // Two opt-outs:
+  //   1. If a child is <Card.Tray> directly, the caller is managing
+  //      tray layout themselves (asset card pattern) — render flat.
+  //   2. If no child is <Card.Head>/<Card.Body>/<Card.Foot>, this is
+  //      a "custom content" card (e.g. brand-profile logo, history row,
+  //      mini stat) — render flat so the auto-wrap doesn't add unwanted
+  //      inset margin to small or one-off layouts.
+  const childArray = Children.toArray(children)
+  const hasExplicitTray = childArray.some(
+    (child) => isValidElement(child) && child.type === Tray,
+  )
+  const hasNamedSlot = childArray.some(
+    (child) =>
+      isValidElement(child) &&
+      (child.type === Head || child.type === Body || child.type === Foot),
+  )
+  const shouldAutoWrap = !hasExplicitTray && hasNamedSlot
+
+  let renderedChildren: ReactNode = children
+  if (shouldAutoWrap) {
+    const trayChildren: ReactNode[] = []
+    const footChildren: ReactNode[] = []
+    childArray.forEach((child) => {
+      if (isValidElement(child) && child.type === Foot) {
+        footChildren.push(child)
+      } else {
+        trayChildren.push(child)
+      }
+    })
+    renderedChildren = (
+      <>
+        {trayChildren.length > 0 && (
+          <div className="ds-card-tray flex-1">{trayChildren}</div>
+        )}
+        {footChildren}
+      </>
+    )
+  }
+
+  return (
+    <div
+      ref={ref}
+      data-interactive={interactive ? 'true' : undefined}
+      data-framed={shouldAutoWrap ? 'true' : undefined}
+      className={cn(
+        'ds-card-surface group/card flex flex-col h-full overflow-hidden',
+        className,
+      )}
+      {...rest}
+    >
+      {renderedChildren}
+    </div>
+  )
+})
+
+function Head({ className, ...rest }: DivProps) {
+  return (
+    <div
+      className={cn('flex items-start gap-3 px-5 pt-5', className)}
+      {...rest}
+    />
+  )
+}
+
+function Body({ className, ...rest }: DivProps) {
+  return <div className={cn('px-5 py-3 pb-4', className)} {...rest} />
+}
+
+function Tray({ className, ...rest }: DivProps) {
+  return <div className={cn('ds-card-tray', className)} {...rest} />
+}
+
+function Foot({ className, ...rest }: DivProps) {
+  return (
+    <div
+      className={cn(
+        'mt-auto flex items-center justify-between gap-3 px-5 py-3 text-[12px]',
+        className,
+      )}
+      style={{
+        color: 'rgb(var(--text-tertiary))',
+        ...rest.style,
+      }}
+      {...rest}
+    />
+  )
+}
+
+function Title({
+  children,
+  className,
+  ...rest
+}: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(
+        'text-[15px] font-semibold leading-[1.3] truncate flex-1 min-w-0',
+        className,
+      )}
+      style={{ color: 'rgb(var(--foreground))', ...rest.style }}
+      {...rest}
+    >
+      {children}
+    </div>
+  )
+}
+
+function Desc({
+  children,
+  className,
+  ...rest
+}: HTMLAttributes<HTMLDivElement> & { clamp?: 2 | 3 }) {
+  const clamp = (rest as { clamp?: 2 | 3 }).clamp ?? 2
+  return (
+    <div
+      className={cn(
+        'text-[13px] leading-[1.5] mt-1.5',
+        clamp === 2 && 'line-clamp-2',
+        clamp === 3 && 'line-clamp-3',
+        className,
+      )}
+      style={{ color: 'rgb(var(--text-secondary))', ...rest.style }}
+      {...rest}
+    >
+      {children}
+    </div>
+  )
+}
+
+function Meta({ className, ...rest }: DivProps) {
+  return (
+    <div
+      className={cn('flex items-center gap-3 min-w-0', className)}
+      {...rest}
+    />
+  )
+}
+
+function MetaItem({
+  icon,
+  children,
+  className,
+}: {
+  icon?: ReactNode
+  children: ReactNode
+  className?: string
+}) {
+  return (
+    <div
+      className={cn('flex items-center gap-1.5 text-[12px]', className)}
+      style={{ color: 'rgb(var(--text-tertiary))' }}
+    >
+      {icon && (
+        <span style={{ opacity: 0.7 }} className="shrink-0 inline-flex">
+          {icon}
+        </span>
+      )}
+      <span className="truncate tnum">{children}</span>
+    </div>
+  )
+}
+
+function Actions({ className, ...rest }: DivProps) {
+  return (
+    <div
+      className={cn('flex items-center gap-1', className)}
+      onClick={(e) => e.stopPropagation()}
+      {...rest}
+    />
+  )
+}
+
+interface ActionButtonProps extends HTMLAttributes<HTMLButtonElement> {
+  danger?: boolean
+}
+
+const ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>(
+  function ActionButton({ className, danger, children, ...rest }, ref) {
+    return (
+      <button
+        ref={ref}
+        className={cn(
+          'flex h-7 w-7 items-center justify-center rounded-[6px] transition-colors',
+          className,
+        )}
+        style={{
+          background: 'transparent',
+          color: 'rgb(var(--text-tertiary))',
+          border: '1px solid rgb(var(--border))',
+        }}
+        onMouseEnter={(e) => {
+          if (danger) {
+            e.currentTarget.style.color = 'rgb(var(--destructive))'
+            e.currentTarget.style.borderColor = 'rgb(var(--destructive) / 0.4)'
+            e.currentTarget.style.background =
+              'rgb(var(--destructive) / 0.08)'
+          } else {
+            e.currentTarget.style.color = 'rgb(var(--foreground))'
+            e.currentTarget.style.borderColor = 'rgb(var(--border-strong))'
+            e.currentTarget.style.background = 'rgb(var(--surface-overlay))'
+          }
+        }}
+        onMouseLeave={(e) => {
+          e.currentTarget.style.color = 'rgb(var(--text-tertiary))'
+          e.currentTarget.style.borderColor = 'rgb(var(--border))'
+          e.currentTarget.style.background = 'transparent'
+        }}
+        {...rest}
+      >
+        {children}
+      </button>
+    )
+  },
+)
+
+/**
+ * Icon-on-color tile used in card heads. Pass tone colors as inline rgb()
+ * strings so they can reference semantic tokens (info/success/etc.).
+ */
+function IconTile({
+  bg,
+  fg,
+  size = 38,
+  className,
+  children,
+}: {
+  bg: string
+  fg: string
+  size?: number
+  className?: string
+  children: ReactNode
+}) {
+  return (
+    <span
+      className={cn(
+        'inline-flex items-center justify-center rounded-[10px] shrink-0',
+        className,
+      )}
+      style={{
+        width: size,
+        height: size,
+        background: bg,
+        color: fg,
+      }}
+    >
+      {children}
+    </span>
+  )
+}
+
+/** Tag row helper — reads `--tag-bg`/`--border` automatically. */
+function TagRow({
+  tags,
+  max = 4,
+  className,
+}: {
+  tags: string[]
+  max?: number
+  className?: string
+}) {
+  const shown = tags.slice(0, max)
+  const overflow = tags.length - max
+  return (
+    <div className={cn('flex flex-wrap gap-1.5', className)}>
+      {shown.map((t, i) => (
+        <span
+          key={i}
+          className="inline-flex items-center px-2.5 py-[3px] rounded-full text-[11.5px] font-medium whitespace-nowrap"
+          style={{
+            background: 'rgb(var(--surface-overlay))',
+            border: '1px solid rgb(var(--border))',
+            color: 'rgb(var(--text-secondary))',
+          }}
+        >
+          {t}
+        </span>
+      ))}
+      {overflow > 0 && (
+        <span
+          className="text-[11px] font-semibold self-center"
+          style={{ color: 'rgb(var(--text-muted))' }}
+        >
+          +{overflow}
+        </span>
+      )}
+    </div>
+  )
+}
+
+// Compose the API
+type CardComponent = typeof CardRoot & {
+  Head: typeof Head
+  Body: typeof Body
+  Tray: typeof Tray
+  Foot: typeof Foot
+  Title: typeof Title
+  Desc: typeof Desc
+  Meta: typeof Meta
+  MetaItem: typeof MetaItem
+  Actions: typeof Actions
+  ActionButton: typeof ActionButton
+  IconTile: typeof IconTile
+  TagRow: typeof TagRow
+}
+
+const Card = CardRoot as CardComponent
+Card.Head = Head
+Card.Body = Body
+Card.Tray = Tray
+Card.Foot = Foot
+Card.Title = Title
+Card.Desc = Desc
+Card.Meta = Meta
+Card.MetaItem = MetaItem
+Card.Actions = Actions
+Card.ActionButton = ActionButton
+Card.IconTile = IconTile
+Card.TagRow = TagRow
+
+export default Card
+export { IconTile, TagRow }

package/src/checkbox.tsx

@@ -0,0 +1,114 @@
+/**
+ * Checkbox — workspace-native checkbox primitive.
+ *
+ * Inspired by gray-ui-csm `components/ui/checkbox.tsx` (MIT,
+ * https://github.com/Jason-uxui/gray-ui-csm/blob/baf8346ac0c1160282e0b173de1bffc594d9c9c3/components/ui/checkbox.tsx)
+ * — see packages/ui/licenses/gray-ui-csm-LICENSE.txt.
+ *
+ * BUILD_FRESH per ADR-025 DEVIATION-2: source ships on
+ * `@base-ui/react/checkbox`, which is NOT in CLAUDE.md §1 allowed
+ * deps. The shape (icon-in-square + indeterminate state +
+ * accessible Root API) and the surface API (`checked`,
+ * `indeterminate`, `onCheckedChange`) carry over; the implementation
+ * is a native `<input type="checkbox">` styled with our tokens.
+ *
+ * Workspace ADR: ADR-025
+ * Ported 2026-05-18
+ */
+
+import {
+  forwardRef,
+  useEffect,
+  useRef,
+  type InputHTMLAttributes,
+} from 'react'
+import { Check, Minus } from 'lucide-react'
+import { cn } from './lib/utils'
+
+export interface CheckboxProps
+  extends Omit<
+    InputHTMLAttributes<HTMLInputElement>,
+    'type' | 'onChange' | 'checked'
+  > {
+  checked?: boolean
+  indeterminate?: boolean
+  onCheckedChange?: (checked: boolean) => void
+}
+
+export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
+  function Checkbox(
+    { checked, indeterminate, onCheckedChange, className, disabled, ...rest },
+    forwardedRef,
+  ) {
+    const internalRef = useRef<HTMLInputElement | null>(null)
+
+    // Compose forwarded ref + internal ref so we can drive
+    // `.indeterminate` (a DOM-only property — not reflected as an
+    // attribute and not settable via React props).
+    const setRef = (node: HTMLInputElement | null) => {
+      internalRef.current = node
+      if (typeof forwardedRef === 'function') forwardedRef(node)
+      else if (forwardedRef)
+        (forwardedRef as { current: HTMLInputElement | null }).current = node
+    }
+
+    useEffect(() => {
+      if (internalRef.current) {
+        internalRef.current.indeterminate = Boolean(indeterminate)
+      }
+    }, [indeterminate])
+
+    const isChecked = Boolean(checked)
+    const isIndeterminate = Boolean(indeterminate)
+    const showIcon = isChecked || isIndeterminate
+
+    return (
+      <span
+        data-slot="checkbox"
+        data-state={
+          isIndeterminate
+            ? 'indeterminate'
+            : isChecked
+              ? 'checked'
+              : 'unchecked'
+        }
+        className={cn(
+          'relative inline-flex items-center justify-center shrink-0',
+          'h-4 w-4 rounded-[4px]',
+          'transition-colors',
+          disabled && 'opacity-50 cursor-not-allowed',
+          className,
+        )}
+        style={{
+          background: showIcon
+            ? 'rgb(var(--accent))'
+            : 'rgb(var(--bg-input))',
+          border: showIcon
+            ? '1.5px solid rgb(var(--accent))'
+            : '1.5px solid rgb(var(--border-strong))',
+          // Checkmark on the brand-red fill — matches the `.btn-primary`
+          // pattern in styles.css (`color: white`) — fixed white reads
+          // cleanly in both light and dark mode on the accent fill.
+          color: 'white',
+        }}
+      >
+        <input
+          ref={setRef}
+          type="checkbox"
+          checked={isChecked}
+          disabled={disabled}
+          onChange={(event) => onCheckedChange?.(event.target.checked)}
+          className="absolute inset-0 cursor-pointer opacity-0 disabled:cursor-not-allowed"
+          {...rest}
+        />
+        {showIcon ? (
+          isIndeterminate ? (
+            <Minus className="h-3 w-3 pointer-events-none" strokeWidth={3} />
+          ) : (
+            <Check className="h-3 w-3 pointer-events-none" strokeWidth={3} />
+          )
+        ) : null}
+      </span>
+    )
+  },
+)