From 8286f217959707f21926a17142122789ade6d2f5 Mon Sep 17 00:00:00 2001
From: Vladyslav Dalechyn <vlad.dalechin@gmail.com>
Date: Sat, 8 Jun 2024 01:51:59 +0300
Subject: [PATCH] fix: `margin*` and `letterSpacing` accepting only negative
 values (#348)

* fix: `margin*` and `letterSpacing` accepting only negative values

* chore: changesets
---
 .changeset/rare-rabbits-retire.md |  5 +++++
 src/ui/Box.tsx                    | 16 ++++++++--------
 2 files changed, 13 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/rare-rabbits-retire.md

diff --git a/.changeset/rare-rabbits-retire.md b/.changeset/rare-rabbits-retire.md
new file mode 100644
index 00000000..b3697837
--- /dev/null
+++ b/.changeset/rare-rabbits-retire.md
@@ -0,0 +1,5 @@
+---
+"frog": patch
+---
+
+Fixed a type issue where `margin*` and `letterSpacing` props in `Box` accepted only negative values.
diff --git a/src/ui/Box.tsx b/src/ui/Box.tsx
index 8ba835fc..ad3e36fe 100644
--- a/src/ui/Box.tsx
+++ b/src/ui/Box.tsx
@@ -10,8 +10,8 @@ export type VariableValue<property extends keyof SatoriStyleProperties, token> =
   | token
   | { custom: SatoriStyleProperties[property] }
 
-type NegateValues<obj extends object | undefined> = ValueOf<{
-  [key in keyof obj]: key extends `${number}` ? `-${key}` : key
+type WithNegatedValues<obj extends object | undefined> = ValueOf<{
+  [key in keyof obj]: key extends `${number}` ? `-${key}` | key : key
 }>
 
 export type BoxProps<vars extends Vars = DefaultVars> = Omit<
@@ -106,14 +106,14 @@ export type BoxProps<vars extends Vars = DefaultVars> = Omit<
   left?: VariableValue<'left', keyof vars['units']>
   letterSpacing?: VariableValue<
     'letterSpacing',
-    keyof vars['units'] | NegateValues<vars['units']>
+    keyof vars['units'] | WithNegatedValues<vars['units']>
   >
   lineHeight?: VariableValue<'lineHeight', keyof vars['units']>
-  margin?: VariableValue<'margin', NegateValues<vars['units']>>
-  marginTop?: VariableValue<'marginTop', NegateValues<vars['units']>>
-  marginBottom?: VariableValue<'marginBottom', NegateValues<vars['units']>>
-  marginLeft?: VariableValue<'marginLeft', NegateValues<vars['units']>>
-  marginRight?: VariableValue<'marginRight', NegateValues<vars['units']>>
+  margin?: VariableValue<'margin', WithNegatedValues<vars['units']>>
+  marginTop?: VariableValue<'marginTop', WithNegatedValues<vars['units']>>
+  marginBottom?: VariableValue<'marginBottom', WithNegatedValues<vars['units']>>
+  marginLeft?: VariableValue<'marginLeft', WithNegatedValues<vars['units']>>
+  marginRight?: VariableValue<'marginRight', WithNegatedValues<vars['units']>>
   maxHeight?: VariableValue<'maxHeight', keyof vars['units'] | '100%'>
   minHeight?: VariableValue<'minHeight', keyof vars['units'] | '100%'>
   maxWidth?: VariableValue<'maxWidth', keyof vars['units'] | '100%'>