@a-type/ui 6.0.52 → 6.0.53

package/dist/components/toasts/toasts.module.css

@@ -0,0 +1,201 @@
+.toaster {
+	pointer-events: none;
+	overflow: clip;
+}
+
+.toast {
+	--gap: var(--m-space-sm);
+	--peek: var(--m-space-sm);
+	--scale: calc(max(0, 1 - var(--toast-index) * 0.1));
+	--height: var(--toast-frontmost-height, var(--toast-height));
+	--shrink: calc(1 - var(--scale));
+	--offset-y: calc(
+		var(--toast-offset-y) + calc(var(--toast-index) * var(--gap)) +
+			var(--toast-swipe-movement-y)
+	);
+
+	/* basic positioning */
+	position: fixed;
+	left: auto;
+	top: var(--m-space-xs);
+	z-index: calc(100000 - var(--toast-index));
+	margin-right: 0;
+	width: 100%;
+	transform-origin: top;
+	/* all toasts copy height of frontmost */
+	height: var(--height);
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: var(--m-space-xs);
+
+	/* styling happens in content element */
+
+	/* misc */
+	pointer-events: none;
+	user-select: none;
+
+	/* animation and interaction */
+	transform: translateX(var(--toast-swipe-movement-x))
+		translateY(
+			calc(var(--toast-swipe-movement-y) + var(--toast-index) * var(--peek)) +
+				(var(--shrink) * var(--height))
+		)
+		scale(var(--scale));
+	transition:
+		transform var(--m-duration) var(--m-easing),
+		opacity var(--m-duration) var(--m-easing),
+		height var(--m-duration-short) var(--m-easing);
+
+	&::after {
+		position: absolute;
+		content: '';
+		left: 0;
+		top: 100%;
+		height: --fn-literal(calc(var(--gap) + 1px));
+		width: 100%;
+	}
+
+	&[data-limited] {
+		opacity: 0;
+	}
+	&[data-expanded] {
+		height: var(--toast-height);
+		transform: translateX(var(--toast-swipe-movement-x))
+			translateY(var(--offset-y)) scale(1);
+	}
+
+	&[data-starting-style] {
+		transform: translateY(-150%);
+	}
+	&[data-ending-style] {
+		opacity: 0;
+
+		&[data-swipe-direction='up'] {
+			transform: translateY(calc(var(--toast-swipe-movement-y) - 150%));
+		}
+		&[data-swipe-direction='down'] {
+			transform: translateY(calc(var(--toast-swipe-movement-y) + 150%));
+		}
+		&[data-swipe-direction='left'] {
+			transform: translateX(calc(var(--toast-swipe-movement-x) - 150%))
+				translateY(var(--offset-y));
+		}
+		&[data-swipe-direction='right'] {
+			transform: translateX(calc(var(--toast-swipe-movement-x) + 150%))
+				translateY(var(--offset-y));
+		}
+	}
+
+	&:focus {
+		outline: none;
+	}
+	&:focus-visible {
+		box-shadow: --fn-focus-ring();
+	}
+}
+
+.toastContent {
+	max-width: 400px;
+	pointer-events: auto;
+	display: flex;
+	flex-direction: column;
+	gap: var(--m-space-sm);
+
+	&[data-behind]:not([data-expanded]) {
+		pointer-events: none;
+	}
+}
+
+.toastMain {
+	position: relative;
+	display: flex;
+	flex-direction: row;
+
+	@apply --mx-shadow(var(--m-shadow-md));
+	@apply --mx-surface-secondary;
+
+	padding-inline-start: var(--m-space-md);
+	padding-inline-end: var(--m-space-sm);
+	padding-block: var(--m-space-sm);
+	gap: var(--m-space-sm);
+
+	[data-behind]:not([data-expanded]) & {
+		max-height: var(--height);
+		@apply --mx-bg-heavier(2);
+	}
+}
+
+.toastMainBody {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: var(--m-space-xs);
+	@apply --mx-fg(inherit);
+
+	transition: opacity var(--m-duration) var(--m-easing);
+
+	/* Hide content when not in front */
+	[data-behind]:not([data-expanded]) & {
+		opacity: 0;
+	}
+
+	[data-expanded] & {
+		opacity: 1;
+	}
+}
+
+.toastMainBodyContent {
+	display: flex;
+	flex-direction: column;
+	gap: var(--m-space-xs);
+	@apply --mx-fg(inherit);
+}
+
+.toastTitle {
+	@apply --mx-fg(inherit);
+	@apply --mx-prose-secondary;
+	font-weight: var(--m-text-weight-bold);
+	margin: 0;
+}
+
+.toastDescriptionRow {
+	display: flex;
+	gap: var(--m-space-sm);
+}
+
+.icon {
+	position: relative;
+	top: --fn-literal(4px);
+}
+
+.toastDescription {
+	margin: 0;
+	@apply --mx-fg(inherit);
+	@apply --mx-prose-ambient;
+}
+
+.toastClose {
+	margin-block-end: auto;
+
+	[data-behind]:not([data-expanded]) & {
+		visibility: hidden;
+	}
+}
+
+.toastActions {
+	margin-inline-start: auto;
+	display: flex;
+	align-items: center;
+	gap: var(--m-space-xs);
+
+	font-size: var(--m-prose-ambient-size);
+	line-height: var(--m-prose-ambient-lineHeight);
+	font-weight: var(--m-prose-ambient-weight);
+
+	transition: opacity var(--m-duration) var(--m-easing);
+
+	[data-behind]:not([data-expanded]) & {
+		opacity: 0;
+	}
+}

