@a-type/ui 2.1.21 → 2.3.0

package/src/components/box/Box.tsx

@@ -48,6 +48,7 @@ export interface BoxProps extends Omit<SlotDivProps, 'wrap'> {
 	border?: boolean;
 	full?: boolean | 'width' | 'height';
 	overflow?: 'hidden' | 'auto' | 'auto-x' | 'auto-y';
+	grow?: boolean;
 	ref?: Ref<HTMLDivElement>;
 }
 
@@ -69,6 +70,7 @@ export function Box({
 	full,
 	overflow,
 	col,
+	grow,
 	ref,
 	...rest
 }: BoxProps) {
@@ -186,6 +188,8 @@ export function Box({
 						overflow === 'auto-x',
 					'layer-components:(overflow-y-auto overflow-x-hidden)':
 						overflow === 'auto-y',
+					'layer-components:flex-grow': grow,
+					'layer-components:@container': container === true,
 				},
 				theme && `theme-${theme}`,
 				className,

package/src/components/button/classes.tsx

@@ -13,8 +13,7 @@ export function getButtonClassName({
 	align?: ButtonProps['align'];
 }) {
 	return classNames(
-		'layer-components:(px-4 py-2 bg-[var(--bg-neutral,var(--bg))] [--webkit-tap-highlight-color:transparent] [line-height:1] text-size-md font-inherit border border-solid border-transparent rounded-lg cursor-pointer font-bold flex flex-row gap-1 items-center relative overflow-visible select-none all:transition duration-200 whitespace-nowrap ring-color-bg)',
-		'layer-components:()',
+		'layer-components:(px-4 py-2 bg-[var(--bg-neutral,var(--bg))] [--webkit-tap-highlight-color:transparent] [line-height:1] text-size-md font-inherit border-solid border-thin border-color-transparent rounded-lg cursor-pointer font-bold flex flex-row gap-1 items-center relative overflow-visible select-none all:transition duration-200 whitespace-nowrap ring-color-bg)',
 		'layer-components:hover:(bg-[var(--bg)] bg-darken-1 ring-4)',
 		'layer-components:focus:outline-off',
 		'layer-components:focus-visible:(bg-[var(--bg)] outline-off bg-darken-1 ring-6)',
@@ -36,15 +35,15 @@ export function getButtonClassName({
 }
 
 const colors = {
-	primary: `layer-variants:[&.btn-color-primary]:([--bg:var(--color-primary)] shadow-sm color-black border-primary-dark)`,
+	primary: `layer-variants:[&.btn-color-primary]:([--bg:var(--color-primary)] shadow-sm color-black border-color-primary-dark)`,
 	accent: `layer-variants:[&.btn-color-accent]:([--bg-neutral:var(--color-accent-wash)] [--bg:var(--color-accent-light)] shadow-sm color-black border-accent-dark)`,
 	default: `layer-variants:[&.btn-color-default]:([--bg-neutral:var(--color-white)] [--bg:var(--color-gray-light)] shadow-sm color-black border-gray-dark)`,
 	ghost: `layer-variants:[&.btn-color-ghost]:([--bg-neutral:transparent] [--bg:oklch(from_var(--color-gray)_l_c_h/50%)] color-dark-blend)`,
-	destructive: `layer-variants:[&.btn-color-destructive]:([--bg:var(--color-attention)] shadow-sm border-attention-dark color-black ))`,
+	destructive: `layer-variants:[&.btn-color-destructive]:([--bg:var(--color-attention)] shadow-sm border-color-attention-dark color-black ))`,
 	ghostDestructive: `layer-variants:[&.btn-color-ghostDestructive]:([--bg-neutral:transparent] [--bg:var(--color-attention-light)] color-attention-dark hover:(color-black) focus-visible:(color-black))`,
-	ghostAccent: `layer-variants:[&.btn-color-ghostAccent]:([--bg-neutral:transparent] [--bg:var(--color-accent-wash)] color-accent-dark hover:bg-darken-4)`,
-	contrast: `layer-variants:[&.btn-color-contrast]:([--bg:var(--color-black)] color-white border-black hover:bg-lighten-1 focus-visible:bg-lighten-1 active:bg-lighten-1)`,
-	unstyled: `layer-variants:(bg-transparent hover:(bg-transparent) focus:(bg-transparent) active:(bg-transparent) color-inherit border-none shadow-none hover:(shadow-none) focus:(shadow-none) active:(shadow-none) p-0 items-start font-inherit font-normal rounded-none text-size-inherit transition-none)`,
+	ghostAccent: `layer-variants:[&.btn-color-ghostAccent]:([--bg-neutral:transparent] [--bg:var(--color-accent-light)] color-accent-dark hover:color-black focus-visible:color-black)`,
+	contrast: `layer-variants:[&.btn-color-contrast]:([--bg:var(--color-black)] color-white border-color-black hover:bg-lighten-1 focus-visible:bg-lighten-1 active:bg-lighten-1)`,
+	unstyled: `layer-variants:(bg-transparent hover:(bg-transparent) focus:(bg-transparent) active:(bg-transparent) color-inherit border-color-transparent shadow-none hover:(shadow-none) focus:(shadow-none) active:(shadow-none) p-0 items-start font-inherit font-normal rounded-none text-size-inherit transition-none)`,
 };
 export const buttonColorClasses = colors;
 

package/src/components/checkbox/Checkbox.tsx

@@ -45,10 +45,7 @@ export function CheckboxIndicator({
 }: CheckboxPrimitive.CheckboxIndicatorProps) {
 	return (
 		<CheckboxPrimitive.Indicator
-			className={classNames(
-				'absolute center translate-[-50%] color-black',
-				className,
-			)}
+			className={classNames('absolute center color-black', className)}
 			{...props}
 		>
 			{children ?? <CheckIcon width={18} height={18} />}

package/src/components/input/Input.tsx

@@ -4,7 +4,7 @@ import { ChangeEvent, ComponentProps, FocusEvent, useCallback } from 'react';
 import { useRotatingShuffledValue } from '../../hooks/useRotatingShuffledValue.js';
 
 export const inputClassName = classNames(
-	'layer-components:(px-5 py-1.25 text-md font-inherit rounded-xl bg-white select-auto min-w-60px color-black border-solid border border-gray-dark shadow-sm-inset)',
+	'layer-components:(px-5 py-1.25 text-md font-inherit rounded-xl bg-white select-auto min-w-60px color-black border-solid border-width-thin border-gray-dark shadow-sm-inset)',
 	'layer-components:focus:(outline-none bg-lighten-2 ring-4	ring-white)',
 	'layer-components:focus-visible:(outline-none ring-gray)',
 	'layer-components:disabled:(bg-transparent border-gray placeholder-gray-dark shadow-none)',

package/src/components/layouts/PageContent.tsx

@@ -1,22 +1,16 @@
 'use client';
 import classNames from 'clsx';
-import { HTMLAttributes } from 'react';
+import useMergedRef from '../../hooks/useMergedRef.js';
 import { useBoundsCssVars } from '../../hooks/useSize.js';
+import { Box, BoxProps } from '../box/Box.js';
 
 export function PageContent({
 	children,
-	fullHeight,
-	noPadding,
-	innerProps,
 	className,
-	scrollable = true,
+	ref,
+	p,
 	...rest
-}: HTMLAttributes<HTMLDivElement> & {
-	fullHeight?: boolean;
-	noPadding?: boolean;
-	innerProps?: HTMLAttributes<HTMLDivElement>;
-	scrollable?: boolean;
-}) {
+}: BoxProps) {
 	const innerRef = useBoundsCssVars<HTMLDivElement>(200, undefined, {
 		left: '--content-left',
 		top: '--content-top',
@@ -25,29 +19,30 @@ export function PageContent({
 		ready: '--content-ready',
 	});
 
+	const finalRef = useMergedRef(ref, innerRef);
+
 	return (
-		<div
+		<Box
+			col
+			layout="stretch start"
+			full="width"
+			p={
+				p || {
+					default: 'md',
+					sm: 'lg',
+				}
+			}
+			gap="md"
+			container="reset"
 			className={classNames(
-				'layer-components:([grid-area:content] max-w-full min-w-0 w-full flex flex-col items-start relative flex-1 gap-3)',
-				{ 'layer-variants:(overflow-y-auto h-full)': scrollable },
+				'[grid-area:content]',
+				'layer-components:(max-w-full min-w-0 flex-1-0-auto mx-auto)',
 				className,
 			)}
+			ref={finalRef}
 			{...rest}
 		>
-			<div
-				{...innerProps}
-				className={classNames(
-					'layer-components:(w-full min-w-0 flex flex-col mb-120px px-4 py-4 flex-1)',
-					{
-						'layer-variants:(flex-1 mb-auto)': fullHeight,
-						'layer-variants:(p-0 sm:p-4)': noPadding,
-					},
-					innerProps?.className,
-				)}
-				ref={innerRef}
-			>
-				{children}
-			</div>
-		</div>
+			{children}
+		</Box>
 	);
 }

package/src/components/layouts/PageNav.tsx

@@ -24,9 +24,9 @@ export function PageNav({
 		<HideWhileKeyboardOpen
 			{...props}
 			className={classNames(
-				'layer-components:([grid-area:nav] relative z-[var(--z-nav)] pb-[calc(0.25rem+env(safe-area-inset-bottom,0px))])',
+				'layer-components:([grid-area:nav] sticky bottom-0 bg-inherit z-[var(--z-nav)] pb-[calc(0.25rem+env(safe-area-inset-bottom,0px))])',
 				'layer-components:before:(content-[""] absolute inset-x-4 top-0 h-px bg-dark-blend)',
-				'layer-components:md:([grid-area:nav] sticky top-0 h-auto bottom-auto left-auto right-auto) layer-components:md:before:(hidden)',
+				'layer-components:md:([grid-area:nav] sticky top-lg h-auto bottom-auto left-auto right-auto) layer-components:md:before:(hidden)',
 				className,
 			)}
 			ref={ref}

package/src/components/layouts/PageRoot.tsx

@@ -2,8 +2,8 @@ import { withClassName } from '../../hooks.js';
 
 export const PageRoot = withClassName(
 	'div',
-	'layer-components:(flex-grow-1 flex-shrink-1 flex-basis-0 min-h-0 h-full bg-wash)',
-	'layer-components:(grid grid-areas-[content]-[nav] grid-cols-[1fr] grid-rows-[1fr] items-start justify-center)',
-	'md:layer-responsive:(grid-areas-[gutter1_nav_content_gutter2] grid-cols-[1fr_auto_20fr_1fr] min-h-auto bg-wash)',
+	'layer-components:(flex-grow-1 flex-shrink-1 flex-basis-0 min-h-100dvh bg-wash)',
+	'layer-components:(grid grid-areas-[content]-[nav] grid-cols-[1fr] grid-rows-[1fr_auto] items-start justify-center)',
+	'md:layer-responsive:(grid-areas-[gutter1_nav_content_gutter2] grid-cols-[1fr_auto_20fr_1fr] min-h-auto h-auto bg-wash)',
 	'lg:layer-responsive:(grid-cols-[1fr_auto_min(800px,70vw)_1fr])',
 );

package/src/components/layouts/layouts.stories.tsx

@@ -12,6 +12,7 @@ import {
 	NavBarItemText,
 	NavBarRoot,
 } from '../navBar/index.js';
+import { Switch } from '../switch/Switch.js';
 import { PageContent } from './PageContent.js';
 import { PageNav } from './PageNav.js';
 import { PageNowPlaying } from './PageNowPlaying.js';
@@ -31,12 +32,70 @@ export default meta;
 type Story = StoryObj;
 
 export const Default: Story = {
-	render: () => (
-		<PageRoot className="w-full h-full">
-			<PageContent>
-				<div className="text-center">
-					<h1 className="text-3xl font-bold">Hello, World!</h1>
-					<p className="text-lg">This is a simple page layout.</p>
+	render: () => {
+		const [content, setContent] = useState(true);
+		const toggleContent = () => setContent((prev) => !prev);
+		return (
+			<PageRoot className="bg-primary-wash">
+				<PageContent>
+					<div className="text-center">
+						<h1 className="text-3xl font-bold">Hello, World!</h1>
+						<p className="text-lg">This is a simple page layout.</p>
+					</div>
+					<Switch checked={content} onCheckedChange={toggleContent} />
+					{content && (
+						<Card.Grid>
+							{new Array(100).fill(null).map((_, i) => (
+								<Card key={i}>
+									<Card.Main />
+								</Card>
+							))}
+						</Card.Grid>
+					)}
+					<PageNowPlaying>Now playing</PageNowPlaying>
+				</PageContent>
+				<PageNav>
+					<NavBarRoot>
+						<NavBarItem>
+							<NavBarItemIconWrapper>
+								<NavBarItemIcon name="cart" />
+							</NavBarItemIconWrapper>
+							<NavBarItemText>Item 1 long</NavBarItemText>
+						</NavBarItem>
+						<NavBarItem active={true}>
+							<NavBarItemIconWrapper>
+								<NavBarItemIcon asChild>
+									<Icon name="book" />
+								</NavBarItemIcon>
+							</NavBarItemIconWrapper>
+							<NavBarItemText>Item 2</NavBarItemText>
+							<NavBarItemPip />
+						</NavBarItem>
+						<NavBarItem color="neutral" active={true}>
+							<NavBarItemIconWrapper>
+								<NavBarItemIcon asChild>
+									<Icon name="book" />
+								</NavBarItemIcon>
+							</NavBarItemIconWrapper>
+							<NavBarItemText>Neutral</NavBarItemText>
+							<NavBarItemPip />
+						</NavBarItem>
+					</NavBarRoot>
+				</PageNav>
+			</PageRoot>
+		);
+	},
+};
+
+export const ManualWidth: Story = {
+	render: () => {
+		return (
+			<PageRoot className="bg-primary-wash">
+				<PageContent className="max-w-300px">
+					<div className="text-center">
+						<h1 className="text-3xl font-bold">Hello, World!</h1>
+						<p className="text-lg">This is a simple page layout.</p>
+					</div>
 					<Card.Grid>
 						{new Array(100).fill(null).map((_, i) => (
 							<Card key={i}>
@@ -44,39 +103,38 @@ export const Default: Story = {
 							</Card>
 						))}
 					</Card.Grid>
-				</div>
-				<PageNowPlaying>Now playing</PageNowPlaying>
-			</PageContent>
-			<PageNav>
-				<NavBarRoot>
-					<NavBarItem>
-						<NavBarItemIconWrapper>
-							<NavBarItemIcon name="cart" />
-						</NavBarItemIconWrapper>
-						<NavBarItemText>Item 1 long</NavBarItemText>
-					</NavBarItem>
-					<NavBarItem active={true}>
-						<NavBarItemIconWrapper>
-							<NavBarItemIcon asChild>
-								<Icon name="book" />
-							</NavBarItemIcon>
-						</NavBarItemIconWrapper>
-						<NavBarItemText>Item 2</NavBarItemText>
-						<NavBarItemPip />
-					</NavBarItem>
-					<NavBarItem color="neutral" active={true}>
-						<NavBarItemIconWrapper>
-							<NavBarItemIcon asChild>
-								<Icon name="book" />
-							</NavBarItemIcon>
-						</NavBarItemIconWrapper>
-						<NavBarItemText>Neutral</NavBarItemText>
-						<NavBarItemPip />
-					</NavBarItem>
-				</NavBarRoot>
-			</PageNav>
-		</PageRoot>
-	),
+				</PageContent>
+				<PageNav>
+					<NavBarRoot>
+						<NavBarItem>
+							<NavBarItemIconWrapper>
+								<NavBarItemIcon name="cart" />
+							</NavBarItemIconWrapper>
+							<NavBarItemText>Item 1 long</NavBarItemText>
+						</NavBarItem>
+						<NavBarItem active={true}>
+							<NavBarItemIconWrapper>
+								<NavBarItemIcon asChild>
+									<Icon name="book" />
+								</NavBarItemIcon>
+							</NavBarItemIconWrapper>
+							<NavBarItemText>Item 2</NavBarItemText>
+							<NavBarItemPip />
+						</NavBarItem>
+						<NavBarItem color="neutral" active={true}>
+							<NavBarItemIconWrapper>
+								<NavBarItemIcon asChild>
+									<Icon name="book" />
+								</NavBarItemIcon>
+							</NavBarItemIconWrapper>
+							<NavBarItemText>Neutral</NavBarItemText>
+							<NavBarItemPip />
+						</NavBarItem>
+					</NavBarRoot>
+				</PageNav>
+			</PageRoot>
+		);
+	},
 };
 
 export const WithoutNav: Story = {
@@ -86,6 +144,13 @@ export const WithoutNav: Story = {
 				<div className="text-center">
 					<h1 className="text-3xl font-bold">Hello, World!</h1>
 					<p className="text-lg">This is a simple page layout.</p>
+					<Card.Grid>
+						{new Array(100).fill(null).map((_, i) => (
+							<Card key={i}>
+								<Card.Main />
+							</Card>
+						))}
+					</Card.Grid>
 				</div>
 				<PageNowPlaying>Now playing</PageNowPlaying>
 			</PageContent>

package/src/components/navBar/NavBar.tsx

@@ -62,7 +62,7 @@ export const NavBarItemIconWrapper = withClassName(
 
 export const NavBarItemText = withClassName(
 	'span',
-	'layer-components:(overflow-hidden pl-1 inline-block text-xxs whitespace-nowrap text-ellipsis) layer-components:md:(text-md leading-normal)',
+	'layer-components:(overflow-hidden inline-block text-xxs whitespace-nowrap text-ellipsis) layer-components:md:(text-md leading-normal)',
 );
 
 interface NavBarItemIconProps {

package/src/uno/colors.ts

@@ -66,3 +66,47 @@ export function dynamicTheme({
 ${dynamicComputedVars}
 	`;
 }
+
+export const themeColors = {
+	none: 'transparent',
+	black: 'var(--color-black)',
+	white: 'var(--color-white)',
+	wash: 'var(--color-wash)',
+	transparent: 'transparent',
+	attention: {
+		DEFAULT: 'var(--color-attention)',
+		light: 'var(--color-attention-light)',
+		dark: 'var(--color-attention-dark)',
+		wash: 'var(--color-attention-wash)',
+		ink: 'var(--color-attention-ink)',
+	},
+	accent: {
+		DEFAULT: 'var(--color-accent)',
+		light: 'var(--color-accent-light)',
+		dark: 'var(--color-accent-dark)',
+		wash: 'var(--color-accent-wash)',
+		ink: 'var(--color-accent-ink)',
+	},
+	primary: {
+		DEFAULT: 'var(--color-primary)',
+		light: 'var(--color-primary-light)',
+		dark: 'var(--color-primary-dark)',
+		wash: 'var(--color-primary-wash)',
+		ink: 'var(--color-primary-ink)',
+	},
+	gray: {
+		DEFAULT: 'var(--color-gray)',
+		wash: 'var(--color-gray-wash)',
+		light: 'var(--color-gray-light)',
+		ink: 'var(--color-gray-ink)',
+		blend: 'var(--color-gray-blend)',
+		dark: {
+			DEFAULT: 'var(--color-gray-dark)',
+			blend: 'var(--color-gray-dark-blend)',
+		},
+	},
+	'dark-blend': 'var(--color-dark-blend)',
+	'light-blend': 'var(--color-light-blend)',
+	overlay: 'var(--color-overlay)',
+	'dark-mode-contrast': 'var(--color-dark-mode-contrast)',
+} as const;

package/src/uno.preset.ts

@@ -7,6 +7,7 @@ import {
 	dynamicTheme,
 	DynamicThemeColor,
 	dynamicThemeComputedColors,
+	themeColors,
 } from './uno/colors.js';
 
 const baseBgRule = bgColorsRules[0] as unknown as DynamicRule;
@@ -59,48 +60,7 @@ export default function presetAtype({
 		name: 'atype',
 		enforce: 'post',
 		theme: {
-			colors: {
-				none: '',
-				black: 'var(--color-black)',
-				white: 'var(--color-white)',
-				wash: 'var(--color-wash)',
-				attention: {
-					DEFAULT: 'var(--color-attention)',
-					light: 'var(--color-attention-light)',
-					dark: 'var(--color-attention-dark)',
-					wash: 'var(--color-attention-wash)',
-					ink: 'var(--color-attention-ink)',
-				},
-				accent: {
-					DEFAULT: 'var(--color-accent)',
-					light: 'var(--color-accent-light)',
-					dark: 'var(--color-accent-dark)',
-					wash: 'var(--color-accent-wash)',
-					ink: 'var(--color-accent-ink)',
-				},
-				primary: {
-					DEFAULT: 'var(--color-primary)',
-					light: 'var(--color-primary-light)',
-					dark: 'var(--color-primary-dark)',
-					wash: 'var(--color-primary-wash)',
-					ink: 'var(--color-primary-ink)',
-				},
-				gray: {
-					DEFAULT: 'var(--color-gray)',
-					wash: 'var(--color-gray-wash)',
-					light: 'var(--color-gray-light)',
-					ink: 'var(--color-gray-ink)',
-					blend: 'var(--color-gray-blend)',
-					dark: {
-						DEFAULT: 'var(--color-gray-dark)',
-						blend: 'var(--color-gray-dark-blend)',
-					},
-				},
-				'dark-blend': 'var(--color-dark-blend)',
-				'light-blend': 'var(--color-light-blend)',
-				overlay: 'var(--color-overlay)',
-				'dark-mode-contrast': 'var(--color-dark-mode-contrast)',
-			},
+			colors: themeColors,
 			fontFamily: {
 				default: 'var(--font-default, sans-serif)',
 				sans: 'var(--font-sans, sans-serif)',
@@ -134,6 +94,7 @@ export default function presetAtype({
 			},
 			lineWidth: {
 				DEFAULT: `calc(1px * var(--global-border-scale,1))`,
+				thin: `calc(1px * var(--global-border-scale,1))`,
 				none: '0',
 				thick: `calc(2px * var(--global-border-scale,1))`,
 			},
@@ -385,6 +346,14 @@ export default function presetAtype({
 				},
 			},
 		},
+		extendTheme: (theme: any) => {
+			// delete all colors that are not defined in the custom theme
+			const { colors: _, ...rest } = theme;
+			return {
+				colors: themeColors,
+				...rest,
+			};
+		},
 
 		rules: [
 			[
@@ -529,8 +498,7 @@ export default function presetAtype({
 		],
 
 		shortcuts: {
-			border:
-				'border-width-[calc(1px * var(--global-border-scale,1))] border-solid',
+			border: 'border-width-thin border-solid',
 			'border-default': 'border border-solid border-color-black',
 			'border-light':
 				'border border-solid border-color-gray border-color-darken-3',
@@ -540,7 +508,9 @@ export default function presetAtype({
 			col: 'layer-components:flex layer-components:flex-col layer-components:gap-sm layer-components:items-center',
 			'hidden-input':
 				'op-0 absolute z--1 pointer-events-none [&::webkit-file-upload-button]:hidden',
-			center: 'left-50% top-50%',
+			center: 'left-1/2 top-1/2 translate-x--1/2 translate-y--1/2',
+			'center-x': 'left-1/2 translate-x--1/2',
+			'center-y': 'top-1/2 translate-y--1/2',
 			'outline-off': '[outline:none]',
 			'bg-wash': 'bg-[var(--color-wash)]',
 			unset: '[all:unset]',