@a-type/ui 0.1.2 → 0.1.4

package/.changeset/config.json

@@ -1,11 +0,0 @@
-{
-  "$schema": "https://unpkg.com/@changesets/config@2.3.0/schema.json",
-  "changelog": "@changesets/cli/changelog",
-  "commit": false,
-  "fixed": [],
-  "linked": [],
-  "access": "public",
-  "baseBranch": "main",
-  "updateInternalDependencies": "patch",
-  "ignore": []
-}

package/.github/workflows/changesets.yaml

@@ -1,39 +0,0 @@
-name: Changesets
-on:
-  push:
-    branches:
-      - main
-env:
-  CI: true
-  PNPM_CACHE_FOLDER: .pnpm-store
-jobs:
-  version:
-    timeout-minutes: 15
-    runs-on: ubuntu-latest
-    steps:
-      - name: checkout code repository
-        uses: actions/checkout@v2
-        with:
-          fetch-depth: 0
-          token: ${{ secrets.GITHUB_TOKEN }}
-      - name: setup node.js
-        uses: actions/setup-node@v2
-        with:
-          node-version: 18
-      - name: install pnpm
-        run: npm i pnpm@latest -g
-      - name: setup pnpm config
-        run: pnpm config set store-dir $PNPM_CACHE_FOLDER
-      - name: install dependencies
-        run: pnpm install
-      - name: build packages to verify they are buildable
-        run: pnpm run build
-      - name: create and publish versions
-        uses: changesets/action@v1
-        with:
-          commit: 'chore: update versions'
-          title: 'chore: update versions'
-          publish: pnpm ci:publish
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

package/CHANGELOG.md

@@ -1,19 +0,0 @@
-# @a-type/ui
-
-## 0.1.2
-
-### Patch Changes
-
-- dbb517c: maybe fix build
-
-## 0.1.1
-
-### Patch Changes
-
-- 3e4fc56: Bump, test
-
-## 0.1.0
-
-### Minor Changes
-
-- e9fd71a: Initial release

package/src/components/actions/ActionBar.tsx

@@ -1,38 +0,0 @@
-import { ReactNode, Suspense } from 'react';
-import classNames from 'classnames';
-
-export interface ActionBarProps {
-	children: ReactNode;
-	className?: string;
-	wrap?: boolean;
-}
-
-export function ActionBar({
-	children,
-	className,
-	wrap,
-	...rest
-}: ActionBarProps) {
-	return (
-		<Suspense fallback={null}>
-			<div
-				className={classNames(
-					'flex flex-row items-center justify-start w-full overflow-hidden relative h-[max-content] transition-[height] springy',
-					'[&:empty]:height-0',
-					'after:(content-[""] absolute right-0 top-0 bottom-0 w-50px z-1 bg-gradient-to-l from-wash to-transparent] pointer-events-none)',
-					className,
-				)}
-				{...rest}
-			>
-				<div
-					className={classNames(
-						'flex flex-row items-center justify-start w-full overflow-y-hidden overflow-x-auto pr-80px relative h-full [&::-webkit-scrollbar]:display-none',
-						wrap && 'flex-wrap',
-					)}
-				>
-					{children}
-				</div>
-			</div>
-		</Suspense>
-	);
-}

package/src/components/actions/ActionButton.tsx

@@ -1,59 +0,0 @@
-'use client';
-
-import classNames from 'classnames';
-import { forwardRef, ReactNode, useEffect, useRef, useState } from 'react';
-import { Button, ButtonProps } from '../button/Button.js';
-import { CollapsibleContent, CollapsibleRoot } from '../collapsible.js';
-
-export interface ActionButtonProps extends ButtonProps {
-	icon?: ReactNode;
-	visible?: boolean;
-}
-
-export const ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>(
-	function ActionButton(
-		{ icon, children, className, visible = true, ...rest },
-		ref,
-	) {
-		// this rather convoluted logic is meant to do:
-		// - when button goes invisible, wait for collapse and then
-		//   stop rendering
-		// - when button goes visible, render immediately and
-		//   set collapsible open next frame.
-		const [render, setRender] = useState(visible);
-		useEffect(() => {
-			if (!visible) {
-				const timeout = setTimeout(() => {
-					setRender(visible);
-				}, 300);
-				return () => clearTimeout(timeout);
-			} else {
-				setRender(visible);
-			}
-		}, [visible]);
-
-		if (!render && !visible) {
-			return null;
-		}
-
-		return (
-			<CollapsibleRoot open={!visible ? false : render}>
-				<CollapsibleContent data-horizontal>
-					<Button
-						ref={ref}
-						size="small"
-						className={classNames(
-							'important:(border-gray7 font-normal whitespace-nowrap m-2 flex flex-row gap-2 items-center h-30px rounded-15px mx-1)',
-							'hover:bg-gray2',
-							className,
-						)}
-						{...rest}
-					>
-						{icon}
-						{children}
-					</Button>
-				</CollapsibleContent>
-			</CollapsibleRoot>
-		);
-	},
-);

