mmintel/gridpilot.gg
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

website refactor

Browse Source
This commit is contained in:
Marc Mintel
2026-01-18 21:31:08 +01:00
parent 502d4aa092
commit b43a23a48c
96 changed files with 3461 additions and 4067 deletions
Download Patch File Download Diff File Expand all files Collapse all files

414
apps/website/ui/primitives/Box.tsx
View File

@@ -1,11 +1,11 @@
import React, { forwardRef, ForwardedRef, ElementType, ComponentPropsWithoutRef } from 'react';
import React, { forwardRef, ForwardedRef, ElementType } from 'react';
/**
* WARNING: DO NOT VIOLATE THE PURPOSE OF THIS PRIMITIVE.
*
* Box is a basic container primitive for spacing, sizing and basic styling.
* Box is a basic container primitive for spacing, sizing and basic layout.
*
* - DO NOT add layout props (flex, grid, gap) - use Stack or Grid instead.
* - DO NOT add decoration props (bg, border, shadow) - use Surface instead.
* - DO NOT add positioning props (absolute, top, zIndex) - create a specific component.
* - DO NOT add animation props - create a specific component.
*
@@ -34,8 +34,23 @@ export type ResponsiveValue<T> = {
export interface BoxProps<T extends ElementType> {
as?: T;
children?: React.ReactNode;
className?: string;
// Spacing
margin?: Spacing | ResponsiveSpacing;
marginTop?: Spacing | ResponsiveSpacing;
marginBottom?: Spacing | ResponsiveSpacing;
marginLeft?: Spacing | 'auto' | ResponsiveSpacing;
marginRight?: Spacing | 'auto' | ResponsiveSpacing;
marginX?: Spacing | 'auto' | ResponsiveSpacing;
marginY?: Spacing | ResponsiveSpacing;
padding?: Spacing | ResponsiveSpacing;
paddingTop?: Spacing | ResponsiveSpacing;
paddingBottom?: Spacing | ResponsiveSpacing;
paddingLeft?: Spacing | ResponsiveSpacing;
paddingRight?: Spacing | ResponsiveSpacing;
paddingX?: Spacing | ResponsiveSpacing;
paddingY?: Spacing | ResponsiveSpacing;
// Aliases (Deprecated - use full names)
m?: Spacing | ResponsiveSpacing;
mt?: Spacing | ResponsiveSpacing;
mb?: Spacing | ResponsiveSpacing;
@@ -50,11 +65,10 @@ export interface BoxProps<T extends ElementType> {
pr?: Spacing | ResponsiveSpacing;
px?: Spacing | ResponsiveSpacing;
py?: Spacing | ResponsiveSpacing;
// Sizing
w?: string | number | ResponsiveValue<string | number>;
h?: string | number | ResponsiveValue<string | number>;
width?: string | number;
height?: string | number;
width?: string | number | ResponsiveValue<string | number>;
height?: string | number | ResponsiveValue<string | number>;
maxWidth?: string | ResponsiveValue<string>;
minWidth?: string | ResponsiveValue<string>;
maxHeight?: string | ResponsiveValue<string>;
@@ -62,6 +76,11 @@ export interface BoxProps<T extends ElementType> {
fullWidth?: boolean;
fullHeight?: boolean;
aspectRatio?: string;
// Aliases
w?: string | number | ResponsiveValue<string | number>;
h?: string | number | ResponsiveValue<string | number>;
// Display
display?: 'block' | 'inline-block' | 'flex' | 'inline-flex' | 'grid' | 'none' | string | ResponsiveValue<'block' | 'inline-block' | 'flex' | 'inline-flex' | 'grid' | 'none' | string>;
center?: boolean;
@@ -80,28 +99,6 @@ export interface BoxProps<T extends ElementType> {
insetY?: string | number;
insetX?: string | number;
zIndex?: number;
// Basic Styling
rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full' | string | boolean;
border?: boolean | string;
borderTop?: boolean | string;
borderBottom?: boolean | string;
borderLeft?: boolean | string;
borderRight?: boolean | string;
borderWidth?: string | number;
borderStyle?: 'solid' | 'dashed' | 'dotted' | 'none' | string;
borderColor?: string;
borderOpacity?: number;
bg?: string;
backgroundColor?: string;
backgroundImage?: string;
backgroundSize?: string;
backgroundPosition?: string;
bgOpacity?: number;
color?: string;
shadow?: string;
opacity?: number;
blur?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | string;
pointerEvents?: 'auto' | 'none' | string;
// Flex/Grid Item props
flex?: number | string;
flexShrink?: number;
@@ -113,20 +110,41 @@ export interface BoxProps<T extends ElementType> {
alignSelf?: 'auto' | 'start' | 'end' | 'center' | 'stretch' | 'baseline';
gap?: number | string | ResponsiveValue<number | string>;
gridCols?: number | ResponsiveValue<number>;
responsiveGridCols?: number | ResponsiveValue<number>;
colSpan?: number | ResponsiveValue<number>;
responsiveColSpan?: number | ResponsiveValue<number>;
order?: number | string | ResponsiveValue<number | string>;
// Transform
transform?: string | boolean;
translate?: string;
translateX?: string;
translateY?: string;
// Animation (Framer Motion support)
initial?: any;
animate?: any;
exit?: any;
// Interaction
onClick?: React.MouseEventHandler<any>;
onMouseEnter?: React.MouseEventHandler<any>;
onMouseLeave?: React.MouseEventHandler<any>;
id?: string;
role?: React.AriaRole;
tabIndex?: number;
// Internal use only
style?: React.CSSProperties;
className?: string;
borderTop?: string | boolean;
borderBottom?: string | boolean;
borderLeft?: string | boolean;
borderRight?: string | boolean;
bg?: string;
rounded?: string | boolean;
borderColor?: string;
border?: string | boolean;
color?: string;
opacity?: number;
transition?: any;
hoverBg?: string;
group?: boolean;
groupHoverOpacity?: number;
groupHoverBorderColor?: string;
groupHoverWidth?: string;
animate?: any;
blur?: string;
pointerEvents?: string;
bgOpacity?: number;
borderWidth?: string | number;
borderStyle?: string;
initial?: any;
variants?: any;
whileHover?: any;
whileTap?: any;
@@ -135,39 +153,14 @@ export interface BoxProps<T extends ElementType> {
whileInView?: any;
viewport?: any;
custom?: any;
// Interaction
group?: boolean;
groupHoverTextColor?: string;
groupHoverScale?: boolean;
groupHoverOpacity?: number;
groupHoverBorderColor?: string;
hoverBorderColor?: string;
hoverBg?: string;
hoverTextColor?: string;
hoverScale?: boolean | number;
clickable?: boolean;
// Events
onMouseEnter?: React.MouseEventHandler<any>;
onMouseLeave?: React.MouseEventHandler<any>;
onClick?: React.MouseEventHandler<any>;
onMouseDown?: React.MouseEventHandler<any>;
onMouseUp?: React.MouseEventHandler<any>;
onMouseMove?: React.MouseEventHandler<any>;
onKeyDown?: React.KeyboardEventHandler<any>;
onBlur?: React.FocusEventHandler<any>;
onSubmit?: React.FormEventHandler<any>;
onScroll?: React.UIEventHandler<any>;
style?: React.CSSProperties;
id?: string;
role?: React.AriaRole;
tabIndex?: number;
// Other
type?: 'button' | 'submit' | 'reset' | string;
disabled?: boolean;
exit?: any;
translateX?: string;
translateY?: string;
translate?: string;
cursor?: string;
fontSize?: string | ResponsiveValue<string>;
weight?: string;
fontWeight?: string | number;
weight?: string | number;
letterSpacing?: string;
lineHeight?: string | number;
font?: string;
@@ -176,19 +169,15 @@ export interface BoxProps<T extends ElementType> {
truncate?: boolean;
src?: string;
alt?: string;
draggable?: boolean;
draggable?: boolean | string;
min?: string | number;
max?: string | number;
step?: string | number;
value?: string | number;
onChange?: React.ChangeEventHandler<any>;
onError?: React.ReactEventHandler<any>;
placeholder?: string;
title?: string;
padding?: Spacing | ResponsiveSpacing;
paddingLeft?: Spacing | ResponsiveSpacing;
paddingRight?: Spacing | ResponsiveSpacing;
paddingTop?: Spacing | ResponsiveSpacing;
paddingBottom?: Spacing | ResponsiveSpacing;
size?: string | number | ResponsiveValue<string | number>;
accept?: string;
autoPlay?: boolean;
@@ -196,16 +185,46 @@ export interface BoxProps<T extends ElementType> {
muted?: boolean;
playsInline?: boolean;
objectFit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
type?: string;
checked?: boolean;
disabled?: boolean;
onSubmit?: React.FormEventHandler<any>;
onBlur?: React.FocusEventHandler<any>;
onKeyDown?: React.KeyboardEventHandler<any>;
onMouseDown?: React.MouseEventHandler<any>;
onMouseUp?: React.MouseEventHandler<any>;
onMouseMove?: React.MouseEventHandler<any>;
onScroll?: React.UIEventHandler<any>;
responsiveColSpan?: number | ResponsiveValue<number>;
responsiveGridCols?: number | ResponsiveValue<number>;
clickable?: boolean;
hoverScale?: boolean | number;
hoverBorderColor?: string;
hoverTextColor?: string;
groupHoverScale?: boolean;
groupHoverTextColor?: string;
shadow?: string;
transform?: boolean | string;
lineClamp?: number;
fill?: string | boolean;
viewBox?: string;
stroke?: string;
strokeWidth?: string | number;
backgroundSize?: string;
backgroundPosition?: string;
backgroundImage?: string;
}
export const Box = forwardRef(<T extends ElementType = 'div'>(
{
as,
children,
className = '',
margin, marginTop, marginBottom, marginLeft, marginRight, marginX, marginY,
padding, paddingTop, paddingBottom, paddingLeft, paddingRight, paddingX, paddingY,
m, mt, mb, ml, mr, mx, my,
p, pt, pb, pl, pr, px, py,
w, h, width, height,
width, height,
w, h,
maxWidth, minWidth, maxHeight, minHeight,
fullWidth, fullHeight,
aspectRatio,
@@ -218,27 +237,6 @@ export const Box = forwardRef(<T extends ElementType = 'div'>(
top, right, bottom, left,
inset, insetY, insetX,
zIndex,
rounded,
border,
borderTop,
borderBottom,
borderLeft,
borderRight,
borderWidth,
borderStyle,
borderColor,
borderOpacity,
bg,
backgroundColor,
backgroundImage,
backgroundSize,
backgroundPosition,
bgOpacity,
color,
shadow,
opacity,
blur,
pointerEvents,
flex,
flexShrink,
flexGrow,
@@ -249,18 +247,39 @@ export const Box = forwardRef(<T extends ElementType = 'div'>(
alignSelf,
gap,
gridCols,
responsiveGridCols,
colSpan,
responsiveColSpan,
order,
transform,
translate,
translateX,
translateY,
initial,
animate,
exit,
onClick,
onMouseEnter,
onMouseLeave,
id,
role,
tabIndex,
style: styleProp,
className,
borderTop,
borderBottom,
borderLeft,
borderRight,
bg,
rounded,
borderColor,
border,
color,
opacity,
transition,
hoverBg,
group,
groupHoverOpacity,
groupHoverBorderColor,
groupHoverWidth,
animate,
blur,
pointerEvents,
bgOpacity,
borderWidth,
borderStyle,
initial,
variants,
whileHover,
whileTap,
@@ -269,36 +288,14 @@ export const Box = forwardRef(<T extends ElementType = 'div'>(
whileInView,
viewport,
custom,
group,
groupHoverTextColor,
groupHoverScale,
groupHoverOpacity,
groupHoverBorderColor,
hoverBorderColor,
hoverBg,
hoverTextColor,
hoverScale,
clickable,
onMouseEnter,
onMouseLeave,
onClick,
onMouseDown,
onMouseUp,
onMouseMove,
onKeyDown,
onBlur,
onSubmit,
onScroll,
style: styleProp,
id,
role,
tabIndex,
type,
disabled,
exit,
translateX,
translateY,
translate,
cursor,
fontSize,
weight,
fontWeight,
weight,
letterSpacing,
lineHeight,
font,
@@ -313,13 +310,9 @@ export const Box = forwardRef(<T extends ElementType = 'div'>(
step,
value,
onChange,
onError,
placeholder,
title,
padding,
paddingLeft,
paddingRight,
paddingTop,
paddingBottom,
size,
accept,
autoPlay,
@@ -327,8 +320,36 @@ export const Box = forwardRef(<T extends ElementType = 'div'>(
muted,
playsInline,
objectFit,
type,
checked,
disabled,
onSubmit,
onBlur,
onKeyDown,
onMouseDown,
onMouseUp,
onMouseMove,
onScroll,
responsiveColSpan,
responsiveGridCols,
clickable,
hoverScale,
hoverBorderColor,
hoverTextColor,
groupHoverScale,
groupHoverTextColor,
shadow,
transform,
lineClamp,
fill,
viewBox,
stroke,
strokeWidth,
backgroundSize,
backgroundPosition,
backgroundImage,
...props
}: BoxProps<T> & ComponentPropsWithoutRef<T>,
}: BoxProps<T>,
ref: ForwardedRef<HTMLElement>
) => {
const Tag = (as as ElementType) || 'div';
@@ -371,22 +392,22 @@ export const Box = forwardRef(<T extends ElementType = 'div'>(
};
const classes = [
getSpacingClass('m', m),
getSpacingClass('mt', mt),
getSpacingClass('mb', mb),
getSpacingClass('ml', ml),
getSpacingClass('mr', mr),
getSpacingClass('mx', mx),
getSpacingClass('my', my),
getSpacingClass('p', p || padding),
getSpacingClass('pt', pt || paddingTop),
getSpacingClass('pb', pb || paddingBottom),
getSpacingClass('pl', pl || paddingLeft),
getSpacingClass('pr', pr || paddingRight),
getSpacingClass('px', px),
getSpacingClass('py', py),
fullWidth ? 'w-full' : getResponsiveClasses('w', w),
fullHeight ? 'h-full' : getResponsiveClasses('h', h),
getSpacingClass('m', margin || m),
getSpacingClass('mt', marginTop || mt),
getSpacingClass('mb', marginBottom || mb),
getSpacingClass('ml', marginLeft || ml),
getSpacingClass('mr', marginRight || mr),
getSpacingClass('mx', marginX || mx),
getSpacingClass('my', marginY || my),
getSpacingClass('p', padding || p),
getSpacingClass('pt', paddingTop || pt),
getSpacingClass('pb', paddingBottom || pb),
getSpacingClass('pl', paddingLeft || pl),
getSpacingClass('pr', paddingRight || pr),
getSpacingClass('px', paddingX || px),
getSpacingClass('py', paddingY || py),
fullWidth ? 'w-full' : getResponsiveClasses('w', width || w),
fullHeight ? 'h-full' : getResponsiveClasses('h', height || h),
getResponsiveClasses('max-w', maxWidth),
getResponsiveClasses('min-w', minWidth),
getResponsiveClasses('max-h', maxHeight),
@@ -407,23 +428,6 @@ export const Box = forwardRef(<T extends ElementType = 'div'>(
insetY !== undefined ? `inset-y-${insetY}` : '',
insetX !== undefined ? `inset-x-${insetX}` : '',
zIndex !== undefined ? `z-${zIndex}` : '',
rounded === true ? 'rounded' : (rounded === false ? 'rounded-none' : (typeof rounded === 'string' ? (rounded.includes('-') ? rounded : `rounded-${rounded}`) : '')),
border === true ? 'border' : (typeof border === 'string' ? (border === 'none' ? 'border-none' : border) : ''),
borderTop === true ? 'border-t' : (typeof borderTop === 'string' ? borderTop : ''),
borderBottom === true ? 'border-b' : (typeof borderBottom === 'string' ? borderBottom : ''),
borderLeft === true ? 'border-l' : (typeof borderLeft === 'string' ? borderLeft : ''),
borderRight === true ? 'border-r' : (typeof borderRight === 'string' ? borderRight : ''),
borderStyle ? `border-${borderStyle}` : '',
borderColor ? borderColor : '',
borderOpacity !== undefined ? `border-opacity-${borderOpacity * 100}` : '',
bg ? bg : '',
backgroundColor ? backgroundColor : '',
bgOpacity !== undefined ? `bg-opacity-${bgOpacity * 100}` : '',
color ? color : '',
shadow ? shadow : '',
opacity !== undefined ? `opacity-${opacity * 100}` : '',
blur ? (blur === 'none' ? 'blur-none' : `blur-${blur}`) : '',
pointerEvents ? `pointer-events-${pointerEvents}` : '',
flex !== undefined ? `flex-${flex}` : '',
flexShrink !== undefined ? `flex-shrink-${flexShrink}` : '',
flexGrow !== undefined ? `flex-grow-${flexGrow}` : '',
@@ -436,21 +440,14 @@ export const Box = forwardRef(<T extends ElementType = 'div'>(
getResponsiveClasses('grid-cols', gridCols || responsiveGridCols),
getResponsiveClasses('col-span', colSpan || responsiveColSpan),
getResponsiveClasses('order', order),
getResponsiveClasses('text', fontSize),
group ? 'group' : '',
groupHoverTextColor ? `group-hover:text-${groupHoverTextColor}` : '',
groupHoverScale ? 'group-hover:scale-105 transition-transform' : '',
groupHoverOpacity !== undefined ? `group-hover:opacity-${groupHoverOpacity * 100}` : '',
groupHoverBorderColor ? `group-hover:border-${groupHoverBorderColor}` : '',
hoverBorderColor ? `hover:border-${hoverBorderColor}` : '',
hoverBg ? `hover:bg-${hoverBg}` : '',
hoverTextColor ? `hover:text-${hoverTextColor}` : '',
hoverScale === true ? 'hover:scale-105 transition-transform' : (typeof hoverScale === 'number' ? `hover:scale-${hoverScale} transition-transform` : ''),
clickable ? 'cursor-pointer active:opacity-80 transition-all' : '',
ring ? `ring-${ring}` : '',
animate === 'spin' ? 'animate-spin' : (animate === 'pulse' ? 'animate-pulse' : ''),
blur ? `blur-${blur}` : '',
pointerEvents ? `pointer-events-${pointerEvents}` : '',
hideScrollbar ? 'scrollbar-hide' : '',
truncate ? 'truncate' : '',
transform === true ? 'transform' : (transform === false ? 'transform-none' : ''),
clickable ? 'cursor-pointer' : '',
lineClamp ? `line-clamp-${lineClamp}` : '',
className
].filter(Boolean).join(' ');
@@ -466,23 +463,27 @@ export const Box = forwardRef(<T extends ElementType = 'div'>(
...(typeof right === 'string' || typeof right === 'number' ? { right } : {}),
...(typeof bottom === 'string' || typeof bottom === 'number' ? { bottom } : {}),
...(typeof left === 'string' || typeof left === 'number' ? { left } : {}),
...(borderWidth !== undefined ? { borderWidth } : {}),
...(typeof transform === 'string' ? { transform } : {}),
...(translate ? { translate } : {}),
...(translateX ? { transform: `translateX(${translateX})` } : {}),
...(translateY ? { transform: `translateY(${translateY})` } : {}),
...(cursor ? { cursor } : {}),
...(fontSize && typeof fontSize === 'string' && !fontSize.includes(':') ? { fontSize } : {}),
...(weight ? { fontWeight: weight } : {}),
...(typeof borderTop === 'string' ? { borderTop } : (borderTop === true ? { borderTop: '1px solid var(--ui-color-border-default)' } : {})),
...(typeof borderBottom === 'string' ? { borderBottom } : (borderBottom === true ? { borderBottom: '1px solid var(--ui-color-border-default)' } : {})),
...(typeof borderLeft === 'string' ? { borderLeft } : (borderLeft === true ? { borderLeft: '1px solid var(--ui-color-border-default)' } : {})),
...(typeof borderRight === 'string' ? { borderRight } : (borderRight === true ? { borderRight: '1px solid var(--ui-color-border-default)' } : {})),
...(bg ? { background: bg.startsWith('bg-') ? undefined : bg } : {}),
...(rounded === true ? { borderRadius: 'var(--ui-radius-md)' } : (typeof rounded === 'string' ? { borderRadius: rounded.includes('rem') || rounded.includes('px') ? rounded : `var(--ui-radius-${rounded})` } : {})),
...(borderColor ? { borderColor: borderColor.startsWith('border-') ? undefined : borderColor } : {}),
...(border === true ? { border: '1px solid var(--ui-color-border-default)' } : (typeof border === 'string' ? { border } : {})),
...(color ? { color: color.startsWith('text-') ? undefined : color } : {}),
...(opacity !== undefined ? { opacity } : {}),
...(fontSize ? (typeof fontSize === 'string' ? { fontSize } : {}) : {}),
...(fontWeight ? { fontWeight } : {}),
...(letterSpacing ? { letterSpacing } : {}),
...(lineHeight ? { lineHeight } : {}),
...(font ? { fontFamily: font } : {}),
...(typeof size === 'string' || typeof size === 'number' ? { width: size, height: size } : {}),
...(backgroundImage ? { backgroundImage } : {}),
...(weight ? { fontWeight: weight } : {}),
...(shadow ? { boxShadow: shadow.startsWith('shadow-') ? undefined : shadow } : {}),
...(transform === true ? { transform: 'auto' } : (typeof transform === 'string' ? { transform } : {})),
...(typeof fill === 'string' ? { fill } : (fill === true ? { fill: 'currentColor' } : {})),
...(stroke ? { stroke } : {}),
...(strokeWidth ? { strokeWidth } : {}),
...(backgroundSize ? { backgroundSize } : {}),
...(backgroundPosition ? { backgroundPosition } : {}),
...(objectFit ? { objectFit } : {}),
...(backgroundImage ? { backgroundImage } : {}),
...(styleProp || {})
};
@@ -491,24 +492,24 @@ export const Box = forwardRef(<T extends ElementType = 'div'>(
ref={ref as React.ForwardedRef<HTMLElement>}
className={classes}
onClick={onClick}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onMouseDown={onMouseDown}
onMouseUp={onMouseUp}
onMouseMove={onMouseMove}
onKeyDown={onKeyDown}
onBlur={onBlur}
onSubmit={onSubmit}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onScroll={onScroll}
style={style}
onError={onError}
style={Object.keys(style).length > 0 ? style : undefined}
id={id}
role={role}
tabIndex={tabIndex}
type={type}
disabled={disabled}
src={src}
alt={alt}
draggable={draggable}
draggable={draggable as any}
min={min}
max={max}
step={step}
@@ -520,6 +521,7 @@ export const Box = forwardRef(<T extends ElementType = 'div'>(
loop={loop}
muted={muted}
playsInline={playsInline}
viewBox={viewBox}
{...props}
>
{children}

52
apps/website/ui/primitives/Grid.tsx
View File

@@ -13,57 +13,25 @@ import { Box, BoxProps, ResponsiveValue } from './Box';
* If you need a more specific layout, create a new component in apps/website/components.
*/
export interface GridProps<T extends ElementType = 'div'> extends Omit<BoxProps<T>, 'children'> {
export interface GridProps<T extends ElementType = 'div'> extends BoxProps<T> {
children?: ReactNode;
cols?: 1 | 2 | 3 | 4 | 5 | 6 | 12;
mdCols?: 1 | 2 | 3 | 4 | 5 | 6 | 12;
lgCols?: 1 | 2 | 3 | 4 | 5 | 6 | 12;
gap?: 0 | 1 | 2 | 3 | 4 | 6 | 8 | 12 | 16;
className?: string;
columns?: number | ResponsiveValue<number>;
gap?: number | string | ResponsiveValue<number | string>;
}
export function Grid<T extends ElementType = 'div'>({
children,
cols = 1,
mdCols,
lgCols,
columns = 1,
gap = 4,
className = '',
...props
}: GridProps<T>) {
const colClasses: Record<number, string> = {
1: 'grid-cols-1',
2: 'grid-cols-1 md:grid-cols-2',
3: 'grid-cols-1 md:grid-cols-3',
4: 'grid-cols-2 md:grid-cols-4',
5: 'grid-cols-2 md:grid-cols-3 lg:grid-cols-5',
6: 'grid-cols-2 md:grid-cols-3 lg:grid-cols-6',
12: 'grid-cols-12'
};
const gapClasses: Record<number, string> = {
0: 'gap-0',
1: 'gap-1',
2: 'gap-2',
3: 'gap-3',
4: 'gap-4',
6: 'gap-6',
8: 'gap-8',
12: 'gap-12',
16: 'gap-16'
};
const classes = [
'grid',
colClasses[cols] || 'grid-cols-1',
mdCols ? `md:grid-cols-${mdCols}` : '',
lgCols ? `lg:grid-cols-${lgCols}` : '',
gapClasses[gap] || 'gap-4',
className
].filter(Boolean).join(' ');
return (
<Box className={classes} {...props}>
<Box
display="grid"
gridCols={columns}
gap={gap}
{...props}
>
{children}
</Box>
);

46
apps/website/ui/primitives/GridItem.tsx
View File

@@ -1,35 +1,27 @@
import React, { ElementType } from 'react';
import { Box, BoxProps } from './Box';
import React, { ReactNode, ElementType } from 'react';
import { Box, BoxProps, ResponsiveValue } from './Box';
/**
* WARNING: DO NOT VIOLATE THE PURPOSE OF THIS PRIMITIVE.
*
* GridItem is for items inside a Grid container.
*
* - DO NOT add positioning props (absolute, top, zIndex).
* - DO NOT add background/border props.
*
* If you need a more specific layout, create a new component in apps/website/components.
*/
export interface GridItemProps<T extends ElementType = 'div'> extends Omit<BoxProps<T>, 'children'> {
children?: React.ReactNode;
colSpan?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
mdSpan?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
lgSpan?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
className?: string;
export interface GridItemProps<T extends ElementType = 'div'> extends BoxProps<T> {
children?: ReactNode;
colSpan?: number | ResponsiveValue<number>;
rowSpan?: number | ResponsiveValue<number>;
lgSpan?: number; // Alias for colSpan.lg
}
export function GridItem<T extends ElementType = 'div'>({ children, colSpan, mdSpan, lgSpan, className = '', ...props }: GridItemProps<T>) {
const spanClasses = [
colSpan ? `col-span-${colSpan}` : '',
mdSpan ? `md:col-span-${mdSpan}` : '',
lgSpan ? `lg:col-span-${lgSpan}` : '',
className
].filter(Boolean).join(' ');
export function GridItem<T extends ElementType = 'div'>({
children,
colSpan,
rowSpan,
lgSpan,
...props
}: GridItemProps<T>) {
const actualColSpan = lgSpan ? { base: colSpan as any, lg: lgSpan } : colSpan;
return (
<Box className={spanClasses} {...props}>
<Box
colSpan={actualColSpan as any}
{...props}
>
{children}
</Box>
);

102
apps/website/ui/primitives/Stack.tsx
View File

@@ -13,20 +13,10 @@ import { Box, BoxProps, ResponsiveValue } from './Box';
* If you need a more specific layout, create a new component in apps/website/components.
*/
interface ResponsiveGap {
base?: number;
sm?: number;
md?: number;
lg?: number;
xl?: number;
}
export interface StackProps<T extends ElementType> extends Omit<BoxProps<T>, 'children'> {
export interface StackProps<T extends ElementType> extends BoxProps<T> {
as?: T;
children?: ReactNode;
className?: string;
direction?: 'row' | 'col' | { base?: 'row' | 'col'; md?: 'row' | 'col'; lg?: 'row' | 'col' };
gap?: number | string | ResponsiveGap;
direction?: 'row' | 'col' | ResponsiveValue<'row' | 'col'>;
align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline' | ResponsiveValue<'start' | 'center' | 'end' | 'stretch' | 'baseline'>;
justify?: 'start' | 'center' | 'end' | 'between' | 'around' | ResponsiveValue<'start' | 'center' | 'end' | 'between' | 'around'>;
wrap?: boolean;
@@ -35,7 +25,6 @@ export interface StackProps<T extends ElementType> extends Omit<BoxProps<T>, 'ch
export const Stack = forwardRef(<T extends ElementType = 'div'>(
{
children,
className = '',
direction = 'col',
gap = 4,
align,
@@ -46,91 +35,16 @@ export const Stack = forwardRef(<T extends ElementType = 'div'>(
}: StackProps<T>,
ref: ForwardedRef<HTMLElement>
) => {
const gapClasses: Record<number, string> = {
0: 'gap-0',
1: 'gap-1',
2: 'gap-2',
3: 'gap-3',
4: 'gap-4',
5: 'gap-5',
6: 'gap-6',
8: 'gap-8',
10: 'gap-10',
12: 'gap-12',
16: 'gap-16'
};
const getGapClasses = (value: number | string | ResponsiveGap | undefined) => {
if (value === undefined) return '';
if (typeof value === 'object') {
const classes = [];
if (value.base !== undefined) classes.push(typeof value.base === 'number' ? gapClasses[value.base] : `gap-${value.base}`);
if (value.sm !== undefined) classes.push(typeof value.sm === 'number' ? `sm:${gapClasses[value.sm]}` : `sm:gap-${value.sm}`);
if (value.md !== undefined) classes.push(typeof value.md === 'number' ? `md:${gapClasses[value.md]}` : `md:gap-${value.md}`);
if (value.lg !== undefined) classes.push(typeof value.lg === 'number' ? `lg:${gapClasses[value.lg]}` : `lg:gap-${value.lg}`);
if (value.xl !== undefined) classes.push(typeof value.xl === 'number' ? `xl:${gapClasses[value.xl]}` : `xl:gap-${value.xl}`);
return classes.join(' ');
}
if (typeof value === 'number') return gapClasses[value];
return `gap-${value}`;
};
const classes = [
'flex',
typeof direction === 'string'
? (direction === 'col' ? 'flex-col' : 'flex-row')
: [
direction.base === 'col' ? 'flex-col' : (direction.base === 'row' ? 'flex-row' : ''),
direction.md === 'col' ? 'md:flex-col' : (direction.md === 'row' ? 'md:flex-row' : ''),
direction.lg === 'col' ? 'lg:flex-col' : (direction.lg === 'row' ? 'lg:flex-row' : ''),
].filter(Boolean).join(' '),
getGapClasses(gap) || 'gap-4',
wrap ? 'flex-wrap' : '',
className
].filter(Boolean).join(' ');
const getAlignItemsClass = (value: StackProps<ElementType>['align']) => {
if (!value) return '';
const map: Record<string, string> = { start: 'items-start', center: 'items-center', end: 'items-end', stretch: 'items-stretch', baseline: 'items-baseline' };
if (typeof value === 'object') {
const classes = [];
if (value.base) classes.push(map[value.base]);
if (value.sm) classes.push(`sm:${map[value.sm]}`);
if (value.md) classes.push(`md:${map[value.md]}`);
if (value.lg) classes.push(`lg:${map[value.lg]}`);
if (value.xl) classes.push(`xl:${map[value.xl]}`);
if (value['2xl']) classes.push(`2xl:${map[value['2xl']]}`);
return classes.join(' ');
}
return map[value];
};
const getJustifyContentClass = (value: StackProps<ElementType>['justify']) => {
if (!value) return '';
const map: Record<string, string> = { start: 'justify-start', center: 'justify-center', end: 'justify-end', between: 'justify-between', around: 'justify-around' };
if (typeof value === 'object') {
const classes = [];
if (value.base) classes.push(map[value.base]);
if (value.sm) classes.push(`sm:${map[value.sm]}`);
if (value.md) classes.push(`md:${map[value.md]}`);
if (value.lg) classes.push(`lg:${map[value.lg]}`);
if (value.xl) classes.push(`xl:${map[value.xl]}`);
if (value['2xl']) classes.push(`2xl:${map[value['2xl']]}`);
return classes.join(' ');
}
return map[value];
};
const layoutClasses = [
getAlignItemsClass(align),
getJustifyContentClass(justify)
].filter(Boolean).join(' ');
return (
<Box
as={as}
ref={ref}
className={`${classes} ${layoutClasses}`}
display="flex"
flexDirection={direction}
gap={gap}
alignItems={align}
justifyContent={justify}
flexWrap={wrap ? 'wrap' : 'nowrap'}
{...props}
>
{children}

105
apps/website/ui/primitives/Surface.tsx
View File

@@ -1,5 +1,6 @@
import React, { ReactNode, ElementType, ComponentPropsWithoutRef, forwardRef, ForwardedRef } from 'react';
import React, { ReactNode, ElementType, forwardRef, ForwardedRef } from 'react';
import { Box, BoxProps } from './Box';
import { ThemeRadii, ThemeShadows } from '../theme/Theme';
/**
* WARNING: DO NOT VIOLATE THE PURPOSE OF THIS PRIMITIVE.
@@ -12,15 +13,12 @@ import { Box, BoxProps } from './Box';
* If you need a more specific layout, create a new component in apps/website/components.
*/
export interface SurfaceProps<T extends ElementType = 'div'> extends Omit<BoxProps<T>, 'children' | 'padding'> {
export interface SurfaceProps<T extends ElementType = 'div'> extends BoxProps<T> {
as?: T;
children?: ReactNode;
variant?: 'default' | 'muted' | 'dark' | 'glass' | 'gradient-blue' | 'gradient-gold' | 'gradient-purple' | 'gradient-green' | 'discord' | 'discord-inner';
rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full' | string | boolean;
border?: boolean | string;
padding?: number;
className?: string;
shadow?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'discord' | string;
variant?: 'default' | 'dark' | 'muted' | 'glass' | 'discord' | 'gradient-blue' | 'gradient-gold' | 'gradient-purple' | 'gradient-green' | 'discord-inner' | 'outline';
rounded?: keyof ThemeRadii | 'none';
shadow?: keyof ThemeShadows | 'none';
}
export const Surface = forwardRef(<T extends ElementType = 'div'>(
@@ -29,69 +27,52 @@ export const Surface = forwardRef(<T extends ElementType = 'div'>(
children,
variant = 'default',
rounded = 'none',
border = false,
padding = 0,
className = '',
shadow = 'none',
...props
}: SurfaceProps<T> & ComponentPropsWithoutRef<T>,
}: SurfaceProps<T>,
ref: ForwardedRef<HTMLElement>
) => {
const variantClasses: Record<string, string> = {
default: 'bg-panel-gray',
muted: 'bg-panel-gray/40',
dark: 'bg-graphite-black',
glass: 'bg-graphite-black/60 backdrop-blur-md',
'gradient-blue': 'bg-gradient-to-br from-primary-accent/10 via-panel-gray/80 to-graphite-black',
'gradient-gold': 'bg-gradient-to-br from-warning-amber/10 via-panel-gray/80 to-graphite-black',
'gradient-purple': 'bg-gradient-to-br from-purple-600/10 via-panel-gray/80 to-graphite-black',
'gradient-green': 'bg-gradient-to-br from-success-green/10 via-panel-gray/80 to-graphite-black',
'discord': 'bg-gradient-to-b from-graphite-black to-panel-gray',
'discord-inner': 'bg-gradient-to-br from-panel-gray via-graphite-black to-panel-gray'
const variantStyles: Record<string, React.CSSProperties> = {
default: { backgroundColor: 'var(--ui-color-bg-surface)' },
dark: { backgroundColor: 'var(--ui-color-bg-base)' },
muted: { backgroundColor: 'var(--ui-color-bg-surface-muted)' },
glass: {
backgroundColor: 'rgba(20, 22, 25, 0.6)',
backdropFilter: 'blur(12px)',
WebkitBackdropFilter: 'blur(12px)'
},
discord: {
background: 'linear-gradient(to bottom, var(--ui-color-bg-base), var(--ui-color-bg-surface))'
},
'discord-inner': {
background: 'linear-gradient(to br, var(--ui-color-bg-surface), var(--ui-color-bg-base), var(--ui-color-bg-surface))'
},
'gradient-blue': {
background: 'linear-gradient(to br, rgba(25, 140, 255, 0.1), var(--ui-color-bg-surface), var(--ui-color-bg-base))'
},
'gradient-gold': {
background: 'linear-gradient(to br, rgba(255, 190, 77, 0.1), var(--ui-color-bg-surface), var(--ui-color-bg-base))'
},
'gradient-purple': {
background: 'linear-gradient(to br, rgba(147, 51, 234, 0.1), var(--ui-color-bg-surface), var(--ui-color-bg-base))'
},
'gradient-green': {
background: 'linear-gradient(to br, rgba(111, 227, 122, 0.1), var(--ui-color-bg-surface), var(--ui-color-bg-base))'
},
outline: {
backgroundColor: 'transparent',
border: '1px solid var(--ui-color-border-default)'
}
};
const shadowClasses: Record<string, string> = {
none: '',
sm: 'shadow-sm',
md: 'shadow-md',
lg: 'shadow-lg',
xl: 'shadow-xl',
discord: 'shadow-[0_0_80px_rgba(88,101,242,0.15)]'
const style: React.CSSProperties = {
...variantStyles[variant],
borderRadius: rounded !== 'none' ? `var(--ui-radius-${String(rounded)})` : undefined,
boxShadow: shadow !== 'none' ? `var(--ui-shadow-${String(shadow)})` : undefined,
};
const roundedClasses: Record<string, string> = {
none: 'rounded-none',
sm: 'rounded-sm',
md: 'rounded-md',
lg: 'rounded-lg',
xl: 'rounded-xl',
'2xl': 'rounded-2xl',
full: 'rounded-full'
};
const paddingClasses: Record<number, string> = {
0: 'p-0',
1: 'p-1',
2: 'p-2',
3: 'p-3',
4: 'p-4',
6: 'p-6',
8: 'p-8',
10: 'p-10',
12: 'p-12'
};
const classes = [
variantClasses[variant],
typeof rounded === 'string' && roundedClasses[rounded] ? roundedClasses[rounded] : '',
border ? 'border border-border-gray' : '',
paddingClasses[padding] || 'p-0',
shadowClasses[shadow],
className
].filter(Boolean).join(' ');
return (
<Box as={as} ref={ref} className={classes} {...props}>
<Box as={as} ref={ref} {...(props as any)} style={style}>
{children}
</Box>
);