@a-type/ui 0.1.2 → 0.1.4

package/src/components/select/Select.tsx

@@ -1,106 +0,0 @@
-'use client';
-
-import {
-	CheckIcon,
-	ChevronDownIcon,
-	ChevronUpIcon,
-} from '@radix-ui/react-icons';
-import * as SelectPrimitive from '@radix-ui/react-select';
-import { forwardRef } from 'react';
-import classNames from 'classnames';
-import { withClassName } from '../../hooks/withClassName.js';
-
-export const SelectItem = forwardRef<
-	HTMLDivElement,
-	SelectPrimitive.SelectItemProps
->(({ children, className, ...props }, forwardedRef) => {
-	return (
-		<SelectItemRoot className={className} {...props} ref={forwardedRef}>
-			<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-			<SelectItemIndicator />
-		</SelectItemRoot>
-	);
-});
-
-export const SelectItemRoot = withClassName(
-	SelectPrimitive.Item,
-	'text-md leading-4 color-black rounded-sm flex items-center flex-row h-36px pr-4 pl-35px relative select-none',
-	'[&[data-disabled]]:(color-gray5 pointer-events-none) [&[data-highlighted]]:(outline-none bg-primary-wash color-black)',
-);
-export const SelectItemIndicatorRoot = withClassName(
-	SelectPrimitive.ItemIndicator,
-	'absolute left-0 w-25px inline-flex items-center justify-center',
-);
-export const SelectItemIndicator = (
-	props: SelectPrimitive.SelectItemIndicatorProps,
-) => (
-	<SelectItemIndicatorRoot {...props}>
-		<CheckIcon />
-	</SelectItemIndicatorRoot>
-);
-export const SelectItemText = withClassName(SelectPrimitive.ItemText, '');
-export const SelectGroup = SelectPrimitive.Group;
-
-export const Select = SelectPrimitive.Root;
-export type SelectProps = SelectPrimitive.SelectProps;
-export const SelectTrigger = withClassName(
-	SelectPrimitive.Trigger,
-	'[all:unset] inline-flex items-center justify-center rounded-md px-2 py-1 text-sm gap-1 color-black border-solid border border-gray5 hover:border-gray7 focus:shadow-focus [&[data-placeholder]]:color-gray8',
-);
-export const UnstyledSelectTrigger = SelectPrimitive.Trigger;
-export const SelectValue = withClassName(
-	SelectPrimitive.Value,
-	'flex flex-row',
-);
-export const SelectLabel = withClassName(
-	SelectPrimitive.Label,
-	'px-25px text-xs leading-6 color-black',
-);
-export const SelectSeparator = withClassName(
-	SelectPrimitive.Separator,
-	'h-1px bg-gray50 m-1',
-);
-export const SelectIcon = forwardRef<
-	HTMLDivElement,
-	SelectPrimitive.SelectIconProps
->(({ className, ...props }, forwardedRef) => {
-	return (
-		<SelectPrimitive.Icon
-			className={classNames('color-inherit', className)}
-			{...props}
-			ref={forwardedRef}
-		>
-			<ChevronDownIcon />
-		</SelectPrimitive.Icon>
-	);
-});
-
-const zIndex = { zIndex: 1001 };
-export const SelectContent = forwardRef<
-	HTMLDivElement,
-	SelectPrimitive.SelectContentProps & { inDialog?: boolean }
->(({ children, inDialog, className, ...props }, forwardedRef) => {
-	return (
-		<SelectPrimitive.Portal className={className} style={zIndex}>
-			<SelectPrimitive.Content
-				className={classNames(
-					'overflow-hidden bg-white rounded-md z-menu shadow-lg',
-					inDialog && 'z-[calc(var(--z-dialog)+1)]',
-					// className,
-				)}
-				{...props}
-				ref={forwardedRef}
-			>
-				<SelectPrimitive.ScrollUpButton className="flex items-center justify-center h-25px bg-white color-primary-dark cursor-default">
-					<ChevronUpIcon />
-				</SelectPrimitive.ScrollUpButton>
-				<SelectPrimitive.Viewport className="p-1">
-					{children}
-				</SelectPrimitive.Viewport>
-				<SelectPrimitive.ScrollDownButton className="flex items-center justify-center h-25px bg-white color-primary-dark cursor-default">
-					<ChevronDownIcon />
-				</SelectPrimitive.ScrollDownButton>
-			</SelectPrimitive.Content>
-		</SelectPrimitive.Portal>
-	);
-});

