@a-type/ui 4.0.3 → 4.0.6

package/src/components/scrollArea/ScrollArea.tsx

@@ -1,35 +1,37 @@
 import {
 	ScrollArea as BaseScrollArea,
+	ScrollAreaContentProps,
 	ScrollAreaRootProps,
 	ScrollAreaScrollbarProps,
 } from '@base-ui/react/scroll-area';
+import { Ref } from 'react';
 import { withClassName } from '../../hooks.js';
 
 export type * from '@base-ui/react/scroll-area';
 
 export const ScrollAreaRoot = withClassName(
 	BaseScrollArea.Root,
-	'layer-components:(min-w-0 min-h-0 flex flex-col)',
+	'layer-components:(min-w-0 min-h-0 flex flex-col box-border)',
 );
 
 export const ScrollAreaViewport = withClassName(
 	BaseScrollArea.Viewport,
-	'layer-components:(h-full outline-none overscroll-contain min-h-0)',
+	'layer-components:(h-full outline-none min-h-0)',
 	'layer-components:focus-visible:(outline-none ring-2 ring-accent)',
 );
 
 export const ScrollAreaVerticalFades = withClassName(
 	'div',
 	'layer-components:(pointer-events-none absolute inset-0 [--scroll-area-overflow-y-start:inherit] [--scroll-area-overflow-y-end:inherit])',
-	'layer-components:before:(content-empty [--scroll-area-overflow-y-start:inherit] top-0 block left-0 w-full absolute transition-height h-[min(40px,var(--scroll-area-overflow-y-start,,40px))] bg-gradient-to-b bg-gradient-from-bg bg-gradient-via-bg bg-gradient-to-transparent)',
-	'layer-components:after:(content-empty [--scroll-area-overflow-y-end:inherit] bottom-0 block left-0 w-full absolute transition-height h-[min(40px,var(--scroll-area-overflow-y-end,,40px))] bg-gradient-to-t bg-gradient-from-bg bg-gradient-via-bg bg-gradient-to-transparent)',
+	'layer-components:before:(content-empty [--scroll-area-overflow-y-start:inherit] top-0 block left-0 w-full absolute transition-height h-[min(40px,var(--scroll-area-overflow-y-start,40px))] bg-gradient-to-b bg-gradient-from-bg bg-gradient-to-transparent)',
+	'layer-components:after:(content-empty [--scroll-area-overflow-y-end:inherit] bottom-0 block left-0 w-full absolute transition-height h-[min(40px,var(--scroll-area-overflow-y-end,40px))] bg-gradient-to-t bg-gradient-from-bg bg-gradient-to-transparent)',
 );
 
 export const ScrollAreaHorizontalFades = withClassName(
 	'div',
 	'layer-components:(pointer-events-none absolute inset-0 [--scroll-area-overflow-x-start:inherit] [--scroll-area-overflow-x-end:inherit])',
-	'layer-components:before:(content-empty [--scroll-area-overflow-x-start:inherit] left-0 block top-0 h-full absolute transition-width w-[min(40px,var(--scroll-area-overflow-x-start,,40px))] bg-gradient-to-r bg-gradient-from-bg bg-gradient-to-transparent)',
-	'layer-components:after:(content-empty [--scroll-area-overflow-x-end:inherit] right-0 block top-0 h-full absolute transition-width w-[min(40px,var(--scroll-area-overflow-x-end,,40px))] bg-gradient-to-l bg-gradient-from-bg bg-gradient-to-transparent)',
+	'layer-components:before:(content-empty [--scroll-area-overflow-x-start:inherit] left-0 block top-0 h-full absolute transition-width w-[min(40px,var(--scroll-area-overflow-x-start,40px))] bg-gradient-to-r bg-gradient-from-bg bg-gradient-to-transparent)',
+	'layer-components:after:(content-empty [--scroll-area-overflow-x-end:inherit] right-0 block top-0 h-full absolute transition-width w-[min(40px,var(--scroll-area-overflow-x-end,40px))] bg-gradient-to-l bg-gradient-from-bg bg-gradient-to-transparent)',
 );
 
 export const ScrollAreaViewportFades = () => (
@@ -39,9 +41,20 @@ export const ScrollAreaViewportFades = () => (
 	</>
 );
 
+const BaseScrollContentWithoutMinWidth = (
+	props: ScrollAreaContentProps & { ref?: Ref<HTMLDivElement> },
+) => (
+	<BaseScrollArea.Content
+		{...props}
+		style={{ ...props.style, minWidth: undefined }}
+	/>
+);
+BaseScrollContentWithoutMinWidth.displayName = 'ScrollAreaContent';
+
 export const ScrollAreaContent = withClassName(
-	BaseScrollArea.Content,
+	BaseScrollContentWithoutMinWidth,
 	'layer-components:(flex flex-col)',
+	'layer-components:[[data-scroll-direction=horizontal]>&,[data-scroll-direction=both]>&]:min-w-min-content',
 );
 
 export const ScrollAreaThumb = withClassName(
@@ -80,17 +93,31 @@ export const ScrollAreaCorner = withClassName(
 
 const ScrollAreaDefault = ({
 	disableFades,
+	direction,
 	...props
 }: ScrollAreaRootProps & {
 	disableFades?: boolean;
+	direction?: 'vertical' | 'horizontal' | 'both';
 }) => (
 	<ScrollAreaRoot {...props}>
-		<ScrollAreaViewport>
+		<ScrollAreaViewport
+			style={{
+				overflow:
+					direction === 'vertical'
+						? 'clip scroll'
+						: direction === 'horizontal'
+						? 'scroll clip'
+						: 'scroll scroll',
+			}}
+			data-scroll-direction={direction}
+		>
 			{props.children}
 			{!disableFades && <ScrollAreaViewportFades />}
 		</ScrollAreaViewport>
-		<ScrollAreaScrollbar />
-		<ScrollAreaScrollbar orientation="horizontal" />
+		{direction !== 'horizontal' && <ScrollAreaScrollbar />}
+		{direction !== 'vertical' && (
+			<ScrollAreaScrollbar orientation="horizontal" />
+		)}
 		<ScrollAreaCorner />
 	</ScrollAreaRoot>
 );

package/src/components/switch/Switch.tsx

@@ -3,7 +3,7 @@ import { withClassName } from '../../hooks/withClassName.js';
 
 const SwitchRoot = withClassName(
 	BaseSwitch.Root,
-	'layer-components:(unset appearance-none flex transition-all cursor-pointer w-42px h-25px p-2px bg-gray-light rounded-lg relative border-default flex-shrink-0 shadow-sm)',
+	'layer-components:(unset appearance-none flex transition-all cursor-pointer w-42px h-25px p-3px bg-gray-light rounded-lg relative border-default flex-shrink-0 shadow-sm shadow-inset)',
 	'layer-components:data-[checked]:bg-main',
 	'layer-components:hover:[&:not(:disabled)]:(bg-lighten-2 ring-2 ring-bg)',
 	'layer-components:active:[&:not(:disabled)]:(bg-darken-1 ring-4)',
@@ -13,7 +13,7 @@ const SwitchRoot = withClassName(
 
 const SwitchThumb = withClassName(
 	BaseSwitch.Thumb,
-	'layer-components:(block aspect-1 h-full bg-white rounded-lg border-default transition-transform will-change-transform)',
+	'layer-components:(block aspect-1 h-full bg-white rounded-lg border-default transition-transform will-change-transform shadow-sm)',
 	'layer-components:data-[checked]:(translate-x-1rem)',
 	'layer-components:data-[checked]:before:(content-["✓"] flex items-center justify-center absolute top-0 left-0 w-full h-full text-xs text-main-ink)',
 );