@olwiba/ui 0.0.41 → 0.0.42

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olwiba/ui",
-  "version": "0.0.41",
+  "version": "0.0.42",
   "private": false,
   "type": "module",
   "sideEffects": false,

package/src/index.ts

@@ -14,6 +14,9 @@ export {
 // ─── Primitives — mode-aware re-exports of @olwiba/cn components ─────────────
 export * from './primitives';
 
+// ─── Layout — grid, stack, section primitives ────────────────────────────────
+export * from './layout';
+
 // ─── App — shells, auth, feedback ────────────────────────────────────────────
 export {
   AppShell,

package/src/layout/Grid.tsx

@@ -0,0 +1,72 @@
+import React from 'react'
+import { cn } from '../lib/utils'
+
+const colsMap: Record<number, string> = {
+  1: 'grid-cols-1',
+  2: 'grid-cols-2',
+  3: 'grid-cols-3',
+  4: 'grid-cols-4',
+  5: 'grid-cols-5',
+  6: 'grid-cols-6',
+  12: 'grid-cols-12',
+}
+
+const gapMap = {
+  none: 'gap-0',
+  xs: 'gap-2',
+  sm: 'gap-3',
+  md: 'gap-4',
+  lg: 'gap-6',
+  xl: 'gap-8',
+}
+
+const spanMap: Record<number, string> = {
+  1: 'col-span-1',
+  2: 'col-span-2',
+  3: 'col-span-3',
+  4: 'col-span-4',
+  5: 'col-span-5',
+  6: 'col-span-6',
+  7: 'col-span-7',
+  8: 'col-span-8',
+  9: 'col-span-9',
+  10: 'col-span-10',
+  11: 'col-span-11',
+  12: 'col-span-12',
+}
+
+const rowSpanMap: Record<number, string> = {
+  1: 'row-span-1',
+  2: 'row-span-2',
+  3: 'row-span-3',
+  4: 'row-span-4',
+}
+
+export interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
+  columns?: 1 | 2 | 3 | 4 | 5 | 6 | 12
+  gap?: keyof typeof gapMap
+}
+
+export function Grid({ columns = 3, gap = 'md', className, children, ...props }: GridProps) {
+  return (
+    <div className={cn('grid', colsMap[columns], gapMap[gap], className)} {...props}>
+      {children}
+    </div>
+  )
+}
+
+export interface GridItemProps extends React.HTMLAttributes<HTMLDivElement> {
+  span?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
+  rowSpan?: 1 | 2 | 3 | 4
+}
+
+export function GridItem({ span = 1, rowSpan, className, children, ...props }: GridItemProps) {
+  return (
+    <div
+      className={cn(spanMap[span], rowSpan != null && rowSpanMap[rowSpan], className)}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}

package/src/layout/Section.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import { cn } from '../lib/utils'
+
+const paddingMap = {
+  none: '',
+  sm: 'py-4',
+  md: 'py-8',
+  lg: 'py-16',
+}
+
+export interface SectionProps extends React.HTMLAttributes<HTMLElement> {
+  title?: string
+  description?: string
+  padding?: keyof typeof paddingMap
+}
+
+export function Section({ title, description, padding = 'md', className, children, ...props }: SectionProps) {
+  return (
+    <section className={cn('w-full', paddingMap[padding], className)} {...props}>
+      {(title || description) && (
+        <div className="mb-6">
+          {title && <h2 className="text-xl font-semibold text-foreground">{title}</h2>}
+          {description && <p className="mt-1 text-sm text-muted-foreground">{description}</p>}
+        </div>
+      )}
+      {children}
+    </section>
+  )
+}

package/src/layout/Stack.tsx

@@ -0,0 +1,62 @@
+import React from 'react'
+import { cn } from '../lib/utils'
+
+const gapMap = {
+  none: 'gap-0',
+  xs: 'gap-2',
+  sm: 'gap-3',
+  md: 'gap-4',
+  lg: 'gap-6',
+  xl: 'gap-8',
+}
+
+const alignMap = {
+  start: 'items-start',
+  center: 'items-center',
+  end: 'items-end',
+  stretch: 'items-stretch',
+}
+
+const justifyMap = {
+  start: 'justify-start',
+  center: 'justify-center',
+  end: 'justify-end',
+  between: 'justify-between',
+  around: 'justify-around',
+}
+
+export interface StackProps extends React.HTMLAttributes<HTMLDivElement> {
+  direction?: 'col' | 'row'
+  gap?: keyof typeof gapMap
+  align?: keyof typeof alignMap
+  justify?: keyof typeof justifyMap
+  wrap?: boolean
+}
+
+export function Stack({
+  direction = 'col',
+  gap = 'md',
+  align = 'stretch',
+  justify = 'start',
+  wrap = false,
+  className,
+  children,
+  ...props
+}: StackProps) {
+  return (
+    <div
+      className={cn(
+        'flex',
+        direction === 'col' ? 'flex-col' : 'flex-row',
+        gapMap[gap],
+        alignMap[align],
+        justifyMap[justify],
+        wrap && 'flex-wrap',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}

package/src/layout/index.ts

@@ -0,0 +1,6 @@
+export { Grid, GridItem } from './Grid'
+export type { GridProps, GridItemProps } from './Grid'
+export { Stack } from './Stack'
+export type { StackProps } from './Stack'
+export { Section } from './Section'
+export type { SectionProps } from './Section'