package/src/components/skeletons/skeletons.tsx

@@ -1,27 +0,0 @@
-import { useState } from 'react';
-import classNames from 'classnames';
-
-export const TextSkeleton = ({
-	maxLength,
-	className,
-}: {
-	maxLength: number;
-	className?: string;
-}) => {
-	const [length] = useState(() =>
-		Math.round(Math.random() * (maxLength - 5) + 5),
-	);
-
-	return (
-		<span
-			className={classNames(
-				'w-full h-full rounded-2 bg-gradient-to-r from-gray1 via-gray2 to-gray1 [background-size:400%_400%] max-w-full animate-skeleton animate-duration-1200 animate-ease-in-out animate-iteration-infinite animate-alternate',
-				className,
-			)}
-			style={{
-				width: `${length}ch`,
-				height: '1.2em',
-			}}
-		/>
-	);
-};

package/src/components/spinner/Spinner.tsx

@@ -1,59 +0,0 @@
-import { HTMLAttributes, forwardRef } from 'react';
-import classNames from 'classnames';
-
-const CIRCLE_SIZE = 44;
-
-export interface SpinnerProps
-	extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
-	size?: number;
-	thickness?: number;
-}
-
-export const Spinner = forwardRef<HTMLDivElement, SpinnerProps>(
-	function Spinner(
-		{ size = 40, thickness = 7.2, className, style, ...props },
-		ref,
-	) {
-		return (
-			<div
-				ref={ref}
-				role="progressbar"
-				{...props}
-				className={classNames(
-					'inline-block animate-spin animate-ease-linear animate-iteration-infinite color-inherit animate-duration-1400 transform-origin-[50%_50%]',
-					className,
-				)}
-				style={{ width: size, height: size, ...style }}
-			>
-				<svg
-					className="block"
-					viewBox={`${CIRCLE_SIZE / 2} ${
-						CIRCLE_SIZE / 2
-					} ${CIRCLE_SIZE} ${CIRCLE_SIZE}`}
-				>
-					<circle
-						className="stroke-current animate-spinner-stroke animate-ease-in-out animate-iteration-infinite animate-duration-1400 [stroke-dasharray:80_200] [stroke-dashoffset:0]"
-						cx={CIRCLE_SIZE}
-						cy={CIRCLE_SIZE}
-						r={(CIRCLE_SIZE - thickness) / 2}
-						fill="none"
-						strokeWidth={thickness}
-					/>
-				</svg>
-			</div>
-		);
-	},
-);
-
-export const FullScreenSpinner = forwardRef<HTMLDivElement, SpinnerProps>(
-	function FullScreenSpinner(props, ref) {
-		return (
-			<div
-				ref={ref}
-				className="flex flex-row gap-4 w-full flex-1 justify-center items-center self-stretch"
-			>
-				<Spinner {...props} />
-			</div>
-		);
-	},
-);

package/src/components/switch/Switch.tsx

@@ -1,23 +0,0 @@
-import { withClassName } from '../../hooks/withClassName.js';
-import { Root, SwitchProps, Thumb } from '@radix-ui/react-switch';
-import { forwardRef } from 'react';
-
-const SwitchRoot = withClassName(
-	Root,
-	'unset w-42px h-25px bg-white rounded-full relative transition-color border-default flex-shrink-0 focus-visible:shadow-focus [&[data-state=checked]]:bg-accent',
-);
-
-const SwitchThumb = withClassName(
-	Thumb,
-	'block w-21px h-21px bg-white rounded-full border-default transition-transform will-change-transform [&[data-state=checked]]:translate-x-19px',
-);
-
-export const Switch = forwardRef<HTMLButtonElement, SwitchProps>(
-	function Switch(props, ref) {
-		return (
-			<SwitchRoot {...props} ref={ref}>
-				<SwitchThumb />
-			</SwitchRoot>
-		);
-	},
-);

package/src/components/tabs/tabs.tsx

