@a-type/ui 6.0.52 → 6.0.54

package/dist/components/dialog/Dialog.module.css

@@ -0,0 +1,188 @@
+.overlay {
+	position: fixed;
+	inset: 0;
+	@apply --mx-shadow;
+	/* --mx-shadow-value: inset 0 30px 60px 0px
+		--fn-color-faded(var(--m-color-main-ink), 20%); */
+	@apply --mx-bg(var(--m-color-neutral-ink));
+	@apply --mx-bg-faded(5%);
+	border-top: var(--m-lineWidth) solid var(--m-color-neutral);
+	transition: all var(--m-duration) var(--m-easing);
+	backdrop-filter: blur(2px);
+
+	&[data-starting-style],
+	&[data-ending-style] {
+		opacity: 0;
+	}
+}
+
+.content {
+	pointer-events: auto;
+	position: fixed;
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
+	overflow: clip;
+	transition: all var(--m-duration) var(--m-easing);
+	--shadow-dir: 1;
+	@apply --mx-shadow;
+	--mx-shadow-value: 0 calc(var(--shadow-dir, 1) * var(--m-shadow-xl-y))
+		var(--m-shadow-xl-blur) var(--m-shadow-xl-spread) var(--m-shadow-xl-color);
+	@apply --mx-bg(var(--m-surface-ambient-bg));
+	@apply --mx-borderColor(var(--m-color-neutral-heavy));
+
+	left: 50%;
+	top: 50%;
+	max-height: 85vh;
+	max-width: 450px;
+	width: 90vw;
+	border-radius: var(--m-surface-radius);
+	transform: translate3d(-50%, -50%, 0);
+	will-change: transform, opacity;
+
+	&[data-starting-style],
+	&[data-ending-style] {
+		opacity: 0;
+		transform: translate3d(-50%, -45%, 0) scale(0.95);
+	}
+
+	&:not([data-disable-sheet='true']) {
+		@media (max-width: 600px) {
+			--shadow-dir: -1;
+			top: auto;
+			bottom: 0;
+			left: 0;
+			right: 0;
+			max-width: unset;
+			height: min-content;
+			width: 100vw;
+			border-radius: var(--m-surface-radius) var(--m-surface-radius) 0 0;
+			border-bottom-width: 0;
+			transform: translate(0, 0);
+			padding-bottom: env(safe-area-inset-bottom);
+			padding-top: var(--m-space-lg);
+
+			&[data-starting-style],
+			&[data-ending-style] {
+				opacity: 0;
+				transform: translate3d(0, 100%, 0) scale(0.98);
+			}
+
+			&[data-width='lg'] {
+				max-width: 800px;
+			}
+			&[data-width='md'] {
+				max-width: 600px;
+			}
+			&[data-width='sm'] {
+				max-width: 300px;
+			}
+
+			&[data-keyboard-behavior='overlay'] {
+				bottom: calc(
+					var(--mock-virtual-keyboard-height, env(keyboard-inset-height, 0px)) +
+						var(--gesture-y, 0px)
+				);
+				max-height: calc(
+					95vh -
+						var(--mock-virtual-keyboard-height, env(keyboard-inset-height, 0px))
+				);
+			}
+			&[data-keyboard-behavior='displace'] {
+				bottom: calc(
+					var(--viewport-bottom-offset, 0px) + var(--gesture-y, 0px)
+				);
+				max-height: calc(0.85 * var(--viewport-height, 100vh));
+			}
+		}
+	}
+}
+
+.contentScrollArea {
+	width: 100%;
+	height: 100%;
+}
+
+.contentScrollAreaContent {
+	display: flex;
+	flex-direction: column;
+	gap: var(--m-space-md);
+	padding: var(--m-surface-padding);
+}
+
+.swipeHandle {
+	display: block;
+	position: absolute;
+	top: 0;
+	left: 50%;
+	transform: translateX(-50%) scale(1);
+	width: 20%;
+	cursor: grab;
+	will-change: transform;
+	touch-action: none;
+	padding-block: var(--m-space-sm);
+	z-index: 1;
+
+	@media (min-width: 600px) {
+		display: none;
+	}
+}
+.swipeHandleBar {
+	height: 4px;
+	width: 100%;
+	@apply --mx-bg(var(--m-color-neutral));
+	border-radius: var(--m-radius-lg);
+}
+
+.close {
+	position: absolute;
+	right: var(--m-space-sm);
+	top: var(--m-space-sm);
+	z-index: 101;
+	display: flex;
+
+	&[data-show-on-mobile='false'] {
+		@media (max-width: 600px) {
+			display: none;
+		}
+	}
+}
+
+.title {
+	@apply --mx-fg(var(--m-color-neutral-ink));
+	font-size: var(--m-prose-primary-size);
+	font-weight: var(--m-prose-primary-weight);
+	line-height: var(--m-prose-primary-lineHeight);
+	margin-block-end: var(--m-space-xs);
+	margin-block-start: 0;
+}
+
+.description {
+	@apply --mx-fg(var(--m-color-neutral-heavy));
+	font-size: var(--m-prose-ambient-size);
+	line-height: var(--m-prose-ambient-lineHeight);
+	margin: 0;
+	margin-block-end: var(--m-space-xs);
+}
+
+.actions {
+	position: sticky;
+	bottom: var(--m-space-md);
+	z-index: 100;
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	align-items: center;
+	justify-content: end;
+	align-self: end;
+	padding-bottom: 1px;
+	@apply --mx-shadow;
+	/* override blur in case user turned it off */
+	--mx-shadow-value: 0 calc(-1 * var(--m-shadow-md-y)) 16px
+		var(--m-shadow-md-spread) var(--m-color-neutral-paper);
+	@apply --mx-bg(var(--m-surface-ambient-bg));
+	@apply --mx-bg-faded(50%);
+	margin-block-start: var(--m-space-md);
+	gap: var(--m-space-sm);
+	border-radius: var(--m-surface-radius);
+}

