@a-type/ui 1.4.1 → 1.5.1

package/src/components/tabs/tabs.tsx

@@ -1,4 +1,5 @@
 import * as TabsPrimitive from '@radix-ui/react-tabs';
+import clsx from 'clsx';
 import { withClassName } from '../../hooks/withClassName.js';
 
 export const TabsRoot = withClassName(TabsPrimitive.Root, '');
@@ -8,10 +9,35 @@ export const TabsList = withClassName(
 	'flex flex-row flex-wrap py-2 px-2 items-start gap-2',
 );
 
-export const TabsTrigger = withClassName(
+export const TabsTriggerBase = withClassName(
 	TabsPrimitive.Trigger,
-	'layer-components:(flex flex-row items-center justify-center gap-2 color-black py-1 px-5 bg-wash text-md min-w-100px rounded-full border border-1 font-semibold text-gray-7 border-gray-7 border-solid transition-colors cursor-pointer select-none font-sans flex-shrink-0)',
-	'hover:bg-primary-light focus-visible:(focus-ring focus-ring-primary-dark outline-off bg-primary-light border-primary-dark) [&[data-state=active]]:(font-semibold bg-primary-light border-primary-light text-black cursor-default hover:bg-primary-light relative z-1)',
+	'layer-components:(flex flex-row items-center justify-center gap-2 color-black py-1 px-5 bg-wash text-md min-w-100px rounded-lg border-default font-semibold text-gray-8 border-gray-8 transition-colors cursor-pointer select-none font-sans flex-shrink-0 shadow-sm)',
+	'layer-components:hover:bg-[var(--hover)]',
+	'layer-components:focus-visible:(focus-ring focus-ring-[var(--focus)] outline-off)',
+	'[&[data-state=active]]:(font-semibold bg-[var(--focus,var(--hover))] text-black cursor-default hover:bg-[var(--hover)] relative z-1)',
+);
+
+const colorClasses = {
+	default:
+		'layer-variants:([--bg:var(--color-white)] [--hover:var(--color-gray-3)] [--focus:var(--color-gray-4)] [--active:var(--color-gray-4)])',
+	primary:
+		'layer-variants:([--bg:var(--color-primary-light)] [--hover:var(--color-primary)] [--focus:var(--color-primary)] [--active:var(--color-primary)])',
+};
+
+export interface TabsTriggerProps
+	extends Omit<TabsPrimitive.TabsTriggerProps, 'color'> {
+	color?: 'default' | 'primary';
+}
+
+export const TabsTrigger = ({
+	className,
+	color = 'primary',
+	...props
+}: TabsTriggerProps) => (
+	<TabsTriggerBase
+		className={clsx(colorClasses[color], `btn-color-${color}`, className)}
+		{...props}
+	/>
 );
 
 export const TabsContent = withClassName(TabsPrimitive.Content, '');

package/src/components/textArea/TextArea.tsx

@@ -97,7 +97,7 @@ export const TextArea = function TextArea({
 			className={classNames(
 				inputClassName,
 				'layer-components:([font-family:inherit] text-inherit overflow-hidden resize-none)',
-				'layer-variants:(rounded-20px px-4 py-4)',
+				'layer-variants:(rounded-lg px-4 py-4)',
 				{
 					'layer-components:[resize:vertical]': !autoSize,
 					'layer-components:[resize:none]': autoSize,

package/src/components/tooltip/Tooltip.tsx

@@ -12,7 +12,7 @@ function Content({
 		<TooltipPrimitive.Portal>
 			<TooltipPrimitive.Content
 				className={classNames(
-					'layer-components:(relative rounded-md py-2 px-3 bg-black text-white text-sm leading-tight shadow-sm select-none hidden z-tooltip sm:display-initial)',
+					'layer-components:(relative rounded-sm py-2 px-3 bg-black text-white text-sm leading-tight shadow-sm select-none hidden z-tooltip sm:display-initial)',
 					'[&[data-state=delayed-open]]:display-initial',
 					'[&[data-state=instant-open]]:display-initial',
 					'layer-components:transform-origin-[var(--radix-tooltip-content-transform-origin)]',

package/src/hooks/index.ts

@@ -1,10 +1,11 @@
+export * from './useAnimationFrame.js';
+export * from './useLongPress.js';
 export * from './useMergedRef.js';
+export * from './useOnUnmount.js';
 export * from './useSize.js';
 export * from './useStableCallback.js';
+export * from './useTitleBarColor.js';
 export * from './useToggle.js';
 export * from './useVisualViewportOffset.js';
-export * from './useOnUnmount.js';
 export * from './withClassName.js';
-export * from './useAnimationFrame.js';
-export * from './useLongPress.js';
-export * from './useTitleBarColor.js';
+export * from './withProps.js';

package/src/hooks/withProps.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+export const withProps = <T extends {}, Extras extends {}>(
+	Component: React.ComponentType<T & Extras>,
+	extras: Extras,
+) => {
+	return (props: T & Extras) => {
+		return <Component {...props} {...extras} />;
+	};
+};

package/src/themes.stories.tsx

@@ -1,7 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import clsx from 'clsx';
+import { ActionBar, ActionButton } from './components/actions/index.js';
 import { Button } from './components/button/index.js';
 import { Card } from './components/card/index.js';
+import { Icon } from './components/icon/index.js';
+import { AvatarList, Dialog, Tooltip } from './components/index.js';
 import { Input } from './components/input/index.js';
 import { Tabs } from './components/tabs/tabs.js';
 import { TextArea } from './components/textArea/index.js';
@@ -25,6 +28,9 @@ function DemoUI({ className }: { className?: string }) {
 				<Button color="primary">Primary</Button>
 				<Button color="accent">Accent</Button>
 				<Button>Default</Button>
+				<Button color="contrast">Contrast</Button>
+				<Button color="ghost">Ghost</Button>
+				<Button color="ghostAccent">Ghost Accent</Button>
 				<Button size="small" color="destructive">
 					Destructive
 				</Button>
@@ -59,6 +65,44 @@ function DemoUI({ className }: { className?: string }) {
 					<Tabs.Content value="tab2">Tab 2 Content</Tabs.Content>
 				</Tabs>
 			</div>
+			<div>
+				<ActionBar>
+					<ActionButton>
+						<Icon name="placeholder" />
+						Hello
+					</ActionButton>
+					<ActionButton color="primary">
+						<Icon name="placeholder" />
+						World
+					</ActionButton>
+				</ActionBar>
+			</div>
+			<div>
+				<AvatarList count={3}>
+					<AvatarList.Item index={0} name="John Doe" />
+					<AvatarList.Item index={1} name="Jane Doe" />
+					<AvatarList.Item index={2} name="John Smith" />
+				</AvatarList>
+			</div>
+			<div>
+				<Tooltip content="Hello World">
+					<Button>Hover me</Button>
+				</Tooltip>
+			</div>
+			<div>
+				<Dialog>
+					<Dialog.Trigger asChild>
+						<Button>Click</Button>
+					</Dialog.Trigger>
+					<Dialog.Content>
+						<Dialog.Title>Hello there</Dialog.Title>
+						<Dialog.Description>Im a dialog</Dialog.Description>
+						<Dialog.Actions>
+							<Dialog.Close>Close</Dialog.Close>
+						</Dialog.Actions>
+					</Dialog.Content>
+				</Dialog>
+			</div>
 		</div>
 	);
 }

package/src/uno.preset.ts

@@ -1,21 +1,38 @@
 import { entriesToCss, toArray } from '@unocss/core';
 import { PreflightContext, Preset, presetUno } from 'unocss';
 
+const spacing = {
+	sm: 0.125,
+	md: 0.25,
+	lg: 0.33333,
+};
+const roundedScaling = {
+	sm: 1,
+	md: 1,
+	lg: 1.25,
+};
+
 export default function presetAglio({
-	spacingIncrement = 0.25,
+	scale = 'md',
 	interFontLocation = 'https://resources.biscuits.club/fonts/Inter-VariableFont_slnt,wght.ttf',
 	colorRanges = {
 		light: [90, 40],
 		dark: [0, 60],
 	},
+	borderScale = 1,
+	roundedness = 1,
 }: {
-	spacingIncrement?: number;
+	scale?: 'sm' | 'md' | 'lg';
 	interFontLocation?: string;
 	colorRanges?: {
 		light: [number, number];
 		dark: [number, number];
 	};
+	borderScale?: number;
+	roundedness?: number;
 } = {}): Preset {
+	const spacingIncrement = spacing[scale];
+	roundedness *= roundedScaling[scale];
 	const lightColors = generateColors(...colorRanges.light);
 	const darkColors = generateColors(...colorRanges.dark);
 
@@ -93,10 +110,17 @@ export default function presetAglio({
 			},
 			spacing: makeSpacing(spacingIncrement),
 			borderRadius: {
-				sm: '0.25rem',
-				md: '0.5rem',
-				lg: '0.75rem',
-				xl: '1rem',
+				xs: `${0.25 * roundedness}rem`,
+				sm: `${0.5 * roundedness}rem`,
+				md: `${roundedness}rem`,
+				lg: `${roundedness * 1.25}rem`,
+				xl: `${roundedness * 1.5}rem`,
+				full: roundedness === 0 ? '0px' : '9999px',
+			},
+			lineWidth: {
+				DEFAULT: `${borderScale}px`,
+				none: '0',
+				thick: `${2 * borderScale}px`,
 			},
 			width: {
 				content: '700px',
@@ -380,7 +404,7 @@ export default function presetAglio({
 		],
 
 		shortcuts: {
-			'border-default': 'border border-1 border-solid border-black',
+			'border-default': 'border border-solid border-black',
 			'border-light': 'border border-solid border-gray5',
 			'flex-1-0-0': 'flex-grow-1 flex-shrink-0 flex-basis-0',
 			'flex-0-0-auto': 'flex-grow-0 flex-shrink-0 flex-basis-auto',