@a-type/ui 0.3.1 → 0.3.3

package/src/components/collapsible/Collapsible.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { withClassName } from '../../hooks/withClassName.js';
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+
+export const CollapsibleRoot = CollapsiblePrimitive.Root;
+const CollapsibleContentBase = withClassName(
+	CollapsiblePrimitive.Content,
+	'overflow-hidden animate-forwards',
+	'layer-components:[&[data-state=open]]:(animate-radix-collapsible-open-vertical animate-duration-300 animate-ease-springy) layer-components:[&[data-state=closed]]:(animate-radix-collapsible-close-vertical animate-duration-300 animate-ease-springy)',
+	'layer-variants:[&[data-horizontal][data-state=open]]:(animate-radix-collapsible-open-horizontal animate-duration-300 animate-ease-springy) layer-variants:[&[data-horizontal][data-state=closed]]:(animate-radix-collapsible-close-horizontal animate-duration-300 animate-ease-springy)',
+	'layer-variants:[&[data-both][data-state=open]]:(animate-radix-collapsible-open-both animate-duration-300 animate-ease-springy) layer-variants:[&[data-both][data-state=closed]]:(animate-radix-collapsible-close-both animate-duration-300 animate-ease-springy)',
+);
+// specifically removing className... it's causing problems?
+export const CollapsibleContent = forwardRef<
+	HTMLDivElement,
+	CollapsiblePrimitive.CollapsibleContentProps & {
+		horizontal?: boolean;
+		both?: boolean;
+	}
+>(function CollapsibleContent({ horizontal, both, ...props }, ref) {
+	return (
+		<CollapsibleContentBase
+			data-horizontal={horizontal}
+			data-both={both}
+			{...props}
+			ref={ref}
+		/>
+	);
+});
+export const CollapsibleTrigger = CollapsiblePrimitive.Trigger;
+
+export const CollapsibleSimple = ({
+	horizontal,
+	both,
+	children,
+	...props
+}: CollapsiblePrimitive.CollapsibleProps & {
+	horizontal?: boolean;
+	both?: boolean;
+}) => (
+	<CollapsibleRoot {...props}>
+		<CollapsibleContent horizontal={horizontal} both={both}>
+			{children}
+		</CollapsibleContent>
+	</CollapsibleRoot>
+);

package/src/components/collapsible/index.ts

@@ -0,0 +1 @@
+export * from './Collapsible.js';

package/src/components/collapsible.ts

@@ -0,0 +1 @@
+export * from './collapsible/index.js';

package/src/components/colorPicker/ColorPicker.tsx

@@ -0,0 +1,82 @@
+'use client';
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../select/Select.js';
+import classNames from 'classnames';
+import { ReactNode } from 'react';
+import { withClassName } from '../../hooks/withClassName.js';
+
+export type ThemeName = 'lemon' | 'tomato' | 'leek' | 'blueberry' | 'eggplant';
+
+export interface ColorPickerProps {
+  value: ThemeName | null;
+  onChange: (value: ThemeName) => void;
+}
+
+export function ColorPicker({ value, onChange }: ColorPickerProps) {
+  const resolvedValue = [
+    'lemon',
+    'tomato',
+    'leek',
+    'blueberry',
+    'eggplant',
+  ].includes(value || '')
+    ? (value as ThemeName)
+    : 'lemon';
+
+  return (
+    <Select value={resolvedValue} onValueChange={onChange}>
+      <SelectTrigger>
+        <SelectValue />
+      </SelectTrigger>
+      <SelectContent className="z-[calc(var(--z-dialog)+1)]">
+        <SelectItem value="lemon">
+          <ColorSwatch value="lemon" />
+          <ItemLabel>Lemon</ItemLabel>
+        </SelectItem>
+        <SelectItem value="tomato">
+          <ColorSwatch value="tomato" />
+          <ItemLabel>Tomato</ItemLabel>
+        </SelectItem>
+        <SelectItem value="leek">
+          <ColorSwatch value="leek" />
+          <ItemLabel>Leek</ItemLabel>
+        </SelectItem>
+        <SelectItem value="blueberry">
+          <ColorSwatch value="blueberry" />
+          <ItemLabel>Blueberry</ItemLabel>
+        </SelectItem>
+        <SelectItem value="eggplant">
+          <ColorSwatch value="eggplant" />
+          <ItemLabel>Eggplant</ItemLabel>
+        </SelectItem>
+      </SelectContent>
+    </Select>
+  );
+}
+
+const ItemLabel = withClassName('span', 'display-none');
+
+export function ColorSwatch({
+  value,
+  children,
+}: {
+  value: ThemeName;
+  children?: ReactNode;
+}) {
+  return (
+    <div
+      className={classNames(
+        'bg-primary w-16px h-16px rounded-sm',
+        `theme-${value ?? 'lemon'}`,
+      )}
+    >
+      {children}
+    </div>
+  );
+}

