@a-type/ui 3.0.26 → 3.0.28

package/dist/esm/uno/logic/color.test.js

@@ -39,20 +39,12 @@ describe('oklch color evaluation tools', () => {
     });
     it('should evaluate a valid oklch color value using element property values', () => {
         const context = snapshotColorContext('leek');
-        expect(wash.computeSrgb(context)).toMatchInlineSnapshot(`"rgb(100% 100% 100%)"`);
-        expect(wash.computeHex(context)).toMatchInlineSnapshot(`"#fff"`);
         expect(wash.computeOklch(context)).toMatchInlineSnapshot(`"oklch(100% 10% 165.88)"`);
-        expect(DEFAULT.computeSrgb(context)).toMatchInlineSnapshot(`"rgb(40.747% 99.344% 77.98%)"`);
-        expect(DEFAULT.computeHex(context)).toMatchInlineSnapshot(`"#68fdc7"`);
         expect(DEFAULT.computeOklch(context)).toMatchInlineSnapshot(`"oklch(90% 37.5% 165.88)"`);
     });
     it('should evaluate different named palettes in addition to main', () => {
         const context = snapshotColorContext('attention');
-        expect(wash.computeSrgb(context)).toMatchInlineSnapshot(`"rgb(100% 100% 100%)"`);
-        expect(wash.computeHex(context)).toMatchInlineSnapshot(`"#fff"`);
         expect(wash.computeOklch(context)).toMatchInlineSnapshot(`"oklch(100% 10% 30)"`);
-        expect(DEFAULT.computeSrgb(context)).toMatchInlineSnapshot(`"rgb(100% 80.069% 75.637%)"`);
-        expect(DEFAULT.computeHex(context)).toMatchInlineSnapshot(`"#ffccc1"`);
         expect(DEFAULT.computeOklch(context)).toMatchInlineSnapshot(`"oklch(90% 37.5% 30)"`);
     });
     it('works in dark mode', () => {
@@ -60,11 +52,7 @@ describe('oklch color evaluation tools', () => {
         darkMode.classList.add('override-dark', 'palette-leek');
         document.body.appendChild(darkMode);
         const context = snapshotColorContext('leek', 'dark');
-        expect(wash.computeSrgb(context)).toMatchInlineSnapshot(`"rgb(0% 14.06% 7.3466%)"`);
-        expect(wash.computeHex(context)).toMatchInlineSnapshot(`"#002413"`);
         expect(wash.computeOklch(context)).toMatchInlineSnapshot(`"oklch(22% 20% 165.88)"`);
-        expect(DEFAULT.computeSrgb(context)).toMatchInlineSnapshot(`"rgb(0% 60.697% 41.999%)"`);
-        expect(DEFAULT.computeHex(context)).toMatchInlineSnapshot(`"#009b6b"`);
         expect(DEFAULT.computeOklch(context)).toMatchInlineSnapshot(`"oklch(60% 40% 165.88)"`);
         document.body.removeChild(darkMode);
     });

package/dist/esm/uno/logic/color.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"color.test.js","sourceRoot":"","sources":["../../../../src/uno/logic/color.test.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"color.test.js","sourceRoot":"","sources":["../../../../src/uno/logic/color.test.ts"],"names":[],"mappings":"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"}

package/dist/esm/uno/theme/index.js

@@ -20,6 +20,14 @@ export const theme = {
     boxShadow,
     easing,
     animation,
+    blur: {
+        sm: '2px',
+        md: '4px',
+        lg: '8px',
+        xl: '16px',
+        '2xl': '24px',
+        '3xl': '40px',
+    },
     zIndex: {
         nav: 'var(--z-nav)',
         menu: 'var(--z-menu)',

package/dist/esm/uno/theme/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/uno/theme/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAEvD,MAAM,CAAC,MAAM,KAAK,GAAU;IAC3B,MAAM;IACN,QAAQ;IACR,UAAU;IACV,OAAO;IACP,YAAY;IACZ,SAAS;IACT,KAAK;IACL,MAAM;IACN,QAAQ,EAAE,KAAK;IACf,SAAS,EAAE,MAAM;IACjB,SAAS;IACT,MAAM;IACN,SAAS;IACT,MAAM,EAAE;QACP,GAAG,EAAE,cAAc;QACnB,IAAI,EAAE,eAAe;QACrB,MAAM,EAAE,iBAAiB;QACzB,QAAQ,EAAE,mBAAmB;QAC7B,OAAO,EAAE,kBAAkB;QAC3B,QAAQ,EAAE,mBAAmB;QAC7B,aAAa,EAAE,sBAAsB;KACrC;CACD,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/uno/theme/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAEvD,MAAM,CAAC,MAAM,KAAK,GAAU;IAC3B,MAAM;IACN,QAAQ;IACR,UAAU;IACV,OAAO;IACP,YAAY;IACZ,SAAS;IACT,KAAK;IACL,MAAM;IACN,QAAQ,EAAE,KAAK;IACf,SAAS,EAAE,MAAM;IACjB,SAAS;IACT,MAAM;IACN,SAAS;IACT,IAAI,EAAE;QACL,EAAE,EAAE,KAAK;QACT,EAAE,EAAE,KAAK;QACT,EAAE,EAAE,KAAK;QACT,EAAE,EAAE,MAAM;QACV,KAAK,EAAE,MAAM;QACb,KAAK,EAAE,MAAM;KACb;IACD,MAAM,EAAE;QACP,GAAG,EAAE,cAAc;QACnB,IAAI,EAAE,eAAe;QACrB,MAAM,EAAE,iBAAiB;QACzB,QAAQ,EAAE,mBAAmB;QAC7B,OAAO,EAAE,kBAAkB;QAC3B,QAAQ,EAAE,mBAAmB;QAC7B,aAAa,EAAE,sBAAsB;KACrC;CACD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a-type/ui",
-  "version": "3.0.26",
+  "version": "3.0.28",
   "type": "module",
   "repository": {
     "url": "https://github.com/a-type/ui"
@@ -66,17 +66,13 @@
     "browser-image-resizer": "^2.4.1",
     "calendar-blocks": "^0.4.0",
     "clsx": "^2.1.1",
-    "color-interpolate": "^1.0.5",
-    "color-parse": "^2.0.2",
-    "color-space": "^2.0.1",
-    "colorjs.io": "^0.5.2",
     "csstype": "^3.1.3",
     "date-fns": "^4.1.0",
     "formik": "^2.4.6",
     "frimousse": "^0.2.0",
     "motion": "^12.23.6",
     "pluralize": "^8.0.0",
-    "react-hot-toast": "^2.4.1",
+    "react-hot-toast": "^2.6.0",
     "react-is": "^19.1.0",
     "valtio": "^2.1.4"
   },
@@ -93,6 +89,8 @@
     "@types/react-dom": "^19.0.2",
     "@types/react-is": "^19.0.0",
     "@types/w3c-image-capture": "^1.0.10",
+    "@types/web-app-manifest": "^1.0.9",
+    "@types/dom-chromium-installation-events": "^101.0.4",
     "@unocss/cli": "66.5.4",
     "@unocss/core": "66.5.4",
     "@unocss/transformer-variant-group": "66.5.4",
@@ -107,7 +105,7 @@
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "storybook": "8.4.7",
-    "typescript": "^5.7.2",
+    "typescript": "^5.9.3",
     "unocss": "^66.5.4",
     "vitest": "^4.0.6",
     "vitest-browser-react": "^2.0.2"

package/src/colors.stories.tsx

@@ -257,13 +257,6 @@ export const TweakOpacity: Story = {
 export const ComputedColors: Story = {
 	render() {
 		const ctx = snapshotColorContext('primary');
-		const hexValues = [
-			palettes.primary.definitions.wash.computeHex(ctx),
-			palettes.primary.definitions.light.computeHex(ctx),
-			palettes.primary.definitions.default.computeHex(ctx),
-			palettes.primary.definitions.dark.computeHex(ctx),
-			palettes.primary.definitions.ink.computeHex(ctx),
-		];
 		const oklchValues = [
 			palettes.primary.definitions.wash.computeOklch(ctx),
 			palettes.primary.definitions.light.computeOklch(ctx),
@@ -280,11 +273,6 @@ export const ComputedColors: Story = {
 						<Swatch style={{ backgroundColor: oklch }}>OK</Swatch>
 					))}
 				</Box>
-				<Box className="h-100px">
-					{hexValues.map((hex) => (
-						<Swatch style={{ backgroundColor: hex }}>Hex</Swatch>
-					))}
-				</Box>
 			</Box>
 		);
 	},

package/src/components/dialog/Dialog.stories.tsx

@@ -33,12 +33,26 @@ function DummyContent() {
 	return (
 		<div className="col">
 			<H1>Some content</H1>
-			<P>
-				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at
-				porttitor sem. Aliquam erat volutpat. Donec fermentum tortor eget ligula
-				accumsan, sit amet ullamcorper nunc ultricies. Nulla facilisi. Nulla
-				facil
-			</P>
+			<div className="overflow-y-auto max-h-20vh">
+				<P>
+					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at
+					porttitor sem. Aliquam erat volutpat. Donec fermentum tortor eget
+					ligula accumsan, sit amet ullamcorper nunc ultricies. Nulla facilisi.
+					Nulla facil
+				</P>
+				<P>
+					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at
+					porttitor sem. Aliquam erat volutpat. Donec fermentum tortor eget
+					ligula accumsan, sit amet ullamcorper nunc ultricies. Nulla facilisi.
+					Nulla facil
+				</P>
+				<P>
+					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at
+					porttitor sem. Aliquam erat volutpat. Donec fermentum tortor eget
+					ligula accumsan, sit amet ullamcorper nunc ultricies. Nulla facilisi.
+					Nulla facil
+				</P>
+			</div>
 			<Button disabled color="primary">
 				Click me
 			</Button>

package/src/components/dialog/Dialog.tsx

@@ -26,11 +26,12 @@ const StyledOverlay = withClassName(
 	'layer-components:(fixed inset-0 z-backdrop animate-fade-in animate-duration-200 bg-black/15 shadow-inset shadow-[0_30px_60px_0px] shadow-black/20 border-top-1 border-top-solid border-top-gray)',
 	'layer-components:[&[data-state=closed]]:animate-fade-out',
 	'motion-reduce:animate-none',
+	'layer-components:backdrop-blur-sm',
 );
 
 const StyledContent = withClassName(
 	DialogPrimitive.Content,
-	'layer-components:(z-dialog fixed shadow-xl shadow-up bg-white overflow-y-auto border border-gray flex flex-col border border-gray-dark)',
+	'layer-components:(z-dialog fixed shadow-xl bg-white overflow-y-auto border border-gray flex flex-col border border-gray-dark)',
 	'layer-components:sm:shadow-down',
 	'transform-gpu !motion-reduce:animate-none',
 	'layer-components:(left-50% top-50% translate-[-50%] w-90vw max-w-450px max-h-85vh p-6 pt-8 rounded-lg border-b-1 pt-6)',
@@ -38,7 +39,7 @@ const StyledContent = withClassName(
 	'layer-components:[&[data-state=closed]]:animate-dialog-out',
 );
 const sheetClassNames = classNames(
-	'layer-variants:lt-sm:(translate-0 left-0 right-0 top-auto h-min-content rounded-tl-xl rounded-tr-xl rounded-b-0 border-b-0 p-6 pt-8 w-full max-w-none)',
+	'layer-variants:lt-sm:(translate-0 left-0 right-0 top-auto h-min-content rounded-tl-xl rounded-tr-xl rounded-b-0 border-b-0 p-6 pt-8 w-full max-w-none shadow-up)',
 	'layer-variants:lt-sm:pb-[calc(3rem+env(safe-area-inset-bottom,0px))]',
 	'layer-variants:lt-sm:(animate-fade-in-up)',
 	'layer-variants:lt-sm:[&[data-state=closed]]:animate-fade-out-down',
@@ -69,6 +70,34 @@ function sheetCloseGestureLogic(
 	content.style.setProperty('transition', last ? 'bottom 0.2s' : '');
 }
 
+// filter out gestures that are within scrollable descendants
+// if those elements are not scrolled to the top already
+function filterScrollables(
+	target: HTMLElement,
+	root: HTMLElement,
+	dy: number,
+	vy: number,
+) {
+	// always allow upward swipes
+	if (vy < 0) {
+		return false;
+	}
+
+	let cur: HTMLElement | null = target;
+	while (cur) {
+		if (cur === root) return false;
+		cur = cur.parentElement;
+		if (
+			cur &&
+			cur.scrollHeight > cur.clientHeight &&
+			cur.scrollTop !== 0 &&
+			vy > 0
+		)
+			return true;
+	}
+	return false;
+}
+
 export interface DialogContentProps
 	extends ComponentPropsWithRef<typeof DialogPrimitive.Content> {
 	width?: 'sm' | 'md' | 'lg';
@@ -146,8 +175,24 @@ export const Content = function Content({
 	const close = useContext(DialogCloseContext);
 	const isSmall = useMediaQuery('(max-width: 640px)');
 	const bind = useDrag(
-		({ swipe: [, swipeY], movement: [, dy], velocity: [, vy], last }) => {
-			if (gestureRef.current && gestureRef.current.scrollTop < 3) {
+		({
+			swipe: [, swipeY],
+			movement: [, dy],
+			velocity: [, vy],
+			last,
+			active,
+			target,
+		}) => {
+			if (
+				filterScrollables(target as HTMLElement, gestureRef.current!, dy, vy)
+			) {
+				return;
+			}
+			if (
+				(active || last) &&
+				gestureRef.current &&
+				gestureRef.current.scrollTop < 3
+			) {
 				sheetCloseGestureLogic(swipeY, dy, vy, last, close, gestureRef.current);
 			}
 		},

package/src/components/icon/Icon.tsx

@@ -24,7 +24,12 @@ export const Icon = function Icon({
 	const loading = loadingProp !== false && (loadingProp || loadingContext);
 
 	if (loading) {
-		return <Spinner size={size} className="icon inline-block" />;
+		return (
+			<Spinner
+				size={size}
+				className={classNames('icon inline-block flex-shrink-0', className)}
+			/>
+		);
 	}
 
 	return (

package/src/components/index.ts

@@ -25,6 +25,7 @@ export * from './imageUploader/index.js';
 export * from './infiniteLoadTrigger/InfiniteLoadTrigger.js';
 export * from './input/index.js';
 export * from './layouts/index.js';
+export * from './lists/lists.js';
 export * from './liveUpdateTextField/index.js';
 export * from './marquee/marquee.js';
 export * from './masonry/masonry.js';
@@ -36,6 +37,7 @@ export * from './peek/index.js';
 export * from './popover/index.js';
 export * from './progress/Progress.js';
 export * from './provider/Provider.js';
+export * from './pwaInstall/index.js';
 export * from './relativeTime/index.js';
 export * from './richEditor/index.js';
 export * from './scrollArea/ScrollArea.js';

package/src/components/lightbox/Lightbox.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Lightbox } from './Lightbox.js';
+
+const meta = {
+	title: 'Components/Lightbox',
+	component: Lightbox,
+	argTypes: {},
+	parameters: {
+		controls: { expanded: true },
+	},
+} satisfies Meta<typeof Lightbox>;
+
+export default meta;
+
+type Story = StoryObj<typeof Lightbox>;
+
+export const Default: Story = {
+	render(args) {
+		return (
+			<Lightbox {...args}>
+				<Lightbox.Image
+					src="https://resources.biscuits.club/images/pashka.jpg"
+					alt="Sample"
+				/>
+			</Lightbox>
+		);
+	},
+};

package/src/components/lightbox/Lightbox.tsx

@@ -0,0 +1,87 @@
+import * as Dialog from '@radix-ui/react-dialog';
+import { ReactNode } from 'react';
+import { withClassName } from '../../hooks.js';
+import { Button } from '../button/Button.js';
+import { Icon } from '../icon/Icon.js';
+
+export interface LightboxProps {
+	children?: ReactNode;
+}
+
+export const LightboxRoot = Dialog.Root;
+export const LightboxTrigger = withClassName(
+	Dialog.Trigger,
+	'layer-components:cursor-pointer',
+	'layer-components:focus-visible:(outline-none ring ring-accent)',
+);
+export const LightboxPortal = Dialog.Portal;
+export const LightboxTitle = () => (
+	<Dialog.Title className="sr-only">Lightbox</Dialog.Title>
+);
+export const LightboxClose = (props: Dialog.DialogCloseProps) => (
+	<Dialog.Close {...props} asChild className="absolute top-md right-md">
+		<Button aria-label="Close">
+			<Icon name="x" />
+		</Button>
+	</Dialog.Close>
+);
+
+export const LightboxOverlay = withClassName(
+	Dialog.Overlay,
+	'layer-components:(fixed inset-0 bg-black/50 backdrop-blur-sm z-backdrop)',
+	'transform-gpu !motion-reduce:animate-none',
+	'layer-components:[&[data-state=closed]]:animate-fade-out layer-components:(animate-fade-in animate-duration-200)',
+);
+
+export const LightboxContentRoot = withClassName(
+	Dialog.Content,
+	'layer-components:(fixed z-dialog bg-none border-none p-lg w-full h-full max-w-full max-h-full flex items-center justify-center)',
+	'transform-gpu !motion-reduce:animate-none',
+	'layer-components:(left-50% top-50% translate-[-50%] w-90vw max-h-85vh)',
+	'layer-components:animate-dialog-in',
+	'layer-components:[&[data-state=closed]]:animate-dialog-out',
+	'!pointer-events-none',
+);
+export const LightboxContent = (props: Dialog.DialogContentProps) => {
+	return (
+		<LightboxContentRoot {...props}>
+			<LightboxTitle />
+			<LightboxClose className="pointer-events-auto" />
+			<LightboxContentInner>{props.children}</LightboxContentInner>
+		</LightboxContentRoot>
+	);
+};
+
+const LightboxContentInner = withClassName(
+	'div',
+	'layer-components:(max-w-full max-h-full overflow-hidden flex flex-col items-center justify-center)',
+	'layer-components:pointer-events-none layer-components:[&>*]:pointer-events-auto',
+);
+
+function LightboxDefault({ children }: LightboxProps) {
+	return (
+		<Dialog.Root>
+			<Dialog.Trigger asChild>{children}</Dialog.Trigger>
+			<Dialog.Portal>
+				<LightboxOverlay />
+				<LightboxContent>{children}</LightboxContent>
+			</Dialog.Portal>
+		</Dialog.Root>
+	);
+}
+
+const LightboxImage = withClassName(
+	'img',
+	'max-w-full max-h-full min-h-80px min-w-80px object-contain',
+);
+
+export const Lightbox = Object.assign(LightboxDefault, {
+	Overlay: LightboxOverlay,
+	Content: LightboxContent,
+	Image: LightboxImage,
+	Root: LightboxRoot,
+	Trigger: LightboxTrigger,
+	Close: LightboxClose,
+	Title: LightboxTitle,
+	Portal: LightboxPortal,
+});

package/src/components/lists/lists.stories.tsx

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Ol, Ul } from './lists.js';
+
+const meta = {
+	title: 'Components/lists',
+	argTypes: {},
+	parameters: {
+		controls: { expanded: true },
+	},
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj;
+
+export const OrderedList: Story = {
+	render(args) {
+		return (
+			<Ol {...args}>
+				<Ol.Item>First item</Ol.Item>
+				<Ol.Item>Second item</Ol.Item>
+				<Ol.Item>Third item</Ol.Item>
+			</Ol>
+		);
+	},
+};
+
+export const UnorderedList: Story = {
+	render(args) {
+		return (
+			<Ul {...args}>
+				<Ul.Item>First item</Ul.Item>
+				<Ul.Item>Second item</Ul.Item>
+				<Ul.Item>Third item</Ul.Item>
+			</Ul>
+		);
+	},
+};

package/src/components/lists/lists.tsx

@@ -0,0 +1,21 @@
+import { withClassName } from '../../hooks.js';
+
+const OlBase = withClassName(
+	'ol',
+	'list-decimal list-inside m-0 p-0 flex flex-col gap-sm',
+);
+const OlItem = withClassName('li', 'ml-sm');
+
+export const Ol = Object.assign(OlBase, {
+	Item: OlItem,
+});
+
+const UlBase = withClassName(
+	'ul',
+	'list-disc list-inside m-0 p-0 flex flex-col gap-sm',
+);
+const UlItem = withClassName('li', 'ml-sm');
+
+export const Ul = Object.assign(UlBase, {
+	Item: UlItem,
+});

package/src/components/provider/Provider.tsx

@@ -1,16 +1,14 @@
 import { createContext, ReactNode, useContext } from 'react';
-import { Toaster, ToastPosition } from 'react-hot-toast';
 import { useThemedTitleBar, useVisualViewportOffset } from '../../hooks.js';
 import { useVirtualKeyboardBehavior } from '../../hooks/useVirtualKeyboardBehavior.js';
 import { IconSpritesheet } from '../icon/index.js';
 import { ParticleLayer } from '../particles/index.js';
+import { Toaster } from '../toasts/toasts.js';
 import { TooltipProvider } from '../tooltip/index.js';
 
 export interface ProviderProps {
 	children?: ReactNode;
 	disableParticles?: boolean;
-	toastPosition?: ToastPosition;
-	toastContainerClassName?: string;
 	disableViewportOffset?: boolean;
 	virtualKeyboardBehavior?: 'overlay' | 'displace';
 	disableTitleBarColor?: boolean;
@@ -22,8 +20,6 @@ export interface ProviderProps {
 export function Provider({
 	children,
 	disableParticles,
-	toastPosition = 'top-center',
-	toastContainerClassName,
 	disableViewportOffset,
 	virtualKeyboardBehavior = 'displace',
 	disableTitleBarColor,
@@ -38,10 +34,7 @@ export function Provider({
 	const otherStuff = (
 		<>
 			<IconSpritesheet />
-			<Toaster
-				position={toastPosition}
-				containerClassName={toastContainerClassName}
-			/>
+			<Toaster />
 		</>
 	);
 

package/src/components/pwaInstall/PlatformIcons.tsx

@@ -0,0 +1,75 @@
+export function SafariShareIcon() {
+	return (
+		<svg
+			id="pwa-share"
+			width="24"
+			height="24"
+			viewBox="0 0 17.695 26.475"
+			className="v-middle"
+		>
+			<g fill="currentColor">
+				<path d="M17.334 10.762v9.746c0 2.012-1.025 3.027-3.066 3.027H3.066C1.026 23.535 0 22.52 0 20.508v-9.746C0 8.75 1.025 7.734 3.066 7.734h2.94v1.573h-2.92c-.977 0-1.514.527-1.514 1.543v9.57c0 1.015.537 1.543 1.514 1.543h11.152c.967 0 1.524-.527 1.524-1.543v-9.57c0-1.016-.557-1.543-1.524-1.543h-2.91V7.734h2.94c2.04 0 3.066 1.016 3.066 3.028Z" />
+				<path d="M8.662 15.889c.42 0 .781-.352.781-.762V5.097l-.058-1.464.654.693 1.484 1.582a.698.698 0 0 0 .528.235c.4 0 .713-.293.713-.694 0-.205-.088-.361-.235-.508l-3.3-3.183c-.196-.196-.362-.264-.567-.264-.195 0-.361.069-.566.264L4.795 4.94a.681.681 0 0 0-.225.508c0 .4.293.694.703.694.186 0 .4-.079.538-.235l1.474-1.582.664-.693-.058 1.465v10.029c0 .41.351.762.771.762Z" />
+			</g>
+		</svg>
+	);
+}
+
+export function SafariIcon() {
+	return (
+		<svg
+			id="pwa-safari"
+			viewBox="0 0 20.283 19.932"
+			width="25"
+			height="25"
+			className="v-middle"
+		>
+			<g fill="currentColor">
+				<path d="M9.96 19.922c5.45 0 9.962-4.522 9.962-9.961C19.922 4.51 15.4 0 9.952 0 4.511 0 0 4.512 0 9.96c0 5.44 4.521 9.962 9.96 9.962Zm0-1.66A8.26 8.26 0 0 1 1.67 9.96c0-4.61 3.672-8.3 8.281-8.3 4.61 0 8.31 3.69 8.31 8.3 0 4.61-3.69 8.3-8.3 8.3Z" />
+				<path d="m5.87 14.883 5.605-2.735a1.47 1.47 0 0 0 .683-.673l2.725-5.596c.312-.664-.166-1.182-.85-.84L8.447 7.764c-.302.136-.508.341-.674.673L5.03 14.043c-.312.645.196 1.152.84.84Zm4.09-3.72A1.19 1.19 0 0 1 8.77 9.97c0-.664.527-1.201 1.19-1.201a1.2 1.2 0 0 1 1.202 1.2c0 .655-.537 1.192-1.201 1.192Z" />
+			</g>
+		</svg>
+	);
+}
+
+export function SafariPlusSquareIcon() {
+	return (
+		<svg
+			id="pwa-add"
+			width="24"
+			height="24"
+			viewBox="-4 -4 33 33"
+			fill="currentColor"
+			className="v-middle"
+		>
+			<g>
+				<path d="m23.40492,1.60784c-1.32504,-1.32504 -3.19052,-1.56912 -5.59644,-1.56912l-10.65243,0c-2.33622,0 -4.2017,0.24408 -5.5267,1.56912c-1.32504,1.34243 -1.56911,3.17306 -1.56911,5.50924l0,10.5827c0,2.40596 0.22665,4.254 1.55165,5.57902c1.34246,1.32501 3.19052,1.5691 5.59647,1.5691l10.60013,0c2.40592,0 4.2714,-0.24408 5.59644,-1.5691c1.325,-1.34245 1.55166,-3.17306 1.55166,-5.57902l0,-10.51293c0,-2.40596 -0.22666,-4.25401 -1.55166,-5.57901zm-0.38355,5.21289l0,11.24518c0,1.51681 -0.20924,2.94643 -1.02865,3.78327c-0.83683,0.83685 -2.30134,1.0635 -3.81815,1.0635l-11.33234,0c-1.51681,0 -2.96386,-0.22665 -3.80073,-1.0635c-0.83683,-0.83684 -1.04607,-2.26646 -1.04607,-3.78327l0,-11.19288c0,-1.5517 0.20924,-3.01617 1.02865,-3.85304c0.83687,-0.83683 2.31876,-1.04607 3.87042,-1.04607l11.28007,0c1.51681,0 2.98132,0.22666 3.81815,1.06353c0.81941,0.81941 1.02865,2.26645 1.02865,3.78327zm-10.53039,12.08205c0.64506,0 1.02861,-0.43586 1.02861,-1.13326l0,-4.34117l4.53294,0c0.66252,0 1.13326,-0.36613 1.13326,-0.99376c0,-0.64506 -0.43586,-1.02861 -1.13326,-1.02861l-4.53294,0l0,-4.53294c0,-0.6974 -0.38355,-1.13326 -1.02861,-1.13326c-0.62763,0 -0.99376,0.45332 -0.99376,1.13326l0,4.53294l-4.51552,0c-0.69737,0 -1.15069,0.38355 -1.15069,1.02861c0,0.62763 0.48817,0.99376 1.15069,0.99376l4.51552,0l0,4.34117c0,0.66252 0.36613,1.13326 0.99376,1.13326z" />
+			</g>
+		</svg>
+	);
+}
+
+export function SafariAddToDockIcon() {
+	return (
+		<svg
+			id="pwa-add"
+			viewBox="0 0 23.389 17.979"
+			width="24"
+			height="24"
+			className="v-middle"
+		>
+			<g fill="currentColor">
+				<path d="M1.045 3.291v1.377h20.937V3.291Zm2.021 14.688h16.895c2.05 0 3.066-1.006 3.066-3.018V3.027C23.027 1.016 22.012 0 19.961 0H3.066C1.026 0 0 1.016 0 3.027v11.934c0 2.012 1.025 3.018 3.066 3.018Zm.02-1.573c-.977 0-1.514-.517-1.514-1.533V3.115c0-1.015.537-1.543 1.514-1.543H19.94c.967 0 1.514.528 1.514 1.543v11.758c0 1.016-.547 1.533-1.514 1.533Z" />
+				<path d="M4.2 14.014c0 .508.35.85.868.85h12.92c.518 0 .87-.343.87-.85v-1.465c0-.508-.352-.85-.87-.85H5.068c-.517 0-.869.342-.869.85Z" />
+			</g>
+		</svg>
+	);
+}
+
+export function AndroidAddToHomeIcon() {
+	return (
+		<svg height="24" viewBox="0 -960 960 960" width="24" className="v-middle">
+			<path d="M320-40q-33 0-56.5-23.5T240-120v-160h80v40h400v-480H320v40h-80v-160q0-33 23.5-56.5T320-920h400q33 0 56.5 23.5T800-840v720q0 33-23.5 56.5T720-40H320Zm0-120v40h400v-40H320ZM176-280l-56-56 224-224H200v-80h280v280h-80v-144L176-280Zm144-520h400v-40H320v40Zm0 0v-40 40Zm0 640v40-40Z" />
+		</svg>
+	);
+}

package/src/components/pwaInstall/PwaInstallTrigger.stories.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from '../button/Button.js';
+import { Icon } from '../icon/Icon.js';
+import { PwaInstallTrigger } from './PwaInstallTrigger.js';
+
+const meta = {
+	title: 'Components/PwaInstallTrigger',
+	component: PwaInstallTrigger,
+	argTypes: {},
+	parameters: {
+		controls: { expanded: true },
+	},
+} satisfies Meta<typeof PwaInstallTrigger>;
+
+export default meta;
+
+type Story = StoryObj<typeof PwaInstallTrigger>;
+
+export const Default: Story = {
+	render(args) {
+		return (
+			<PwaInstallTrigger {...args} asChild>
+				<Button color="primary" emphasis="light">
+					<Icon name="star" /> Install
+				</Button>
+			</PwaInstallTrigger>
+		);
+	},
+};