@olwiba/ui 0.0.45 → 0.0.46

package/package.json

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

package/src/layout/AppContent.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { cn } from '../lib/utils'
+
+const spacingMap = {
+  sm: 'space-y-4',
+  md: 'space-y-6',
+  lg: 'space-y-8',
+}
+
+const maxWidthMap = {
+  none: '',
+  'screen-lg': 'mx-auto max-w-screen-lg',
+  'screen-xl': 'mx-auto max-w-screen-xl',
+  'screen-2xl': 'mx-auto max-w-screen-2xl',
+}
+
+export interface AppContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  spacing?: keyof typeof spacingMap
+  maxWidth?: keyof typeof maxWidthMap
+}
+
+export function AppContent({
+  spacing = 'md',
+  maxWidth = 'none',
+  className,
+  children,
+  ...props
+}: AppContentProps) {
+  return (
+    <div className={cn('p-6', maxWidthMap[maxWidth], spacingMap[spacing], className)} {...props}>
+      {children}
+    </div>
+  )
+}

package/src/layout/AppGrid.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+import { cn } from '../lib/utils'
+
+const columnsMap = {
+  1: 'grid-cols-1',
+  2: 'grid-cols-1 md:grid-cols-2',
+  3: 'grid-cols-1 md:grid-cols-2 xl:grid-cols-3',
+  4: 'grid-cols-1 md:grid-cols-2 xl:grid-cols-4',
+}
+
+const gapMap = {
+  sm: 'gap-3',
+  md: 'gap-4',
+  lg: 'gap-6',
+}
+
+const spanMap = {
+  1: 'md:col-span-1',
+  2: 'md:col-span-2',
+  3: 'xl:col-span-3',
+  4: 'xl:col-span-4',
+  full: 'col-span-full',
+}
+
+export interface AppGridProps extends React.HTMLAttributes<HTMLDivElement> {
+  columns?: keyof typeof columnsMap
+  gap?: keyof typeof gapMap
+}
+
+export function AppGrid({ columns = 3, gap = 'md', className, children, ...props }: AppGridProps) {
+  return (
+    <div className={cn('grid', columnsMap[columns], gapMap[gap], className)} {...props}>
+      {children}
+    </div>
+  )
+}
+
+export interface AppGridCellProps extends React.HTMLAttributes<HTMLDivElement> {
+  span?: keyof typeof spanMap
+}
+
+export function AppGridCell({ span = 1, className, children, ...props }: AppGridCellProps) {
+  return (
+    <div className={cn(spanMap[span], className)} {...props}>
+      {children}
+    </div>
+  )
+}

package/src/layout/PublicPageFrame.tsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import { cn } from '../lib/utils'
+
+const surfaceMap = {
+  default: 'bg-background',
+  muted: 'bg-muted/50',
+}
+
+const spacingMap = {
+  sm: 'gap-4 p-4',
+  md: 'gap-5 p-4 sm:gap-6 sm:p-6',
+  lg: 'gap-6 p-4 sm:gap-8 sm:p-6',
+}
+
+const maxWidthMap = {
+  none: '',
+  'screen-xl': 'mx-auto max-w-screen-xl',
+  'screen-2xl': 'mx-auto max-w-screen-2xl',
+}
+
+export interface PublicPageFrameProps extends React.HTMLAttributes<HTMLDivElement> {
+  surface?: keyof typeof surfaceMap
+  spacing?: keyof typeof spacingMap
+  maxWidth?: keyof typeof maxWidthMap
+}
+
+export function PublicPageFrame({
+  surface = 'muted',
+  spacing = 'md',
+  maxWidth = 'none',
+  className,
+  children,
+  ...props
+}: PublicPageFrameProps) {
+  return (
+    <div className={cn('min-h-screen', surfaceMap[surface], className)} {...props}>
+      <div className={cn('flex flex-col', spacingMap[spacing], maxWidthMap[maxWidth])}>
+        {children}
+      </div>
+    </div>
+  )
+}

package/src/layout/index.ts

@@ -4,3 +4,9 @@ export { Stack } from './Stack'
 export type { StackProps } from './Stack'
 export { Section } from './Section'
 export type { SectionProps } from './Section'
+export { AppContent } from './AppContent'
+export type { AppContentProps } from './AppContent'
+export { AppGrid, AppGridCell } from './AppGrid'
+export type { AppGridProps, AppGridCellProps } from './AppGrid'
+export { PublicPageFrame } from './PublicPageFrame'
+export type { PublicPageFrameProps } from './PublicPageFrame'