package/dist/components/divider/Divider.module.css

@@ -0,0 +1,10 @@
+.root {
+	position: relative;
+	height: --fn-literal(1px);
+	width: 100%;
+	@apply --mx-bg(var(--m-color-neutral-ink));
+
+	&[data-padded] {
+		margin-block: var(--m-space-md);
+	}
+}

package/dist/components/dropdownMenu/DropdownMenu.module.css

@@ -0,0 +1,3 @@
+.content {
+	min-width: 220px;
+}

package/dist/components/editableText/EditableText.module.css

@@ -0,0 +1,44 @@
+.input {
+	& input {
+		font-size: inherit;
+	}
+}
+
+.button {
+	width: auto;
+	display: inline-flex;
+	align-items: center;
+	text-align: start;
+	font-size: inherit;
+	cursor: pointer;
+
+	@apply --mx-shadow;
+	--mx-shadow-value: none;
+
+	@apply --mx-fg(inherit);
+	@apply --mx-bg(transparent);
+	@apply --mx-borderColor(transparent);
+
+	padding: var(--m-control-padding);
+	gap: var(--m-space-sm);
+	border-radius: var(--m-control-radius);
+
+	&:hover,
+	&:focus-visible {
+		@apply --mx-bg(var(--m-color-neutral-light));
+		@apply --mx-bg-faded(80%);
+	}
+
+	&:focus {
+		outline: none;
+	}
+	&:focus-visible {
+		--mx-ring-value: --fn-focus-ring();
+	}
+}
+
+.icon {
+	opacity: 80%;
+	font-size: 1rem;
+	@apply --mx-stroke(var(--m-color-main-heavy));
+}

package/dist/components/emojiPicker/EmojiPicker.module.css

