@a-type/ui 2.4.1 → 2.5.0

package/src/components/editableText/EditableText.stories.tsx

@@ -1,9 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { EditableText } from './EditableText.js';
 import { useState } from 'react';
+import { EditableText } from './EditableText.js';
 
 const meta = {
-	title: 'EditableText',
+	title: 'Components/EditableText',
 	component: EditableText,
 	argTypes: {},
 	args: {

package/src/components/emojiPicker/EmojiPicker.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { EmojiPicker } from './EmojiPicker.js';
 
 const meta = {
-	title: 'EmojiPicker',
+	title: 'Components/EmojiPicker',
 	component: EmojiPicker,
 	argTypes: {},
 	parameters: {

package/src/components/forms/FormikForm.stories.tsx

@@ -1,12 +1,12 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { FormikForm } from './FormikForm.js';
-import { TextField } from './TextField.js';
 import { CheckboxField } from './CheckboxField.js';
-import { SubmitButton } from './SubmitButton.js';
+import { FormikForm } from './FormikForm.js';
 import { NumberStepperField } from './NumberStepperField.js';
+import { SubmitButton } from './SubmitButton.js';
+import { TextField } from './TextField.js';
 
 const meta = {
-	title: 'Form',
+	title: 'Components/Form',
 	component: FormikForm,
 	argTypes: {},
 	parameters: {

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

@@ -5,7 +5,7 @@ import { Icon } from '../icon/index.js';
 import { HorizontalList } from './HorizontalList.js';
 
 const meta = {
-	title: 'HorizontalList',
+	title: 'Components/HorizontalList',
 	component: HorizontalList,
 	argTypes: {},
 	args: {

package/src/components/imageUploader/ImageUploader.stories.tsx

@@ -3,7 +3,7 @@ import { useState } from 'react';
 import { ImageUploader } from './ImageUploader.js';
 
 const meta = {
-	title: 'ImageUploader',
+	title: 'Components/ImageUploader',
 	component: ImageUploader,
 	argTypes: {
 		onChange: { action: 'change' },

package/src/components/input/Input.stories.tsx

@@ -4,7 +4,7 @@ import { Button } from '../button/Button.js';
 import { Input } from './Input.js';
 
 const meta = {
-	title: 'Input',
+	title: 'Components/Input',
 	component: Input,
 	argTypes: {
 		disabled: { control: 'boolean' },

package/src/components/input/Input.tsx

@@ -9,7 +9,7 @@ import {
 import { useRotatingShuffledValue } from '../../hooks/useRotatingShuffledValue.js';
 
 export const inputClassName = classNames(
-	'layer-components:(px-5 py-1.25 text-md font-inherit rounded-lg bg-white select-auto min-w-60px color-black border-solid border-width-thin border-gray-dark shadow-sm-inset)',
+	'layer-components:(px-5 py-1.25 text-md font-inherit rounded-lg bg-white select-auto min-w-60px color-black border-solid border-width-thin border-gray-dark shadow-sm-inset transition-shadow)',
 	'layer-components:focus:(outline-none bg-lighten-3 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/layouts.stories.tsx

@@ -19,7 +19,7 @@ import { PageNowPlaying } from './PageNowPlaying.js';
 import { PageRoot } from './PageRoot.js';
 
 const meta = {
-	title: 'layouts',
+	title: 'Components/Layouts',
 	argTypes: {},
 	parameters: {
 		controls: { expanded: true },

package/src/components/marquee/marquee.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Marquee } from './marquee.js';
 
 const meta = {
-	title: 'Marquee',
+	title: 'Components/Marquee',
 	component: Marquee,
 	argTypes: {},
 	parameters: {

package/src/components/masonry/masonry.stories.tsx

@@ -1,9 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { useState } from 'react';
+import { Box } from '../box/Box.js';
 import { Masonry } from './masonry.js';
 
 const meta = {
-	title: 'Masonry',
+	title: 'Components/Masonry',
 	component: Masonry,
 	argTypes: {},
 	parameters: {
@@ -31,15 +32,17 @@ const content = (spans?: boolean) =>
 		const [span, setSpan] = useState(randomSpan);
 
 		return (
-			<div
+			<Box
 				key={i}
-				className="bg-gray-light rounded-lg"
+				layout="center center"
+				surface="primary"
+				border
 				style={{ height: size }}
 				data-span={spans ? span : undefined}
 				onClick={() => setSpan((v) => (v === 1 ? 2 : 1))}
 			>
-				{size}
-			</div>
+				<div>{size}</div>
+			</Box>
 		);
 	});
 

package/src/components/masonry/masonry.tsx

@@ -53,6 +53,10 @@ abstract class MasonryLayout implements Layout {
 				this.relayout();
 				return true;
 			}
+		} else if (this.config.columns !== this.columns) {
+			this.columns = this.config.columns;
+			this.relayout();
+			return true;
 		}
 		return false;
 	};

package/src/components/note/Note.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Note } from './Note.js';
 
 const meta = {
-	title: 'Note',
+	title: 'Components/Note',
 	component: Note,
 
 	args: {

package/src/components/note/Note.tsx

@@ -17,7 +17,7 @@ export function Note({ className, children, ...rest }: NoteProps) {
 					aria-hidden
 				>
 					<div className="layer-components:(border-0 border-solid border-primary-dark flex-[0_0_20px] w-[20px] h-[20px] relative) layer-variants:(border-b-1px border-l-1px)">
-						<div className="layer-components:(absolute w-1px bg-primary-dark h-26px rotate--45 left-9px top--4px transform-origin-cc)" />
+						<div className="layer-components:(absolute w-0.5px bg-primary-dark h-27px rotate--45 left-9px top--3px transform-origin-cc)" />
 						<div
 							className={`layer-components:(border-solid box-content border-transparent border-r-primary-wash border-13px w-0 h-0 rotate--45 translate--7px transform-origin-br)`}
 						/>

package/src/components/numberStepper/NumberStepper.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { NumberStepper } from './NumberStepper.js';
 
 const meta = {
-	title: 'NumberStepper',
+	title: 'Components/NumberStepper',
 	component: NumberStepper,
 	argTypes: {},
 	parameters: {

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

@@ -7,7 +7,7 @@ import { useParticles } from './ParticleContext.js';
 import { ParticleLayer } from './ParticleLayer.js';
 
 const meta = {
-	title: 'ParticleLayer',
+	title: 'Components/ParticleLayer',
 	component: ParticleLayer,
 	argTypes: {},
 	parameters: {},

package/src/components/peek/Peek.stories.tsx

@@ -4,7 +4,7 @@ import { P } from '../typography/typography.js';
 import { Peek } from './Peek.js';
 
 const meta = {
-	title: 'Peek',
+	title: 'Components/Peek',
 	component: Peek,
 	argTypes: {},
 	parameters: {

package/src/components/peek/Peek.tsx

@@ -36,7 +36,12 @@ export function Peek({ peekHeight = 120, children, className }: PeekProps) {
 		),
 	);
 
-	const [open, toggle] = useToggle(false);
+	const [open, rootToggle] = useToggle(false);
+	const hasInteracted = useRef(false);
+	const toggle = () => {
+		hasInteracted.current = true;
+		rootToggle();
+	};
 
 	useLayoutEffect(() => {
 		if (containerRef.current) {
@@ -52,11 +57,20 @@ export function Peek({ peekHeight = 120, children, className }: PeekProps) {
 	return (
 		<div
 			className={classNames(
-				'relative animate-ease-default animate-forwards overflow-hidden [&[data-state=closed]]:(animate-keyframes-peek-close animate-duration-300 max-h-[var(--peek-height,120px)]) [&[data-state=open]]:(animate-keyframes-peek-open animate-duration-600 animate-forwards)',
+				'relative',
+				'[&[data-state=closed]]:max-h-[var(--peek-height,120px)] overflow-hidden',
+				hasInteracted.current &&
+					'animate-ease-default animate-forwards [&[data-state=closed]]:(animate-keyframes-peek-close animate-duration-300) [&[data-state=open]]:(animate-keyframes-peek-open animate-duration-600 animate-forwards)',
 				className,
 			)}
 			ref={containerRef}
-			data-state={isPeekable ? (open ? 'open' : 'closed') : undefined}
+			data-state={isPeekable ? (open ? 'open' : 'closed') : 'closed'}
+			style={
+				{
+					'--peek-height': `${peekHeight}px`,
+					'--collapsible-height': '0px',
+				} as any
+			}
 		>
 			<div ref={contentRef} id={id}>
 				{children}
@@ -66,6 +80,7 @@ export function Peek({ peekHeight = 120, children, className }: PeekProps) {
 					data-state={open ? 'open' : 'closed'}
 					className={classNames(
 						'h-80px absolute bottom-0 z-1 bg-transparent border-none w-full cursor-pointer border-b border-b-solid border-white',
+						'animate-fade-in',
 						'focus-visible:(outline-none bg-gradient-to-b from-transparent to-primary-wash border-b border-b-solid border-primary',
 						'after:(content-["-_tap_to_expand_-"] p-3 color-gray-dark text-xs flex flex-col justify-end items-center absolute inset-0 top-auto h-80px bg-gradient-to-b from-transparent to-white)',
 						'after:[&[data-state=open]]:content-["-_tap_to_collapse_-"]',

package/src/components/popover/Popover.stories.tsx

@@ -3,7 +3,7 @@ import { Button } from '../button/Button.js';
 import { Popover } from './Popover.js';
 
 const meta = {
-	title: 'Popover',
+	title: 'Components/Popover',
 	component: Popover,
 	argTypes: {},
 	parameters: {

package/src/components/popover/Popover.tsx

@@ -9,7 +9,7 @@ import { BoxContext } from '../box/Box.js';
 
 const StyledContent = withClassName(
 	PopoverPrimitive.Content,
-	'layer-components:(rounded-xl min-w-120px bg-white z-menu shadow-lg op-0 hidden max-w-90vw border border-gray)',
+	'layer-components:(rounded-xl min-w-120px bg-white z-menu shadow-lg op-0 hidden max-w-90vw border border-gray-dark)',
 	'will-change-transform',
 	'layer-components:transform-origin-[var(--radix-popover-transform-origin)]',
 	'layer-components:[&[data-state=open]]:animate-popover-in',
@@ -22,7 +22,7 @@ const StyledContent = withClassName(
 
 const StyledArrow = withClassName(
 	PopoverPrimitive.Arrow,
-	'layer-components:(fill-white stroke-gray w-15px h-8px)',
+	'layer-components:(arrow)',
 );
 
 const StyledClose = withClassName(

package/src/components/progress/Progress.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Progress } from './Progress.js';
 
 const meta = {
-	title: 'Progress',
+	title: 'Components/Progress',
 	component: Progress,
 	argTypes: {},
 	parameters: {

package/src/components/relativeTime/RelativeTime.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { RelativeTime } from './RelativeTime.js';
 
 const meta = {
-	title: 'RelativeTime',
+	title: 'Components/RelativeTime',
 	component: RelativeTime,
 	argTypes: {},
 	args: {

package/src/components/richEditor/richEditor.stories.tsx

@@ -3,7 +3,7 @@ import clsx from 'clsx';
 import { tipTapClassName, tipTapReadonlyClassName } from './index.js';
 
 const meta = {
-	title: 'richEditor',
+	title: 'Components/RichEditor',
 	argTypes: {
 		readonly: { control: 'boolean' },
 	},

package/src/components/scrollArea/ScrollArea.stories.tsx

@@ -3,7 +3,7 @@ import { useState } from 'react';
 import { ScrollArea } from './ScrollArea.js';
 
 const meta = {
-	title: 'ScrollArea',
+	title: 'Components/ScrollArea',
 	component: ScrollArea,
 	argTypes: {},
 	parameters: {

package/src/components/select/Select.stories.tsx

@@ -3,7 +3,7 @@ import { Button } from '../button/index.js';
 import { Select, SelectContent, SelectItem, SelectTrigger } from './Select.js';
 
 const meta = {
-	title: 'Select',
+	title: 'Components/Select',
 	component: Select,
 	argTypes: {},
 	parameters: {

package/src/components/skeletons/TextSkeleton.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Box } from '../index.js';
+import { TextSkeleton } from './skeletons.js';
+
+const meta = {
+	title: 'Components/TextSkeleton',
+	component: TextSkeleton,
+	argTypes: {
+		maxLength: {
+			control: { type: 'number' },
+			description: 'Maximum length of the random skeleton text',
+		},
+	},
+	args: {
+		maxLength: 20,
+	},
+	parameters: {
+		controls: { expanded: true },
+	},
+} satisfies Meta<typeof TextSkeleton>;
+
+export default meta;
+
+type Story = StoryObj<typeof TextSkeleton>;
+
+export const Default: Story = {
+	render(args) {
+		return <TextSkeleton {...args} />;
+	},
+};
+
+export const OnBackground: Story = {
+	render(args) {
+		return (
+			<Box col gap p surface="attention" layout="start center">
+				<TextSkeleton {...args} />
+				<TextSkeleton {...args} />
+				<TextSkeleton {...args} />
+			</Box>
+		);
+	},
+};

package/src/components/skeletons/skeletons.tsx

@@ -15,7 +15,7 @@ export const TextSkeleton = ({
 	return (
 		<span
 			className={classNames(
-				'w-full h-full rounded-md bg-gradient-to-r from-gray-wash via-gray-light to-gray-wash [background-size:400%_400%] max-w-full animate-skeleton animate-duration-1200 animate-ease-in-out animate-iteration-infinite animate-alternate',
+				'inline-block shrink-0 w-full h-full rounded-md bg-gradient-to-r from-transparent via-fg to-transparent [background-size:400%_400%] max-w-full animate-skeleton animate-duration-1200 animate-ease-in-out animate-iteration-infinite animate-alternate opacity-30',
 				className,
 			)}
 			style={{

package/src/components/slider/Slider.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Slider } from './Slider.js';
 
 const meta = {
-	title: 'Slider',
+	title: 'Components/Slider',
 	component: Slider,
 	argTypes: {},
 	parameters: {

package/src/components/tabs/tabs.stories.tsx

@@ -3,7 +3,7 @@ import { useState } from 'react';
 import { TabsContent, TabsList, TabsRoot, TabsTrigger } from './tabs.js';
 
 const meta = {
-	title: 'Tabs',
+	title: 'Components/Tabs',
 	argTypes: {
 		color: {
 			control: 'select',

package/src/components/textArea/TextArea.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { TextArea } from './TextArea.js';
 
 const meta = {
-	title: 'TextArea',
+	title: 'Components/TextArea',
 	component: TextArea,
 	argTypes: {},
 	parameters: {

package/src/components/tooltip/Tooltip.stories.tsx

@@ -3,7 +3,7 @@ import { Box } from '../box/Box.js';
 import { Tooltip } from './Tooltip.js';
 
 const meta = {
-	title: 'Tooltip',
+	title: 'Components/Tooltip',
 	component: Tooltip,
 	argTypes: {},
 	parameters: {

package/src/components/tooltip/Tooltip.tsx

@@ -37,7 +37,7 @@ function Content({
 					{...props}
 				>
 					{children}
-					<TooltipPrimitive.Arrow className="layer-components:fill-[var(--v-bg)]" />
+					<TooltipPrimitive.Arrow className="layer-components:arrow" />
 				</TooltipPrimitive.Content>
 			</BoxContext.Provider>
 		</TooltipPrimitive.Portal>

package/src/hooks/useTitleBarColor.stories.tsx

@@ -4,7 +4,7 @@ import { Box, Button, Dialog, Icon, Provider } from '../components/index.js';
 import { useTitleBarColor } from './useTitleBarColor.js';
 
 const meta = {
-	title: 'useTitleBarColor',
+	title: 'Hooks/useTitleBarColor',
 	argTypes: {},
 	parameters: {
 		controls: { expanded: true },

package/src/shadows.stories.tsx

@@ -0,0 +1,100 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import clsx from 'clsx';
+import { Box } from './components/index.js';
+
+const meta = {
+	title: 'System/Shadows',
+	argTypes: {
+		opacity: {
+			control: { type: 'range', min: 0, max: 1, step: 0.1 },
+			defaultValue: 0.1,
+			description: 'Opacity modifier',
+		},
+	},
+	args: {
+		opacity: 0.1,
+	},
+	parameters: {
+		controls: { expanded: true },
+	},
+} satisfies Meta<{ opacity: number }>;
+
+export default meta;
+
+type Story = StoryObj<Meta>;
+
+const opacityClasses = [
+	'shadow-op-0',
+	'shadow-op-10',
+	'shadow-op-20',
+	'shadow-op-30',
+	'shadow-op-40',
+	'shadow-op-50',
+	'shadow-op-60',
+	'shadow-op-70',
+	'shadow-op-80',
+	'shadow-op-90',
+	'shadow-op-100',
+];
+
+export const Default: Story = {
+	render(args) {
+		return (
+			<div
+				className={clsx(
+					'grid grid-cols-4 gap-xl',
+					opacityClasses[args.opacity * 10],
+				)}
+			>
+				<Box surface border p elevated="sm">
+					Small Shadow
+				</Box>
+				<Box surface border p elevated="md">
+					Medium Shadow
+				</Box>
+				<Box surface border p elevated="lg">
+					Large Shadow
+				</Box>
+				<Box surface border p elevated="xl">
+					Extra Large Shadow
+				</Box>
+				<Box surface border p elevated="-sm">
+					Small Inset Shadow
+				</Box>
+				<Box surface border p elevated="-md">
+					Medium Inset Shadow
+				</Box>
+				<Box surface border p elevated="-lg">
+					Large Inset Shadow
+				</Box>
+				<Box surface border p elevated="-xl">
+					Extra Large Inset Shadow
+				</Box>
+				<Box surface border p elevated="sm-up">
+					Small Shadow Up
+				</Box>
+				<Box surface border p elevated="md-up">
+					Medium Shadow Up
+				</Box>
+				<Box surface border p elevated="lg-up">
+					Large Shadow Up
+				</Box>
+				<Box surface border p elevated="xl-up">
+					Extra Large Shadow Up
+				</Box>
+				<Box surface border p elevated="-sm-up">
+					Small Inset Shadow Up
+				</Box>
+				<Box surface border p elevated="-md-up">
+					Medium Inset Shadow Up
+				</Box>
+				<Box surface border p elevated="-lg-up">
+					Large Inset Shadow Up
+				</Box>
+				<Box surface border p elevated="-xl-up">
+					Extra Large Inset Shadow Up
+				</Box>
+			</div>
+		);
+	},
+};

package/src/themes.stories.tsx

@@ -34,7 +34,6 @@ import {
 	PageRoot,
 	Progress,
 	Provider,
-	ScrollArea,
 	Select,
 	TextSkeleton,
 	ThemeName,
@@ -48,7 +47,7 @@ import { useAnimationFrame } from './hooks.js';
 import { useOverrideTheme } from './hooks/useOverrideTheme.js';
 
 const meta = {
-	title: 'themes',
+	title: 'Theme Demo',
 	argTypes: {},
 	parameters: {
 		controls: { expanded: true },
@@ -94,19 +93,24 @@ function DemoUI({ className }: { className?: string }) {
 							<ToggleGroup.Item value="2">Toggle 2</ToggleGroup.Item>
 						</ToggleGroup>
 					</Box>
-					<Box layout="start center" d="col" gap p className="max-h-200px">
-						<ScrollArea>
-							<H1>Heading 1</H1>
-							<H2>Heading 2</H2>
-							<H3>Heading 3</H3>
-							<H4>Heading 4</H4>
-							<P>
-								Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
-								eiusmod tempor incididunt ut labore et dolore magna aliqua.
-							</P>
-							<TextSkeleton maxLength={30} />
-							<TextSkeleton maxLength={10} />
-						</ScrollArea>
+					<Box
+						layout="start safe-center"
+						d="col"
+						gap
+						p
+						className="max-h-200px"
+						overflow="auto-y"
+					>
+						<H1>Heading 1</H1>
+						<H2>Heading 2</H2>
+						<H3>Heading 3</H3>
+						<H4>Heading 4</H4>
+						<P>
+							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
+							eiusmod tempor incididunt ut labore et dolore magna aliqua.
+						</P>
+						<TextSkeleton maxLength={30} />
+						<TextSkeleton maxLength={10} />
 					</Box>
 					<Box d="col" gap>
 						<Card>
@@ -171,7 +175,6 @@ function DemoUI({ className }: { className?: string }) {
 							</Tooltip>
 						</ContextMenu.Trigger>
 						<ContextMenu.Content>
-							<ContextMenu.Arrow />
 							<ContextMenu.Item>Item 1</ContextMenu.Item>
 							<ContextMenu.Item>Item 2</ContextMenu.Item>
 							<ContextMenu.Item>Item 3</ContextMenu.Item>
@@ -206,26 +209,30 @@ function DemoUI({ className }: { className?: string }) {
 						<div>Primary surface</div>
 						<Button color="ghost">Ghost</Button>
 					</Box>
-					<Box surface="accent" p d="col" className="max-h-200px">
-						<ScrollArea>
-							<H2>Accent surface</H2>
-							<H3>Accent surface</H3>
-							<P>
-								Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
-								eiusmod tempor incididunt ut labore et dolore magna aliqua.
-							</P>
-							<P>
-								Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
-								eiusmod tempor incididunt ut labore et dolore magna aliqua.
-							</P>
-							<P>
-								Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
-								eiusmod tempor incididunt ut labore et dolore magna aliqua.
-							</P>
-							<TextSkeleton maxLength={30} />
-							<TextSkeleton maxLength={10} />
-							Accent surface
-						</ScrollArea>
+					<Box
+						surface="accent"
+						p
+						d="col"
+						className="max-h-200px"
+						overflow="auto-y"
+					>
+						<H2>Accent surface</H2>
+						<H3>Accent surface</H3>
+						<P>
+							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
+							eiusmod tempor incididunt ut labore et dolore magna aliqua.
+						</P>
+						<P>
+							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
+							eiusmod tempor incididunt ut labore et dolore magna aliqua.
+						</P>
+						<P>
+							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
+							eiusmod tempor incididunt ut labore et dolore magna aliqua.
+						</P>
+						<TextSkeleton maxLength={30} />
+						<TextSkeleton maxLength={10} />
+						Accent surface
 					</Box>
 					<Box surface="default" p d="col">
 						Default surface