@a-type/ui 1.5.0 → 1.5.2

package/src/components/box/Box.tsx

@@ -12,21 +12,40 @@ export type BoxJustification =
 	| 'around'
 	| 'end';
 export type BoxSpacingSize = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type BoxResponsive<T> =
+	| T
+	| {
+			default?: T;
+			sm?: T;
+			md?: T;
+			lg?: T;
+	  };
+
+function isResponsive<T>(
+	value: BoxResponsive<T>,
+): value is { sm?: T; md?: T; lg?: T } {
+	return typeof value === 'object';
+}
+
+function hasDefault<T>(value: BoxResponsive<T>, val: T) {
+	return value === val || (isResponsive(value) && value.default === val);
+}
 
 export interface BoxProps extends Omit<SlotDivProps, 'wrap'> {
 	className?: string;
-	direction?: 'row' | 'col' | 'row-reverse' | 'col-reverse';
-	d?: 'row' | 'col' | 'row-reverse' | 'col-reverse';
+	direction?: BoxResponsive<'row' | 'col' | 'row-reverse' | 'col-reverse'>;
+	d?: BoxResponsive<'row' | 'col' | 'row-reverse' | 'col-reverse'>;
 	items?: BoxAlignment;
 	justify?: BoxJustification;
-	align?: `${BoxAlignment} ${BoxJustification}`;
-	gap?: BoxSpacingSize;
-	wrap?: boolean;
-	p?: BoxSpacingSize;
+	layout?: `${BoxAlignment} ${BoxJustification}`;
+	gap?: BoxSpacingSize | boolean;
+	wrap?: BoxResponsive<boolean>;
+	p?: BoxResponsive<BoxSpacingSize | boolean>;
 	container?: boolean;
 	surface?: boolean | 'primary' | 'secondary';
 	theme?: ThemeName;
 	border?: boolean;
+	full?: boolean | 'width' | 'height';
 	ref?: Ref<HTMLDivElement>;
 }
 
