@arcfusionz/arc-primitive-ui 0.2.10 → 0.2.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -14,7 +14,7 @@ interface BoxVariantsOptions {
|
|
|
14
14
|
radius?: BoxRadius;
|
|
15
15
|
/** Inset spacing around the content. */
|
|
16
16
|
padding?: BoxPadding;
|
|
17
|
-
/** Draw
|
|
17
|
+
/** Draw a 1px Slate 200 border around the frame. Enabled by default. */
|
|
18
18
|
border?: boolean;
|
|
19
19
|
/** Additional classes merged after the Box recipe. */
|
|
20
20
|
className?: string;
|
|
@@ -24,13 +24,13 @@ declare function boxVariants({ background, shadow, radius, padding, border, clas
|
|
|
24
24
|
interface BoxProps extends Omit<ComponentPropsWithoutRef<"div">, "className"> {
|
|
25
25
|
/** Semantic fill and its contrast-safe foreground color. Defaults to the white `background` surface. */
|
|
26
26
|
background?: BoxBackground;
|
|
27
|
-
/** Elevation depth with a soft, diffused blur. Levels `sm`/`md`/`lg` use Slate 400 at 10%/20%/30% opacity and
|
|
27
|
+
/** 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. */
|
|
28
28
|
shadow?: BoxShadow;
|
|
29
29
|
/** Corner treatment. `md` (default) is the ArcFusion 6px radius; `none` and `full` are structural alternatives. */
|
|
30
30
|
radius?: BoxRadius;
|
|
31
31
|
/** Inset spacing around the content: `none` (0), `sm` (12px), `md` (16px), or `lg` (24px). */
|
|
32
32
|
padding?: BoxPadding;
|
|
33
|
-
/** Draw a 1px
|
|
33
|
+
/** Draw a 1px Slate 200 border around the frame. Enabled by default. */
|
|
34
34
|
border?: boolean;
|
|
35
35
|
/**
|
|
36
36
|
* Replace the default `div`, for example `render={<section aria-labelledby="summary-title" />}`.
|
|
@@ -14,9 +14,9 @@ const backgroundClasses = {
|
|
|
14
14
|
};
|
|
15
15
|
const shadowClasses = {
|
|
16
16
|
none: "shadow-none",
|
|
17
|
-
sm: "shadow-[
|
|
18
|
-
md: "shadow-[
|
|
19
|
-
lg: "shadow-[
|
|
17
|
+
sm: "shadow-[0_2px_8px_-2px_var(--tw-shadow-color)] shadow-slate-400/10",
|
|
18
|
+
md: "shadow-[0_4px_14px_-3px_var(--tw-shadow-color)] shadow-slate-400/20",
|
|
19
|
+
lg: "shadow-[0_8px_22px_-5px_var(--tw-shadow-color)] shadow-slate-400/30"
|
|
20
20
|
};
|
|
21
21
|
const radiusClasses = {
|
|
22
22
|
none: "rounded-none",
|
|
@@ -30,10 +30,10 @@ const paddingClasses = {
|
|
|
30
30
|
lg: "p-6"
|
|
31
31
|
};
|
|
32
32
|
/** Class list for an element styled as an ArcFusion Box frame. */
|
|
33
|
-
function boxVariants({ background = "background", shadow = "md", radius = "md", padding = "md", border =
|
|
34
|
-
return cn(baseClasses, backgroundClasses[background], shadowClasses[shadow], radiusClasses[radius], paddingClasses[padding], border && "border border-
|
|
33
|
+
function boxVariants({ background = "background", shadow = "md", radius = "md", padding = "md", border = true, className } = {}) {
|
|
34
|
+
return cn(baseClasses, backgroundClasses[background], shadowClasses[shadow], radiusClasses[radius], paddingClasses[padding], border && "border border-slate-200", className);
|
|
35
35
|
}
|
|
36
|
-
const Box = forwardRef(({ background = "background", shadow = "md", radius = "md", padding = "md", border =
|
|
36
|
+
const Box = forwardRef(({ background = "background", shadow = "md", radius = "md", padding = "md", border = true, render, className, ...rest }, ref) => useRender({
|
|
37
37
|
defaultTagName: "div",
|
|
38
38
|
render,
|
|
39
39
|
ref,
|