package/dist/components/toggleGroup/toggleGroup.module.css

@@ -0,0 +1,55 @@
+.root {
+	width: fit-content;
+	display: inline-flex;
+	gap: var(--m-space-sm);
+	border-radius: var(--m-radius-lg);
+
+	@apply --mx-bg(--fn-color-faded(var(--m-color-main-light), 20%));
+}
+
+.item {
+	display: flex;
+	cursor: pointer;
+	align-items: center;
+	justify-content: center;
+	white-space: nowrap;
+	transition: all var(--m-duration) var(--m-easing);
+
+	@apply --mx-fg(var(--m-color-neutral-ink));
+
+	padding: var(--m-action-padding);
+
+	@apply --mx-borderColor(transparent);
+	border-radius: var(--m-radius-lg);
+
+	&[data-pressed] {
+		@apply --mx-shadow;
+		--mx-shadow-value: var(--m-shadow-sm);
+		@apply --mx-bg(var(--m-color-main));
+		@apply --mx-borderColor(var(--m-color-neutral-ink));
+	}
+
+	&:not([data-pressed]) {
+		@apply --mx-bg(--fn-color-faded(var(--m-color-neutral), 30%));
+	}
+
+	&:hover:not([data-pressed]) {
+		@apply --mx-bg-lighter(2);
+		--mx-ring-value: --fn-ring(var(--mx-bg-ref), 2px);
+		@apply --mx-borderColor(--fn-color-faded(var(--m-color-main-ink), 20%));
+	}
+
+	&:active:not([data-pressed]) {
+		@apply --mx-bg-lighter(1);
+		--mx-ring-value: --fn-ring(var(--mx-bg-ref), 4px);
+		@apply --mx-borderColor(--fn-color-faded(var(--m-color-main-ink), 30%));
+	}
+
+	&:focus {
+		outline: none;
+	}
+
+	&:focus-visible {
+		--mx-ring-value: --fn-focus-ring();
+	}
+}

package/dist/components/tooltip/Tooltip.module.css

@@ -0,0 +1,72 @@
+.popup {
+	position: relative;
+	display: flex;
+	user-select: none;
+
+	padding: var(--m-surface-padding);
+	border-radius: var(--m-surface-radius);
+
+	font-size: var(--m-prose-ambient-size);
+
+	transition:
+		opacity 0.2s ease,
+		transform 0.2s ease;
+
+	transform-origin: var(--transform-origin);
+
+	@apply --mx-shadow;
+	--mx-shadow-value: var(--m-shadow-sm);
+
+	&[data-color='contrast'] {
+		@apply --mx-fg(var(--m-color-neutral-paper));
+		@apply --mx-bg(var(--m-color-neutral-ink));
+	}
+
+	&[data-color='white'],
+	&[data-color='neutral'] {
+		@apply --mx-fg(var(--m-color-neutral-ink));
+		@apply --mx-bg(var(--m-color-neutral-paper));
+		@apply --mx-borderColor(var(--m-color-neutral));
+		border-style: solid;
+		border-width: var(--m-lineWidth-sm);
+	}
+
+	&[data-color='attention'] {
+		@apply --mx-bg(var(--m-color-main-heavy));
+		@apply --mx-fg(var(--m-color-neutral-paper));
+	}
+
+	opacity: 0;
+	transform: scale(0.95);
+	&[data-open] {
+		opacity: 1;
+		transform: scale(1);
+	}
+
+	&[data-instant] {
+		transition: none;
+	}
+
+	--y: 0px;
+	--x: 0px;
+	transform: translate(var(--x), var(--y));
+
+	&[data-starting-style] {
+		opacity: 0;
+		&[data-side='bottom'] {
+			--y: 4px;
+		}
+		&[data-side='top'] {
+			--y: -4px;
+		}
+		&[data-side='left'] {
+			--x: -4px;
+		}
+		&[data-side='right'] {
+			--x: 4px;
+		}
+	}
+	&[data-ending-style] {
+		opacity: 0;
+	}
+}

package/dist/components/typography/typography.module.css