@@ -34,8 +53,8 @@ export function Box({
 	className,
 	items: itemsSolo,
 	justify: justifySolo,
-	align,
-	gap = 'md',
+	layout: align,
+	gap = 'none',
 	wrap,
 	p = 'none',
 	d = 'row',
@@ -45,6 +64,7 @@ export function Box({
 	surface,
 	theme,
 	border,
+	full,
 	ref,
 	...rest
 }: BoxProps) {
@@ -67,16 +87,49 @@ export function Box({
 			{...rest}
 			style={style}
 			className={clsx(
-				'flex',
+				'layer-components:flex layer-components:relative',
 				{
-					'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:flex-row': hasDefault(direction, 'row'),
+					'layer-components:flex-col': hasDefault(direction, 'col'),
+					'layer-components:flex-row-reverse': hasDefault(
+						direction,
+						'row-reverse',
+					),
+					'layer-components:flex-col-reverse': hasDefault(
+						direction,
+						'col-reverse',
+					),
+					'layer-components:sm:flex-row':
+						isResponsive(direction) && direction.sm === 'row',
+					'layer-components:sm:flex-col':
+						isResponsive(direction) && direction.sm === 'col',
+					'layer-components:sm:flex-row-reverse':
+						isResponsive(direction) && direction.sm === 'row-reverse',
+					'layer-components:sm:flex-col-reverse':
+						isResponsive(direction) && direction.sm === 'col-reverse',
+					'layer-components:md:flex-row':
+						isResponsive(direction) && direction.md === 'row',
+					'layer-components:md:flex-col':
+						isResponsive(direction) && direction.md === 'col',
+					'layer-components:md:flex-row-reverse':
+						isResponsive(direction) && direction.md === 'row-reverse',
+					'layer-components:md:flex-col-reverse':
+						isResponsive(direction) && direction.md === 'col-reverse',
+					'layer-components:lg:flex-row':
+						isResponsive(direction) && direction.lg === 'row',
+					'layer-components:lg:flex-col':
+						isResponsive(direction) && direction.lg === 'col',
+					'layer-components:lg:flex-row-reverse':
+						isResponsive(direction) && direction.lg === 'row-reverse',
+					'layer-components:lg:flex-col-reverse':
+						isResponsive(direction) && direction.lg === 'col-reverse',
+					'layer-components:flex-wrap': hasDefault(wrap, true),
+					'layer-components:sm:flex-wrap': isResponsive(wrap) && wrap.sm,
+					'layer-components:md:flex-wrap': isResponsive(wrap) && wrap.md,
+					'layer-components:lg:flex-wrap': isResponsive(wrap) && wrap.lg,
 					'layer-components:gap-xs': gap === 'xs',
 					'layer-components:gap-sm': gap === 'sm',
-					'layer-components:gap-md': gap === 'md',
+					'layer-components:gap-md': gap === 'md' || gap === true,
 					'layer-components:gap-lg': gap === 'lg',
 					'layer-components:gap-xl': gap === 'xl',
 					'layer-components:items-center': items === 'center',
@@ -89,11 +142,26 @@ export function Box({
 					'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:p-xs': hasDefault(p, 'xs'),
+					'layer-components:p-sm': hasDefault(p, 'sm'),
+					'layer-components:p-md': hasDefault(p, 'md') || hasDefault(p, true),
+					'layer-components:p-lg': hasDefault(p, 'lg'),
+					'layer-components:p-xl': hasDefault(p, 'xl'),
+					'layer-components:sm:p-xs': isResponsive(p) && p.sm === 'xs',
+					'layer-components:sm:p-sm': isResponsive(p) && p.sm === 'sm',
+					'layer-components:sm:p-md': isResponsive(p) && p.sm === 'md',
+					'layer-components:sm:p-lg': isResponsive(p) && p.sm === 'lg',
+					'layer-components:sm:p-xl': isResponsive(p) && p.sm === 'xl',
+					'layer-components:md:p-xs': isResponsive(p) && p.md === 'xs',
+					'layer-components:md:p-sm': isResponsive(p) && p.md === 'sm',
+					'layer-components:md:p-md': isResponsive(p) && p.md === 'md',
+					'layer-components:md:p-lg': isResponsive(p) && p.md === 'lg',
+					'layer-components:md:p-xl': isResponsive(p) && p.md === 'xl',
+					'layer-components:lg:p-xs': isResponsive(p) && p.lg === 'xs',
+					'layer-components:lg:p-sm': isResponsive(p) && p.lg === 'sm',
+					'layer-components:lg:p-md': isResponsive(p) && p.lg === 'md',
+					'layer-components:lg:p-lg': isResponsive(p) && p.lg === 'lg',
+					'layer-components:lg:p-xl': isResponsive(p) && p.lg === 'xl',
 					'layer-components:rounded-lg': !!surface,
 					'layer-components:(bg-white border-black)': surface === true,
 					'layer-components:(bg-primary-wash border-primary-dark)':
@@ -101,6 +169,8 @@ export function Box({
 					'layer-components:(bg-secondary-wash border-secondary-dark)':
 						surface === 'secondary',
 					'layer-components:(border border-solid rounded-lg)': border,
+					'layer-components:w-full': full === true || full === 'width',
+					'layer-components:h-full': full === true || full === 'height',
 				},
 				theme && `theme-${theme}`,
 				className,

package/src/components/button/classes.tsx

@@ -45,6 +45,7 @@ const colors = {
 	contrast: `layer-variants:[&.btn-color-contrast]:([--bg:var(--color-black)] [--hover:var(--color-gray-7)] [--focus:var(--color-gray-7)] [--active:var(--color-gray-6)] color-white border-black)`,
 	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)`,
 };
+export const buttonColorClasses = colors;
 
 const sizes = {
 	default: '',

package/src/components/dropdownMenu/DropdownMenu.tsx

@@ -6,7 +6,7 @@ import { withClassName } from '../../hooks/withClassName.js';
 
 const StyledContent = withClassName(
 	DropdownMenuPrimitive.Content,
-	'min-w-220px bg-white z-menu shadow-lg rounded-xl border-default',
+	'min-w-220px bg-white z-menu shadow-lg rounded-lg border-default',
 	'layer-components:transform-origin-[var(--radix-dropdown-menu-transform-origin)]',
 	'layer-components:[&[data-state=open]]:animate-popover-in',
 	'layer-components:[&[data-state=closed]]:animate-popover-out',
@@ -15,7 +15,7 @@ const StyledContent = withClassName(
 	'will-change-transform',
 );
 const itemClassName = classNames(
-	'layer-components:(text-md leading-4 color-black rounded-sm flex items-center pr-4 pl-8 py-3 relative text-left select-none cursor-pointer)',
+	'layer-components:(text-md leading-4 color-black flex items-center pr-4 pl-8 py-2 relative text-left select-none cursor-pointer)',
 	'layer-components:[&[data-disabled]]:(color-gray9 pointer-events-none)',
 	'layer-components:focus-visible:(bg-gray2 color-gray9)',
 	'layer-components:focus:outline-none',

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

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Note } from './Note.js';
+
+const meta = {
+	title: 'Note',
+	component: Note,
+
+	args: {
+		children: 'This is a note',
+	},
+	parameters: {
+		controls: { expanded: true },
+	},
+} satisfies Meta<typeof Note>;
+
+export default meta;
+
+type Story = StoryObj<typeof Note>;
+
+export const Default: Story = {};

package/src/components/note/Note.tsx

@@ -7,13 +7,22 @@ export interface NoteProps extends HTMLAttributes<HTMLDivElement> {
 
 export function Note({ className, children, ...rest }: NoteProps) {
 	return (
-		<div className={classNames('pr-20px', className)} {...rest}>
-			<div className="flex flex-col p-2 border border-solid border-primary-dark bg-primary-wash color-black relative text-sm italic border-r-0">
-				{children}
-				<div className="w-20px h-[calc(100%-18px)] absolute bottom--0.5px right--20px border-0 border-solid border-primary-dark border-r border-b bg-primary-wash">
-					<div
-						className={`absolute top--20px left-0 border0px border-0 border-solid border-transparent border-b-primary-dark border-l-primary-dark after:(content-[""] absolute top--7px left--9px border-8px border-solid border-transparent border-b-primary-wash border-l-primary-wash)`}
-					/>
+		<div className={classNames(className)} {...rest}>
+			<div className="flex flex-row ">
+				<div className="flex-1 p-2 border border-solid border-primary-dark bg-primary-wash color-black relative text-sm italic border-r-0">
+					{children}
+				</div>
+				<div
+					className="flex flex-col items-stretch justify-stretch flex-[0_0_20px]"
+					aria-hidden
+				>
+					<div className="border-0 border-solid border-primary-dark border-b-1px border-l-1px flex-[0_0_20px] w-[20px] h-[20px] relative">
+						<div className="absolute w-1px bg-primary-dark h-26px rotate--45 left-9px top--4px transform-origin-cc" />
+						<div
+							className={`border-solid box-content border-transparent border-r-primary-wash border-13px w-0 h-0 rotate--45 translate--7px transform-origin-br`}
+						/>
+					</div>
+					<div className="bg-primary-wash flex-1 border-0 border-solid border-primary-dark border-r-1px border-b-1px" />
 				</div>
 			</div>
 		</div>

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

@@ -1,10 +1,15 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { TabsRoot, TabsList, TabsContent, TabsTrigger } from './tabs.js';
 import { useState } from 'react';
+import { TabsContent, TabsList, TabsRoot, TabsTrigger } from './tabs.js';
 
 const meta = {
 	title: 'Tabs',
-	argTypes: {},
+	argTypes: {
+		color: {
+			control: 'select',
+			options: ['default', 'primary'],
+		},
+	},
 	parameters: {
 		controls: { expanded: true },
 	},
@@ -12,17 +17,23 @@ const meta = {
 
 export default meta;
 
-type Story = StoryObj;
+type Story = StoryObj<Meta>;
 
 export const Default: Story = {
-	render: () => {
+	render: (args) => {
 		const [value, setValue] = useState('tab1');
 		return (
 			<TabsRoot value={value} onValueChange={setValue}>
 				<TabsList>
-					<TabsTrigger value="tab1">Tab 1</TabsTrigger>
-					<TabsTrigger value="tab2">Tab 2 (long)</TabsTrigger>
-					<TabsTrigger value="tab3">Tab 3</TabsTrigger>
+					<TabsTrigger value="tab1" color={args.color}>
+						Tab 1
+					</TabsTrigger>
+					<TabsTrigger value="tab2" color={args.color}>
+						Tab 2 (long)
+					</TabsTrigger>
+					<TabsTrigger value="tab3" color={args.color}>
+						Tab 3
+					</TabsTrigger>
 				</TabsList>
 				<TabsContent value="tab1">
 					<div>Tab 1 content</div>

package/src/components/tabs/tabs.tsx

@@ -1,4 +1,5 @@
 import * as TabsPrimitive from '@radix-ui/react-tabs';
+import clsx from 'clsx';
 import { withClassName } from '../../hooks/withClassName.js';
 
 export const TabsRoot = withClassName(TabsPrimitive.Root, '');
@@ -8,10 +9,35 @@ export const TabsList = withClassName(
 	'flex flex-row flex-wrap py-2 px-2 items-start gap-2',
 );
 
-export const TabsTrigger = withClassName(
+export const TabsTriggerBase = withClassName(
 	TabsPrimitive.Trigger,
-	'layer-components:(flex flex-row items-center justify-center gap-2 color-black py-1 px-5 bg-wash text-md min-w-100px rounded-lg border border font-semibold text-gray-7 border-gray-7 border-solid transition-colors cursor-pointer select-none font-sans flex-shrink-0)',
-	'hover:bg-primary-light focus-visible:(focus-ring focus-ring-primary-dark outline-off bg-primary-light border-primary-dark) [&[data-state=active]]:(font-semibold bg-primary-light border-primary-light text-black cursor-default hover:bg-primary-light relative z-1)',
+	'layer-components:(flex flex-row items-center 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-8 border-gray-8 transition-colors cursor-pointer select-none font-sans flex-shrink-0 shadow-sm)',
+	'layer-components:hover:bg-[var(--hover)]',
+	'layer-components:focus-visible:(focus-ring focus-ring-[var(--focus)] outline-off)',
+	'[&[data-state=active]]:(font-semibold bg-[var(--focus,var(--hover))] text-black cursor-default hover:bg-[var(--hover)] relative z-1)',
+);
+
+const colorClasses = {
+	default:
+		'layer-variants:([--bg:var(--color-white)] [--hover:var(--color-gray-3)] [--focus:var(--color-gray-4)] [--active:var(--color-gray-4)])',
+	primary:
+		'layer-variants:([--bg:var(--color-primary-light)] [--hover:var(--color-primary)] [--focus:var(--color-primary)] [--active:var(--color-primary)])',
+};
+
+export interface TabsTriggerProps
+	extends Omit<TabsPrimitive.TabsTriggerProps, 'color'> {
+	color?: 'default' | 'primary';
+}
+
+export const TabsTrigger = ({
+	className,
+	color = 'primary',
+	...props
+}: TabsTriggerProps) => (
+	<TabsTriggerBase
+		className={clsx(colorClasses[color], `btn-color-${color}`, className)}
+		{...props}
+	/>
 );
 
 export const TabsContent = withClassName(TabsPrimitive.Content, '');

package/src/hooks/index.ts

@@ -1,10 +1,11 @@
+export * from './useAnimationFrame.js';
+export * from './useLongPress.js';
 export * from './useMergedRef.js';
+export * from './useOnUnmount.js';
 export * from './useSize.js';
 export * from './useStableCallback.js';
+export * from './useTitleBarColor.js';
 export * from './useToggle.js';
 export * from './useVisualViewportOffset.js';
-export * from './useOnUnmount.js';
 export * from './withClassName.js';
-export * from './useAnimationFrame.js';
-export * from './useLongPress.js';
-export * from './useTitleBarColor.js';
+export * from './withProps.js';

package/src/hooks/withProps.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+export const withProps = <T extends {}, Extras extends {}>(
+	Component: React.ComponentType<T & Extras>,
+	extras: Extras,
+) => {
+	return (props: T & Extras) => {
+		return <Component {...props} {...extras} />;
+	};
+};