@@ -0,0 +1,84 @@
+.root {
+	height: --fn-literal(368px);
+	width: fit-content;
+	display: flex;
+	flex-direction: column;
+	isolation: isolate;
+	gap: var(--m-space-sm);
+	@apply --mx-bg(var(--m-surface-ambient-bg));
+}
+
+.search {
+	z-index: 10;
+	min-width: --fn-literal(80px);
+	width: 100%;
+}
+
+.viewport {
+	min-height: 0;
+	flex: 1;
+	overflow: clip;
+	@apply --mx-bg(var(--m-surface-ambient-bg));
+	border-radius: var(--m-surface-radius);
+}
+.viewportInner {
+	position: relative;
+	outline: hidden;
+}
+
+.loading {
+	position: absolute;
+	inset: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	@apply --mx-bg(inherit);
+}
+
+.empty {
+	position: absolute;
+	inset: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	@apply --mx-bg(inherit);
+	@apply --mx-fg(var(--m-color-neutral-heavy));
+	font-size: var(--m-prose-ambient-size);
+	line-height: var(--m-prose-ambient-lineHeight);
+	font-weight: var(--m-prose-ambient-weight);
+}
+
+.categoryHeader {
+	position: sticky;
+	top: 0;
+	@apply --mx-bg(inherit);
+	@apply --mx-fg(var(--m-color-neutral-heavy));
+	padding: var(--m-space-sm) var(--m-space-md);
+	font-weight: semibold;
+	font-size: var(--m-prose-ambient-size);
+	line-height: var(--m-prose-ambient-lineHeight);
+}
+
+.row {
+	scroll-margin-block: var(--m-space-xs);
+	padding-inline: var(--m-space-xs);
+}
+
+.emoji {
+	padding: var(--m-space-xs);
+	font-size: --fn-literal(20px);
+}
+
+.list {
+	user-select: none;
+	padding-block-end: var(--m-space-md);
+}
+
+.skinToneButton {
+	padding: var(--m-space-xs);
+	font-size: --fn-literal(20px);
+}
+
+.skinToneSelector {
+	margin-right: auto;
+}

package/dist/components/forms/EmojiField.module.css

@@ -0,0 +1,8 @@
+.triggerIcon {
+	height: 20px;
+	width: 20px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 20px;
+}

package/dist/components/forms/Field.module.css

@@ -0,0 +1,62 @@
+.root {
+	display: grid;
+	grid-template-areas: 'label' 'control' 'description';
+	justify-content: start;
+
+	&[data-horizontal] {
+		flex-direction: row;
+		align-items: center;
+		grid-template-areas: 'control label' 'description description';
+		grid-template-columns: auto 1fr;
+		&[data-reverse] {
+			grid-template-areas: 'label control' 'description description';
+			grid-template-columns: auto 1fr;
+		}
+	}
+
+	&[data-stretch] {
+		align-self: stretch;
+		justify-content: stretch;
+	}
+}
+
+.control {
+	grid-area: control;
+
+	[data-stretch] & {
+		align-self: stretch;
+		justify-content: stretch;
+		width: 100%;
+	}
+}
+
+.label {
+	grid-area: label;
+	@apply --mx-prose-ambient;
+	@apply --mx-fg(var(--m-color-neutral-heavy));
+	font-weight: var(--m-text-weight-bold);
+	margin-bottom: var(--m-space-xs);
+	margin-left: calc(var(--m-global-shape-roundness) * var(--m-space-md));
+
+	[data-horizontal] & {
+		@apply --mx-fg(var(--m-color-neutral-ink));
+		font-weight: var(--m-text-weight-normal);
+		margin-block-start: --fn-literal(5px);
+
+		[data-reverse] & {
+			margin-inline-start: 0;
+			margin-inline-end: calc(
+				var(--m-global-shape-roundness) * var(--m-space-md)
+			);
+		}
+	}
+}
+
+.description {
+	grid-area: description;
+	@apply --mx-prose-ambient;
+	@apply --mx-fg(var(--m-color-neutral-heavy));
+	font-style: italic;
+	margin-top: var(--m-space-sm);
+	margin-left: calc(var(--m-global-shape-roundness) * var(--m-space-md));
+}

package/dist/components/forms/Form.module.css

@@ -0,0 +1,6 @@
+.form {
+	display: flex;
+	align-items: start;
+	flex-direction: column;
+	gap: var(--m-space-lg);
+}

package/dist/components/forms/NumberStepperField.module.css

