@nori-ui/core 0.0.3 → 0.0.4

package/dist/index.cjs

@@ -37,6 +37,216 @@ function Box({ className, children, ...rest }) {
 }
 __name(Box, "Box");
 
+// ../tokens/build/theme.ts
+var theme = {
+  color: {
+    danger: "#ef4444",
+    info: "#3b82f6",
+    neutral: {
+      "100": "#f4f4f5",
+      "200": "#e4e4e7",
+      "300": "#d4d4d8",
+      "400": "#a1a1aa",
+      "50": "#fafafa",
+      "500": "#71717a",
+      "600": "#52525b",
+      "700": "#3f3f46",
+      "800": "#27272a",
+      "900": "#18181b"
+    },
+    primary: {
+      "100": "#dbeafe",
+      "200": "#bfdbfe",
+      "300": "#93c5fd",
+      "400": "#60a5fa",
+      "50": "#f0f7ff",
+      "500": "#3b82f6",
+      "600": "#2563eb",
+      "700": "#1d4ed8",
+      "800": "#1e40af",
+      "900": "#1e3a8a"
+    },
+    success: "#22c55e",
+    warning: "#f59e0b"
+  },
+  fontSize: {
+    "2xl": "24px",
+    "3xl": "30px",
+    "4xl": "36px",
+    lg: "18px",
+    md: "16px",
+    sm: "14px",
+    xl: "20px",
+    xs: "12px"
+  },
+  fontWeight: {
+    bold: "700",
+    medium: "500",
+    regular: "400",
+    semibold: "600"
+  },
+  lineHeight: {
+    normal: "1.4",
+    relaxed: "1.6",
+    tight: "1.2"
+  },
+  radius: {
+    "2xl": "16px",
+    full: "9999px",
+    lg: "8px",
+    md: "6px",
+    none: "0px",
+    sm: "4px",
+    xl: "12px"
+  },
+  semantic: {
+    background: {
+      default: "#fafafa",
+      elevated: "#ffffff",
+      subtle: "#f4f4f5"
+    },
+    border: {
+      default: "#e4e4e7",
+      strong: "#d4d4d8"
+    },
+    interactive: {
+      destructive: "#ef4444",
+      primary: "#2563eb",
+      primaryHover: "#1d4ed8",
+      primaryPressed: "#1e40af"
+    },
+    text: {
+      default: "#18181b",
+      inverted: "#fafafa",
+      muted: "#52525b"
+    }
+  },
+  shadow: {
+    lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)",
+    md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
+    sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)"
+  },
+  spacing: {
+    "0": "0px",
+    "1": "4px",
+    "10": "40px",
+    "12": "48px",
+    "16": "64px",
+    "2": "8px",
+    "20": "80px",
+    "24": "96px",
+    "3": "12px",
+    "4": "16px",
+    "5": "20px",
+    "6": "24px",
+    "8": "32px"
+  }
+};
+var themeDark = {
+  color: {
+    danger: "#ef4444",
+    info: "#3b82f6",
+    neutral: {
+      "100": "#f4f4f5",
+      "200": "#e4e4e7",
+      "300": "#d4d4d8",
+      "400": "#a1a1aa",
+      "50": "#fafafa",
+      "500": "#71717a",
+      "600": "#52525b",
+      "700": "#3f3f46",
+      "800": "#27272a",
+      "900": "#18181b"
+    },
+    primary: {
+      "100": "#dbeafe",
+      "200": "#bfdbfe",
+      "300": "#93c5fd",
+      "400": "#60a5fa",
+      "50": "#f0f7ff",
+      "500": "#3b82f6",
+      "600": "#2563eb",
+      "700": "#1d4ed8",
+      "800": "#1e40af",
+      "900": "#1e3a8a"
+    },
+    success: "#22c55e",
+    warning: "#f59e0b"
+  },
+  fontSize: {
+    "2xl": "24px",
+    "3xl": "30px",
+    "4xl": "36px",
+    lg: "18px",
+    md: "16px",
+    sm: "14px",
+    xl: "20px",
+    xs: "12px"
+  },
+  fontWeight: {
+    bold: "700",
+    medium: "500",
+    regular: "400",
+    semibold: "600"
+  },
+  lineHeight: {
+    normal: "1.4",
+    relaxed: "1.6",
+    tight: "1.2"
+  },
+  radius: {
+    "2xl": "16px",
+    full: "9999px",
+    lg: "8px",
+    md: "6px",
+    none: "0px",
+    sm: "4px",
+    xl: "12px"
+  },
+  semantic: {
+    background: {
+      default: "#18181b",
+      elevated: "#3f3f46",
+      subtle: "#27272a"
+    },
+    border: {
+      default: "#3f3f46",
+      strong: "#52525b"
+    },
+    interactive: {
+      destructive: "#ef4444",
+      primary: "#60a5fa",
+      primaryHover: "#93c5fd",
+      primaryPressed: "#bfdbfe"
+    },
+    text: {
+      default: "#fafafa",
+      inverted: "#18181b",
+      muted: "#a1a1aa"
+    }
+  },
+  shadow: {
+    lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)",
+    md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
+    sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)"
+  },
+  spacing: {
+    "0": "0px",
+    "1": "4px",
+    "10": "40px",
+    "12": "48px",
+    "16": "64px",
+    "2": "8px",
+    "20": "80px",
+    "24": "96px",
+    "3": "12px",
+    "4": "16px",
+    "5": "20px",
+    "6": "24px",
+    "8": "32px"
+  }
+};
+
 // src/slot/compose-refs.ts
 function composeRefs(...refs) {
   return (node) => {
@@ -145,6 +355,30 @@ var SIZE_CLASSES = {
 };
 var ICON_SIZE = { sm: 14, md: 16, lg: 20 };
 var BASE_CLASSES = "inline-flex flex-row items-center justify-center gap-2 rounded-md select-none";
+var VARIANT_STYLES = {
+  primary: { backgroundColor: theme.color.primary["600"] },
+  secondary: { backgroundColor: theme.color.neutral["100"] },
+  ghost: { backgroundColor: "transparent" },
+  destructive: { backgroundColor: theme.color.danger }
+};
+var VARIANT_TEXT_COLOR = {
+  primary: "#ffffff",
+  secondary: theme.color.neutral["900"],
+  ghost: theme.color.neutral["900"],
+  destructive: "#ffffff"
+};
+var SIZE_STYLES = {
+  sm: { container: { height: 32, paddingHorizontal: 12 }, text: { fontSize: 14 } },
+  md: { container: { height: 40, paddingHorizontal: 16 }, text: { fontSize: 16 } },
+  lg: { container: { height: 48, paddingHorizontal: 20 }, text: { fontSize: 18 } }
+};
+var BASE_STYLE = {
+  flexDirection: "row",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: 8,
+  borderRadius: 6
+};
 var Button = react.forwardRef(/* @__PURE__ */ __name(function Button2({
   children,
   variant = "primary",
@@ -157,6 +391,7 @@ var Button = react.forwardRef(/* @__PURE__ */ __name(function Button2({
   className,
   onPress,
   testID,
+  style,
   ...rest
 }, forwardedRef) {
   const isInoperative = Boolean(disabled) || Boolean(loading);
@@ -167,6 +402,16 @@ var Button = react.forwardRef(/* @__PURE__ */ __name(function Button2({
     isInoperative ? "opacity-60" : void 0,
     className
   );
+  const baseInlineStyle = [
+    BASE_STYLE,
+    VARIANT_STYLES[variant],
+    SIZE_STYLES[size].container,
+    isInoperative ? { opacity: 0.6 } : null
+  ];
+  const pressableStyle = typeof style === "function" ? (state) => [baseInlineStyle, style(state)] : [baseInlineStyle, style];
+  const slotStyle = [baseInlineStyle, typeof style === "function" ? null : style];
+  const textColor = VARIANT_TEXT_COLOR[variant];
+  const textStyle = { color: textColor, fontSize: SIZE_STYLES[size].text.fontSize, fontWeight: "500" };
   const handlePress = /* @__PURE__ */ __name((ev) => {
     if (isInoperative) return;
     onPress?.(ev);
@@ -175,6 +420,7 @@ var Button = react.forwardRef(/* @__PURE__ */ __name(function Button2({
     const slotProps = {
       ref: forwardedRef,
       className: classes,
+      style: slotStyle,
       onClick: handlePress,
       ...rest
     };
@@ -197,12 +443,20 @@ var Button = react.forwardRef(/* @__PURE__ */ __name(function Button2({
       disabled: isInoperative,
       onPress: handlePress,
       className: classes,
+      style: pressableStyle,
       ...pressableExtra,
       ...rest,
       children: [
-        loading ? /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: ICON_SIZE[size], label: "Loading" }) : LeadingIcon ? /* @__PURE__ */ jsxRuntime.jsx(LeadingIcon, { size: ICON_SIZE[size] }) : null,
-        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: cn("font-medium", SIZE_CLASSES[size].includes("text-") ? void 0 : "text-md"), children }),
-        TrailingIcon ? /* @__PURE__ */ jsxRuntime.jsx(TrailingIcon, { size: ICON_SIZE[size] }) : null
+        loading ? /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: ICON_SIZE[size], label: "Loading", color: textColor }) : LeadingIcon ? /* @__PURE__ */ jsxRuntime.jsx(LeadingIcon, { size: ICON_SIZE[size], color: textColor }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.Text,
+          {
+            className: cn("font-medium", SIZE_CLASSES[size].includes("text-") ? void 0 : "text-md"),
+            style: textStyle,
+            children
+          }
+        ),
+        TrailingIcon ? /* @__PURE__ */ jsxRuntime.jsx(TrailingIcon, { size: ICON_SIZE[size], color: textColor }) : null
       ]
     }
   );
@@ -250,6 +504,21 @@ function useSemanticIcon(name) {
   return icons[name];
 }
 __name(useSemanticIcon, "useSemanticIcon");
+var ROW_STYLE = { flexDirection: "row", alignItems: "center", gap: 8 };
+var BOX_STYLE = {
+  width: 20,
+  height: 20,
+  borderRadius: 4,
+  borderWidth: 1,
+  borderColor: theme.color.neutral["300"],
+  backgroundColor: "#ffffff",
+  alignItems: "center",
+  justifyContent: "center"
+};
+var BOX_STYLE_CHECKED = {
+  backgroundColor: theme.color.primary["600"],
+  borderColor: theme.color.primary["600"]
+};
 function Checkbox({
   checked,
   defaultChecked = false,
@@ -266,6 +535,7 @@ function Checkbox({
   const isControlled = checked !== void 0;
   const value = isControlled ? Boolean(checked) : inner;
   const ariaChecked = indeterminate ? "mixed" : value ? "true" : "false";
+  const isMarked = value || Boolean(indeterminate);
   const toggle = react.useCallback(() => {
     if (disabled) return;
     const next = !value;
@@ -298,10 +568,26 @@ function Checkbox({
     return /* @__PURE__ */ jsxRuntime.jsx(Slot, { ...slotProps, children });
   }
   const boxClasses = cn("w-5 h-5 rounded-sm border border-semantic-border-strong items-center justify-center");
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { className: cn("flex-row items-center gap-2", disabled ? "opacity-60" : void 0, className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Pressable, { onPress: toggle, ...commonProps, className: boxClasses, children: (value || indeterminate) && !disabled ? /* @__PURE__ */ jsxRuntime.jsx(Check, { size: 14, color: "currentColor" }) : null }),
-    children ?? (label !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { children: label }) : null)
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactNative.View,
+    {
+      className: cn("flex-row items-center gap-2", disabled ? "opacity-60" : void 0, className),
+      style: [ROW_STYLE, disabled ? { opacity: 0.6 } : null],
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.Pressable,
+          {
+            onPress: toggle,
+            ...commonProps,
+            className: boxClasses,
+            style: [BOX_STYLE, isMarked && !disabled ? BOX_STYLE_CHECKED : null],
+            children: isMarked && !disabled ? /* @__PURE__ */ jsxRuntime.jsx(Check, { size: 14, color: "#ffffff" }) : null
+          }
+        ),
+        children ?? (label !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: { color: theme.color.neutral["900"], fontSize: 16 }, children: label }) : null)
+      ]
+    }
+  );
 }
 __name(Checkbox, "Checkbox");
 var ALIGN_CLASS = {
@@ -336,6 +622,25 @@ function HStack({ gap, align, justify, className, children, ...rest }) {
   );
 }
 __name(HStack, "HStack");
+var ROW_STYLE2 = { flexDirection: "row", alignItems: "center", gap: 8 };
+var TRACK_BASE = {
+  width: 40,
+  height: 24,
+  borderRadius: 12,
+  justifyContent: "center",
+  paddingHorizontal: 2
+};
+var THUMB_STYLE = {
+  width: 20,
+  height: 20,
+  borderRadius: 10,
+  backgroundColor: "#ffffff",
+  shadowColor: "#000",
+  shadowOpacity: 0.15,
+  shadowRadius: 2,
+  shadowOffset: { width: 0, height: 1 },
+  elevation: 2
+};
 function Switch({
   checked,
   defaultChecked = false,
@@ -387,9 +692,22 @@ function Switch({
     disabled ? "opacity-60" : void 0
   );
   const thumbClasses = cn("w-5 h-5 rounded-full bg-white shadow-sm", value ? "self-end" : "self-start");
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { className: cn("flex-row items-center gap-2", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Pressable, { onPress: toggle, ...commonProps, className: trackClasses, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: thumbClasses }) }),
-    label ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: "text-md text-semantic-text-default", children: label }) : null,
+  const trackStyle = [
+    TRACK_BASE,
+    { backgroundColor: value ? theme.color.primary["600"] : theme.color.neutral["300"] },
+    disabled ? { opacity: 0.6 } : null
+  ];
+  const thumbStyle = [THUMB_STYLE, { alignSelf: value ? "flex-end" : "flex-start" }];
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { className: cn("flex-row items-center gap-2", className), style: ROW_STYLE2, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Pressable, { onPress: toggle, ...commonProps, className: trackClasses, style: trackStyle, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: thumbClasses, style: thumbStyle }) }),
+    label ? /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.Text,
+      {
+        className: "text-md text-semantic-text-default",
+        style: { color: theme.color.neutral["900"], fontSize: 16 },
+        children: label
+      }
+    ) : null,
     children
   ] });
 }
@@ -419,6 +737,23 @@ function Text({ variant = "body-md", className, testID, children, ...rest }) {
   );
 }
 __name(Text, "Text");
+var CONTAINER_STYLE = { flexDirection: "column", gap: 4 };
+var LABEL_STYLE = { fontSize: 14, fontWeight: "500", color: theme.color.neutral["900"] };
+var FIELD_BASE_STYLE = {
+  flexDirection: "row",
+  alignItems: "center",
+  borderRadius: 6,
+  borderWidth: 1,
+  paddingHorizontal: 12
+};
+var INPUT_STYLE = {
+  flex: 1,
+  paddingVertical: 8,
+  fontSize: 16,
+  color: theme.color.neutral["900"]
+};
+var HELPER_STYLE = { fontSize: 14, color: theme.color.neutral["500"] };
+var ERROR_STYLE = { fontSize: 14, color: theme.color.danger };
 function TextInput({
   label,
   helperText,
@@ -447,8 +782,21 @@ function TextInput({
   if (multiline !== void 0) inputExtras.multiline = multiline;
   if (numberOfLines !== void 0) inputExtras.numberOfLines = numberOfLines;
   if (onChangeText !== void 0) inputExtras.onChangeText = onChangeText;
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { className: cn("flex flex-col gap-1", containerClassName), children: [
-    label !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: inputId, className: "text-sm font-medium text-semantic-text-default", children: label }) : null,
+  const fieldStyle = [
+    FIELD_BASE_STYLE,
+    { borderColor: hasError ? theme.color.danger : theme.color.neutral["200"] },
+    disabled ? { opacity: 0.6 } : null
+  ];
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { className: cn("flex flex-col gap-1", containerClassName), style: CONTAINER_STYLE, children: [
+    label !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+      "label",
+      {
+        htmlFor: inputId,
+        className: "text-sm font-medium text-semantic-text-default",
+        style: LABEL_STYLE,
+        children: label
+      }
+    ) : null,
     /* @__PURE__ */ jsxRuntime.jsxs(
       reactNative.View,
       {
@@ -457,23 +805,34 @@ function TextInput({
           hasError ? "border-semantic-interactive-destructive" : "border-semantic-border-default",
           disabled ? "opacity-60" : void 0
         ),
+        style: fieldStyle,
         children: [
-          leading ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: "mr-2", children: leading }) : null,
+          leading ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: "mr-2", style: { marginRight: 8 }, children: leading }) : null,
           /* @__PURE__ */ jsxRuntime.jsx(
             reactNative.TextInput,
             {
               nativeID: inputId,
               editable: !disabled,
               className: cn("flex-1 py-2 text-md text-semantic-text-default outline-none", className),
+              style: INPUT_STYLE,
+              placeholderTextColor: theme.color.neutral["400"],
               ...inputExtras,
               ...rest
             }
           ),
-          trailing ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: "ml-2", children: trailing }) : null
+          trailing ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: "ml-2", style: { marginLeft: 8 }, children: trailing }) : null
         ]
       }
     ),
-    error ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { nativeID: describeId, className: "text-sm text-semantic-interactive-destructive", children: error }) : helperText ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { nativeID: describeId, className: "text-sm text-semantic-text-muted", children: helperText }) : null
+    error ? /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.Text,
+      {
+        nativeID: describeId,
+        className: "text-sm text-semantic-interactive-destructive",
+        style: ERROR_STYLE,
+        children: error
+      }
+    ) : helperText ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { nativeID: describeId, className: "text-sm text-semantic-text-muted", style: HELPER_STYLE, children: helperText }) : null
   ] });
 }
 __name(TextInput, "TextInput");
