@a-type/ui 1.1.16 → 1.1.18

package/src/components/layouts/layouts.stories.tsx

@@ -11,6 +11,9 @@ import {
 	NavBarRoot,
 } from '../navBar.js';
 import { Icon } from '../icon.js';
+import { PageNowPlaying } from './PageNowPlaying.js';
+import { useEffect, useState } from 'react';
+import { Button } from '../button.js';
 
 const meta = {
 	title: 'layouts',
@@ -33,6 +36,7 @@ export const Default: Story = {
 					<h1 className="text-3xl font-bold">Hello, World!</h1>
 					<p className="text-lg">This is a simple page layout.</p>
 				</div>
+				<PageNowPlaying>Now playing</PageNowPlaying>
 			</PageContent>
 			<PageNav>
 				<NavBarRoot>
@@ -56,3 +60,70 @@ export const Default: Story = {
 		</PageRoot>
 	),
 };
+
+export const WithoutNav: Story = {
+	render: () => (
+		<PageRoot className="w-full h-full">
+			<PageContent>
+				<div className="text-center">
+					<h1 className="text-3xl font-bold">Hello, World!</h1>
+					<p className="text-lg">This is a simple page layout.</p>
+				</div>
+				<PageNowPlaying>Now playing</PageNowPlaying>
+			</PageContent>
+		</PageRoot>
+	),
+};
+
+export const WithVirtualKeyboard: Story = {
+	render() {
+		const [keyboard, setKeyboard] = useState(false);
+
+		useEffect(() => {
+			if (keyboard) {
+				document.body.style.setProperty(
+					'--mock-virtual-keyboard-height',
+					'300px',
+				);
+			} else {
+				document.body.style.removeProperty('--mock-virtual-keyboard-height');
+			}
+		}, [keyboard]);
+
+		return (
+			<PageRoot className="w-full h-full">
+				<PageContent>
+					<div className="text-center">
+						<h1 className="text-3xl font-bold">Hello, World!</h1>
+						<p className="text-lg">This is a simple page layout.</p>
+					</div>
+					<PageNowPlaying keepAboveKeyboard>
+						<Button onClick={() => setKeyboard((v) => !v)}>
+							Toggle vkeyboard
+						</Button>
+					</PageNowPlaying>
+				</PageContent>
+				<PageNav>
+					<NavBarRoot>
+						<NavBarItem>
+							<NavBarItemIconWrapper>
+								<NavBarItemIcon name="cart" />
+							</NavBarItemIconWrapper>
+							<NavBarItemText>Item 1 long</NavBarItemText>
+						</NavBarItem>
+						<NavBarItem active={true}>
+							<NavBarItemIconWrapper>
+								<NavBarItemIcon asChild>
+									<Icon name="book" />
+								</NavBarItemIcon>
+							</NavBarItemIconWrapper>
+							<NavBarItemText>Item 2</NavBarItemText>
+							<NavBarItemPip />
+						</NavBarItem>
+					</NavBarRoot>
+				</PageNav>
+				<div className="fixed bottom-0 h-[var(--mock-virtual-keyboard-height,0)] bg-black w-full transition-height left-0 right-0" />
+			</PageRoot>
+		);
+	},
+};

package/src/components/provider/Provider.tsx

@@ -2,8 +2,9 @@ import { ReactNode } from 'react';
 import { ParticleLayer } from '../particles.js';
 import { IconSpritesheet } from '../icon.js';
 import { Toaster, ToastPosition } from 'react-hot-toast';
-import { Tooltip, TooltipProvider } from '../tooltip.js';
+import { TooltipProvider } from '../tooltip.js';
 import { useVisualViewportOffset } from '../../hooks.js';
+import { useVirtualKeyboardBehavior } from '../../hooks/useVirtualKeyboardBehavior.js';
 
 export interface ProviderProps {
 	children?: ReactNode;
@@ -11,6 +12,7 @@ export interface ProviderProps {
 	toastPosition?: ToastPosition;
 	toastContainerClassName?: string;
 	disableViewportOffset?: boolean;
+	virtualKeyboardBehavior?: 'overlay' | 'displace';
 }
 
 /**
@@ -21,9 +23,11 @@ export function Provider({
 	disableParticles,
 	toastPosition = 'top-center',
 	toastContainerClassName,
-	disableViewportOffset
+	disableViewportOffset = true,
+	virtualKeyboardBehavior = 'overlay',
 }: ProviderProps) {
 	useVisualViewportOffset(disableViewportOffset);
+	useVirtualKeyboardBehavior(virtualKeyboardBehavior);
 
 	const otherStuff = (
 		<>

package/src/components/tabs/tabs.tsx

@@ -5,12 +5,12 @@ export const TabsRoot = withClassName(TabsPrimitive.Root, '');
 
 export const TabsList = withClassName(
 	TabsPrimitive.List,
-	'flex flex-row py-2 px-2 justify-center items-start gap-2',
+	'flex flex-row flex-wrap py-2 px-2 items-start gap-2',
 );
 
 export const TabsTrigger = withClassName(
 	TabsPrimitive.Trigger,
-	'layer-components:(flex flex-row items-center justify-center gap-2 color-black py-1 px-4 bg-wash text-md min-w-100px rounded-full border border-1 font-semibold text-gray-7 border-gray-7 border-solid transition-colors cursor-pointer select-none font-sans)',
+	'layer-components:(flex flex-row items-center justify-center gap-2 color-black py-1 px-5 bg-wash text-md min-w-100px rounded-full border border-1 font-semibold text-gray-7 border-gray-7 border-solid transition-colors cursor-pointer select-none font-sans flex-shrink-0)',
 	'hover:bg-primary-light focus-visible:(focus-ring focus-ring-primary-dark outline-off bg-primary-light border-primary-dark) [&[data-state=active]]:(font-semibold bg-primary-light border-primary-light text-black cursor-default hover:bg-primary-light relative z-1)',
 );
 

package/src/hooks/useVirtualKeyboardBehavior.ts

@@ -0,0 +1,12 @@
+import { useEffect } from 'react';
+
+export function useVirtualKeyboardBehavior(
+	behavior: 'overlay' | 'displace' = 'overlay',
+) {
+	useEffect(() => {
+		if ('virtualKeyboard' in navigator) {
+			// @ts-ignore
+			navigator.virtualKeyboard.overlaysContent = behavior === 'overlay';
+		}
+	}, [behavior]);
+}

package/src/uno.preset.ts

@@ -399,6 +399,8 @@ export default function presetAglio({
 			'outline-off': '[outline:none]',
 			'bg-wash': 'bg-[var(--color-wash)]',
 			unset: '[all:unset]',
+			'bottom-keyboard':
+				'bottom-[var(--mock-virtual-keyboard-height,env(keyboard-inset-height,0px))]',
 		},
 
 		preflights: [