@instruments/materia-ui 0.4.3 → 0.4.4
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.
|
@@ -3,7 +3,11 @@ import type { SwatchTileSizeProp, SwatchTileVariant, TileSwatchProps } from "./s
|
|
|
3
3
|
type SizeTier = "tiny" | "small" | "standard";
|
|
4
4
|
declare const isTileSizeScale: (size: SwatchTileSizeProp) => size is SwatchTileSize;
|
|
5
5
|
declare const ringShadowMap: Record<SizeTier, string>;
|
|
6
|
-
/**
|
|
6
|
+
/**
|
|
7
|
+
* Radius of the padded ring and frame ring, concentric with the border. A bare
|
|
8
|
+
* tile has no border, so its rings sit on its edge and take whatever corner it
|
|
9
|
+
* has, including one set through `className`.
|
|
10
|
+
*/
|
|
7
11
|
declare const getInnerRingRadius: ({ compact, isCard, tier, }: {
|
|
8
12
|
compact: boolean;
|
|
9
13
|
isCard: boolean;
|
|
@@ -68,8 +68,12 @@ const pickRadius = (map, bare, tier, isCard, compactRadius) => {
|
|
|
68
68
|
}
|
|
69
69
|
return map[tier][compactRadius ? "compact" : "normal"];
|
|
70
70
|
};
|
|
71
|
-
/**
|
|
72
|
-
|
|
71
|
+
/**
|
|
72
|
+
* Radius of the padded ring and frame ring, concentric with the border. A bare
|
|
73
|
+
* tile has no border, so its rings sit on its edge and take whatever corner it
|
|
74
|
+
* has, including one set through `className`.
|
|
75
|
+
*/
|
|
76
|
+
const getInnerRingRadius = ({ compact, isCard, tier, }) => pickRadius(innerRingRadiusMap, "rounded-[inherit]", tier, isCard, compact);
|
|
73
77
|
/** Apply the tile's boolean, size and variant defaults. */
|
|
74
78
|
const withTileDefaults = (input) => ({
|
|
75
79
|
compact: input.compactRadius ?? false,
|
|
@@ -111,7 +115,7 @@ const buildTileClasses = (state, { borderColor, className, }) => {
|
|
|
111
115
|
// Round the image element itself (not just clip via `overflow-hidden`):
|
|
112
116
|
// WebKit clips in-flow replaced elements inconsistently, leaving square
|
|
113
117
|
// corners that poke past the radius.
|
|
114
|
-
pickRadius(innerImgRadiusMap, "[&_img]:rounded-
|
|
118
|
+
pickRadius(innerImgRadiusMap, "[&_img]:rounded-[inherit]", tier, isCard, compact), isCard && (dotted ? "border-2" : containerBorderMap[tier]), isCard && "shadow-xs", !isCard && "bg-muted", isCard && "bg-card", isCard && (dotted ? "border-dotted" : "border-solid"), getBorderClasses(isCard, borderColor, selected), muted && "opacity-50 hover:opacity-100", isCard && "transition-border-shadow-opacity duration-quick ease-out", disabled && "cursor-not-allowed opacity-50", size === "fluid" && "w-full", isTileSizeScale(size) && swatchTileSizeMap[size], className);
|
|
115
119
|
};
|
|
116
120
|
const buildTileStyle = (state, { borderColor, color, style, }) => {
|
|
117
121
|
const { size } = state;
|