@@ -587,216 +946,6 @@ function Icon({ as: IconComponent, size = "md", color }) {
 }
 __name(Icon, "Icon");
 
-// ../tokens/build/theme.ts
-var theme = {
-  color: {
-    danger: "#ef4444",
-    info: "#3b82f6",
-    neutral: {
-      "100": "#f4f4f5",
-      "200": "#e4e4e7",
-      "300": "#d4d4d8",
-      "400": "#a1a1aa",
-      "50": "#fafafa",
-      "500": "#71717a",
-      "600": "#52525b",
-      "700": "#3f3f46",
-      "800": "#27272a",
-      "900": "#18181b"
-    },
-    primary: {
-      "100": "#dbeafe",
-      "200": "#bfdbfe",
-      "300": "#93c5fd",
-      "400": "#60a5fa",
-      "50": "#f0f7ff",
-      "500": "#3b82f6",
-      "600": "#2563eb",
-      "700": "#1d4ed8",
-      "800": "#1e40af",
-      "900": "#1e3a8a"
-    },
-    success: "#22c55e",
-    warning: "#f59e0b"
-  },
-  fontSize: {
-    "2xl": "24px",
-    "3xl": "30px",
-    "4xl": "36px",
-    lg: "18px",
-    md: "16px",
-    sm: "14px",
-    xl: "20px",
-    xs: "12px"
-  },
-  fontWeight: {
-    bold: "700",
-    medium: "500",
-    regular: "400",
-    semibold: "600"
-  },
-  lineHeight: {
-    normal: "1.4",
-    relaxed: "1.6",
-    tight: "1.2"
-  },
-  radius: {
-    "2xl": "16px",
-    full: "9999px",
-    lg: "8px",
-    md: "6px",
-    none: "0px",
-    sm: "4px",
-    xl: "12px"
-  },
-  semantic: {
-    background: {
-      default: "#fafafa",
-      elevated: "#ffffff",
-      subtle: "#f4f4f5"
-    },
-    border: {
-      default: "#e4e4e7",
-      strong: "#d4d4d8"
-    },
-    interactive: {
-      destructive: "#ef4444",
-      primary: "#2563eb",
-      primaryHover: "#1d4ed8",
-      primaryPressed: "#1e40af"
-    },
-    text: {
-      default: "#18181b",
-      inverted: "#fafafa",
-      muted: "#52525b"
-    }
-  },
-  shadow: {
-    lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)",
-    md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
-    sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)"
-  },
-  spacing: {
-    "0": "0px",
-    "1": "4px",
-    "10": "40px",
-    "12": "48px",
-    "16": "64px",
-    "2": "8px",
-    "20": "80px",
-    "24": "96px",
-    "3": "12px",
-    "4": "16px",
-    "5": "20px",
-    "6": "24px",
-    "8": "32px"
-  }
-};
-var themeDark = {
-  color: {
-    danger: "#ef4444",
-    info: "#3b82f6",
-    neutral: {
-      "100": "#f4f4f5",
-      "200": "#e4e4e7",
-      "300": "#d4d4d8",
-      "400": "#a1a1aa",
-      "50": "#fafafa",
-      "500": "#71717a",
-      "600": "#52525b",
-      "700": "#3f3f46",
-      "800": "#27272a",
-      "900": "#18181b"
-    },
-    primary: {
-      "100": "#dbeafe",
-      "200": "#bfdbfe",
-      "300": "#93c5fd",
-      "400": "#60a5fa",
-      "50": "#f0f7ff",
-      "500": "#3b82f6",
-      "600": "#2563eb",
-      "700": "#1d4ed8",
-      "800": "#1e40af",
-      "900": "#1e3a8a"
-    },
-    success: "#22c55e",
-    warning: "#f59e0b"
-  },
-  fontSize: {
-    "2xl": "24px",
-    "3xl": "30px",
-    "4xl": "36px",
-    lg: "18px",
-    md: "16px",
-    sm: "14px",
-    xl: "20px",
-    xs: "12px"
-  },
-  fontWeight: {
-    bold: "700",
-    medium: "500",
-    regular: "400",
-    semibold: "600"
-  },
-  lineHeight: {
-    normal: "1.4",
-    relaxed: "1.6",
-    tight: "1.2"
-  },
-  radius: {
-    "2xl": "16px",
-    full: "9999px",
-    lg: "8px",
-    md: "6px",
-    none: "0px",
-    sm: "4px",
-    xl: "12px"
-  },
-  semantic: {
-    background: {
-      default: "#18181b",
-      elevated: "#3f3f46",
-      subtle: "#27272a"
-    },
-    border: {
-      default: "#3f3f46",
-      strong: "#52525b"
-    },
-    interactive: {
-      destructive: "#ef4444",
-      primary: "#60a5fa",
-      primaryHover: "#93c5fd",
-      primaryPressed: "#bfdbfe"
-    },
-    text: {
-      default: "#fafafa",
-      inverted: "#18181b",
-      muted: "#a1a1aa"
-    }
-  },
-  shadow: {
-    lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)",
-    md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
-    sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)"
-  },
-  spacing: {
-    "0": "0px",
-    "1": "4px",
-    "10": "40px",
-    "12": "48px",
-    "16": "64px",
-    "2": "8px",
-    "20": "80px",
-    "24": "96px",
-    "3": "12px",
-    "4": "16px",
-    "5": "20px",
-    "6": "24px",
-    "8": "32px"
-  }
-};
-
 exports.Box = Box;
 exports.Button = Button;
 exports.Checkbox = Checkbox;