package/src/components/colorPicker/index.ts

@@ -0,0 +1 @@
+export * from './ColorPicker.js';

package/src/components/colorPicker.ts

@@ -0,0 +1 @@
+export * from './colorPicker/index.js';

package/src/components/contextMenu/contextMenu.tsx

@@ -0,0 +1,43 @@
+import * as ContextMenu from '@radix-ui/react-context-menu';
+import { ComponentPropsWithoutRef, forwardRef } from 'react';
+import { withClassName } from '../../hooks/withClassName.js';
+import classNames from 'classnames';
+
+export const ContextMenuRoot = ContextMenu.Root;
+
+export const ContextMenuContent = forwardRef<
+	HTMLDivElement,
+	ComponentPropsWithoutRef<typeof ContextMenu.Content>
+>(function Content({ className, onClick, ...props }, ref) {
+	return (
+		<ContextMenu.Portal>
+			<ContextMenu.Content
+				className={classNames(
+					'layer-components:(min-w-120px bg-white rounded-md border-default overflow-hidden p-2 shadow-md z-menu)',
+					'layer-components:transform-origin-[var(--radix-context-menu-transform-origin)]',
+					'layer-components:[&[data-state=open]]:animate-popover-in',
+					'layer-components:[&[data-state=closed]]:animate-popover-out',
+					'layer-components:(max-h-[var(--radix-context-menu-content-available-height)] overflow-y-auto)',
+					'important:motion-reduce:animate-none',
+					className,
+				)}
+				onClick={(ev) => {
+					ev.stopPropagation();
+					onClick?.(ev);
+				}}
+				ref={ref}
+				{...props}
+			/>
+		</ContextMenu.Portal>
+	);
+});
+
+export const ContextMenuArrow = withClassName(ContextMenu.Arrow, 'fill-white');
+
+export const ContextMenuItem = withClassName(
+	ContextMenu.Item,
+	'flex items-center py-1 px-2 relative pl-25px select-none outline-none cursor-pointer',
+	'hover:bg-gray2 [&[data-highlighted=true]]:bg-gray2 [&[data-disabled=true]]:(opacity-50 cursor-default) disabled:(opacity-50 cursor-default)',
+);
+
+export const ContextMenuTrigger = withClassName(ContextMenu.Trigger, '');

package/src/components/contextMenu.ts

@@ -0,0 +1 @@
+export * from './contextMenu/contextMenu.js';

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

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+	Dialog,
+	DialogContent,
+	DialogTrigger,
+	DialogActions,
+	DialogClose,
+	DialogTitle,
+} from './Dialog.js';
+
+const meta = {
+	title: 'Dialog',
+	component: Dialog,
+	argTypes: {},
+	parameters: {
+		controls: { expanded: true },
+	},
+} satisfies Meta<typeof Dialog>;
+
+export default meta;
+
+type Story = StoryObj<typeof Dialog>;
+
+export const Default: Story = {
+	args: {
+		children: (
+			<>
+				<DialogTrigger>Open</DialogTrigger>
+				<DialogContent>
+					<DialogTitle>Hello world</DialogTitle>
+					<DialogActions>
+						<DialogClose>Close</DialogClose>
+					</DialogActions>
+				</DialogContent>
+			</>
+		),
+	},
+};