@@ -0,0 +1,5 @@
+.root {
+	display: flex;
+	flex-direction: column;
+	gap: var(--m-space-xs);
+}

package/dist/components/forms/TextField.module.css

@@ -0,0 +1,11 @@
+.root {
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
+	align-self: stretch;
+	gap: var(--m-space-xs);
+}
+
+.input {
+	width: 100%;
+}

package/dist/components/horizontalList/HorizontalList.module.css

@@ -0,0 +1,50 @@
+.root {
+	width: 100%;
+	max-height: 300px;
+	display: flex;
+	flex-direction: column;
+}
+
+.viewport {
+	display: flex;
+	flex-direction: row;
+}
+
+.content {
+	width: max-content;
+	display: flex;
+	flex-shrink: 0;
+	flex-direction: row;
+	align-items: center;
+	gap: var(--m-space-sm);
+	padding: var(--m-space-sm) var(--m-space-sm) var(--m-space-md)
+		var(--m-space-sm);
+}
+
+.toggleButton {
+	&[data-open='false'] {
+		height: 100%;
+		border-inline-end: var(--m-lineWidth) solid var(--m-color-neutral);
+		border-top-left-radius: var(--m-radius-sm);
+		border-bottom-left-radius: var(--m-radius-sm);
+		border-top-right-radius: 0;
+		border-bottom-right-radius: 0;
+	}
+}
+
+.toggleButtonWrapper {
+	position: sticky;
+	left: 0;
+	height: 100%;
+	top: var(--m-space-sm);
+	z-index: 1;
+	flex-shrink: 0;
+	@apply --mx-bg(inherit);
+}
+
+.chevronIcon {
+	transition: transform var(--m-duration) var(--m-easing);
+	&[data-flip='true'] {
+		transform: rotate(180deg);
+	}
+}

package/dist/components/icon/Icon.module.css

@@ -0,0 +1,20 @@
+.root {
+	fill: none;
+	flex-shrink: 0;
+
+	--size: 1em;
+	width: var(--size);
+	height: var(--size);
+
+	&[data-filled] {
+		fill: var(--m-color-main);
+	}
+}
+
+.spinner {
+	display: inline-block;
+	flex-shrink: 0;
+	--size: 1em;
+	width: var(--size);
+	height: var(--size);
+}

package/dist/components/imageUploader/ImageUploader.module.css

@@ -0,0 +1,67 @@
+.root {
+	position: relative;
+	border-radius: var(--m-surface-radius);
+}
+
+.input {
+	pointer-events: none;
+	position: absolute;
+	inset: 0;
+	opacity: 0;
+}
+
+.cameraRoot {
+	position: absolute;
+	z-index: 1;
+	height: 100%;
+	width: 100%;
+}
+
+.cameraCancelButton {
+	position: absolute;
+	top: var(--m-space-sm);
+	left: var(--m-space-sm);
+	@apply --mx-fg(var(--m-color-neutral-paper));
+}
+
+.removeButton {
+	position: absolute;
+	top: var(--m-space-sm);
+	right: var(--m-space-sm);
+	z-index: 10;
+	height: 32px;
+	width: 32px;
+	cursor: pointer;
+	padding: var(--m-space-sm);
+	@apply --mx-bg(var(--m-surface-ambient-bg));
+	@apply --mx-fg(var(--m-surface-ambient-fg));
+	@apply --mx-shadow;
+	border-radius: var(--m-radius-lg);
+	border: none;
+}
+
+.imagePreview {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	object-position: center;
+	border-radius: inherit;
+}
+
+.emptyControls {
+	position: absolute;
+	inset: 0;
+	min-height: 120px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: var(--m-space-sm);
+	@apply --mx-bg(var(--m-surface-primary-bg));
+	@apply --mx-fg(var(--m-surface-primary-fg));
+	border-radius: inherit;
+
+	&[dragging-over='true'] {
+		@apply --mx-bg-heavier(2);
+	}
+}

package/dist/components/img/Img.module.css

