@a-type/ui 1.5.2 → 1.5.4

package/src/components/card/Card.tsx

@@ -50,6 +50,7 @@ export function CardMain({
 			data-compact={compact}
 			data-visually-focused={rest.visuallyFocused}
 			data-visually-disabled={rest.visuallyDisabled}
+			data-interactive={isInteractive}
 			{...rest}
 		/>
 	);
@@ -57,15 +58,16 @@ export function CardMain({
 
 export const CardTitle = withClassName(
 	'div',
-	'layer-components:(flex flex-col gap-1 mt-0 bg-white py-2 px-3 rounded-lg rounded-bl-none rounded-tr-none w-auto mr-auto border border-solid border-grayDarkBlend text-md max-h-80px overflow-hidden text-ellipsis max-w-full text-inherit font-semibold)',
+	'layer-components:(flex flex-col gap-1 mt-0 bg-white py-2 px-3 rounded-lg rounded-bl-none rounded-tr-none w-auto mr-auto border border-solid border-grayDarkBlend text-md max-h-80px overflow-hidden text-ellipsis max-w-full text-inherit font-semibold relative z-1)',
 	'layer-components:[[data-compact=true]_&]:(py-1 text-sm)',
+	'layer-components:[[data-interactive=true]:hover>&]:(bg-gray-2)',
 );
 
 const CardContentRoot = withClassName(
 	'div',
-	'layer-components:(flex flex-col gap-1 px-2 py-1 bg-light-blend text-black rounded-md mx-2 my-0.5 border border-solid border-grayDarkBlend text-xs)',
+	'layer-components:(flex flex-col gap-1 px-2 py-1 bg-light-blend text-black rounded-md mx-2 my-0.5 border border-solid border-grayDarkBlend text-xs relative z-1)',
 	'layer-variants:[[data-compact=true]_&]:(py-0 px-1 my-0 text-xs)',
-	'layer-variants:[&[data-unstyled]]:(p-0 [background:unset] border-none)',
+	'layer-variants:[&[data-unstyled=true]]:(p-0 [background:unset] border-none)',
 );
 export interface CardContentProps extends HTMLAttributes<HTMLDivElement> {
 	unstyled?: boolean;
@@ -77,7 +79,7 @@ export function CardContent({ unstyled, ref, ...rest }: CardContentProps) {
 
 export const CardImage = withClassName(
 	SlotDiv,
-	'layer-components:(absolute z-0 right-0 top-0 bottom-0 w-full h-full object-cover bg-center)',
+	'layer-components:(absolute z-0 right-0 top-0 bottom-0 w-full h-full object-cover bg-cover bg-center)',
 );
 
 export const CardFooter = withClassName(

package/src/components/icon/generated/IconSpritesheet.tsx

@@ -937,6 +937,26 @@ export const IconSpritesheet = (props: any) => (
 					strokeLinejoin="round"
 				/>
 			</symbol>
+			<symbol id="icon-enterKey" viewBox="0 0 15 15">
+				<path
+					d="M10.5 8V10.5H3.5M3.5 10.5L5 9M3.5 10.5L5 12"
+					stroke="currentColor"
+					strokeLinecap="round"
+					strokeLinejoin="round"
+				/>
+				<path
+					d="M14.5 2H6.5V6.5H0.5V14H14.5V2Z"
+					stroke="currentColor"
+					strokeLinejoin="round"
+				/>
+			</symbol>
+			<symbol id="icon-gamePiece" viewBox="0 0 15 15">
+				<path
+					d="M10 2.5C10 4 8.5 5 8.5 5L10 11C11.1722 11.4548 12.0956 11.9049 12.5 13C9.5 14.5 5.5 14.5 2.5 13C2.85427 12.0596 3.71706 11.5944 5 11L6.5 5C6.5 5 5 4 5 2.5C5 1 6.52369 0.5 7.5 0.5C8.47631 0.5 10 1 10 2.5Z"
+					stroke="currentColor"
+					strokeLinejoin="round"
+				/>
+			</symbol>
 		</defs>
 	</svg>
 );

package/src/components/icon/generated/iconNames.ts

@@ -83,6 +83,8 @@ export const iconNames = [
 	'previous',
 	'skipStart',
 	'skipEnd',
+	'enterKey',
+	'gamePiece',
 ] as const;
 
 export type IconName = (typeof iconNames)[number];

package/src/hooks/withProps.tsx

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