@a-type/ui 6.0.51 → 6.0.53

package/dist/components/scrollArea/ScrollArea.module.css

@@ -0,0 +1,187 @@
+.root {
+	box-sizing: border-box;
+	min-height: 0;
+	min-width: 0;
+	display: flex;
+	flex-direction: column;
+}
+
+.viewport {
+	height: 100%;
+	min-height: 0;
+	@apply --mx-shadow;
+
+	&:focus {
+		outline: none;
+	}
+	&:focus-visible {
+		--mx-ring-value: --fn-ring(var(--m-color-main-ink), 1px);
+	}
+}
+
+.verticalFades {
+	--scroll-area-overflow-y-end: inherit;
+	--scroll-area-overflow-y-start: inherit;
+
+	pointer-events: none;
+	position: absolute;
+	inset: 0;
+
+	&::before {
+		content: '';
+		--scroll-area-overflow-y-start: inherit;
+
+		position: absolute;
+		left: 0;
+		top: 0;
+		display: block;
+		height: min(40px, var(--scroll-area-overflow-y-start, 40px));
+		width: 100%;
+		transition: height var(--m-duration) var(--m-easing);
+
+		background: linear-gradient(
+			to bottom,
+			var(--mx-bg-ref) 0%,
+			transparent 100%
+		);
+	}
+
+	&::after {
+		content: '';
+		--scroll-area-overflow-y-end: inherit;
+
+		position: absolute;
+		left: 0;
+		bottom: 0;
+		display: block;
+		height: min(40px, var(--scroll-area-overflow-y-end, 40px));
+		width: 100%;
+		transition: height var(--m-duration) var(--m-easing);
+
+		background: linear-gradient(to top, var(--mx-bg-ref) 0%, transparent 100%);
+	}
+}
+
+.horizontalFades {
+	--scroll-area-overflow-x-end: inherit;
+	--scroll-area-overflow-x-start: inherit;
+
+	pointer-events: none;
+	position: absolute;
+	inset: 0;
+
+	&::before {
+		content: '';
+		--scroll-area-overflow-x-start: inherit;
+
+		position: absolute;
+		left: 0;
+		top: 0;
+		display: block;
+		height: 100%;
+		width: min(40px, var(--scroll-area-overflow-x-start, 40px));
+		transition: width var(--m-duration) var(--m-easing);
+
+		background: linear-gradient(
+			to right,
+			var(--mx-bg-ref) 0%,
+			transparent 100%
+		);
+	}
+
+	&::after {
+		content: '';
+		--scroll-area-overflow-x-end: inherit;
+
+		position: absolute;
+		right: 0;
+		top: 0;
+		display: block;
+		height: 100%;
+		width: min(40px, var(--scroll-area-overflow-x-end, 40px));
+		transition: width var(--m-duration) var(--m-easing);
+
+		background: linear-gradient(to left, var(--mx-bg-ref) 0%, transparent 100%);
+	}
+}
+
+.content {
+	display: flex;
+	flex-direction: column;
+
+	[data-scroll-direction='horizontal'] > &,
+	[data-scroll-direction='both'] > & {
+		min-width: min-content;
+	}
+}
+
+.thumb {
+	@apply --mx-bg(var(--mx-fg-ref));
+	@apply --mx-bg-faded(25%);
+	border-radius: 9999px;
+
+	&[data-orientation='vertical'] {
+		width: 100%;
+	}
+	&[data-orientation='horizontal'] {
+		height: 100%;
+	}
+}
+
+.scrollbar {
+	pointer-events: none;
+	position: relative;
+	margin: 1px;
+	display: flex;
+	user-select: none;
+	opacity: 0;
+	border-radius: 9999px;
+	touch-action: none;
+	transition:
+		opacity,
+		height,
+		width var(--m-duration) var(--m-easing);
+
+	@apply --mx-bg(var(--mx-fg-ref));
+	@apply --mx-bg-faded(5%);
+
+	&[data-hovering] {
+		pointer-events: auto;
+		opacity: 1;
+	}
+	&[data-scrolling] {
+		transition-duration: 0;
+	}
+
+	&::before {
+		content: '';
+		position: absolute;
+	}
+
+	&[data-orientation='vertical'] {
+		width: 4px;
+		justify-content: center;
+		&::before {
+			height: 100%;
+			width: 20px;
+		}
+		&:hover::before {
+			width: 8px;
+		}
+	}
+	&[data-orientation='horizontal'] {
+		height: 4px;
+		align-items: center;
+		&::before {
+			width: 100%;
+			height: 20px;
+		}
+		&:hover::before {
+			height: 8px;
+		}
+	}
+}
+
+.corner {
+	@apply --mx-bg(transparent);
+}

