@a-type/ui 5.0.3 → 5.0.5

package/src/components/tabs/tabs.tsx

@@ -10,28 +10,28 @@ export const TabsRoot = withClassName(TabsPrimitive.Root, '');
 
 const StyledTabsList = withClassName(
 	TabsPrimitive.List,
-	'layer-components:(flex flex-row items-start gap-2 relative)',
-	'layer-components:(border-solid border-thin border-fg rounded-xl)',
+	'layer-components:(relative flex flex-row items-start gap-2)',
+	'layer-components:(border-thin rounded-xl border-solid border-fg)',
 	'layer-components:(shadow-sm bg-white)',
-	'layer-components:(overflow-x-auto overflow-y-clip overflow-unstable w-max-content max-w-full)',
+	'layer-components:(max-w-full w-max-content overflow-y-clip overflow-x-auto overflow-unstable)',
 );
 
 export const TabsTrigger = withClassName(
 	TabsPrimitive.Tab,
-	'layer-components:(flex flex-row items-center justify-center gap-2 py-xs px-lg relative z-1)',
-	'layer-components:(transition-all cursor-pointer select-none)',
-	'layer-components:(text-center text-md font-semibold color-gray-ink font-inherit text-nowrap)',
-	'layer-components:(min-w-100px min-h-touch flex-shrink-0)',
-	'layer-components:(bg-transparent border border-transparent rounded-lg)',
-	'layer-components:hover:[&[data-state=inactive]]:(bg-gray-light bg-darken-1 ring-4 ring-bg)',
-	'layer-components:focus-visible:(bg-darken-1 ring-4 ring-accent outline-off border border-black)',
+	'layer-components:(relative z-1 flex flex-row items-center justify-center gap-2 px-lg py-xs)',
+	'layer-components:(cursor-pointer select-none transition-all)',
+	'layer-components:(text-center text-nowrap text-md font-semibold font-inherit color-gray-ink)',
+	'layer-components:(min-h-touch min-w-100px flex-shrink-0)',
+	'layer-components:(border rounded-lg bg-transparent border-transparent)',
+	'layer-components:hover:[&[data-state=inactive]]:(ring-4 bg-gray-light bg-darken-1 ring-bg)',
+	'layer-components:focus-visible:(outline-off border ring-4 bg-darken-1 border-black ring-accent)',
 	'data-[active]:(cursor-default)',
 );
 
 export const TabsIndicator = withClassName(
 	TabsPrimitive.Indicator,
-	'layer-components:(absolute block [transition-property:transform,width,color] duration-300 ease-out rounded-full b-gray-dark bg-main-light)',
-	'layer-components:(left-0 top-1/2 translate-x-[--active-tab-left] -translate-y-1/2 w-[--active-tab-width] h-full z-0)',
+	'layer-components:([transition-property:transform,width,color] absolute block rounded-lg duration-300 ease-out bg-main-light b-gray-dark)',
+	'layer-components:(left-0 top-1/2 z-0 h-full w-[--active-tab-width] translate-x-[--active-tab-left] -translate-y-1/2)',
 	'layer-components:(b-1 b-gray-dark)',
 );
 
@@ -39,7 +39,7 @@ export interface TabsTriggerProps extends Omit<TabsTabProps, 'color'> {}
 
 export const TabsContent = withClassName(
 	TabsPrimitive.Panel,
-	'layer-components:(focus:outline-none focus-visible:(outline-none ring-inset ring-2 ring-gray))',
+	'layer-components:(focus-visible:outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-gray)',
 );
 
 export const TabsList = ({

package/src/components/toasts/toasts.stories.tsx

@@ -19,6 +19,9 @@ export const Default: Story = {
 	render(args) {
 		return (
 			<Box col gap>
+				<Box full="width" justify="end">
+					<Button>Test</Button>
+				</Box>
 				<Button
 					onClick={() => {
 						toast(

package/src/components/toasts/toasts.tsx

@@ -30,7 +30,7 @@ export const DefaultToastProvider = ({
 export function Toaster() {
 	return (
 		<Toast.Portal>
-			<Toast.Viewport className="overflow-clip">
+			<Toast.Viewport className="pointer-events-none overflow-clip">
 				<ToastList />
 			</Toast.Viewport>
 		</Toast.Portal>
@@ -58,7 +58,7 @@ function ToastList() {
 				'h-[--height]',
 				'flex flex-col items-center gap-xs',
 				// other properties
-				'select-none',
+				'pointer-events-none select-none',
 				// animation and interaction
 				'translate-x-[--toast-swipe-movement-x] translate-y-[calc(var(--toast-swipe-movement-y)+(var(--toast-index)*var(--peek))+(var(--shrink)*var(--height)))] scale-[var(--scale)]',
 				'[transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s]',
@@ -95,10 +95,10 @@ function ToastList() {
 				mode === 'dark' ? 'override-light' : 'override-dark',
 			)}
 		>
-			<Toast.Content className="max-w-sm flex flex-col gap-2px [&[data-behind]:not([data-expanded])]:pointer-events-none">
+			<Toast.Content className="pointer-events-auto max-w-sm flex flex-col gap-2px [&[data-behind]:not([data-expanded])]:pointer-events-none">
 				<div
 					className={clsx(
-						'layer-components:(relative b-1 b-black rounded-md b-solid py-sm pl-md pr-sm shadow-md color-black bg-main-wash)',
+						'layer-components:(relative b-1 rounded-md b-solid py-sm pl-md pr-sm shadow-md color-black bg-main-wash b-black)',
 						'layer-components:(flex flex-row gap-sm)',
 						'[[data-behind]:not([data-expanded])_&]:(max-h-[--height] bg-darken-2)',
 					)}

package/src/components/toggleGroup/toggleGroup.tsx

@@ -7,15 +7,15 @@ import { withClassName } from '../../hooks/withClassName.js';
 
 const ToggleGroupRoot = withClassName(
 	ToggleGroupPrimitive,
-	'layer-components:(inline-flex bg-main-light/20 rounded-lg gap-sm w-fit)',
+	'layer-components:(w-fit inline-flex gap-sm rounded-lg bg-main-light/20)',
 );
 export const ToggleGroupItem = withClassName(
 	TogglePrimitive,
-	'layer-components:(rounded-full text-nowrap transition-all color-black bg-gray/30 py-sm px-md flex items-center border-transparent border-1 border-solid justify-center cursor-pointer)',
-	'layer-components:hover:(bg-lighten-2 border-main-ink/20 ring-bg ring-2)',
-	'layer-components:active:(bg-darken-1 border-main-ink/30 ring-4)',
-	'layer-components:focus-visible:(ring-4 ring-accent outline-off)',
-	'layer-components:data-[pressed]:(bg-main border-default shadow-sm hover:border-default)',
+	'layer-components:(flex cursor-pointer items-center justify-center border-1 rounded-lg border-solid px-md py-sm text-nowrap transition-all color-black bg-gray/30 border-transparent)',
+	'layer-components:hover:(ring-2 bg-lighten-2 border-main-ink/20 ring-bg)',
+	'layer-components:active:(ring-4 bg-darken-1 border-main-ink/30)',
+	'layer-components:focus-visible:(outline-off ring-4 ring-accent)',
+	'layer-components:data-[pressed]:(border-default shadow-sm bg-main hover:border-default)',
 );
 
 export type { ToggleGroupProps };

package/src/uno/theme/sizes.ts

@@ -7,6 +7,7 @@ export const width: Theme['width'] = {
 	'max-content': 'max-content',
 	touch: '30px',
 	'touch-large': '40px',
+	'touch-small': '24px',
 };
 
 export const height: Theme['height'] = {