fix: wrong unit imports

daangn · Jan 15, 2025 · 20852db · 20852db
1 parent 2122a22
commit 20852db
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 50 deletions.
diff --git a/packages/react/src/components/Box/Box.tsx b/packages/react/src/components/Box/Box.tsx
@@ -19,12 +19,13 @@ function handleColor(color: string | undefined) {
   return vars.$color[type][value] ?? undefined;
 }
 
-function handleSpacing(spacing: string | undefined) {
-  if (!spacing) {
+function handleDimension(dimension: string | undefined) {
+  if (!dimension) {
     return undefined;
   }
+  const [type, value] = dimension.split(".");
   // @ts-ignore
-  return vars.$dimension[spacing] ?? vars.$horizontalSpacing[spacing] ?? undefined;
+  return vars.$dimension[dimension] ?? vars.$dimension[type][value] ?? undefined;
 }
 
 function handleSize(size: string | undefined) {
@@ -211,14 +212,14 @@ export const Box = React.forwardRef<HTMLDivElement, BoxProps>((props, ref) => {
           "--seed-box-height": handleSize(height),
           "--seed-box-min-height": handleSize(minHeight),
           "--seed-box-max-height": handleSize(maxHeight),
-          "--seed-box-padding": handleSpacing(padding),
-          "--seed-box-padding-x": handleSpacing(paddingX),
-          "--seed-box-padding-y": handleSpacing(paddingY),
-          "--seed-box-padding-top": handleSpacing(paddingTop),
-          "--seed-box-padding-right": handleSpacing(paddingRight),
-          "--seed-box-padding-bottom": handleSpacing(paddingBottom),
-          "--seed-box-padding-left": handleSpacing(paddingLeft),
-          "--seed-box-gap": handleSpacing(gap),
+          "--seed-box-padding": handleDimension(padding),
+          "--seed-box-padding-x": handleDimension(paddingX),
+          "--seed-box-padding-y": handleDimension(paddingY),
+          "--seed-box-padding-top": handleDimension(paddingTop),
+          "--seed-box-padding-right": handleDimension(paddingRight),
+          "--seed-box-padding-bottom": handleDimension(paddingBottom),
+          "--seed-box-padding-left": handleDimension(paddingLeft),
+          "--seed-box-gap": handleDimension(gap),
           "--seed-box-display": display,
           "--seed-box-position": position,
           "--seed-box-overflow-x": overflowX,

diff --git a/packages/vars/lib/unit.d.ts b/packages/vars/lib/unit.d.ts
diff --git a/packages/vars/lib/unit.mjs b/packages/vars/lib/unit.mjs
diff --git a/packages/vars/lib/vars.mjs b/packages/vars/lib/vars.mjs
@@ -6,4 +6,4 @@ export * as $gradient from "./gradient.mjs";
 export * as $lineHeight from "./line-height.mjs";
 export * as $radius from "./radius.mjs";
 export * as $timingFunction from "./timing-function.mjs";
-export * as $dimension from "./unit.mjs";
+export * as $dimension from "./dimension.mjs";