package/dist/components/select/Select.module.css

@@ -0,0 +1,46 @@
+.trigger {
+	display: inline-flex;
+	font-weight: normal;
+	gap: var(--m-space-md);
+
+	&[data-placeholder] {
+		color: var(--m-color-neutral-heavy);
+	}
+}
+
+.value {
+	display: flex;
+	flex-direction: row;
+}
+
+.groupLabel {
+	padding-inline: var(--m-space-lg);
+}
+
+.icon {
+	margin-left: auto;
+	@apply --mx-fg(inherit);
+
+	& > [data-icon] {
+		position: relative;
+		top: --fn-literal(1px);
+		width: --fn-literal(12px);
+		height: --fn-literal(12px);
+	}
+}
+
+.positioner {
+	user-select: none;
+	transform-origin: var(--transform-origin);
+
+	&:focus {
+		outline: none;
+	}
+}
+
+.popup {
+	min-width: var(--anchor-width);
+	&[data-side='none'] {
+		min-width: calc(var(--anchor-width) + 2rem);
+	}
+}

package/dist/components/skeletons/skeletons.module.css

@@ -0,0 +1,33 @@
+@keyframes skeleton {
+	0% {
+		background-position: 0% 50%;
+	}
+	100% {
+		background-position: 100% 50%;
+	}
+}
+
+.textSkeleton {
+	background-size: 400%, 400%;
+	display: inline-block;
+	height: 100%;
+	max-width: 100%;
+	border-radius: var(--m-radius-md);
+	width: 100%;
+	flex-shrink: 0;
+	opacity: 20%;
+
+	animation-name: skeleton;
+	animation-duration: 1.5s;
+	animation-iteration-count: infinite;
+	animation-timing-function: var(--m-easing);
+	animation-direction: alternate;
+	animation-play-state: running;
+
+	background-image: linear-gradient(
+		to right,
+		transparent 0%,
+		var(--mx-fg-ref, var(--m-color-main-ink)) 50%,
+		transparent 100%
+	);
+}

package/dist/components/slider/Slider.module.css

@@ -0,0 +1,97 @@
+.root {
+	width: 100%;
+	box-sizing: border-box;
+}
+
+.control {
+	position: relative;
+	height: 30px;
+	width: 100%;
+	display: flex;
+	user-select: none;
+	align-items: center;
+	touch-action: none;
+	box-sizing: border-box;
+
+	&[data-orientation='vertical'] {
+		height: 100%;
+		width: 30px;
+		flex-direction: column;
+	}
+}
+
+.track {
+	--size: 8px;
+	position: relative;
+	height: var(--size);
+	flex-grow: 1;
+	user-select: none;
+	transition: background-color var(--m-duration) var(--m-easing);
+	box-sizing: border-box;
+
+	@apply --mx-bg(transparent);
+	border-radius: var(--m-radius-lg);
+	@apply --mx-ring(--fn-ring(var(--m-color-neutral-ink), 1px));
+
+	&[data-orientation='vertical'] {
+		height: 100%;
+		width: var(--size);
+		flex: 1;
+	}
+}
+
+.range {
+	box-sizing: border-box;
+	transition: background-color var(--m-duration) var(--m-easing);
+	@apply --mx-bg(var(--m-color-main));
+	border-radius: var(--m-radius-lg);
+}
+
+.thumb {
+	--thumb-size: 20px;
+
+	height: var(--thumb-size);
+	width: var(--thumb-size);
+	display: flex;
+	cursor: pointer;
+	align-items: center;
+	justify-content: center;
+	line-height: 1;
+	touch-action: none;
+	transition:
+		background-color var(--m-duration) var(--m-easing),
+		box-shadow var(--m-duration) var(--m-easing);
+
+	@apply --mx-shadow;
+	--mx-shadow-value: var(--m-shadow-sm);
+
+	@apply --mx-borderColor(var(--m-color-neutral-ink));
+	border-width: var(--m-lineWidth-md);
+
+	@apply --mx-bg(var(--m-control-bg));
+	border-radius: var(--m-control-radius);
+
+	&:hover {
+		--mx-shadow-value: var(--m-shadow-md);
+	}
+
+	&:active {
+		@apply --mx-bg(var(--m-color-main-light));
+		--mx-shadow-value: var(--m-shadow-lg);
+		--mx-ring-value: --fn-ring(var(--mx-bg-ref), 4px);
+	}
+
+	&:focus {
+		outline: none;
+	}
+
+	&:focus-visible {
+		@apply --mx-bg(var(--m-color-main-light));
+		--mx-shadow-value: var(--m-shadow-lg);
+		--mx-ring-value: --fn-focus-ring();
+	}
+
+	&:disabled {
+		opacity: 0.5;
+	}
+}

