@a-type/ui 2.6.1 → 2.7.0

package/src/components/horizontalList/HorizontalList.tsx

@@ -169,7 +169,6 @@ export function HorizontalList({
 					>
 						<Button
 							onClick={toggleOpen}
-							size="icon"
 							color="ghost"
 							className={clsx(
 								'flex-shrink-0 bg-[var(--scroll-bg)] sticky left-0 top-2 z-1',

package/src/components/icon/Icon.tsx

@@ -1,6 +1,8 @@
 import classNames from 'clsx';
 import { HTMLAttributes } from 'react';
+import { Spinner } from '../spinner/Spinner.js';
 import { IconName } from './generated/iconNames.js';
+import { useIconLoading } from './IconLoadingContext.js';
 
 export interface IconProps extends HTMLAttributes<SVGSVGElement> {
 	name: IconName;
@@ -16,10 +18,17 @@ export const Icon = function Icon({
 }: IconProps & {
 	ref?: React.Ref<SVGSVGElement>;
 }) {
+	const loading = useIconLoading();
+
+	if (loading) {
+		return <Spinner size={size} className="inline-block" />;
+	}
+
 	return (
 		<svg
 			ref={ref}
 			className={classNames(
+				'icon',
 				'flex-shrink-0 layer-components:fill-none',
 				className,
 			)}

package/src/components/icon/IconLoadingContext.tsx

@@ -0,0 +1,7 @@
+import { createContext, useContext } from 'react';
+
+const IconLoadingContext = createContext(false);
+export const IconLoadingProvider = IconLoadingContext.Provider;
+export function useIconLoading() {
+	return useContext(IconLoadingContext);
+}

package/src/components/imageUploader/ImageUploader.tsx

@@ -263,7 +263,6 @@ export function ImageUploaderRemoveButton({ className, ...rest }: ButtonProps) {
 	return (
 		<Button
 			color="ghost"
-			size="icon"
 			className={clsx(
 				'layer-variants:(absolute top-2 right-2 w-32px h-32px border-none p-2 cursor-pointer bg-white color-black rounded-lg transition-colors shadow-sm z-10)',
 				className,

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

@@ -39,8 +39,8 @@ function ExplodeButton() {
 		);
 	};
 	return (
-		<Button size="icon" onClick={burst}>
-			💥
+		<Button onClick={burst}>
+			<Button.Icon>💥</Button.Icon>
 		</Button>
 	);
 }

package/src/components/select/Select.tsx

@@ -45,10 +45,8 @@ export const SelectItem = ({
 
 export const SelectItemRoot = withClassName(
 	SelectPrimitive.Item,
-	'layer-components:(text-md leading-4 color-black rounded-sm flex items-center flex-row h-36px pr-4 pl-35px relative select-none)',
-	'layer-components:[&[data-disabled]]:(color-gray pointer-events-none) [&[data-highlighted]]:(outline-none bg-primary-wash color-black)',
-	'layer-components:[&:first-child]:(rounded-t-lg)',
-	'layer-components:[&:last-child]:(rounded-b-lg)',
+	'layer-components:(text-md leading-4 color-black flex items-center flex-row h-36px pr-4 pl-35px relative select-none)',
+	'layer-components:[&[data-disabled]]:(color-gray pointer-events-none) [&[data-highlighted]]:(outline-none bg-gray bg-lighten-3 color-black)',
 );
 export const SelectItemIndicatorRoot = withClassName(
 	SelectPrimitive.ItemIndicator,
@@ -133,7 +131,7 @@ export const SelectIcon = withNoNativeRender(
 	}) => {
 		return (
 			<SelectPrimitive.Icon
-				className={classNames('color-inherit', className)}
+				className={classNames('color-inherit ml-auto', className)}
 				{...props}
 				ref={forwardedRef}
 			>
@@ -143,7 +141,11 @@ export const SelectIcon = withNoNativeRender(
 	},
 );
 
-const zIndex = { zIndex: 1001 };
+const contentStyle = {
+	zIndex: 1001,
+	'--local-corner-scale': '1',
+} as React.CSSProperties;
+const viewportStyle = { '--local-corner-scale': '0.9' } as React.CSSProperties;
 export const SelectContent = withPassthroughNativeRender(
 	({ ref: forwardedRef, children, inDialog, className, ...props }) => {
 		return (
@@ -151,7 +153,7 @@ export const SelectContent = withPassthroughNativeRender(
 				<BoxContext.Provider value={{ spacingScale: 1 }}>
 					<SelectPrimitive.Content
 						className={classNames(
-							'layer-components:(overflow-hidden bg-white rounded-lg border border-solid border border-black z-menu shadow-lg)',
+							'layer-components:(overflow-hidden bg-white rounded-md border border-solid border border-black z-menu shadow-lg)',
 							'layer-components:transform-origin-[var(--radix-select-content-transform-origin)]',
 							'layer-components:[&[data-state=open]]:animate-popover-in',
 							'layer-components:[&[data-state=closed]]:animate-popover-out',
@@ -159,14 +161,14 @@ export const SelectContent = withPassthroughNativeRender(
 							inDialog && 'z-[calc(var(--z-dialog)+1)]',
 							className,
 						)}
-						style={zIndex}
+						style={contentStyle}
 						{...props}
 						ref={forwardedRef}
 					>
 						<SelectPrimitive.ScrollUpButton className="flex items-center justify-center h-25px bg-white color-primary-dark cursor-default">
 							<ChevronUpIcon />
 						</SelectPrimitive.ScrollUpButton>
-						<SelectPrimitive.Viewport className="p-1">
+						<SelectPrimitive.Viewport style={viewportStyle}>
 							{children}
 						</SelectPrimitive.Viewport>
 						<SelectPrimitive.ScrollDownButton className="flex items-center justify-center h-25px bg-white color-primary-dark cursor-default">

package/src/components/spinner/Spinner.tsx

@@ -25,7 +25,7 @@ export const Spinner = function Spinner({
 			role="progressbar"
 			{...props}
 			className={classNames(
-				'inline-block animate-spin animate-ease-linear animate-iteration-infinite color-inherit animate-duration-1400 transform-origin-[50%_50%]',
+				'flex-shrink-0 inline-block animate-spin animate-ease-linear animate-iteration-infinite color-inherit animate-duration-1400 transform-origin-[50%_50%]',
 				className,
 			)}
 			style={{ width: size, height: size, ...style }}

package/src/themes.stories.tsx

@@ -53,6 +53,7 @@ const meta = {
 		controls: { expanded: true },
 		layout: 'fullscreen',
 	},
+	tags: [],
 } satisfies Meta;
 
 export default meta;
@@ -121,7 +122,7 @@ function DemoUI({ className }: { className?: string }) {
 							<Card.Footer>
 								<Card.Actions>
 									<Button size="small">Action 1</Button>
-									<Button size="icon-small" color="ghost">
+									<Button size="small" color="ghost">
 										<Icon name="placeholder" />
 									</Button>
 								</Card.Actions>
@@ -135,7 +136,7 @@ function DemoUI({ className }: { className?: string }) {
 							<Card.Footer>
 								<Card.Actions>
 									<Button size="small">Action 1</Button>
-									<Button size="icon-small" color="ghost">
+									<Button size="small" color="ghost">
 										<Icon name="placeholder" />
 									</Button>
 								</Card.Actions>
@@ -180,6 +181,42 @@ function DemoUI({ className }: { className?: string }) {
 							<ContextMenu.Item>Item 3</ContextMenu.Item>
 						</ContextMenu.Content>
 					</ContextMenu>
+					<DropdownMenu>
+						<DropdownMenu.Trigger asChild className="m-auto">
+							<Button>Dropdown</Button>
+						</DropdownMenu.Trigger>
+						<DropdownMenu.Content>
+							<DropdownMenu.Item>Item 1</DropdownMenu.Item>
+							<DropdownMenu.Item>Item 2</DropdownMenu.Item>
+							<DropdownMenu.Item>Item 3</DropdownMenu.Item>
+							<DropdownMenu.Item disabled>Disabled Item</DropdownMenu.Item>
+							<DropdownMenu.Separator />
+							<DropdownMenu.Item>Item 4</DropdownMenu.Item>
+							<DropdownMenu.Item>Item 5</DropdownMenu.Item>
+							<DropdownMenu.Item>Item 6</DropdownMenu.Item>
+							<DropdownMenu.Item>
+								With icon
+								<DropdownMenu.ItemRightSlot>
+									<Icon name="flag" />
+								</DropdownMenu.ItemRightSlot>
+							</DropdownMenu.Item>
+						</DropdownMenu.Content>
+					</DropdownMenu>
+					<Select value="1">
+						<Select.Trigger />
+						<Select.Content>
+							<Select.Item value="1">Item 1</Select.Item>
+							<Select.Item value="2">Item 2</Select.Item>
+							<Select.Item value="3">Item 3</Select.Item>
+							<Select.Item value="4">Item 4</Select.Item>
+							<Select.Item value="5">Item 5</Select.Item>
+							<Select.Item value="6">Item 6</Select.Item>
+							<Select.Item value="7">Item 7</Select.Item>
+							<Select.Item value="8">Item 8</Select.Item>
+							<Select.Item value="9">Item 9</Select.Item>
+							<Select.Item value="10">Item 10</Select.Item>
+						</Select.Content>
+					</Select>
 					<Dialog>
 						<Dialog.Trigger asChild>
 							<Button>Click</Button>
@@ -256,16 +293,6 @@ function DemoUI({ className }: { className?: string }) {
 						</HorizontalList>
 					</Box>
 					<ImageUploader className="h-200px" value={null} onChange={() => {}} />
-					<DropdownMenu>
-						<DropdownMenu.Trigger asChild className="m-auto">
-							<Button>Dropdown</Button>
-						</DropdownMenu.Trigger>
-						<DropdownMenu.Content>
-							<DropdownMenu.Item>Item 1</DropdownMenu.Item>
-							<DropdownMenu.Item>Item 2</DropdownMenu.Item>
-							<DropdownMenu.Item>Item 3</DropdownMenu.Item>
-						</DropdownMenu.Content>
-					</DropdownMenu>
 				</div>
 			</PageContent>
 			<PageNav>

package/src/uno/colors.ts

@@ -88,6 +88,7 @@ export const themeColors = {
 	white: 'var(--color-white)',
 	wash: 'var(--color-wash)',
 	transparent: 'transparent',
+	current: 'currentColor',
 
 	// magic tokens
 	bg: 'var(--v-bg-altered, var(--v-bg, transparent))',

package/src/uno/shadows.ts

@@ -1,12 +1,15 @@
 export function getShadows(hard = false) {
+	const opacity1 = `calc(var(--un-shadow-opacity,0.1)*(1 + var(--global-shadow-spread,1) * 0.5)*2)`;
+	const opacity2 = `calc(var(--un-shadow-opacity,0.1)*(1 + var(--global-shadow-spread,1) * 0.5))`;
+	const opacity3 = `calc(var(--un-shadow-opacity,0.1)*(1 + var(--global-shadow-spread,1) * 0.5)/2)`;
 	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))))`,
+		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 / ${opacity1}),
+			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 / ${opacity1})`,
+		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 / ${opacity2}),
+			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 / ${opacity1})`,
+		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 / ${opacity2}),
+			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 / ${opacity2})`,
+		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 / ${opacity2}),
+			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 / ${opacity3})`,
 	};
 }