@arcfusionz/arc-primitive-ui 0.3.7 → 0.3.9

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

@@ -3,14 +3,14 @@ import { useRender } from "@base-ui/react/use-render";
 //#region src/components/Box/Box.d.ts
 type BoxBackground = "background" | "surface" | "muted" | "transparent" | "primary" | "secondary" | "hero";
 type BoxShadow = "none" | "sm" | "md" | "lg";
-type BoxRadius = "none" | "md" | "full";
+type BoxRadius = "none" | "md" | "lg" | "full";
 type BoxPadding = "none" | "sm" | "md" | "lg";
 interface BoxVariantsOptions {
   /** Semantic fill and its contrast-safe foreground color. */
   background?: BoxBackground;
   /** Elevation depth with a soft, diffused blur. All levels use Slate 400 at no more than 30% opacity. */
   shadow?: BoxShadow;
-  /** Corner treatment. `md` uses the ArcFusion 6px radius token. */
+  /** Corner treatment. Defaults to the 12px `lg` container radius. */
   radius?: BoxRadius;
   /** Inset spacing around the content. */
   padding?: BoxPadding;
@@ -26,7 +26,7 @@ interface BoxProps extends Omit<ComponentPropsWithoutRef<"div">, "className"> {
   background?: BoxBackground;
   /** 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. */
+  /** Corner treatment. `lg` (default) is the ArcFusion 12px container radius; `md` is the 6px control radius. */
   radius?: BoxRadius;
   /** Inset spacing around the content: `none` (0), `sm` (12px), `md` (16px), or `lg` (24px). */
   padding?: BoxPadding;

package/dist/components/Box/Box.js

@@ -21,6 +21,7 @@ const shadowClasses = {
 const radiusClasses = {
 	none: "rounded-none",
 	md: "rounded-md",
+	lg: "rounded-lg",
 	full: "rounded-full"
 };
 const paddingClasses = {
@@ -30,10 +31,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 = true, className } = {}) {
+function boxVariants({ background = "background", shadow = "md", radius = "lg", 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 = true, render, className, ...rest }, ref) => useRender({
+const Box = forwardRef(({ background = "background", shadow = "md", radius = "lg", padding = "md", border = true, render, className, ...rest }, ref) => useRender({
 	defaultTagName: "div",
 	render,
 	ref,

package/package.json

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

package/src/styles/theme.css

@@ -38,12 +38,14 @@
 
   /* ---------------------------------------------------------------------
    * Radius
-   * The system uses a single 6px radius. Tailwind's default radius scale
-   * is removed so `rounded-md` is the only sized option (`rounded-none`
-   * and `rounded-full` stay available for structural cases).
+   * The system uses a 6px control radius and a 12px container radius.
+   * Tailwind's default radius scale is removed so only `rounded-md` and
+   * `rounded-lg` are sized options (`rounded-none` and `rounded-full` stay
+   * available for structural cases).
    * ------------------------------------------------------------------- */
   --radius-*: initial;
   --radius-md: 6px;
+  --radius-lg: 12px;
 
   /* ---------------------------------------------------------------------
    * Motion
@@ -309,6 +311,8 @@
   --color-background: #ffffff; /* [brand] the "Clean Slate" */
   --color-foreground: var(--color-slate-900);
 
+  --color-canvas: #f9fafc;
+
   --color-surface: var(--color-slate-50);
   --color-surface-foreground: var(--color-slate-900);