package/dist/components/spinner/Spinner.module.css

@@ -0,0 +1,54 @@
+@keyframes spinner-rotate {
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
+	}
+}
+
+@keyframes spinner-stroke {
+	0% {
+		stroke-dasharray: 1, 200;
+		stroke-dashoffset: 0;
+	}
+	50% {
+		stroke-dasharray: 100, 200;
+		stroke-dashoffset: -15;
+	}
+	100% {
+		stroke-dasharray: 100, 200;
+		stroke-dashoffset: -125;
+	}
+}
+
+.root {
+	display: inline-block;
+	flex-shrink: 0;
+	transform-origin: 50% 50%;
+	animation: spinner-rotate 1400ms linear infinite;
+	@apply --mx-fg(inherit);
+	opacity: 50%;
+}
+
+.svg {
+	display: block;
+}
+
+.circle {
+	stroke: currentColor;
+	stroke-dasharray: 80 200;
+	stroke-dashoffset: 0;
+	animation: spinner-stroke 1400ms ease-in-out infinite;
+}
+
+.fullScreen {
+	width: 100%;
+	display: flex;
+	flex: 1;
+	flex-direction: row;
+	align-items: center;
+	align-self: stretch;
+	justify-content: center;
+	gap: var(--m-space-md);
+}

package/dist/components/splashScreen/SplashScreen.module.css

@@ -0,0 +1,54 @@
+.root {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	display: flex;
+	flex-grow: 1;
+	align-items: center;
+	justify-content: center;
+}
+
+.icon {
+	margin: auto;
+	height: 20vmax;
+	width: 20vmax;
+	animation-name: fade-and-pop;
+	animation-duration: 5s;
+	animation-delay: 1s;
+	animation-timing-function: ease-in-out;
+	animation-iteration-count: infinite;
+	opacity: 0;
+
+	& > img,
+	& > svg {
+		width: 100%;
+		height: 100%;
+	}
+}
+
+@keyframes fade-and-pop {
+	0% {
+		opacity: 0.2;
+		transform: scale(0.6);
+	}
+	40% {
+		opacity: 0.5;
+		transform: scale(0.7);
+	}
+	50% {
+		opacity: 1;
+		transform: scale(1.1) rotate(2deg);
+	}
+	55% {
+		opacity: 1;
+		transform: scale(1);
+	}
+	70% {
+		opacity: 1;
+		transform: scale(1);
+	}
+	100% {
+		opacity: 0.2;
+		transform: scale(0.6);
+	}
+}

package/dist/components/switch/Switch.module.css

@@ -0,0 +1,63 @@
+.root {
+	all: unset;
+	position: relative;
+	height: --fn-literal(20px);
+	width: --fn-literal(42px);
+	display: flex;
+	flex-shrink: 0;
+	cursor: pointer;
+	appearance: none;
+	padding: --fn-literal(3px);
+
+	transition: all var(--m-duration) var(--m-easing);
+
+	@apply --mx-shadow;
+	--mx-shadow-value: inset var(--m-shadow-sm);
+
+	@apply --mx-bg(var(--m-control-bg));
+	@apply --mx-borderColor(var(--m-control-borderColor));
+	border-radius: var(--m-radius-lg);
+
+	&[data-checked] {
+		@apply --mx-bg(var(--m-color-main));
+	}
+
+	@apply --mx-hover;
+	@apply --mx-active;
+	@apply --mx-focus;
+	@apply --mx-disabled;
+}
+
+.thumb {
+	display: block;
+	aspect-ratio: 1/1;
+	height: 100%;
+	transition: transform var(--m-duration) var(--m-easing);
+	will-change: transform;
+
+	@apply --mx-shadow(var(--m-shadow-sm));
+
+	@apply --mx-bg(var(--m-color-neutral-paper));
+	@apply --mx-borderColor(var(--m-control-border));
+	border-radius: var(--m-radius-lg);
+
+	position: relative;
+
+	&[data-checked] {
+		transform: translateX(22px);
+	}
+
+	&[data-checked]::before {
+		position: absolute;
+		left: 0;
+		top: 0;
+		height: 100%;
+		width: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		content: '✓';
+		color: var(--m-color-main-ink);
+		font-size: var(--m-prose-ambient-size);
+	}
+}

