@arcfusionz/arc-primitive-ui 0.2.10 → 0.2.12

package/dist/components/Box/Box.d.ts

@@ -14,7 +14,7 @@ interface BoxVariantsOptions {
   radius?: BoxRadius;
   /** Inset spacing around the content. */
   padding?: BoxPadding;
-  /** Draw the standard semantic border around the frame. */
+  /** Draw a 1px Slate 200 border around the frame. Enabled by default. */
   border?: boolean;
   /** Additional classes merged after the Box recipe. */
   className?: string;
@@ -24,13 +24,13 @@ declare function boxVariants({ background, shadow, radius, padding, border, clas
 interface BoxProps extends Omit<ComponentPropsWithoutRef<"div">, "className"> {
   /** Semantic fill and its contrast-safe foreground color. Defaults to the white `background` surface. */
   background?: BoxBackground;
-  /** Elevation depth with a soft, diffused blur. Levels `sm`/`md`/`lg` use Slate 400 at 10%/20%/30% opacity and 12px/20px/32px blur; use `none` for flat layout containers. */
+  /** Elevation depth with a soft, diffused blur. Levels `sm`/`md`/`lg` use Slate 400 at 10%/20%/30% opacity and 8px/14px/22px blur; use `none` for flat layout containers. */
   shadow?: BoxShadow;
   /** Corner treatment. `md` (default) is the ArcFusion 6px radius; `none` and `full` are structural alternatives. */
   radius?: BoxRadius;
   /** Inset spacing around the content: `none` (0), `sm` (12px), `md` (16px), or `lg` (24px). */
   padding?: BoxPadding;
-  /** Draw a 1px semantic border around the frame. */
+  /** Draw a 1px Slate 200 border around the frame. Enabled by default. */
   border?: boolean;
   /**
    * Replace the default `div`, for example `render={<section aria-labelledby="summary-title" />}`.

package/dist/components/Box/Box.js

@@ -14,9 +14,9 @@ const backgroundClasses = {
 };
 const shadowClasses = {
 	none: "shadow-none",
-	sm: "shadow-[0_3px_12px_-3px_var(--tw-shadow-color)] shadow-slate-400/10",
-	md: "shadow-[0_6px_20px_-5px_var(--tw-shadow-color)] shadow-slate-400/20",
-	lg: "shadow-[0_12px_32px_-8px_var(--tw-shadow-color)] shadow-slate-400/30"
+	sm: "shadow-[0_2px_8px_-2px_var(--tw-shadow-color)] shadow-slate-400/10",
+	md: "shadow-[0_4px_14px_-3px_var(--tw-shadow-color)] shadow-slate-400/20",
+	lg: "shadow-[0_8px_22px_-5px_var(--tw-shadow-color)] shadow-slate-400/30"
 };
 const radiusClasses = {
 	none: "rounded-none",
@@ -30,10 +30,10 @@ const paddingClasses = {
 	lg: "p-6"
 };
 /** Class list for an element styled as an ArcFusion Box frame. */
-function boxVariants({ background = "background", shadow = "md", radius = "md", padding = "md", border = false, className } = {}) {
-	return cn(baseClasses, backgroundClasses[background], shadowClasses[shadow], radiusClasses[radius], paddingClasses[padding], border && "border border-border", className);
+function boxVariants({ background = "background", shadow = "md", radius = "md", padding = "md", border = true, className } = {}) {
+	return cn(baseClasses, backgroundClasses[background], shadowClasses[shadow], radiusClasses[radius], paddingClasses[padding], border && "border border-slate-200", className);
 }
-const Box = forwardRef(({ background = "background", shadow = "md", radius = "md", padding = "md", border = false, render, className, ...rest }, ref) => useRender({
+const Box = forwardRef(({ background = "background", shadow = "md", radius = "md", padding = "md", border = true, render, className, ...rest }, ref) => useRender({
 	defaultTagName: "div",
 	render,
 	ref,

package/dist/components/Button/Button.d.ts

@@ -8,6 +8,8 @@ interface ButtonVariantsOptions {
   size?: ButtonSize;
   fullWidth?: boolean;
   iconOnly?: boolean;
+  /** Render an icon-only button as a circle instead of the default rounded square. */
+  circular?: boolean;
   className?: string;
 }
 /**
@@ -18,7 +20,7 @@ interface ButtonVariantsOptions {
  *
  *   <a href="/docs" className={buttonVariants({ variant: "primary" })}>Docs</a>
  */
-declare function buttonVariants({ variant, size, fullWidth, iconOnly, className }?: ButtonVariantsOptions): string;
+declare function buttonVariants({ variant, size, fullWidth, iconOnly, circular, className }?: ButtonVariantsOptions): string;
 interface ButtonBaseProps extends Omit<ComponentPropsWithoutRef<typeof Button>, "className"> {
   /** Visual style of the button */
   variant?: ButtonVariant;
@@ -43,13 +45,18 @@ interface ButtonBaseProps extends Omit<ComponentPropsWithoutRef<typeof Button>,
 }
 /** Icon-only buttons have no visible label, so an accessible name is required. */
 type ButtonIconOnlyProps = {
+  /** Button that renders only an icon; requires an accessible name. */
   iconOnly: true;
+  /** Use a circular shape instead of the default rounded square. */
+  circular?: boolean;
   "aria-label": string;
 } | {
   iconOnly: true;
+  circular?: boolean;
   "aria-labelledby": string;
 } | {
   iconOnly?: false;
+  circular?: never;
 };
 type ButtonProps = ButtonBaseProps & ButtonIconOnlyProps;
 declare const Button$1: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/Button/Button.js

@@ -30,8 +30,8 @@ const iconOnlySizeClasses = {
 *
 *   <a href="/docs" className={buttonVariants({ variant: "primary" })}>Docs</a>
 */
-function buttonVariants({ variant = "primary", size = "md", fullWidth = false, iconOnly = false, className } = {}) {
-	return cn(baseClasses, variantClasses[variant], sizeClasses[size], iconOnly && iconOnlySizeClasses[size], fullWidth && "w-full", className);
+function buttonVariants({ variant = "primary", size = "md", fullWidth = false, iconOnly = false, circular = false, className } = {}) {
+	return cn(baseClasses, variantClasses[variant], sizeClasses[size], iconOnly && iconOnlySizeClasses[size], iconOnly && circular && "rounded-full", fullWidth && "w-full", className);
 }
 const loadingDataAttributes = { "data-loading": "" };
 const RIPPLE_DURATION_MS = 550;
@@ -106,7 +106,7 @@ function Spinner() {
 		})]
 	});
 }
-const Button$1 = forwardRef(({ variant = "primary", size = "md", fullWidth = false, iconOnly = false, loading = false, loadingText, startIcon, endIcon, disabled = false, focusableWhenDisabled = false, onPointerDown, onClick, className, children, ...rest }, ref) => {
+const Button$1 = forwardRef(({ variant = "primary", size = "md", fullWidth = false, iconOnly = false, circular = false, loading = false, loadingText, startIcon, endIcon, disabled = false, focusableWhenDisabled = false, onPointerDown, onClick, className, children, ...rest }, ref) => {
 	const rippleContainerRef = useRef(null);
 	const handleRipplePointerDown = (event) => {
 		const container = rippleContainerRef.current;
@@ -152,7 +152,8 @@ const Button$1 = forwardRef(({ variant = "primary", size = "md", fullWidth = fal
 			variant,
 			size,
 			fullWidth,
-			iconOnly
+			iconOnly,
+			circular
 		}), loading && "data-disabled:opacity-100", className),
 		...loading ? loadingDataAttributes : void 0,
 		...rest,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcfusionz/arc-primitive-ui",
-  "version": "0.2.10",
+  "version": "0.2.12",
   "description": "ArcFusion primitive UI components",
   "license": "MIT",
   "type": "module",