@@ -1,16 +0,0 @@
-import * as Tabs from '@radix-ui/react-tabs';
-import { withClassName } from '../../hooks/withClassName.js';
-
-export const TabsRoot = withClassName(Tabs.Root, '');
-
-export const TabsList = withClassName(
-	Tabs.List,
-	'flex flex-row gap-2 py-3 px-2 justify-center',
-);
-
-export const TabsTrigger = withClassName(
-	Tabs.Trigger,
-	'flex flex-row items-center justify-center gap-2 color-black py-1 px-4 rounded-lg bg-wash text-md font-bold min-w-100px border border-solid border-gray2 hover:bg-gray2 focus-visible:(shadow-focus outline-off) [&[data-state=active]]:(bg-primary-light border-primary-light)',
-);
-
-export const TabsContent = withClassName(Tabs.Content, '');

package/src/components/tabs.ts

@@ -1 +0,0 @@
-export * from './tabs/tabs.jsx';

package/src/components/textArea/TextArea.tsx

@@ -1,58 +0,0 @@
-'use client';
-
-import classNames from 'classnames';
-import useMergedRef from '../../hooks/useMergedRef.js';
-import { forwardRef, HTMLProps, useLayoutEffect, useRef } from 'react';
-import { inputClassName } from '../input.js';
-
-export interface TextAreaProps
-	extends Omit<HTMLProps<HTMLTextAreaElement>, 'ref'> {
-	className?: string;
-	autoSize?: boolean;
-	// if auto-size, pad the height by this many px
-	padBottomPixels?: number;
-}
-
-export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
-	function TextArea(
-		{ autoSize, className, rows, padBottomPixels = 0, ...rest },
-		ref,
-	) {
-		const innerRef = useRef<HTMLTextAreaElement>(null);
-		const finalRef = useMergedRef(innerRef, ref);
-
-		useLayoutEffect(() => {
-			if (!autoSize) return;
-			const element = innerRef.current;
-			let valueWasEmpty = false;
-			if (element) {
-				if (
-					element!.value !== '' ||
-					(!valueWasEmpty && element!.value === '') ||
-					padBottomPixels
-				) {
-					element!.style.height = 'auto';
-					const baseHeight = element!.scrollHeight;
-					element!.style.height = baseHeight + padBottomPixels + 'px';
-				}
-				valueWasEmpty = element!.value === '';
-			}
-		}, [autoSize, padBottomPixels, rest.value]);
-
-		return (
-			<textarea
-				ref={finalRef}
-				className={classNames(
-					inputClassName,
-					'layer-components:([font-family:inherit] text-inherit overflow-hidden)',
-					{
-						'layer-components:[resize:vertical]': !autoSize,
-					},
-					className,
-				)}
-				rows={autoSize ? 1 : rows}
-				{...rest}
-			/>
-		);
-	},
-);

package/src/components/toggleGroup/toggleGroup.tsx

@@ -1,11 +0,0 @@
-import * as ToggleGroup from '@radix-ui/react-toggle-group';
-import { withClassName } from '../../hooks/withClassName.js';
-
-export const ToggleGroupRoot = withClassName(
-	ToggleGroup.Root,
-	'inline-flex bg-gray1 rounded-lg gap-1',
-);
-export const ToggleGroupItem = withClassName(
-	ToggleGroup.Item,
-	'rounded-xl bg-gray2 py-1 px-2 flex items-center justify-center cursor-pointer hover:bg-gray3 active:bg-gray4 focus-visible:(shadow-focus outline-off) [&[data-state=on]]:(bg-primary-light border-black)',
-);

package/src/components/toggleGroup.ts

@@ -1 +0,0 @@
-export * from './toggleGroup/toggleGroup.jsx';

package/src/components/tooltip/Tooltip.tsx