package/dist/components/tabs/tabs.module.css

@@ -0,0 +1,139 @@
+.styledList {
+	position: relative;
+	display: flex;
+	flex-direction: row;
+	align-items: flex-start;
+	gap: var(--m-space-xs);
+}
+
+.trigger {
+	position: relative;
+	z-index: 1;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: center;
+	gap: var(--m-space-xs);
+	padding: var(--m-action-padding);
+
+	cursor: pointer;
+	user-select: none;
+	transition: all var(--m-duration) var(--m-easing);
+
+	text-align: center;
+	white-space: nowrap;
+
+	@apply --mx-fg(var(--m-color-neutral-ink));
+	font-size: var(--m-prose-secondary-size);
+	font-weight: var(--m-prose-secondary-weight);
+	line-height: 1;
+	font-family: inherit;
+
+	@apply --mx-shadow;
+
+	min-height: 30px;
+	min-width: 100px;
+	flex-shrink: 0;
+
+	background: transparent;
+	border: var(--m-lineWidth-sm) solid transparent;
+	border-radius: var(--m-radius-lg);
+
+	&[aria-selected='false']:hover {
+		@apply --mx-bg(var(--m-color-neutral-light));
+		--mx-ring-value: --fn-ring(var(--mx-bg-ref), 4px);
+	}
+
+	&:focus {
+		outline: none;
+	}
+
+	&:focus-visible {
+		@apply --mx-bg(var(--m-color-neutral-light));
+		--mx-ring-value: --fn-focus-ring();
+		outline: none;
+	}
+
+	&[data-active] {
+		cursor: default;
+	}
+}
+
+.indicator {
+	position: absolute;
+	left: 0;
+	top: 50%;
+	z-index: 0;
+	display: block;
+	height: 100%;
+	width: var(--active-tab-width);
+	transition-property: transform, width, color;
+	transition-duration: var(--m-duration);
+	transition-timing-function: var(--m-easing);
+	transform: translateX(
+			calc(
+				var(--active-tab-left, 0px) + var(--scroll-area-overflow-x-start, 0px)
+			)
+		)
+		translateY(-50%);
+
+	@apply --mx-action-light;
+}
+
+.content {
+	@apply --mx-shadow;
+	&:focus {
+		outline: none;
+	}
+	&:focus-visible {
+		outline: none;
+		--mx-ring-value: --fn-focus-ring();
+	}
+}
+
+.list {
+	max-width: 100%;
+	width: max-content;
+	overflow: clip;
+
+	@apply --mx-shadow(var(--m-shadow-sm));
+	@apply --mx-surface-ambient;
+	padding: 0;
+	border-radius: var(--m-radius-lg);
+}
+
+.moreLeftIcon {
+	pointer-events: none;
+	position: absolute;
+	left: var(--m-space-xs);
+	top: 50%;
+	z-index: 10;
+	height: --fn-literal(16px);
+	width: --fn-literal(16px);
+	transform: translateY(-50%) rotate(90deg);
+
+	--scroll-area-overflow-x-start: inherit;
+	opacity: calc(
+		round(min(1, calc(var(--scroll-area-overflow-x-start, 0px) / 10px)))
+	);
+
+	@apply --mx-fg(--fn-color-faded(var(--m-color-neutral-heavy), 50%));
+}
+
+.moreRightIcon {
+	pointer-events: none;
+	position: absolute;
+	right: var(--m-space-xs);
+	top: 50%;
+	z-index: 10;
+	height: --fn-literal(16px);
+	width: --fn-literal(16px);
+	transform: translateY(-50%) rotate(-90deg);
+
+	--scroll-area-overflow-x-end: inherit;
+	opacity: calc(
+		round(min(1, calc(var(--scroll-area-overflow-x-end, 0px) / 10px)))
+	);
+
+	@apply --mx-fg(--fn-color-faded(var(--m-color-neutral-heavy), 50%));
+}

package/dist/components/textArea/TextArea.module.css

@@ -0,0 +1,14 @@
+.input {
+	font-family: inherit;
+	overflow: clip;
+	@apply --mx-fg(inherit);
+
+	resize: vertical;
+	&[data-auto-size='true'] {
+		resize: none;
+	}
+}
+
+.border {
+	padding-block-end: var(--m-space-sm);
+}