feat(ui): reorganize primitive components into a new components/primitives directory and add new primitives like Grid, Section, Container, and Slot.

Author: melvinchia3636

bun.lock

@@ -67,6 +67,7 @@
         "@iconify/react": "^6.0.2",
         "@tanstack/react-query": "^5.90.2",
         "@uidotdev/usehooks": "^2.4.1",
+        "@vanilla-extract/vite-plugin": "^5.1.4",
         "clsx": "^2.1.1",
         "dayjs": "^1.11.19",
         "dotenv": "^17.2.3",

package.json

@@ -1,7 +1,7 @@
 import clsx from 'clsx'
 import React from 'react'
 
-import { Slot } from '../../primitives/Slot'
+import { Slot } from '../primitives/Slot'
 
 export interface CardBaseProps {
   children: React.ReactNode

packages/lifeforge-ui/src/components/layout/Card.tsx

@@ -1,7 +1,9 @@
 import { recipe } from '@vanilla-extract/recipes'
 import { createSprinkles, defineProperties } from '@vanilla-extract/sprinkles'
 
-import { defaultCondition, responsiveConditions, vars } from '../system'
+import { defaultCondition, responsiveConditions, vars } from '../../../system'
+// Import to ensure responsive layout CSS is generated
+import '../styles/responsive.css'
 
 export const boxBase = recipe({
   base: {

…s/lifeforge-ui/src/primitives/box.css.ts …src/components/primitives/Box/box.css.tspackages/lifeforge-ui/src/primitives/box.css.ts renamed to packages/lifeforge-ui/src/components/primitives/Box/box.css.ts packages/lifeforge-ui/src/primitives/box.css.ts renamed to packages/lifeforge-ui/src/components/primitives/Box/box.css.ts

@@ -1,17 +1,18 @@
 import { clsx } from 'clsx'
 import {
+  type CSSProperties,
   type ComponentPropsWithRef,
   type ElementType,
   type ReactNode,
   type Ref
 } from 'react'
 
-import { type ResponsiveProp, normalizeResponsiveProp } from '../system'
-import { Slot } from './Slot'
+import { type ResponsiveProp, normalizeResponsiveProp } from '../../../system'
+import { Slot } from '../Slot'
+import { getResponsiveLayoutStyles } from '../propDefs'
+import { type LayoutProps, type MarginProps } from '../types'
 import { type BoxSprinkles, boxBase, boxSprinkles } from './box.css'
 
-type SpaceValue = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'
-
 type BgColor =
   | 'transparent'
   | 'bg-50'
@@ -40,36 +41,18 @@ type RadiusValue = 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'
 
 type DisplayValue = 'block' | 'inline' | 'inline-block' | 'none' | 'contents'
 
-type PositionValue = 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'
-
-type OverflowValue = 'visible' | 'hidden' | 'scroll' | 'auto'
-
 const DEFAULT_ELEMENT = 'div' as const
 
-interface BoxOwnProps<T extends ElementType = typeof DEFAULT_ELEMENT> {
+interface BoxOwnProps<T extends ElementType = typeof DEFAULT_ELEMENT>
+  extends LayoutProps, MarginProps {
   as?: T
   asChild?: boolean
   ref?: Ref<HTMLElement>
-  p?: ResponsiveProp<SpaceValue>
-  px?: ResponsiveProp<SpaceValue>
-  py?: ResponsiveProp<SpaceValue>
-  pt?: ResponsiveProp<SpaceValue>
-  pb?: ResponsiveProp<SpaceValue>
-  pl?: ResponsiveProp<SpaceValue>
-  pr?: ResponsiveProp<SpaceValue>
-  m?: ResponsiveProp<SpaceValue>
-  mx?: ResponsiveProp<SpaceValue>
-  my?: ResponsiveProp<SpaceValue>
-  mt?: ResponsiveProp<SpaceValue>
-  mb?: ResponsiveProp<SpaceValue>
-  ml?: ResponsiveProp<SpaceValue>
-  mr?: ResponsiveProp<SpaceValue>
+  display?: ResponsiveProp<DisplayValue>
   bg?: ResponsiveProp<BgColor>
   rounded?: ResponsiveProp<RadiusValue>
-  display?: ResponsiveProp<DisplayValue>
-  position?: ResponsiveProp<PositionValue>
-  overflow?: ResponsiveProp<OverflowValue>
   className?: string
+  style?: CSSProperties
   children?: ReactNode
 }
 
@@ -80,33 +63,65 @@ export function Box<T extends ElementType = typeof DEFAULT_ELEMENT>({
   as,
   asChild = false,
   ref,
+  // Padding
   p,
   px,
   py,
   pt,
   pb,
   pl,
   pr,
+  // Margin
   m,
   mx,
   my,
   mt,
   mb,
   ml,
   mr,
-  bg,
-  rounded,
+  // Layout props (CSS string - now responsive!)
+  width,
+  minWidth,
+  maxWidth,
+  height,
+  minHeight,
+  maxHeight,
+  inset,
+  top,
+  right,
+  bottom,
+  left,
+  flexBasis,
+  flexGrow,
+  flexShrink,
+  gridArea,
+  gridColumn,
+  gridColumnStart,
+  gridColumnEnd,
+  gridRow,
+  gridRowStart,
+  gridRowEnd,
+  // Sprinkle props
   display,
   position,
   overflow,
+  overflowX,
+  overflowY,
+  bg,
+  rounded,
+  // Standard props
   className,
+  style,
   children,
   ...rest
 }: BoxProps<T>) {
+  // Build sprinkles className for tokenized props
   const sprinklesClassName = boxSprinkles({
     display: normalizeResponsiveProp(display) as BoxSprinkles['display'],
     position: normalizeResponsiveProp(position) as BoxSprinkles['position'],
-    overflow: normalizeResponsiveProp(overflow) as BoxSprinkles['overflow'],
+    overflow: normalizeResponsiveProp(
+      overflow ?? overflowX ?? overflowY
+    ) as BoxSprinkles['overflow'],
     padding: normalizeResponsiveProp(p) as BoxSprinkles['padding'],
     paddingTop: normalizeResponsiveProp(pt ?? py) as BoxSprinkles['paddingTop'],
     paddingBottom: normalizeResponsiveProp(
@@ -135,12 +150,48 @@ export function Box<T extends ElementType = typeof DEFAULT_ELEMENT>({
     ) as BoxSprinkles['borderRadius']
   })
 
+  // Build responsive styles for CSS string props (now with breakpoint support!)
+  const responsiveStyles = getResponsiveLayoutStyles({
+    width,
+    minWidth,
+    maxWidth,
+    height,
+    minHeight,
+    maxHeight,
+    inset,
+    top,
+    right,
+    bottom,
+    left,
+    flexBasis,
+    flexGrow,
+    flexShrink,
+    gridArea,
+    gridColumn,
+    gridColumnStart,
+    gridColumnEnd,
+    gridRow,
+    gridRowStart,
+    gridRowEnd
+  })
+
+  const mergedStyle =
+    Object.keys(responsiveStyles.style).length > 0
+      ? { ...responsiveStyles.style, ...style }
+      : style
+
   const Component = asChild ? Slot : (as ?? DEFAULT_ELEMENT)
 
   return (
     <Component
       ref={ref as Ref<never>}
-      className={clsx(boxBase(), sprinklesClassName, className)}
+      className={clsx(
+        boxBase(),
+        sprinklesClassName,
+        responsiveStyles.className,
+        className
+      )}
+      style={mergedStyle}
       {...rest}
     >
       {children}