@@ -1,53 +0,0 @@
-'use client';
-
-import React, { ComponentPropsWithoutRef } from 'react';
-import * as TooltipPrimitive from '@radix-ui/react-tooltip';
-import classNames from 'classnames';
-
-function Content({
-	children,
-	className,
-	...props
-}: TooltipPrimitive.TooltipContentProps) {
-	return (
-		<TooltipPrimitive.Portal>
-			<TooltipPrimitive.Content
-				className={classNames(
-					'relative rounded-lg py-2 px-3 border-default text-sm leading-tight color-inherit bg-white shadow-sm select-none display-none z-tooltip sm:display-initial',
-					'[&[data-state=delayed-open]]:display-initial',
-					'[&[data-state=instant-open]]:display-initial',
-					'[&[data-state=delayed-open][data-side=top]]:animate-fade-in-up',
-					'[&[data-state=delayed-open][data-side=right]]:animate-fade-in-right',
-					'[&[data-state=delayed-open][data-side=bottom]]:animate-fade-in-down',
-					'[&[data-state=delayed-open][data-side=left]]:animate-fade-in-left',
-					className,
-				)}
-				{...props}
-			>
-				{children}
-				<TooltipPrimitive.Arrow className="fill-white stroke-black stroke-1" />
-			</TooltipPrimitive.Content>
-		</TooltipPrimitive.Portal>
-	);
-}
-
-// Exports
-export const TooltipProvider = TooltipPrimitive.Provider;
-
-export function Tooltip({
-	content,
-	children,
-	open,
-	...rest
-}: { content: React.ReactNode; open?: boolean } & ComponentPropsWithoutRef<
-	typeof TooltipPrimitive.TooltipTrigger
->) {
-	return (
-		<TooltipPrimitive.Root open={open}>
-			<TooltipPrimitive.TooltipTrigger asChild {...rest}>
-				{children}
-			</TooltipPrimitive.TooltipTrigger>
-			<Content sideOffset={15}>{content}</Content>
-		</TooltipPrimitive.Root>
-	);
-}

package/src/hooks/useMergedRef.ts

@@ -1,14 +0,0 @@
-import * as React from 'react';
-
-function useMergedRef<T>(...refs: React.Ref<T>[]): React.RefCallback<T> {
-	return React.useCallback((element: T) => {
-		for (let i = 0; i < refs.length; i++) {
-			const ref = refs[i];
-			if (typeof ref === 'function') ref(element);
-			else if (ref && typeof ref === 'object')
-				(ref as React.MutableRefObject<T>).current = element;
-		}
-	}, refs);
-}
-
-export default useMergedRef;

package/src/hooks/useOnUnmount.ts

@@ -1,20 +0,0 @@
-import { useCallback, useRef } from 'react';
-import { useStableCallback } from './useStableCallback.js';
-
-/**
- * Calls a callback with an element when it is unmounted.
- * @returns a ref to pass to the component
- */
-export function useOnUnmount(callback: (el: HTMLElement) => void) {
-	const stableCallback = useStableCallback(callback);
-
-	const ref = useRef<HTMLElement | null>(null);
-
-	return useCallback((el: HTMLElement | null) => {
-		console.log(el);
-		if (ref.current && !el) {
-			stableCallback(ref.current);
-		}
-		ref.current = el;
-	}, []);
-}

package/src/hooks/useSize.ts

@@ -1,69 +0,0 @@
-import { debounce } from '@a-type/utils';
-import { RefObject, useLayoutEffect, useMemo, useRef } from 'react';
-import { useStableCallback } from './useStableCallback.js';
-interface ResizeObserverEntry {
-	target: Element;
-}
-type ResizeObserverCallback = (entries: ResizeObserverEntry[]) => void;
-export declare class ResizeObserver {
-	constructor(callback: ResizeObserverCallback);
-	observe(target: Element): void;
-	unobserve(target: Element): void;
-	disconnect(): void;
-}
-
-export function useSize<E extends HTMLElement>(
-	callback: (payload: { width: number; height: number }) => void,
-) {
-	const ref = useRef<E>(null);
-	const cb = useStableCallback(callback);
-	useLayoutEffect(() => {
-		const target = ref.current;
-		if (!target) {
-			return () => {
-				//
-			};
-		}
-		const resizeObserver = new ResizeObserver((entries) => {
-			entries.forEach((entry) => {
-				cb({
-					width: entry.target.clientWidth,
-					height: entry.target.clientHeight,
-				});
-			});
-		});
-		resizeObserver.observe(target);
-		return () => {
-			resizeObserver.unobserve(target);
-			resizeObserver.disconnect();
-		};
-	}, [ref, cb]);
-	return ref;
-}
-
-export function useSizeCssVars<E extends HTMLElement>(
-	debounceMs?: number,
-	applyToRef?: RefObject<HTMLElement>,
-	propertyNames?: { width: string; height: string },
-) {
-	const update = useMemo(() => {
-		const doupdate = ({ width, height }: { width: number; height: number }) => {
-			const usedRef = applyToRef || ref;
-			usedRef.current?.style.setProperty(
-				propertyNames?.width ?? '--width',
-				width + 'px',
-			);
-			usedRef.current?.style.setProperty(
-				propertyNames?.height ?? '--height',
-				height + 'px',
-			);
-		};
-		if (debounceMs) {
-			return debounce(doupdate, debounceMs);
-		} else {
-			return doupdate;
-		}
-	}, [debounceMs, applyToRef, propertyNames?.width, propertyNames?.height]);
-	const ref = useSize<E>(update);
-	return ref;
-}