package/src/components/dialog/Dialog.tsx

@@ -0,0 +1,267 @@
+'use client';
+
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import {
+	ComponentPropsWithoutRef,
+	createContext,
+	forwardRef,
+	useCallback,
+	useContext,
+	useRef,
+	useState,
+} from 'react';
+import { withClassName } from '../../hooks/withClassName.js';
+import useMergedRef from '../../hooks/useMergedRef.js';
+import { useParticles } from '../particles.js';
+import classNames from 'classnames';
+import { CheckIcon, ChevronDownIcon } from '@radix-ui/react-icons';
+import { selectTriggerClassName } from '../select.js';
+import { useDrag } from '@use-gesture/react';
+
+const StyledOverlay = withClassName(
+	DialogPrimitive.Overlay,
+	'layer-components(bg-overlay fixed inset-0 z-dialog-backdrop animate-fade-in animate-duration-200)',
+	'layer-components:[&[data-state=closed]]:animate-fade-out',
+	'motion-reduce:animate-none',
+);
+
+const StyledContent = withClassName(
+	DialogPrimitive.Content,
+	'layer-components:(translate-0 z-dialog fixed bottom-[calc(var(--viewport-bottom-offset,0px)+var(--gesture-y,0px))] left-0 right-0 h-min-content max-h-[calc(0.85*var(--viewport-height,100vh))])',
+	'transform-gpu',
+	'animate-ease-out',
+	'layer-components:(shadow-xl bg-white rounded-tl-xl rounded-tr-xl p-6 pt-8 border-default border-b-0 overflow-y-auto flex flex-col pb-[calc(3rem+env(safe-area-inset-bottom,0px))])',
+	'animate-fade-in-up-big animate-duration-200 [&[data-state=closed]]:animate-fade-out-down-big animate-ease-in motion-reduce:animate-none',
+	'layer-components:sm:(left-50% top-50% translate-[-50%] w-90vw max-w-450px max-h-85vh pb-6 rounded-lg border-b-1 pt-6)',
+	'sm:(animate-dialog-in [&[data-state=closed]]:animate-dialog-out motion-reduce:animate-none)',
+);
+
+export const Content = forwardRef<
+	HTMLDivElement,
+	ComponentPropsWithoutRef<typeof StyledContent> & {
+		outerClassName?: string;
+		width?: 'lg' | 'md' | 'sm';
+	}
+>(function Content(
+	{ children, width, outerClassName, className, ...props },
+	ref,
+) {
+	const particles = useParticles();
+	const wasOpenRef = useRef(false);
+	const openRef = useCallback(
+		(element: HTMLDivElement | null) => {
+			if (
+				!wasOpenRef.current &&
+				element?.getAttribute('data-state') === 'open'
+			) {
+				wasOpenRef.current = true;
+
+				const matchesSmall = !window.matchMedia('(min-width:600px)').matches;
+				if (!matchesSmall) return;
+
+				setTimeout(() => {
+					particles?.addParticles(
+						particles.elementExplosion({
+							count: 20,
+							borders: ['top'],
+							color: [
+								{
+									space: 'rgb',
+									values: [0, 0, 0],
+									opacity: 0.02,
+								},
+								{
+									space: 'rgb',
+									values: [0, 0, 0],
+									opacity: 0,
+								},
+							],
+							element,
+							startRadius: 15,
+							endRadius: 0,
+							lifespan: 1000,
+							force: 0.5,
+							drag: 0.01,
+							forceFuzz: 0.5,
+							angleFuzz: 0.1,
+						}),
+					);
+				}, 180);
+			} else if (element?.getAttribute('data-state') === 'closed') {
+				wasOpenRef.current = false;
+			}
+		},
+		[particles],
+	);
+
+	const gestureRef = useRef<HTMLDivElement>(null);
+
+	const finalRef = useMergedRef(ref, openRef, gestureRef);
+
+	return (
+		<DialogPrimitive.Portal>
+			<StyledOverlay />
+			<StyledContent
+				data-dialog-content
+				ref={finalRef}
+				{...props}
+				className={classNames(
+					{
+						'md:max-w-800px': width === 'lg',
+						'max-w-600px': width === 'md',
+						'max-w-300px': width === 'sm',
+					},
+					outerClassName || className,
+				)}
+			>
+				<DialogSwipeHandle />
+				{children}
+			</StyledContent>
+		</DialogPrimitive.Portal>
+	);
+});
+
+export const DialogSwipeHandle = forwardRef<
+	HTMLDivElement,
+	ComponentPropsWithoutRef<'div'>
+>(function DialogSwipeHandle({ className, ...props }, ref) {
+	const close = useContext(DialogCloseContext);
+	const innerRef = useRef<HTMLDivElement>(null);
+	useDrag(
+		({ swipe: [, swipeY], movement: [, dy], velocity: [, vy], last }) => {
+			const content = findParentDialogContent(innerRef.current);
+			if (!content) return;
+
+			const contentHeight = content.clientHeight;
+
+			if (last) console.log(swipeY, dy, contentHeight);
+
+			if (last && (swipeY === 1 || dy > contentHeight / 2)) {
+				console.log('close');
+				close();
+			}
+			const gestureY = last ? 0 : -Math.max(0, dy);
+			content.style.setProperty('--gesture-y', `${gestureY}px`);
+			content.style.setProperty('transition', last ? 'bottom 0.2s' : '');
+		},
+		{
+			target: innerRef,
+			axis: 'y',
+		},
+	);
+	const finalRef = useMergedRef(ref, innerRef);
+	return (
+		<div
+			ref={finalRef}
+			{...props}
+			className={classNames(
+				'absolute top-0 left-50% transform-gpu -translate-x-1/2 w-20% py-2 rounded-full cursor-grab sm:display-none touch-none',
+				className,
+			)}
+		>
+			<div className="w-full h-[4px] bg-gray-4 rounded-full" />
+		</div>
+	);
+});
+
+function findParentDialogContent(
+	element: HTMLElement | null,
+): HTMLElement | null {
+	if (!element) return null;
+	if (element.getAttribute('data-dialog-content')) return element;
+	return findParentDialogContent(element.parentElement);
+}
+
+const DialogCloseContext = createContext<() => void>(() => {});
+
+const StyledTitle = withClassName(
+	DialogPrimitive.Title,
+	'font-title color-black text-3xl mb-4 mt-0',
+);
+
+const StyledDescription = withClassName(
+	DialogPrimitive.Description,
+	'mt-3 mb-6 color-gray8 text-md leading-6',
+);
+
+// Exports
+export const Dialog = (props: DialogPrimitive.DialogProps) => {
+	const [innerOpen, innerOnOpenChange] = useState(props.defaultOpen);
+	const open = props.open ?? innerOpen;
+	const onOpenChange = useCallback(
+		(open: boolean) => {
+			innerOnOpenChange(open);
+			props.onOpenChange?.(open);
+		},
+		[props.onOpenChange],
+	);
+
+	const close = useCallback(() => {
+		onOpenChange(false);
+	}, [onOpenChange]);
+
+	return (
+		<DialogCloseContext.Provider value={close}>
+			<DialogPrimitive.Root
+				{...props}
+				open={open}
+				onOpenChange={onOpenChange}
+			/>
+		</DialogCloseContext.Provider>
+	);
+};
+export const DialogTrigger = DialogPrimitive.Trigger;
+export const DialogContent = Content;
+export const DialogTitle = StyledTitle;
+export const DialogDescription = StyledDescription;
+export const DialogClose = DialogPrimitive.Close;
+
+export type { DialogProps } from '@radix-ui/react-dialog';
+
+export const DialogActions = withClassName(
+	'div',
+	'flex justify-end sticky w-full gap-3 items-center bg-white py-3 translate-y-6 flex-wrap',
+	'bottom--6',
+	'sm:(bottom-0)',
+);
+
+export const DialogSelectTrigger = forwardRef<
+	HTMLButtonElement,
+	DialogPrimitive.DialogTriggerProps
+>(function DialogSelectTrigger({ children, className, ...props }, ref) {
+	return (
+		<DialogPrimitive.Trigger
+			className={classNames(selectTriggerClassName, className)}
+			{...props}
+		>
+			<span>{children}</span>
+			<ChevronDownIcon />
+		</DialogPrimitive.Trigger>
+	);
+});
+
+export const DialogSelectList = withClassName(
+	RadioGroupPrimitive.Root,
+	'flex flex-col gap-2 overflow-y-auto p-2',
+);
+
+export const DialogSelectItemRoot = withClassName(
+	RadioGroupPrimitive.Item,
+	'flex items-center gap-3 w-full py-3 px-4 text-left border-none rounded-lg font-normal bg-transparent [&:nth-child(2n+1)]:bg-gray-blend cursor-pointer transition-all',
+	'[&[data-state=checked]]:(bg-primary-wash text-primary-dark)',
+);
+
+export const DialogSelectItem = forwardRef<
+	HTMLButtonElement,
+	ComponentPropsWithoutRef<typeof DialogSelectItemRoot>
+>(function DialogSelectItem({ children, ...props }, ref) {
+	return (
+		<DialogSelectItemRoot {...props}>
+			<span className="flex-1">{children}</span>
+			<RadioGroupPrimitive.Indicator className="flex-0-0-auto">
+				<CheckIcon />
+			</RadioGroupPrimitive.Indicator>
+		</DialogSelectItemRoot>
+	);
+});

