@a-type/ui 6.1.16 → 6.1.18

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

@@ -24,10 +24,9 @@
 	align-items: stretch;
 	overflow: clip;
 	transition: all var(--m-dur) var(--m-ease);
-	--shadow-dir: 1;
 	@apply --mx-shadow;
-	--mx-shadow-value: 0 calc(var(--shadow-dir, 1) * var(--m-shadow-lg-y))
-		var(--m-shadow-lg-blur) var(--m-shadow-lg-spread) var(--m-shadow-lg-color);
+	--mx-shadow-value: 0 var(--m-shadow-lg-y) var(--m-shadow-lg-blur)
+		var(--m-shadow-lg-spread) var(--m-shadow-lg-color);
 	@apply --mx-bg(var(--m-surface-ambient-bg));
 	@apply --mx-borderColor(var(--m-gray-heavy));
 
@@ -46,55 +45,14 @@
 		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-rd) var(--m-surface-rd) 0 0;
-			border-bottom-width: 0;
-			transform: translate(0, 0);
-			padding-bottom: env(safe-area-inset-bottom);
-			padding-top: var(--m-sp-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));
-			}
-		}
+	&[data-width='lg'] {
+		max-width: 800px;
+	}
+	&[data-width='md'] {
+		max-width: 600px;
+	}
+	&[data-width='sm'] {
+		max-width: 300px;
 	}
 }
 
@@ -110,42 +68,12 @@
 	padding: var(--m-surface-p);
 }
 
