@a-type/ui 5.0.22 → 6.0.0

package/src/components/datePicker/Calendar.module.css

@@ -0,0 +1,167 @@
+.monthRow {
+	width: 100%;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.monthLabel {
+	min-width: 0;
+	align-self: center;
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	text-align: center;
+	font-size: var(--m-text-ambient-size);
+	font-weight: bold;
+}
+
+.monthButton {
+	align-self: center;
+}
+
+.calendarGridRoot {
+	display: grid;
+	grid-template-columns: repeat(7, var(--day-size, 32px));
+	grid-auto-rows: var(--day-size, 32px);
+	overflow: hidden;
+	padding: var(--m-spacing-sm);
+	border-radius: var(--m-radius-sm);
+}
+
+.dayLabel {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: var(--m-text-ambient-size);
+	@apply --mx-fg(var(--m-color-neutral-heavy));
+}
+
+.calendarDay {
+	position: relative;
+	margin-bottom: --fn-literal(-1px);
+	margin-right: --fn-literal(-1px);
+
+	@apply --mx-fg(var(--m-color-neutral-ink));
+	@apply --mx-bg(var(--m-color-neutral-paper));
+	@apply --mx-borderColor(transparent);
+
+	display: flex;
+	cursor: pointer;
+	align-items: center;
+	justify-content: center;
+	transition: all var(--m-duration) var(--m-easing);
+
+	@apply --mx-shadow;
+	--mx-shadow-value: var(--m-shadow-sm);
+
+	&[data-highlighted] {
+		z-index: 1;
+		outline: none;
+		--mx-ring-value: --fn-ring(var(--m-color-main-heavy), 2px);
+	}
+
+	&[data-selected] {
+		z-index: 2;
+		@apply --mx-bg(var(--m-color-main));
+		border-radius: var(--m-radius-sm);
+	}
+
+	&[data-in-range] {
+		z-index: 1;
+		border-radius: 0;
+		@apply --mx-bg(var(--m-color-main-light));
+		--mx-shadow-value: 0 0 0 0 transparent;
+	}
+
+	&[data-disabled='true'] {
+		cursor: not-allowed;
+		opacity: 0.5;
+	}
+
+	/* Today indicator dot */
+	&[data-today]::before {
+		content: '';
+		position: absolute;
+		left: --fn-literal(1px);
+		top: --fn-literal(1px);
+		width: --fn-literal(6px);
+		height: --fn-literal(6px);
+		background-color: var(--m-color-palette-attention);
+		border-radius: var(--m-radius-lg);
+		border: 1px solid var(--m-color-neutral-ink);
+	}
+
+	/* Calendar grid edge borders */
+	&[data-top-edge] {
+		border-top-color: var(--m-color-neutral);
+		border-top-left-radius: 0;
+		border-top-right-radius: 0;
+	}
+	&[data-bottom-edge] {
+		border-bottom-color: var(--m-color-neutral);
+		border-bottom-left-radius: 0;
+		border-bottom-right-radius: 0;
+	}
+	&[data-first-column] {
+		border-left-color: var(--m-color-neutral);
+		border-top-left-radius: 0;
+		border-bottom-left-radius: 0;
+	}
+	&[data-last-column] {
+		border-right-color: var(--m-color-neutral);
+		border-top-right-radius: 0;
+		border-bottom-right-radius: 0;
+	}
+	&[data-day-first] {
+		border-left-color: var(--m-color-neutral);
+		border-top-left-radius: var(--m-radius-sm);
+	}
+	&[data-day-last] {
+		border-right-color: var(--m-color-neutral);
+		border-bottom-right-radius: var(--m-radius-sm);
+		border-top-right-radius: 0;
+	}
+	&[data-first-column][data-bottom-edge] {
+		border-bottom-left-radius: var(--m-radius-sm);
+	}
+	&[data-last-column][data-bottom-edge] {
+		border-bottom-right-radius: var(--m-radius-sm);
+	}
+	&[data-first-column][data-top-edge] {
+		border-top-left-radius: var(--m-radius-sm);
+	}
+	&[data-last-column][data-top-edge] {
+		border-top-right-radius: var(--m-radius-sm);
+	}
+
+	&[data-range-end] {
+		z-index: 1;
+		@apply --mx-bg(var(--m-color-main));
+		border-radius: 0 var(--m-radius-sm) var(--m-radius-sm) 0;
+		--mx-shadow-value: 0 0 0 0 transparent;
+	}
+
+	&[data-range-start] {
+		z-index: 1;
+		@apply --mx-bg(var(--m-color-main));
+		/* tl tr br bl */
+		border-radius: var(--m-radius-sm) 0 0 var(--m-radius-sm);
+	}
+
+	&[data-different-month] {
+		visibility: hidden;
+	}
+
+	&:hover {
+		z-index: 100;
+		outline: none;
+		--mx-ring-value: --fn-ring(var(--m-color-main-heavy), 2px);
+	}
+
+	&:active {
+		@apply --mx-bg(var(--m-color-main-light));
+		border-radius: var(--m-radius-sm);
+	}
+}

package/src/components/datePicker/Calendar.tsx

@@ -3,31 +3,20 @@ import {
 	CalendarDays,
 	CalendarDaysProps,
 } from 'calendar-blocks';
-import { withClassName } from '../../hooks.js';
+import React from 'react';
+import { withClassName } from '../../hooks/withClassName.js';
 import { Button } from '../button/index.js';
+import styles from './Calendar.module.css';
 
-export const MonthRow = withClassName(
-	'div',
-	'layer-components:(w-full flex flex-row items-center justify-between)',
-);
+export const MonthRow = withClassName('div', styles.monthRow);
 
-export const MonthLabel = withClassName(
-	'span',
-	'layer-components:(min-w-0 self-center overflow-hidden text-ellipsis text-center text-sm font-bold)',
-);
+export const MonthLabel = withClassName('span', styles.monthLabel);
 
-export const MonthButton = withClassName(Button, 'self-center');
+export const MonthButton = withClassName(Button, styles.monthButton);
 
-export const CalendarGridRoot = withClassName(
-	'div',
-	'layer-components:([grid-auto-rows:var(--day-size,32px)] grid grid-cols-[repeat(7,var(--day-size,32px))])',
-	'layer-components:height-[calc(var(--day-size,32px)*7)] layer-components:(overflow-hidden rounded p-2)',
-);
+export const CalendarGridRoot = withClassName('div', styles.calendarGridRoot);
 
-export const DayLabel = withClassName(
-	'div',
-	'layer-components:(flex items-center justify-center text-sm color-gray-dark)',
-);
+export const DayLabel = withClassName('div', styles.dayLabel);
 
 export const DayLabels = () => (
 	<>
@@ -43,40 +32,15 @@ export const DayLabels = () => (
 
 export function CalendarGrid({
 	className,
+	style,
 	...props
-}: CalendarDaysProps & { className?: string }) {
+}: CalendarDaysProps & { className?: string; style?: React.CSSProperties }) {
 	return (
-		<CalendarGridRoot className={className}>
+		<CalendarGridRoot className={className} style={style}>
 			<DayLabels />
 			<CalendarDays {...props} />
 		</CalendarGridRoot>
 	);
 }
 
-export const CalendarDay = withClassName(
-	BaseCalendarDay,
-	'layer-components:(relative mb--1px mr--1px border border-solid color-black bg-white border-transparent)',
-	'layer-components:(flex cursor-pointer items-center justify-center transition)',
-	'layer-components:data-[highlighted]:(z-1 outline-none ring-2 ring-focus)',
-	'layer-components:hover:ouline-none layer-components:hover:(z-1 ring-2 ring-focus)',
-	'layer-components:active:(rounded bg-main-light)',
-	'layer-components:[&[data-selected]]:(z-2 rounded bg-main)',
-	'layer-components:[&[data-in-range]]:(z-1 rounded-none bg-main-light)',
-	'layer-components:[&[data-range-start]]:(z-1 rounded-l rounded-r-none bg-main)',
-	'layer-components:[&[data-range-end]]:(z-1 rounded-l-none rounded-r bg-main)',
-	'layer-components:[&[data-disabled=true]]:(cursor-not-allowed opacity-50)',
-	// today dot
-	"layer-components:[&[data-today]]:before:(absolute left-[1px] top-[1px] h-[6px] w-[6px] border-1 rounded-lg border-solid content-[''] bg-attention border-black)",
-	// calendar edges
-	'layer-components:[&[data-top-edge]]:(border-t-gray)',
-	'layer-components:[&[data-bottom-edge]]:(border-b-gray)',
-	'layer-components:[&[data-first-column]]:(border-l-gray)',
-	'layer-components:[&[data-last-column]]:(border-r-gray)',
-	'layer-components:[&[data-day-first]]:(rounded-tl border-l-gray)',
-	'layer-components:[&[data-day-last]]:(rounded-br border-r-gray)',
-	'layer-components:[&[data-first-column][data-bottom-edge]]:rounded-bl',
-	'layer-components:[&[data-last-column][data-bottom-edge]]:rounded-br',
-	'layer-components:[&[data-first-column][data-top-edge]]:rounded-tl',
-	'layer-components:[&[data-last-column][data-top-edge]]:rounded-tr',
-	'layer-components:[&[data-different-month]]:[visibility:hidden]',
-);
+export const CalendarDay = withClassName(BaseCalendarDay, styles.calendarDay);

package/src/components/datePicker/DatePicker.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { CalendarDayValue } from 'calendar-blocks';
 import { useEffect, useState } from 'react';
 import { Spinner } from '../spinner/Spinner.js';

package/src/components/datePicker/DatePicker.tsx

@@ -1,7 +1,6 @@
 import { Calendar, CalendarDays, useCalendarContext } from 'calendar-blocks';
 import { clsx } from 'clsx';
 import { ReactNode, useState } from 'react';
-import { PaletteName } from '../../uno/index.js';
 import { Icon } from '../icon/index.js';
 import {
 	CalendarDay,
@@ -11,6 +10,7 @@ import {
 	MonthLabel,
 	MonthRow,
 } from './Calendar.js';
+import styles from './datePicker.module.css';
 
 function DatePickerMonthControls() {
 	const { setDisplayInfo, month, year } = useCalendarContext();
@@ -50,7 +50,6 @@ function DatePickerMonthControls() {
 
 function DatePickerRoot({
 	className,
-	color,
 	value,
 	onChange,
 	children,
@@ -64,14 +63,7 @@ function DatePickerRoot({
 	}));
 
 	return (
-		<div
-			className={clsx(
-				color && `palette-${color}`,
-				'layer-components:(w-[calc(var(--day-size,32px)*7)] flex flex-col items-center justify-center)',
-				className,
-			)}
-			{...rest}
-		>
+		<div className={clsx(styles.root, className)} {...rest}>
 			<Calendar
 				displayMonth={month}
 				displayYear={year}
@@ -89,7 +81,6 @@ export interface DatePickerProps {
 	value: Date | null;
 	onChange: (date: Date | null) => void;
 	className?: string;
-	color?: PaletteName;
 }
 
 function DatePickerDefault(props: DatePickerProps) {

package/src/components/datePicker/DateRangePicker.tsx

@@ -1,8 +1,6 @@
 import { Calendar, CalendarDays, useCalendarContext } from 'calendar-blocks';
 import clsx from 'clsx';
-import { ReactNode, useCallback, useState } from 'react';
-import { withClassName } from '../../hooks.js';
-import { PaletteName } from '../../uno/index.js';
+import { CSSProperties, ReactNode, useCallback, useState } from 'react';
 import { Icon } from '../icon/Icon.js';
 import {
 	CalendarDay,
@@ -11,13 +9,7 @@ import {
 	MonthButton,
 	MonthLabel,
 } from './Calendar.js';
-
-const RangeLayout = withClassName(
-	'div',
-	'layer-components:(grid grid-cols-[auto_1fr_auto] grid-areas-[prevMonth_leftMonth_nextMonth]-[leftGrid_leftGrid_leftGrid])',
-	'layer-components:(grid-rows-[auto_1fr] gap-2)',
-	'sm:grid-cols-[auto_1fr_1fr_auto] layer-components:sm:grid-areas-[prevMonth_leftMonth_rightMonth_nextMonth]-[leftGrid_leftGrid_rightGrid_rightGrid]',
-);
+import styles from './dateRangePicker.module.css';
 
 function DateRangePickerMonthControls() {
 	const { setDisplayInfo, month, year } = useCalendarContext();
@@ -34,7 +26,7 @@ function DateRangePickerMonthControls() {
 		<>
 			<MonthButton
 				emphasis="ghost"
-				className="[grid-area:prevMonth]"
+				style={{ gridArea: 'prevMonth' }}
 				onClick={() =>
 					setDisplayInfo({
 						month: month - 1,
@@ -44,13 +36,13 @@ function DateRangePickerMonthControls() {
 			>
 				<Icon name="arrowLeft" />
 			</MonthButton>
-			<MonthLabel className="[grid-area:leftMonth]">{monthLabel}</MonthLabel>
-			<MonthLabel className="[grid-area:rightMonth] !hidden !sm:block">
+			<MonthLabel style={{ gridArea: 'leftMonth' }}>{monthLabel}</MonthLabel>
+			<MonthLabel style={{ gridArea: 'rightMonth' }} className={styles.smOnly}>
 				{nextMonthLabel}
 			</MonthLabel>
 			<MonthButton
 				emphasis="ghost"
-				className="[grid-area:nextMonth]"
+				style={{ gridArea: 'nextMonth' }}
 				onClick={() =>
 					setDisplayInfo({
 						month: month + 1,
@@ -66,7 +58,6 @@ function DateRangePickerMonthControls() {
 
 function DateRangePickerRoot({
 	children,
-	color,
 	value,
 	onChange,
 	className,
@@ -81,21 +72,10 @@ function DateRangePickerRoot({
 
 	const onDisplayChange = useCallback(
 		({ month: newMonth, year: newYear }: { month: number; year: number }) => {
-			/**
-			 * Important UX consideration:
-			 *
-			 * since we are displaying 2 months at once, we don't
-			 * always want to change our view if the user's cursor
-			 * date moves from one month to another. Specifically,
-			 * if they move from the first visible month to the
-			 * second visible month, we don't need to change the view,
-			 * since they are still within the visible range.
-			 * So, we write logic to ignore that case!
-			 */
+			// Ignore movement from the first to the second visible month
 			if (newMonth === month + 1 && newYear === year) {
-				return; // ignore movement from the first to the second frame
+				return;
 			}
-
 			setDisplay({
 				month: newMonth,
 				year: newYear,
@@ -111,14 +91,10 @@ function DateRangePickerRoot({
 			rangeValue={value}
 			onRangeChange={(range) => onChange(range)}
 			onDisplayChange={onDisplayChange}
-			className={clsx(
-				'layer-components:(flex justify-center)',
-				color && `palette-${color}`,
-				className,
-			)}
+			className={clsx(styles.root, className)}
 			{...rest}
 		>
-			<RangeLayout>{children}</RangeLayout>
+			<div className={styles.rangeLayout}>{children}</div>
 		</Calendar>
 	);
 }
@@ -127,18 +103,19 @@ export interface DateRangePickerProps {
 	value: { start: Date | null; end: Date | null };
 	onChange: (value: { start: Date | null; end: Date | null }) => void;
 	className?: string;
-	color?: PaletteName;
+	style?: CSSProperties;
 }
 
 function DateRangePickerBase(props: DateRangePickerProps) {
 	return (
 		<DateRangePickerRoot {...props}>
 			<DateRangePickerMonthControls />
-			<CalendarGrid className="[grid-area:leftGrid]">
+			<CalendarGrid style={{ gridArea: 'leftGrid' }}>
 				{(value) => <CalendarDay value={value} key={value.key} />}
 			</CalendarGrid>
 			<CalendarGrid
-				className="[grid-area:rightGrid] !hidden !sm:grid"
+				style={{ gridArea: 'rightGrid' }}
+				className={styles.smOnlyGrid}
 				monthOffset={1}
 			>
 				{(value) => <CalendarDay value={value} key={value.key} />}
@@ -149,7 +126,9 @@ function DateRangePickerBase(props: DateRangePickerProps) {
 
 export const DateRangePicker = Object.assign(DateRangePickerBase, {
 	Root: DateRangePickerRoot,
-	RangeLayout,
+	RangeLayout: ({ children }: { children?: ReactNode }) => (
+		<div className={styles.rangeLayout}>{children}</div>
+	),
 	DayLabels,
 	CalendarDay,
 	Calendar,

package/src/components/datePicker/datePicker.module.css

@@ -0,0 +1,7 @@
+.root {
+	width: --fn-literal(calc(var(--day-size, 32px) * 7));
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+}

package/src/components/datePicker/dateRangePicker.module.css

@@ -0,0 +1,38 @@
+.root {
+	display: flex;
+	justify-content: center;
+}
+
+.rangeLayout {
+	display: grid;
+	grid-template-columns: auto 1fr auto;
+	grid-template-areas:
+		'prevMonth leftMonth nextMonth'
+		'leftGrid leftGrid leftGrid';
+	grid-template-rows: auto 1fr;
+	gap: var(--m-spacing-sm);
+
+	@media (min-width: 640px) {
+		grid-template-columns: auto 1fr 1fr auto;
+		grid-template-areas:
+			'prevMonth leftMonth rightMonth nextMonth'
+			'leftGrid leftGrid rightGrid rightGrid';
+	}
+}
+
+/* Elements only visible at sm+ breakpoint */
+.smOnly {
+	display: none;
+
+	@media (min-width: 640px) {
+		display: block;
+	}
+}
+
+.smOnlyGrid {
+	display: none;
+
+	@media (min-width: 640px) {
+		display: grid;
+	}
+}

package/src/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-spacing-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-spacing-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-spacing-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-spacing-sm);
+	top: var(--m-spacing-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-text-primary-size);
+	font-weight: var(--m-text-primary-weight);
+	line-height: var(--m-text-primary-lineHeight);
+	margin-block-end: var(--m-spacing-xs);
+	margin-block-start: 0;
+}
+
+.description {
+	@apply --mx-fg(var(--m-color-neutral-heavy));
+	font-size: var(--m-text-ambient-size);
+	line-height: var(--m-text-ambient-lineHeight);
+	margin: 0;
+	margin-block-end: var(--m-spacing-xs);
+}
+
+.actions {
+	position: sticky;
+	bottom: var(--m-spacing-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-spacing-md);
+	gap: var(--m-spacing-sm);
+	border-radius: var(--m-surface-radius);
+}