@a-type/ui 6.0.49 → 6.0.51

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

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

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

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

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

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

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

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

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

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