package/src/components/button/Button.tsx

@@ -1,54 +0,0 @@
-import classNames from 'classnames';
-import { forwardRef, ButtonHTMLAttributes } from 'react';
-import { Spinner } from '../spinner.js';
-import { getButtonClassName } from './classes.js';
-
-export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-	color?:
-		| 'primary'
-		| 'default'
-		| 'ghost'
-		| 'destructive'
-		| 'ghostDestructive'
-		| 'accent';
-	size?: 'default' | 'small' | 'icon';
-	toggled?: boolean;
-	align?: 'start' | 'stretch' | 'end';
-	visuallyDisabled?: boolean;
-	loading?: boolean;
-}
-
-export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-	function Button(
-		{
-			className,
-			color,
-			size,
-			toggled,
-			align,
-			visuallyDisabled,
-			loading,
-			children,
-			disabled,
-			...props
-		},
-		ref,
-	) {
-		return (
-			<button
-				ref={ref}
-				{...props}
-				disabled={disabled || loading}
-				data-disabled={visuallyDisabled}
-				tabIndex={visuallyDisabled ? -1 : undefined}
-				className={classNames(
-					getButtonClassName({ color, size, toggled, align }),
-					className,
-				)}
-			>
-				{loading && <Spinner size={16} className="inline-block w-1em h-1em" />}
-				{children}
-			</button>
-		);
-	},
-);

package/src/components/button/ConfirmedButton.tsx

@@ -1,66 +0,0 @@
-import { useCallback, useState } from 'react';
-import {
-	Dialog,
-	DialogActions,
-	DialogClose,
-	DialogContent,
-	DialogTitle,
-	DialogTrigger,
-} from '../dialog.js';
-import { P } from '../typography.js';
-import { Button, ButtonProps } from './Button.js';
-
-export interface ConfirmedButtonProps extends Omit<ButtonProps, 'onClick'> {
-	confirmText: string;
-	confirmTitle?: string;
-	confirmAction?: string;
-	cancelAction?: string;
-	onConfirm: () => void | Promise<any>;
-	skip?: boolean;
-}
-
-export function ConfirmedButton({
-	confirmText,
-	confirmTitle = 'Are you sure?',
-	confirmAction = 'OK',
-	cancelAction = 'Nevermind',
-	onConfirm,
-	skip,
-	...rest
-}: ConfirmedButtonProps) {
-	const [open, setOpen] = useState(false);
-	const [loading, setLoading] = useState(false);
-	const confirm = useCallback(async () => {
-		setLoading(true);
-		try {
-			await onConfirm();
-			setOpen(false);
-		} finally {
-			setLoading(false);
-		}
-	}, [onConfirm]);
-
-	if (skip) {
-		return <Button {...rest} />;
-	}
-
-	return (
-		<Dialog open={open} onOpenChange={setOpen}>
-			<DialogTrigger asChild>
-				<Button {...rest} />
-			</DialogTrigger>
-			<DialogContent>
-				<DialogTitle>{confirmTitle}</DialogTitle>
-				<P>{confirmText}</P>
-				<DialogActions>
-					<DialogClose asChild>
-						<Button>{cancelAction}</Button>
-					</DialogClose>
-					<Button loading={loading} onClick={confirm} color="primary">
-						{confirmAction}
-					</Button>
-				</DialogActions>
-			</DialogContent>
-		</Dialog>
-	);
-}

package/src/components/button/classes.tsx

