@a-type/ui 2.7.0 → 2.7.2

package/src/components/button/Button.tsx

@@ -1,14 +1,7 @@
 import { Slot } from '@radix-ui/react-slot';
-import classNames from 'clsx';
+import classNames, { clsx } from 'clsx';
 import { AnimatePresence, motion } from 'motion/react';
-import {
-	ButtonHTMLAttributes,
-	Children,
-	memo,
-	Ref,
-	useCallback,
-	useState,
-} from 'react';
+import { ButtonHTMLAttributes, memo, Ref, useCallback, useState } from 'react';
 import { withClassName } from '../../hooks.js';
 import useMergedRef from '../../hooks/useMergedRef.js';
 import { IconLoadingProvider } from '../icon/IconLoadingContext.js';
@@ -97,45 +90,21 @@ export function ButtonRoot({
 		return <Comp {...buttonProps}>{children}</Comp>;
 	}
 
-	// wrap and inspect children
-	let hasLabel = false;
-	let hasIcon = false;
-	const wrappedChildren = Children.toArray(children).map((child, index) => {
-		if (child && typeof child === 'object' && 'type' in child) {
-			const isIcon = child.type === Icon || child.type;
-			if (isIcon) {
-				hasIcon = true;
-				return child; // return icon as is
-			}
-		}
-
-		hasLabel = true; // mark that we have a label
-
-		if ((!!child && typeof child === 'string') || typeof child === 'number') {
-			return (
-				<span key={`text-${index}`} data-auto-wrapped-label className="flex">
-					{child}
-				</span>
-			);
-		}
-		return child;
-	});
-
 	return (
 		<IconLoadingProvider value={isLoading}>
-			<Comp
-				{...buttonProps}
-				data-has-icon={String(hasIcon || isLoading)}
-				data-has-label={String(hasLabel)}
-			>
+			<Comp {...buttonProps}>
 				<AnimatePresence>
-					{isLoading && !hasIcon && (
+					{isLoading && (
 						<motion.div
 							key="spinner"
 							initial={{ width: 0, marginLeft: '-0.5rem' }}
 							animate={{ width: 'auto', marginLeft: 0 }}
 							exit={{ width: 0, marginLeft: '-0.5rem' }}
-							className="flex-shrink-0 inline-block overflow-hidden my-auto flex"
+							className={clsx(
+								'flex-shrink-0 inline-block overflow-hidden my-auto flex',
+								'[[data-has-icon=true]>&]:hidden',
+							)}
+							data-default-loader
 						>
 							<Spinner size={15} className="inline-block w-1em h-1em" />
 						</motion.div>
@@ -146,7 +115,7 @@ export function ButtonRoot({
 						toggleMode === 'color-and-indicator') && (
 						<ButtonToggleIndicator value={toggled} />
 					)}
-				{wrappedChildren}
+				{children}
 			</Comp>
 		</IconLoadingProvider>
 	);
@@ -222,6 +191,9 @@ function applyPartAttributes(button: HTMLButtonElement) {
 			registry.label++;
 		}
 	});
+	if (button.textContent) {
+		registry.label++;
+	}
 	button.setAttribute('data-has-icon', String(registry.icon > 0));
 	button.setAttribute('data-has-label', String(registry.label > 0));
 	button.setAttribute('data-icon-count', String(registry.icon));

package/src/components/button/classes.tsx

@@ -46,7 +46,7 @@ export function getButtonClassName({
 const colors = {
 	primary: `layer-variants:[&.btn-color-primary]:([--bg:var(--color-primary)] shadow-sm color-black border-primary-dark)`,
 	accent: `layer-variants:[&.btn-color-accent]:([--bg-neutral:var(--color-accent-wash)] [--bg:var(--color-accent-light)] shadow-sm color-black border-accent-dark)`,
-	default: `layer-variants:[&.btn-color-default]:([--bg-neutral:var(--color-white)] [--bg:var(--color-gray)] shadow-sm color-black border-gray-dark focus-visible:bg-lighten-1 hover:bg-lighten-1)`,
+	default: `layer-variants:[&.btn-color-default]:([--bg-neutral:var(--color-white)] [--bg:var(--color-gray)] bg-lighten-1 shadow-sm color-black border-gray-dark focus-visible:bg-lighten-1 hover:bg-lighten-1)`,
 	ghost: `layer-variants:[&.btn-color-ghost]:([--bg-neutral:transparent] [--bg:oklch(from_var(--color-gray)_l_c_h/50%)] color-dark-blend)`,
 	destructive: `layer-variants:[&.btn-color-destructive]:([--bg:var(--color-attention)] shadow-sm border-attention-dark color-black)`,
 	ghostDestructive: `layer-variants:[&.btn-color-ghostDestructive]:([--bg-neutral:transparent] [--bg:var(--color-attention-light)] color-attention-dark hover:(color-black) focus-visible:(color-black))`,

package/src/components/icon/Icon.tsx

@@ -21,7 +21,7 @@ export const Icon = function Icon({
 	const loading = useIconLoading();
 
 	if (loading) {
-		return <Spinner size={size} className="inline-block" />;
+		return <Spinner size={size} className="icon inline-block" />;
 	}
 
 	return (

package/src/components/navBar/NavBar.tsx

@@ -8,9 +8,9 @@ export const navBarItemClass = classNames(
 	'layer-components:(flex flex-col items-center justify-center whitespace-nowrap py-1 px-3 bg-transparent rounded-sm border-none cursor-pointer text-sm transition-colors h-full gap-6px relative color-black select-none)',
 	'layer-components:active:bg-darken-2',
 	'layer-components:hover:bg-darken-1',
-	'layer-components:focus-visible:(outline-none bg-darken-2)',
-	'layer-components:[&[data-active=true]]:(bg-[var(--bg)] bg-darken-1 color-black)',
-	'layer-components:([--bg:var(--color-primary-wash)] [--fill:var(--color-primary)])',
+	'layer-components:focus-visible:(outline-none bg-darken-2 ring-1 ring-primary)',
+	'layer-components:[&[data-active=true]]:(bg-primary-light/50 color-lighten-2 color-black)',
+	'layer-components:([--fill:var(--color-primary)])',
 	'layer-responsive:md:(flex-row-reverse h-auto justify-start gap-2 overflow-visible active:bg-darken-2)',
 );
 
@@ -30,9 +30,9 @@ export const NavBarItem = function NavBarItem({
 	color,
 	...rest
 }: NavBarItemProps & {
-	ref?: React.Ref<HTMLDivElement>;
+	ref?: React.Ref<HTMLButtonElement>;
 }) {
-	const Comp = asChild ? Slot : 'div';
+	const Comp = asChild ? Slot : 'button';
 
 	return (
 		<Comp
@@ -40,11 +40,9 @@ export const NavBarItem = function NavBarItem({
 			className={classNames(
 				navBarItemClass,
 				color === 'neutral' && [
-					'layer-variants:active:bg-gray-dark-blend layer-variants:md:active:bg-gray-dark-blend',
-					'layer-variants:hover:bg-gray-dark-blend',
-					'layer-variants:focus-visible:(bg-gray-dark-blend)',
-					'layer-variants:[&[data-active=true]]:(bg-gray-dark-blend color-black)',
-					'layer-variants:([--bg:var(--color-gray-blend)] [--fill:var(--color-gray)])',
+					'layer-variants:[&[data-active=true]]:(bg-gray/30 color-black)',
+					'layer-variants:([--fill:var(--color-gray)])',
+					'layer-variants:focus-visible:ring-gray',
 				],
 				className,
 			)}

package/src/components/select/Select.tsx

@@ -18,7 +18,8 @@ import {
 } from 'react';
 import { withClassName } from '../../hooks/withClassName.js';
 import { BoxContext } from '../box/Box.js';
-import { Button, ButtonProps, getButtonClassName } from '../button/index.js';
+import { Button, ButtonProps } from '../button/Button.js';
+import { getButtonClassName } from '../button/classes.js';
 import { Icon } from '../icon/index.js';
 
 export const SelectItem = ({

package/src/uno/colors.ts

@@ -6,7 +6,7 @@ export const colorConstants = `
 `;
 
 const lightness = {
-	wash: `calc(1 + 0.45 * var(--dyn-mode-mult, 1))`,
+	wash: `calc(1 + (0.1 + 0.35 * var(--dyn-mode-dark)) * var(--dyn-mode-mult, 1))`,
 	light: `calc(1 + 0.25 * var(--dyn-mode-mult, 1))`,
 	dark: `calc(1 - 0.25 * var(--dyn-mode-mult, 1))`,
 	ink: `calc(1 - 0.45 * var(--dyn-mode-mult, 1))`,
@@ -27,7 +27,7 @@ export const dynamicThemeComputedColors = (name: string) => {
 	--color-${name}-ink: oklch(from var(--color-${name}) calc(l * ${lightness.ink}) calc(var(--dyn-${name}-sat-mult) * (c * var(--dyn-saturation-x-ink, 1) + 0.01)) ${hue.ink});
 
 	--color-${name}-gray: oklch(from var(--color-${name}) l calc(c * 0.1 * var(--global-saturation, 1)) h);
-	--color-${name}-gray-wash: oklch(from var(--color-${name}-gray) calc(l * ${lightness.wash}) calc(c * 0.9) ${hue.wash});
+	--color-${name}-gray-wash: oklch(from var(--color-${name}-gray) calc(l * ${lightness.wash} * 1.1) calc(c * 0.9) ${hue.wash});
 	--color-${name}-gray-light: oklch(from var(--color-${name}-gray) calc(l * ${lightness.light}) c ${hue.light});
 	--color-${name}-gray-dark: oklch(from var(--color-${name}-gray) calc(l * ${lightness.dark}) c ${hue.dark});
 	--color-${name}-gray-ink: oklch(from var(--color-${name}-gray) calc(l * ${lightness.ink}) c ${hue.ink});
@@ -46,7 +46,7 @@ ${dynamicThemeComputedColors('accent')}
 
 --color-wash: var(--color-gray-wash);
 --palette-black: var(--color-gray-ink);
---palette-white: oklch(from var(--color-wash) calc(0.999 * var(--dyn-mode-mult,1)) calc(c * var(--global-saturation, 1)) h);
+--palette-white: oklch(from var(--color-wash) calc(1 * var(--dyn-mode-light,1)) 0.001 h);
 /* A dark-mode only contrast color */
 --color-dark-mode-contrast: oklch(from var(--color-gray-ink) l c h / calc(100% * var(--dyn-source-mode-adjust, 0)));
 `;

package/src/uno/shadows.ts

@@ -1,7 +1,7 @@
 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)`;
+	const opacity1 = `calc(var(--un-shadow-opacity,0.1)*(1 + var(--global-shadow-spread,1) * 0.5) * 2 * (1 + var(--dyn-source-mode-adjust, 0)))`;
+	const opacity2 = `calc(var(--un-shadow-opacity,0.1)*(1 + var(--global-shadow-spread,1) * 0.5) * (1 + var(--dyn-source-mode-adjust, 0)))`;
+	const opacity3 = `calc(var(--un-shadow-opacity,0.1)*(1 + var(--global-shadow-spread,1) * 0.5) / 2 * (1 + var(--dyn-source-mode-adjust, 0)))`;
 	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 / ${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})`,

package/src/uno/uno.preset.ts

@@ -646,6 +646,8 @@ export default function presetAtype({
 					--dyn-mode-sign: 1;
 					--dyn-source-mode-adjust: 0;
 					--dyn-mode-lighten-mult: 1;
+					--dyn-mode-light: 1;
+					--dyn-mode-dark: 0;
 					--color-dark-blend: var(--palette-dark-blend);
 					--color-light-blend: var(--palette-light-blend);
 					--color-dark-blend-2: var(--palette-dark-blend-2);
@@ -673,10 +675,12 @@ export default function presetAtype({
 					const darkMode = `
 						--wash-saturation-tweak: ${darkModeSaturationTweak};
 						--mode-mult: -1;
-						--dyn-mode-mult: -1.6;
+						--dyn-mode-mult: -1.25;
 						--dyn-mode-lighten-mult: -1;
 						--dyn-mode-sign: -1;
 						--dyn-source-mode-adjust: 1;
+						--dyn-mode-dark: 1;
+						--dyn-mode-light: 0;
 						--color-dark-blend: var(--palette-light-blend);
 						--color-light-blend: var(--palette-dark-blend);
 						--color-dark-blend-2: var(--palette-light-blend-2);
@@ -703,7 +707,7 @@ export default function presetAtype({
 					`;
 
 					const dynThemes: Record<string, DynamicThemeColor> = {
-						lemon: { hue: 91.8, hueRotate: 3 },
+						lemon: { hue: 91.8, hueRotate: 12 },
 						leek: { hue: 160.88, hueRotate: -1 },
 						tomato: { hue: 10.51, hueRotate: -2 },
 						blueberry: { hue: 248.14, hueRotate: 4 },
@@ -804,7 +808,7 @@ export default function presetAtype({
 					--z-tooltip: 10000;
 					--z-overdraw: 100000;
 
-					--un-shadow-color: var(--palette-true-black);
+					--un-shadow-color: #000000;
 					--un-shadow-opacity: 10%;
 
 					--arrow-size: 1rem;