@a-type/ui 4.0.0-beta.1 → 4.0.0-beta.10

package/dist/esm/hooks/withProps.js

@@ -5,7 +5,7 @@ export const withProps = (Component, extras) => {
         return _jsx(Component, Object.assign({}, props, extras));
     };
 };
-export const withoutProps = (Component, remove) => {
+export const withoutProps = (Component, _remove) => {
     return (props) => {
         return _jsx(Component, Object.assign({}, props));
     };

package/dist/esm/hooks/withProps.js.map

@@ -1 +1 @@
-{"version":3,"file":"withProps.js","sourceRoot":"","sources":["../../../src/hooks/withProps.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,MAAM,SAAS,GAAG,CACxB,SAAiC,EACjC,MAAkB,EACjB,EAAE;IACH,OAAO,CAAC,KAAQ,EAAE,EAAE;QACnB,OAAO,KAAC,SAAS,oBAAK,KAAK,EAAM,MAAM,EAAI,CAAC;IAC7C,CAAC,CAAC;AACH,CAAC,CAAC;AAKF,MAAM,CAAC,MAAM,YAAY,GAAG,CAC3B,SAAiC,EACjC,MAAW,EACV,EAAE;IACH,OAAO,CAAC,KAAiB,EAAE,EAAE;QAC5B,OAAO,KAAC,SAAS,oBAAM,KAAa,EAAI,CAAC;IAC1C,CAAC,CAAC;AACH,CAAC,CAAC"}
+{"version":3,"file":"withProps.js","sourceRoot":"","sources":["../../../src/hooks/withProps.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,MAAM,SAAS,GAAG,CACxB,SAAiC,EACjC,MAAkB,EACjB,EAAE;IACH,OAAO,CAAC,KAAQ,EAAE,EAAE;QACnB,OAAO,KAAC,SAAS,oBAAK,KAAK,EAAM,MAAM,EAAI,CAAC;IAC7C,CAAC,CAAC;AACH,CAAC,CAAC;AAKF,MAAM,CAAC,MAAM,YAAY,GAAG,CAC3B,SAAiC,EACjC,OAAY,EACX,EAAE;IACH,OAAO,CAAC,KAAiB,EAAE,EAAE;QAC5B,OAAO,KAAC,SAAS,oBAAM,KAAa,EAAI,CAAC;IAC1C,CAAC,CAAC;AACH,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a-type/ui",
-  "version": "4.0.0-beta.1",
+  "version": "4.0.0-beta.10",
   "type": "module",
   "repository": {
     "url": "https://github.com/a-type/ui"

package/src/components/avatar/Avatar.stories.tsx

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Avatar } from './Avatar.js';
+
+const meta = {
+	title: 'Components/Avatar',
+	component: Avatar,
+	argTypes: {},
+	parameters: {
+		controls: { expanded: true },
+	},
+} satisfies Meta<typeof Avatar>;
+
+export default meta;
+
+type Story = StoryObj<typeof Avatar>;
+
+export const Default: Story = {
+	render(args) {
+		return <Avatar {...args} />;
+	},
+};
+
+export const WithImage: Story = {
+	args: {
+		imageSrc: 'https://i.pravatar.cc/300',
+		name: 'John Doe',
+	},
+};
+
+export const WithName: Story = {
+	args: {
+		name: 'Jane Smith',
+	},
+};
+
+export const FailedImage: Story = {
+	args: {
+		imageSrc: 'http://localhost:3333/nonexistent.jpg',
+		name: 'Fallback User',
+	},
+};

package/src/components/avatar/Avatar.tsx

@@ -49,12 +49,14 @@ export function Avatar({
 					crossOrigin={crossOrigin}
 				/>
 			)}
-			<BaseAvatar.Fallback
-				className="text-size-[calc(0.5px*var(--avatar-size,24px))]"
-				style={{ '--avatar-size': size } as any}
-			>
-				{name?.charAt(0) || '?'}
-			</BaseAvatar.Fallback>
+			{!empty && (
+				<BaseAvatar.Fallback
+					className="text-size-[calc(0.5px*var(--avatar-size,24px))]"
+					style={{ '--avatar-size': size } as any}
+				>
+					{name?.charAt(0) || '?'}
+				</BaseAvatar.Fallback>
+			)}
 			{empty && <Icon name="profile" />}
 		</BaseAvatar.Root>
 	);

package/src/components/button/Button.tsx

@@ -5,6 +5,7 @@ import {
 import { clsx } from 'clsx';
 import { AnimatePresence, motion } from 'motion/react';
 import {
+	ButtonHTMLAttributes,
 	Children,
 	Fragment,
 	memo,
@@ -25,7 +26,9 @@ import { Spinner } from '../spinner/index.js';
 import { SlotDiv } from '../utility/SlotDiv.js';
 import { getButtonClassName } from './classes.js';
 
-export type ButtonProps = BaseButtonProps & {
+export interface ButtonProps
+	extends ButtonHTMLAttributes<HTMLButtonElement>,
+		Pick<BaseButtonProps, 'render' | 'focusableWhenDisabled'> {
 	color?: PaletteName;
 	emphasis?:
 		| 'primary'
@@ -44,7 +47,7 @@ export type ButtonProps = BaseButtonProps & {
 	disableIconMode?: boolean;
 	ref?: Ref<HTMLButtonElement>;
 	disableDropdownTriggerIcon?: boolean;
-};
+}
 
 export function ButtonRoot({
 	className,

package/src/components/collapsible/Collapsible.tsx

@@ -60,8 +60,15 @@ export const CollapsibleSimple = ({
 	</CollapsibleRoot>
 );
 
+export const CollapsibleIcon = withClassName(
+	'span',
+	'layer-components:transition-transform',
+	'layer-components:[[data-panel-open]_&]:rotate-180',
+);
+
 export const Collapsible = Object.assign(CollapsibleRoot, {
 	Content: CollapsibleContent,
 	Trigger: CollapsibleTrigger,
 	Simple: CollapsibleSimple,
+	Icon: CollapsibleIcon,
 });

package/src/components/dialog/Dialog.tsx

@@ -19,7 +19,6 @@ import {
 	useRef,
 	useState,
 } from 'react';
-import { withProps } from '../../hooks.js';
 import { useMediaQuery } from '../../hooks/useMediaQuery.js';
 import useMergedRef from '../../hooks/useMergedRef.js';
 import { withClassName } from '../../hooks/withClassName.js';
@@ -431,9 +430,9 @@ const DialogRoot = (props: DialogRootProps) => {
 	);
 };
 
-export const DialogTrigger = withProps(BaseDialog.Trigger, {
-	render: <Button />,
-});
+export const DialogTrigger = ({ render, ...props }: DialogTriggerProps) => (
+	<BaseDialog.Trigger render={render || <Button />} {...props} />
+);
 export const DialogContent = Content;
 export const DialogTitle = StyledTitle;
 export const DialogDescription = StyledDescription;

package/src/components/forms/SubmitButton.tsx

@@ -1,7 +1,7 @@
 import { useFormikContext } from 'formik';
 import { Button, ButtonProps } from '../button/Button.js';
 
-export function SubmitButton({ nativeButton: _, ...props }: ButtonProps) {
+export function SubmitButton(props: ButtonProps) {
 	const { isSubmitting, isValid } = useFormikContext();
 	return (
 		<Button

package/src/components/imageUploader/ImageUploader.tsx

@@ -248,7 +248,6 @@ export function ImageUploaderFileButton({ children, ...props }: ButtonProps) {
 			emphasis="ghost"
 			size="small"
 			render={<label htmlFor={inputId} />}
-			nativeButton={false}
 			visuallyFocused={focused}
 			{...props}
 		>

package/src/components/popover/Popover.tsx

@@ -20,6 +20,7 @@ const StyledContent = withClassName(
 	'layer-components:data-[ending-style]:(opacity-0 scale-95 translate-y-4px)',
 	'important:motion-reduce:transition-none',
 	'layer-components:(max-h-[--available-height] max-w-[--available-width])',
+	'layer-components:focus-visible:(outline-none ring-2 ring-accent)',
 );
 
 const StyledArrow = withClassName(
@@ -43,7 +44,6 @@ export const PopoverRoot = PopoverPrimitive.Root;
 export const PopoverTrigger = PopoverPrimitive.Trigger;
 export const PopoverArrow = StyledArrow;
 export const PopoverClose = StyledClose;
-export const PopoverAnchor = PopoverPrimitive.Handle;
 
 export const PopoverContent = function PopoverContent({
 	ref,
@@ -128,7 +128,6 @@ export const Popover = Object.assign(PopoverRoot, {
 	Arrow: PopoverArrow,
 	Close: PopoverClose,
 	Trigger: PopoverTrigger,
-	Anchor: PopoverAnchor,
 	Title: PopoverTitle,
 	Description: PopoverDescription,
 	createHandle: PopoverPrimitive.createHandle,

package/src/components/richEditor/index.tsx

@@ -4,10 +4,14 @@ export const tipTapClassName = clsx(
 	'layer-components:(w-full leading-relaxed)',
 	'layer-components:[&_.ProseMirror:focus]:(outline-none shadow-focus)',
 	'layer-components:[&_h1,h2,h3,p]:mt-0',
-	'layer-components:[&_h1]:(text-2xl font-semibold mb-md [&:not:first-child]:mt-xl)',
-	'layer-components:[&_h2]:(text-lg font-bold color-gray-dark color-darken-3 mb-md [&:not:first-child]:mt-lg)',
-	'layer-components:[&_h3]:(text-md font-500 color-gray-dark color-darken-2 mb-sm [&:not:first-child]:mt-md)',
-	'layer-components:[&_h4]:(text-xs color-gray-dark color-darken-1 mb-sm [&:not:first-child]:mt-md uppercase)',
+	'layer-components:[&_h1]:(text-2xl font-semibold mb-md)',
+	'layer-components:[&_h1]:[&:not(:first-child)]:mt-xl',
+	'layer-components:[&_h2]:(text-lg font-bold color-gray-dark color-darken-3 mb-md)',
+	'layer-components:[&_h2]:[&:not(:first-child)]:mt-lg',
+	'layer-components:[&_h3]:(text-md font-500 color-gray-dark color-darken-2 mb-sm)',
+	'layer-components:[&_h3]:[&:not(:first-child)]:mt-md',
+	'layer-components:[&_h4]:(text-xs color-gray-dark color-darken-1 mb-sm uppercase)',
+	'layer-components:[&_h4]:[&:not(:first-child)]:mt-md',
 	'layer-components:[&_p]:(mb-md mt-0)',
 	'layer-components:[&_a]:underline',
 	'layer-components:[&_blockquote]:(border-l-4 border-l-solid border-gray pl-4 mb-md mt-md ml-md)',

package/src/components/select/Select.tsx

@@ -27,7 +27,7 @@ export const SelectItem = ({
 }) => {
 	return (
 		<SelectItemRoot className={className} {...props} ref={forwardedRef}>
-			<BaseSelect.ItemText>{children}</BaseSelect.ItemText>
+			<SelectItemText>{children}</SelectItemText>
 			<SelectItemIndicator />
 		</SelectItemRoot>
 	);
@@ -235,4 +235,7 @@ export const Select = Object.assign(SelectBase, {
 	Icon: SelectIcon,
 	Content: SelectContent,
 	Arrow: SelectArrow,
+	ItemRoot: SelectItemRoot,
+	ItemText: SelectItemText,
+	ItemIndicator: SelectItemIndicator,
 });

package/src/components/slider/Slider.tsx

@@ -4,7 +4,10 @@ import { Ref } from 'react';
 import { withClassName } from '../../hooks.js';
 import { PaletteName } from '../../uno/index.js';
 
-export const SliderRoot = BaseSlider.Root;
+export const SliderRoot = withClassName(
+	BaseSlider.Root,
+	'layer-components:w-full',
+);
 
 export const SliderControl = withClassName(
 	BaseSlider.Control,

package/src/components/tabs/tabs.tsx

@@ -45,7 +45,7 @@ export const TabsContent = withClassName(
 export const TabsList = ({
 	children,
 	className,
-	color = 'gray',
+	color = 'primary',
 	...props
 }: TabsListProps & {
 	color?: 'gray' | 'primary';

package/src/hooks/withProps.tsx

@@ -14,7 +14,7 @@ type OptionalKeys<T> = {
 }[keyof T];
 export const withoutProps = <T extends {}, P extends OptionalKeys<T>>(
 	Component: React.ComponentType<T>,
-	remove: P[],
+	_remove: P[],
 ) => {
 	return (props: Omit<T, P>) => {
 		return <Component {...(props as any)} />;