@a-type/ui 6.0.50 → 6.0.52

package/dist/behaviors/iconOnly.module.css

@@ -1,4 +1,5 @@
-.iconWrapper {
+@layer components {.iconWrapper {
 	display: inline-block;
 	flex-shrink: 0;
 }
+}

package/dist/css/util.css

@@ -1,4 +1,4 @@
-/* Sizes */
+@layer utils {/* Sizes */
 .w-auto {
 	width: auto;
 }
@@ -177,3 +177,4 @@
 	white-space: nowrap;
 	border: 0;
 }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a-type/ui",
-  "version": "6.0.50",
+  "version": "6.0.52",
   "type": "module",
   "repository": {
     "url": "https://github.com/a-type/ui"
@@ -38,8 +38,8 @@
   },
   "dependencies": {
     "@a-type/utils": "^1.1.9",
-    "@arbor-css/core": "^0.0.135",
-    "@arbor-css/postcss": "^0.0.135",
+    "@arbor-css/core": "^0.0.136",
+    "@arbor-css/postcss": "^0.0.136",
     "@base-ui/react": "^1.4.1",
     "@use-gesture/react": "^10.3.1",
     "browser-image-resizer": "^2.4.1",
@@ -80,6 +80,8 @@
     "husky": "^9.1.7",
     "jiti": "^2.6.1",
     "lint-staged": "^16.2.7",
+    "postcss-assign-layer": "^0.4.0",
+    "postcss-cli": "^11.0.1",
     "prettier": "^3.0.3",
     "react": "19.0.0",
     "react-dom": "19.0.0",
@@ -97,9 +99,10 @@
     ]
   },
   "scripts": {
-    "build:transpile": "tsc",
+    "build:transpile": "tsc --build tsconfig.json",
     "build:copy": "node --experimental-strip-types ./scripts/copy.ts",
-    "build": "pnpm run build:transpile && pnpm run build:copy",
+    "build:css": "postcss ./src/**/*.css --dir ./dist --base ./src --config scripts",
+    "build": "pnpm run build:transpile && pnpm run build:copy && pnpm run build:css",
     "prepublish": "pnpm run build",
     "icons": "node ./scripts/generateIcons.js",
     "storybook": "storybook dev -p 6006",

package/dist/colors.module.css

@@ -1,59 +0,0 @@
-.bgWash {
-	@apply --mx-bg(var(--m-color-main-wash));
-}
-.bgLight {
-	@apply --mx-bg(var(--m-color-main-light));
-}
-.bgMid {
-	@apply --mx-bg(var(--m-color-main));
-}
-.bgHeavy {
-	@apply --mx-bg(var(--m-color-main-heavy));
-}
-.bgInk {
-	@apply --mx-bg(var(--m-color-main-ink));
-}
-
-.bgNeutralInk {
-	@apply --mx-bg(var(--m-color-neutral-ink));
-}
-.bgNeutralPaper {
-	@apply --mx-bg(var(--m-color-neutral-paper));
-}
-.bgNeutralWash {
-	@apply --mx-bg(var(--m-color-neutral-wash));
-}
-
-.rangeLabel {
-	position: absolute;
-	left: 0;
-	top: 0;
-	@apply --mx-fg(var(--m-color-neutral));
-	@apply --mx-bg(var(--m-color-neutral-ink));
-	@apply --mx-bg-faded(50%);
-	font-size: var(--m-prose-ambient-size);
-	line-height: var(--m-prose-ambient-lineHeight);
-	font-weight: var(--m-prose-ambient-weight);
-	padding: var(--m-space-xs);
-	border-radius: var(--m-radius-sm);
-}
-
-.bgLighten1 {
-	@apply --mx-bg-lighter(1);
-}
-.bgLighten2 {
-	@apply --mx-bg-lighter(2);
-}
-.bgDarken1 {
-	@apply --mx-bg-heavier(1);
-}
-.bgDarken2 {
-	@apply --mx-bg-heavier(2);
-}
-
-.bgBetweenMidLight {
-	@apply --mx-bg(--fn-color-between(var(--m-color-main), var(--m-color-main-light)));
-}
-.bgBetweenMidHeavy {
-	@apply --mx-bg(--fn-color-between(var(--m-color-main), var(--m-color-main-heavy)));
-}

package/dist/components/actions/ActionBar.module.css

@@ -1,34 +0,0 @@
-.root {
-	position: relative;
-	height: max-content;
-	width: 100%;
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	justify-content: flex-start;
-	overflow: clip;
-	transition: height var(--m-duration) var(--m-easing);
-
-	&:empty {
-		height: 0;
-	}
-}
-
-.scrollArea {
-	height: 100%;
-	width: 100%;
-	flex: 1;
-}
-
-.scrollAreaContent {
-	position: relative;
-	height: 100%;
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	justify-content: flex-start;
-
-	&[data-wrap='true'] {
-		flex-wrap: wrap;
-	}
-}

package/dist/components/actions/ActionButton.module.css

@@ -1,6 +0,0 @@
-.button {
-	font-weight: normal;
-}
-.collapse {
-	padding: var(--m-space-sm);
-}

package/dist/components/avatar/Avatar.module.css

@@ -1,35 +0,0 @@
-.root {
-	position: relative;
-	aspect-ratio: 1/1;
-	width: --fn-literal(var(--avatar-size, 24px));
-	height: --fn-literal(var(--avatar-size, 24px));
-	display: flex;
-	flex-shrink: 0;
-	user-select: none;
-	align-items: center;
-	justify-content: center;
-	overflow: hidden;
-
-	@apply --mx-bg(var(--m-color-neutral-paper));
-
-	border-width: var(--m-lineWidth-sm);
-	border-style: solid;
-	border-color: var(--m-color-neutral-ink);
-
-	border-radius: var(--m-radius-lg);
-
-	&[data-empty='true'] {
-		border-style: dashed;
-		@apply --mx-bg(var(--m-color-neutral-light));
-	}
-}
-
-.image {
-	object-fit: cover;
-	width: 100%;
-	height: 100%;
-}
-
-.fallback {
-	font-size: --fn-literal(calc(0.5px * var(--avatar-size, 24px)));
-}

package/dist/components/box/Box.module.css

@@ -1,291 +0,0 @@
-@layer box {
-	.root {
-		display: flex;
-		position: relative;
-
-		flex-direction: row;
-		&[data-reverse] {
-			flex-direction: row-reverse;
-		}
-		&[data-col] {
-			flex-direction: column;
-			&[data-reverse] {
-				flex-direction: column-reverse;
-			}
-		}
-
-		&[data-wrap='wrap'],
-		&[data-wrap='true'] {
-			flex-wrap: wrap;
-		}
-		&[data-wrap='nowrap'] {
-			flex-wrap: nowrap;
-		}
-
-		&[data-gap='none'] {
-			gap: 0;
-		}
-		&[data-gap='xs'] {
-			gap: var(--m-space-xs);
-		}
-		&[data-gap='sm'] {
-			gap: var(--m-space-sm);
-		}
-		&[data-gap='md'],
-		&[data-gap='true'] {
-			gap: var(--m-space-md);
-		}
-		&[data-gap='lg'] {
-			gap: var(--m-space-lg);
-		}
-		&[data-gap='xl'] {
-			gap: var(--m-space-xl);
-		}
-
-		&[data-items='start'] {
-			align-items: flex-start;
-		}
-		&[data-items='center'] {
-			align-items: center;
-		}
-		&[data-items='end'] {
-			align-items: flex-end;
-		}
-		&[data-items='stretch'] {
-			align-items: stretch;
-		}
-		&[data-justify='start'] {
-			justify-content: flex-start;
-		}
-		&[data-justify='center'] {
-			justify-content: center;
-		}
-		&[data-justify='end'] {
-			justify-content: flex-end;
-		}
-		&[data-justify='between'] {
-			justify-content: space-between;
-		}
-		&[data-justify='around'] {
-			justify-content: space-around;
-		}
-		&[data-justify='evenly'] {
-			justify-content: space-evenly;
-		}
-		&[data-self='auto'] {
-			align-self: auto;
-		}
-		&[data-self='start'] {
-			align-self: flex-start;
-		}
-		&[data-self='center'] {
-			align-self: center;
-		}
-		&[data-self='end'] {
-			align-self: flex-end;
-		}
-		&[data-self='stretch'] {
-			align-self: stretch;
-		}
-
-		&[data-p='none'] {
-			padding: 0;
-		}
-		&[data-p='xs'] {
-			padding: var(--m-space-xs);
-		}
-		&[data-p='sm'] {
-			padding: var(--m-space-sm);
-		}
-		&[data-p='md'] {
-			padding: var(--m-space-md);
-		}
-		&[data-p='lg'],
-		&[data-p='true'] {
-			padding: var(--m-space-lg);
-		}
-		&[data-p='xl'] {
-			padding: var(--m-space-xl);
-		}
-
-		&[data-rounded='none'] {
-			border-radius: 0;
-		}
-		&[data-rounded='xs'] {
-			border-radius: var(--m-radius-xs);
-		}
-		&[data-rounded='sm'] {
-			border-radius: var(--m-radius-sm);
-		}
-		&[data-rounded='md'],
-		&[data-rounded='true'] {
-			border-radius: var(--m-radius-md);
-		}
-		&[data-rounded='lg'] {
-			border-radius: var(--m-radius-lg);
-		}
-
-		&[data-w='full'] {
-			width: 100%;
-		}
-		&[data-h='full'] {
-			height: 100%;
-		}
-		&[data-full='width'],
-		&[data-full='true'] {
-			width: 100%;
-		}
-		&[data-full='height'],
-		&[data-full='true'] {
-			height: 100%;
-		}
-
-		&[data-overflow='visible'] {
-			overflow: visible;
-		}
-		&[data-overflow='hidden'] {
-			overflow: hidden;
-		}
-		&[data-overflow='scroll'] {
-			overflow: scroll;
-		}
-		&[data-overflow='auto'] {
-			overflow: auto;
-		}
-		&[data-overflow='clip'] {
-			overflow: clip;
-		}
-		&[data-overflow='auto-y'] {
-			overflow-y: auto;
-			overflow-x: clip;
-		}
-		&[data-overflow='auto-x'] {
-			overflow-x: auto;
-			overflow-y: clip;
-		}
-
-		&[data-border='true'] {
-			@apply --mx-borderColor(var(--m-surface-ambient-borderColor));
-		}
-
-		&[data-surface='ambient'],
-		&[data-surface='true'] {
-			@apply --mx-bg(var(--m-surface-ambient-bg));
-			@apply --mx-fg(var(--m-surface-ambient-fg));
-			&[data-border='true'] {
-				@apply --mx-borderColor(var(--m-surface-ambient-borderColor));
-			}
-		}
-		&[data-surface='secondary'] {
-			@apply --mx-bg(var(--m-surface-secondary-bg));
-			@apply --mx-fg(var(--m-surface-secondary-fg));
-			&[data-border='true'] {
-				@apply --mx-borderColor(var(--m-surface-secondary-borderColor));
-			}
-		}
-		&[data-surface='primary'] {
-			@apply --mx-bg(var(--m-surface-primary-bg));
-			@apply --mx-fg(var(--m-surface-primary-fg));
-			&[data-border='true'] {
-				@apply --mx-borderColor(var(--m-surface-primary-borderColor));
-			}
-		}
-
-		&[data-glass='true'] {
-			@apply --mx-bg-faded(80%);
-			@apply --mx-borderColor-faded(80%);
-		}
-		&[data-dim='true'] {
-			@apply --mx-fg-lighter(2.5);
-		}
-
-		&[data-grow='true'] {
-			flex-grow: 1;
-		}
-		&[data-shrink='true'] {
-			flex-shrink: 1;
-			min-width: 0;
-		}
-
-		@apply --mx-shadow;
-		--mx-shadow-value: var(--shadow-inset) var(--shadow-x, 0)
-			calc(var(--shadow-y, 0) * var(--shadow-invert, 1)) var(--shadow-blur, 0)
-			var(--shadow-spread, 0) var(--shadow-color, transparent);
-		--shadow-inset: ;
-		&[data-elevated='sm'] {
-			--shadow-x: var(--m-shadow-sm-x);
-			--shadow-y: var(--m-shadow-sm-y);
-			--shadow-blur: var(--m-shadow-sm-blur);
-			--shadow-spread: var(--m-shadow-sm-spread);
-			--shadow-color: var(--m-shadow-sm-color);
-		}
-		&[data-elevated='md'],
-		&[data-elevated='true'] {
-			--shadow-x: var(--m-shadow-md-x);
-			--shadow-y: var(--m-shadow-md-y);
-			--shadow-blur: var(--m-shadow-md-blur);
-			--shadow-spread: var(--m-shadow-md-spread);
-			--shadow-color: var(--m-shadow-md-color);
-		}
-		&[data-elevated='lg'] {
-			--shadow-x: var(--m-shadow-lg-x);
-			--shadow-y: var(--m-shadow-lg-y);
-			--shadow-blur: var(--m-shadow-lg-blur);
-			--shadow-spread: var(--m-shadow-lg-spread);
-			--shadow-color: var(--m-shadow-lg-color);
-		}
-		&[data-elevated='xl'] {
-			--shadow-x: var(--m-shadow-xl-x);
-			--shadow-y: var(--m-shadow-xl-y);
-			--shadow-blur: var(--m-shadow-xl-blur);
-			--shadow-spread: var(--m-shadow-xl-spread);
-			--shadow-color: var(--m-shadow-xl-color);
-		}
-		&[data-shadow-up='true'] {
-			--shadow-invert: -1;
-		}
-		&[data-shadow-inset='true'] {
-			--shadow-inset: inset;
-		}
-
-		&[data-container='true'] {
-			container-type: inline-size;
-		}
-	}
-}
-
-@property --shadow-color {
-	syntax: '<color>';
-	inherits: false;
-	initial-value: transparent;
-}
-
-@property --shadow-x {
-	syntax: '<length>';
-	inherits: false;
-	initial-value: 0;
-}
-
-@property --shadow-y {
-	syntax: '<length>';
-	inherits: false;
-	initial-value: 0;
-}
-
-@property --shadow-blur {
-	syntax: '<length>';
-	inherits: false;
-	initial-value: 0;
-}
-
-@property --shadow-spread {
-	syntax: '<length>';
-	inherits: false;
-	initial-value: 0;
-}
-
-@property --shadow-inset {
-	syntax: 'inset';
-	inherits: false;
-	initial-value:;
-}

package/dist/components/button/Button.module.css

@@ -1,148 +0,0 @@
-.root {
-	user-select: none;
-	appearance: none;
-	cursor: pointer;
-	transition: all var(--m-duration) var(--m-easing);
-
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	justify-content: start;
-	gap: var(--m-space-sm);
-
-	position: relative;
-	overflow: visible;
-	white-space: nowrap;
-
-	@apply --mx-action-secondary;
-
-	@apply --mx-shadow(var(--m-shadow-sm));
-	@apply --mx-ring;
-
-	&[data-emphasis='primary'] {
-		@apply --mx-action-primary;
-	}
-	&[data-emphasis='light'] {
-		@apply --mx-action-light;
-	}
-	&[data-emphasis='default'] {
-		@apply --mx-action-secondary;
-	}
-	&[data-emphasis='ghost'] {
-		@apply --mx-action-ambient;
-		--mx-ring-value: 0 0 0 0 transparent;
-		--mx-shadow-value: 0 0 0 0 transparent;
-
-		&:hover,
-		&:focus {
-			--mx-bg-applied: inherit;
-			--mx-bg-ref: --fn-color-heavier(
-				color-mix(var(--mx-bg-applied), var(--m-color-main-light) 20%),
-				1
-			);
-		}
-	}
-	&[data-emphasis='ghost'],
-	&[data-emphasis='default'] {
-		&[aria-pressed='true'] {
-			@apply --mx-bg(var(--m-color-main-light));
-		}
-	}
-
-	&[data-has-icon='true'][data-has-label='false']:not(
-			[data-disable-icon-mode='true']
-		):not([data-size='wrapper']),
-	&[data-force-icon-mode='true']:not([data-size='wrapper']) {
-		padding: var(--m-space-md);
-
-		&[data-size='small'] {
-			padding: var(--m-space-sm);
-		}
-
-		&:not([aria-pressed='true']) {
-			aspect-ratio: 1/1;
-			align-items: center;
-			justify-content: center;
-		}
-	}
-
-	&[data-size='small'] {
-		min-height: --fn-literal(28px);
-	}
-	&[data-size='wrapper'] {
-		padding: 0;
-		width: fit-content;
-	}
-	&[data-full='width'],
-	&[data-full='both'] {
-		width: 100%;
-	}
-	&[data-full='height'],
-	&[data-full='both'] {
-		height: 100%;
-	}
-
-	&[data-align='start'] {
-		align-self: start;
-	}
-	&[data-align='center'] {
-		align-self: center;
-	}
-	&[data-align='end'] {
-		align-self: end;
-	}
-
-	@apply --mx-hover;
-	@apply --mx-active;
-	@apply --mx-focus;
-	@apply --mx-disabled;
-
-	/* Always turn off background for toggleable buttons that aren't pressed */
-	&[data-toggleable='true'][aria-pressed='false']:not(:hover) {
-		@apply --mx-bg(transparent);
-		--mx-bg-contrast: var(--m-global-trueLightColor);
-	}
-}
-
-.unstyled {
-	@apply --mx-bg(transparent);
-	margin: 0;
-	padding: 0;
-	appearance: none;
-	border: none;
-	cursor: pointer;
-	&:focus {
-		outline: none;
-	}
-	&:focus-visible {
-		box-shadow: 0 0 0 4px var(--m-color-main-ink);
-	}
-}
-
-.icon {
-	display: flex;
-	flex-shrink: 0;
-}
-
-.toggleIndicator {
-	width: 0;
-	transition: width var(--m-duration) var(--m-easing);
-
-	&[data-open='true'] {
-		width: --fn-literal(15px);
-	}
-	&[data-open='false'] {
-		margin-left: calc(-1 * var(--m-space-sm));
-	}
-}
-
-.defaultSpinner {
-	margin-block: auto;
-	display: flex;
-	flex-shrink: 0;
-	overflow: clip;
-
-	[data-has-icon='true'] & {
-		display: none;
-	}
-}

package/dist/components/camera/Camera.module.css

@@ -1,65 +0,0 @@
-.fullscreen {
-	position: fixed;
-	inset: 0;
-	z-index: 1000;
-	width: 100%;
-	height: 100%;
-	border-radius: 0;
-}
-
-.root {
-	min-width: --fn-literal(48px);
-	min-height: --fn-literal(48px);
-}
-
-.video {
-	width: 100%;
-	height: 100%;
-	object-fit: cover;
-}
-
-.shutterButton {
-	position: absolute;
-	bottom: var(--m-space-md);
-	left: 50%;
-	width: calc(48px / var(--m-global-space-density));
-	height: calc(48px / var(--m-global-space-density));
-	cursor: pointer;
-	transform: translateX(-50%);
-	opacity: 80%;
-	transition: all var(--m-duration) var(--m-easing);
-
-	@apply --mx-shadow;
-	--mx-ring-value: --fn-ring(var(--m-action-secondary-bg), 2px);
-	@apply --mx-bg(var(--m-action-secondary-bg));
-	@apply --mx-fg(color-contrast(var(--mx-bg-ref)));
-	@apply --mx-borderColor(var(--mx-fg-ref));
-	border-width: var(--m-lineWidth);
-	border-radius: var(--m-action-radius);
-
-	&:hover {
-		opacity: 100%;
-		@apply --mx-bg-heavier(2);
-	}
-
-	&:focus {
-		outline: none;
-		opacity: 100%;
-	}
-	&:focus-visible {
-		@apply --mx-bg-lighter(1);
-		--mx-ring-value: --fn-ring(var(--m-color-main-ink), 4px);
-	}
-}
-
-.swapButton {
-	position: absolute;
-	bottom: var(--m-space-xs);
-	left: var(--m-space-xs);
-}
-
-.fullscreenButton {
-	position: absolute;
-	top: var(--m-space-xs);
-	right: var(--m-space-xs);
-}