@@ -1,55 +0,0 @@
-import classNames from 'classnames';
-import type { ButtonProps } from './Button.jsx';
-
-export function getButtonClassName({
-	color,
-	size,
-	toggled,
-	align,
-}: {
-	color?: ButtonProps['color'];
-	size?: ButtonProps['size'];
-	toggled?: boolean;
-	align?: ButtonProps['align'];
-}) {
-	return classNames(
-		'layer-components:(px-4 py-3 bg-[var(--bg)] [--webkit-tap-highlight-color:transparent] [line-height:1] text-size-md font-sans border border-solid border-transparent rounded-lg cursor-pointer font-bold flex flex-row gap-1 items-center relative overflow-visible select-none all:transition duration-200 shadow-none whitespace-nowrap)',
-		'layer-components:hover:(bg-[var(--hover)] shadow-[0_0_0_6px_var(--hover)])',
-		'layer-components:focus:outline-off',
-		'layer-components:focus-visible:(outline-off shadow-[0_0_0_6px_var(--hover)])',
-		'layer-components:active:(shadow-[0_0_0_6px_var(--active)] bg-[var(--active)])',
-		'important:disabled:(opacity-50 cursor-default bg-[(--var-bg)] shadow-none)',
-		'important:[&[data-disabled=true]]:(opacity-50 cursor-default bg-[(--var-bg)] shadow-none)',
-		colors[color ?? 'default'],
-		`color-${color ?? 'default'}`,
-		sizes[size ?? 'default'],
-		`size-${size ?? 'default'}`,
-		toggled && toggledClass,
-		align && aligns[align],
-		// compound variants
-		color === 'ghost' && toggled && 'layer-variants:bg-primary-wash',
-	);
-}
-
-const colors = {
-	primary: `layer-variants:[&.color-primary]:([--bg:var(--color-primary-light)] [--hover:var(--color-primary)] [--active:var(--color-primary)] color-black border-black focus-visible:([--bg:var(--color-primary)]))`,
-	accent: `layer-variants:[&.color-accent]:([--bg:var(--color-accent-wash)] [--hover:var(--color-accent-light)] [--active:var(--color-accent-light)] color-black border-black focus-visible:([--bg:var(--color-accent-light)]))`,
-	default: `layer-variants:[&.color-default]:([--bg:var(--color-white)] [--hover:var(--color-gray-2)] [--active:var(--color-gray-3)] color-black border-black)`,
-	ghost: `layer-variants:[&.color-ghost]:([--bg:transparent] [--hover:var(--color-gray-blend)] [--active:var(--color-gray-dark-blend)] color-dark-blend hover:([--bg:var(--color-gray-blend)]) focus-visible:([--bg:var(--color-gray-blend)]))`,
-	destructive: `layer-variants:[&.color-destructive]:([--bg:var(--color-attention-light)] [--hover:var(--color-attention-light)] [--active:var(--color-attention-light)] border-black color-black hover:([--bg:var(--colors-attention)]))`,
-	ghostDestructive: `layer-variants:[&.color-ghostDestructive]:([--bg:transparent] [--hover:var(--color-attention-light)] [--active:var(-color-attention-light)] color-attention-dark)`,
-};
-
-const sizes = {
-	default: '',
-	small: 'layer-variants:[&.size-small]:(px-4 py-1 text-sm rounded-lg)',
-	icon: 'layer-variants:[&.size-icon]:(p-2 text-sm rounded-full)',
-};
-
-const toggledClass = 'hover:(filter-brightness-[1.1])';
-
-const aligns = {
-	start: 'self-start',
-	stretch: 'self-stretch',
-	end: 'self-end',
-};

package/src/components/checkbox/Checkbox.tsx