@@ -0,0 +1,42 @@
+.root {
+	&[data-full='width'],
+	&[data-full='true'] {
+		width: 100%;
+	}
+	&[data-full='height'],
+	&[data-full='true'] {
+		height: 100%;
+	}
+
+	&[data-fit='cover'] {
+		object-fit: cover;
+	}
+	&[data-fit='contain'] {
+		object-fit: contain;
+	}
+	&[data-fit='fill'] {
+		object-fit: fill;
+	}
+	&[data-fit='none'] {
+		object-fit: none;
+	}
+	&[data-fit='scale-down'] {
+		object-fit: scale-down;
+	}
+
+	&[data-position='top'] {
+		object-position: top;
+	}
+	&[data-position='bottom'] {
+		object-position: bottom;
+	}
+	&[data-position='left'] {
+		object-position: left;
+	}
+	&[data-position='right'] {
+		object-position: right;
+	}
+	&[data-position='center'] {
+		object-position: center;
+	}
+}

package/dist/components/input/Input.module.css

@@ -0,0 +1,100 @@
+.input {
+	display: flex;
+	flex-grow: 1;
+	user-select: auto;
+	padding: var(--m-control-padding-block) 0px;
+	min-width: 60px;
+
+	@apply --mx-fg(inherit);
+	@apply --mx-bg(transparent);
+	border: none;
+
+	font-family: inherit;
+	font-size: inherit;
+	line-height: inherit;
+
+	&::placeholder {
+		@apply --mx-fg(var(--m-color-neutral-heavy));
+	}
+
+	/* Focus visuals handled by wrapper */
+	&:focus,
+	&:focus-visible {
+		outline: none;
+	}
+
+	/* &:first-child {
+		padding-left: var(--m-control-padding-inline);
+		border-top-left-radius: inherit;
+		border-bottom-left-radius: inherit;
+	}
+	&:last-child {
+		padding-right: var(--m-control-padding-inline);
+		border-top-right-radius: inherit;
+		border-bottom-right-radius: inherit;
+	} */
+}
+
+.inputBorder {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: var(--m-space-xs);
+	width: max-content;
+	overflow: clip;
+
+	transition: box-shadow var(--m-duration) var(--m-easing);
+
+	@apply --mx-shadow;
+	--mx-shadow-value: inset var(--m-shadow-sm);
+
+	@apply --mx-fg(var(--m-control-fg));
+	@apply --mx-bg(var(--m-control-bg));
+	@apply --mx-borderColor(var(--m-control-borderColor));
+	border-radius: var(--m-control-radius);
+
+	font-size: var(--m-prose-secondary-size);
+	line-height: var(--m-prose-secondary-lineHeight);
+	font-weight: var(--m-prose-secondary-weight);
+
+	&:has(input:disabled),
+	&:has(textarea:disabled) {
+		--mx-shadow-value: 0 0 0 0 transparent;
+		@apply --mx-bg(transparent);
+		@apply --mx-borderColor-lighter(2);
+
+		& input:placeholder,
+		& textarea::placeholder {
+			@apply --mx-fg-lighter(2);
+		}
+	}
+
+	&:has(input:focus-visible[data-focus-clicked='false']),
+	&:has(textarea:focus-visible[data-focus-clicked='false']) {
+		@apply --mx-bg-lighter(3);
+		--mx-ring-value: --fn-focus-ring();
+	}
+	&:has(input:focus),
+	&:has(textarea:focus) {
+		@apply --mx-bg-lighter(3);
+		--mx-ring-value: --fn-ring(var(--m-color-main-light), 4px);
+	}
+
+	&:has(input:hover:not(:disabled):not(:focus)),
+	&:has(textarea:hover:not(:disabled):not(:focus)) {
+		@apply --mx-bg-lighter(2);
+		@apply --mx-borderColor-heavier(2);
+	}
+
+	& > [data-icon] {
+		margin-inline: var(--m-space-sm);
+	}
+
+	padding-inline: var(--m-control-padding-inline);
+	& > [data-input-border-flush]:first-child {
+		margin-left: calc(-1 * var(--m-control-padding-inline));
+	}
+	& > [data-input-border-flush]:last-child {
+		margin-right: calc(-1 * var(--m-control-padding-inline));
+	}
+}