package/src/components/dialog/index.ts

@@ -0,0 +1 @@
+export * from './Dialog.js';

package/src/components/dialog.ts

@@ -0,0 +1 @@
+export * from './dialog/index.js';

package/src/components/divider/Divider.tsx

@@ -0,0 +1,26 @@
+import { HTMLAttributes, forwardRef } from 'react';
+import { withClassName } from '../../hooks/withClassName.js';
+import classNames from 'classnames';
+
+const DividerBase = withClassName('div', 'w-full h-1px bg-black relative');
+
+export interface DividerProps extends HTMLAttributes<HTMLDivElement> {
+	compensate?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+	padded?: boolean;
+}
+
+export const Divider = forwardRef<HTMLDivElement, DividerProps>(
+	function Divider({ compensate, padded, className, ...props }, ref) {
+		return (
+			<DividerBase
+				ref={ref}
+				style={{
+					left: compensate ? `calc(${compensate} * 0.25rem)` : undefined,
+					width: compensate ? `calc(100% - ${compensate} * 0.5rem)` : undefined,
+				}}
+				{...props}
+				className={classNames(padded && 'my-4', className)}
+			/>
+		);
+	},
+);

package/src/components/divider/index.ts

@@ -0,0 +1 @@
+export * from './Divider.js';