-.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-sp-sm);
-	z-index: 1;
-
-	@media (min-width: 600px) {
-		display: none;
-	}
-}
-.swipeHandleBar {
-	height: 4px;
-	width: 100%;
-	@apply --mx-bg(var(--m-gray));
-	border-radius: var(--m-rd-lg);
-}
-
 .close {
 	position: absolute;
 	right: var(--m-sp-sm);
 	top: var(--m-sp-sm);
 	z-index: 101;
 	display: flex;
-
-	&[data-show-on-mobile='false'] {
-		@media (max-width: 600px) {
-			display: none;
-		}
-	}
 }
 
 .title {

package/src/components/dialog/Dialog.stories.tsx

@@ -8,14 +8,7 @@ import { Provider } from '../provider/Provider.js';
 import { Select } from '../select/index.js';
 import { Tooltip } from '../tooltip/Tooltip.js';
 import { H1, P } from '../typography/index.js';
-import {
-	Dialog,
-	DialogActions,
-	DialogClose,
-	DialogContent,
-	DialogTitle,
-	DialogTrigger,
-} from './Dialog.js';
+import { Dialog } from './Dialog.js';
 
 const meta: any = {
 	title: 'Components/Dialog',
@@ -65,10 +58,10 @@ export const Default: Story = {
 	args: {
 		children: (
 			<ParticleLayer noPortal>
-				<DialogTrigger render={<Button />}>Open</DialogTrigger>
+				<Dialog.Trigger render={<Button />}>Open</Dialog.Trigger>
 				<DummyContent />
-				<DialogContent>
-					<DialogTitle>Hello world</DialogTitle>
+				<Dialog.Content>
+					<Dialog.Title>Hello world</Dialog.Title>
 					<DummyContent />
 					<DummyContent />
 					<DummyContent />
@@ -76,11 +69,11 @@ export const Default: Story = {
 						<Input placeholder="Type something..." />
 						<Button emphasis="primary">Submit</Button>
 					</Box>
-					<DialogActions>
-						<DialogClose />
+					<Dialog.Actions>
+						<Dialog.Close />
 						<Button emphasis="primary">Accept</Button>
-					</DialogActions>
-				</DialogContent>
+					</Dialog.Actions>
+				</Dialog.Content>
 			</ParticleLayer>
 		),
 	},
@@ -90,15 +83,15 @@ export const Small: Story = {
 	args: {
 		children: (
 			<ParticleLayer noPortal>
-				<DialogTrigger render={<Button />}>Open</DialogTrigger>
+				<Dialog.Trigger render={<Button />}>Open</Dialog.Trigger>
 				<DummyContent />
-				<DialogContent>
-					<DialogTitle>Hello world</DialogTitle>
+				<Dialog.Content>
+					<Dialog.Title>Hello world</Dialog.Title>
 					<DummyContent />
-					<DialogActions>
-						<DialogClose />
-					</DialogActions>
-				</DialogContent>
+					<Dialog.Actions>
+						<Dialog.Close />
+					</Dialog.Actions>
+				</Dialog.Content>
 			</ParticleLayer>
 		),
 	},
@@ -106,16 +99,17 @@ export const Small: Story = {
 
 export const NoSheet: Story = {
 	args: {
+		disableSheet: true,
 		children: (
 			<ParticleLayer noPortal>
-				<DialogTrigger render={<Button />}>Open</DialogTrigger>
+				<Dialog.Trigger render={<Button />}>Open</Dialog.Trigger>
 				<DummyContent />
-				<DialogContent disableSheet>
-					<DialogTitle>Hello world</DialogTitle>
-					<DialogActions>
-						<DialogClose />
-					</DialogActions>
-				</DialogContent>
+				<Dialog.Content>
+					<Dialog.Title>Hello world</Dialog.Title>
+					<Dialog.Actions>
+						<Dialog.Close />
+					</Dialog.Actions>
+				</Dialog.Content>
 			</ParticleLayer>
 		),
 	},
@@ -125,14 +119,14 @@ export const Positioned: Story = {
 	args: {
 		children: (
 			<ParticleLayer noPortal>
-				<DialogTrigger render={<Button />}>Open</DialogTrigger>
+				<Dialog.Trigger render={<Button />}>Open</Dialog.Trigger>
 				<DummyContent />
-				<DialogContent style={{ bottom: 0, top: 'auto' }}>
-					<DialogTitle>Hello world</DialogTitle>
-					<DialogActions>
-						<DialogClose />
-					</DialogActions>
-				</DialogContent>
+				<Dialog.Content style={{ bottom: 0, top: 'auto' }}>
+					<Dialog.Title>Hello world</Dialog.Title>
+					<Dialog.Actions>
+						<Dialog.Close />
+					</Dialog.Actions>
+				</Dialog.Content>
 			</ParticleLayer>
 		),
 	},
@@ -156,18 +150,18 @@ export const VirtualKeyboard: Story = {
 		return (
 			<Provider virtualKeyboardBehavior="overlay">
 				<Dialog>
-					<DialogTrigger render={<Button />}>Open</DialogTrigger>
+					<Dialog.Trigger render={<Button />}>Open</Dialog.Trigger>
 					<DummyContent />
-					<DialogContent>
-						<DialogTitle>Hello world</DialogTitle>
+					<Dialog.Content>
+						<Dialog.Title>Hello world</Dialog.Title>
 						<Input />
-						<DialogActions>
-							<DialogClose />
+						<Dialog.Actions>
+							<Dialog.Close />
 							<Button onClick={() => setKeyboard((v) => !v)}>
 								Toggle fake kb
 							</Button>
-						</DialogActions>
-					</DialogContent>
+						</Dialog.Actions>
+					</Dialog.Content>
 				</Dialog>
 				<div
 					className="bg-neutral-ink"
@@ -190,9 +184,9 @@ export const MultiNested: Story = {
 	render() {
 		return (
 			<Dialog>
-				<DialogTrigger render={<Button />}>Open</DialogTrigger>
-				<DialogContent>
-					<DialogTitle>Hello world</DialogTitle>
+				<Dialog.Trigger render={<Button />}>Open</Dialog.Trigger>
+				<Dialog.Content>
+					<Dialog.Title>Hello world</Dialog.Title>
 					<DummyContent />
 					<Select value="">
 						<Select.Trigger>
@@ -206,17 +200,17 @@ export const MultiNested: Story = {
 						</Select.Content>
 					</Select>
 					<Dialog>
-						<DialogTrigger render={<Button />}>Open nested</DialogTrigger>
-						<DialogContent>
-							<DialogTitle>Nested dialog</DialogTitle>
+						<Dialog.Trigger render={<Button />}>Open nested</Dialog.Trigger>
+						<Dialog.Content>
+							<Dialog.Title>Nested dialog</Dialog.Title>
 							<Tooltip content="This is a tooltip">
 								<Button>Hover me</Button>
 							</Tooltip>
 							<DummyContent />
 							<DummyContent />
-						</DialogContent>
+						</Dialog.Content>
 					</Dialog>
-				</DialogContent>
+				</Dialog.Content>
 			</Dialog>
 		);
 	},