@a-type/ui 1.2.1 → 1.2.3

package/src/components/box/Box.stories.tsx

@@ -0,0 +1,59 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from '../button/Button.js';
+import { Box } from './Box.js';
+
+const meta = {
+	title: 'Box',
+	component: Box,
+	argTypes: {
+		border: {
+			type: 'boolean',
+			defaultValue: false,
+		},
+		surface: {
+			type: 'boolean',
+			defaultValue: false,
+		},
+	},
+	args: {
+		children: (
+			<>
+				<Button color="primary">Primary</Button>
+				<Button color="accent">Accent</Button>
+				<Button>Default</Button>
+			</>
+		),
+	},
+	parameters: {
+		controls: { expanded: true },
+	},
+} satisfies Meta<typeof Box>;
+
+export default meta;
+
+type Story = StoryObj<typeof Box>;
+
+export const Default: Story = {};
+
+export const NestedContainers: Story = {
+	render(args) {
+		return (
+			<Box {...args} container direction="col">
+				<Box {...args} container>
+					<Box {...args}>
+						<Button>Button</Button>
+						<Button>Button</Button>
+					</Box>
+					<Box {...args}>
+						<Button>Button</Button>
+						<Button>Button</Button>
+					</Box>
+				</Box>
+				<Box {...args}>
+					<Button>Button</Button>
+					<Button>Button</Button>
+				</Box>
+			</Box>
+		);
+	},
+};

package/src/components/box/Box.tsx

@@ -0,0 +1,124 @@
+import clsx from 'clsx';
+import { createContext, forwardRef, useContext, useMemo } from 'react';
+import { ThemeName } from '../colorPicker/ColorPicker.js';
+import { SlotDiv, SlotDivProps } from '../utility/SlotDiv.js';
+
+export type BoxAlignment = 'center' | 'stretch' | 'start' | 'end';
+export type BoxJustification =
+	| 'center'
+	| 'start'
+	| 'stretch'
+	| 'between'
+	| 'around'
+	| 'end';
+export type BoxSpacingSize = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+export interface BoxProps extends Omit<SlotDivProps, 'wrap'> {
+	className?: string;
+	direction?: 'row' | 'col' | 'row-reverse' | 'col-reverse';
+	items?: BoxAlignment;
+	justify?: BoxJustification;
+	align?: `${BoxAlignment} ${BoxJustification}`;
+	gap?: BoxSpacingSize;
+	wrap?: boolean;
+	p?: BoxSpacingSize;
+	container?: boolean;
+	surface?: boolean;
+	theme?: ThemeName;
+	border?: boolean;
+}
+
+export const Box = forwardRef<HTMLDivElement, BoxProps>(function Box(
+	{
+		className,
+		direction,
+		items: itemsSolo,
+		justify: justifySolo,
+		align,
+		gap = 'md',
+		wrap,
+		p = 'sm',
+		container,
+		style: userStyle,
+		surface,
+		theme,
+		border,
+		...rest
+	},
+	ref,
+) {
+	const { spacingScale } = useContext(BoxContext);
+
+	const style = useMemo(
+		() => ({
+			...userStyle,
+			'--spacing-scale': spacingScale,
+		}),
+		[userStyle, spacingScale],
+	);
+
+	const items = itemsSolo ?? align?.split(' ')[0];
+	const justify = justifySolo ?? align?.split(' ')[1];
+
+	const main = (
+		<SlotDiv
+			ref={ref}
+			{...rest}
+			style={style}
+			className={clsx(
+				'flex',
+				{
+					'layer-components:flex-row': direction === 'row',
+					'layer-components:flex-col': direction === 'col',
+					'layer-components:flex-row-reverse': direction === 'row-reverse',
+					'layer-components:flex-col-reverse': direction === 'col-reverse',
+					'layer-components:flex-wrap': wrap,
+					'layer-components:gap-xs': gap === 'xs',
+					'layer-components:gap-sm': gap === 'sm',
+					'layer-components:gap-md': gap === 'md',
+					'layer-components:gap-lg': gap === 'lg',
+					'layer-components:gap-xl': gap === 'xl',
+					'layer-components:items-center': items === 'center',
+					'layer-components:items-stretch': items === 'stretch',
+					'layer-components:items-start': items === 'start',
+					'layer-components:items-end': items === 'end',
+					'layer-components:justify-center': justify === 'center',
+					'layer-components:justify-stretch': justify === 'stretch',
+					'layer-components:justify-start': justify === 'start',
+					'layer-components:justify-end': justify === 'end',
+					'layer-components:justify-between': justify === 'between',
+					'layer-components:justify-around': justify === 'around',
+					'layer-components:p-xs': p === 'xs',
+					'layer-components:p-sm': p === 'sm',
+					'layer-components:p-md': p === 'md',
+					'layer-components:p-lg': p === 'lg',
+					'layer-components:p-xl': p === 'xl',
+					'layer-components:(rounded-lg bg-primary-wash)': surface,
+					'layer-components:(border border-solid border-primary-dark rounded-lg)':
+						border,
+				},
+				theme && `theme-${theme}`,
+				className,
+			)}
+		/>
+	);
+
+	if (container) {
+		return (
+			<BoxContext.Provider
+				value={{ spacingScale: spacingScale * SPACING_SCALE_NESTING_FACTOR }}
+			>
+				{main}
+			</BoxContext.Provider>
+		);
+	}
+
+	return main;
+});
+
+const SPACING_SCALE_NESTING_FACTOR = 0.5;
+const BoxContext = createContext<{
+	spacingScale: number;
+}>({
+	spacingScale: 1,
+});