@@ -1,46 +0,0 @@
-'use client';
-
-import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
-import { ComponentProps, forwardRef } from 'react';
-import { CheckIcon } from '@radix-ui/react-icons';
-import classNames from 'classnames';
-import { withClassName } from '../../hooks/withClassName.js';
-
-const CheckboxRoot = withClassName(
-	CheckboxPrimitive.Root,
-	classNames(
-		'layer-components:(w-28px h-28px flex-shrink-0 relative bg-white border-default transition rounded-[6px])',
-		'layer-components:focus-visible:(outline-off shadow-focus)',
-		'layer-components:[&[data-state=checked]]:(bg-primary-light border-primary-dark)',
-		'layer-components:[&:hover:not(:disabled)]:shadow-[0_0_0_1px_var(--color-black)]',
-	),
-);
-
-export function CheckboxIndicator({
-	children,
-	className,
-	...props
-}: CheckboxPrimitive.CheckboxIndicatorProps) {
-	return (
-		<CheckboxPrimitive.Indicator
-			className={classNames(
-				'absolute center translate-[-50%] color-black',
-				className,
-			)}
-			{...props}
-		>
-			{children ?? <CheckIcon width={18} height={18} />}
-		</CheckboxPrimitive.Indicator>
-	);
-}
-
-export const Checkbox = forwardRef<
-	HTMLButtonElement,
-	ComponentProps<typeof CheckboxRoot>
->(function Checkbox(props, ref) {
-	return (
-		<CheckboxRoot ref={ref} {...props}>
-			<CheckboxIndicator />
-		</CheckboxRoot>
-	);
-});

package/src/components/collapsible/Collapsible.tsx

@@ -1,48 +0,0 @@
-'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/colorPicker/ColorPicker.tsx

@@ -1,82 +0,0 @@
-'use client';
-
-import {
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-	SelectValue,
-} from '../select/Select.jsx';
-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/contextMenu/contextMenu.tsx

@@ -1,38 +0,0 @@
-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(
-					'min-w-120px bg-white rounded-md border-default overflow-hidden p-2 shadow-md z-menu',
-					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/dialog/Dialog.tsx

@@ -1,121 +0,0 @@
-'use client';
-
-import * as DialogPrimitive from '@radix-ui/react-dialog';
-import {
-	ComponentPropsWithoutRef,
-	forwardRef,
-	useCallback,
-	useRef,
-} from 'react';
-import { withClassName } from '../../hooks/withClassName.js';
-import useMergedRef from '../../hooks/useMergedRef.js';
-import { useParticles } from '../particles.js';
-import classNames from 'classnames';
-
-const StyledOverlay = withClassName(
-	DialogPrimitive.Overlay,
-	'bg-overlay fixed inset-0 z-dialog-backdrop animate-fade-in [&[data-state=closed]]:animate-fade-out animate-duration-200 motion-reduce:animate-none',
-);
-
-const StyledContent = withClassName(
-	DialogPrimitive.Content,
-	'z-dialog fixed bottom-[var(--viewport-bottom-offset,0px)] left-0 right-0 h-min-content max-h-[calc(0.85*var(--viewport-height,100vh))]',
-	'translate-0 transform-gpu',
-	'animate-ease-out',
-	'shadow-xl bg-white rounded-tl-lg rounded-tr-lg p-6 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 [&[data-state=closed]]:animate-fade-out-down-big animate-ease-in motion-reduce:animate-none',
-	'sm:(animate-duration-200 left-50% top-50% translate-[-50%] w-90vw max-w-450px max-h-85vh pb-6 rounded-lg border-b-1 animate-keyframes-fade-in [&[data-state=closed]]:animate-keyframes-fade-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: ['#00000002', '#00000000'],
-							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 finalRef = useMergedRef(ref, openRef);
-
-	return (
-		<DialogPrimitive.Portal>
-			<StyledOverlay />
-			<StyledContent
-				ref={finalRef}
-				{...props}
-				className={classNames(
-					{
-						'md:max-w-800px': width === 'lg',
-						'max-w-600px': width === 'md',
-						'max-w-300px': width === 'sm',
-					},
-					outerClassName || className,
-				)}
-			>
-				{children}
-			</StyledContent>
-		</DialogPrimitive.Portal>
-	);
-});
-
-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 = DialogPrimitive.Root;
-export const DialogTrigger = DialogPrimitive.Trigger;
-export const DialogContent = Content;
-export const DialogTitle = StyledTitle;
-export const DialogDescription = StyledDescription;
-export const DialogClose = DialogPrimitive.Close;
-
-export const DialogActions = withClassName(
-	'div',
-	'flex justify-end sticky bottom-0 w-full gap-3 items-center bg-white py-3 translate-y-6 flex-wrap',
-);