@a-type/ui 6.0.51 → 6.0.53

package/dist/colors.module.css

@@ -0,0 +1,59 @@
+.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

@@ -0,0 +1,34 @@
+.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

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

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

@@ -0,0 +1,35 @@
+.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

@@ -0,0 +1,291 @@
+@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

@@ -0,0 +1,148 @@
+.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

@@ -0,0 +1,65 @@
+.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);
+}