package/src/components/button/Button.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { Button } from './Button.js';
 import { useState } from 'react';
-import { Icon } from '../icon.js';
+import { Icon } from '../icon/index.js';
+import { Button } from './Button.js';
 
 const meta = {
 	title: 'Button',

package/src/components/button/Button.tsx

@@ -1,9 +1,9 @@
+import { Slot } from '@radix-ui/react-slot';
 import classNames from 'clsx';
-import { forwardRef, ButtonHTMLAttributes, memo } from 'react';
-import { Spinner } from '../spinner.js';
+import { ButtonHTMLAttributes, forwardRef, memo } from 'react';
+import { Icon } from '../icon/index.js';
+import { Spinner } from '../spinner/index.js';
 import { getButtonClassName } from './classes.js';
-import { Slot } from '@radix-ui/react-slot';
-import { Icon } from '../icon.js';
 
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 	color?:

package/src/components/button/ConfirmedButton.tsx

@@ -8,8 +8,8 @@ import {
 	DialogContent,
 	DialogTitle,
 	DialogTrigger,
-} from '../dialog.js';
-import { P } from '../typography.js';
+} from '../dialog/index.js';
+import { P } from '../typography/index.js';
 import { Button, ButtonProps } from './Button.js';
 
 export interface ConfirmedButtonProps extends Omit<ButtonProps, 'onClick'> {

package/src/components/camera/Camera.tsx

@@ -1,3 +1,4 @@
+import { Slot } from '@radix-ui/react-slot';
 import classNames from 'clsx';
 import {
 	MouseEvent,
@@ -9,11 +10,10 @@ import {
 	useRef,
 	useState,
 } from 'react';
-import { Button, ButtonProps } from '../button.js';
-import { Icon } from '../icon.js';
-import { Select, SelectContent, SelectItem, SelectTrigger } from '../select.js';
-import { Slot } from '@radix-ui/react-slot';
 import { withClassName } from '../../hooks.js';
+import { Button, ButtonProps } from '../button/index.js';
+import { Icon } from '../icon/index.js';
+import { Select, SelectContent, SelectItem } from '../select/index.js';
 
 const CameraContext = createContext<{
 	triggerCapture: () => void;
@@ -258,7 +258,7 @@ export const CameraDeviceSelector = (props: CameraDeviceSelectorProps) => {
 			value={selectedDeviceId || 'default'}
 			onValueChange={selectDeviceId}
 		>
-			<SelectTrigger asChild>
+			<Select.Trigger asChild>
 				<Button
 					size="icon"
 					color="ghost"
@@ -266,7 +266,7 @@ export const CameraDeviceSelector = (props: CameraDeviceSelectorProps) => {
 				>
 					<Icon name="refresh" />
 				</Button>
-			</SelectTrigger>
+			</Select.Trigger>
 			<SelectContent>
 				{devices.map((device) => (
 					<SelectItem key={device.deviceId} value={device.deviceId}>

package/src/components/card/Card.stories.tsx

@@ -1,4 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import { Button } from '../button/index.js';
+import { Icon } from '../icon/index.js';
 import {
 	Card,
 	CardActions,
@@ -11,9 +14,6 @@ import {
 	CardRoot,
 	CardTitle,
 } from './Card.js';
-import { Button } from '../button.js';
-import { Icon } from '../icon.js';
-import { useState } from 'react';
 
 const meta = {
 	title: 'Card',

package/src/components/colorPicker/ColorPicker.tsx

@@ -1,5 +1,8 @@
 'use client';
 
+import classNames from 'clsx';
+import { ReactNode } from 'react';
+import { withClassName } from '../../hooks/withClassName.js';
 import {
 	Select,
 	SelectContent,
@@ -7,18 +10,22 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from '../select/Select.js';
-import classNames from 'clsx';
-import { ReactNode } from 'react';
-import { withClassName } from '../../hooks/withClassName.js';
 
-export type ThemeName = 'lemon' | 'tomato' | 'leek' | 'blueberry' | 'eggplant';
+export type ThemeName =
+	| 'lemon'
+	| 'tomato'
+	| 'leek'
+	| 'blueberry'
+	| 'eggplant'
+	| 'salt';
 
 export interface ColorPickerProps {
 	value: ThemeName | null;
 	onChange: (value: ThemeName) => void;
+	showSalt?: boolean;
 }
 
-export function ColorPicker({ value, onChange }: ColorPickerProps) {
+export function ColorPicker({ value, onChange, showSalt }: ColorPickerProps) {
 	const resolvedValue = [
 		'lemon',
 		'tomato',
@@ -55,6 +62,12 @@ export function ColorPicker({ value, onChange }: ColorPickerProps) {
 					<ColorSwatch value="eggplant" />
 					<ItemLabel>Eggplant</ItemLabel>
 				</SelectItem>
+				{showSalt && (
+					<SelectItem value="salt">
+						<ColorSwatch value="salt" />
+						<ItemLabel>Salt</ItemLabel>
+					</SelectItem>
+				)}
 			</SelectContent>
 		</Select>
 	);

package/src/components/datePicker/DatePicker.tsx

@@ -1,13 +1,13 @@
 import {
-	Calendar,
 	CalendarDay as BaseCalendarDay,
+	Calendar,
 	CalendarDays,
 } from 'calendar-blocks';
-import { Button } from '../button.js';
-import { Icon } from '../icon.js';
+import classNames from 'clsx';
 import { useCallback, useState } from 'react';
 import { withClassName } from '../../hooks.js';
-import classNames from 'clsx';
+import { Button } from '../button/index.js';
+import { Icon } from '../icon/index.js';
 
 export interface DatePickerProps {
 	value: Date | null;

package/src/components/dialog/Dialog.stories.tsx

@@ -1,18 +1,18 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { useEffect, useState } from 'react';
+import { Button } from '../button/index.js';
+import { Input } from '../input/index.js';
+import { ParticleLayer } from '../particles/index.js';
+import { Provider } from '../provider/Provider.js';
+import { H1, P } from '../typography/index.js';
 import {
 	Dialog,
-	DialogContent,
-	DialogTrigger,
 	DialogActions,
 	DialogClose,
+	DialogContent,
 	DialogTitle,
+	DialogTrigger,
 } from './Dialog.js';
-import { ParticleLayer } from '../particles.js';
-import { H1, P } from '../typography.js';
-import { Button } from '../button.js';
-import { useEffect, useState } from 'react';
-import { Provider } from '../provider.js';
-import { Input } from '../input.js';
 
 const meta = {
 	title: 'Dialog',

package/src/components/dialog/Dialog.tsx

@@ -1,7 +1,10 @@
 'use client';
 
 import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { CheckIcon, ChevronDownIcon } from '@radix-ui/react-icons';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import { useDrag } from '@use-gesture/react';
+import classNames from 'clsx';
 import {
 	ComponentPropsWithoutRef,
 	createContext,
@@ -11,15 +14,12 @@ import {
 	useRef,
 	useState,
 } from 'react';
-import { withClassName } from '../../hooks/withClassName.js';
 import useMergedRef from '../../hooks/useMergedRef.js';
-import { useParticles } from '../particles.js';
-import classNames from 'clsx';
-import { CheckIcon, ChevronDownIcon } from '@radix-ui/react-icons';
-import { selectTriggerClassName } from '../select.js';
-import { useDrag } from '@use-gesture/react';
-import { Button } from '../button.js';
-import { useConfig } from '../provider.js';
+import { withClassName } from '../../hooks/withClassName.js';
+import { Button } from '../button/index.js';
+import { useParticles } from '../particles/index.js';
+import { useConfig } from '../provider/Provider.js';
+import { selectTriggerClassName } from '../select/index.js';
 
 const StyledOverlay = withClassName(
 	DialogPrimitive.Overlay,

package/src/components/dropdownMenu/DropdownMenu.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { Icon } from '../icon/index.js';
 import { DropdownMenu } from './DropdownMenu.js';
-import { Icon } from '../icon.js';
 
 const meta = {
 	title: 'DropdownMenu',

package/src/components/editableText/EditableText.tsx

@@ -1,3 +1,4 @@
+import clsx from 'clsx';
 import {
 	ChangeEvent,
 	FocusEvent,
@@ -7,9 +8,8 @@ import {
 	useRef,
 	useState,
 } from 'react';
-import { Input, inputClassName } from '../input.js';
-import clsx from 'clsx';
-import { Icon } from '../icon.js';
+import { Icon } from '../icon/index.js';
+import { Input, inputClassName } from '../input/index.js';
 
 export interface EditableTextProps {
 	value: string;

package/src/components/forms/CheckboxField.tsx

@@ -1,7 +1,7 @@
 import { useField } from 'formik';
 import { withClassName } from '../../hooks.js';
-import { Checkbox } from '../checkbox.js';
 import { useIdOrGenerated } from '../../hooks/useIdOrGenerated.js';
+import { Checkbox } from '../checkbox/index.js';
 
 export interface CheckboxFieldProps {
 	name: string;

package/src/components/horizontalList/HorizontalList.stories.tsx

@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { HorizontalList } from './HorizontalList.js';
-import { Button } from '../button.js';
-import { Icon } from '../icon.js';
 import { useState } from 'react';
+import { Button } from '../button/index.js';
+import { Icon } from '../icon/index.js';
+import { HorizontalList } from './HorizontalList.js';
 
 const meta = {
 	title: 'HorizontalList',

package/src/components/horizontalList/HorizontalList.tsx

@@ -1,13 +1,13 @@
 import clsx from 'clsx';
 import { ReactNode, useCallback, useEffect, useRef, useState } from 'react';
+import { Button } from '../button/index.js';
+import { Icon } from '../icon/index.js';
 import {
 	ScrollAreaProps,
 	ScrollAreaRoot,
 	ScrollAreaScrollbar,
 	ScrollAreaViewport,
 } from '../scrollArea/ScrollArea.js';
-import { Button } from '../button.js';
-import { Icon } from '../icon.js';
 
 export interface HorizontalListProps {
 	open?: boolean;

package/src/components/imageUploader/ImageUploader.tsx

@@ -1,13 +1,13 @@
 import classNames from 'clsx';
 import { useCallback, useId, useState } from 'react';
-import { Icon } from '../icon.js';
-import { Button } from '../button.js';
+import { Button } from '../button/index.js';
 import {
 	CameraDeviceSelector,
 	CameraFullscreenButton,
 	CameraRoot,
 	CameraShutterButton,
-} from '../camera.js';
+} from '../camera/index.js';
+import { Icon } from '../icon/index.js';
 
 export interface ImageUploaderProps {
 	value: string | null;

package/src/components/index.ts

@@ -1,5 +1,7 @@
+export { Slot, Slottable, type SlotProps } from '@radix-ui/react-slot';
 export * from './actions/index.js';
 export * from './avatar/index.js';
+export * from './box/Box.js';
 export * from './button/index.js';
 export * from './camera/index.js';
 export * from './card/index.js';
@@ -30,15 +32,14 @@ export * from './numberStepper/index.js';
 export * from './particles/index.js';
 export * from './peek/index.js';
 export * from './popover/index.js';
-export * from './provider/Provider.js';
 export * from './progress/Progress.js';
+export * from './provider/Provider.js';
 export * from './relativeTime/index.js';
 export * from './richEditor/index.js';
 export * from './scrollArea/ScrollArea.js';
 export * from './select/index.js';
 export * from './skeletons/skeletons.js';
 export * from './slider/index.js';
-export { Slot, type SlotProps, Slottable } from '@radix-ui/react-slot';
 export * from './spinner/index.js';
 export * from './switch/index.js';
 export * from './tabs/tabs.js';

package/src/components/input/Input.tsx

@@ -1,10 +1,16 @@
-import classNames from 'clsx';
-import { ComponentProps, FocusEvent, forwardRef, useCallback } from 'react';
 import { Slot } from '@radix-ui/react-slot';
+import classNames from 'clsx';
+import {
+	ChangeEvent,
+	ComponentProps,
+	FocusEvent,
+	forwardRef,
+	useCallback,
+} from 'react';
 import { useRotatingShuffledValue } from '../../hooks/useRotatingShuffledValue.js';
 
 export const inputClassName = classNames(
-	'layer-components:(px-5 py-[5px] text-md font-sans rounded-full bg-white select-auto min-w-60px color-black border-solid border-1 border-gray-7 shadow-sm-inset)',
+	'layer-components:(px-5 py-[5px] text-md font-sans rounded-20px bg-white select-auto min-w-60px color-black border-solid border-1 border-gray-5 shadow-sm-inset)',
 	'layer-components:focus:(outline-none bg-gray-1 ring-4	ring-white)',
 	'layer-components:focus-visible:(outline-none ring-gray-dark-blend)',
 	'layer-components:md:(min-w-120px)',
@@ -18,6 +24,7 @@ export interface InputProps extends ComponentProps<'input'> {
 	/** Shuffle between random placeholders */
 	placeholders?: string[];
 	placeholdersIntervalMs?: number;
+	onValueChange?: (value: string) => void;
 }
 
 export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
@@ -25,6 +32,8 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
 		className,
 		autoSelect,
 		onFocus,
+		onChange,
+		onValueChange,
 		variant: _,
 		asChild,
 		placeholders,
@@ -44,6 +53,14 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
 		[onFocus, autoSelect],
 	);
 
+	const handleChange = useCallback(
+		(ev: ChangeEvent<HTMLInputElement>) => {
+			onValueChange?.(ev.target.value);
+			onChange?.(ev);
+		},
+		[onChange, onValueChange],
+	);
+
 	const randomPlaceholder = useRotatingShuffledValue(
 		placeholders ?? [],
 		placeholdersIntervalMs,
@@ -55,6 +72,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
 		<Component
 			{...props}
 			onFocus={handleFocus}
+			onChange={handleChange}
 			className={classNames(inputClassName, className)}
 			ref={ref}
 			placeholder={placeholder ?? randomPlaceholder}

package/src/components/layouts/PageNowPlaying.tsx

@@ -2,7 +2,7 @@
 
 import classNames from 'clsx';
 import { HTMLAttributes } from 'react';
-import { useConfig } from '../provider.js';
+import { useConfig } from '../provider/Provider.js';
 
 export function PageNowPlaying({
 	className,

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

@@ -1,7 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { PageRoot } from './PageRoot.js';
-import { PageContent } from './PageContent.js';
-import { PageNav } from './PageNav.js';
+import { useEffect, useState } from 'react';
+import { Button } from '../button/index.js';
+import { Icon } from '../icon/index.js';
+import { Input } from '../input/index.js';
 import {
 	NavBarItem,
 	NavBarItemIcon,
@@ -9,12 +10,11 @@ import {
 	NavBarItemPip,
 	NavBarItemText,
 	NavBarRoot,
-} from '../navBar.js';
-import { Icon } from '../icon.js';
+} from '../navBar/index.js';
+import { PageContent } from './PageContent.js';
+import { PageNav } from './PageNav.js';
 import { PageNowPlaying } from './PageNowPlaying.js';
-import { useEffect, useState } from 'react';
-import { Button } from '../button.js';
-import { Input } from '../input.js';
+import { PageRoot } from './PageRoot.js';
 
 const meta = {
 	title: 'layouts',

package/src/components/navBar/NavBar.tsx

@@ -1,8 +1,8 @@
+import { Slot } from '@radix-ui/react-slot';
 import classNames, { clsx } from 'clsx';
-import { withClassName } from '../../hooks.js';
 import { ReactNode, forwardRef } from 'react';
-import { Slot } from '@radix-ui/react-slot';
-import { Icon, IconProps } from '../icon.js';
+import { withClassName } from '../../hooks.js';
+import { Icon, IconProps } from '../icon/index.js';
 
 export const navBarItemClass = classNames(
 	'layer-components:(flex flex-col items-center justify-center whitespace-nowrap py-1 px-3 bg-transparent rounded-md border-none cursor-pointer text-sm transition-colors h-full gap-6px relative text-gray-7 select-none)',

package/src/components/numberStepper/NumberStepper.tsx

@@ -2,7 +2,7 @@ import { fractionToText } from '@a-type/utils';
 import { MinusIcon, PlusIcon } from '@radix-ui/react-icons';
 import classNames from 'clsx';
 import { ReactNode } from 'react';
-import { Button } from '../button.js';
+import { Button } from '../button/index.js';
 
 export interface NumberStepperProps {
 	value: number;

package/src/components/particles/ParticleLayer.stories.tsx

@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { MouseEvent, useRef, useState } from 'react';
-import { Button } from '../button.js';
-import { Checkbox } from '../checkbox.js';
-import { Icon } from '../icon.js';
+import { Button } from '../button/index.js';
+import { Checkbox } from '../checkbox/index.js';
+import { Icon } from '../icon/index.js';
 import { useParticles } from './ParticleContext.js';
 import { ParticleLayer } from './ParticleLayer.js';
 

package/src/components/provider/Provider.tsx

@@ -1,10 +1,10 @@
 import { createContext, ReactNode, useContext } from 'react';
-import { ParticleLayer } from '../particles.js';
-import { IconSpritesheet } from '../icon.js';
 import { Toaster, ToastPosition } from 'react-hot-toast';
-import { TooltipProvider } from '../tooltip.js';
 import { useVisualViewportOffset } from '../../hooks.js';
 import { useVirtualKeyboardBehavior } from '../../hooks/useVirtualKeyboardBehavior.js';
+import { IconSpritesheet } from '../icon/index.js';
+import { ParticleLayer } from '../particles/index.js';
+import { TooltipProvider } from '../tooltip/index.js';
 
 export interface ProviderProps {
 	children?: ReactNode;