@seed-design/lynx-react 0.7.1 → 0.9.0

package/src/components/Tabs/Tabs.utils.ts

@@ -36,6 +36,7 @@ export function getTabsOrderedItems<T extends { value: string }>(
 export function getTabsTriggerRects(
   values: string[],
   widths: Record<string, number>,
+  triggerGap = 0,
 ): Record<string, TabsLayoutRect> {
   const rects = Object.create(null) as Record<string, TabsLayoutRect>;
   let left = 0;
@@ -49,12 +50,61 @@ export function getTabsTriggerRects(
       continue;
     }
     if (hasCompletePrefix) rects[value] = { left, width };
-    left += width;
+    left += width + triggerGap;
   }
 
   return rects;
 }
 
+/**
+ * Trigger rectangles begin at the first trigger, so they exclude list-content
+ * padding. Scroll offsets are measured from the scroll content edge.
+ */
+export function getTabsScrollOffset({
+  scrollAlign,
+  currentOffset,
+  viewportWidth,
+  contentWidth,
+  contentInsetStart,
+  contentInsetEnd,
+  triggerRect,
+}: {
+  scrollAlign: "nearest" | "start" | "center" | "end";
+  currentOffset: number;
+  viewportWidth: number;
+  contentWidth: number;
+  contentInsetStart: number;
+  contentInsetEnd: number;
+  triggerRect: TabsLayoutRect;
+}): number {
+  const maxOffset = Math.max(0, contentWidth - viewportWidth);
+  const clampOffset = (offset: number) => Math.min(maxOffset, Math.max(0, offset));
+  const clampedCurrentOffset = clampOffset(currentOffset);
+  if (maxOffset === 0) return clampedCurrentOffset;
+
+  const triggerStart = contentInsetStart + triggerRect.left;
+  const triggerEnd = triggerStart + triggerRect.width;
+  if (scrollAlign === "nearest") {
+    // Visibility is the scroll-view's actual viewport. Insets provide the
+    // additional room only after a clipped trigger needs to move.
+    const visibleStart = clampedCurrentOffset;
+    const visibleEnd = clampedCurrentOffset + viewportWidth;
+
+    if (triggerStart >= visibleStart && triggerEnd <= visibleEnd) return clampedCurrentOffset;
+    return clampOffset(
+      triggerStart < visibleStart
+        ? triggerStart - contentInsetStart
+        : triggerEnd + contentInsetEnd - viewportWidth,
+    );
+  }
+
+  if (scrollAlign === "start") return clampOffset(triggerStart - contentInsetStart);
+  if (scrollAlign === "center") {
+    return clampOffset(triggerStart + triggerRect.width / 2 - viewportWidth / 2);
+  }
+  return clampOffset(triggerEnd + contentInsetEnd - viewportWidth);
+}
+
 export function areTabsTransitionsEnabled(
   values: string[],
   rects: Record<string, TabsLayoutRect>,

package/src/components/Tabs/index.ts

@@ -1,2 +1,18 @@
-export * from "./Tabs";
+export {
+  TabsCarousel,
+  TabsCarouselCamera,
+  TabsContent,
+  TabsIndicator,
+  TabsList,
+  TabsRoot,
+  TabsTrigger,
+  type TabsCarouselCameraProps,
+  type TabsCarouselProps,
+  type TabsContentProps,
+  type TabsIndicatorProps,
+  type TabsListProps,
+  type TabsRootProps,
+  type TabsTriggerProps,
+} from "./Tabs";
+
 export * as Tabs from "./Tabs.namespace";

package/src/components/index.ts

@@ -7,10 +7,17 @@ export * from "./BottomSheet";
 export * from "./Callout";
 export * from "./Checkbox";
 export * from "./Chip";
+export * from "./ChipTabs";
 export * from "./Count";
+export * from "./ContextualFloatingButton";
 export * from "./Divider";
 export * from "./Field";
+export * from "./FloatingActionButton";
 export * from "./Icon";
+export * from "./Dialog";
+export * from "./AlertDialog";
+export * from "./HelpBubble";
+export * from "./IdentityPlaceholder";
 export * from "./InputButton";
 export * from "./KeyboardAvoidingScrollView";
 export * from "./MannerTemp";
@@ -20,15 +27,22 @@ export * from "./NotificationBadge";
 export * from "./PageBanner";
 export * from "./List";
 export * from "./ProgressCircle";
+export * from "./QuantityPicker";
 export * from "./RadioGroup";
 export * from "./ReactionButton";
 export * from "./ScaleFeedback";
 export * from "./SegmentedControl";
+export * from "./Select";
 export * from "./SelectBox";
+export * from "./Skeleton";
+export * from "./Slider";
 export * from "./Stack";
 export * from "./Switch";
+export * from "./ScrollFog";
 export * from "./SwipeableMenuSheet";
 export * from "./Tabs";
 export * from "./TagGroup";
 export * from "./Text";
 export * from "./TextField";
+export * from "./AttachmentInput";
+export * from "./AttachmentDisplay";

package/src/hooks/useControllableState.ts

@@ -1,43 +1 @@
-import { useRef, useState } from "@lynx-js/react";
-import { useMemoizedFn } from "@lynx-js/lynx-ui-common";
-
-export interface UseControllableStateProps<T> {
-  value?: T;
-  defaultValue: T;
-  onChange?: (value: T) => void;
-}
-
-/**
- * Controlled/uncontrolled state pattern for Lynx components.
- *
- * - When `value` is provided, the component is controlled.
- * - When `value` is `undefined`, the component manages its own state
- *   starting from `defaultValue`.
- * - `onChange` fires in both modes.
- */
-export function useControllableState<T>(
-  props: UseControllableStateProps<T>,
-): [T, (value: T) => void] {
-  const { value, defaultValue, onChange } = props;
-  const isControlled = value !== undefined;
-  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
-  const currentValue = isControlled ? value : uncontrolledValue;
-  const prevValueRef = useRef(currentValue);
-
-  const setValue = useMemoizedFn((nextValue: T) => {
-    if (isControlled) {
-      if (nextValue !== value) {
-        onChange?.(nextValue);
-      }
-      return;
-    }
-
-    setUncontrolledValue(nextValue);
-    if (nextValue !== prevValueRef.current) {
-      onChange?.(nextValue);
-      prevValueRef.current = nextValue;
-    }
-  });
-
-  return [currentValue, setValue];
-}
+export * from "@seed-design/lynx-react-use-controllable-state";

package/src/hooks/usePressTap.test.ts

@@ -60,8 +60,8 @@ describe("usePressTap", () => {
       expect(onTap).toHaveBeenCalledTimes(1);
     });
 
-    it("clears pressed when bindtap fires before touchend", () => {
-      const { result } = renderHook(() => usePressTap({ onTap: vi.fn() }));
+    it("clears pressed on tap without requiring a callback", () => {
+      const { result } = renderHook(() => usePressTap());
 
       act(() => {
         result.current.bindtouchstart(fakeEvent);
@@ -72,19 +72,31 @@ describe("usePressTap", () => {
 
       expect(result.current.pressed).toBe(false);
     });
+  });
 
-    it("can be omitted without error", () => {
-      const { result } = renderHook(() => usePressTap());
+  describe("disabled", () => {
+    it("clears an active press without restoring it when re-enabled", () => {
+      const { result, rerender } = renderHook(({ disabled }) => usePressTap({ disabled }), {
+        initialProps: { disabled: false },
+      });
+
+      act(() => {
+        result.current.bindtouchstart(fakeEvent);
+      });
+      expect(result.current.pressed).toBe(true);
 
-      expect(() => {
-        act(() => {
-          result.current.bindtap(fakeEvent);
-        });
-      }).not.toThrow();
+      rerender({ disabled: true });
+      expect(result.current.pressed).toBe(false);
+
+      rerender({ disabled: false });
+      expect(result.current.pressed).toBe(false);
+
+      act(() => {
+        result.current.bindtouchstart(fakeEvent);
+      });
+      expect(result.current.pressed).toBe(true);
     });
-  });
 
-  describe("disabled", () => {
     it("does not update pressed on bindtouchstart", () => {
       const { result } = renderHook(() => usePressTap({ disabled: true }));
 

package/src/hooks/usePressTap.ts

@@ -1,60 +1 @@
-import { useState } from "@lynx-js/react";
-import { useMemoizedFn } from "@lynx-js/lynx-ui-common";
-import type { BaseTouchEvent, EventHandler, Target } from "@lynx-js/types";
-
-import type { LynxTouchProps } from "../types";
-
-type TouchHandler = EventHandler<BaseTouchEvent<Target>>;
-type PressStateHandler = TouchHandler & (() => void);
-
-export interface UsePressTapOptions {
-  disabled?: boolean;
-  onTap?: TouchHandler;
-  mainThreadOnTap?: LynxTouchProps["main-thread:bindtap"];
-}
-
-export interface UsePressTapReturn {
-  pressed: boolean;
-  bindtap: TouchHandler;
-  bindtouchstart: PressStateHandler;
-  bindtouchend: PressStateHandler;
-  bindtouchcancel: PressStateHandler;
-  "main-thread:bindtap"?: LynxTouchProps["main-thread:bindtap"];
-}
-
-/**
- * Hook that provides press/tap interaction state for Lynx elements.
- *
- * - Tracks `pressed` state via touch events.
- * - When `disabled` is true, the element cannot become active and no tap fires.
- * - If the element becomes disabled during a press, the active state is cleared.
- * - `main-thread:bindtap` is conditionally included (only when enabled and provided).
- */
-export function usePressTap(options: UsePressTapOptions = {}): UsePressTapReturn {
-  const { disabled = false, onTap, mainThreadOnTap } = options;
-  const [pressed, setPressed] = useState(false);
-
-  const press = useMemoizedFn(() => {
-    if (disabled) return;
-    setPressed(true);
-  });
-
-  const reset = useMemoizedFn(() => {
-    setPressed(false);
-  });
-
-  const handleTap = useMemoizedFn((...args: Parameters<TouchHandler>) => {
-    if (disabled) return;
-    setPressed(false);
-    onTap?.(...args);
-  });
-
-  return {
-    pressed,
-    bindtap: handleTap,
-    bindtouchstart: press,
-    bindtouchend: reset,
-    bindtouchcancel: reset,
-    ...(!disabled && mainThreadOnTap ? { "main-thread:bindtap": mainThreadOnTap } : {}),
-  };
-}
+export * from "@seed-design/lynx-react-use-press-tap";

package/src/hooks/useSafeArea.test.ts

@@ -7,7 +7,9 @@ interface TestLynxGlobal {
   lynx?: {
     __globalProps?: {
       safeAreaInsetTop?: number;
+      safeAreaInsetRight?: number;
       safeAreaInsetBottom?: number;
+      safeAreaInsetLeft?: number;
     };
   };
   lynxTestingEnv?: {
@@ -49,35 +51,45 @@ describe("useSafeArea", () => {
 
     expect(result.current).toEqual({
       safeAreaInsetTop: "env(safe-area-inset-top)",
+      safeAreaInsetRight: "env(safe-area-inset-right)",
       safeAreaInsetBottom: "env(safe-area-inset-bottom)",
+      safeAreaInsetLeft: "env(safe-area-inset-left)",
     });
   });
 
   it("uses flat globalProps values before env fallback", () => {
     setGlobalProps({
       safeAreaInsetTop: 48,
+      safeAreaInsetRight: 62,
       safeAreaInsetBottom: 35,
+      safeAreaInsetLeft: 59,
     });
 
     const { result } = renderHook(() => useSafeArea());
 
     expect(result.current).toEqual({
       safeAreaInsetTop: "48px",
+      safeAreaInsetRight: "62px",
       safeAreaInsetBottom: "35px",
+      safeAreaInsetLeft: "59px",
     });
   });
 
-  it("falls back to Lynx env values when host flat global props are zero", () => {
+  it("falls back to Lynx env values only for top and bottom when host flat global props are zero", () => {
     setGlobalProps({
       safeAreaInsetTop: 0,
+      safeAreaInsetRight: 0,
       safeAreaInsetBottom: 0,
+      safeAreaInsetLeft: 0,
     });
 
     const { result } = renderHook(() => useSafeArea());
 
     expect(result.current).toEqual({
       safeAreaInsetTop: "env(safe-area-inset-top)",
+      safeAreaInsetRight: "0px",
       safeAreaInsetBottom: "env(safe-area-inset-bottom)",
+      safeAreaInsetLeft: "0px",
     });
   });
 });

package/src/hooks/useSafeArea.ts

@@ -1,56 +1,58 @@
 import { useMemo } from "@lynx-js/react";
 
-type SafeAreaEdge = "top" | "bottom";
+type SafeAreaEdge = "top" | "right" | "bottom" | "left";
 
 declare module "@lynx-js/types" {
   interface GlobalProps {
     safeAreaInsetTop?: number;
+    safeAreaInsetRight?: number;
     safeAreaInsetBottom?: number;
+    safeAreaInsetLeft?: number;
   }
 }
 
-const safeAreaProp: Record<SafeAreaEdge, "safeAreaInsetTop" | "safeAreaInsetBottom"> = {
-  top: "safeAreaInsetTop",
-  bottom: "safeAreaInsetBottom",
-};
+function normalizeSafeAreaValue(edge: SafeAreaEdge, value: number | undefined) {
+  if (typeof value !== "number" || !Number.isFinite(value) || value < 0) return undefined;
 
-function getSafeAreaEnvInset(edge: SafeAreaEdge): string {
-  return `env(safe-area-inset-${edge})`;
-}
-
-function normalizeSafeAreaValue(value: number | undefined): string | undefined {
-  if (typeof value !== "number" || value <= 0 || !Number.isFinite(value)) {
-    return undefined;
-  }
+  // TODO: confirm why a host-provided 0 falls back to `env()` on top and bottom. The reason isn't
+  // recorded anywhere, and a host that subtracts insets its parent already consumed (Android
+  // Compose) passes 0 on purpose, which `env()` may then override with the window's inset.
+  if (value === 0 && (edge === "top" || edge === "bottom")) return undefined;
 
   return `${value}px`;
 }
 
-function resolveSafeAreaInset(edge: SafeAreaEdge, value: number | undefined): string {
-  return normalizeSafeAreaValue(value) ?? getSafeAreaEnvInset(edge);
-}
+const resolveSafeAreaInset = (edge: SafeAreaEdge, value: number | undefined) =>
+  normalizeSafeAreaValue(edge, value) ?? `env(safe-area-inset-${edge})`;
 
 export interface UseSafeAreaReturn {
   safeAreaInsetTop: string;
+  safeAreaInsetRight: string;
   safeAreaInsetBottom: string;
+  safeAreaInsetLeft: string;
 }
 
 /**
- * Lynx 앱에서 top/bottom safe area inset 값을 반환합니다.
+ * Lynx 앱에서 top/right/bottom/left safe area inset 값을 반환합니다.
  *
- * `lynx.__globalProps.safeAreaInsetTop`과 `safeAreaInsetBottom`을 우선 사용하고,
- * host가 값을 제공하지 않으면 Lynx CSS `env(safe-area-inset-*)` 값을 fallback으로
- * 반환합니다.
+ * `lynx.__globalProps.safeAreaInset*` 값을 우선 사용하고, host가 값을 제공하지 않으면
+ * Lynx CSS `env(safe-area-inset-*)` 값을 fallback으로 반환합니다. top/bottom은 host가
+ * `0`을 제공해도 fallback합니다.
  */
 export function useSafeArea(): UseSafeAreaReturn {
-  const safeAreaInsetTop = lynx.__globalProps?.[safeAreaProp.top];
-  const safeAreaInsetBottom = lynx.__globalProps?.[safeAreaProp.bottom];
+  const globalProps = lynx.__globalProps;
+  const safeAreaInsetTop = globalProps?.safeAreaInsetTop;
+  const safeAreaInsetRight = globalProps?.safeAreaInsetRight;
+  const safeAreaInsetBottom = globalProps?.safeAreaInsetBottom;
+  const safeAreaInsetLeft = globalProps?.safeAreaInsetLeft;
 
   return useMemo(
     () => ({
       safeAreaInsetTop: resolveSafeAreaInset("top", safeAreaInsetTop),
+      safeAreaInsetRight: resolveSafeAreaInset("right", safeAreaInsetRight),
       safeAreaInsetBottom: resolveSafeAreaInset("bottom", safeAreaInsetBottom),
+      safeAreaInsetLeft: resolveSafeAreaInset("left", safeAreaInsetLeft),
     }),
-    [safeAreaInsetTop, safeAreaInsetBottom],
+    [safeAreaInsetTop, safeAreaInsetRight, safeAreaInsetBottom, safeAreaInsetLeft],
   );
 }

package/src/types.ts

@@ -41,6 +41,7 @@ export interface LynxIconElementProps {
   className?: IntrinsicElements["image"]["className"];
   style?: LynxStyle;
   ref?: LynxMainThreadRef;
+  "disable-default-resize"?: boolean;
   "main-thread:binduiappear"?: IntrinsicElements["image"]["main-thread:binduiappear"];
 }
 

package/src/utils/styled.ts

@@ -76,6 +76,12 @@ export function handlePaddingWithSafeArea(
   return handleDimension(padding);
 }
 
+function handleBleed(bleed: BleedValue | undefined, safeAreaInset: string) {
+  if (bleed == null) return undefined;
+
+  return `calc(${bleed === "safeArea" ? safeAreaInset : bleed === 0 ? "0px" : bleed} * -1)`;
+}
+
 export function handleRadius(radius: string | 0 | undefined) {
   if (radius == null) {
     return undefined;
@@ -206,8 +212,14 @@ export interface StyleProps {
     | "safeArea"
     | (string & {});
   pt?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | "safeArea" | (string & {});
-  paddingRight?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
-  pr?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+  paddingRight?:
+    | Dimension
+    | `spacingX.${SpacingX}`
+    | `spacingY.${SpacingY}`
+    | 0
+    | "safeArea"
+    | (string & {});
+  pr?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | "safeArea" | (string & {});
   paddingBottom?:
     | Dimension
     | `spacingX.${SpacingX}`
@@ -216,8 +228,14 @@ export interface StyleProps {
     | "safeArea"
     | (string & {});
   pb?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | "safeArea" | (string & {});
-  paddingLeft?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
-  pl?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+  paddingLeft?:
+    | Dimension
+    | `spacingX.${SpacingX}`
+    | `spacingY.${SpacingY}`
+    | 0
+    | "safeArea"
+    | (string & {});
+  pl?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | "safeArea" | (string & {});
   display?: "flex" | "none" | (string & {});
   position?: "relative" | "absolute" | "fixed" | (string & {});
   overflowX?: "visible" | "hidden" | (string & {});
@@ -241,10 +259,61 @@ export interface StyleProps {
   gap?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
 }
 
-interface UseStyleProps extends StyleProps {
-  style?: CSSProperties;
+type MarginValue =
+  | Dimension
+  | `spacingX.${SpacingX}`
+  | `spacingY.${SpacingY}`
+  | 0
+  | "auto"
+  | (string & {});
+
+/**
+ * Dimension tokens are left out: every token resolves to `var()`, and Lynx drops an inline
+ * `calc()` that contains `var()`, so a negated token would silently apply no margin.
+ */
+type BleedValue = 0 | `${number}px` | "safeArea";
+
+interface MarginStyleProps {
+  margin?: MarginValue;
+  m?: MarginValue;
+  marginX?: MarginValue;
+  mx?: MarginValue;
+  marginY?: MarginValue;
+  my?: MarginValue;
+  marginTop?: MarginValue;
+  mt?: MarginValue;
+  marginRight?: MarginValue;
+  mr?: MarginValue;
+  marginBottom?: MarginValue;
+  mb?: MarginValue;
+  marginLeft?: MarginValue;
+  ml?: MarginValue;
 }
 
+interface BleedStyleProps {
+  bleed?: BleedValue;
+  bleedX?: BleedValue;
+  bleedY?: BleedValue;
+  bleedTop?: BleedValue;
+  bleedRight?: BleedValue;
+  bleedBottom?: BleedValue;
+  bleedLeft?: BleedValue;
+}
+
+/**
+ * Margin and bleed props both resolve to `margin-*` values, so they are mutually exclusive at
+ * the type level.
+ */
+export type MarginBleedStyleProps =
+  | (BleedStyleProps & { [K in keyof MarginStyleProps]?: never })
+  | (MarginStyleProps & { [K in keyof BleedStyleProps]?: never });
+
+type UseStyleProps = StyleProps &
+  MarginStyleProps &
+  BleedStyleProps & {
+    style?: CSSProperties;
+  };
+
 export function useStyleProps<T extends UseStyleProps>(
   props: T,
 ): {
@@ -286,6 +355,27 @@ export function useStyleProps<T extends UseStyleProps>(
     pr,
     pb,
     pl,
+    margin,
+    m,
+    marginX,
+    mx,
+    marginY,
+    my,
+    marginTop,
+    mt,
+    marginRight,
+    mr,
+    marginBottom,
+    mb,
+    marginLeft,
+    ml,
+    bleed,
+    bleedX,
+    bleedY,
+    bleedTop,
+    bleedRight,
+    bleedBottom,
+    bleedLeft,
     bottom,
     left,
     right,
@@ -308,7 +398,8 @@ export function useStyleProps<T extends UseStyleProps>(
     style,
     ...restProps
   } = props;
-  const { safeAreaInsetTop, safeAreaInsetBottom } = useSafeArea();
+  const { safeAreaInsetTop, safeAreaInsetRight, safeAreaInsetBottom, safeAreaInsetLeft } =
+    useSafeArea();
 
   const backgroundValue = handleColor(background ?? bg);
   const paddingValue = handleDimension(padding ?? p);
@@ -316,10 +407,33 @@ export function useStyleProps<T extends UseStyleProps>(
   const paddingYValue = handleDimension(paddingY ?? py) ?? paddingValue;
   const paddingTopValue =
     handlePaddingWithSafeArea(paddingTop ?? pt, safeAreaInsetTop) ?? paddingYValue;
-  const paddingRightValue = handleDimension(paddingRight ?? pr) ?? paddingXValue;
+  const paddingRightValue =
+    handlePaddingWithSafeArea(paddingRight ?? pr, safeAreaInsetRight) ?? paddingXValue;
   const paddingBottomValue =
     handlePaddingWithSafeArea(paddingBottom ?? pb, safeAreaInsetBottom) ?? paddingYValue;
-  const paddingLeftValue = handleDimension(paddingLeft ?? pl) ?? paddingXValue;
+  const paddingLeftValue =
+    handlePaddingWithSafeArea(paddingLeft ?? pl, safeAreaInsetLeft) ?? paddingXValue;
+
+  const marginValue = handleDimension(margin ?? m);
+  const marginXValue = handleDimension(marginX ?? mx) ?? marginValue;
+  const marginYValue = handleDimension(marginY ?? my) ?? marginValue;
+  const marginTopValue =
+    handleDimension(marginTop ?? mt) ??
+    marginYValue ??
+    handleBleed(bleedTop ?? bleedY ?? bleed, safeAreaInsetTop);
+  const marginRightValue =
+    handleDimension(marginRight ?? mr) ??
+    marginXValue ??
+    handleBleed(bleedRight ?? bleedX ?? bleed, safeAreaInsetRight);
+  const marginBottomValue =
+    handleDimension(marginBottom ?? mb) ??
+    marginYValue ??
+    handleBleed(bleedBottom ?? bleedY ?? bleed, safeAreaInsetBottom);
+  const marginLeftValue =
+    handleDimension(marginLeft ?? ml) ??
+    marginXValue ??
+    handleBleed(bleedLeft ?? bleedX ?? bleed, safeAreaInsetLeft);
+
   const hasBorderStyle =
     borderColor != null ||
     borderWidth != null ||
@@ -354,6 +468,10 @@ export function useStyleProps<T extends UseStyleProps>(
       paddingRight: paddingRightValue,
       paddingBottom: paddingBottomValue,
       paddingLeft: paddingLeftValue,
+      marginTop: marginTopValue,
+      marginRight: marginRightValue,
+      marginBottom: marginBottomValue,
+      marginLeft: marginLeftValue,
       top: handleDimension(top),
       left: handleDimension(left),
       right: handleDimension(right),