@a-type/ui 1.4.0 → 1.5.0

package/src/components/progress/Progress.tsx

@@ -3,11 +3,11 @@ import { withClassName } from '../../hooks.js';
 
 export const ProgressRoot = withClassName(
 	ProgressPrimitive.Root,
-	'layer-components:(w-full relative overflow-hidden border border-default rounded-full)',
+	'layer-components:(w-full relative overflow-hidden border border-default rounded-lg)',
 );
 export const ProgressIndicator = withClassName(
 	ProgressPrimitive.Indicator,
-	'layer-components:(bg-primary w-full h-6px translate-x-[calc(-100%*(1-var(--value)))] rounded-full transition-transform)',
+	'layer-components:(bg-primary w-full h-6px translate-x-[calc(-100%*(1-var(--value)))] rounded-lg transition-transform)',
 	'layer-components:[&[data-state=complete]]:(bg-accent)',
 	'layer-variants:[&[data-color=accent]]:(bg-accent)',
 );

package/src/components/select/Select.tsx

@@ -147,7 +147,7 @@ export const SelectContent = withPassthroughNativeRender(
 			<SelectPrimitive.Portal>
 				<SelectPrimitive.Content
 					className={classNames(
-						'layer-components:(overflow-hidden bg-white rounded-lg border border-solid border-1 border-black z-menu shadow-lg)',
+						'layer-components:(overflow-hidden bg-white rounded-lg border border-solid border border-black z-menu shadow-lg)',
 						'layer-components:transform-origin-[var(--radix-select-content-transform-origin)]',
 						'layer-components:[&[data-state=open]]:animate-popover-in',
 						'layer-components:[&[data-state=closed]]:animate-popover-out',
@@ -185,7 +185,7 @@ export const NativeSelect = ({
 		<div className={classNames('relative', className)}>
 			<select
 				className={classNames(
-					'appearance-none font-inherit bg-white inline-flex items-center justify-center rounded-full px-3 py-1 pr-8 text-sm gap-2 color-black border-solid border border-gray5 hover:border-gray7 focus:outline-none focus-visible:shadow-focus [&[data-placeholder]]:color-gray8',
+					'appearance-none font-inherit bg-white inline-flex items-center justify-center rounded-lg px-3 py-1 pr-8 text-sm gap-2 color-black border-solid border border-gray5 hover:border-gray7 focus:outline-none focus-visible:shadow-focus [&[data-placeholder]]:color-gray8',
 				)}
 				{...props}
 				ref={forwardedRef}

package/src/components/skeletons/skeletons.tsx

@@ -1,5 +1,5 @@
-import { useState } from 'react';
 import classNames from 'clsx';
+import { useState } from 'react';
 
 export const TextSkeleton = ({
 	maxLength,
@@ -15,7 +15,7 @@ export const TextSkeleton = ({
 	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',
+				'w-full h-full rounded-md 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={{

package/src/components/slider/Slider.tsx

@@ -7,16 +7,16 @@ export const SliderRoot = withClassName(
 );
 export const SliderTrack = withClassName(
 	SliderPrimitive.Track,
-	'layer-components:(bg-transparent relative grow rounded-full h-9px border border-1px border-solid border-black)',
+	'layer-components:(bg-transparent relative grow rounded-lg h-9px border borderpx border-solid border-black)',
 );
 export const SliderRange = withClassName(
 	SliderPrimitive.Range,
-	'layer-components:(absolute bg-accent rounded-full h-full)',
+	'layer-components:(absolute bg-accent rounded-lg h-full)',
 	'layer-variants:[&[data-color=primary]]:bg-primary',
 );
 export const SliderThumb = withClassName(
 	SliderPrimitive.Thumb,
-	'layer-components:(block w-5 h-5 bg-white shadow-sm rounded-full ring-2 ring-black touch-none transition-all)',
+	'layer-components:(block w-5 h-5 bg-white shadow-sm rounded-lg ring-2 ring-black touch-none transition-all)',
 	'layer-components:hover:(shadow-md)',
 	'layer-components:active:(shadow-lg ring-4 ring-accent-dark ring-opacity-50 bg-accent-light)',
 	'layer-components:focus-visible:(shadow-lg ring-4 ring-accent-dark ring-opacity-50 outline-none bg-accent-light)',

package/src/components/switch/Switch.tsx

@@ -3,12 +3,12 @@ import { withClassName } from '../../hooks/withClassName.js';
 
 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',
+	'unset w-42px h-25px bg-white rounded-lg 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',
+	'block w-21px h-21px bg-white rounded-lg border-default transition-transform will-change-transform [&[data-state=checked]]:translate-x-19px',
 );
 
 export const Switch = Object.assign(

package/src/components/tabs/tabs.tsx

@@ -10,7 +10,7 @@ export const TabsList = withClassName(
 
 export const TabsTrigger = 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)',
+	'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 border 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)',
 );
 

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/index.ts

@@ -1,5 +1,6 @@
 export { clsx } from 'clsx';
 export { toast } from 'react-hot-toast';
 
-export * from './hooks.js';
+export * from './colorMode.js';
 export * from './components/index.js';
+export * from './hooks.js';

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',