package/src/components/divider.ts

@@ -0,0 +1 @@
+export * from './divider/index.js';

package/src/components/dropdownMenu/DropdownMenu.stories.tsx

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuItemRightSlot,
+	DropdownMenuTrigger,
+} from './DropdownMenu.js';
+import { Icon } from '../icon.js';
+import { DropdownMenuLabel } from '@radix-ui/react-dropdown-menu';
+
+const meta = {
+	title: 'DropdownMenu',
+	component: DropdownMenu,
+	argTypes: {},
+	parameters: {
+		controls: { expanded: true },
+	},
+} satisfies Meta<typeof DropdownMenu>;
+
+export default meta;
+
+type Story = StoryObj<typeof DropdownMenu>;
+
+export const Default: Story = {
+	args: {
+		children: (
+			<>
+				<DropdownMenuTrigger>Open</DropdownMenuTrigger>
+				<DropdownMenuContent>
+					<DropdownMenuItem>
+						<DropdownMenuLabel>Item 1</DropdownMenuLabel>
+						<DropdownMenuItemRightSlot>
+							<Icon name="flag" />
+						</DropdownMenuItemRightSlot>
+					</DropdownMenuItem>
+					<DropdownMenuItem>
+						<DropdownMenuLabel>Item 2</DropdownMenuLabel>
+						<DropdownMenuItemRightSlot>
+							<Icon name="add_person" />
+						</DropdownMenuItemRightSlot>
+					</DropdownMenuItem>
+				</DropdownMenuContent>
+			</>
+		),
+	},
+};

