@heliosgraphics/ui 2.0.0-alpha.66 → 2.0.0-alpha.68

package/components/Confirm/Confirm.meta.ts

@@ -11,6 +11,10 @@ export const meta: HeliosAttributeMeta<ConfirmProps> = {
 	],
 	_status: "experimental",
 	_category: "pattern",
+	buttonGroupAlign: {
+		type: "'left' | 'center' | 'right'",
+		isOptional: true,
+	},
 	cancelText: {
 		type: "string",
 	},

package/components/Confirm/Confirm.tsx

@@ -3,21 +3,22 @@ import type { ConfirmProps } from "./Confirm.types"
 import type { FC } from "react"
 
 export const Confirm: FC<ConfirmProps> = ({
+	buttonGroupAlign,
+	cancelText,
+	confirmText,
+	description,
+	icon,
+	intent,
+	isOpen,
 	onCancel,
 	onConfirm,
-	isOpen,
 	title,
-	intent,
-	description,
-	icon,
-	cancelText,
-	confirmText,
 }) => {
 	return (
 		<Dialog title={title} onClose={onCancel} isOpen={isOpen} isCentered={true}>
 			<Flex gap={12} isColumn={true}>
 				{!!description && <Text type="paragraph">{description}</Text>}
-				<ButtonGroup>
+				<ButtonGroup align={buttonGroupAlign}>
 					<Button intent={intent} value={confirmText} onClick={onConfirm} {...(icon && { icon })} />
 					<Button intent="neutral" value={cancelText} onClick={onCancel} />
 				</ButtonGroup>

package/components/Confirm/Confirm.types.ts

@@ -1,8 +1,9 @@
-import type { HeliosIconType, HeliosIntentionType } from "../.."
+import type { ButtonGroupProps, HeliosIconType, HeliosIntentionType } from "../.."
 
 export interface ConfirmProps {
 	cancelText: string
 	confirmText: string
+	buttonGroupAlign?: ButtonGroupProps["align"]
 	description?: string
 	icon?: HeliosIconType
 	intent: HeliosIntentionType

package/components/Debug/Debug.tsx

@@ -9,7 +9,7 @@ import { getClasses } from "@heliosgraphics/utils"
 import { getColorMap } from "./Debug.utils"
 
 export const Debug: FC<DebugProps> = ({ color = "gray", appearance = "dark" }) => {
-	const debugClasses: string = getClasses(styles.debug, "elevation-large")
+	const debugClasses: string = getClasses(styles.debug, "elevation-lg")
 	const colorMap = getColorMap(color)
 
 	const [isClosed, setIsClosed] = useState(false)

package/components/Dialog/Dialog.tsx

@@ -68,7 +68,7 @@ export const Dialog: FC<DialogProps> = ({ title, children, isNarrow, isOpen, isC
 		return isDialog && onClose()
 	}
 
-	const dialogClasses: string = getClasses(styles.dialog, "helios-scrollbar", "elevation-large", {
+	const dialogClasses: string = getClasses(styles.dialog, "ui-scrollbar", "elevation-lg", {
 		[styles.dialogCentered]: isCentered,
 		[styles.dialogNarrow]: isNarrow,
 	})

package/components/Flex/Flex.utils.ts

@@ -27,9 +27,9 @@ export const getFlexUtility = (props?: FlexProps): string => {
 	if (props.onClick) flexClasses.add("cursor-pointer")
 	if (props.isFullWidth) flexClasses.add("wp-100")
 	if (props.isNoWrap) flexClasses.add("nowrap")
-	if (props.elevation === "small") flexClasses.add("elevation-small")
-	if (props.elevation === "medium") flexClasses.add("elevation-medium")
-	if (props.elevation === "large") flexClasses.add("elevation-large")
+	if (props.elevation === "small") flexClasses.add("elevation-sm")
+	if (props.elevation === "medium") flexClasses.add("elevation-md")
+	if (props.elevation === "large") flexClasses.add("elevation-lg")
 	if (flexGrow > 0 && flexGrow <= 8) flexClasses.add(`grow-${props.grow}`)
 
 	if (props.withRadius) {

package/css/feat.atomics.css

@@ -19,6 +19,27 @@
 	backdrop-filter: blur(3px);
 }
 
+/* radius utilities */
+.radius-none {
+	border-radius: 0;
+}
+
+.radius-small {
+	border-radius: var(--radius-sm);
+}
+
+.radius-normal {
+	border-radius: var(--radius-md);
+}
+
+.radius-large {
+	border-radius: var(--radius-lg);
+}
+
+.radius-max {
+	border-radius: 9999px;
+}
+
 /* scrollbar */
 .ui-scrollbar::-webkit-scrollbar {
 	height: 10px;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@heliosgraphics/ui",
-	"version": "2.0.0-alpha.66",
+	"version": "2.0.0-alpha.68",
 	"type": "module",
 	"author": "Chris Puska <chris@puska.org>",
 	"private": false,