@a-type/ui 2.4.1 → 2.6.0

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: {
@@ -23,7 +23,7 @@ export const Default: Story = {
 					{Array.from({ length: 100 }, (_, i) => (
 						<div
 							key={i}
-							className="h-10 w-full bg-primary-wash text-primary flex items-center justify-center"
+							className="h-10 w-full bg-primary-wash color-primary flex items-center justify-center"
 						>
 							Item {i + 1}
 						</div>
@@ -50,7 +50,7 @@ export const StickToBottom: Story = {
 						{Array.from({ length: itemCount }, (_, i) => (
 							<div
 								key={i}
-								className="h-10 w-full bg-primary-wash text-primary flex items-center justify-center"
+								className="h-10 w-full bg-primary-wash color-primary flex items-center justify-center"
 							>
 								Item {i + 1}
 							</div>

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/tabs/tabs.tsx

@@ -11,10 +11,10 @@ export const TabsList = withClassName(
 
 export const TabsTriggerBase = withClassName(
 	TabsPrimitive.Trigger,
-	'layer-components:(flex flex-row items-center cursor-pointer justify-center gap-2 color-black py-1 px-5 bg-wash text-md min-w-100px rounded-lg border-default font-semibold text-gray-dark-blend border-gray-dark transition-all cursor-pointer select-none font-inherit flex-shrink-0 shadow-sm)',
-	'layer-components:hover:(bg-darken-1 ring-4 ring-color-bg)',
-	'layer-components:focus-visible:(bg-darken-1 ring-4 ring-color-bg outline-off)',
-	'[&[data-state=active]]:(bg-[var(--bg)] font-semibold text-black cursor-default hover:bg-darken-1 relative z-1)',
+	'layer-components:(flex flex-row items-center cursor-pointer justify-center gap-2 color-black py-1 px-5 bg-wash text-md min-w-100px rounded-lg border-default font-semibold color-gray-ink border-gray-dark transition-all cursor-pointer select-none font-inherit flex-shrink-0 shadow-sm)',
+	'layer-components:hover:(bg-darken-1 ring-4 ring-bg)',
+	'layer-components:focus-visible:(bg-darken-1 ring-4 ring-bg outline-off)',
+	'[&[data-state=active]]:(bg-[var(--bg)] font-semibold color-black cursor-default hover:bg-darken-1 relative z-1)',
 );
 
 const colorClasses = {

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/textArea/TextArea.tsx

@@ -96,7 +96,7 @@ export const TextArea = function TextArea({
 			ref={finalRef}
 			className={classNames(
 				inputClassName,
-				'layer-components:([font-family:inherit] text-inherit overflow-hidden resize-none)',
+				'layer-components:([font-family:inherit] color-inherit overflow-hidden resize-none)',
 				'layer-variants:(rounded-lg px-4 py-4)',
 				{
 					'layer-components:[resize:vertical]': !autoSize,

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

@@ -26,10 +26,10 @@ function Content({
 						'layer-components:transform-origin-[var(--radix-tooltip-content-transform-origin)]',
 						'layer-components:[&[data-state=delayed-open]]:animate-popover-in',
 						{
-							'layer-variants:(bg-black text-white)': color === 'contrast',
-							'layer-variants:(bg-white text-black)':
+							'layer-variants:(bg-black color-white)': color === 'contrast',
+							'layer-variants:(bg-white color-black)':
 								color === 'white' || color === 'neutral',
-							'layer-variants:(bg-attention-ink text-white)':
+							'layer-variants:(bg-attention-ink color-white)':
 								color === 'attention',
 						},
 						className,
@@ -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

package/src/uno/colors.ts

@@ -73,6 +73,13 @@ export const themeColors = {
 	white: 'var(--color-white)',
 	wash: 'var(--color-wash)',
 	transparent: 'transparent',
+
+	// magic tokens
+	bg: 'var(--v-bg-altered, var(--v-bg, transparent))',
+	fg: 'var(--v-color-altered, var(--v-color, var(--color-black)))',
+	color: 'var(--v-color-altered, var(--v-color, var(--color-black)))',
+	border: 'var(--v-border-altered, var(--v-border, transparent))',
+
 	attention: {
 		DEFAULT: 'var(--color-attention)',
 		light: 'var(--color-attention-light)',

package/src/uno/shadows.ts

@@ -0,0 +1,12 @@
+export function getShadows(hard = false) {
+	return {
+		sm: `var(--un-shadow-inset) 0 calc(0px * var(--v-shadow-y-mult,1)) calc(1px * var(--global-shadow-spread,1)) 0 rgb(from var(--un-shadow-color) r g b / calc((var(--un-shadow-opacity,0.1)*2))),
+			var(--un-shadow-inset) 0 calc(1px * var(--v-shadow-y-mult,1)) calc(2px * var(--global-shadow-spread,1)) 0 rgb(from var(--un-shadow-color) r g b / calc((var(--un-shadow-opacity,0.1)*2)))`,
+		md: `var(--un-shadow-inset) 0 calc(4px * var(--v-shadow-y-mult,1)) calc(8px * var(--global-shadow-spread,1)) -1px rgb(from var(--un-shadow-color) r g b / calc((var(--un-shadow-opacity,0.1)))),
+			var(--un-shadow-inset) 0 calc(2px * var(--v-shadow-y-mult,1)) calc(4px * var(--global-shadow-spread,1)) -1px rgb(from var(--un-shadow-color) r g b / calc((var(--un-shadow-opacity,0.1)*2)))`,
+		lg: `var(--un-shadow-inset) 0 calc(8px * var(--v-shadow-y-mult,1)) calc(16px * var(--global-shadow-spread,1)) 0px rgb(from var(--un-shadow-color) r g b / calc((var(--un-shadow-opacity,0.1)))),
+			var(--un-shadow-inset) 0 calc(5px * var(--v-shadow-y-mult,1)) calc(10px * var(--global-shadow-spread,1)) 0px rgb(from var(--un-shadow-color) r g b / calc((var(--un-shadow-opacity,0.1))))`,
+		xl: `var(--un-shadow-inset) 0 calc(20px * var(--v-shadow-y-mult,1)) calc(40px * (0.1 + var(--global-shadow-spread,1))) -0px rgb(from var(--un-shadow-color) r g b / calc((var(--un-shadow-opacity,0.1)))),
+			var(--un-shadow-inset) 0 calc(15px * var(--v-shadow-y-mult,1)) calc(30px * (0.05 + var(--global-shadow-spread,1))) -6px rgb(from var(--un-shadow-color) r g b / calc(0.5*(var(--un-shadow-opacity,0.1))))`,
+	};
+}