@luscii-healthtech/web-ui 39.4.2 → 39.4.3

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

@@ -22,6 +22,16 @@ export type Props<C extends React.ElementType> = React.ComponentPropsWithoutRef<
      * Check {@link SIZES} for reference.
      */
     borderRadius?: keyof typeof SIZES;
+    /**
+     * Will set a left border radius based on the standard sizes scale.
+     * Check {@link SIZES} for reference.
+     */
+    borderRadiusLeft?: keyof typeof SIZES;
+    /**
+     * Will set a right border radius based on the standard sizes scale.
+     * Check {@link SIZES} for reference.
+     */
+    borderRadiusRight?: keyof typeof SIZES;
     hoverBackgroundColor?: BackgroundColor;
     cursor?: CursorOption;
 };

package/dist/index.development.js

@@ -1869,6 +1869,38 @@ const createRadiusClassName = (borderRadius) => {
     "ui-radius-xxl": borderRadius === "xxl"
   });
 };
+const createRadiusLeftClassName = (borderRadius) => {
+  if (!borderRadius || !SIZES[borderRadius]) {
+    return "";
+  }
+  return classNames__default.default({
+    "ui-radius-l-xxxxs": borderRadius === "xxxxs",
+    "ui-radius-l-xxxs": borderRadius === "xxxs",
+    "ui-radius-l-xxs": borderRadius === "xxs",
+    "ui-radius-l-xs": borderRadius === "xs",
+    "ui-radius-l-s": borderRadius === "s",
+    "ui-radius-l-m": borderRadius === "m",
+    "ui-radius-l-l": borderRadius === "l",
+    "ui-radius-l-xl": borderRadius === "xl",
+    "ui-radius-l-xxl": borderRadius === "xxl"
+  });
+};
+const createRadiusRightClassName = (borderRadius) => {
+  if (!borderRadius || !SIZES[borderRadius]) {
+    return "";
+  }
+  return classNames__default.default({
+    "ui-radius-r-xxxxs": borderRadius === "xxxxs",
+    "ui-radius-r-xxxs": borderRadius === "xxxs",
+    "ui-radius-r-xxs": borderRadius === "xxs",
+    "ui-radius-r-xs": borderRadius === "xs",
+    "ui-radius-r-s": borderRadius === "s",
+    "ui-radius-r-m": borderRadius === "m",
+    "ui-radius-r-l": borderRadius === "l",
+    "ui-radius-r-xl": borderRadius === "xl",
+    "ui-radius-r-xxl": borderRadius === "xxl"
+  });
+};
 
 const spacingKeys = [
   "p",
@@ -1890,10 +1922,12 @@ const createSpacingClassNames = (keys, spacingProps) => {
   return keys.filter((key) => spacingProps[key]).map((key) => `ui-${key}-${spacingProps[key]}`).join(" ");
 };
 const Box = (props) => {
-  const { as: Element = "div", borderRadius, className, elevation, width, backgroundColor, hoverBackgroundColor, cursor } = props, attributes = __rest(props, ["as", "borderRadius", "className", "elevation", "width", "backgroundColor", "hoverBackgroundColor", "cursor"]);
+  const { as: Element = "div", borderRadius, borderRadiusLeft, borderRadiusRight, className, elevation, width, backgroundColor, hoverBackgroundColor, cursor } = props, attributes = __rest(props, ["as", "borderRadius", "borderRadiusLeft", "borderRadiusRight", "className", "elevation", "width", "backgroundColor", "hoverBackgroundColor", "cursor"]);
   const spacingClasses = createSpacingClassNames(spacingKeys, props);
   const shadowClassName = createShadowClassName(elevation);
   const borderRadiusClassName = createRadiusClassName(borderRadius);
+  const borderRadiusLeftClassName = createRadiusLeftClassName(borderRadiusLeft);
+  const borderRadiusRightClassName = createRadiusRightClassName(borderRadiusRight);
   const attributesWithoutSpacingKeys = omit__default.default(attributes, spacingKeys);
   return React__namespace.default.createElement(Element, Object.assign({ className: classNames__default.default(spacingClasses, {
     "ui-bg-surface": backgroundColor === "surface",
@@ -1929,7 +1963,7 @@ const Box = (props) => {
     "ui-cursor-no-drop": cursor === "no-drop",
     "ui-cursor-grab": cursor === "grab",
     "ui-cursor-grabbing": cursor === "grabbing"
-  }, className, shadowClassName, borderRadiusClassName) }, attributesWithoutSpacingKeys));
+  }, className, shadowClassName, borderRadiusClassName, borderRadiusLeftClassName, borderRadiusRightClassName) }, attributesWithoutSpacingKeys));
 };
 
 const Stack = (props) => {
@@ -7428,7 +7462,7 @@ const ModalDialog = (_a) => {
     Object.assign({ ref: dialog, className: classes, onClose }, rest),
     React__namespace.default.createElement(
       Card,
-      { padding: false, borderRadius: variant === "side-modal" ? "none" : "m", className: classNames__default.default({
+      { padding: false, borderRadius: variant === "side-modal" ? "none" : "m", borderRadiusLeft: variant === "side-modal" ? "m" : "none", className: classNames__default.default({
         "ui-h-screen": variant === "side-modal"
       }) },
       React__namespace.default.createElement(Stack, { width: "full", align: "stretch", className: classNames__default.default({