package/src/hooks/useStableCallback.ts

@@ -1,11 +0,0 @@
-import { useCallback, useEffect, useMemo, useRef } from 'react';
-
-export function useStableCallback<Fn extends (...args: any[]) => any>(
-	callback: Fn | undefined,
-) {
-	const ref = useRef(callback);
-	useMemo(() => {
-		ref.current = callback;
-	}, [callback]);
-	return useCallback((...args: any[]) => ref.current?.(...args), []);
-}

package/src/hooks/useToggle.tsx

@@ -1,9 +0,0 @@
-import { useCallback, useState } from 'react';
-
-export function useToggle(
-	initialValue: boolean = false,
-): [boolean, () => void] {
-	const [value, setValue] = useState(initialValue);
-	const toggle = useCallback(() => setValue((v) => !v), []);
-	return [value, toggle];
-}

package/src/hooks/useVisualViewportOffset.ts

@@ -1,35 +0,0 @@
-import { useEffect, useState } from 'react';
-
-/**
- * Applies bottom offset px as a CSS custom property to the document root.
- */
-export function useVisualViewportOffset() {
-	const viewport = window.visualViewport;
-
-	useEffect(() => {
-		if (!viewport) {
-			return;
-		}
-
-		const update = () => {
-			document.documentElement.style.setProperty(
-				'--viewport-bottom-offset',
-				`${window.innerHeight - viewport.height}px`,
-			);
-			document.documentElement.style.setProperty(
-				'--viewport-height',
-				`${viewport.height}px`,
-			);
-		};
-
-		update();
-
-		window.addEventListener('scroll', update, { passive: true });
-		viewport.addEventListener('resize', update);
-
-		return () => {
-			viewport.removeEventListener('resize', update);
-			window.removeEventListener('scroll', update);
-		};
-	}, []);
-}

package/src/hooks/withClassName.tsx

@@ -1,21 +0,0 @@
-import classNames from 'classnames';
-import {
-	ComponentPropsWithRef,
-	ComponentType,
-	ElementType,
-	FunctionComponent,
-	forwardRef,
-} from 'react';
-
-export function withClassName<T extends ComponentType<any> | ElementType<any>>(
-	Component: T,
-	...cs: Parameters<typeof classNames>
-): FunctionComponent<ComponentPropsWithRef<T>> {
-	const WithClassName = forwardRef<any, any>((props, ref) => {
-		const { className, ...rest } = props;
-		return (
-			<Component ref={ref} {...rest} className={classNames(cs, className)} />
-		);
-	});
-	return WithClassName as any;
-}

package/tsconfig-cjs.json

@@ -1,7 +0,0 @@
-{
-	"extends": "./tsconfig.json",
-	"compilerOptions": {
-		"module": "CommonJS",
-		"outDir": "./dist/cjs"
-	}
-}

package/tsconfig.json

@@ -1,25 +0,0 @@
-{
-  "compilerOptions": {
-    "noImplicitAny": true,
-    "noLib": false,
-    "target": "es2017",
-    "sourceMap": true,
-    "declaration": true,
-    "module": "es2022",
-    "moduleResolution": "NodeNext",
-    "lib": ["dom", "esnext", "webworker"],
-    "skipLibCheck": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "allowSyntheticDefaultImports": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "downlevelIteration": true,
-    "experimentalDecorators": true,
-    "isolatedModules": true,
-    "outDir": "./dist/esm",
-    "rootDir": "./src",
-    "jsx": "react-jsx"
-  },
-  "include": ["src"]
-}

package/uno.config.ts

@@ -1,9 +0,0 @@
-// uno.config.ts
-import { defineConfig } from 'unocss';
-import variantGroup from '@unocss/transformer-variant-group';
-import presetAglio from './src/uno.preset';
-
-export default defineConfig({
-  presets: [presetAglio()],
-  transformers: [variantGroup()],
-});