@a-type/ui 6.0.35 → 6.0.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a-type/ui",
-  "version": "6.0.35",
+  "version": "6.0.37",
   "type": "module",
   "repository": {
     "url": "https://github.com/a-type/ui"
@@ -99,8 +99,7 @@
   "scripts": {
     "build:transpile": "tsc",
     "build:copy": "node --experimental-strip-types ./scripts/copy.ts",
-    "build:arbor": "arbor build -o ./dist/css/arbor.css",
-    "build": "pnpm run build:transpile && pnpm run build:copy && pnpm run build:arbor",
+    "build": "pnpm run build:transpile && pnpm run build:copy",
     "prepublish": "pnpm run build",
     "icons": "node ./scripts/generateIcons.js",
     "storybook": "storybook dev -p 6006",

package/src/arbor/arbor.ts

@@ -186,7 +186,7 @@ export function presetAtype<
 				accent: $.mode.color.palette.leek,
 			},
 			action: {
-				roundness: config?.roundActions === false ? undefined : 99,
+				roundness: config?.roundActions === false ? undefined : 2,
 
 				light: {
 					bg: $.mode.color.main.light,

package/src/components/button/Button.module.css

@@ -7,6 +7,7 @@
 	display: flex;
 	flex-direction: row;
 	align-items: center;
+	justify-content: start;
 	gap: var(--m-space-sm);
 	align-self: center;
 
@@ -73,6 +74,24 @@
 		padding: 0;
 		width: fit-content;
 	}
+	&[data-full='width'],
+	&[data-full='both'] {
+		width: 100%;
+	}
+	&[data-full='height'],
+	&[data-full='both'] {
+		height: 100%;
+	}
+
+	&[data-align='start'] {
+		align-self: start;
+	}
+	&[data-align='center'] {
+		align-self: center;
+	}
+	&[data-align='end'] {
+		align-self: end;
+	}
 
 	@apply --mx-hover;
 	@apply --mx-active;

package/src/components/button/Button.stories.tsx

@@ -270,3 +270,27 @@ export const SkeletonTest: Story = {
 		);
 	},
 };
+
+export const FullSizeTest: Story = {
+	render(args) {
+		return (
+			<Box col gap full="width">
+				<Button {...args} full="width">
+					<Icon name="placeholder" />
+					Full Width
+				</Button>
+				<div style={{ width: '100%', aspectRatio: 1 }}>
+					<Button {...args} full="height">
+						<Icon name="placeholder" />
+						Full Height
+					</Button>
+				</div>
+				<div style={{ width: '100%', aspectRatio: 1 }}>
+					<Button {...args} full>
+						Full Both
+					</Button>
+				</div>
+			</Box>
+		);
+	},
+};

package/src/components/button/Button.tsx

@@ -37,6 +37,8 @@ export interface ButtonProps
 	 * Shortcuts for @mode-* classes.
 	 */
 	color?: 'primary' | 'accent' | 'success' | 'attention';
+	full?: 'width' | 'height' | boolean;
+	align?: 'start' | 'center' | 'end';
 }
 
 export function ButtonRoot({
@@ -55,6 +57,8 @@ export function ButtonRoot({
 	forceIconMode,
 	disableDropdownTriggerIcon,
 	disableDefaultLoadingIndicator,
+	full,
+	align,
 	ref,
 	...props
 }: ButtonProps) {
@@ -88,6 +92,8 @@ export function ButtonRoot({
 		'data-disable-icon-mode': disableIconMode,
 		'data-force-icon-mode': forceIconMode,
 		'data-emphasis': emphasis,
+		'data-full': full === true ? 'both' : full,
+		'data-align': align,
 		className: clsx(
 			emphasis === 'unstyled' ? cls.unstyled : cls.root,
 			emphasis === 'ghost' && '@mode-bold',

package/src/components/forms/SubmitButton.tsx

@@ -1,7 +1,5 @@
-import clsx from 'clsx';
 import { useFormikContext } from 'formik';
 import { Button, ButtonProps } from '../button/Button.js';
-import cls from './SubmitButton.module.css';
 
 export function SubmitButton({ className, ...props }: ButtonProps) {
 	const { isSubmitting, isValid } = useFormikContext();
@@ -10,7 +8,8 @@ export function SubmitButton({ className, ...props }: ButtonProps) {
 			loading={isSubmitting}
 			disabled={!isValid}
 			emphasis="primary"
-			className={clsx(cls.root, className)}
+			align="end"
+			className={className}
 			{...props}
 			type="submit"
 		/>

package/src/components/numberStepper/NumberStepper.tsx

@@ -1,6 +1,6 @@
 import { fractionToText } from '@a-type/utils';
 import classNames from 'clsx';
-import { ReactNode } from 'react';
+import { CSSProperties, ReactNode } from 'react';
 import { Button } from '../button/index.js';
 import { Icon } from '../icon/Icon.js';
 import cls from './NumberStepper.module.css';
@@ -18,6 +18,7 @@ export interface NumberStepperProps {
 	max?: number;
 	id?: string;
 	defaultValue?: number;
+	style?: CSSProperties;
 }
 
 export function NumberStepper({

package/dist/components/forms/SubmitButton.module.css

@@ -1,3 +0,0 @@
-.root {
-	align-self: flex-end;
-}

package/src/components/forms/SubmitButton.module.css

@@ -1,3 +0,0 @@
-.root {
-	align-self: flex-end;
-}