package/src/components/dropdownMenu/DropdownMenu.tsx

@@ -0,0 +1,89 @@
+'use client';
+
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { withClassName } from '../../hooks/withClassName.js';
+import classNames from 'classnames';
+
+const StyledContent = withClassName(
+	DropdownMenuPrimitive.Content,
+	'min-w-220px bg-white z-menu shadow-lg rounded-xl border-default',
+	'layer-components:transform-origin-[var(--radix-dropdown-menu-transform-origin)]',
+	'layer-components:[&[data-state=open]]:animate-popover-in',
+	'layer-components:[&[data-state=closed]]:animate-popover-out',
+	'layer-components:(max-h-[var(--radix-dropdown-menu-content-available-height)])',
+	'important:motion-reduce:animate-none',
+	'will-change-transform',
+);
+const itemClassName = classNames(
+	'text-md leading-4 color-black rounded-sm flex items-center pr-4 pl-8 py-3 relative text-left select-none cursor-pointer',
+	'[&[data-disabled]]:(color-gray9 pointer-events-none)',
+	'focus-visible:(bg-gray2 color-gray9)',
+	'focus:outline-none',
+);
+const StyledItem = withClassName(DropdownMenuPrimitive.Item, itemClassName);
+const StyledCheckboxItem = withClassName(
+	DropdownMenuPrimitive.CheckboxItem,
+	itemClassName,
+);
+const StyledRadioItem = withClassName(
+	DropdownMenuPrimitive.RadioItem,
+	itemClassName,
+);
+
+const StyledLabel = withClassName(
+	DropdownMenuPrimitive.Label,
+	'pl-25px text-12px leading-6 color-gray7',
+);
+
+const StyledSeparator = withClassName(
+	DropdownMenuPrimitive.Separator,
+	'h-1px bg-gray5 m-5px',
+);
+
+const StyledItemIndicator = withClassName(
+	DropdownMenuPrimitive.ItemIndicator,
+	'absolute left-0 w-25px inline-flex items-center justify-center',
+);
+
+const StyledArrow = withClassName(
+	DropdownMenuPrimitive.Arrow,
+	'fill-white stroke-black stroke-1',
+);
+
+const StyledTrigger = withClassName(
+	DropdownMenuPrimitive.Trigger,
+	'select-none',
+);
+
+const StyledPortal = DropdownMenuPrimitive.Portal;
+
+// Exports
+export const DropdownMenu = DropdownMenuPrimitive.Root;
+export const DropdownMenuTrigger = StyledTrigger;
+export const DropdownMenuItem = StyledItem;
+export const DropdownMenuCheckboxItem = StyledCheckboxItem;
+export const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+export const DropdownMenuRadioItem = StyledRadioItem;
+export const DropdownMenuItemIndicator = StyledItemIndicator;
+export const DropdownMenuLabel = StyledLabel;
+export const DropdownMenuSeparator = StyledSeparator;
+export const DropdownMenuArrow = StyledArrow;
+
+export const DropdownMenuContent = ({
+	children,
+	forceMount,
+	...props
+}: DropdownMenuPrimitive.DropdownMenuContentProps & {
+	forceMount?: boolean;
+}) => {
+	return (
+		<StyledPortal forceMount={forceMount}>
+			<StyledContent {...props}>
+				<div className="overflow-hidden rounded-xl">{children}</div>
+				<StyledArrow />
+			</StyledContent>
+		</StyledPortal>
+	);
+};
+
+export const DropdownMenuItemRightSlot = withClassName('div', 'ml-auto');

package/src/components/dropdownMenu/index.ts

@@ -0,0 +1 @@
+export * from './DropdownMenu.js';

package/src/components/dropdownMenu.ts

@@ -0,0 +1 @@
+export * from './dropdownMenu/index.js';