@@ -0,0 +1,74 @@
+.typography {
+	@apply --mx-fg(inherit);
+
+	&[data-emphasis='primary'] {
+		font-size: var(--m-prose-primary-size);
+		line-height: var(--m-prose-primary-lineHeight);
+		font-weight: var(--m-prose-primary-weight);
+	}
+
+	&[data-emphasis='secondary'] {
+		font-size: var(--m-prose-secondary-size);
+		line-height: var(--m-prose-secondary-lineHeight);
+		font-weight: var(--m-prose-secondary-weight);
+	}
+
+	&[data-emphasis='ambient'] {
+		font-size: var(--m-prose-ambient-size);
+		line-height: var(--m-prose-ambient-lineHeight);
+		font-weight: var(--m-prose-ambient-weight);
+	}
+
+	&[data-italic] {
+		font-style: italic;
+	}
+	&[data-underline] {
+		text-decoration: underline;
+	}
+	&[data-strikethrough] {
+		text-decoration: line-through;
+	}
+	&[data-bold] {
+		font-weight: var(--m-text-weight-bold);
+	}
+	&[data-thin] {
+		font-weight: var(--m-text-weight-thin);
+	}
+	&[data-normal] {
+		font-weight: var(--m-text-weight-normal);
+	}
+	&[data-uppercase] {
+		text-transform: uppercase;
+	}
+	&[data-truncate] {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		max-width: 100%;
+	}
+	&[data-wrap] {
+		text-wrap: wrap;
+	}
+	&[data-dim] {
+		@apply --mx-fg-lighter(2.5);
+	}
+
+	&[data-color='neutral'] {
+		@apply --mx-fg(var(--m-color-neutral-ink));
+	}
+	&[data-color='main'] {
+		@apply --mx-fg(var(--m-color-main-heavy));
+	}
+	&[data-color='attention'] {
+		@apply --mx-fg(var(--m-color-palette-attention-heavy));
+	}
+	&[data-color='success'] {
+		@apply --mx-fg(var(--m-color-palette-success-heavy));
+	}
+}
+
+@layer components {
+	.removeMargin {
+		margin-block: 0;
+	}
+}

package/dist/components/viewport/Viewport.module.css

@@ -0,0 +1,44 @@
+.root {
+	min-height: 32px;
+	min-width: 32px;
+}
+
+.positioner {
+	contain: strict;
+	position: relative;
+	height: 100%;
+	width: 100%;
+	display: flex;
+	touch-action: none;
+	user-select: none;
+	overflow: clip;
+
+	&:focus {
+		outline: none;
+	}
+	&:focus-visible {
+		@apply --mx-shadow;
+		--mx-ring-value: --fn-ring(var(--m-color-main-ink), 1px);
+	}
+}
+
+.controlContent {
+	position: absolute;
+
+	&[data-position='top-left'] {
+		top: var(--m-space-sm);
+		left: var(--m-space-sm);
+	}
+	&[data-position='top-right'] {
+		top: var(--m-space-sm);
+		right: var(--m-space-sm);
+	}
+	&[data-position='bottom-left'] {
+		bottom: var(--m-space-sm);
+		left: var(--m-space-sm);
+	}
+	&[data-position='bottom-right'] {
+		bottom: var(--m-space-sm);
+		right: var(--m-space-sm);
+	}
+}

package/dist/components/viewport/ViewportContent.module.css

@@ -0,0 +1,8 @@
+.root {
+	position: absolute;
+	transform-origin: center;
+	touch-action: none;
+	user-select: none;
+	overflow: visible;
+	overscroll-behavior: none;
+}

package/dist/theme.stories.module.css

@@ -0,0 +1,13 @@
+.grid {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: var(--m-space-lg);
+	width: 100%;
+	min-width: 0;
+	flex: 1 0 auto;
+
+	& > * {
+		min-width: 0;
+		width: 100%;
+	}
+}

package/package.json

@@ -1,10 +1,13 @@
 {
   "name": "@a-type/ui",
-  "version": "6.0.52",
+  "version": "6.0.53",
   "type": "module",
   "repository": {
     "url": "https://github.com/a-type/ui"
   },
+  "engines": {
+    "node": ">=24"
+  },
   "files": [
     "/dist",
     "/src"
@@ -101,7 +104,7 @@
   "scripts": {
     "build:transpile": "tsc --build tsconfig.json",
     "build:copy": "node --experimental-strip-types ./scripts/copy.ts",
-    "build:css": "postcss ./src/**/*.css --dir ./dist --base ./src --config scripts",
+    "build:css": "postcss ./dist/**/*.css --replace --config scripts --verbose",
     "build": "pnpm run build:transpile && pnpm run build:copy && pnpm run build:css",
     "prepublish": "pnpm run build",
     "icons": "node ./scripts/generateIcons.js",